/* ── Startscreen: Nebel, Glut, Emblem, Karte ─────────────────────────────── */
.screen-menu { display: grid; place-items: center; overflow: auto;
  background: radial-gradient(900px 600px at 78% 8%, rgba(143,120,232,.18), transparent 60%), radial-gradient(800px 520px at 8% 100%, rgba(217,178,90,.12), transparent 62%), linear-gradient(180deg, #0a0812, #0e0b18 55%, #120e1e); }
.bg-mist { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-mist i { position: absolute; left: -30%; width: 160%; height: 40%; background: radial-gradient(ellipse at center, rgba(160,150,200,.11), transparent 65%); filter: blur(24px); animation: drift 38s linear infinite; }
.bg-mist i:nth-child(1) { top: 8%; } .bg-mist i:nth-child(2) { top: 40%; animation-duration: 52s; animation-direction: reverse; opacity: .8; } .bg-mist i:nth-child(3) { top: 66%; animation-duration: 64s; opacity: .7; }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.bg-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-embers i { position: absolute; bottom: -12px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: var(--c, #f0cf86); opacity: 0; box-shadow: 0 0 6px var(--c, #f0cf86);
  animation: ember var(--dur, 12s) linear var(--delay, 0s) infinite; }
@keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .85; } 100% { transform: translate(var(--dx, 30px), -105vh); opacity: 0; } }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 45%, rgba(0,0,0,.6) 100%); }

.menu-inner { position: relative; z-index: 2; width: min(92vw, 470px); display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 26px 0 70px; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.logo-emblem { width: min(64vw, 280px); height: auto; overflow: visible; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)); }
.lg-path { fill: none; stroke: rgba(217,178,90,.16); stroke-width: 16; stroke-linecap: round; }
.lg-stones circle { fill: #3a3350; stroke: #6a5f8c; stroke-width: 1.4; }
.lg-knight { animation: bob 3.2s ease-in-out infinite; transform-origin: 112px 150px; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.lg-gate { animation: portal 4s ease-in-out infinite; } @keyframes portal { 50% { filter: drop-shadow(0 0 8px rgba(143,120,232,.9)); } }
.logo-title { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: -6px; }
.lt-small { font: 500 clamp(14px, 3.4vw, 17px) var(--font-display); letter-spacing: .5em; text-transform: uppercase; color: var(--text-2); padding-left: .5em; }
.lt-big { font: 900 clamp(36px, 10vw, 58px)/1.05 var(--font-display); letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #fff1c8, #d9b25a 55%, #9c7328); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(217,178,90,.25)); }
.tagline { max-width: 420px; color: var(--text-2); font: 500 16px/1.4 var(--font-ui); }

.menu-card { width: 100%; display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(30,26,46,.82), rgba(14,11,22,.86));
  box-shadow: 0 30px 60px -30px #000, inset 0 1px 0 rgba(255,235,190,.06); backdrop-filter: blur(8px); }
.menu-secondary { display: flex; flex-direction: column; gap: 10px; }
.join-row { display: flex; gap: 10px; } .join-row .btn { flex: 1; }
.menu-foot { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 6px; padding: 10px; flex-wrap: wrap; }