/* ── Startscreen & Logo ─────────────────────────────────────────────────── */
.screen-menu { display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #05051A 0%, #0C0838 46%, #2A0C55 74%, #4A0F5E 100%); }

/* Retro-Sonne am Horizont */
.bg-sun { position: absolute; left: 50%; bottom: 27%; width: min(62vw, 560px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(180deg, #FFD31A 0%, #FF6A3D 42%, #FF2E9A 70%, #8B5CF6 100%); opacity: .5; filter: blur(.4px);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 46% no-repeat, repeating-linear-gradient(#000 0 9px, transparent 9px 14px) bottom / 100% 54% no-repeat;
          mask: linear-gradient(#000, #000) top / 100% 46% no-repeat, repeating-linear-gradient(#000 0 9px, transparent 9px 14px) bottom / 100% 54% no-repeat; }
/* Perspektivisches Gitter, das auf den Betrachter zuläuft */
.bg-grid { position: absolute; left: -60%; right: -60%; top: 73%; height: 120%; transform-origin: 50% 0; transform: perspective(420px) rotateX(64deg);
  background-image: linear-gradient(rgba(255,46,154,.75) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(139,92,246,.75) 1.5px, transparent 1.5px); background-size: 64px 64px;
  animation: gridMove 1.6s linear infinite; -webkit-mask-image: linear-gradient(transparent 0%, #000 34%); mask-image: linear-gradient(transparent 0%, #000 34%); }
@keyframes gridMove { to { background-position: 0 64px, 64px 0; } }
.screen-menu::after { content: ''; position: absolute; left: 0; right: 0; top: 73%; height: 2px; background: linear-gradient(90deg, transparent, #FF2E9A, #19E6FF, #FF2E9A, transparent); box-shadow: 0 0 22px 4px rgba(255,46,154,.55); }
.bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.bg-shapes svg { position: absolute; fill: none; stroke-width: 2; opacity: .5; filter: drop-shadow(0 0 6px currentColor); animation: drift var(--dur) ease-in-out var(--delay) infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--rot)); } }
.scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .35; background: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }

.menu-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2.2vh, 24px); 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; }

/* Logo: kippender Sechseck-Tisch mit kreisendem Ball + Neon-Schriftzug */
.logo { display: flex; flex-direction: column; align-items: center; }
.logo-stage { width: clamp(120px, 25vh, 260px); aspect-ratio: 1; perspective: 720px; margin-bottom: -1.2vh; filter: drop-shadow(0 0 22px rgba(139,92,246,.55)); }
.logo-table { width: 100%; height: 100%; transform-style: preserve-3d; animation: tableTilt 20s ease-in-out infinite; }
.logo-arena { width: 100%; height: 100%; overflow: visible; }
@keyframes tableTilt {
  0%, 100% { transform: rotateX(58deg) rotateZ(0deg); } 25% { transform: rotateX(46deg) rotateZ(90deg); }
  50% { transform: rotateX(62deg) rotateZ(180deg); } 75% { transform: rotateX(50deg) rotateZ(270deg); } }
.logo-arena .floor { fill: rgba(22,10,70,.75); }
.logo-arena .side { animation: sideFlash 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * .77s); }
@keyframes sideFlash { 0%, 100% { opacity: .78; } 7% { opacity: 1; stroke-width: 11px; } 16% { opacity: .85; } }
.logo-arena .bump { fill: #fff; stroke: #FF2E9A; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: bumpPulse 2.3s ease-in-out infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes bumpPulse { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.35); } 30% { transform: scale(1); } }

.logo-title { display: flex; flex-wrap: wrap; justify-content: center; gap: .16em; margin: 0; font: 900 clamp(38px, min(9.6vh, 14vw), 118px)/.98 var(--font-display); font-style: italic; letter-spacing: .02em; transform: skewX(-6deg); }
.lt { display: inline-flex; }
.lt i { font-style: inherit; display: inline-block; animation: letterIn .8s var(--ease) both; }
.lt-a { color: #fff; text-shadow: 0 0 3px #fff, 0 0 12px var(--cyan), 0 0 30px var(--cyan), 0 0 72px rgba(25,230,255,.75); }
.lt-b { color: #fff; text-shadow: 0 0 3px #fff, 0 0 12px var(--pink), 0 0 30px var(--pink), 0 0 72px rgba(255,46,154,.75); }
.lt-a i:nth-child(1) { animation-delay: .05s; } .lt-a i:nth-child(2) { animation-delay: .12s; } .lt-a i:nth-child(3) { animation-delay: .19s; } .lt-a i:nth-child(4) { animation-delay: .26s; }
.lt-b i:nth-child(1) { animation-delay: .33s; } .lt-b i:nth-child(2) { animation-delay: .40s; } .lt-b i:nth-child(3) { animation-delay: .47s; } .lt-b i:nth-child(4) { animation-delay: .54s; } .lt-b i:nth-child(5) { animation-delay: .61s; }
@keyframes letterIn { from { opacity: 0; transform: translateY(-.6em) scale(1.4); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.lt i.fk { animation: letterIn .8s var(--ease) both, flicker 6s linear 2s infinite; }
@keyframes flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20% { opacity: .35; } 23% { opacity: .8; } 63% { opacity: .5; } }
.tagline { margin-top: clamp(4px, 1vh, 10px); color: var(--text-2); font: 600 clamp(14px, 2.2vh, 19px) var(--font-ui); letter-spacing: .1em; text-transform: uppercase; text-align: center; max-width: 92vw; }

.menu-card { width: min(92vw, 520px); display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(20,16,72,.78), rgba(8,8,34,.82)); border: 1px solid var(--line-3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 30px 70px -30px rgba(0,0,0,.9), 0 0 60px rgba(139,92,246,.22), inset 0 1px 0 rgba(255,255,255,.07); }
.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: 640px) { .menu-card { padding: 14px; gap: 10px; } .input-lg { height: 46px; } .btn-xl { height: 50px; } .logo-stage { margin-bottom: -2vh; } }
@media (max-height: 520px) { .tagline { display: none; } }