/* 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=131') format('woff2'),
         url('assets/fonts/rajdhani-latin-500-normal.woff?v=131') 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=131') format('woff2'),
         url('assets/fonts/rajdhani-latin-600-normal.woff?v=131') 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=131') format('woff2'),
         url('assets/fonts/rajdhani-latin-700-normal.woff?v=131') 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=131') format('woff2'),
         url('assets/fonts/orbitron-latin-700-normal.woff?v=131') 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=131') format('woff2'),
         url('assets/fonts/orbitron-latin-800-normal.woff?v=131') 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=131') format('woff2'),
         url('assets/fonts/orbitron-latin-900-normal.woff?v=131') 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; }
/* 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;
}

.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=131') center 32% / cover no-repeat;
}
/* Sicherheitsabstand zum im Hintergrundbild eingebrannten Titel/Untertitel
   ("ECHO-KNIGHTS" + "Every Death Creates an Ally", oben im Bild): der
   Inhalt wird per Flexbox vertikal zentriert (siehe .screen) - waechst er
   (z.B. durch den Wochenend-Banner + ADMIN-PANEL-Button bei Admin-Konten),
   verschiebt sich die Oberkante nach oben und kann sonst mit dem
   Titelbild kollidieren. */
#screen-main-menu .menu-content { margin-top: min(200px, 22vh); }

/* Admin-Konten haben einen siebten Button (ADMIN-PANEL), wodurch das
   Menue insgesamt hoeher ist als bei normalen Konten. Bewusst NUR ueber
   :has() auf genau diesen Fall eingegrenzt (statt pauschal ueber die
   Fensterhoehe, was in einer frueheren Version versehentlich fast allen
   Nutzern mit nicht maximiertem Browserfenster eine zu starke
   Schrumpfung samt Oben- statt Mittig-Ausrichtung beschert hatte) -
   betrifft dadurch AUSSCHLIESSLICH Admin-Konten, unabhaengig von deren
   Fensterhoehe, und hat null Einfluss auf normale Nutzer. */
#screen-main-menu:has(#btn-admin:not(.hidden)) .menu-content {
    margin-top: min(230px, 18vh);
}

/* 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);
    font-weight: 800;
}
#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: 18px; 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: 72px; 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;
    /* Waechst mit der Bildschirmbreite mit (vorher komplett starr bei
       320px) - auf einem grossen Tablet/Desktop blieb die Button-Spalte
       dadurch winzig, waehrend der Schriftzug darueber bis zu 560px
       breit wurde (eigene vw/vh-Skalierung), was unproportional wirkte.
       clamp() haelt beide Elemente jetzt im aehnlichen Groessenverhaeltnis
       zueinander, ueber den gesamten Bildschirmgroessen-Bereich. */
    width: clamp(280px, 22vw, 460px);
}

.btn {
    font-family: 'Rajdhani', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 700; font-size: 16px; 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: 13px; }
