/* Startscreen: Logo (Emblem + Wortmarke), Einstiegskarte, Fußleiste. Der Hintergrund ist das 3D-Diorama (#gl). */
.screen-menu { align-items: center; justify-content: space-between; padding: 0 16px; }
.screen-menu::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 42%, rgb(1 6 12 / .72) 0%, rgb(1 6 12 / .35) 55%, transparent 100%); }
.menu-inner { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3.2vh, 34px); padding: 16px 0; overflow: auto; }

/* Logo */
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--accent); }
.logo-emblem { width: clamp(120px, 17vw, 200px); height: auto; overflow: visible; filter: drop-shadow(0 0 10px rgb(var(--acc-rgb) / .55)); animation: vb-flicker 6s infinite; }
.lg-ring { transform-box: fill-box; transform-origin: center; animation: vb-spin 60s linear infinite; }
.lg-ring circle:first-child { animation: none; }
.lg-arcs path { stroke-dasharray: 7 5; animation: vb-dash 2.4s linear infinite; }
.lg-arcs .lg-a2 { animation-duration: 3.1s; } .lg-arcs .lg-a3 { animation-duration: 2.8s; animation-direction: reverse; }
.lg-shock { transform-box: fill-box; transform-origin: center; animation: lg-shock 2.4s ease-out infinite; }
.lg-shock2 { transform-box: fill-box; transform-origin: center; animation: lg-shock 2.4s ease-out .5s infinite; }
@keyframes lg-shock { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

.logo-title { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: 4px; }
.lt-vector { position: relative; font: 900 clamp(44px, 8.6vw, 104px)/1 var(--font-display); letter-spacing: .14em; margin-right: -.14em;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-hi) 34%, var(--accent) 62%, var(--accent-dim) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgb(var(--acc-rgb) / .55)); }
.lt-vector::before, .lt-vector::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; -webkit-text-fill-color: currentColor; color: transparent; background: none; }
.lt-vector::before { -webkit-text-fill-color: #ff3d8f; opacity: .7; animation: vb-glitch 7s steps(1) infinite; mix-blend-mode: screen; }
.lt-vector::after { -webkit-text-fill-color: #3dffea; opacity: .6; animation: vb-glitch 7s steps(1) 3.4s infinite reverse; mix-blend-mode: screen; }
.lt-barrage { font: 700 clamp(20px, 3.7vw, 44px)/1 var(--font-display); letter-spacing: .62em; margin-right: -.62em; color: var(--accent-hi); text-shadow: var(--glow-strong); margin-top: .14em; }
.slogan { display: flex; align-items: center; gap: 14px; margin-top: 10px; font: 400 clamp(11px, 1.3vw, 14px) var(--font-mono); letter-spacing: .5em; color: var(--muted); text-transform: uppercase; }
.slogan span { width: clamp(28px, 6vw, 80px); height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.slogan span:last-child { background: linear-gradient(270deg, transparent, var(--accent)); }

/* Einstiegskarte */
.menu-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 22px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.join-row .input-code, .join-row > * { min-width: 0; }
.join-row.row2 { grid-template-columns: 1fr 1fr; }
.menu-foot { position: relative; z-index: 1; width: 100%; background: linear-gradient(0deg, rgb(1 6 12 / .85), transparent); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 0 16px; }
.menu-foot .ver { margin-left: 12px; font-size: 11.5px; color: var(--faint); letter-spacing: .18em; }
@media (max-width: 520px) { .menu-foot .ver { display: none; } .menu-card { padding: 16px; } }
@media (max-height: 640px) { .logo-emblem { width: 100px; } .slogan { display: none; } }

@media (max-width: 480px) {
  .menu-card .btn { padding: 0 12px; letter-spacing: .08em; font-size: 12px; }
  .join-row.row2 { grid-template-columns: 1fr; }
}