/* ── Startscreen: Nachtszene (Basis rechts, Horde links) + Logo ───────────────────────── */
.screen-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #060806; }
.scene { position: absolute; inset: 0; overflow: hidden; }
.sky { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 70%, rgba(90,60,30,.35), transparent 70%), linear-gradient(180deg, #05080B 0%, #0E1A1A 40%, #223326 70%, #34472f 92%, #3a4f33 100%); }
.stars { position: absolute; inset: 0 0 45% 0; opacity: .8;
  background-image: radial-gradient(1.4px 1.4px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 28%, #cfd, transparent), radial-gradient(1.2px 1.2px at 35% 8%, #fff, transparent), radial-gradient(1px 1px at 48% 22%, #dfe, transparent),
    radial-gradient(1.4px 1.4px at 61% 10%, #fff, transparent), radial-gradient(1px 1px at 74% 30%, #cfd, transparent), radial-gradient(1.2px 1.2px at 86% 14%, #fff, transparent), radial-gradient(1px 1px at 93% 26%, #dfe, transparent),
    radial-gradient(1px 1px at 15% 38%, #cfd, transparent), radial-gradient(1.2px 1.2px at 55% 40%, #fff, transparent), radial-gradient(1px 1px at 80% 6%, #dfe, transparent);
  animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .45; } }
.moon { position: absolute; right: 14%; top: 9%; width: clamp(60px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbe6 0%, #e8e2c0 55%, #b8b090 100%); box-shadow: 0 0 60px 18px rgba(230,226,190,.18), 0 0 160px 60px rgba(230,226,190,.08); }
.scene-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72%; }
.base .win { animation: winFlicker 3.7s steps(1) infinite; }
.base .glow { animation: glowPulse 3.7s ease-in-out infinite; }
.base .fire { animation: fireFlick .9s ease-in-out infinite alternate; transform-origin: 330px 270px; }
@keyframes winFlicker { 0%, 100% { opacity: 1; } 18% { opacity: .55; } 22% { opacity: 1; } 61% { opacity: .75; } 64% { opacity: 1; } }
@keyframes glowPulse { 50% { opacity: .65; } }
@keyframes fireFlick { to { transform: scale(1.12, 1.25); opacity: .85; } }
.horde .z { animation: sway var(--d, 3s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { from { transform: rotate(-3deg) translateX(-2px); } to { transform: rotate(3deg) translateX(2px) translateY(-2px); } }
.horde { animation: hordeAdvance 90s linear infinite alternate; }
@keyframes hordeAdvance { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.fog { position: absolute; left: -20%; right: -20%; height: 34%; background: radial-gradient(ellipse at 50% 50%, rgba(120,150,120,.18), transparent 70%); filter: blur(10px); }
.fog-a { bottom: 6%; animation: fogMove 40s linear infinite alternate; }
.fog-b { bottom: 20%; opacity: .6; animation: fogMove 60s linear infinite alternate-reverse; }
@keyframes fogMove { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.embers { position: absolute; inset: 0; pointer-events: none; }
.ember { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffb347; box-shadow: 0 0 6px 2px rgba(255,179,71,.7); opacity: 0; animation: ember var(--dur, 9s) linear var(--delay, 0s) infinite; }
@keyframes ember { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(var(--dx, 40px), -60vh) scale(.2); opacity: 0; } }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.72) 100%); pointer-events: none; }
.grain { position: absolute; inset: 0; opacity: .1; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.menu-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.2vh, 26px); padding: 12px 16px 58px; width: 100%; }
.menu-foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 8px; }
.lang-flag { font-size: 18px; line-height: 1; }

.logo { display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-kicker { font: 600 clamp(14px, 2.2vh, 20px) var(--font-ui); letter-spacing: .5em; text-transform: uppercase; color: var(--amber); text-shadow: 0 0 12px rgba(242,169,59,.5); margin-bottom: 2px; padding-left: .5em; }
.logo-title { display: flex; flex-direction: column; align-items: center; margin: 0; line-height: .82; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.lt-a { font-size: clamp(46px, min(11vh, 11vw), 138px); letter-spacing: .06em; color: var(--bone); text-shadow: 0 3px 0 #000, 0 0 30px rgba(0,0,0,.8); animation: titleIn 1s var(--ease) both; }
.lt-b { font-size: clamp(66px, min(17vh, 17vw), 212px); letter-spacing: .04em; color: var(--red);
  background: linear-gradient(180deg, #ff7a62 0%, #e0453a 42%, #8d1717 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #2a0707) drop-shadow(0 0 22px rgba(209,58,50,.55)); animation: titleIn 1.1s var(--ease) .15s both, flicker 7s linear 2s infinite; }
@keyframes titleIn { from { opacity: 0; transform: translateY(-.25em) scale(1.08); filter: blur(6px); } to { opacity: 1; transform: none; } }
@keyframes flicker { 0%, 17%, 21%, 62%, 64%, 100% { opacity: 1; } 19% { opacity: .55; } 22% { opacity: .85; } 63% { opacity: .65; } }
.tagline { margin-top: clamp(6px, 1.4vh, 14px); color: var(--text-2); font: 600 clamp(15px, 2.3vh, 21px) var(--font-ui); letter-spacing: .12em; text-transform: uppercase; max-width: 92vw; text-shadow: 0 2px 10px #000; }

.menu-card { position: relative; width: min(92vw, 500px); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(20,26,18,.88), rgba(8,11,8,.9)); border: 1px solid var(--line-3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 70px -30px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06); }
.menu-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, #111 10px 20px); opacity: .85; }
.menu-card { padding-top: 26px; }
.menu-secondary { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.join-row { display: flex; gap: 8px; }

@media (max-height: 700px) { .menu-card { padding: 22px 14px 12px; gap: 8px; } .input-lg { height: 46px; font-size: 20px; } .btn-xl { height: 50px; font-size: 26px; } }
@media (max-height: 560px) { .tagline, .logo-kicker { display: none; } .scene-svg { height: 60%; } }
@media (max-width: 520px) { .menu-foot .btn span:not(.lang-flag) { display: none; } .menu-foot .btn { padding: 0 10px; } }