/* Rajdhani (500/600/700) und Orbitron (700/800/900) lokal eingebunden
   (assets/fonts/, SIL Open Font License 1.1) statt ueber Google Fonts
   (fonts.googleapis.com/fonts.gstatic.com) - vermeidet die Uebertragung
   der Besucher-IP an Google ohne Einwilligung (DSGVO-Risiko, siehe
   Kommentar in index.html). woff2 zuerst (kleiner, von allen modernen
   Browsern unterstuetzt), woff als Fallback fuer sehr alte Browser. */
@font-face {
    font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('assets/fonts/rajdhani-latin-500-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/rajdhani-latin-500-normal.woff?v=205') format('woff');
}
@font-face {
    font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('assets/fonts/rajdhani-latin-600-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/rajdhani-latin-600-normal.woff?v=205') format('woff');
}
@font-face {
    font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('assets/fonts/rajdhani-latin-700-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/rajdhani-latin-700-normal.woff?v=205') format('woff');
}
@font-face {
    font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('assets/fonts/orbitron-latin-700-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/orbitron-latin-700-normal.woff?v=205') format('woff');
}
@font-face {
    font-family: 'Orbitron'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('assets/fonts/orbitron-latin-800-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/orbitron-latin-800-normal.woff?v=205') format('woff');
}
@font-face {
    font-family: 'Orbitron'; font-style: normal; font-weight: 900; font-display: swap;
    src: url('assets/fonts/orbitron-latin-900-normal.woff2?v=205') format('woff2'),
         url('assets/fonts/orbitron-latin-900-normal.woff?v=205') format('woff');
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #05060a;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #e8f4ff;
    user-select: none;
}

#game-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    display: block;
    cursor: crosshair;
    background: #0c0e14;
    touch-action: none;
}

/* ============ Touch-Steuerung (Joystick) ============ */
.touch-joystick-base {
    position: fixed; width: 110px; height: 110px; border-radius: 50%;
    background: rgba(20,26,36,0.35); border: 2px solid rgba(125,255,224,0.4);
    transform: translate(-50%, -50%); pointer-events: none; z-index: 500;
}
.touch-joystick-knob {
    position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%;
    background: rgba(61,220,151,0.5); border: 2px solid #7dffe0;
    transform: translate(-50%, -50%); box-shadow: 0 0 14px rgba(61,220,151,0.6);
}

.hidden { display: none !important; }

/* ============ HUD ============ */
#hud {
    position: fixed; inset: 0; pointer-events: none;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    z-index: 10;
}

#hud-top-left {
    position: absolute; top: 16px; left: 16px; width: 280px;
}
#hud-top-center {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    text-align: center;
}
#hud-top-right {
    position: absolute; top: 16px; right: 16px; text-align: right;
    font-size: 16px; font-weight: 600; letter-spacing: 1px;
}
#hud-top-right div { text-shadow: 0 0 6px rgba(0,0,0,0.8); margin-bottom: 2px; }
/* Minimap: kleine, feste Groesse oben rechts unter Kills/Credits/Combo -
   dunkler halbtransparenter Hintergrund, dezenter Rahmen im
   Spiel-Farbschema, damit sie sich von der eigentlichen Spielwelt
   dahinter abhebt, ohne selbst zu viel Aufmerksamkeit zu ziehen. */
#minimap-canvas {
    display: block; margin-top: 8px; margin-left: auto;
    border: 1px solid rgba(77,232,255,0.4); border-radius: 4px;
    background: rgba(5,8,12,0.55);
}
/* Errungenschaften-Benachrichtigung: bewusst NICHT die grosse, zentrierte
   showBigText()-Anzeige wiederverwendet, da diese schon fuer "RUN
   TERMINATED"/"NEW BEST" & Co. genutzt wird und beides gleichzeitig
   konkurrieren wuerde. Stattdessen eigene, kleinere Ecken-Benachrichtigung,
   die bei mehreren gleichzeitigen Freischaltungen sauber untereinander
   stapelt (flex-direction: column-reverse - neueste oben). */
#achievement-toast-container {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 200; display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; align-items: center;
}
.achievement-toast {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(120deg, rgba(20,15,5,0.95), rgba(30,20,5,0.95));
    border: 1px solid rgba(255,200,77,0.7);
    border-radius: 6px; padding: 10px 18px;
    box-shadow: 0 0 20px rgba(255,200,77,0.4);
    opacity: 0; transform: translateY(-20px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.achievement-toast.show { opacity: 1; transform: translateY(0); }
.achievement-toast-icon { font-size: 26px; }
.achievement-toast-text { text-align: left; }
.achievement-toast-label {
    font-size: 11px; letter-spacing: 1.5px; color: #ffcd85;
    font-weight: 700; text-transform: uppercase;
}
.achievement-toast-name { font-size: 15px; font-weight: 700; color: #ffe8c2; }

/* Willkommensbonus-Banner: ECHTES Modal (nicht automatisch verschwindend
   wie showBigText/Achievement-Toast) - blockiert die Bedienung, bis
   explizit auf OK geklickt wird. Grossformatig und kraeftig Gelb, damit es
   sich klar von allen anderen (eher dezenten) Benachrichtigungen im Spiel
   abhebt - ein einmaliges Geschenk-Ereignis soll sich auch so anfuehlen. */
#welcome-bonus-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,10,0.85);
}
#welcome-bonus-banner {
    max-width: 520px; width: 90vw; text-align: center;
    background: linear-gradient(150deg, #3a2e00 0%, #4a3a00 50%, #2e2400 100%);
    border: 2px solid #ffd24d;
    border-radius: 14px; padding: 40px 36px;
    box-shadow: 0 0 60px rgba(255,210,77,0.5), 0 0 120px rgba(255,210,77,0.25);
    animation: welcomeBonusPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes welcomeBonusPop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.welcome-bonus-icon { font-size: 56px; margin-bottom: 8px; }
#welcome-bonus-banner h2 {
    font-size: 26px; letter-spacing: 2px; color: #fff6d9;
    text-shadow: 0 0 18px rgba(255,210,77,0.9);
    margin-bottom: 16px;
}
#welcome-bonus-text {
    font-size: 17px; line-height: 1.5; color: #ffefc2;
    margin-bottom: 28px;
}
#welcome-bonus-text b { color: #ffd24d; }
#btn-welcome-bonus-ok {
    background: #ffd24d; color: #2e2400; border-color: #ffd24d;
    font-size: 16px; padding: 14px 48px; font-weight: 700;
}
#btn-welcome-bonus-ok:hover { background: #ffdd70; box-shadow: 0 0 24px rgba(255,210,77,0.6); }

/* Combo-Anzeige: fruehere Version pulsierte gross in der Bildschirmmitte
   und wurde als stoerend empfunden - jetzt stattdessen dezent unter
   KILLS/CREDITS eingereiht, gleiche Groesse wie die Zeilen darueber,
   ohne Animation. Bleibt wie zuvor nur sichtbar, solange player.combo > 1
   (siehe UI.updateHUD()). */
#combo-value { color: #ffd24d; }

#hud-bottom-left { position: absolute; bottom: 16px; left: 16px; }
#hud-bottom-center {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 20px;
}
#hud-bottom-right { position: absolute; bottom: 16px; right: 16px; text-align: right; }