.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: 19px; 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: 21px; font-weight: 800; letter-spacing: 1px; color: #ffd24d;
}
.weekend-banner-sub { font-size: 16px; 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: 18px; 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: 21px; 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: 15px; font-weight: 600; color: #ffd24d; letter-spacing: 1px; }

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

.panel {
    background: rgba(12,16,24,0.92); border: 1px solid rgba(125,255,224,0.25);
    border-radius: 8px; padding: 30px 40px; max-width: 640px; width: 90%;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.panel-wide { max-width: 820px; }
.panel-small { max-width: 420px; 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: 11px; 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: 34px; 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: 14px; 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: 12px; font-weight: 700; letter-spacing: 1px; margin: 12px 0 5px; color: #a8bccb; }
.auth-checkbox-label {
    display: flex !important; align-items: flex-start; gap: 8px; margin: 14px 0 !important;
    font-size: 12px !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: 15px; 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: 13px; font-weight: 600;
    margin-top: 10px; text-align: center;
}
.auth-success {
    min-height: 18px; color: #7dffe0; font-size: 13px; 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: 12px; 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: 12px; opacity: 0.6; line-height: 1.5; }
.legal-links { margin-top: 14px; font-size: 12px; 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: 14px; 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: 12px;
}
.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: 12px; font-weight: 700; letter-spacing: 1px; color: #a8bccb; margin-bottom: 8px; }
.admin-user-count { color: #3ddc97; font-weight: 700; }
.admin-active-24h { font-size: 12px; color: #a8bccb; margin-bottom: 10px; }
.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: 13px;
    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: 11px; opacity: 0.65; margin-top: 2px; }
.admin-empty-hint { padding: 20px; text-align: center; opacity: 0.5; font-size: 13px; }
.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: 12px;
}
.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: 12px; 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: 13px;
}
.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: 12px; 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: 12px; font-weight: 700; color: #a8bccb; }
.admin-progress-city-count { font-size: 12px; font-weight: 700; color: #3ddc97; }
.admin-progress-city-stages { font-size: 11px; 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: 12px; 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: 13px; font-weight: 600; margin: 8px 0; }

.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: 13px; 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: 13px; }
.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: 11px; color: #a8bccb; word-break: break-word;
}
.admin-success { min-height: 18px; color: #7dffe0; font-size: 12px; 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: 10px; 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: 20px; 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;
}
.panel h2 {
    font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; letter-spacing: 3px; color: #7dffe0;
    margin-bottom: 20px; font-size: 24px;
}
.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: 15px; }
.howto-echo-text { font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; 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: 15px;
    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: 14px; }
.legal-date { font-size: 12px; 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: 15px; }
.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: 13px; 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: 13px; 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: 14px;
    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: 13px; 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; }
.lab-slot {
    border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; padding: 12px; font-size: 13px;
    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: 11px; opacity: 0.6; padding-bottom: 10px; }

.shop-hint { font-size: 13px; opacity: 0.75; margin-bottom: 14px; }
.shop-error { min-height: 18px; color: #ff8a8a; font-size: 13px; 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: 26px;
    color: #7dffe0; letter-spacing: 2px; text-shadow: 0 0 14px rgba(61,220,151,0.5);
}
.echoplus-desc { font-size: 14px; opacity: 0.85; margin: 12px 0 16px; line-height: 1.5; }
.echoplus-status {
    font-size: 13px; 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: 12px; color: #ffb380; margin-top: 10px; }

.boostpacks-panel { max-width: 720px; margin: 0 auto; }
.boostpacks-desc { font-size: 13px; 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: 15px;
    letter-spacing: 1px; color: #7dffe0; margin-bottom: 8px;
}
.boostpack-status {
    font-size: 12px; 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: 15px; font-weight: 700; }
.boostpack-tier-price { font-size: 10px; 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: 13px;
    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: 11px; color: #ffd24d; letter-spacing: 1px; }
.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: 12px; opacity: 0.6; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }
.shop-disclaimer { font-size: 12px; 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: 26px; 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: 40px; margin-bottom: 10px; }
.upgrade-name { font-weight: 700; font-size: 16px; letter-spacing: 1px; margin-bottom: 8px; color: #e8f4ff; }
.upgrade-desc { font-size: 13px; opacity: 0.85; min-height: 40px; }
.upgrade-level { font-size: 12px; margin-top: 8px; color: #7dffe0; }
.upgrade-rarity { font-size: 10px; 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: 13px; text-align: center;
}
.results-grid span { display: block; font-family: 'Orbitron', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 18px; 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: 13px; 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;
}
.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: 20px; font-weight: 900; color: #e8f4ff; }
.level-tile-time { font-size: 10px; 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: 13px; 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: 14px; 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: 19px;
    color: #e8f4ff; letter-spacing: 1px; text-shadow: 0 0 10px rgba(0,0,0,0.9);
}
.city-tile-progress {
    font-size: 12px; 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: 24px; 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); }
}

/* ============================================================
   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 { 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); }
}