.bar {
    width: 100%; height: 12px; background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
    overflow: hidden; margin-bottom: 4px;
}
.shield-bar { height: 6px; }
.bar-fill {
    height: 100%; width: 100%;
    transition: width 0.15s ease-out;
}
.hp-bar .bar-fill { background: linear-gradient(90deg, #ff4d5e, #ff8a6b); box-shadow: 0 0 8px #ff4d5e; }
.shield-bar .bar-fill { background: linear-gradient(90deg, #4dc8ff, #7de0ff); box-shadow: 0 0 6px #4dc8ff; }
.xp-bar { height: 8px; }
.xp-bar .bar-fill { background: linear-gradient(90deg, #ffd24d, #fff08a); box-shadow: 0 0 6px #ffd24d; }
.bar-label { font-size: 13px; font-weight: 600; margin-bottom: 2px; text-shadow: 0 0 6px black; }
.level-row { font-size: 13px; font-weight: 700; margin: 4px 0 2px; color: #ffd24d; text-shadow: 0 0 6px black; }
/* Eigenes, kleines Label direkt ueber dem XP-Balken: "LVL X" allein direkt
   ueber dem gelben Balken liess den Balken selbst wie eine
   "LVL"-Anzeige wirken, obwohl er den Fortschritt bis zum naechsten
   Level-Aufstieg (naechstes Upgrade) zeigt, nicht die Levelzahl selbst -
   "XP" schafft hier Klarheit, analog zum "HP"-Label ueber der HP-Leiste. */
.xp-label { font-size: 10px; font-weight: 700; margin-bottom: 1px; color: #ffd24d; opacity: 0.85; letter-spacing: 1px; text-shadow: 0 0 6px black; }

#stage-label {
    font-size: 12px; font-weight: 700; letter-spacing: 3px; color: #ffd24d;
    text-shadow: 0 0 6px black; margin-bottom: 2px;
}
#mission-timer {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 22px; font-weight: 700;
    color: #7dffe0; text-shadow: 0 0 10px rgba(61,220,151,0.8);
    letter-spacing: 2px;
}
#boss-bar-wrap { width: 420px; margin-top: 6px; }
#boss-name { font-size: 14px; font-weight: 700; color: #ff6b6b; letter-spacing: 3px; margin-bottom: 3px; }
.boss-bar { height: 14px; border-color: #ff4d4d55; }
.boss-bar .bar-fill { background: linear-gradient(90deg, #ff4d4d, #ff9d4d); box-shadow: 0 0 10px #ff4d4d; }

#echo-list { display: flex; gap: 6px; margin-bottom: 4px; }
.echo-chip {
    padding: 3px 8px; border-radius: 3px; font-size: 12px; font-weight: 700;
    background: rgba(0,0,0,0.5); border: 1px solid var(--c); color: var(--c);
    text-shadow: 0 0 6px var(--c);
}
.echo-chip-empty { font-size: 12px; opacity: 0.5; }
#echo-command { font-size: 12px; font-weight: 600; opacity: 0.85; letter-spacing: 1px; }
#echo-command-value { color: #4de8ff; }

.cooldown-item { text-align: center; width: 130px; position: relative; }
.cooldown-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; opacity: 0.8; }
.cd-bar { height: 8px; }
.touch-cooldown-btn {
    display: none; position: absolute; inset: -14px -10px; background: transparent;
    border: none; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent;
}
body.touch-device .touch-cooldown-btn { display: block; }
.cd-fill { background: linear-gradient(90deg, #3ddc97, #7dffe0); box-shadow: 0 0 6px #3ddc97; }

#weapon-list { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.weapon-chip {
    font-size: 12px; font-weight: 600; padding: 2px 8px;
    background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.15); border-radius: 3px;
}

#debug-overlay {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(50px);
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; line-height: 1.5;
    background: rgba(0,0,0,0.75); border: 1px solid rgba(255,210,77,0.4);
    padding: 8px 14px; border-radius: 4px; color: #ffd24d; z-index: 15;
    white-space: pre; pointer-events: none;
}

#tutorial-hint {
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
    background: rgba(10,14,20,0.85); border: 1px solid #3ddc9777;
    padding: 10px 22px; border-radius: 6px; font-size: 15px; font-weight: 600;
    letter-spacing: 1px; z-index: 20; opacity: 0; transition: opacity 0.4s;
}
#tutorial-hint.show { opacity: 1; }

#big-text {
    position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 25; opacity: 0; transition: opacity 0.4s;
    pointer-events: none;
}
#big-text.show { opacity: 1; }
.big-text-line {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 900; letter-spacing: 3px;
    text-shadow: 0 0 20px rgba(125,255,224,0.8);
}
.line-0 { font-size: 42px; color: #ff6b6b; }
.line-1 { font-size: 22px; color: #7dffe0; margin-top: 10px; }

/* ============ SCREENS ============ */
.screen {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, rgba(15,20,30,0.92), rgba(5,6,10,0.97));
    z-index: 50;
    overflow-y: auto;
    /* [GROSSBILDSCHIRM-SKALIERUNG] Schriftgroesse waechst/schrumpft
       stufenlos mit der Bildschirmbreite - alle Texte innerhalb der
       Menue-Bildschirme (dieser Bereich hier, SCREENS im CSS - NICHT
       das getrennte, gleichrangige #hud-Element waehrend des Spielens,
       das bewusst unveraendert bleibt und bereits eigenstaendig ueber
       die Canvas-Aufloesung skaliert) wurden auf "em" statt fester
       Pixel-Werte umgestellt, wachsen/schrumpfen dadurch automatisch
       mit dieser einen zentralen Zeile mit. "em" (relativ zum
       naechsten Vorfahren mit eigener Schriftgroesse) statt "rem"
       (immer relativ zur globalen Root) bewusst gewaehlt, damit die
       Skalierung wirklich nur innerhalb von .screen-Elementen wirkt
       und nicht versehentlich auch unbeteiligte Bereiche wie das HUD
       "waehrend des Spielens" oder Laufzeit-Overlays (z.B.
       Levelaufstieg-Text, Erfolge-Toasts) mit veraendert, die eigene,
       unveraenderte Schriftgroessen haben.
       Ohne diese Zeile blieb die Menue-Oberflaeche bei 1080p/2160p
       winzig und auf einen kleinen Bereich in der Bildschirmmitte
       beschraenkt, unabhaengig von der tatsaechlich verfuegbaren
       Flaeche - genau so im Chat gemeldet.
       [NACHTRAG] Der MIN-Wert (untere Grenze von clamp()) lag
       urspruenglich bei einer Referenzbreite von 1280px verankert -
       darunter blieb die Schriftgroesse bis zum mobilen Umbruch bei
       700px komplett EINGEFROREN (flach bei 16px), da clamp() unter-
       halb des MIN-Werts nicht weiter schrumpft. Beim Verkleinern des
       Browserfensters (LIVE, ohne Neuladen) wirkte dadurch scheinbar
       "nichts passiert" im gesamten Bereich zwischen 700px und
       1280px - genau so im Chat gemeldet, per direktem Live-Resize-
       Test (setViewportSize OHNE Seiten-Reload) auch tatsaechlich so
       reproduziert (1920px -> korrekt 20.5px, aber 1000px UND 900px
       beide identisch bei 16px). Der Referenzpunkt "unveraendert" liegt
       jetzt bei 700px (direkter, luecken- und sprungloser Uebergang
       zum mobilen mob@media-Regelwerk) statt bei 1280px - dadurch
       schrumpft/waechst die Schrift jetzt durchgehend ueber den
       GESAMTEN Bereich zwischen 700px und 3840px+, ohne toten Bereich
       in der Mitte. Nebeneffekt (bewusst in Kauf genommen, passend zur
       generellen Rueckmeldung "insgesamt zu klein" aus fruaeheren
       Nachrichten): bei ~1280px ist die Schrift dadurch minimal
       groesser als zuvor (ca. 19px statt vorher exakt 16px). Waechst
       weiterhin bis 34px bei 3840px+ (4K/Ultra-Wide). Das bereits
       bestehende, eigenstaendige @media(max-width:700px)-Regelwerk
       fuer Handys weiter unten in dieser Datei bleibt unveraendert
       (bewusst eigene, engere Werte fuer sehr schmale Bildschirme). */
    /* [NACHTRAG 2] Reine Breiten-basierte Skalierung fuehrte dazu, dass
       bei einem NICHT-Vollbild-Browserfenster auf einem 1080p-Monitor
       (Browserleiste/Tabs/Taskleiste nehmen echte Bildschirmhoehe weg,
       tatsaechlich verfuegbare Hoehe z.B. nur 900-1000px statt volle
       1080px) der Inhalt nicht mehr komplett hineinpasste - ein
       Scrollbalken erschien, obwohl "genug Platz" wirkte (die BREITE
       war ja weiterhin ausreichend, nur die HOEHE war eingeschraenkt) -
       genau so im Chat gemeldet, direkt bei mehreren typischen
       Fenstergroessen reproduziert (1920x950/1000, 1600x900 liefen
       alle ueber, nur echtes Vollbild bei exakt 1920x1080 passte
       ohne Scrollen). min() kombiniert die bestehende Breiten-Formel
       mit einer zusaetzlichen Hoehen-Formel - die kleinere von beiden
       gewinnt, damit bei eingeschraenkter Hoehe automatisch weniger
       stark skaliert wird, auch wenn die Breite alleine mehr Wachstum
       erlauben wuerde. Hoehen-Koeffizient (2.13vh) so gewaehlt, dass er
       bei echtem 1920x1080-Vollbild (das bereits bestaetigt
       ueberlaufsfrei funktioniert) NICHT einschraenkend wirkt (liefert
       dort ca. denselben Wert wie die reine Breiten-Formel), bei
       kleinerer Hoehe aber automatisch zurueckhaltender skaliert. */
    font-size: clamp(16px, min(12px + 0.573vw, 1.95vh), 34px);
}
/* Pause-Bildschirm hat garantiert IMMER nur einen kleinen, festen Inhalt
   (Titel + 4 Buttons, nie variabel/dynamisch) - passt bei jeder
   realistischen Fenstergroesse problemlos, ein Scrollbalken ist hier nie
   noetig. Statt weiter nach dem exakten Ausloeser eines gemeldeten,
   in eigenen Tests ueber viele Fenstergroessen nicht reproduzierbaren
   Scrollbalkens zu suchen: overflow explizit unterbunden, damit fuer
   diesen Bildschirm unter keinen Umstaenden einer erscheinen kann,
   unabhaengig von der genauen Ursache. */
#screen-pause { overflow: hidden; }

.menu-bg-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(61,220,151,0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(77,232,255,0.08), transparent 40%);
    animation: bgPulse 6s ease-in-out infinite alternate;
}
@keyframes bgPulse { from { opacity: 0.6; } to { opacity: 1; } }

#screen-main-menu {
    background:
        radial-gradient(ellipse at center, rgba(4,6,10,0.06) 0%, rgba(3,4,8,0.3) 75%),
        url('assets/images/menu-bg.jpg?v=205') center 32% / cover no-repeat;
}
/* [NACHTRAG] Bisher wurde der gesamte Inhalt (Logo bis Copyright-Zeile)
   rein per Flexbox (align-items: center in .screen) vertikal
   zentriert - dadurch blieb oberhalb des Logos oft spuerbar viel
   ungenutzter Platz, waehrend unterhalb (Copyright, rechtliche Links)
   der Rand naeher war. Im Chat als "noch viel Platz oben" gemeldet,
   Logo soll etwas nach oben ruecken. Moderater, negativer margin-top
   in "em" (skaliert mit der gleichen [GROSSBILDSCHIRM-SKALIERUNG] wie
   der Rest von .screen) verschiebt den GESAMTEN Block ein Stueck nach
   oben, OHNE die bewaehrte Flexbox-Zentrierung selbst zu ersetzen -
   bewusst moderat gewaehlt (nicht bis ganz nach oben), da "etwas nach
   oben" gewuenscht war, nicht eine komplette Neuausrichtung. Die
   bereits bestehende, eigene Regel fuer sehr schmale Bildschirme
   (@media max-width:700px weiter unten) bleibt davon unberuehrt -
   groessere Spezifitaet durch die spaetere Position in der Kaskade. */
#screen-main-menu .menu-content { margin-top: -3.5em; }
/* Logo-Bild (eigenes <img>, kein in den Hintergrund eingebranntes Bild
   mehr) - Teil von .menu-content, wird dadurch zusammen mit Banner/
   Buttons als ein Block vertikal zentriert (siehe .screen). Groesse in
   "em" UND vw gemischt (min()), damit es sowohl mit der [GROSSBILDSCHIRM-
   SKALIERUNG] auf .screen mitwaechst als auch auf sehr schmalen
   Bildschirmen nie ueber den Rand hinausragt. */
.menu-logo {
    display: block; margin: 0 auto 1.2em; width: 100%;
    /* [NACHTRAG 1] 30em war bei der max. Root-Schriftgroesse von frueher
       26px nur 780px - auf sehr breiten Bildschirmen (z.B. 3815x1839)
       wirkte das Logo dadurch weiterhin klein, obwohl die Skalierung
       schon an ihrer Obergrenze war. Auf 38em erhoeht (bei jetzt max.
       34px Root-Schriftgroesse ergibt das bis zu 1292px).
       [NACHTRAG 2, WIEDER ENTFERNT] Bei SEHR geringer Fensterhoehe (z.B.
       1366x768) war testweise eine zusaetzliche 54vh-Hoehen-Bremse
       ergaenzt worden, um einen kleinen Rest-Ueberlauf (ca. 9px) zu
       schliessen. Diese Bremse erwies sich als zu aggressiv fuer normale
       bis breite Bildschirme: bei z.B. 1914x957 (im Chat gemeldet, per
       Screenshot bestaetigt) griff 54vh dort ALS BINDENDE Grenze (517px)
       noch VOR der eigentlich schon vorhandenen, bereits hoehen-
       bewussten Root-Schriftgroessen-Skalierung (siehe .screen weiter
       oben - deren eigene Hoehen-Beruecksichtigung reicht allein aus,
       diese zusaetzliche Bremse war redundant und richtete mehr Schaden
       an normalen/breiten Bildschirmen an, als sie am extremen 1366x768-
       Einzelfall (dort faengt ohnehin .screen{overflow-y:auto} den
       minimalen Rest-Ueberlauf zuverlaessig und unauffaellig ab) noch
       nutzte. Deshalb wieder entfernt - min() nur noch aus Breite (90vw)
       und der bereits hoehen-bewussten Root-Schriftgroesse (38em). */
    max-width: min(90vw, 38em, 75vh);
    height: auto;
    filter: drop-shadow(0 0 20px rgba(77,232,255,0.35));
}

/* Admin-Konten haben einen siebten Button (ADMIN-PANEL), wodurch das
   Menue insgesamt hoeher ist als bei normalen Konten - die generelle
   Zentrierung samt Scroll-Faehigkeit von .screen faengt das inzwischen
   ohne eigene Sonderregel ab (getestet, siehe README), seit das Logo
   ein eigenes Bild-Element statt eines im Hintergrund eingebrannten
   Titels ist. */

/* Buttons im Hauptmenü an die Farben des Hintergrundbilds angepasst:
   eisiges Cyan/Violett (linke/mittlere/rechte Echo-Gestalten) mit warmem
   Ember-Akzent (rechte Flammen-Gestalt) für den PLAY-Button. */

#screen-main-menu .btn {
    border-color: rgba(140,190,255,0.35);
    /* Rajdhani hat lokal nur echte Schriftdateien fuer 500/600/700 (siehe
       @font-face oben) - ein angefordertes font-weight:800 hat KEINE
       eigene Datei und faellt je nach Browser uneinheitlich auf 700
       zurueck oder synthetisiert eigenmaechtig einen Fake-Bold-Effekt,
       was optisch nicht wirklich "fett" genug wirkte (im Chat so
       gemeldet). Jetzt explizit auf das tatsaechlich vorhandene,
       schwerste echte Gewicht (700) gesetzt - garantiert dieselbe,
       konsistente Darstellung in jedem Browser - PLUS ein duenner
       Text-Strich in der jeweiligen Textfarbe, der die Buchstaben
       zusaetzlich optisch verstaerkt (ueblicher Kniff, wenn eine
       Schriftart selbst kein echtes Fett-/Schwarz-Gewicht mitbringt). */
    font-weight: 700;
    -webkit-text-stroke: 0.4px currentColor;
}
#screen-main-menu .btn:hover {
    background: rgba(122,168,255,0.16); border-color: #8ab4ff;
    box-shadow: 0 0 14px rgba(138,180,255,0.4);
}
#screen-main-menu .btn-primary {
    background: rgba(255,138,77,0.2); border-color: #ff8a4d; color: #fff1e6;
}
#screen-main-menu .btn-primary:hover {
    background: rgba(255,138,77,0.38); box-shadow: 0 0 16px rgba(255,138,77,0.45);
}

.menu-content { position: relative; text-align: center; z-index: 2; }

.copyright-notice {
    /* Frueher "position: absolute; bottom: 18px" - fest an den unteren
       Bildschirmrand gepinnt, UNABHAENGIG vom eigentlichen Menue-Inhalt
       darueber. Das kollidierte zuverlaessig mit dem Login-Bonus-Banner,
       sobald der Inhalt insgesamt hoch genug wurde - z.B. bei
       Admin-Konten (siebter "ADMIN-PANEL"-Button, im echten Test mit
       einem Admin-Account bei ~830px Fensterhoehe reproduziert und
       bestaetigt) oder generell bei nicht-maximierten Browserfenstern.
       Jetzt Teil des normalen Inhaltsflusses (letztes Element in
       .menu-content, siehe index.html) statt fest positioniert - kann
       dadurch nie mehr mit dem Inhalt darueber kollidieren, sondern
       reiht sich einfach passend darunter ein; bei zu wenig Platz
       greift ganz normal das bestehende Scrollen (.screen{overflow-y:
       auto}). */
    margin-top: 14px;
    text-align: center; font-size: 1.125em; font-weight: 700; letter-spacing: 1px;
    color: rgba(232,244,255,0.75); text-shadow: 0 0 10px rgba(0,0,0,0.8);
}

.game-title {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 4.5em; font-weight: 900;
    letter-spacing: 10px; color: #7dffe0;
    text-shadow: 0 0 30px rgba(61,220,151,0.7), 0 0 60px rgba(61,220,151,0.3);
    animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
    from { text-shadow: 0 0 30px rgba(61,220,151,0.6), 0 0 60px rgba(61,220,151,0.25); }
    to { text-shadow: 0 0 45px rgba(77,232,255,0.9), 0 0 90px rgba(77,232,255,0.4); }
}

.menu-buttons {
    display: flex; flex-direction: column; gap: 12px; margin: 0 auto;
    width: 320px;
}
/* Die proportionale Breiten-Skalierung (waechst mit der Bildschirmbreite
   mit, bis zu 460px) gilt bewusst NUR im Hauptmenue, wo sie fuer das
   Verhaeltnis zum ebenfalls wachsenden Schriftzug gedacht war. Andere
   Bildschirme teilen sich zwar dieselbe .menu-buttons-Klasse (Pause,
   Ergebnis-Bildschirm), sitzen aber in eigenen, kleineren Panels mit
   fester max-width (z.B. .panel-small = 420px beim Pause-Fenster) - der
   pauschale Ansatz liess die Buttons dort bei breiten Fenstern (ab ca.
   1900px, wo 22vw > 420px wird) ueber den Panel-Rand hinausragen und
   einen unnoetigen horizontalen Scrollbalken erzeugen (per Screenshot
   gemeldet und bestaetigt - meine erste Korrektur hatte faelschlich nur
   den AEUSSEREN Screen-Container abgesichert, nicht dieses innere,
   geteilte Breitenproblem). */
#screen-main-menu .menu-buttons {
    width: clamp(280px, 22vw, 460px);
}

.btn {
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 1em; letter-spacing: 2px;
    padding: 12px 20px; background: rgba(20,26,36,0.8); color: #e8f4ff;
    border: 1px solid rgba(125,255,224,0.35); border-radius: 4px;
    cursor: pointer; transition: all 0.15s ease;
}
.btn:hover { background: rgba(61,220,151,0.18); border-color: #7dffe0; box-shadow: 0 0 14px rgba(61,220,151,0.35); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: rgba(61,220,151,0.25); border-color: #3ddc97; color: #eafff5; }
.btn-primary:hover { background: rgba(61,220,151,0.4); }
.btn-danger { border-color: #ff5d5d55; color: #ffb4b4; }
.btn-danger:hover { background: rgba(255,77,77,0.15); border-color: #ff4d4d; }
.btn-small { padding: 6px 14px; font-size: 0.8125em; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn:disabled:hover { background: rgba(20,26,36,0.8); box-shadow: none; transform: none; }

.weekend-event-banner { margin-bottom: 18px; }
.weekend-banner-content {
    display: block; width: 100%; border-radius: 8px; padding: 14px 18px; text-align: center;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.weekend-banner-content.inactive {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(125,255,224,0.35);
    color: #cfe8f0; font-size: 1.1875em; font-weight: 600; letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(125,255,224,0.15);
    animation: weekendBannerPulseIdle 2.8s ease-in-out infinite;
}
@keyframes weekendBannerPulseIdle {
    0%, 100% { box-shadow: 0 0 8px rgba(125,255,224,0.12); border-color: rgba(125,255,224,0.3); }
    50% { box-shadow: 0 0 20px rgba(125,255,224,0.35); border-color: rgba(125,255,224,0.7); }
}
button.weekend-banner-content.active {
    background: linear-gradient(135deg, rgba(255,140,40,0.22), rgba(255,60,140,0.22));
    border: 1px solid rgba(255,170,80,0.6); cursor: pointer;
    box-shadow: 0 0 18px rgba(255,140,40,0.25);
    animation: weekendBannerPulse 1.6s ease-in-out infinite;
}
button.weekend-banner-content.active:hover { box-shadow: 0 0 28px rgba(255,140,40,0.45); }
@keyframes weekendBannerPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255,140,40,0.25); transform: scale(1); }
    50% { box-shadow: 0 0 38px rgba(255,140,40,0.65); transform: scale(1.015); }
}
.weekend-banner-title {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1.3125em; font-weight: 800; letter-spacing: 1px; color: #ffd24d;
}
.weekend-banner-sub { font-size: 1em; font-weight: 600; margin-top: 5px; color: #e8f4ff; opacity: 0.95; }

.login-streak-banner { margin-top: 14px; }
.login-streak-content {
    display: block; width: 100%; border-radius: 6px; padding: 12px 16px; text-align: center;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 1.125em; font-weight: 700; letter-spacing: 0.3px;
    background: rgba(255,210,77,0.05); border: 1px solid rgba(255,210,77,0.35); color: #ffe4a3;
    box-shadow: 0 0 10px rgba(255,210,77,0.12);
    animation: loginStreakPulseIdle 2.6s ease-in-out infinite;
}
@keyframes loginStreakPulseIdle {
    0%, 100% { box-shadow: 0 0 8px rgba(255,210,77,0.12); border-color: rgba(255,210,77,0.3); }
    50% { box-shadow: 0 0 18px rgba(255,210,77,0.3); border-color: rgba(255,210,77,0.6); }
}
button.login-streak-content.claimable {
    background: linear-gradient(135deg, rgba(255,210,77,0.32), rgba(255,140,40,0.28));
    border: 2px solid rgba(255,210,77,0.85); color: #ffd24d; cursor: pointer; font-size: 1.3125em; font-weight: 800;
    box-shadow: 0 0 18px rgba(255,210,77,0.4);
    animation: loginStreakPulse 1.4s ease-in-out infinite;
}
button.login-streak-content.claimable:hover { box-shadow: 0 0 32px rgba(255,210,77,0.7); }
@keyframes loginStreakPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255,210,77,0.4); transform: scale(1); }
    50% { box-shadow: 0 0 38px rgba(255,210,77,0.75); transform: scale(1.02); }
}

.menu-currency { margin-top: 26px; font-size: 0.9375em; font-weight: 600; color: #ffd24d; letter-spacing: 1px; }

/* Dezenter Hinweis, direkt unter dem letzten Menue-Button (LEADERBOARD
   bzw. ADMIN-PANEL bei Admin-Konten) - zeigt sich nur, wenn eine
   browserspezifische Optimierung tatsaechlich aktiv ist (aktuell nur
   Firefox, siehe updateBrowserOptimizationNotice() in game.js). Bewusst
   klein/gedaempft gehalten, da es sich um eine informative Randnotiz
   handelt, nicht um eine wichtige Handlungsaufforderung wie z.B. den
   Wochenend-Event-Banner. */
.browser-optimization-notice {
    margin-top: 10px; font-size: 0.75em; color: #7dffe0; opacity: 0.75;
    letter-spacing: 0.5px; text-align: center;
}

.menu-account-row {
    margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 12px;
    font-size: 0.8125em; color: #a8bccb;
}
.menu-account-row .btn-small { padding: 5px 12px; font-size: 0.75em; }

.panel {
    background: rgba(12,16,24,0.92); border: 1px solid rgba(125,255,224,0.25);
    border-radius: 8px; padding: 1.875em 2.5em; max-width: clamp(640px, 91vw, 1200px); width: 90%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
/* [GROSSBILDSCHIRM-SKALIERUNG] Feste Breiten (640/820/420px) liessen die
   Panels bei 1080p/2160p winzig und auf einen kleinen Bereich in der
   Bildschirmmitte beschraenkt wirken, unabhaengig von der tatsaechlich
   verfuegbaren Flaeche drumherum - genau so im Chat gemeldet. clamp()
   erlaubt stufenloses Wachstum mit der Bildschirmbreite (MIN-Wert
   entspricht dem bisherigen, unveraenderten Verhalten auf "normalen"
   Bildschirmen, MAX-Wert verhindert unleserlich breite Zeilen auf sehr
   grossen/Ultra-Wide-Bildschirmen).
   [NACHTRAG 1] Die urspruenglich gewaehlten MAX-Werte (960/1200/600px,
   Root-Schriftgroesse max. 26px) waren zu konservativ fuer sehr breite
   Bildschirme angesetzt - auf einem 3815x1839 Bildschirm (deutlich
   breiteres Seitenverhaeltnis als normales 16:9-4K, also mehr Breite
   bei gleichzeitig WENIGER Hoehe) wirkte dadurch weiterhin alles zu
   klein, obwohl die Skalierung technisch schon an ihrer Obergrenze
   angekommen war - genau so im Chat gemeldet und per Screenshot
   bestaetigt. Alle MAX-Werte grosszuegiger gefasst (siehe auch .screen
   oben sowie .menu-logo weiter unten).
   [NACHTRAG 2] Der vw-Koeffizient war urspruenglich auf eine Referenz-
   breite von 1280px zugeschnitten - darunter blieb max-width bis zum
   mobilen Umbruch bei 700px komplett bei 640px EINGEFROREN (clamp()
   schrumpft unterhalb des MIN-Werts nicht weiter). Beim Verkleinern
   des Browserfensters wirkte dadurch scheinbar "nichts passiert" -
   genau wie beim analogen Root-Schriftgroessen-Problem in .screen
   oben (siehe dortiger, ausfuehrlicherer Kommentar). Koeffizient auf
   den mobilen Umbruch bei 700px umgerechnet (640/700 ≈ 91vw), dadurch
   durchgehendes Schrumpfen/Wachsen ohne toten Bereich in der Mitte.
   Padding oben in .panel bewusst auf "em" umgestellt statt fest, damit
   der Innenabstand mit der ebenfalls jetzt skalierenden Schrift (siehe
   .screen) mitwaechst.
   */
.panel-wide { max-width: clamp(820px, 117vw, 1450px); }
.panel-small { max-width: clamp(420px, 60vw, 700px); text-align: center; }

/* ============ Auth (Login / Register) ============ */
.panel-auth { max-width: 400px; text-align: center; position: relative; }
.lang-switch { position: absolute; top: -6px; right: 0; display: flex; gap: 4px; }
.lang-btn {
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 0.6875em; letter-spacing: 1px;
    padding: 4px 9px; background: rgba(20,26,36,0.8); color: #a8bccb;
    border: 1px solid rgba(125,255,224,0.25); border-radius: 3px; cursor: pointer;
    transition: all 0.15s ease;
}
.lang-btn:hover { background: rgba(61,220,151,0.15); color: #eafff5; }
.lang-btn.active { background: rgba(61,220,151,0.25); color: #eafff5; border-color: #3ddc97; }
.auth-title { font-size: 2.125em; margin-bottom: 22px; letter-spacing: 4px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.auth-tab {
    flex: 1; padding: 10px; font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700;
    font-size: 0.875em; letter-spacing: 1px; background: rgba(20,26,36,0.8);
    color: #a8bccb; border: 1px solid rgba(125,255,224,0.25); cursor: pointer;
    transition: all 0.15s ease;
}
.auth-tab:first-child { border-radius: 4px 0 0 4px; }
.auth-tab:last-child { border-radius: 0 4px 4px 0; }
.auth-tab.active { background: rgba(61,220,151,0.25); color: #eafff5; border-color: #3ddc97; }
.auth-form { display: flex; flex-direction: column; text-align: left; }
.auth-form label { font-size: 0.75em; font-weight: 700; letter-spacing: 1px; margin: 12px 0 5px; color: #a8bccb; }
/* Honeypot-Feld: absichtlich per Position statt display:none unsichtbar
   gemacht (manche automatisierten Formular-Ausfueller ueberspringen
   gezielt display:none-Felder, ausserhalb des sichtbaren Bereichs
   positionierte Felder dagegen seltener) - fuer Menschen aber komplett
   unsichtbar und nicht anklickbar. */
.auth-honeypot {
    position: absolute; left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}
.auth-checkbox-label {
    display: flex !important; align-items: flex-start; gap: 8px; margin: 14px 0 !important;
    font-size: 0.75em !important; font-weight: 500 !important; letter-spacing: normal !important;
    text-transform: none; line-height: 1.5; color: #cfe0ec; cursor: pointer;
}
.auth-checkbox-label input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #3ddc97; cursor: pointer; }
.auth-checkbox-label a { color: #7dffe0; text-decoration: underline; }
.auth-checkbox-label a:hover { color: #b8fff0; }
.shop-withdrawal-consent { margin: 14px 0; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; }
.auth-form input {
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 0.9375em; padding: 10px 12px;
    background: rgba(8,10,15,0.8); border: 1px solid rgba(125,255,224,0.3); border-radius: 4px;
    color: #e8f4ff; outline: none; transition: border-color 0.15s ease;
}
.auth-form input:focus { border-color: #7dffe0; }
.auth-submit { margin-top: 20px; width: 100%; }
.auth-error {
    min-height: 18px; color: #ff8a8a; font-size: 0.8125em; font-weight: 600;
    margin-top: 10px; text-align: center;
}
.auth-success {
    min-height: 18px; color: #7dffe0; font-size: 0.8125em; font-weight: 600;
    margin-top: 10px; text-align: center; line-height: 1.4;
}
.auth-link-btn {
    background: none; border: none; color: #8ab4ff; font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.75em; font-weight: 600; letter-spacing: 0.5px; cursor: pointer;
    margin-top: 12px; text-align: center; text-decoration: underline; padding: 4px;
}
.auth-link-btn:hover { color: #b8d4ff; }
.auth-hint { margin-top: 20px; font-size: 0.75em; opacity: 0.6; line-height: 1.5; }
.legal-links { margin-top: 14px; font-size: 0.75em; opacity: 0.6; display: flex; justify-content: center; gap: 8px; align-items: center; }
.legal-link-btn {
    background: none; border: none; color: inherit; font: inherit; cursor: pointer;
    text-decoration: underline; padding: 0;
}
.legal-link-btn:hover { opacity: 0.8; }
/* Auf der Hauptmenue-Seite deutlich sichtbarer als die dezenten Links im
   Login-Bildschirm/den Einstellungen - eigener Rahmen statt reinem
   Unterstrich, groesserer Text, hoehere Grund-Opazitaet. */
.menu-legal-links {
    margin-top: 16px; display: flex; justify-content: center; gap: 10px; align-items: center;
    font-size: 0.875em; opacity: 0.85;
}
.menu-legal-link-btn.legal-link-btn {
    text-decoration: none; border: 1px solid rgba(125,255,224,0.35); border-radius: 5px;
    padding: 6px 14px; color: #cfe8f0; font-weight: 600; letter-spacing: 0.3px;
    transition: border-color 0.15s, background 0.15s;
}
.menu-legal-link-btn.legal-link-btn:hover {
    opacity: 1; border-color: rgba(125,255,224,0.7); background: rgba(125,255,224,0.06);
}
.dev-login-btn {
    margin-top: 14px; width: 100%; border-style: dashed; border-color: rgba(255,210,77,0.5);
    color: #ffd24d; font-size: 0.75em;
}
.dev-login-btn:hover { background: rgba(255,210,77,0.15); border-color: #ffd24d; }

/* ============ Admin Panel ============ */
.admin-btn { border-color: rgba(255,138,77,0.5); color: #ffb380; }
.admin-btn:hover { background: rgba(255,138,77,0.15); border-color: #ff8a4d; }
.panel-admin { max-width: 920px; }
.admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 18px; margin: 16px 0; }
.admin-col-title { font-size: 0.75em; font-weight: 700; letter-spacing: 1px; color: #a8bccb; margin-bottom: 8px; }
.admin-user-count { color: #3ddc97; font-weight: 700; }
.admin-active-24h { font-size: 0.75em; color: #a8bccb; margin-bottom: 10px; }
/* [NACHTRAG] Sortier-Umschalter zum gezielten Finden inaktiver Nutzer -
   dezent gehalten (kleine Schrift, gleiches Dropdown-Erscheinungsbild
   wie andere Auswahlfelder im Admin-Panel), sitzt zwischen der 24h-
   Aktiv-Anzeige und der eigentlichen Liste. */
.admin-sort-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.75em; }
.admin-sort-row select {
    background: rgba(8,10,16,0.8); border: 1px solid rgba(125,255,224,0.25);
    border-radius: 4px; color: #e8f4ff; padding: 4px 8px; font-family: inherit; font-size: 1em;
}
.admin-users-list, .admin-purchases-list {
    max-height: 380px; overflow-y: auto; border: 1px solid rgba(125,255,224,0.2); border-radius: 6px;
    padding: 6px; background: rgba(0,0,0,0.2);
}
.admin-user-row {
    padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8125em;
    border: 1px solid transparent; margin-bottom: 4px; transition: all 0.15s ease;
}
.admin-user-row:hover { background: rgba(61,220,151,0.1); }
.admin-user-row.selected { background: rgba(61,220,151,0.18); border-color: #3ddc97; }
.admin-user-row .u-name { font-weight: 700; color: #e8f4ff; }
.admin-user-row .u-meta { font-size: 0.6875em; opacity: 0.65; margin-top: 2px; }
/* [NACHTRAG] Registrierungs-/letzter-Login-Zeile - im Chat angefragt,
   um spaeter inaktive Nutzer finden zu koennen. Etwas staerker
   hervorgehoben als .u-meta (leicht hoehere Deckkraft), da das genau
   die Information ist, wonach hier typischerweise gesucht wird. */
.admin-user-row .u-dates { font-size: 0.6875em; opacity: 0.75; margin-top: 2px; color: #7dffe0; }
.admin-empty-hint { padding: 20px; text-align: center; opacity: 0.5; font-size: 0.8125em; }
.admin-purchase-row {
    display: grid; grid-template-columns: 1fr 1fr auto auto auto; gap: 8px; align-items: center;
    padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.75em;
}
.admin-purchase-row select {
    background: rgba(8,10,15,0.8); color: #e8f4ff; border: 1px solid rgba(125,255,224,0.3);
    border-radius: 3px; font-size: 0.75em; padding: 3px;
}
.admin-add-purchase { margin-top: 16px; }

.admin-player-progress { margin-bottom: 14px; }
.admin-progress-summary {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px; margin-bottom: 10px; font-size: 0.8125em;
}
.admin-progress-summary.error { color: #ff8a95; }
.admin-progress-credits { color: #ffd24d; font-weight: 700; }
.admin-progress-coins { color: #7dffe0; font-weight: 700; }
.admin-progress-echoplus { font-size: 0.75em; opacity: 0.7; }
.admin-progress-echoplus.active { color: #3ddc97; opacity: 1; font-weight: 700; }
.admin-progress-cities {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px;
}
.admin-progress-city {
    padding: 8px 10px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
}
.admin-progress-city-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.admin-progress-city-name { font-size: 0.75em; font-weight: 700; color: #a8bccb; }
.admin-progress-city-count { font-size: 0.75em; font-weight: 700; color: #3ddc97; }
.admin-progress-city-stages { font-size: 0.6875em; opacity: 0.6; line-height: 1.5; word-break: break-word; }
.admin-add-form { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-add-form input, .admin-add-form select {
    background: rgba(8,10,15,0.8); color: #e8f4ff; border: 1px solid rgba(125,255,224,0.3);
    border-radius: 4px; padding: 6px 8px; font-size: 0.75em; font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.admin-add-form input[type="text"] { width: 120px; }
.admin-add-form input[type="number"] { width: 90px; }
.admin-add-form input[readonly] { opacity: 0.55; }
#admin-new-preset { min-width: 220px; }
.admin-error { min-height: 18px; color: #ff8a8a; font-size: 0.8125em; font-weight: 600; margin: 8px 0; }

/* [NEWSLETTER] Nur noch ein Oeffnen-Button an fester Position, statt des
   kompletten Formulars eingebettet im Admin-Panel - bei vielen
   registrierten Nutzern wurde die Nutzerliste darueber immer laenger und
   schob den Newsletter-Bereich immer weiter nach unten (im Chat als
   unuebersichtlich gemeldet). Gleiches Rahmen-Muster wie
   .admin-stripe-diagnose darunter, damit sich beide "Werkzeug"-
   Schaltflaechen optisch als zusammengehoerige Gruppe von der
   eigentlichen Nutzer-/Kaeufe-Verwaltung darueber abheben. */
.admin-newsletter-open-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }

/* Eigenes Fenster (Modal) fuer das eigentliche Newsletter-Formular - liegt
   IMMER zentriert ueber dem gesamten Admin-Panel, unabhaengig davon wie
   lang die Nutzerliste gerade ist. Gleiches "Kachel"-Erscheinungsbild wie
   .panel (dunkler Hintergrund, cyan-gruener Rahmen), aber als echtes
   Overlay mit abgedunkeltem Hintergrund (.modal-overlay) statt Teil des
   normalen Seitenflusses. */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(3,4,8,0.82);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; box-sizing: border-box;
}
.modal-box {
    background: rgba(12,16,24,0.97); border: 1px solid rgba(125,255,224,0.3);
    border-radius: 8px; padding: 24px 28px; max-width: 560px; width: 100%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 0 50px rgba(0,0,0,0.6);
}
.admin-newsletter-recipient-count { font-size: 0.8125em; opacity: 0.75; margin-bottom: 10px; }
.modal-box input[type="text"], .modal-box textarea {
    width: 100%; background: rgba(8,10,16,0.8); border: 1px solid rgba(125,255,224,0.25);
    border-radius: 4px; color: #e8f4ff; padding: 10px 12px; font-family: inherit;
    font-size: 0.875em; margin-bottom: 10px; resize: vertical;
}
.admin-newsletter-hint { font-size: 0.75em; opacity: 0.6; margin-bottom: 10px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-newsletter-result { margin-top: 10px; font-size: 0.8125em; }
.admin-newsletter-result.admin-newsletter-error { color: #ff8a8a; font-weight: 600; }

.admin-stripe-diagnose { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.stripe-diagnose-result { margin-top: 12px; }
.stripe-diagnose-table { width: 100%; border-collapse: collapse; font-size: 0.8125em; margin-bottom: 12px; }
.stripe-diagnose-table td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.stripe-diagnose-table td:first-child { opacity: 0.75; width: 45%; }
.stripe-diagnose-table tr.ok td:last-child { color: #7dffe0; font-weight: 600; }
.stripe-diagnose-table tr.fail td:last-child { color: #ff8a8a; font-weight: 600; }
.stripe-diagnose-summary { padding: 10px 14px; border-radius: 4px; font-weight: 700; font-size: 0.8125em; }
.stripe-diagnose-summary.ok { background: rgba(61,220,151,0.15); color: #7dffe0; }
.stripe-diagnose-summary.fail { background: rgba(255,77,106,0.12); color: #ff8a8a; }
.stripe-diagnose-raw {
    margin-top: 8px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 4px;
    font-family: monospace; font-size: 0.6875em; color: #a8bccb; word-break: break-word;
}
/* [NACHTRAG] Log-Zeilen der Stripe-Webhook-Diagnose - monospace wie
   .stripe-diagnose-raw (gleicher Zweck: technische, roh dargestellte
   Daten), aber als LISTE einzelner Zeilen statt eines einzigen Blocks,
   mit einer duennen Trennlinie und farblicher Kennzeichnung analog zur
   bestehenden .stripe-diagnose-table (gruen=erfolgreich, rot=Fehler). */
.stripe-webhook-log-result { max-height: 400px; overflow-y: auto; margin-top: 8px; }
.stripe-webhook-log-line {
    padding: 8px 10px; font-family: monospace; font-size: 0.6875em; color: #a8bccb;
    border-bottom: 1px solid rgba(255,255,255,0.08); word-break: break-word; white-space: pre-wrap;
}
.stripe-webhook-log-line.ok { color: #7dffe0; }
.stripe-webhook-log-line.fail { color: #ff8a8a; }
.admin-success { min-height: 18px; color: #7dffe0; font-size: 0.75em; font-weight: 600; margin: 8px 0; word-break: break-all; }
.admin-user-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.admin-reset-badge {
    display: inline-block; font-size: 0.625em; font-weight: 700; letter-spacing: 0.5px;
    color: #ffd24d; background: rgba(255,210,77,0.15); border: 1px solid rgba(255,210,77,0.4);
    border-radius: 3px; padding: 1px 5px; margin-top: 3px;
}

.loading-text {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1.25em; letter-spacing: 4px;
    color: #7dffe0; text-shadow: 0 0 14px rgba(61,220,151,0.6);
    animation: bgPulse 1.4s ease-in-out infinite alternate;
}

/* [INTRO-VIDEO] Ueberschreibt die normale .screen-Zentrierung (die fuer
   kleine, mittig platzierte Panels gedacht ist) - das Video soll den
   GESAMTEN Bildschirm ausfuellen, nicht in einer kleinen Kachel
   erscheinen. object-fit: contain statt cover, damit das Video bei
   einem vom Seitenverhaeltnis (16:9) abweichenden Bildschirm sauber
   mit schwarzen Balken statt beschnitten/verzerrt dargestellt wird. */
#screen-intro.intro-screen, #screen-completion-video.intro-screen { background: #000; padding: 0; }
#intro-video, #completion-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.intro-skip-btn { position: absolute; bottom: 24px; right: 24px; opacity: 0.85; z-index: 10; }
.intro-skip-btn:hover { opacity: 1; }

.panel h2 {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: 3px; color: #7dffe0;
    margin-bottom: 20px; font-size: 1.5em;
}
.panel p { margin: 10px 0; line-height: 1.5; opacity: 0.9; }

.howto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 18px 0; font-size: 0.9375em; }
.howto-echo-text { font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 0.9375em; color: #ffd24d; letter-spacing: 1px; margin: 18px 0; line-height: 1.7; }
.howto-section {
    text-align: left; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1);
}
.howto-section h3 {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 0.9375em;
    letter-spacing: 1.5px; color: #7dffe0; margin: 0 0 8px;
}
.howto-list { margin: 8px 0 0; padding-left: 20px; }
.howto-list li { margin-bottom: 8px; line-height: 1.5; opacity: 0.9; }
.legal-list { margin: 4px 0 12px; padding-left: 20px; }
.legal-list li { margin-bottom: 4px; line-height: 1.5; opacity: 0.85; font-size: 0.875em; }
.legal-date { font-size: 0.75em; opacity: 0.55; margin-top: -4px; }

.settings-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0; gap: 20px; }
.settings-row label { font-weight: 600; font-size: 0.9375em; }
.settings-row input[type="range"] { width: 180px; }
/* "Anleitung" ist eine Navigation, kein Ein-/Ausschalter wie die
   settings-row-Eintraege darueber - daher als eigenstaendiger,
   vollbreiter Button statt als weitere settings-row, mit etwas
   Abstand nach oben zur letzten settings-row (Fullscreen). */
#screen-settings #btn-howto { width: 100%; margin: 18px 0 4px; }

.segmented-toggle {
    display: flex; border: 1px solid rgba(125,255,224,0.3); border-radius: 4px;
    overflow: hidden;
}
.segment-btn {
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 0.8125em; letter-spacing: 1px;
    padding: 6px 18px; background: rgba(20,26,36,0.8); color: #a8bccb;
    border: none; cursor: pointer; transition: all 0.15s ease;
}
.segment-btn:not(:first-child) { border-left: 1px solid rgba(125,255,224,0.2); }
.segment-btn:hover { background: rgba(61,220,151,0.12); color: #e8f4ff; }
.segment-btn.active { background: rgba(61,220,151,0.3); color: #eafff5; box-shadow: inset 0 0 8px rgba(61,220,151,0.3); }

.tab-bar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

.leaderboard-privacy-note {
    font-size: 0.8125em; opacity: 0.7; margin-bottom: 16px; padding: 10px 14px;
    background: rgba(125,255,224,0.04); border: 1px solid rgba(125,255,224,0.2); border-radius: 6px;
}
.leaderboard-tab.active { border-color: #7dffe0; background: rgba(125,255,224,0.12); }
.leaderboard-loading, .leaderboard-empty { text-align: center; padding: 30px 0; opacity: 0.7; }
.leaderboard-list { display: flex; flex-direction: column; gap: 6px; }
.leaderboard-row {
    display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 12px;
    padding: 10px 16px; border-radius: 6px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
}
.leaderboard-row.you {
    background: rgba(255,210,77,0.08); border-color: rgba(255,210,77,0.5);
}
.leaderboard-position { font-weight: 800; color: #7dffe0; font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.leaderboard-row.you .leaderboard-position { color: #ffd24d; }
.leaderboard-name { font-weight: 600; }
.leaderboard-time { font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; color: #e8f4ff; }
.leaderboard-your-rank {
    margin-top: 14px; padding: 10px 16px; text-align: center; font-size: 0.875em;
    background: rgba(255,210,77,0.06); border: 1px solid rgba(255,210,77,0.3); border-radius: 6px; color: #ffe4a3;
}

.tab-bar [data-shop-tab].active, .tab-bar [data-station-tab].active {
    background: rgba(61,220,151,0.25); border-color: #3ddc97; color: #eafff5;
}

.station-panel, .shop-panel { min-height: 240px; margin-bottom: 20px; }

.research-balance {
    font-size: 0.8125em; opacity: 0.8; margin-bottom: 14px; padding: 8px 12px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
    display: inline-block;
}
.research-balance-amount { color: #ffd24d; font-weight: 700; }

.lab-grid, .armory-grid, .research-grid, .shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Errungenschaften: eigenes Kachel-Raster (nicht Teil der obigen
   geteilten Selektorliste, da der interne Aufbau abweicht - Icon und
   Text nebeneinander statt untereinander), aber dieselbe Spaltenzahl
   und derselbe Abstand fuer visuelle Konsistenz mit Armory/Research. */
.achievements-summary { margin-bottom: 14px; font-weight: 700; letter-spacing: 1px; color: #7dffe0; }
.achievements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.achievement-card {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 12px;
    background: rgba(255,255,255,0.03); text-align: left;
}
.achievement-card.unlocked { border-color: rgba(255,205,133,0.6); background: rgba(255,205,133,0.06); }
.achievement-card.locked { opacity: 0.55; }
.achievement-icon { font-size: 1.75em; flex-shrink: 0; }
.achievement-info { min-width: 0; }
.achievement-name { font-weight: 700; color: #7dffe0; margin-bottom: 3px; font-size: 0.8125em; }
.achievement-card.unlocked .achievement-name { color: #ffcd85; }
.achievement-desc { opacity: 0.8; font-size: 0.75em; }
.lab-slot {
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 12px; font-size: 0.8125em;
    background: rgba(255,255,255,0.03);
}
.lab-slot.filled { border-color: var(--echo-color); box-shadow: 0 0 10px color-mix(in srgb, var(--echo-color) 40%, transparent); }
.lab-slot.locked { border-color: rgba(255,210,77,0.3); background: rgba(255,210,77,0.04); }
.lab-slot.locked .lab-empty-text { opacity: 0.7; color: #ffd24d; padding: 14px 0 6px; }
.lab-slot.locked .lab-row { text-align: center; font-size: 0.6875em; opacity: 0.6; padding-bottom: 10px; }

.shop-hint { font-size: 0.8125em; opacity: 0.75; margin-bottom: 14px; }
.shop-error { min-height: 18px; color: #ff8a8a; font-size: 0.8125em; font-weight: 600; margin-top: 10px; }

.echoplus-panel {
    background: rgba(61,220,151,0.05); border: 1px solid rgba(61,220,151,0.25);
    border-radius: 8px; padding: 24px; text-align: center; max-width: 480px; margin: 0 auto;
}
.echoplus-title {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 900; font-size: 1.625em;
    color: #7dffe0; letter-spacing: 2px; text-shadow: 0 0 14px rgba(61,220,151,0.5);
}
.echoplus-desc { font-size: 0.875em; opacity: 0.85; margin: 12px 0 16px; line-height: 1.5; }
.echoplus-status {
    font-size: 0.8125em; font-weight: 700; padding: 8px; border-radius: 4px; margin-bottom: 16px;
    background: rgba(255,255,255,0.05); color: #a8bccb;
}
.echoplus-status.active { background: rgba(61,220,151,0.15); color: #7dffe0; }
.echoplus-hint { font-size: 0.75em; color: #ffb380; margin-top: 10px; }

.boostpacks-panel { max-width: 720px; margin: 0 auto; }
.boostpacks-desc { font-size: 0.8125em; opacity: 0.8; margin-bottom: 18px; line-height: 1.5; text-align: center; }
.boostpack-section {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 16px 18px; margin-bottom: 14px;
}
.boostpack-section-title {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 0.9375em;
    letter-spacing: 1px; color: #7dffe0; margin-bottom: 8px;
}
.boostpack-status {
    font-size: 0.75em; font-weight: 700; padding: 6px 10px; border-radius: 4px; margin-bottom: 12px;
    background: rgba(255,255,255,0.05); color: #a8bccb; display: inline-block;
}
.boostpack-status.active { background: rgba(61,220,151,0.15); color: #7dffe0; }
.boostpack-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.boostpack-tier-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
}
.boostpack-tier-btn.active { background: rgba(61,220,151,0.2); border-color: #3ddc97; }
.boostpack-tier-percent { font-size: 0.9375em; font-weight: 700; }
.boostpack-tier-price { font-size: 0.625em; opacity: 0.75; }
.lab-slot-header { font-weight: 700; color: var(--echo-color); margin-bottom: 6px; letter-spacing: 1px; }
.lab-row { margin-bottom: 3px; opacity: 0.9; }
.lab-empty-text { text-align: center; opacity: 0.4; padding: 30px 0; font-weight: 700; letter-spacing: 1px; }

.armory-item, .research-item, .shop-item {
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 12px; font-size: 0.8125em;
    background: rgba(255,255,255,0.03); text-align: left;
}
.armory-item-name, .research-name, .shop-item-name { font-weight: 700; color: #7dffe0; margin-bottom: 4px; }
.armory-stat, .research-desc, .shop-item-desc { opacity: 0.85; margin-bottom: 2px; }
.armory-status { margin-top: 6px; font-size: 0.6875em; color: #ffd24d; letter-spacing: 1px; }
/* Waffen-Freischaltung: eigener Kauf-Bereich unterhalb der bestehenden
   Waffenkarte (Name/Werte/DROP-IM-RUN-Status bleiben unveraendert) -
   dieselbe gruene "aktiv"-Farbgebung wie bei den Boost Packs
   (.boostpack-status.active), fuer visuelle Konsistenz im Shop/Station. */
.armory-unlock-desc { margin-top: 8px; font-size: 0.6875em; opacity: 0.7; margin-bottom: 6px; }
.armory-unlock-status {
    margin-top: 8px; font-size: 0.75em; font-weight: 700; padding: 6px 10px;
    border-radius: 4px; background: rgba(61,220,151,0.15); color: #7dffe0; display: inline-block;
}
.research-level { margin: 6px 0; font-weight: 600; }
.shop-item { text-align: center; }
.shop-item-icon { width: 64px; height: 64px; display: block; margin: 0 auto 8px; }
.shop-item-price { color: #ffd24d; font-weight: 700; margin: 6px 0; }
.shop-item.equipped { border-color: #3ddc97; box-shadow: 0 0 10px rgba(61,220,151,0.3); }
.shop-owned { font-size: 0.75em; opacity: 0.6; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }
.shop-disclaimer { font-size: 0.75em; opacity: 0.6; letter-spacing: 0; text-transform: none; font-weight: 500; }

.confirm-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 20px; }

/* ============ Upgrade Screen ============ */
#screen-upgrade { background: rgba(5,6,10,0.85); flex-direction: column; }
.upgrade-header {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1.625em; letter-spacing: 4px; color: #ffd24d;
    margin-bottom: 30px; text-shadow: 0 0 20px rgba(255,210,77,0.5);
}
#upgrade-cards { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.upgrade-card {
    width: 220px; padding: 22px 16px; border-radius: 8px; text-align: center;
    background: linear-gradient(160deg, rgba(24,30,42,0.95), rgba(14,18,26,0.95));
    border: 2px solid rgba(255,255,255,0.15); cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.upgrade-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
.upgrade-card:active { transform: translateY(-2px) scale(0.99); }
.upgrade-card.rarity-common { border-color: #7d90a8; }
.upgrade-card.rarity-uncommon { border-color: #3ddc97; box-shadow: 0 0 16px rgba(61,220,151,0.2); }
.upgrade-card.rarity-rare { border-color: #ffd24d; box-shadow: 0 0 20px rgba(255,210,77,0.3); }
.upgrade-icon { font-size: 2.5em; margin-bottom: 10px; }
.upgrade-name { font-weight: 700; font-size: 1em; letter-spacing: 1px; margin-bottom: 8px; color: #e8f4ff; }
.upgrade-desc { font-size: 0.8125em; opacity: 0.85; min-height: 40px; }
.upgrade-level { font-size: 0.75em; margin-top: 8px; color: #7dffe0; }
.upgrade-rarity { font-size: 0.625em; margin-top: 6px; letter-spacing: 2px; opacity: 0.6; }

/* ============ Results ============ */
.results-saved-msg { color: #ffd24d; font-weight: 700; letter-spacing: 1px; margin-bottom: 16px; min-height: 20px; }
.results-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    margin: 20px 0 26px; font-size: 0.8125em; text-align: center;
}
.results-grid span { display: block; font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1.125em; margin-top: 4px; color: #7dffe0; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: rgba(125,255,224,0.25); border-radius: 4px; }

/* ============ Level Select ============ */
.level-select-hint { font-size: 0.8125em; opacity: 0.75; margin: 6px 0 18px; line-height: 1.5; }
.level-select-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
    margin-bottom: 22px; max-height: 55vh; overflow-y: auto; padding-right: 4px;
}

/* DLC-Stadtauswahl: einfachere, breitere Kacheln als die 6er-Level-
   Raster (nur 3 Staedte statt bis zu 30 Level) - selbes kosmische
   Cyan-Farbschema wie die Haupt-DLC-Kachel, fuer Wiedererkennung. */
.dlc-city-select-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 22px;
}
.dlc-city-tile {
    position: relative; border-radius: 8px; cursor: pointer; padding: 28px 12px;
    background: rgba(0,229,255,0.08); border: 1px solid rgba(0,229,255,0.35);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; transition: all 0.15s ease;
}
.dlc-city-tile:hover:not(:disabled) {
    background: rgba(0,229,255,0.2); border-color: #00e5ff;
    box-shadow: 0 0 14px rgba(0,229,255,0.35); transform: translateY(-2px);
}
.dlc-city-tile-name { font-size: 1.0625em; font-weight: 700; letter-spacing: 1px; color: #d9fbff; text-align: center; }
.dlc-city-tile-status { font-size: 0.75em; color: #7de8ff; }
.dlc-city-tile-soon { opacity: 0.5; cursor: not-allowed; }
.dlc-city-tile-soon .dlc-city-tile-status { color: #8a9a9d; }

.level-tile {
    position: relative; aspect-ratio: 1; border-radius: 6px; cursor: pointer;
    background: rgba(61,220,151,0.08); border: 1px solid rgba(125,255,224,0.3);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; transition: all 0.15s ease;
}
.level-tile:hover:not(:disabled) {
    background: rgba(61,220,151,0.2); border-color: #7dffe0;
    box-shadow: 0 0 12px rgba(61,220,151,0.35); transform: translateY(-2px);
}
.level-tile-num { font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 1.25em; font-weight: 900; color: #e8f4ff; }
.level-tile-name { font-size: 0.6875em; margin-top: 4px; letter-spacing: 0.5px; color: #7de8ff; text-align: center; padding: 0 6px; }
.level-tile-time { font-size: 0.625em; opacity: 0.65; margin-top: 2px; letter-spacing: 1px; }
.level-tile-besttime { color: #ffd24d; opacity: 0.95; font-weight: 700; }
.level-tile.cleared { border-color: #ffd24d; background: rgba(255,210,77,0.12); }
.level-tile.cleared .level-tile-num { color: #ffd24d; }
.level-tile-check {
    position: absolute; top: 4px; right: 6px; color: #ffd24d; font-size: 0.8125em; font-weight: 700;
}
.level-tile.locked {
    background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.1);
    cursor: not-allowed; opacity: 0.5;
}
.level-tile.locked .level-tile-num { color: #6a7686; }
.level-tile-lock { font-size: 0.875em; margin-top: 2px; opacity: 0.7; }

/* ============ City Select ============ */
.city-select-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 22px;
}
.city-tile {
    position: relative; aspect-ratio: 16/10; border-radius: 8px; cursor: pointer;
    border: 1px solid rgba(125,255,224,0.3); background-size: cover; background-position: center;
    background-color: #0c0e14; overflow: hidden; transition: all 0.15s ease;
}
.city-tile:hover {
    border-color: #7dffe0; box-shadow: 0 0 16px rgba(61,220,151,0.4); transform: translateY(-3px);
}
.city-tile-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(180deg, rgba(8,10,15,0.35) 0%, rgba(8,10,15,0.75) 100%);
}
.city-tile-name {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 900; font-size: 1.1875em;
    color: #e8f4ff; letter-spacing: 1px; text-shadow: 0 0 10px rgba(0,0,0,0.9);
}
.city-tile-progress {
    font-size: 0.75em; color: #7dffe0; margin-top: 6px; font-weight: 700;
    text-shadow: 0 0 8px rgba(0,0,0,0.9);
}

#final-level-tile-wrap { margin-top: 14px; }
.final-level-tile {
    width: 100%; aspect-ratio: 32/10;
    background: linear-gradient(120deg, #1a0a12 0%, #2a0a10 50%, #100a1a 100%);
    border: 1px solid rgba(255,77,94,0.5);
    animation: finalLevelPulse 2.4s ease-in-out infinite;
}
.final-level-tile:hover {
    border-color: #ff4d5e; box-shadow: 0 0 22px rgba(255,77,94,0.55); transform: translateY(-3px);
}
.final-level-tile .city-tile-name {
    font-size: 1.5em; letter-spacing: 3px; color: #ffe8ec;
    text-shadow: 0 0 14px rgba(255,77,94,0.9);
}
.final-level-tile .city-tile-progress { color: #ff8a95; }
@keyframes finalLevelPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,77,94,0.25); }
    50% { box-shadow: 0 0 24px rgba(255,77,94,0.55); }
}

/* Endless-Modus-Kachel: gleiches Grundmuster wie die Final-Level-Kachel,
   bewusst andere Akzentfarbe (Violett statt Rot), damit beide auf einen
   Blick unterscheidbar bleiben. */
.endless-tile {
    width: 100%; aspect-ratio: 32/10;
    background: linear-gradient(120deg, #150a2a 0%, #1e0a2e 50%, #0a0a1a 100%);
    border: 1px solid rgba(179,77,255,0.5);
    animation: endlessPulse 2.4s ease-in-out infinite;
}
.endless-tile:hover {
    border-color: #b34dff; box-shadow: 0 0 22px rgba(179,77,255,0.55); transform: translateY(-3px);
}
.endless-tile .city-tile-name {
    font-size: 1.5em; letter-spacing: 3px; color: #eee0ff;
    text-shadow: 0 0 14px rgba(179,77,255,0.9);
}
.endless-tile .city-tile-progress { color: #d1a3ff; }
@keyframes endlessPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(179,77,255,0.25); }
    50% { box-shadow: 0 0 24px rgba(179,77,255,0.55); }
}

/* DLC "SECTOR ZERO"-Kachel: eigene, kosmische Akzentfarbe (kraeftiges
   Cyan/Tuerkis), deutlich unterscheidbar von den drei bestehenden
   Sondermodi (Final Level=Rot, Endless=Violett, Boss-Rush=Gold) - soll
   auf den ersten Blick wie ein "besonderes", separates Angebot wirken,
   nicht wie ein normaler Spielmodus. */
.dlc-tile {
    width: 100%; aspect-ratio: 32/10;
    background: linear-gradient(120deg, #001a22 0%, #002a33 50%, #000f14 100%);
    border: 1px solid rgba(0,229,255,0.5);
    animation: dlcPulse 2.4s ease-in-out infinite;
}
/* Hintergrundbild (dasselbe Motiv wie im Kauf-Dialog/der Stadtauswahl) -
   liegt zwischen der Kachel selbst und der dunklen .city-tile-overlay-
   Abblendung darueber, die weiterhin fuer klare Textlesbarkeit sorgt.
   Deutlich sichtbare Deckkraft (kein "screen"-Mischmodus mehr - der hat
   das Bild zu stark ausgewaschen/unkenntlich gemacht), damit das Motiv
   selbst gut erkennbar bleibt und die Kachel klar vom Endless-Modus
   darueber unterscheidbar macht. */
.dlc-tile-artwork {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0.5;
}
.dlc-tile:hover {
    border-color: #00e5ff; box-shadow: 0 0 22px rgba(0,229,255,0.55); transform: translateY(-3px);
}
.dlc-tile .city-tile-name {
    font-size: 1.5em; letter-spacing: 3px; color: #d9fbff;
    text-shadow: 0 0 14px rgba(0,229,255,0.9);
}
.dlc-tile .city-tile-progress { color: #7de8ff; }
@keyframes dlcPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(0,229,255,0.25); }
    50% { box-shadow: 0 0 24px rgba(0,229,255,0.55); }
}
/* Zustand vor dem Verkaufsstart (CONFIG.DLC_RELEASE_DATE): deutlich
   gedaempfter als der normale, kaufbare Zustand - macht optisch klar,
   dass hier (noch) nichts zu tun ist, ohne die Kachel ganz zu
   verstecken. Kein Pulsieren mehr (das wuerde "hier kannst du klicken"
   suggerieren), kein Hover-Leuchten. */
.dlc-tile-locked {
    animation: none; opacity: 0.55; cursor: default;
    background: linear-gradient(120deg, #0a1114 0%, #0f1a1d 50%, #080d0f 100%);
}
.dlc-tile-locked:hover { border-color: rgba(0,229,255,0.5); box-shadow: none; transform: none; }
.dlc-tile-locked .city-tile-name { text-shadow: 0 0 6px rgba(0,229,255,0.4); }

/* DLC-Kaufbestaetigung: gleicher Modal-Aufbau wie der Willkommensbonus-
   Banner (siehe #welcome-bonus-overlay), aber mit ZWEI Buttons statt
   einem (Kaufen/Abbrechen) - ein Kauf braucht eine echte Entscheidung,
   kein reines "verstanden, weiter". */
#dlc-purchase-overlay {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center;
    background: rgba(5,6,10,0.85);
}
#dlc-purchase-banner {
    max-width: 520px; width: 90vw; text-align: center;
    background: linear-gradient(150deg, #001a22 0%, #002733 50%, #000f14 100%);
    border: 2px solid #00e5ff;
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 0 60px rgba(0,229,255,0.5), 0 0 120px rgba(0,229,255,0.25);
    animation: welcomeBonusPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Artwork als Banner-Streifen oben im Dialog (statt des vorherigen reinen
   Emoji-Icons) - der untere Rand wird per Gradient sanft in den
   Dialoghintergrund eingeblendet, damit Bild und Textbereich nicht hart
   aneinanderstossen. */
#dlc-purchase-artwork {
    display: block; width: 100%; height: 200px; object-fit: cover;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.dlc-purchase-content { padding: 8px 36px 40px; margin-top: -28px; }

/* DLC-Stadtauswahl: dasselbe Banner-Prinzip wie beim Kaufdialog oben,
   hier auf das bestehende .panel-Padding (30px 40px) abgestimmt - das
   Bild wird per negativem Rand bis an die Panel-Kanten gezogen und an
   den oberen Ecken passend zum Panel-Rahmen abgerundet. */
.dlc-city-select-panel { padding-top: 0; overflow-x: hidden; }
.dlc-city-select-artwork {
    display: block; width: calc(100% + 80px); margin: 0 -40px 14px;
    height: 190px; object-fit: cover; object-position: center 35%;
    border-radius: 8px 8px 0 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
#dlc-purchase-banner h2 {
    font-size: 1.625em; letter-spacing: 2px; color: #d9fbff;
    text-shadow: 0 0 18px rgba(0,229,255,0.9);
    margin-bottom: 16px;
}
#dlc-purchase-text {
    font-size: 1.0625em; line-height: 1.5; color: #c2f5ff;
    margin-bottom: 28px;
}
.dlc-purchase-buttons { display: flex; gap: 12px; justify-content: center; }
#btn-dlc-purchase-confirm {
    background: #00e5ff; color: #00141a; border-color: #00e5ff;
    font-size: 1em; padding: 14px 32px; font-weight: 700;
}
#btn-dlc-purchase-confirm:hover { background: #4defff; box-shadow: 0 0 24px rgba(0,229,255,0.6); }
#btn-dlc-purchase-confirm:disabled { background: #2a3a3d; color: #6a7a7d; border-color: #3a4a4d; cursor: not-allowed; }
#btn-dlc-purchase-cancel { padding: 14px 32px; }

/* Boss-Rush-Kachel: gleiches Grundmuster, Gold/Orange als dritte,
   eigenstaendige Akzentfarbe (Final Level=Rot, Endless=Violett,
   Boss-Rush=Gold) - alle drei Sondermodi auf einen Blick unterscheidbar. */
.boss-rush-tile {
    width: 100%; aspect-ratio: 32/10;
    background: linear-gradient(120deg, #2a1a05 0%, #2e1e0a 50%, #1a1205 100%);
    border: 1px solid rgba(255,184,77,0.5);
    animation: bossRushPulse 2.4s ease-in-out infinite;
}
.boss-rush-tile:hover {
    border-color: #ffb84d; box-shadow: 0 0 22px rgba(255,184,77,0.55); transform: translateY(-3px);
}
.boss-rush-tile .city-tile-name {
    font-size: 1.5em; letter-spacing: 3px; color: #ffe8c2;
    text-shadow: 0 0 14px rgba(255,184,77,0.9);
}
.boss-rush-tile .city-tile-progress { color: #ffcd85; }
@keyframes bossRushPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,184,77,0.25); }
    50% { box-shadow: 0 0 24px rgba(255,184,77,0.55); }
}

/* ============================================================
   MOBILE / SCHMALE BILDSCHIRME
   Feste Pixelgrößen (72px-Titel, 420px-Boss-Leiste etc.) laufen auf
   Handys über den sichtbaren Bereich hinaus - da .screen als zentrierter
   Flex-Container per CSS-Eigenheit nach oben hin nicht wegscrollbar ist,
   MUSS der Inhalt selbst kleiner werden statt sich auf Scrollen zu
   verlassen. clamp() sorgt für stufenloses Skalieren zwischen den
   Breakpoints, statt harte Sprünge zu erzeugen.
   ============================================================ */
@media (max-width: 700px) {
    /* ---- Hauptmenü ---- */
    .game-title { font-size: clamp(30px, 11vw, 72px); letter-spacing: clamp(2px, 1.5vw, 10px); }
    .menu-buttons { width: 88vw; max-width: 320px; gap: 8px; }
    .btn { font-size: 14px; padding: 10px 14px; }
    .menu-currency { margin-top: 14px; font-size: 13px; }
    .menu-account-row { margin-top: 10px; font-size: 11px; flex-wrap: wrap; }
    .weekend-banner-title { font-size: clamp(15px, 4.5vw, 21px); }
    .weekend-banner-sub { font-size: clamp(12px, 3.5vw, 16px); }
    .weekend-banner-content.inactive { font-size: clamp(13px, 3.5vw, 19px); }
    .login-streak-content { font-size: clamp(14px, 4vw, 18px); }
    button.login-streak-content.claimable { font-size: clamp(15px, 4.5vw, 21px); }
    .auth-title { font-size: clamp(24px, 8vw, 34px); }

    /* ---- Panels allgemein (Login, Level-/Städte-Auswahl, Ergebnis, ...) ---- */
    .screen { padding: 14px 0; align-items: flex-start; }
    .panel { padding: 20px 16px; width: 94vw; max-width: 94vw; }
    .panel h2 { font-size: 20px; }
    .panel-wide, .panel-admin { max-width: 94vw; }

    /* ---- Raster (Level-/Städte-Auswahl, Shop/Armory, How-To-Play) ---- */
    .level-select-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .city-select-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .lab-grid, .armory-grid, .research-grid, .shop-grid, .achievements-grid { grid-template-columns: repeat(2, 1fr); }
    .howto-grid { grid-template-columns: 1fr; font-size: 13px; }
    .results-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; font-size: 12px; }
    .admin-layout { grid-template-columns: 1fr; }

    /* ---- HUD: feste Pixelbreiten sind auf schmalen Screens die
       Hauptursache für Überlappungen - alles auf vw-basierte/kleinere
       Werte umgestellt. ---- */
    #hud-top-left { width: 42vw; }
    #hud-top-left .bar-label, .level-row { font-size: 11px; }
    #hud-top-right { font-size: 12px; }
    #stage-label { font-size: 9px; letter-spacing: 1.5px; }
    #mission-timer { font-size: 16px; }
    #boss-bar-wrap { width: 60vw; max-width: 320px; }
    #boss-name { font-size: 11px; }
    #hud-bottom-left { max-width: 40vw; }
    .echo-chip { font-size: 10px; padding: 2px 6px; }
    #echo-command { font-size: 11px; }
    .cooldown-item { width: 90px; }
    .cooldown-label { font-size: 9px; }
    #hud-bottom-right { max-width: 34vw; font-size: 11px; }
    #weapon-list { font-size: 11px; }

    #tutorial-hint {
        font-size: 12px; padding: 8px 14px; max-width: 92vw;
        bottom: 90px;
    }
    #big-text { font-size: clamp(20px, 7vw, 40px); padding: 0 16px; text-align: center; }
    #debug-overlay { font-size: 10px; max-width: 60vw; }

    /* ---- Touch-Joystick etwas kompakter auf sehr kleinen Screens ---- */
    .touch-joystick-base { width: 92px; height: 92px; }
    .touch-joystick-knob { width: 38px; height: 38px; }
}

@media (max-height: 480px) {
    /* Kompakte Darstellung NUR fuer echte kleine Bildschirme (z.B. Handy
       im Querformat). WICHTIG: dieser Schwellenwert wurde einmal auf
       900px angehoben, um einen sehr spezifischen Admin-Konto-Randfall
       bei ~830px Fensterhoehe zu loesen - das hat sich als Fehler
       herausgestellt, da dadurch praktisch JEDES normale, nicht
       maximierte Desktop-Browserfenster (haeufig 700-900px hoch) die
       fuer winzige Handy-Bildschirme gedachte Schrumpfung UND
       Oben-Ausrichtung (statt Zentrierung) bekam - im Nutzer-Feedback
       bestaetigt als spuerbare Verschlechterung fuer den Normalfall.
       Zurueckgesetzt auf 480px. Der seltenere Admin-Konto-Randfall bei
       mittleren Fensterhoehen wird bewusst NICHT mehr ueber diese
       Kompakt-Regel geloest (zu grosser Kollateralschaden) - dort greift
       im Zweifel normales Scrollen (.screen{overflow-y:auto}). */
    .game-title { font-size: clamp(22px, 8vw, 48px); }
    .menu-buttons { gap: 4px; }
    .btn { padding: 5px 12px; font-size: 12px; }
    .panel { padding: 12px 14px; }
    .screen { padding: 6px 0; align-items: flex-start; }
    #screen-main-menu .menu-content { margin-top: min(85px, 12vh); }
    .weekend-event-banner, .login-streak-banner { margin-bottom: 4px; }
    .weekend-banner-content.inactive, .login-streak-content { padding: 5px 10px !important; font-size: 12px !important; }
    .menu-currency { margin-top: 8px; font-size: 12px; }
    .menu-account-row { margin-top: 6px; font-size: 10px; }
    .menu-legal-links { margin-top: 8px; }
    .menu-legal-link-btn.legal-link-btn { padding: 3px 10px; font-size: 11px; }
    .copyright-notice { font-size: 12px; margin-top: 6px; }
}

/* ============ ROTATIONS-HINWEIS (Handy im Hochformat) ============ */
/* Standardmaessig unsichtbar/nicht vorhanden im Layout. */
#orientation-warning {
    display: none;
}
/* pointer:coarse = echtes Touch-Geraet (Finger), NICHT Maus/Trackpad -
   ein schmales Desktop-Fenster (pointer:fine) bekommt den Hinweis daher
   bewusst NICHT, nur echte Handys/Tablets im Hochformat. Reine CSS-
   Loesung (kein JS, kein Resize-Listener noetig) - reagiert dadurch
   augenblicklich auf jede Drehung, auch mitten im laufenden Spiel, und
   ueberdeckt dabei ALLES (hoechster z-index), damit das Spiel darunter
   nicht bedienbar bleibt, solange das Geraet hochkant gehalten wird. */
@media (orientation: portrait) and (pointer: coarse) {
    #orientation-warning {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        position: fixed; inset: 0; z-index: 99999;
        background: #05070a; padding: 40px 24px; text-align: center; gap: 20px;
    }
    .orientation-warning-icon {
        font-size: 56px; animation: orientationRotateHint 1.8s ease-in-out infinite;
    }
    .orientation-warning-text {
        font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        font-size: 18px; font-weight: 600; line-height: 1.5; color: #e8f4ff; max-width: 320px;
    }
    /* Alles andere fest verstecken, damit nichts durch die Ueberlagerung
       hindurch bedienbar bleibt (z.B. Tastatureingaben in
       darunterliegenden Formularfeldern). */
    body > *:not(#orientation-warning) { visibility: hidden; }

    /* Ausnahme: Login/Registrierung und "Passwort vergessen" bleiben im
       Hochformat sichtbar und bedienbar - Text auf einem Handy einzutippen
       ist im Hochformat (beidhaendige Daumen-Eingabe) deutlich einfacher
       als im Quermodus. Erst NACH erfolgreichem Login (sobald ein anderer
       Screen als #screen-auth aktiv wird, z.B. das Hauptmenue) greift die
       Querformat-Pflicht wieder - reine CSS-Loesung ueber :has(), reagiert
       dadurch sofort auf jeden Screen-Wechsel, ohne dass JS die Warnung
       manuell ein-/ausblenden muesste. */
    body:has(#screen-auth:not(.hidden)) #orientation-warning,
    body:has(#screen-reset-password:not(.hidden)) #orientation-warning {
        display: none;
    }
    body:has(#screen-auth:not(.hidden)) > *:not(#orientation-warning),
    body:has(#screen-reset-password:not(.hidden)) > *:not(#orientation-warning) {
        visibility: visible;
    }
}
@keyframes orientationRotateHint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(90deg); }
}