/* ==========================================================================
   Flocke's Waldlauf – Styles (v3)
   Naturtöne: Waldgrün, Creme, Braun, sanftes Weiß
   ========================================================================== */

/* ---------------------------------------------------------------- Schrift
   Nunito als variable Schrift (Gewichte 200-1000 in EINER Datei) - rund, fett,
   kinderbuchtauglich und mit vollen Umlauten. Lokal ausgeliefert, damit die PWA
   offline funktioniert; beide Dateien stehen in APP_SHELL von sw.js.
   Lizenz: SIL OFL 1.1, siehe medien/fonts/nunito_ofl.txt.

   Kein size-adjust noetig: Nunitos x-Hoehe (0,49 em) liegt praktisch auf der von
   Segoe UI (0,50 em), der Umschaltsprung ist damit unsichtbar. Zusaetzlich deckt
   der Ladebildschirm den swap-Moment ohnehin ab. */
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('medien/fonts/nunito-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
        U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url('medien/fonts/nunito-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Alegreya: lokaler, gut lesbarer Briefsatz fuer die Jubiläumsinfos.
   Die Dateien liegen im Spiel-Shell-Cache und tragen die SIL-OFL-Lizenz
   in medien/fonts/alegreya_ofl.txt. */
@font-face {
    font-family: 'Alegreya';
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url('medien/fonts/alegreya-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Alegreya';
    font-style: normal;
    font-display: swap;
    font-weight: 400 700;
    src: url('medien/fonts/alegreya-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Genau EINE Schriftfamilie im ganzen Spiel (Skill Kap. 3.1). */
    --ff-ui: 'Nunito', "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
    --ff-letter: 'Alegreya', Georgia, serif;
    --anniv-head-pad-top: clamp(28px, 3.2vw, 40px);
    --anniv-head-pad-x: clamp(22px, 5vw, 58px);
    --anniv-head-pad-bottom: var(--sp-2);
    --anniv-title-size: clamp(22px, 3.1vw, 36px);
    --anniv-body-pad-bottom: clamp(20px, 2vw, 28px);
    --anniv-body-size: clamp(14px, 2.2vmin, 18px);
    --anniv-line-height: 1.35;
    --anniv-paragraph-gap: .5rem;
    --anniv-max-height: min(80dvh, 574px);
    --anniv-close-size: var(--ic-xl);

    --forest-green: #557f45;
    --forest-green-dark: #3f6636;
    --cream: #f4efe1;
    --cream-soft: #fbf8f0;
    --brown: #8a5a3b;
    --brown-dark: #5e3d28;
    --soft-white: #fffdf8;
    --gold: #e0a92a;
    --shadow: rgba(62, 45, 30, 0.25);

    /* ======================================================================
       Design-Tokens (skills/skill_ui_smartphone.md, Kapitel 3)
       Ab hier ist JEDE Schriftgroesse, jeder Abstand, jeder Radius, jede
       Buttonhoehe und jeder Schatten ein Token. Freie Zahlen sind ein Fehler.

       ⚠ Merksatz zum clamp(): Das MINIMUM ist der Handy-Wert. vmin ist im
       Querformat die Bildschirmhoehe (~360-430px) und damit am Handy klein -
       ein Minimum von 8px liess frueher jeden Button auf 10px schrumpfen.
       Der vmin-Anteil darf nur nach OBEN skalieren.
       ====================================================================== */

    /* ---- Schrift: Minimum = Handy, Maximum = Desktop ---- */
    /* Schriftgroessen-Regler (Einstellungen -> Spiel -> Lesen & Ruhe).
       1 = heutiger Zustand, der Regler verkleinert also auch. Er wirkt NUR auf
       die vier Fliesstext-Tokens; Ueberschriften, Buttons und die Lobby-Tafel
       bleiben fest, sonst kippt das Layout in den drei Referenzgroessen.
       Gesetzt wird er per Inline-Style am <html> (settings.js). */
    --fs-faktor: 1;
    --fs-cap:    calc(clamp(11px, 2.0vmin, 12px) * var(--fs-faktor));   /* kurze Labels und Einheiten */
    --fs-sm:     calc(clamp(12px, 2.2vmin, 14px) * var(--fs-faktor));   /* Sekundaertext, Hinweise */
    /* Dichte Dialogstaffel (Skill Kap. 3.1): Systemdialoge, Shop-Beschreibungen
       und Konto-Hinweise. Zweite erlaubte Unterschreitung neben --settings-fs. */
    --fs-dialog: calc(clamp(11px, 2.0vmin, 13px) * var(--fs-faktor));
    --fs-body:   calc(clamp(14px, 2.5vmin, 16px) * var(--fs-faktor));   /* Fliesstext */
    --fs-btn:    clamp(14px, 2.6vmin, 16px);
    --fs-btn-lg: clamp(15px, 2.8vmin, 17px);   /* Primaerbutton */
    --fs-h3:     clamp(16px, 2.9vmin, 18px);
    --fs-h2:     clamp(18px, 3.4vmin, 22px);   /* Panel-Titel */
    --fs-h1:     clamp(22px, 4.2vmin, 28px);   /* Screen-Titel */
    --fs-disp:   clamp(28px, 5.4vmin, 36px);   /* Lobby-Tafel, Zeremonien */

    --lh-text: 1.5;
    --lh-body: 1.5;    /* Synonym zu --lh-text; 21 Regeln nutzen diesen Namen */
    --lh-tight: 1.2;

    /* ---- Abstaende: 8-Punkt-Raster (4px nur als Halbschritt) ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 40px;
    --sp-8: 48px;
    /* Die zwei 4px-Halbschritte, die im Bestand wirklich vorkommen (26 Stellen).
       Ohne sie muessten 20px und 28px auf 16 oder 24 gerundet werden - eine am
       Desktop sichtbare Verschiebung von 4px. */
    --sp-4h: 20px;
    --sp-5h: 28px;
    --panel-pad: clamp(var(--sp-3), 2.5vmin, var(--sp-4));

    /* ---- Radien: genau fuenf Stufen ---- */
    --r-sm: 8px;      /* Chips, Badges, kleine Felder */
    --r-md: 16px;     /* Karten, Listeneintraege, Eingabefelder */
    --r-lg: 24px;     /* Panels, Modale */
    --r-xl: 32px;     /* grosse Buehnen-Panels */
    --r-pill: 999px;  /* Buttons, Waehrungen, Reiter */

    /* ---- Hoehen & Trefferflaechen ---- */
    --tap: 44px;        /* unsichtbares Minimum jeder Trefferflaeche */
    /* Sichtbare Kontrollen duerfen kleiner sein; --tap bleibt als separates
       Pseudo-Element oder als echte Mindestgroesse erhalten. */
    --btn-h-sm: 36px;   /* sichtbare dichte Leisten und Reiter */
    --btn-h-md: 40px;   /* sichtbarer Standardbutton */
    --btn-h-lg: 44px;   /* sichtbare Primaeraktion */
    --icon-btn: 36px;   /* sichtbare quadratische Icon-Buttons */
    --info-visible: 30px; /* kleines sichtbares i bei separater 44px-Trefferflaeche */
    --shop-thumb: 64px; /* kompakte quadratische Produkt-/Bauvorschau */
    /* Dichte Einstellungsstaffel. Haengt bewusst mit am Schriftfaktor: die
       Hinweiszeilen der Einstellungen SIND Lesetext, und ohne sie aendert sich
       beim Ziehen des Reglers ausgerechnet auf dem Bildschirm nichts, auf dem
       er steht. Bei Faktor 1 bleibt der dokumentierte Boden 12/11px. */
    --settings-fs: calc(clamp(12px, 2.2vmin, 13px) * var(--fs-faktor));
    --settings-title: clamp(16px, 2.9vmin, 18px);
    --settings-control-h: 40px;
    --settings-press: 2px;

    /* ---- Icon-/Emoji-Groessen ---- */
    --ic-sm: 18px;
    --ic-md: 24px;
    --ic-lg: 32px;
    --ic-xl: 36px;

    --lobby-ground-bottom: 18dvh;
    --lobby-leg-depth: var(--sp-5);
    --install-card-min: 360px;

    /* ---- Semantische Farben: Farbe hat Bedeutung, nie Dekoration ---- */
    --c-primary: var(--forest-green);
    --c-primary-dark: var(--forest-green-dark);
    --c-secondary: var(--brown);
    --c-secondary-dark: var(--brown-dark);
    --c-accent: var(--gold);
    --c-accent-dark: #a97a15;
    --c-metal: #b9c1c8;
    --c-metal-dark: #737b84;
    --c-danger: #c8452f;
    --c-danger-dark: #8f2c1d;
    --c-info: #38799b;
    --c-info-dark: #275a76;
    --c-surface: var(--soft-white);
    --c-surface-2: var(--cream);
    --c-ink: var(--brown-dark);
    --c-ink-soft: var(--brown);
    --c-on-color: var(--soft-white);
    --c-focus: var(--c-accent-dark);

    /* ---- Tiefe: harter Unterschatten NUR an Drueckbarem ---- */
    --sh-press-y: 5px;   /* Ruhe-Versatz */
    --sh-press-in: 1px;  /* gedrueckt */
    --sh-card: 0 4px 12px rgba(35, 31, 24, .18);
    --sh-modal: 0 18px 50px rgba(30, 42, 22, .45);

    /* ---- Bewegung ---- */
    --ease-pop: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 250ms;
    --dur-reduced: 0.01ms;

    /* ---- Stapelhoehe ----
       Die Tour liegt ueber allen Fenstern (.overlay 15000, Feature-Intro 15050,
       Profil-Waehler 15060, Freunde-Toast 15100), aber unter der Sitzungswache
       (#connection-gate 19000) - sonst spielte jemand weiter, obwohl sein Konto
       anderswo geoeffnet wurde. */
    --z-tutorial: 15200;
    --z-tutorial-ask: 15210;
}

/* ==========================================================================
   Handy-Dichtestufe (Skill Kap. 3, zweite Spalte jeder Token-Tabelle)
   --------------------------------------------------------------------------
   Der Desktop hat 1280x720, das Querformat-Handy 800x369. Dieselbe Groesse
   fuellt dort mehr als das Doppelte des Bildschirms - deshalb bekommt das
   Handy eine eigene, dichtere Staffel. Sie steht bewusst HIER direkt unter
   :root und nicht verstreut bei den Komponenten: eine Stelle, ein Vertrag.

   Abgestuft statt pauschal: Schrift -15..-20 % (CSS-Pixel sind am Handy
   physisch kleiner, der Betrachtungsabstand aber kuerzer - mehr als 20 %
   macht Fliesstext fuer Kinder unlesbar), Abstaende -30..-38 %, Buttonhoehen
   -20 %, Icons -25 %. Netto rund -35 % Flaeche je Oberflaeche.

   Radien bleiben unveraendert: sie kosten keine Flaeche und sind die
   Formsprache des Spiels.
   ========================================================================== */
@media (max-width: 720px), (max-height: 480px) {
    :root {
        /* ---- Schrift ---- */
        --fs-cap:    calc(clamp(10px, 1.9vmin, 11px) * var(--fs-faktor));
        --fs-sm:     calc(clamp(11px, 2.0vmin, 12px) * var(--fs-faktor));
        --fs-dialog: calc(clamp(10px, 1.9vmin, 12px) * var(--fs-faktor));
        --fs-body:   calc(clamp(12px, 2.2vmin, 14px) * var(--fs-faktor));
        --fs-btn:    clamp(12px, 2.3vmin, 14px);
        --fs-btn-lg: clamp(13px, 2.4vmin, 15px);
        --fs-h3:     clamp(13px, 2.5vmin, 16px);
        --fs-h2:     clamp(15px, 2.9vmin, 18px);
        --fs-h1:     clamp(17px, 3.4vmin, 22px);
        --fs-disp:   clamp(22px, 4.4vmin, 28px);

        --lh-text: 1.35;
        --lh-body: 1.35;
        --lh-tight: 1.15;

        /* ---- Abstaende ---- */
        --sp-1: 3px;
        --sp-2: 6px;
        --sp-3: 8px;
        --sp-4: 10px;
        --sp-5: 15px;
        --sp-6: 20px;
        --sp-7: 25px;
        --sp-8: 30px;
        --sp-4h: 13px;
        --sp-5h: 18px;
        --panel-pad: clamp(var(--sp-2), 2.2vmin, var(--sp-3));

        /* ---- Hoehen & Trefferflaechen ----
           36px statt 44px: deutlich ueber WCAG 2.5.8 AA (24px). Der
           8px-Mindestabstand zwischen zwei Zielen bleibt unangetastet - er
           verhindert Fehlgriffe wirksamer als die reine Zielgroesse. */
        --tap: 36px;
        --btn-h-sm: 28px;
        --btn-h-md: 32px;
        --btn-h-lg: 36px;
        --icon-btn: 30px;
        --info-visible: 26px;
        --shop-thumb: 48px;
        --settings-fs:    calc(clamp(11px, 2.0vmin, 12px) * var(--fs-faktor));
        --settings-title: clamp(13px, 2.5vmin, 16px);
        --settings-control-h: 32px;

        /* ---- Icon-/Emoji-Groessen ---- */
        --ic-sm: 14px;
        --ic-md: 18px;
        --ic-lg: 24px;
        --ic-xl: 28px;
        --install-card-min: 280px;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #2c3b25;
    font-family: var(--ff-ui);
    color: var(--brown-dark);
    touch-action: manipulation;
}

/* ------------------------------------------------------------------ Layout */
#game-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#gameCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

#gameCanvas { z-index: 1; }

/* --------------------------------------------------------------------- HUD */
#hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Die Notch/Dynamic Island als Mindestabstand einrechnen. viewport-fit=cover
       lässt den Inhalt sonst darunter laufen. Auf dem Desktop ist env(...) = 0,
       dank max() ändert sich dort also nichts. Links UND rechts absichern:
       die Insel wechselt beim Drehen die Seite. */
    padding-top:    max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-top));
    padding-right:  max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-right));
    padding-bottom: clamp(var(--sp-2), 3.25vmin, 26px);
    padding-left:   max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-left));
    pointer-events: none;
    z-index: 10;
}

.hud-col {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--sp-1), 1vmin, 8px);
}

.hud-col.right {
    align-items: flex-end;
}

.hud-row {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-1), 1vmin, 8px);
}

#record-bar-container {
    position: absolute;
    top: max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    pointer-events: none;
    z-index: 12;
}

#record-bar-container.hidden { display: none; }

#record-bar-remaining {
    font-weight: 800;
    font-size: var(--fs-cap);
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    text-align: center;
    white-space: nowrap;
}

.record-bar-row {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-1), 1.2vmin, 8px);
}

#record-bar-percent {
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--soft-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

#record-bar-track {
    position: relative;
    width: clamp(135px, 27vw, 285px);
    height: clamp(var(--sp-3), 2.16vmin, 19px);
    background: rgba(30, 22, 16, 0.65);
    border: 2px solid rgba(255, 253, 248, 0.85);
    border-radius: var(--r-pill);
    box-shadow: 0 4px 14px var(--shadow), inset 0 2px 4px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

#record-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff4d4d, #d32f2f);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.45), 0 0 6px rgba(255, 77, 77, 0.6);
    transition: width 0.05s linear;
}

#record-dog-runner {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
    transition: left 0.05s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

#record-dog-canvas {
    display: block;
    width: 26px;
    height: 20px;
}

#record-bar-remaining {
    font-weight: 800;
    font-size: var(--fs-cap);
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
}

#record-run-badge {
    position: absolute;
    top: max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-top));
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--sp-1), 1vmin, 8px);
    background: linear-gradient(135deg, rgba(255, 223, 0, 0.95), rgba(255, 179, 0, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--r-pill);
    padding: clamp(var(--sp-1), 0.8vmin, 7px) clamp(var(--sp-3), 2.2vmin, var(--sp-4h));
    font-size: var(--fs-body);
    font-weight: 800;
    color: #5e3d00;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px rgba(230, 160, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 15;
    white-space: nowrap;
    animation: recordBadgeGlow 1.5s ease-in-out infinite;
}

#record-run-badge.hidden { display: none !important; }

@keyframes recordBadgeGlow {
    0%, 100% {
        box-shadow: 0 4px 14px rgba(230, 160, 0, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    }
    50% {
        box-shadow: 0 4px 22px rgba(255, 200, 0, 0.85), inset 0 1px 3px rgba(255, 255, 255, 0.9);
    }
}

#record-surplus {
    background: rgba(255, 253, 248, 0.92);
    border: 2px solid rgba(224, 169, 42, 0.75);
    color: #b37400;
    box-shadow: 0 4px 14px rgba(224, 169, 42, 0.35);
    display: flex;
    align-items: center;
    animation: popIn 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

#record-surplus.hidden { display: none; }

#record-surplus-value {
    font-weight: 800;
}

.hud-item {
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-1), 1vmin, 8px);
    background: rgba(255, 253, 248, 0.82);
    border: 2px solid rgba(94, 61, 40, 0.25);
    border-radius: var(--r-pill);
    /* Innenabstand skaliert mit der Bildschirmhöhe, sonst wirken die HUD-Pillen
       auf dem Handy riesig - Text hat eine Lesbarkeitsgrenze, Padding nicht. */
    padding: clamp(var(--sp-1), 1vmin, 8px) clamp(var(--sp-2), 2.25vmin, 18px);
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--brown-dark);
    box-shadow: 0 4px 14px var(--shadow);
}

.hud-item .icon {
    font-size: 1.05em;
}

.hud-item .unit {
    font-size: 0.6em;
    opacity: 0.7;
    margin-left: 2px;
}

#treats-counter { color: var(--brown); }

#treats-counter.pop {
    animation: hudPop 0.25s ease;
}

@keyframes hudPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

/* Status-Badge (Combo / Party) */
.badge {
    align-self: flex-start;
    background: linear-gradient(160deg, #ffd34d, #f0a020);
    color: #5e3d10;
    font-weight: 800;
    font-size: var(--fs-body);
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-4);
    box-shadow: 0 3px 10px rgba(150, 100, 20, 0.4);
    animation: badgePulse 0.8s ease-in-out infinite;
}

.badge.party {
    background: linear-gradient(120deg, #ff6f91, #ffc75f, #6fd08c, #6f9bff);
    background-size: 300% 300%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: badgePulse 0.8s ease-in-out infinite, partyShift 1.6s linear infinite;
}

.badge.hidden { display: none; }

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes partyShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* --------------------------------------------------------------- Toast */
#toast {
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(63, 102, 54, 0.92);
    color: var(--soft-white);
    font-weight: 800;
    font-size: var(--fs-h3);
    padding: clamp(var(--sp-1), 1.25vmin, 10px) clamp(var(--sp-2), 3.25vmin, 26px);
    border-radius: var(--r-pill);
    box-shadow: 0 6px 20px rgba(30, 42, 22, 0.4);
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

#toast.hidden { display: none; }

#pause-hint {
    position: absolute;
    top: clamp(var(--sp-8), 10.5vmin, 92px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--fs-body);
    font-weight: 800;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}
#pause-hint.hidden { display: none; }

#center-toast {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -40%) scale(2.5);
    background: rgba(0, 0, 0, 0.45);
    color: var(--soft-white);
    font-weight: 800;
    font-size: var(--fs-h2);
    text-align: center;
    padding: var(--sp-4h) var(--sp-7);
    border-radius: var(--r-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid rgba(255,255,255,0.1);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    visibility: visible;
    contain: layout paint;
    will-change: opacity, transform;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
#center-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.5);
}
#center-toast-title { display: block; }
#center-toast-subtitle { display: block; font-size: 0.7em; font-weight: 600; }
#center-toast.hidden { display: block !important; visibility: hidden; }
body.is-mobile #center-toast.hidden { display: none !important; }

/* ---------------------------------------------------------------- Overlays */
.overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:    max(var(--sp-4h), env(safe-area-inset-top));
    padding-right:  max(var(--sp-4h), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-4h), env(safe-area-inset-bottom));
    padding-left:   max(var(--sp-4h), env(safe-area-inset-left));
    z-index: 20;
    background: radial-gradient(ellipse at center, rgba(60, 82, 45, 0.35), rgba(30, 42, 22, 0.65));
    animation: fadeIn 0.3s ease;
}

.overlay.hidden { display: none; }
#settings-screen {
    z-index: 15000;
    background: rgba(25, 31, 32, .72);
}
/* Standard-Dim als eigene Abdunklung. */
#streak-sheet.overlay,
#pause-screen.overlay { background: rgba(25, 31, 32, .72); }
#dev-update-screen { z-index: 15000; }
#dev-mode-modal { z-index: 15001; }
#compatibility-modal { z-index: 15001; }
#settings-info-modal { z-index: 15001; }
#feature-intro-modal { z-index: 15050; }
#account-switch-modal,
#name-modal,
#import-modal,
#password-modal,
#recovery-modal,
#reset-modal { z-index: 15001; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------------------------------------------------------------- Hauptmenü Wrapper */
.start-screen-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--sp-3);
    align-items: stretch;
    justify-content: center;
    width: min(98vw, 1200px);
    max-height: 96dvh;
}
.start-screen-wrapper .panel {
    margin: 0;
}
.main-menu-shell {
    position: relative;
    display: flex;
    flex: 2 1 450px;
    min-width: 0;
    max-width: 760px;
}
.legend-panel {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
    overflow-y: auto;
}
.main-menu-panel {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}
/* Aus dem Grid genommen: als Item quetscht der Knopf den Kopf in die 1fr-Zeile. */
#legacy-legend-info-btn {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 5;
    min-width: var(--tap);
    min-height: var(--tap);
    border: 0;
    background: none;
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
}
/* Fuenf Aktionen in einer Reihe quetschen die laengste Beschriftung aus dem Button. */
#start-screen .panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    align-content: start;
}
#start-screen #start-button { grid-column: 1 / -1; }
#start-screen .hint {
    grid-column: 1 / -1;
    margin: 0;
    text-align: center;
}

/* Legende ist standardmaessig ausgeblendet (Klasse "hidden" in index.html) und
   wird ueber das "i" im Hauptmenue manuell geoeffnet. */
#legend-info-btn {
    position: absolute;
    top: clamp(var(--sp-2), 1.5dvh, 14px);
    right: clamp(var(--sp-2), 1.5dvh, 14px);
    z-index: 5;
    border: none;
    background: none;
    font-size: clamp(var(--ic-sm), 3.5vmin, 26px);
    line-height: 1;
    cursor: pointer;
    padding: var(--sp-1);
    filter: grayscale(0) opacity(0.85);
}
#legend-info-btn:hover { opacity: 1; transform: scale(1.08); }

#legend-close-btn {
    position: absolute;
    top: clamp(var(--sp-1), 1.2dvh, 10px);
    right: clamp(var(--sp-1), 1.2dvh, 10px);
    z-index: 5;
    width: clamp(var(--sp-5), 3.4dvh, 30px);
    height: clamp(var(--sp-5), 3.4dvh, 30px);
    border: none;
    border-radius: 50%;
    background: #d32f2f;
    color: var(--soft-white);
    font-weight: 900;
    font-size: var(--fs-btn);
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#legend-close-btn:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- Lobby Wrapper */
.lobby-screen-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--sp-3);
    align-items: stretch;
    justify-content: center;
    width: min(98vw, 1200px);
    max-height: 96dvh;
}
.lobby-screen-wrapper .panel {
    margin: 0;
}
.lobby-legend-panel {
    flex: 1 1 240px;
    max-width: 360px;
    overflow-y: auto;
}
.lobby-main-panel {
    flex: 2 1 450px;
    max-width: 760px;
}

.panel {
    width: min(100% - 2 * var(--sp-4), 620px);
    /* 88dvh statt 94dvh: dvh kennt die ein- und ausfahrende Adressleiste, dvh nicht.
       Die dvh-Zeile bleibt als Rueckfall fuer sehr alte Browser stehen. */
    max-height: 94dvh;
    max-height: min(88dvh, 720px);
    overflow-y: auto;
    /* Der Panel-Inhalt scrollt, nicht die Seite dahinter. */
    overscroll-behavior: contain;
    background: linear-gradient(160deg, var(--soft-white), var(--cream));
    border: 3px solid rgba(94, 61, 40, 0.2);
    border-radius: var(--r-lg);
    padding: clamp(var(--sp-3), 3.75vmin, var(--sp-5));
    text-align: center;
    box-shadow: var(--sh-modal);
    animation: popIn 0.35s var(--ease-pop);
}

@keyframes popIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.logo {
    font-size: clamp(var(--fs-h3), 7.75vmin, 62px);
    line-height: 1;
    margin-bottom: var(--sp-2);
    animation: bounce 2.2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

h1 {
    font-size: var(--fs-h1);
    color: var(--forest-green-dark);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.5px;
}

.beta-badge {
    display: inline-block;
    background: #e28a38;
    color: white;
    font-size: var(--fs-cap);
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px var(--sp-2);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.subtitle {
    font-size: var(--fs-h3);
    line-height: 1.5;
    color: var(--brown);
    margin-bottom: var(--sp-4);
}

/* --------------------------------------------------------------- Legend */
/* Die mit * markierten Werte standen früher inline am Element. Sie sind hier
   zusammengeführt, damit die Kompakt-Media-Query die Legende ausblenden kann -
   ein inline "display: flex" hätte sie sonst ohne !important geschlagen. */
.legend {
    display: flex;
    flex-direction: column;
    align-items: center;      /* * */
    text-align: center;       /* * */
    width: 100%;              /* * */
    line-height: 1.3;         /* * */
    gap: var(--sp-2);
    background: rgba(92, 138, 74, 0.1);
    border-radius: 16px;
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-cap);   /* * war inline 13px */
    font-weight: 600;
    color: var(--brown-dark);
}

.legend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.legend-row.hazards {
    padding-top: var(--sp-2);
    border-top: 1px dashed rgba(94, 61, 40, 0.25);
    font-size: 0.92em;
    color: var(--brown);
}

.dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dot.bronze { background: radial-gradient(circle at 35% 30%, #d69a5c, #9c5a2c); }
.dot.silver { background: radial-gradient(circle at 35% 30%, #f0f0f0, #9aa0a6); }
.dot.gold   { background: radial-gradient(circle at 35% 30%, #ffe58a, #e0a92a); }

/* --------------------------------------------------------------- Stats */
.stats-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.stats-row.small {
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.stat {
    flex: 1;
    background: rgba(255, 253, 248, 0.75);
    border: 2px solid rgba(94, 61, 40, 0.15);
    border-radius: 16px;
    padding: var(--sp-3) var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.stat-label {
    font-size: var(--fs-cap);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--brown);
    opacity: 0.8;
}

.stat-value {
    font-size: var(--fs-h2);
    font-weight: 800;
    color: var(--forest-green-dark);
}

.stat-info-btn {
    width: var(--ic-sm);
    min-width: var(--tap); min-height: var(--tap);
    margin-left: 3px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--forest-green-dark);
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: var(--fs-cap);
    line-height: 1;
    vertical-align: middle;
}

.treat-bonus {
    display: inline-block;
    margin-left: var(--sp-1);
    color: var(--forest-green);
    font-size: 0.8em;
}

.treat-bonus::before { content: '+'; }
.treat-bonus-pop { animation: treatBonusPop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28); }

@keyframes treatBonusPop {
    from { transform: scale(0.65); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.treat-breakdown-panel { width: min(94vw, 430px); }
/* Panel-Vertrag: X sichtbar 36 in beiden Staffeln, Trefferflaeche weiter ueber ::after. */
#treat-breakdown-close { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }

#treat-breakdown-list {
    margin: var(--sp-4) 0 var(--sp-3);
    padding: 0;
    list-style: none;
    text-align: left;
}

#treat-breakdown-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid rgba(94, 61, 40, 0.14);
}

#treat-breakdown-total {
    margin: 0 0 var(--sp-4);
    color: var(--forest-green-dark);
    font-weight: 800;
}

/* --------------------------------------------------------------- Buttons */
.btn {
    display: inline-block;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--soft-white);
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-radius: var(--r-pill);
    padding: var(--sp-4) var(--sp-5);
    box-shadow: 0 5px 0 var(--forest-green-dark), 0 9px 18px var(--shadow);
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    margin-bottom: var(--sp-3);
}

.btn:hover { filter: brightness(1.05); }

.btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--forest-green-dark), 0 4px 10px var(--shadow);
}

.btn.secondary {
    background: linear-gradient(160deg, #b98d5e, var(--brown));
    box-shadow: 0 5px 0 var(--brown-dark), 0 9px 18px var(--shadow);
    padding: var(--sp-3) var(--sp-5);
}

.btn.secondary:active {
    box-shadow: 0 1px 0 var(--brown-dark), 0 4px 10px var(--shadow);
}

.btn.hidden { display: none; }

.hint {
    margin-top: var(--sp-3);
    font-size: var(--fs-body);
    color: var(--brown);
    opacity: 0.85;
}

.hint b { color: var(--forest-green-dark); }

/* --------------------------------------------------------------- Record */
.record {
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--gold);
    margin: var(--sp-1) 0 var(--sp-2);
    animation: recordPulse 1s ease-in-out infinite;
}

.record.near { color: #d9633c; }

.record.hidden { display: none; }

@keyframes recordPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

/* ------------------------------------------------------------------ Shop */
.shop-panel {
    position: relative;
    text-align: center;
}

.shop-balance {
    font-size: var(--fs-body);
    color: var(--brown-dark);
    margin-bottom: var(--sp-4);
}

#shop-items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.shop-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3);
    background: rgba(255, 253, 248, 0.8);
    border: 2px solid rgba(94, 61, 40, 0.15);
    border-radius: 16px;
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
}

.shop-item .shop-icon {
    font-size: var(--fs-h1);
    width: var(--btn-h-lg);
    text-align: center;
    flex-shrink: 0;
}

.shop-item .shop-info {
    flex: 1 1 120px;
    min-width: 0;
}

.shop-item .shop-name {
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--brown-dark);
}

.shop-item .shop-desc {
    font-size: var(--fs-cap);
    color: var(--brown);
    opacity: 0.9;
}
.shop-price-hint {
    margin-top: var(--sp-1);
    color: #9a6a14;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.shop-item .shop-action {
    flex-shrink: 0;
    display: flex;
    gap: var(--sp-2);
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.shop-buy {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 800;
    color: var(--soft-white);
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    box-shadow: 0 3px 0 var(--forest-green-dark);
    white-space: nowrap;
}

.shop-buy:disabled {
    background: #b8b2a8;
    box-shadow: 0 3px 0 #8f8a80;
    cursor: not-allowed;
    opacity: 0.8;
}

.shop-buy.equipped {
    background: linear-gradient(160deg, var(--gold), #b8860b);
    box-shadow: 0 3px 0 #96700a;
}

.shop-item.locked-item { opacity: 0.92; }

.shop-item.purchase-flash {
    animation: purchaseFlash 0.6s ease;
}

@keyframes purchaseFlash {
    0% { background: #fff8d0; transform: scale(1); }
    30% { transform: scale(1.04); }
    100% { background: rgba(255, 253, 248, 0.8); transform: scale(1); }
}

/* -------------------------------------------------------------- Dev-Galerie */
#gallery-controls {
    position: absolute;
    left: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-left));
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px) * 4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    pointer-events: auto;
}
#gallery-controls.hidden { display: none; }
#gallery-season {
    display: flex;
    gap: var(--sp-1);
    background: rgba(0, 0, 0, 0.5);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-md);
}
.gallery-season-btn {
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    color: #eee;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--r-md);
    padding: var(--sp-1) var(--sp-2);
    cursor: pointer;
}
.gallery-season-btn:hover { background: rgba(255, 255, 255, 0.22); }
.gallery-season-btn.active {
    background: linear-gradient(160deg, #ffcc00, #d4a000);
    color: #4a2f14;
    border-color: transparent;
}
#gallery-btn {
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background: linear-gradient(160deg, #7b5cff, #4a2fd4);
    border: none;
    border-radius: var(--r-pill);
    padding: clamp(var(--sp-2), 1.4vmin, 10px) clamp(var(--sp-3), 2.4vmin, 18px);
    cursor: pointer;
    box-shadow: 0 4px 0 #3a24a8, 0 6px 12px rgba(30, 20, 60, 0.3);
}
#gallery-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #3a24a8; }

/* Oben statt unten: der Boden (0.82 * Hoehe) traegt die ganze Szene, unten wuerde
   das HUD jedes Diorama verdecken. Der Himmel ist frei. */
#gallery-hud {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-top));
    z-index: 998;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
    background: rgba(10, 8, 16, 0.62);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    pointer-events: auto;
    max-width: min(92vw, 760px);
}
#gallery-hud.hidden { display: none; }
#gallery-hud-row1 {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
    color: #f4f1e8;
    font-size: var(--fs-cap);
    font-weight: 800;
}
#gallery-pos { font-weight: 900; color: #ffd24a; min-width: 52px; }
.gallery-hint { opacity: 0.7; font-weight: 600; }
#gallery-teleport { display: inline-flex; gap: var(--sp-1); align-items: center; }
#gallery-teleport-input {
    width: 78px;
    padding: var(--sp-1) var(--sp-2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: inherit;
}
#gallery-teleport-btn, .gallery-cat-btn {
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-md);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}
#gallery-teleport-btn:hover, .gallery-cat-btn:hover { background: rgba(255, 255, 255, 0.26); }
#gallery-weather-btn {
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--r-md);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}
#gallery-weather-btn:hover { background: rgba(255, 255, 255, 0.26); }
#gallery-weather-btn.active {
    background: linear-gradient(160deg, #7fd4e8, #3a9ec4);
    color: #10323f;
    border-color: transparent;
}
#gallery-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
}

.dev-label {
    color: #fff;
    font-size: var(--fs-cap);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.dev-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 18px;
}

.dev-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dev-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #888;
    transition: .3s;
    border-radius: var(--r-md);
}

.dev-toggle .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

.dev-toggle input:checked + .slider {
    background-color: #ff4757;
}
.dev-toggle input:checked + .slider:before {
    transform: translateX(14px);
}

/* --------------------------------------------------------- Shop Categories */
/* Zwei Reihen zu je drei Kacheln statt einer engen Fuenferreihe. */
#shop-categories,
#playground-shop-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
    margin: var(--sp-3) 0 var(--sp-4);
    padding: var(--sp-1);
    border-radius: var(--r-md);
    border: 2px solid rgba(94, 61, 40, 0.15);
    background: rgba(255, 253, 248, 0.8);
}

#playground-shop-cats {
    grid-template-columns: repeat(2, 1fr);
}

.shop-cat {
    padding: var(--sp-3) var(--sp-1);
    border: none;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--brown-dark);
    font-family: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
    text-align: center;
}

.shop-cat:hover {
    color: var(--brown);
    background: rgba(94, 61, 40, 0.08);
}

.shop-cat.active {
    color: var(--soft-white);
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    box-shadow: 0 3px 0 var(--forest-green-dark);
}

.shop-cat.disabled {
    cursor: default;
    opacity: 0.55;
}

.shop-cat.disabled:hover {
    background: transparent;
    color: var(--brown-dark);
}

/* Level Menu — Minen-Schacht */
.level-panel {
    text-align: center;
}
.level-tree-container {
    position: relative;
    height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: var(--sp-4) 0;
    border-radius: var(--r-md);
    border: 3px solid var(--brown-dark);
    box-shadow: inset 0 8px 16px rgba(0,0,0,0.45), inset 0 -8px 16px rgba(0,0,0,0.35);
    background: #3a2a1c;
}
#level-world {
    position: relative;
    width: 100%;
}
#level-svg {
    display: block;
    width: 100%;
}
#level-boxes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Belohnungs-Karten (voll umrandet, detailliert) */
.reward-card {
    position: absolute;
    transform: translateY(-50%);
    width: clamp(150px, 34%, 190px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: linear-gradient(160deg, var(--soft-white), var(--cream));
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    z-index: 3;
}
.reward-card.left  { left: 3%; }
.reward-card.right { right: 3%; }
.reward-card.reached { border: 3px solid var(--forest-green); }
.reward-card.locked  { border: 3px solid rgba(94,61,40,0.4); filter: saturate(0.75); opacity: 0.9; }
.feature-card {
    width: clamp(150px, 34%, 190px);
    background: linear-gradient(160deg, #fff8cf, #f3d56f);
}
.feature-card.reached { border-color: #d39b18; }

.reward-titelzeile {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.reward-doppel {
    align-items: flex-start;
}
.reward-doppel-liste {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1;
    min-width: 0;
}
.reward-doppel-liste .reward-title { flex: none; }
.reward-title {
    flex: 1;
    min-width: 0;
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--forest-green-dark);
    line-height: 1.2;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
    text-align: left;
}
.reward-info {
    flex: 0 0 auto;
    width: var(--info-visible);
    height: var(--info-visible);
    position: relative;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--brown);
    background: var(--soft-white);
    color: var(--brown-dark);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}
.reward-info::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}
.reward-more {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    color: var(--brown-dark);
    background: rgba(94, 61, 40, .07);
    border-radius: var(--r-sm);
    padding: var(--sp-1) var(--sp-2);
    line-height: 1.35;
    text-align: left;
}
.reward-more[hidden] { display: none; }
.reward-state { margin-top: var(--sp-1); }
.reward-badge {
    display: inline-block;
    font-size: var(--fs-cap);
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 2px var(--sp-2);
    border-radius: var(--r-pill);
}
.reward-badge.done { background: var(--forest-green); color: var(--soft-white); }
.reward-badge.lock { background: rgba(94,61,40,0.15); color: var(--brown-dark); }
.reward-claim {
    position: relative;
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid #b87713;
    border-radius: var(--r-pill);
    color: #4a2b03;
    background: linear-gradient(160deg, #ffe38b, #d99420);
    box-shadow: var(--sh-press) #a45d0d;
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
    cursor: pointer;
}
.reward-claim::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}
.reward-claim:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #a45d0d;
}

.level-cap-note {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 800;
    font-size: var(--fs-body);
    color: #ffd24a;
    background: rgba(20, 12, 7, .85);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    z-index: 3;
}

/* Levelpfad-Neudesign: Klicks kommen nur auf Cards mit Aktion, i und Truhen an. */
.reward-card.claimable,
.reward-info,
.level-chest,
.level-pop { pointer-events: auto; }

/* Dezente Zonen-Pill, kein Banner mit Cut-Anmutung. */
.level-zone-pill {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 12, 7, .85);
    color: #fffdf8;
    font-size: var(--fs-cap);
    font-weight: 800;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    white-space: nowrap;
    max-width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 253, 248, .25);
    z-index: 2;
}

/* Waldlaeufer-Truhe auf dem Pfad. */
.level-chest {
    position: absolute;
    transform: translate(-50%, -50%);
    width: var(--tap);
    height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 3px solid var(--gold);
    background: var(--brown-dark);
    box-shadow: 0 0 10px rgba(255, 210, 74, .8);
    font-size: var(--fs-h3);
    line-height: 1;
    cursor: pointer;
    z-index: 5;
}

/* Truhen-Popover (eigene leichte Schicht, kein Panel-Umbau). */
.level-pop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
}
.level-pop[hidden] { display: none; }
.level-pop-bg {
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 3, .65);
}
.level-pop-card {
    position: relative;
    width: min(430px, 94vw);
    max-height: min(88dvh, 720px);
    overflow: auto;
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    border-radius: var(--r-md);
    background: var(--soft-white);
    color: var(--brown-dark);
    font-size: var(--fs-body);
}
.level-pop-card h2 {
    margin: 0 var(--sp-8) var(--sp-2) 0;
    font-size: var(--fs-h3);
    font-weight: 800;
}
.level-pop-x {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    width: var(--tap);
    height: var(--tap);
    border-radius: 50%;
    border: 2px solid var(--brown);
    background: var(--soft-white);
    font-size: var(--fs-h3);
    cursor: pointer;
}
.level-pop-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.level-pop-card th,
.level-pop-card td {
    border: 1px solid rgba(94, 61, 40, .3);
    padding: var(--sp-1) var(--sp-2);
    text-align: left;
}
.level-pop-hinweis {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-cap);
    color: var(--brown);
}

/* Sprungknopf zum eigenen Level (sticky, nur bei weggescrolltem Level sichtbar; bewusst rechtsbuendig).
   Echte Bauhoehe statt 0 (sonst clippt die Panelkante), Abstand ueber der Ausblendzone der Scroll-Maske. */
.level-jump-wrap {
    position: sticky;
    bottom: calc(var(--sp-6) + var(--sp-2));
    height: auto;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 6;
}
/* Staerker als .btn.primary (0,2,0): sichtbare Hoehe = --tap, Breite = Inhalt. */
.btn.primary.level-jump {
    width: auto;
    pointer-events: auto;
    margin-right: var(--sp-3);
    min-height: var(--tap);
    min-width: var(--tap);
}
/* [hidden]-Attribut statt Klasse: das Btn-Normlayout (.btn:not(.hidden)) ueberstimmt sonst das Ausblenden. */
#level-jump[hidden] { display: none; }

/* Lebendiger Pfad: Fluss-Overlay, Blasen, Kristall-Puls. */
.level-fluss {
    stroke-dasharray: 2 15;
    animation: level-fluss 1.2s linear infinite;
}
@keyframes level-fluss { to { stroke-dashoffset: -17; } }
.level-blase { animation: level-blase 8s linear infinite; }
@keyframes level-blase { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.level-kristall { animation: level-kristall 1.6s ease-in-out infinite; }
@keyframes level-kristall { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
#level-world.calm .level-fluss,
#level-world.calm .level-blase,
#level-world.calm .level-kristall { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .level-fluss,
    .level-blase,
    .level-kristall { animation: none; }
}

.feature-intro-panel {
    max-width: min(88vw, 430px);
    text-align: center;
}
.feature-intro-icon {
    margin-bottom: var(--sp-3);
    font-size: clamp(var(--ic-lg), 8vmin, 54px);
    letter-spacing: .08em;
}
.feature-intro-panel h2 { color: var(--forest-green-dark); }
.feature-intro-panel p { line-height: 1.55; }
.feature-intro-panel .btn { margin-bottom: 0; }

/* Badge for Slow-Motion Power-Up */
#slowmo-badge {
    box-shadow: 0 4px 10px var(--shadow);
}

#level-menu-button {
    /* Level Menu Button specific styles if any */
}

/* ------------------------------------------------------------- Achievements */
.achievement-card {
    background: rgba(255, 253, 248, 0.9);
    border: 2px solid rgba(94, 61, 40, 0.15);
    border-radius: 16px;
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 10px var(--shadow);
    text-align: center;
}

/* Nur der Inhalt vergraut - das "i" bleibt farbig, denn gerade auf einer noch
   gesperrten Karte erklaert es, was zu tun ist. */
.achievement-card.locked {
    opacity: 0.8;
}
.achievement-card.locked .achievement-title,
.achievement-card.locked .achievement-circle-wrapper,
.achievement-card.locked .achievement-text {
    filter: grayscale(100%);
}

.achievement-title {
    font-weight: 800;
    font-size: var(--fs-body);
    color: var(--brown-dark);
    margin-bottom: var(--sp-2);
    min-height: var(--sp-7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-circle-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin-bottom: var(--sp-3);
    background: conic-gradient(var(--ach-color) var(--ach-progress, 0%), #e0e0e0 0%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.achievement-circle-inner {
    width: 58px;
    height: 58px;
    background: var(--soft-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-h1);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.achievement-text {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--brown);
    font-weight: 600;
}

/* Belohnungszeile der Karte. In JEDEM Zustand belegt und am Kartenfuss verankert -
   sonst stuenden die Knoepfe einer Reihe auf verschiedenen Hoehen. */
.ach-reward {
    width: 100%;
    margin-top: auto;
    padding-top: var(--sp-2);
    min-height: var(--btn-h-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ach-reward .reward-badge {
    text-align: center;
    line-height: var(--lh-tight);
    white-space: normal;
}
.ach-reward-claim { width: 100%; }
/* Einzige Primaeraktion des Reiters: inhaltsbreit und mittig, nicht panelbreit. */
.ach-claim-all {
    display: block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--sp-1);
}
/* Zielzeile und Belohnung stehen untereinander in derselben Rasterspalte. */
.ach-tier-goal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sp-1);
}
.ach-tier-reward { font-size: var(--fs-cap); font-weight: 800; white-space: nowrap; color: var(--c-ink-soft); }
.ach-tier-row.done .ach-tier-reward { color: var(--forest-green-dark); }

/* Tier Colors */
.tier-wood { --ach-color: #8a5a3b; }
.tier-stone { --ach-color: #555555; }
.tier-bronze { --ach-color: #cd7f32; }
.tier-silver { --ach-color: #c0c0c0; }
.tier-gold { --ach-color: #ffd700; }
.tier-diamond { --ach-color: #add8e6; }

/* Hinweis: Hier standen verwaiste Deklarationen eines #level-menu-button-Blocks,
   die der Parser samt der folgenden :active-Regel verschluckt hat. Die gültigen
   Regeln für den Button stehen weiter unten (Suche nach "#level-menu-button"). */

.reset-hint {
    font-size: var(--fs-body);
    color: #c62828;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    margin-top: var(--sp-3);
}
.reset-hint:hover {
    text-decoration: underline;
}

#dev-warn-indicator {
    position: absolute;
    top: 75px; /* frei: reine Dev-Anzeige, haengt an keiner Komponente */
    left: 50%;
    transform: translateX(-50%);
    color: #ff3333;
    font-size: var(--fs-body); /* Exakt doppelt so groß wie der Pausentext */
    font-weight: 900;
    letter-spacing: 2px;
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
#dev-warn-indicator.hidden { display: none; }

.hidden {
    display: none !important;
}

.transparent-overlay {
    background: transparent !important;
    flex-direction: column;
    justify-content: space-between;
    padding: 12dvh var(--sp-4h) 15dvh;
}

/* Früher inline am Element. Steht jetzt hier, damit die Kompakt-Media-Query
   diese Werte ohne !important überschreiben kann. */
#lobby-screen {
    justify-content: flex-start;
    gap: var(--sp-4);
    /* Oben bewusst knapp: mit den früheren 10dvh passte die Lobby auf vielen
       Bildschirmen nicht mehr ohne Scrollen. */
    padding: 5dvh var(--sp-4h) 4dvh;
    overflow-y: auto;
}

.lobby-title {
    /* Obergrenze von 75px auf 60px gesenkt - spart ~20px Höhe in der Lobby. */
    font-size: clamp(var(--fs-h2), 9.38vmin, 60px);
    color: var(--soft-white) !important;
    text-shadow: 0 6px 20px rgba(0,0,0,0.6);
    animation: bounce 2.2s ease-in-out infinite;
}
.lobby-action-stack {
    position: absolute;
    top: clamp(var(--sp-6), 8dvh, 96px);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(var(--sp-2), 1.5dvh, 13px);
    width: min(88vw, 350px);
    transform: translateX(-50%);
}
#lobby-screen .lobby-title {
    margin: 0 0 clamp(var(--sp-1), .7dvh, 7px);
    font-size: clamp(var(--fs-h1), 5.2vmin, 48px);
    animation: none;
    white-space: nowrap;
}
.lobby-primary-btn {
    width: 100%;
    min-height: clamp(var(--btn-h-lg), 8vmin, 66px);
    margin: 0;
    font-size: clamp(var(--fs-btn-lg), 3.2vmin, 27px);
    background: linear-gradient(160deg, #6bbd5a, #347c3d) !important;
    box-shadow: 0 5px 0 #235a31, 0 10px 20px rgba(28, 66, 33, .42) !important;
}
.lobby-welcome {
    min-height: 1.35em;
    margin: -2px 0 1px;
    color: #ffe38b;
    font-weight: 900; font-size: var(--fs-h1); font-family: var(--ff-ui);
    text-align: center;
    text-shadow: 0 3px 0 #9a6413, 0 5px 12px rgba(78, 47, 10, .52);
    animation: lobbyWelcomePulse 1.8s ease-in-out infinite;
}
@keyframes lobbyWelcomePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.045); filter: brightness(1.13); }
}
.lobby-info-btn, .lobby-mainpage-link {
    box-sizing: border-box;
    width: min(82%, 285px);
    border: 2px solid #757d85;
    border-radius: var(--r-md);
    padding: clamp(var(--sp-2), 1.45vmin, 12px) clamp(var(--sp-3), 2.2vmin, 19px);
    color: #29333a;
    background: linear-gradient(160deg, #edf0f2, #a7b0b7);
    box-shadow: 0 4px 0 #767d85, 0 7px 14px rgba(35, 31, 24, .25);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.lobby-mainpage-link {
    width: auto;
    margin-top: 2px;
    border-color: #82906c;
    color: #f9fff2;
    background: linear-gradient(160deg, #7d9a62, #4c7045);
    box-shadow: 0 4px 0 #375537, 0 7px 14px rgba(35, 31, 24, .25);
}
.lobby-info-btn:hover, .lobby-mainpage-link:hover { filter: brightness(1.08); }
.lobby-info-btn:active, .lobby-mainpage-link:active { transform: translateY(2px); }
.lobby-share-btn {
    position: absolute;
    left: max(var(--sp-4), env(safe-area-inset-left));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    z-index: 2;
    border: 2px solid #2c6438;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    color: #fff;
    background: linear-gradient(160deg, #5f9c58, #376e3c);
    box-shadow: 0 4px 0 #294f2e, 0 7px 14px rgba(35, 31, 24, .28);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
.lobby-share-btn:hover { filter: brightness(1.08); }
.lobby-modal-panel {
    position: relative;
    width: min(90vw, 590px);
    max-height: min(82dvh, 650px);
    padding: clamp(var(--sp-5), 4.5vmin, 40px);
    color: var(--brown-dark);
    text-align: left;
}
.lobby-modal-panel h2 { padding-right: var(--icon-btn); color: var(--forest-green-dark); }
/* Dichte Dialogstaffel: die Jubiläumsinfos sind Fliesstext in einem Systemfenster. */
.lobby-modal-panel p { font-size: var(--fs-dialog); font-weight: 600; line-height: var(--lh-body); }
.lobby-modal-wish { color: #39723e; font-weight: 800; }
.lobby-modal-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: var(--ic-lg);
    height: var(--ic-lg);
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #cf3b3b;
    box-shadow: 0 3px 0 #94292b;
    font-weight: 900; font-size: var(--fs-h2); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.share-modal-panel { text-align: center; }
.share-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
.share-actions button {
    border: 2px solid #4e7e48;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-2);
    color: #fff;
    background: linear-gradient(160deg, #6da55e, #3e7443);
    box-shadow: 0 3px 0 #2f5934;
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
.share-actions button:first-child { grid-column: 1 / -1; background: linear-gradient(160deg, #6ea7d7, #3672a8); border-color: #285d89; box-shadow: 0 3px 0 #23527b; }
.share-status { min-height: 1.4em; margin: var(--sp-3) 0 0; color: #39723e; font-weight: 800; }
@keyframes lobbyUpdatePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.045); filter: brightness(1.12); }
}
#lobby-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--sp-4), env(safe-area-inset-top)) var(--sp-3) var(--sp-5h);
    overflow: hidden;
}
.lobby-board {
    position: absolute;
    left: 50%;
    bottom: calc(18dvh + var(--sp-5h));
    width: min(92vw, 560px);
    min-height: min(78dvh, 570px);
    margin: 0;
    padding: clamp(var(--sp-5h), 5vmin, 48px) clamp(var(--sp-5), 6vmin, 60px) calc(var(--sp-8) + var(--sp-6));
    border: clamp(var(--sp-2), 1.8vmin, 14px) solid #5c351d;
    border-radius: var(--r-lg) 32px 24px var(--r-xl);
    color: #3b2416;
    text-align: center;
    background:
        radial-gradient(ellipse 12% 42% at 77% 26%, rgba(67, 35, 17, .28) 0 16%, transparent 18%),
        radial-gradient(ellipse 10% 32% at 22% 72%, rgba(73, 38, 18, .22) 0 14%, transparent 17%),
        repeating-linear-gradient(176deg, rgba(65, 32, 15, .18) 0 1px, transparent 1px 18px),
        linear-gradient(98deg, #9a5f31, #c58a4d 19%, #8b5228 48%, #b9783d 72%, #78431f);
    box-shadow: inset 0 0 0 4px rgba(245, 205, 133, .48), inset 0 0 34px rgba(46, 23, 10, .42),
        0 18px 30px rgba(24, 21, 13, .42);
    transform: translateX(-50%);
}
.lobby-board::before {
    content: '';
    position: absolute;
    inset: var(--sp-2);
    border: 2px solid rgba(55, 29, 14, .62);
    border-radius: var(--r-md) 24px var(--r-md) var(--r-lg);
    pointer-events: none;
}
.lobby-board-leg {
    position: absolute;
    bottom: -52px;
    box-sizing: border-box;
    width: 36px;
    height: 58px;
    border: 4px solid #54301a;
    border-top: 0;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: linear-gradient(90deg, #6e3e20, #a86736 55%, #573019);
    box-shadow: 0 5px 5px rgba(20, 15, 9, .3);
}
.lobby-board-leg::after {
    content: '';
    position: absolute;
    right: -4px;
    bottom: -4px;
    left: -4px;
    height: 6px;
    background: #4d2c18;
    clip-path: polygon(0 100%, 8% 0, 92% 0, 100% 100%);
}
.lobby-board-leg-left { left: 16%; transform: rotate(4deg); transform-origin: 50% 0; }
.lobby-board-leg-right { right: 16%; transform: rotate(-4deg); transform-origin: 50% 0; }
.lobby-board[data-season="season_winter"] { background-color: #85705b; }
.lobby-board[data-season="season_autumn"] { background-color: #914d29; }
.lobby-board[data-season="season_party"] { background-color: #65427a; }
#lobby-screen .lobby-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #2e1a0e !important;
    font-weight: 900; font-size: var(--fs-h1); line-height: .98; font-family: var(--ff-ui);
    letter-spacing: -.055em;
    text-shadow: 1px 1px 0 #e7af72, 3px 4px 0 #70401f, 0 7px 12px rgba(42, 22, 10, .38);
}
.lobby-welcome {
    position: relative;
    z-index: 1;
    min-height: 1.3em;
    margin: var(--sp-4) 0 var(--sp-4);
    color: #51311c;
    font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui);
    text-shadow: 0 1px 0 rgba(255, 239, 195, .7);
    animation: none;
}
.lobby-posters {
    position: relative;
    z-index: 2; /* ueberm Canvas (1), unterm Feuer (3) */
    display: grid;
    gap: clamp(var(--sp-3), 1.9vmin, 16px);
    justify-items: center;
}
.lobby-poster {
    position: relative;
    width: min(100%, 390px);
    min-height: clamp(var(--btn-h-lg), 8vmin, 64px);
    border: 2px solid #78543a;
    border-radius: var(--r-sm) 8px var(--r-sm) var(--r-sm);
    padding: var(--sp-3) var(--sp-5);
    color: #3d2a1d;
    background:
        linear-gradient(115deg, transparent 0 6%, rgba(128, 91, 54, .1) 6% 8%, transparent 8% 100%),
        #f7e7ba;
    box-shadow: 3px 5px 0 rgba(67, 39, 20, .31), inset 0 0 15px rgba(129, 91, 46, .13);
    font-weight: 900; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui); /* Einzeiler sitzt damit mittig im Plakat. */
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}
.lobby-poster::before, .lobby-poster::after {
    content: '';
    position: absolute;
    /* Die Reissnaegel sitzen mittig an den Seiten, nicht oben in den Ecken. */
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border: 1px solid #763826;
    border-radius: 50%;
    background: #d75236;
    box-shadow: 0 1px 1px rgba(48, 21, 12, .7);
}
.lobby-poster::before { left: var(--sp-2); }
.lobby-poster::after { right: var(--sp-2); }
.lobby-poster:hover, .lobby-poster:focus-visible { transform: rotate(-.7deg) translateY(-2px); filter: brightness(1.06); }
.lobby-poster:active { transform: translateY(2px); }
.lobby-primary-btn { background-color: #e7f0bd !important; }
/* Wartet ein Update, traegt derselbe Startknopf die goldene Aufforderung. */
.lobby-poster.lobby-start-update {
    border-color: #b76d10 !important;
    /* 4a2b03 auf dem dunklen Verlaufsende (#d99420) = 5,0:1 - 5b3605 waere nur 4,1:1. */
    color: #4a2b03 !important;
    background: linear-gradient(145deg, #ffe38b, #d99420) !important;
    box-shadow: 3px 5px 0 #a45d0d, inset 0 0 15px rgba(139, 84, 8, .18) !important;
    animation: lobbyUpdatePulse 1s ease-in-out infinite;
}
/* Wer die Tour noch vor sich hat, startet sie ueber denselben Knopf. */
.lobby-poster.lobby-start-tutorial {
    border-color: #3f6636 !important;
    color: #24401f !important;
    background: linear-gradient(145deg, #d9f0b4, #a4cf7d) !important;
    box-shadow: 3px 5px 0 #4f7a3c, inset 0 0 15px rgba(46, 82, 31, .18) !important;
    animation: lobbyUpdatePulse 1.4s ease-in-out infinite;
}
.lobby-info-btn { background-color: #d9e9ee !important; }
.lobby-board-corner {
    position: absolute;
    bottom: var(--sp-4h);
    z-index: 2;
    border: 2px solid #52321d;
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    color: #fff7dd;
    background: linear-gradient(145deg, #729151, #415f35);
    box-shadow: 0 3px 0 #2c4528;
    font-weight: 900; font-size: var(--fs-cap); font-family: var(--ff-ui);
    text-decoration: none;
    cursor: pointer;
}
.lobby-share-btn { left: var(--sp-4); }
.lobby-switch-btn {
    left: 50%;
    transform: translateX(-50%);
}
.lobby-mainpage-link { right: var(--sp-4); }
.lobby-board-corner:hover { filter: brightness(1.1); }
.lobby-board-corner:disabled {
    opacity: .48;
    filter: grayscale(.75);
    cursor: not-allowed;
}
.lobby-buttons {
    width: min(94vw, 380px);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
#back-to-lobby-btn {
    background: linear-gradient(160deg, #9ca3af, #6b7280) !important;
    box-shadow: 0 5px 0 #4b5563, 0 9px 18px var(--shadow) !important;
    color: white !important;
}
#back-to-lobby-btn:active {
    box-shadow: 0 1px 0 #4b5563, 0 4px 10px var(--shadow) !important;
}

#level-menu-button {
    background: linear-gradient(160deg, #8ae65c, #52b324) !important;
    box-shadow: 0 5px 0 #388a12, 0 9px 18px var(--shadow) !important;
    color: white !important;
}
#level-menu-button:active {
    box-shadow: 0 1px 0 #388a12, 0 4px 10px var(--shadow) !important;
}

#diamond-popup {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 100;
    opacity: 0;
}
#diamond-popup.hidden {
    display: none;
}
#diamond-popup.animate {
    display: flex;
    animation: diamondPopAnim 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.diamond-icon {
    font-size: clamp(var(--ic-md), 10vmin, 80px);
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
    animation: diamondFloat 2s ease-in-out infinite;
}
#diamond-popup-text {
    font-size: var(--fs-body);
    font-weight: 900;
    color: white;
    text-shadow: 0 4px 10px rgba(0,0,0,0.8), 0 0 20px #00b4db;
    margin-top: var(--sp-3);
    background: linear-gradient(180deg, #ffffff, #a8e6ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes diamondPopAnim {
    0% { transform: translate(-50%, -30%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    25% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -150%) scale(0.5); opacity: 0; }
}
@keyframes diamondFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(5deg); }
    50% { transform: translateY(-10px) rotate(0deg); }
    75% { transform: translateY(-5px) rotate(-5deg); }
}

.currency-pill {
    background: white;
    border: 2px solid rgba(139, 90, 43, 0.2);
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-body);
    font-weight: 800;
    color: #4a2f14;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    min-width: calc(var(--sp-8) + var(--sp-3));
    justify-content: center;
}
.currency-pill.diamond {
    color: var(--c-info);
    border-color: var(--c-info);
}

@keyframes textPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.15); opacity: 1; text-shadow: 0 0 15px rgba(255, 255, 255, 0.8); }
}

/* ------------------------------------------------------------------ Vollbild-Tor */
/* Sichtbarkeit steuert JS über die globale .hidden-Klasse - KEINE Media-Query mehr,
   damit der Screen nicht fälschlich bei jedem schmalen Desktop-Fenster auftaucht. */
#fullscreen-gate {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Notch berücksichtigen, falls das Tor im Nicht-Vollbild auf dem Handy erscheint */
    padding-top: max(var(--sp-5), env(safe-area-inset-top))    !important;
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom)) !important;
    padding-left: max(var(--sp-5), env(safe-area-inset-left))   !important;
    padding-right: max(var(--sp-5), env(safe-area-inset-right))  !important;
}

/* ==========================================================================
   Handy-Oberfläche (Querformat)
   --------------------------------------------------------------------------
   Das gemeinsame Geruest gilt auf allen Groessen. Die Regeln in diesem Block
   verdichten nur einzelne Inhalte im niedrigen Querformat.
   ========================================================================== */
/* Pause-Knopf: nur auf Touch-Geräten, dort gibt es keine ESC-Taste. */
#pause-button {
    display: none;
    pointer-events: auto;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}
body.is-mobile #pause-button { display: flex; }
body.is-mobile #pause-button.hidden { display: none !important; }
/* Auf Touch ist der ESC-Hinweis sinnlos - der Knopf ersetzt ihn. */
body.is-mobile #pause-hint { display: none !important; }

@media (max-width: 720px), (max-height: 480px) {

    /* ----------------------------------------------------------- HUD */
    /* Leckerlis und Diamanten nebeneinander statt untereinander, damit
       nichts unter die Dynamic Island rutscht. Die Badges reihen sich mit
       ein bzw. brechen um. */
    .hud-col.left {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    /* -------------------------------------------------- Panel-Grundgerüst */
    .panel {
        width: min(100% - 2 * var(--sp-3), 760px);
        max-height: 92dvh;
        max-height: min(92dvh, 720px);
        padding: var(--sp-3) var(--sp-4);
        border-radius: var(--r-md);
        border-width: 2px;
    }
    .panel-body {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--sp-2), 2dvh, 12px);
        align-items: stretch;
        text-align: left;
    }
    .panel-main,
    .panel-actions {
        display: flex;
        flex-direction: column;
        gap: clamp(var(--sp-2), 2dvh, 12px);
        min-width: 0;
    }
    .panel-actions .btn {
        margin: 0;
        padding: var(--sp-2) var(--sp-3);
        font-size: clamp(var(--fs-btn), 3dvh, 16px);
        font-weight: 800;
    }
    .panel .logo { margin-bottom: 0; }
    .panel h1, .panel h2 { margin-bottom: 2px; }
    .panel .subtitle { margin-bottom: var(--sp-1); }
    .beta-badge { margin-bottom: var(--sp-1); }

    /* ------------------------------------------------------ Hauptmenü */
    /* Legende und Hauptmenü bleiben auch auf dem Handy nebeneinander.
       ⚠ Hier stand bis Etappe 1 ein "transform: scale(0.75)" auf 115vw Breite,
       ausgeglichen durch "max-height: 115dvh". Das hat die gesamte Oberflaeche
       heruntergezoomt (unscharfe Kanten, 10px-Schrift) statt sie zu passen.
       Die Groesse kommt jetzt aus den Tokens, der Ueberlauf aus dem
       scrollenden Panel-Koerper. */
    .start-screen-wrapper {
        gap: var(--sp-3);
        width: 100%;
        max-width: 1000px;
    }
    .start-screen-wrapper .panel {
        max-height: 88dvh;
    }
    #start-screen .stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-1);
        margin: 0;
    }
    #start-screen .panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(var(--sp-2), 2dvh, 12px);
        align-content: start;
    }
    #start-screen #start-button { grid-column: 1 / -1; }
    #start-screen .hint,
    #start-screen #dev-mode-text-btn,
    #start-screen #reset-save-btn {
        grid-column: 1 / -1;
        margin: 0;
        text-align: center;
    }

    /* ---------------------------------------------------------- Lobby */
    .lobby-screen-wrapper {
        gap: var(--sp-3);
        width: 100%;
        max-width: 1000px;
    }
    .lobby-screen-wrapper .panel {
        max-height: 88dvh;
    }
    #lobby-screen {
        justify-content: center;
        gap: 0;
        padding: var(--sp-2) var(--sp-3);
    }
    #lobby-screen > .lobby-title { display: none; }   /* Titel steht im Panel-Kopf */
    #lobby-screen .lobby-intro   { display: none; }   /* Fließtext spart 3 Zeilen */
    #lobby-screen .panel {
        text-align: center;
    }
    #lobby-screen .lobby-save-note { display: none; } /* reiner Erklärtext */
    #lobby-screen .panel-actions > div { margin-top: 0 !important; }
    #lobby-screen .panel-actions a.btn { margin-top: 0 !important; }
    /* Der Wiederholen-Link darf die ohnehin knappe Panel-Höhe nicht sprengen. */
    #tut-replay-btn { margin-top: var(--sp-1); }

    /* ------------------------------------------------------- Game-Over */
    /* Die drei Stat-Reihen werden aufgelöst, damit alle 7 Kacheln direkte
       Kinder von .panel-main werden und sich per "order" frei sortieren
       lassen - ohne HTML-Umbau und ohne Auswirkung auf den Desktop. */
    #gameover-screen .panel-main {
        display: flex;
        flex-direction: row;   /* überschreibt das column der Basisregel */
        flex-wrap: wrap;
        gap: var(--sp-1);
        align-content: start;
    }
    #gameover-screen .stats-row { display: contents; }
    #gameover-screen .stat {
        order: 2;
        flex: 1 1 40%;
        padding: var(--sp-1) var(--sp-2);
        gap: 0;
    }
    /* Diamanten (Lauf), Bester Lauf und Gesamt-Vorrat verlieren die Kachel
       und rutschen als schmale Textzeile ans Ende. */
    #gameover-screen .stats-row:first-of-type .stat:nth-child(3),
    #gameover-screen .stats-row.small:last-of-type .stat {
        order: 3;
        flex: 0 1 auto;
        flex-direction: row;
        align-items: baseline;
        gap: var(--sp-1);
        background: none;
        border: none;
        box-shadow: none;
        padding: 0 var(--sp-2);
    }
    #gameover-screen .stats-row:first-of-type .stat:nth-child(3) .stat-value,
    #gameover-screen .stats-row.small:last-of-type .stat .stat-value {
        font-size: var(--fs-cap);
    }
    #gameover-screen .record {
        order: 1;
        flex-basis: 100%;
        margin: 0;
    }
    #gameover-screen .panel-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3);
        align-content: start;
    }
    #gameover-screen #restart-button { grid-column: 1 / -1; }
}

#fullscreen-hint {
    position: absolute;
    top: var(--sp-1);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-body);
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    pointer-events: none;
    z-index: 1000;
}
body.is-mobile #fullscreen-hint {
    display: none !important;
}

#fullscreen-hint {
    display: none;
}
:fullscreen #fullscreen-hint {
    display: block;
}

/* ============================================================== Sammelheft */

/* --- Rote "Neu"-Markierung (Button, Reiter, Karten, Errungenschaften) --- */
.new-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    /* Skill §5.5: Blase nie kleiner als 20px, auch in der Handy-Staffel. */
    min-width: max(var(--sp-4h), 20px);
    height: max(var(--sp-4h), 20px);
    padding: 0 0.85em;
    box-sizing: border-box;
    border-radius: var(--r-pill);
    background: linear-gradient(160deg, #ff5f52, #d32f2f);
    border: 2px solid var(--soft-white);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 1;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 5;
    pointer-events: none;
    animation: newBadgePulse 1.1s ease-in-out infinite;
}
.new-badge.hidden { display: none; }
.new-badge.fade-out {
    animation: none;
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s ease;
}
@keyframes newBadgePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.16); }
}
/* Willkommensgeschenk: das Badge lebt im Claim-Button und ist nur mit ihm sichtbar. */
#lab-harald-claim, #forge-edeltraud-claim { position: relative; padding-inline: var(--sp-6); }
#lab-harald-claim .new-badge, #forge-edeltraud-claim .new-badge {
    top: calc(-1 * var(--sp-2));
    right: calc(-1 * var(--sp-2));
    min-width: 24px;
    height: 24px;
    font-weight: 900;
    line-height: 20px;
}

/* --- Reiter mit gleitender Pille (Muster von #shop-categories) --- */
.achievements-panel {
    text-align: center;
}
#ach-tabs {
    display: flex;
    position: relative;
    margin: var(--sp-1) 0 var(--sp-3);
    padding: 0;
    gap: 0;
    border-radius: var(--r-pill);
    border: 2px solid rgba(94, 61, 40, 0.15);
    background: rgba(255, 253, 248, 0.8);
    overflow: visible;
    flex: 0 0 auto;
}
#ach-tabs::before {
    content: '';
    position: absolute;
    top: 3px;
    height: calc(100% - 6px);
    width: calc(50% - 6px);
    margin-left: 3px;
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-radius: var(--r-pill);
    box-shadow: 0 3px 0 var(--forest-green-dark);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
#ach-tabs[data-active="0"]::before { left: 0%; }
#ach-tabs[data-active="1"]::before { left: 50%; }

.ach-tab {
    flex: 1 1 0;
    width: 50%;
    position: relative;
    z-index: 1;
    padding: var(--sp-3) 0;
    border: none;
    background: transparent;
    color: var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
    transition: color 0.25s ease;
    white-space: nowrap;
    text-align: center;
}
.ach-tab.active { color: var(--soft-white); }
.ach-tab .new-badge { top: 2px; right: var(--sp-2); }

/* Panes füllen den Panel-Rest und scrollen selbst */
.ach-pane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ach-pane.hidden { display: none; }

/* --- Heft --- */
/* Das Panel ist inhaltsgesteuert; ohne Eigenhöhe würde das Buch auf die
   Texthöhe zusammenfallen. Daher eine ausdrückliche, mitwachsende Höhe. */
#album-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: clamp(210px, 52dvh, 520px);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-2);
}
#album-book {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    perspective: 1600px;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, #f7f1df, #e6dcc1);
    border: 3px solid #8a6338;
    box-shadow: inset 0 0 26px rgba(94, 61, 40, 0.28), 0 10px 26px var(--shadow);
    overflow: hidden;
}
/* Buchrücken in der Mitte */
#album-book::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 16px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        rgba(94, 61, 40, 0) 0%, rgba(94, 61, 40, 0.22) 40%,
        rgba(94, 61, 40, 0.34) 50%, rgba(94, 61, 40, 0.22) 60%, rgba(94, 61, 40, 0) 100%);
    pointer-events: none;
    z-index: 4;
}
/* Vollständiges Heft: Edelstein-Rahmen der Mythischen ums ganze Buch */
#album-book.complete {
    border-color: #e6c96a;
    box-shadow: inset 0 0 26px rgba(230, 201, 106, 0.4),
                0 0 0 3px #f7e3a1, 0 0 26px rgba(247, 227, 161, 0.75),
                0 10px 26px var(--shadow);
}
#album-book.complete .album-page { background: linear-gradient(160deg, #fffbe8, #f4e6bd); }

.album-page {
    flex: 1 1 50%;
    width: 50%;
    box-sizing: border-box;
    padding: clamp(var(--sp-2), 1.8vmin, 18px);
    overflow-y: auto;
    background: linear-gradient(160deg, #fffdf5, #f3ead2);
    backface-visibility: hidden;
    transform-origin: left center;
}
.album-page.left { border-right: 1px solid rgba(94, 61, 40, 0.18); transform-origin: right center; }

/* Blätter-Animation */
.album-page.flip-out-next { animation: flipOutNext 0.28s ease-in forwards; }
.album-page.flip-in-next  { animation: flipInNext 0.28s ease-out backwards; }
.album-page.flip-out-prev { animation: flipOutPrev 0.28s ease-in forwards; }
.album-page.flip-in-prev  { animation: flipInPrev 0.28s ease-out backwards; }
@keyframes flipOutNext { from { transform: rotateY(0deg); }   to { transform: rotateY(-92deg); } }
@keyframes flipInNext  { from { transform: rotateY(92deg); }  to { transform: rotateY(0deg); } }
@keyframes flipOutPrev { from { transform: rotateY(0deg); }   to { transform: rotateY(92deg); } }
@keyframes flipInPrev  { from { transform: rotateY(-92deg); } to { transform: rotateY(0deg); } }

/* Linke Info-Seite */
.album-cat-icon { font-size: clamp(var(--ic-md), 6vmin, 52px); line-height: 1; }
.album-cat-name {
    font-size: clamp(var(--fs-sm), 2.6vmin, 24px);
    font-weight: 800;
    color: var(--brown-dark);
    margin: var(--sp-2) 0 2px;
}
.album-cat-sub {
    font-size: var(--fs-cap);
    color: var(--brown);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}
.album-progress-text {
    font-size: var(--fs-body);
    font-weight: 800;
    color: var(--brown-dark);
    margin-bottom: var(--sp-2);
}
.album-progress-bar {
    height: var(--sp-3);
    border-radius: var(--r-pill);
    background: rgba(94, 61, 40, 0.18);
    overflow: hidden;
    margin-bottom: var(--sp-3);
}
.album-progress-fill {
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, #8bc34a, #558b2f);
    transition: width 0.4s ease;
}
/* Cover-Fortschritt als grün füllender Kreis (wie bei den Errungenschaften) */
.album-cover-left { display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; justify-content: center; }
.album-cover-circle {
    position: relative;
    width: clamp(104px, 26vmin, 190px);
    height: clamp(104px, 26vmin, 190px);
    border-radius: 50%;
    margin: clamp(var(--sp-3), 3vmin, 26px) auto 0;
    background: conic-gradient(#5fa832 var(--card-progress, 0%), rgba(94, 61, 40, 0.16) 0%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.album-cover-circle-inner {
    width: 78%;
    height: 78%;
    border-radius: 50%;
    background: var(--soft-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
}
.album-cover-circle .acc-count { font-size: clamp(var(--ic-sm), 5vmin, 40px); font-weight: 900; color: var(--brown-dark); line-height: 1; }
.album-cover-circle .acc-label { font-size: var(--fs-cap); font-weight: 800; color: var(--brown); line-height: 1.15; }
.album-note-fish { border-color: rgba(47, 127, 216, 0.4); background: rgba(228, 240, 252, 0.9); }
.album-note-cave { border-color: rgba(109, 79, 142, 0.45); background: rgba(238, 232, 247, 0.9); }
.album-note-rainbow { border-color: rgba(176, 108, 240, 0.5); background: rgba(250, 235, 252, 0.92); }
/* Dezenter Trenner zwischen Selten (oben) und Legendär (unten) */
.album-rarity-divider {
    height: 0;
    border-top: 1px dashed rgba(94, 61, 40, 0.28);
    margin: clamp(var(--sp-2), 1.8vmin, 16px) clamp(var(--sp-1), 2vmin, 18px);
}
/* Mythisch: eine Karte, mittig, auf normale Kartengröße (mittlere von 3 Spalten) */
.album-mythic-single {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--sp-2), 1.2vmin, 12px);
    align-content: center;
    height: 100%;
}
.album-mythic-single .album-card { grid-column: 2; }
.album-legend { text-align: left; font-size: var(--fs-cap); line-height: 1.45; color: var(--brown-dark); }
.album-legend .lg-row { display: flex; align-items: flex-start; gap: var(--sp-1); margin-bottom: var(--sp-1); }
.album-legend .lg-chip {
    flex: 0 0 auto;
    margin-top: 1px;
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    font-weight: 800;
    font-size: var(--fs-cap);
    color: #fff;
    white-space: nowrap;
}
.album-note {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, 0.85);
    border: 2px solid rgba(94, 61, 40, 0.15);
    font-size: var(--fs-body);
    color: var(--brown-dark);
    text-align: left;
    line-height: 1.4;
}

/* Kartenraster auf den Seiten */
.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--sp-2), 1.2vmin, 12px);
    align-content: start;
}
.album-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.album-grid.cols-1 { grid-template-columns: 1fr; justify-items: center; }

.album-card {
    position: relative;
    cursor: pointer;
    border-radius: var(--r-md);
    line-height: 0;
    transition: transform 0.18s ease, filter 0.18s ease;
}
.album-card img, .album-card canvas { width: 100%; height: auto; display: block; border-radius: var(--r-md); }
.album-card:hover { transform: translateY(-4px) scale(1.03); }
.album-card.locked { opacity: 1; }
.album-card.locked canvas { filter: grayscale(100%); }
.album-card .dup-count {
    position: absolute;
    bottom: var(--sp-1);
    left: var(--sp-1);
    padding: 1px var(--sp-2);
    border-radius: var(--r-pill);
    background: rgba(30, 42, 22, 0.82);
    color: #ffe58a;
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 15px;
}

/* Blätter-Pfeile + Punkte */
.album-nav {
    flex: 0 0 auto;
    align-self: center;
    width: clamp(var(--sp-5), 4.4vmin, 44px);
    height: clamp(var(--sp-7), 8vmin, 76px);
    border: none;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, #b98d5e, var(--brown));
    color: var(--soft-white);
    font-size: clamp(var(--ic-sm), 3.4vmin, 30px);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--brown-dark), 0 7px 14px var(--shadow);
    transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.2s ease;
}
.album-nav:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brown-dark), 0 3px 8px var(--shadow); }
.album-nav:disabled { opacity: 0.3; cursor: default; box-shadow: 0 4px 0 var(--brown-dark); }

#album-dots { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) 0 2px; flex: 0 0 auto; }
#album-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(94, 61, 40, 0.28);
    transition: background 0.25s ease, transform 0.25s ease;
}
#album-dots span.on { background: var(--forest-green); transform: scale(1.35); }

/* --- Lightbox --- */
#lb-card { flex: 0 0 auto; line-height: 0; }
#lb-card img, #lb-card canvas {
    width: clamp(120px, 26vmin, 240px);
    height: auto;
    border-radius: var(--r-md);
    box-shadow: 0 12px 30px rgba(30, 42, 22, 0.45);
}
#lb-info { flex: 1 1 200px; min-width: 160px; text-align: left; }
#lb-info h2 { margin: 0 0 var(--sp-1); font-size: clamp(var(--fs-sm), 3vmin, 26px); color: var(--brown-dark); }
#lb-rarity {
    display: inline-block;
    padding: 3px var(--sp-3);
    border-radius: var(--r-pill);
    color: #fff;
    font-size: var(--fs-cap);
    font-weight: 800;
    margin-bottom: var(--sp-2);
}
#lb-desc { font-size: var(--fs-sm); color: var(--brown); font-weight: 600; line-height: 1.45; margin: 0 0 var(--sp-2); }
#lb-meta { font-size: var(--fs-cap); color: var(--brown); opacity: 0.85; margin: 0; }
/* Errungenschaftskarte braucht Positionierung für ihr Badge */
.achievement-card { position: relative; }

/* Querformat-Handy (der Normalfall für dieses Spiel): jede Zeile Kopfbereich
   geht den Karten verloren, daher Icon/Untertitel weg und alles enger. */
@media (max-width: 720px), (max-height: 480px) {
    #ach-tabs { margin: 2px 0 var(--sp-1); }
    .ach-tab { padding: var(--sp-1) 0; }
    #album-dots { padding: 3px 0 0; }
    .album-page { padding: var(--sp-1) var(--sp-2); }
    #album-stage { height: clamp(150px, 60dvh, 300px); }
    .album-cat-icon { display: none; }
    .album-cat-sub { display: none; }
    .album-cat-name { margin: 0 0 2px; }
    .album-progress-bar { height: 8px; margin-bottom: var(--sp-1); }
    .album-progress-text { margin-bottom: 3px; }
    .album-note { margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2); }
    #achievements-screen .btn { padding: var(--sp-2) var(--sp-4); }
}

/* ==========================================================================
   Tutorial (Erklär-Tour)
   --------------------------------------------------------------------------
   Liegt über ALLEM außer dem Vollbild-Tor (z-index 20000). Muss über den
   Mute-Knopf (9999) und den Performance-Schalter (999), sonst blieben die
   beiden hell, während der Rest abgedunkelt ist.
   Abgedunkelt wird per SVG-Maske statt backdrop-filter: das kostet auf
   schwachen Handys deutlich weniger - genau die Geräte, für die es den
   Performance Mode überhaupt gibt.
   ========================================================================== */
#tutorial-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-tutorial);
    pointer-events: auto;   /* schluckt jeden Klick: nichts darunter ist bedienbar */
    animation: fadeIn 0.25s ease;
    font-family: inherit;
}
#tutorial-layer.hidden { display: none !important; }
#tutorial-layer.tut-interactive { pointer-events: none; }
#tutorial-layer.tut-interactive #tut-box { pointer-events: auto; }
#tutorial-layer.tut-interactive #tut-skip { pointer-events: auto; }

/* Im Lauf darf die Tour weder abdunkeln noch Eingaben schlucken: der Spieler muss
   die Welt sehen, springen und pausieren koennen. */
#tutorial-layer.tut-passthrough,
#tutorial-layer.tut-passthrough #tut-box { pointer-events: none; }
#tutorial-layer.tut-passthrough #tut-skip { pointer-events: auto; }

/* Während der Tour stehen die hervorgehobenen Dinge still.
   Grund: Der rote Rahmen wird aus getBoundingClientRect() gesetzt, und das liefert
   bei laufender Transform-Animation den Zwischenstand.
     .panel  poppt beim Erscheinen von scale(0.85) auf 1  -> Rahmen zu klein
     .logo / .lobby-title wippen DAUERHAFT 10px auf und ab -> Rahmen kommt nie
             zur Ruhe, weil er einem beweglichen Ziel hinterherläuft
   Beides betrifft ausschließlich die Tour; beim normalen Spielen bleiben Aufpoppen
   und Wippen unverändert erhalten. */
body.tut-active .panel,
body.tut-active .logo,
body.tut-active .lobby-title { animation: none; }
/* ⚠ Muss die drei Klassen von .panel.panel-layout.panel-opening ueberbieten, sonst
   skaliert das Fenster beim Oeffnen weiter (matrix(0.82)) und die Rahmen werden auf
   der halbfertigen Groesse gemessen - genau daran hingen die Einstellungs-Rahmen.
   Das Mehr-Blatt faehrt mit pgMoreOpen 16 px von unten herein und braucht dieselbe
   Bremse; hier gewinnt nur eine Regel MIT der ID. */
body.tut-active .panel.panel-layout.panel-opening,
body.tut-active #playground-more-sheet { animation: none; }

/* ⚠ Fenster, die die Tour selbst aufmacht, werden NICHT mehr per z-index ueber die
   Abdunklung gehoben - diese Stapelreihenfolge ist schon einmal gekippt und liess den
   Namensdialog ausgegraut zurueck. Stattdessen blendet Tutorial.pausiereFuerDialog()
   die ganze Ebene aus, solange der Dialog offen ist (src/ui/tutorial.js). */

#tut-dim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
#tut-dim-paint { fill: rgba(20, 28, 16, 0.78); }
/* Schritte ohne Abdunklung: die Rahmen bleiben, nur das Grau faellt weg. */
#tutorial-layer.tut-clear #tut-dim-paint { fill: transparent; }

/* ------------------------------------------------------------------ Ringe */
.tut-ring {
    position: absolute;
    border: 3px solid #e04a3f;
    border-radius: var(--r-md);
    box-shadow: 0 0 0 3px rgba(224, 74, 63, 0.25), 0 0 22px rgba(224, 74, 63, 0.5);
    pointer-events: none;
}

#tutorial-layer.tut-action-step .tut-ring {
    animation: tutActionRingPulse 1.15s ease-in-out infinite;
}

@keyframes tutActionRingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(224, 74, 63, 0.28), 0 0 22px rgba(224, 74, 63, 0.52);
    }
    50% {
        transform: scale(1.018);
        box-shadow: 0 0 0 7px rgba(224, 74, 63, 0.13), 0 0 34px rgba(224, 74, 63, 0.82);
    }
}

/* --------------------------------------------------------------- Textbox */
#tut-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: max-content;
    max-width: min(92vw, 380px);
    box-sizing: border-box;
    background: linear-gradient(160deg, var(--soft-white), var(--cream));
    border: 3px solid rgba(94, 61, 40, 0.2);
    border-radius: var(--r-md);
    padding: clamp(var(--sp-3), 2vmin, 16px) clamp(var(--sp-3), 2.2vmin, 18px);
    box-shadow: var(--sh-modal);
    text-align: left;
    animation: popIn 0.3s var(--ease-pop);
}

#tut-progress {
    font-size: var(--fs-cap);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--forest-green);
    opacity: 0.85;
    margin-bottom: var(--sp-1);
}

#tut-title {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--forest-green-dark);
    margin: 0 0 var(--sp-2);
    line-height: var(--lh-tight);
}
/* Warnschritt: der Titel selbst traegt die Dringlichkeit (plus ⚠️ im Text). */
#tut-title.tut-title-alarm { color: var(--c-danger-dark); }

/* Fliesstext: nie unter 14px - die Tour lesen auch Kinder auf kleinen Displays. */
#tut-text {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--c-ink);
    font-weight: 600;
    margin: 0;
}
#tut-text b { color: var(--forest-green-dark); }

/* Roter Hinweis: Farbe allein traegt keine Bedeutung, deshalb Rand, Zeichen und
   das Wort "Wichtig" gemeinsam. */
#tut-wichtig {
    font-size: var(--fs-sm);
    line-height: 1.5;
    font-weight: 600;
    color: var(--c-ink);
    margin: var(--sp-2) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border-left: 4px solid var(--c-danger);
    border-radius: var(--r-sm);
    background: rgba(200, 69, 47, 0.09);
}
#tut-wichtig::before {
    content: '⚠️ Wichtig! ';
    font-weight: 900;
    color: var(--c-danger-dark);
}
#tut-wichtig b { color: var(--c-danger-dark); }
#tut-wichtig.hidden { display: none !important; }

/* Abschluss-Schritt ohne Ziel: Box mittig, etwas festlicher. */
#tutorial-layer.tut-finale #tut-box {
    text-align: center;
    max-width: min(92vw, 440px);
}

/* ---------------------------------------------------------- Bedienelemente */
#tut-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
#tut-actions.hidden { display: none !important; }

/* Fusszeile: Überspringen ganz links, Zurück und Weiter rechts. */
#tut-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding-top: var(--sp-2);
    border-top: 1px solid rgba(94, 61, 40, 0.14);
}
#tut-controls #tut-skip { margin-right: auto; }

/* Entscheidungsschritt (Skill §5.7): vier Bedienelemente in zwei Reihen -
   oben Überspringen/Zurück, darunter die beiden Wege. Genau einer ist primär. */
#tutorial-layer.tut-wahl #tut-actions { grid-template-columns: 1fr 1fr; }

#tut-next, #tut-back, #tut-skip, .tut-action {
    position: relative;
    font-family: inherit;
    cursor: pointer;
    border: none;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: var(--r-pill);
    font-size: var(--fs-btn);
    min-height: var(--btn-h-md);
    padding: 0 var(--sp-3);
}

/* Sichtbar bleiben die Knoepfe kompakt (40px); die Trefferflaeche waechst
   unsichtbar auf 44px. Ueber padding ginge das nicht - das sitzt in min-height. */
#tut-next::after, #tut-back::after, #tut-skip::after, .tut-action::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--tap);
    min-width: var(--tap);
}

#tut-next {
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    color: var(--soft-white);
    box-shadow: 0 var(--sh-press-y) 0 #2f4d28, 0 9px 18px rgba(0, 0, 0, 0.22);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
#tut-next:active {
    transform: translateY(4px);
    box-shadow: 0 var(--sh-press-in) 0 #2f4d28, 0 2px 5px rgba(0, 0, 0, 0.2);
}

.tut-action {
    background: linear-gradient(160deg, var(--cream), var(--cream-soft));
    color: var(--c-ink);
    border: 2px solid var(--c-secondary);
    box-shadow: 0 var(--sh-press-y) 0 var(--brown-dark), 0 9px 18px rgba(0, 0, 0, 0.18);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.tut-action:active {
    transform: translateY(4px);
    box-shadow: 0 var(--sh-press-in) 0 var(--brown-dark), 0 2px 5px rgba(0, 0, 0, 0.16);
}
/* Genau eine Aktion je Schritt darf primär sein (Skill §5.1). */
.tut-action.tut-action-primaer {
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    color: var(--soft-white);
    border-color: var(--forest-green-dark);
    box-shadow: 0 var(--sh-press-y) 0 #2f4d28, 0 9px 18px rgba(0, 0, 0, 0.22);
}
.tut-action.tut-action-primaer:active {
    box-shadow: 0 var(--sh-press-in) 0 #2f4d28, 0 2px 5px rgba(0, 0, 0, 0.2);
}

#tut-back {
    background: rgba(94, 61, 40, 0.1);
    color: var(--c-ink);
    border: 1px solid rgba(94, 61, 40, 0.18);
}
#tut-skip {
    background: rgba(0, 0, 0, 0.45);
    color: var(--soft-white);
}
#tut-back:hover { background: rgba(94, 61, 40, 0.18); }
#tut-skip:hover { background: rgba(0, 0, 0, 0.62); }
#tut-next:focus-visible, #tut-back:focus-visible,
#tut-skip:focus-visible, .tut-action:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
#tut-back.hidden, #tut-skip.hidden, #tut-next.hidden { display: none !important; }

/* Die Rueckfrage liegt ueber der Tour - sonst dunkelte die Maske sie mit ab. */
#tut-skip-modal { z-index: var(--z-tutorial-ask); }

/* Der Ueberspringen-Knopf sitzt in der Fusszeile der Box (siehe #tut-controls),
   nicht mehr fest oben links: dort verdeckte er auf 800x369 die Waehrungsleiste. */
#tut-skip {
    font-weight: 800;
    line-height: var(--lh-tight);
    text-align: center;
}

/* -------------------------------------------------- Querformat-Handy */
/* Hier ist Höhe knapp und Breite reichlich: Die Box wird schmaler.
   ⚠ Skill §5.7: Die Tour scrollt NIE - stattdessen begrenzt TEXT_BUDGET in
   data/tutorial-steps.js die Textlaenge, und tutorial-layout-smoke prueft, dass
   die Box in allen drei Referenzgroessen ohne Andocken Platz findet. */
@media (max-width: 720px), (max-height: 480px) {
    #tut-box {
        max-width: min(44vw, 320px);
        max-height: calc(100dvh - 2 * var(--sp-3));
        overflow: hidden;
        padding: var(--sp-2) var(--sp-3);
        border-width: 2px;
        border-radius: var(--r-md);
    }
    #tut-title { margin-bottom: var(--sp-1); }
    #tut-progress { margin-bottom: var(--sp-1); }
    #tutorial-layer.tut-finale #tut-box { max-width: min(70vw, 420px); }
}

/* Letzte Rueckfallebene von ui/tutorial-layout.js (Stufe 3). Sie darf im normalen
   Betrieb nicht mehr auftreten; passiert es doch, wird geklemmt statt gescrollt. */
#tut-box.tut-box-docked {
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Weniger Bewegung, wenn das System darum bittet. */
@media (prefers-reduced-motion: reduce) {
    #tutorial-layer.tut-action-step .tut-ring { animation: none; }
    #tut-box  { animation: none; }
    #tutorial-layer { animation: none; }
}

/* --- Leckerli-Verlust (Rehkitz umgerempelt) ---------------------------------
   Zahl löst sich vom Zähler oben links und sinkt nach unten weg - dieselbe
   Leserichtung wie beim Bezahlen im Shop, damit "es wird abgezogen" ohne Text
   verständlich ist. Gegenstück zum Diamanten-Popup, nur nach unten statt oben. */
#treats-counter { position: relative; }

.treat-loss {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2px;
    font-weight: 800;
    font-size: 0.95em;
    color: #ff5e5e;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    z-index: 20;
}

.treat-loss.animate {
    animation: treatLossAnim 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes treatLossAnim {
    0%   { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(0.8); }
    18%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.15); }
    35%  { opacity: 1; transform: translateX(-50%) translateY(2px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(26px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
    .treat-loss.animate { animation-duration: 0.6s; }
}

/* ---------------------------------------------------------------- Schatzkisten */
#chest-menu-btn {
    position: absolute;
    left: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-left));
    bottom: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom));
    z-index: 999;
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-2), 1.5vmin, 10px);
    background: linear-gradient(160deg, #ffcc00, #d4a000);
    color: #4a2f14;
    padding: clamp(var(--sp-2), 1.5vmin, 10px) clamp(var(--sp-3), 2.5vmin, 18px);
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 0 #b38600, 0 6px 12px rgba(62, 45, 30, 0.25);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s;
}
#chest-menu-btn:hover { filter: brightness(1.05); }
#chest-menu-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #b38600, 0 3px 6px rgba(62, 45, 30, 0.25);
}
#chest-menu-btn span.emoji {
    font-size: 1.4em;
}
#chest-menu-btn .new-badge { top: -6px; right: -6px; }

@media (max-width: 720px), (max-height: 480px) {
    #chest-menu-btn {
        bottom: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom));
    }
}

/* Bestenliste: gleiche Form wie der Kisten-Knopf, silbern statt golden. */
#leaderboard-menu-btn {
    position: absolute;
    left: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-left));
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px));
    z-index: 999;
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-2), 1.5vmin, 10px);
    background: linear-gradient(160deg, #e6e9ed, #9aa3ac);
    color: #2c333a;
    padding: clamp(var(--sp-2), 1.5vmin, 10px) clamp(var(--sp-3), 2.5vmin, 18px);
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 0 #767d85, 0 6px 12px rgba(62, 45, 30, 0.25);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s;
}
#leaderboard-menu-btn:hover { filter: brightness(1.05); }
#leaderboard-menu-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #767d85, 0 3px 6px rgba(62, 45, 30, 0.25);
}
#leaderboard-menu-btn span.emoji { font-size: 1.4em; }
#start-screen.hidden ~ #leaderboard-menu-btn { display: none; }

#friends-menu-btn {
    position: absolute;
    left: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-left));
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px) * 2);
    z-index: 999;
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-2), 1.5vmin, 10px);
    background: linear-gradient(160deg, #7ed08a, #3f9d5b);
    color: #123018;
    padding: clamp(var(--sp-2), 1.5vmin, 10px) clamp(var(--sp-3), 2.5vmin, 18px);
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 0 #2f7845, 0 6px 12px rgba(62, 45, 30, 0.25);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s;
}
#friends-menu-btn:hover { filter: brightness(1.05); }
#friends-menu-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #2f7845, 0 3px 6px rgba(62, 45, 30, 0.25);
}
#friends-menu-btn span.emoji { font-size: 1.4em; }
#friends-menu-btn .new-badge { top: -6px; right: -6px; }
#friends-menu-btn.requires-name { filter: grayscale(0.9); opacity: 0.55; }
#start-screen.hidden ~ #friends-menu-btn { display: none; }

/* Gutscheincode: gleiche Pillen-Form wie der Kisten-Knopf, aber unten RECHTS
   (das Zahnrad sitzt oben rechts). Nur im Hauptmenue sichtbar. */
#gutschein-menu-btn {
    position: absolute;
    right: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-right));
    bottom: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom));
    z-index: 999;
    display: flex;
    align-items: center;
    gap: clamp(var(--sp-2), 1.5vmin, 10px);
    background: linear-gradient(160deg, #7ed08a, #3f9d5b);
    color: #123018;
    padding: clamp(var(--sp-2), 1.5vmin, 10px) clamp(var(--sp-3), 2.5vmin, 18px);
    border: none;
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 0 #2f7845, 0 6px 12px rgba(62, 45, 30, 0.25);
    transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s;
}
#gutschein-menu-btn:hover { filter: brightness(1.05); }
#gutschein-menu-btn:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #2f7845, 0 3px 6px rgba(62, 45, 30, 0.25);
}
#gutschein-menu-btn span.emoji { font-size: 1.4em; }
#start-screen.hidden ~ #gutschein-menu-btn { display: none; }

/* Ladesymbol während jeder Server-Abfrage (Gutschein, Spielstand holen, Account löschen). */
#app-spinner {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(35, 22, 10, 0.45);
}
.app-spinner-ring {
    position: relative;
    width: clamp(56px, 13vmin, 88px);
    height: clamp(56px, 13vmin, 88px);
    border: 7px solid rgba(255, 204, 0, 0.22);
    border-top-color: #ffcc00;
    border-right-color: #ffcc00;
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(139, 90, 43, 0.18), 0 6px 16px rgba(0, 0, 0, 0.35);
    animation: appSpin 0.8s linear infinite;
}
.app-spinner-paw {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(var(--ic-md), 5vmin, 34px);
    animation: appSpinCounter 0.8s linear infinite; /* Pfote steht still, dreht sich zurück */
}
@keyframes appSpin { to { transform: rotate(360deg); } }
@keyframes appSpinCounter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* Fenster "Gutscheincode eingelöst": Belohnungszeilen + Nachricht. */
#gutschein-reward-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
}
.gutschein-reward-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    text-align: left;
    background: rgba(139, 90, 43, 0.08);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
}
.gutschein-reward-icon { font-size: 1.8em; flex-shrink: 0; }
.gutschein-reward-text { color: #5a3a1a; }
.gutschein-reward-msg {
    font-style: italic;
    color: #6b4a24;
    margin-top: var(--sp-2);
}
.gutschein-hinweis { display: block; margin-top: var(--sp-1); font-size: 0.85em; opacity: 0.85; }

.chest-panel { width: min(94vw, 720px); }
/* 2x2: Geschenk und Gewoehnlich oben, Selten und Legendaer darunter. Auch am Telefon -
   vier Karten in einer Spalte waeren eine reine Scrollstrecke. */
#chest-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(var(--sp-2), 1.6vmin, 16px);
    margin-bottom: var(--sp-4);
}

.chest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    border-radius: var(--r-md);
    border: 2px solid rgba(94, 61, 40, 0.15);
    background: rgba(255, 253, 248, 0.85);
    box-shadow: 0 3px 0 rgba(94, 61, 40, 0.12);
}
.chest-card.has-stock {
    cursor: pointer;
    border-color: rgba(224, 169, 42, 0.6);
    background: linear-gradient(160deg, #fffdf4, #fff3d6);
}
.chest-card.has-stock:hover { transform: translateY(-2px); }
.chest-card:not(.has-stock) .chest-art { filter: grayscale(0.7); opacity: 0.55; }

.chest-art {
    width: clamp(96px, 17vmin, 150px);
    height: auto;
    image-rendering: auto;
    pointer-events: none;
}
.chest-wiggle { animation: chestWiggle 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes chestWiggle {
    0%, 62%, 100% { transform: rotate(0deg) scale(1); }
    68% { transform: rotate(-5deg) scale(1.03); }
    74% { transform: rotate(5deg) scale(1.03); }
    80% { transform: rotate(-4deg) scale(1.02); }
    86% { transform: rotate(3deg) scale(1.01); }
    92% { transform: rotate(-1.5deg) scale(1); }
}

.chest-name {
    margin-top: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 800;
    color: var(--brown-dark);
    text-align: center;
}
.chest-hint {
    margin-top: 2px;
    font-size: var(--fs-body);
    color: var(--brown-dark);
    opacity: 0.65;
    text-align: center;
}

.chest-count {
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    min-width: var(--sp-5);
    height: var(--sp-5);
    padding: 0 var(--sp-2);
    box-sizing: border-box;
    border-radius: var(--r-pill);
    background: linear-gradient(160deg, #ff5f52, #d32f2f);
    border: 2px solid var(--soft-white);
    color: #fff;
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* Beschreibung statt Loot-Tabelle: die Kiste sagt, was sie ungefaehr wert ist. */
.chest-inhalt {
    margin-top: var(--sp-1);
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--brown-dark);
    opacity: 0.8;
    text-align: center;
}

#chest-fx {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 9, 5, 0.82);
    animation: fadeIn 0.25s ease;
}
#chest-fx.hidden { display: none; }
#chest-fx-canvas { width: 100%; height: 100%; display: block; }
#chest-fx-continue {
    position: absolute;
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    min-width: 140px;
}
#chest-fx-continue.hidden { display: none; }
.shop-stock {
    font-size: var(--fs-cap);
    font-weight: 800;
    color: var(--brown-dark);
    opacity: 0.75;
    text-align: center;
    margin-bottom: var(--sp-1);
}

/* Der Kisten-Knopf gehoert zum Hauptmenue: ausserhalb (Lobby, Lauf, Untermenues) ausgeblendet. */
#start-screen.hidden ~ #chest-menu-btn { display: none; }

/* ==========================================================================
   Einstellungen, Bestenliste, Namenswahl
   ========================================================================== */

/* Zahnrad oben rechts (frueherer Platz des persistenten Mute-Knopfs); wie der
   Kisten-Knopf nur im Hauptmenue sichtbar. Kraeftigerer Rahmen/Hintergrund als
   vorher, damit der Knopf vor dem Wald-Hintergrund klar als eigenes Bedienelement
   erkennbar bleibt statt mit den anderen halbtransparenten HUD-Knoepfen zu verschmelzen. */
#settings-btn {
    position: absolute;
    top: max(clamp(var(--sp-2), 1.88vmin, 15px), env(safe-area-inset-top));
    right: max(clamp(var(--sp-2), 1.88vmin, 15px), env(safe-area-inset-right));
    z-index: 9999;
    pointer-events: auto;
    border: 3px solid var(--forest-green-dark);
    background: var(--soft-white);
    border-radius: 50%;
    width: clamp(var(--ic-lg), 6.2vmin, 50px);
    height: clamp(var(--ic-lg), 6.2vmin, 50px);
    font-size: var(--fs-btn);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 14px var(--shadow);
}
#settings-btn:hover { filter: brightness(1.06); }
#settings-btn:active { transform: translateY(2px); box-shadow: 0 2px 8px var(--shadow); }
#start-screen.hidden ~ #settings-btn { display: none; }

/* ------------------------------------------------------- Neue 2D-Spielwiese */
#playground-hud {
    position: absolute;
    inset: 0;
    z-index: 28;
    pointer-events: none;
}
#playground-hud button, #playground-build-bar button, #playground-context button,
#playground-info button {
    border: 0;
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-3);
    color: #fff;
    background: linear-gradient(160deg, #5f9c58, #376e3c);
    box-shadow: 0 4px 0 #294f2e, 0 7px 14px rgba(35, 31, 24, .25);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
    pointer-events: auto;
}
#playground-hud button.active { background: linear-gradient(160deg, #e0ad4c, #9d671e); }
#playground-resources {
    position: absolute;
    top: max(var(--sp-3), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: 16px;
    color: #50301c;
    background: rgba(255, 250, 231, .9);
    box-shadow: 0 4px 15px rgba(35, 31, 24, .2);
}
/* Beide raeumen die Hauptleiste frei, muessen also an deren Hoehe haengen -
   sonst rutschen sie in der Handy-Dichtestufe darunter. Der Fallback greift
   nur, falls die Regel ausserhalb von body.playground-active trifft. */
#playground-night-skip {
    position: absolute;
    right: max(var(--sp-3), env(safe-area-inset-right));
    bottom: calc(max(var(--sp-3), env(safe-area-inset-bottom)) + var(--pg-main-height, var(--sp-8)) + var(--sp-1));
}
#playground-build-bar, #playground-context {
    position: absolute;
    left: 50%;
    bottom: calc(max(var(--sp-3), env(safe-area-inset-bottom)) + var(--pg-main-height, var(--sp-8)) + var(--sp-3));
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: var(--r-md);
    color: #50301c;
    background: rgba(255, 250, 231, .96);
    box-shadow: 0 7px 24px rgba(35, 31, 24, .3);
}
#playground-context { flex-wrap: wrap; }
#playground-build-bar.hidden, #playground-context.hidden { display: none; }
#playground-build-confirm:disabled { opacity: .5; cursor: not-allowed; }
#playground-info.overlay { z-index: 90; background: rgba(21, 46, 32, .52); }
.playground-info-panel { width: min(92vw, 520px); }
#playground-info-body progress { width: 100%; accent-color: #4e8a45; }
#playground-info-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
#playground-info-actions > button { width: 100%; }
.pg-factory-subtitle { margin: 2px 0 0; color: #76523d; font-size: clamp(var(--fs-cap), 2vmin, 16px); }
.pg-factory-stamp {
    display: inline-block;
    margin: var(--sp-3) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid #d5c4a8;
    border-radius: var(--r-pill);
    color: #744d35;
    background: #eee8dc;
    font-weight: 800;
}
.pg-factory-section {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid #d8c8ad;
    border-radius: 16px;
    background: rgba(255, 255, 255, .55);
}
.pg-factory-production {
    margin-top: var(--sp-3);
}
.pg-factory-label { margin: 0; color: #89624a; font-size: var(--fs-cap); font-weight: 800; letter-spacing: .05em; }
.pg-factory-amount { margin: 2px 0 var(--sp-2); color: #3d6839; font-size: clamp(var(--fs-h2), 3.6vmin, 29px); font-weight: 900; }
.pg-factory-amount span { color: #76523d; font-size: .6em; }
.pg-factory-production progress { display: block; margin-top: var(--sp-2); }
.pg-factory-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); text-align: left; }
.pg-factory-row + .pg-factory-row { margin-top: var(--sp-2); }
.pg-factory-row strong { color: #3d6839; text-align: right; }
.pg-factory-note { margin: var(--sp-2) 0 0; color: #87634b; font-size: var(--fs-body); line-height: 1.3; }

/* Objekt-Info von Deko, Koerbchen, Labor und Schmiede. Bewusst dieselbe Karte wie bei
   der Fabrik - auf der Wiese soll es nur eine Formsprache geben. */
.pg-info-breite { margin: 2px 0 0; color: #76523d; font-size: clamp(var(--fs-cap), 2vmin, 16px); }
.pg-info-text { margin: var(--sp-2) 0 0; color: #5e422f; font-size: var(--fs-body); line-height: var(--lh-body); }
.pg-info-card {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid #d8c8ad;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .55);
}
.pg-info-label { margin: 0; color: #89624a; font-size: var(--fs-cap); font-weight: 800; letter-spacing: .05em; }
.pg-info-wert {
    margin: 2px 0 var(--sp-2);
    color: #3d6839;
    font-size: clamp(var(--fs-h3), 3.2vmin, 26px);
    font-weight: 900;
    line-height: var(--lh-tight);
}
.pg-info-wert span { color: #76523d; font-size: .62em; }
.pg-info-card progress { display: block; margin-top: var(--sp-2); }
.pg-info-beispiel {
    margin: var(--sp-2) 0 0;
    color: #4a6b3f;
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-body);
}
.pg-info-note { margin: var(--sp-2) 0 0; color: #87634b; font-size: var(--fs-body); line-height: var(--lh-body); }
#playground-info-actions .pg-factory-upgrade {
    border-color: #82633e;
    background: linear-gradient(160deg, #e6b95f, #a87529);
    box-shadow: 0 4px 0 #80521d;
}
.playground-info-panel:not(.pg-mine-info-panel) #playground-info-close {
    width: 100%;
    margin-top: var(--sp-3);
    border-color: #5e884f !important;
    background: linear-gradient(160deg, #78a85f, #4e8047) !important;
    box-shadow: 0 4px 0 #3a6336 !important;
}
.playground-info-panel.pg-mine-info-panel {
    position: relative;
    overflow: hidden;
    color: #f3edff;
    background: radial-gradient(circle at 78% 13%, rgba(90, 215, 240, .2), transparent 23%), linear-gradient(145deg, #463364, #150e1e 76%);
    border-color: #6d4f8e;
    box-shadow: inset 0 0 0 2px #3a2a50, 0 8px 0 #0b0712, 0 15px 28px rgba(11, 7, 18, .48);
}
.playground-info-panel.pg-mine-info-panel::before,
.playground-info-panel.pg-mine-info-panel::after {
    position: absolute;
    z-index: 0;
    width: 14px;
    height: 28px;
    border: 1px solid rgba(212, 246, 255, .5);
    background: linear-gradient(135deg, #d4f6ff, #5ad7f0 48%, #25789c);
    content: '';
    transform: rotate(27deg);
    opacity: .75;
}
.playground-info-panel.pg-mine-info-panel::before { top: var(--sp-8); left: var(--sp-4h); }
.playground-info-panel.pg-mine-info-panel::after {
    right: var(--sp-5);
    bottom: calc(var(--sp-8) + var(--sp-7));
    height: 20px;
    background: linear-gradient(135deg, #ffd4f2, #f08fd0 48%, #a8408a);
}
.pg-mine-info-panel > :is(h2, div, button) { position: relative; z-index: 1; }
.pg-mine-info-panel h2 { color: #f5f0ff; }
.pg-mine-info-panel #playground-info-close {
    width: 100%;
    margin-top: var(--sp-3);
    border-color: #6d4f8e !important;
    color: #fff !important;
    background: linear-gradient(160deg, #543c70, #332344) !important;
    box-shadow: 0 4px 0 #150e1e !important;
}
.pg-mine-info-panel #playground-info-body progress { accent-color: #5ad7f0; }
.pg-mine-subtitle { margin: 2px 0 0; color: #cbb8ec; font-size: clamp(var(--fs-cap), 2vmin, 16px); }
.pg-mine-rate {
    display: inline-block;
    margin: var(--sp-3) 0 0;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid #9370b8;
    border-radius: var(--r-md);
    color: #f1eaff;
    background: rgba(11, 7, 18, .48);
    font-weight: 800;
}
.pg-mine-rate span { color: #5ad7f0; text-shadow: 0 0 10px rgba(90, 215, 240, .75); }
.pg-mine-crystal-card {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid #6d4f8e;
    border-radius: var(--r-md);
    background: linear-gradient(145deg, rgba(84, 60, 112, .88), rgba(30, 20, 46, .9));
}
.pg-mine-label { margin: 0; color: #cbb8ec; font-size: var(--fs-cap); font-weight: 800; letter-spacing: .08em; }
.pg-mine-progress { margin: 3px 0 var(--sp-2); color: #fff; font-size: clamp(var(--fs-h2), 3.6vmin, 27px); font-weight: 900; }
.pg-mine-progress b { color: #5ad7f0; text-shadow: 0 0 11px rgba(90, 215, 240, .58); }
.pg-mine-progress span { color: #f3edff; font-size: .72em; }
.pg-mine-crystal-card progress { display: block; width: 100%; height: 13px; margin-top: var(--sp-2); overflow: hidden; border: 1px solid #9370b8; border-radius: var(--r-pill); background: #150e1e; }
.pg-mine-status { margin: var(--sp-2) 0 0; color: #d4f6ff; font-size: clamp(var(--fs-sm), 2.1vmin, 17px); font-weight: 900; }
.pg-mine-note { margin: var(--sp-1) 0 0; color: #cbb8ec; font-size: var(--fs-body); }
#playground-info-actions .pg-mine-upgrade {
    border-color: #d4f6ff;
    color: #160d25;
    background: linear-gradient(160deg, #d4f6ff, #5ad7f0);
    box-shadow: 0 4px 0 #25789c;
}
#playground-context-cancel-upgrade,
#playground-cancel-upgrade-back {
    border: 2px solid #8e2e35;
    background: linear-gradient(160deg, #ef6a62, #c83c35);
    box-shadow: 0 4px 0 #77232d, 0 7px 14px rgba(81, 24, 29, .25);
}
#playground-cancel-upgrade.overlay {
    z-index: 95;
    background: rgba(21, 46, 32, .62);
}
.playground-upgrade-panel {
    width: min(96vw, 720px);
    text-align: center;
}
#playground-upgrade-confirm.overlay {
    z-index: 96;
    background: rgba(21, 46, 32, .68);
}
.pg-upgrade-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(var(--sp-2), 1.8vw, 18px);
    margin: var(--sp-2) 0 var(--sp-3);
}
.pg-upgrade-preview figure { flex: 1 1 0; min-width: 0; margin: 0; }
.pg-upgrade-preview canvas {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
    border: 1px solid rgba(94, 61, 40, .22);
    border-radius: var(--r-md);
}
.pg-upgrade-preview figcaption { margin-top: var(--sp-1); color: var(--brown-dark); font-weight: 800; }
.pg-upgrade-arrow { color: #b8892a; font-size: clamp(var(--ic-md), 4vw, 40px); font-weight: 900; }
#playground-upgrade-stats {
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    list-style: none;
    border-radius: var(--r-md);
    background: rgba(94, 61, 40, .09);
    color: var(--brown-dark);
}
#playground-upgrade-duration { margin: var(--sp-2) 0 var(--sp-1); color: var(--brown-dark); font-weight: 800; }
.pg-upgrade-hint { margin: var(--sp-1) 0 var(--sp-3); color: var(--brown); font-size: var(--fs-body); line-height: 1.4; }
#playground-upgrade-confirm .pg-upgrade-go {
    border: 2px solid #2f6d39;
    background: linear-gradient(160deg, #78b662, #3f8048);
    box-shadow: 0 4px 0 #235a31, 0 7px 14px rgba(35, 90, 49, .25);
}
#playground-upgrade-confirm .pg-upgrade-back {
    border: 2px solid #8e2e35;
    background: linear-gradient(160deg, #ef6a62, #c83c35);
    box-shadow: 0 4px 0 #77232d, 0 7px 14px rgba(81, 24, 29, .25);
}
@media (max-width: 720px), (max-height: 480px) {
    .pg-upgrade-preview { flex-direction: column; }
    .pg-upgrade-preview figure { width: min(100%, 260px); flex: 0 1 auto; }
    .pg-upgrade-arrow { transform: rotate(90deg); line-height: .65; }
}
.playground-cancel-upgrade-panel {
    width: min(92vw, 500px);
    text-align: center;
}
.playground-cancel-upgrade-panel p {
    margin: var(--sp-3) 0 var(--sp-4);
    color: var(--brown-dark);
    font-weight: 800;
    line-height: 1.45;
}
.pg-level-line {
    margin: var(--sp-3) 0 2px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: rgba(94, 61, 40, .09);
    font-size: clamp(var(--fs-cap), 1.9vmin, 16px);
}
.pg-level-hint { margin: 2px 0 var(--sp-2); color: var(--brown); font-size: var(--fs-body); }
#playground-context-upgrade { background: linear-gradient(160deg, #e7c25a, #b8892a) !important; }
#playground-context-factory.pg-factory-running,
#playground-context-factory-deactivate,
#playground-info-actions .pg-factory-running,
#playground-info-actions .pg-factory-deactivate {
    border: 2px solid #8e2e35;
    background: linear-gradient(160deg, #e56565, #ae2d38);
    box-shadow: 0 4px 0 #77232d, 0 7px 14px rgba(81, 24, 29, .25);
}
#playground-context-factory.pg-factory-running:disabled,
#playground-info-actions .pg-factory-running:disabled {
    opacity: 1;
    cursor: default;
}
.sleep-assignment {
    margin: var(--sp-4) auto var(--sp-1);
    padding: var(--sp-4);
    border: 2px solid #a87137;
    border-radius: var(--r-md);
    background: linear-gradient(160deg, #fff7df, #e6c98b);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.75), 0 4px 0 #a26a31;
}
.sleep-assignment-title { margin: 0 0 var(--sp-2); color: #60401f; font-weight: 900; font-size: var(--fs-h3); font-family: var(--ff-ui); }
.sleep-dog-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
#playground-info-actions .sleep-dog-option {
    min-height: calc(var(--tap) + var(--sp-2));
    border: 2px solid #82633e;
    border-radius: var(--r-md);
    padding: var(--sp-2) var(--sp-2);
    color: #5b3c20;
    background: linear-gradient(160deg, #fffdf4, #e7d2a3);
    box-shadow: 0 3px 0 #9a7543;
    font-weight: 900; font-size: var(--fs-cap); font-family: var(--ff-ui);
    cursor: pointer;
}
#playground-info-actions .sleep-dog-option span { display: block; margin-bottom: 2px; font-size: var(--ic-sm); }
#playground-info-actions .sleep-dog-option.selected {
    border-color: #c68114;
    color: #5d3906;
    background: linear-gradient(160deg, #ffe99e, #e6a832);
    box-shadow: 0 3px 0 #a8640e, 0 0 0 3px rgba(255, 226, 119, .6);
}
#playground-info-actions .sleep-dog-option:active { transform: translateY(2px); box-shadow: 0 1px 0 #9a7543; }
#playground-info-actions .sleep-dog-option.selected:active { box-shadow: 0 1px 0 #a8640e; }
#playground-info-actions .sleep-save-btn {
    width: 100%;
    margin-top: var(--sp-3);
    border: 2px solid #2f6d39;
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-3);
    color: #fff;
    background: linear-gradient(160deg, #6bbd5a, #347c3d);
    box-shadow: 0 4px 0 #235a31, 0 8px 15px rgba(28, 66, 33, .28);
    font-weight: 900; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
#playground-info-actions .sleep-save-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #235a31; }

/* ------------------------------------------------ Spielwiesen-Hub */
#playground-hud #playground-resources { display: none; }
#playground-hud.hidden { display: none; }
body:not(.playground-active) #playground-hud,
body:not(.playground-active) #playground-build-bar,
body:not(.playground-active) #playground-context,
body:not(.playground-active) #playground-info,
body:not(.playground-active) #playground-night-skip {
    display: none !important;
}
#playground-hud button, .playground-resource {
    pointer-events: auto;
    border: 2px solid rgba(42, 78, 43, .86);
    border-radius: var(--r-md);
    color: #fff;
    background: linear-gradient(160deg, #5f9c58, #376e3c);
    box-shadow: 0 4px 0 #294f2e, 0 7px 14px rgba(35, 31, 24, .25);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
}
#playground-hud button {
    min-height: clamp(var(--sp-6), 5.2vmin, 43px);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
}
#playground-back-btn,
.playground-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
}
.playground-action-icon { line-height: 1; }
#playground-hud button:hover { filter: brightness(1.08); }
#playground-hud button:active { transform: translateY(2px); box-shadow: 0 2px 0 #294f2e, 0 4px 8px rgba(35, 31, 24, .25); }
#playground-brand {
    position: absolute;
    top: max(var(--sp-3), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 29;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fffdf1;
    text-shadow: 0 2px 3px rgba(33, 56, 35, .55);
    pointer-events: auto;
}
#playground-brand strong { font-size: clamp(var(--fs-sm), 2.3vmin, 21px); }
#playground-brand span { font-size: var(--fs-cap); font-weight: 800; }
#playground-brand strong, #playground-brand span { pointer-events: none; }
#playground-top-left, #playground-top-right {
    position: absolute;
    top: max(var(--sp-3), env(safe-area-inset-top));
    z-index: 29;
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
}
#playground-top-left {
    left: max(var(--sp-3), env(safe-area-inset-left));
    flex-direction: column;
}
#playground-top-right { right: max(var(--sp-2), env(safe-area-inset-right)); }
.playground-resource {
    display: block;
    min-width: calc(var(--sp-8) * 3 + var(--sp-3));
    box-sizing: border-box;
    padding: var(--sp-4) var(--sp-5);
    color: #50301c;
    background: rgba(255, 250, 231, .94);
    border-color: rgba(255,255,255,.7);
    box-shadow: 0 4px 12px rgba(35,31,24,.2);
    font-weight: 800; font-size: var(--fs-h2); font-family: var(--ff-ui);
    line-height: 1;
}
.playground-resource.diamond { color: #174f76; }
.playground-actions {
    position: absolute;
    bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    z-index: 29;
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
}
#playground-actions-left { left: max(var(--sp-2), env(safe-area-inset-left)); }
#playground-actions-right { right: max(var(--sp-2), env(safe-area-inset-right)); }
#playground-actions-left #playground-shop-btn { background: linear-gradient(160deg, #f5cf72, #c8892d); color: #55330e; border-color: #9d671e; box-shadow: 0 4px 0 #9d671e, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-left #playground-inventory-btn { position: relative; background: linear-gradient(160deg, #d08b54, #8a4f2c); color: #fff8e8; border-color: #67361d; box-shadow: 0 4px 0 #67361d, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-left #playground-build-btn { background: linear-gradient(160deg, #e2e5e8, #9aa3ac); color: #2c333a; border-color: #767d85; box-shadow: 0 4px 0 #767d85, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-right #leaderboard-menu-btn { background: linear-gradient(160deg, #e6e9ed, #9aa3ac); color: #2c333a; border-color: #767d85; box-shadow: 0 4px 0 #767d85, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-right #gutschein-menu-btn { background: linear-gradient(160deg, #f5cf72, #c8892d); color: #55330e; border-color: #9d671e; box-shadow: 0 4px 0 #9d671e, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-right #quests-menu-btn { background: linear-gradient(160deg, #3f4248, #16171a); color: #fff; border-color: #08090a; box-shadow: 0 4px 0 #08090a, 0 7px 14px rgba(35,31,24,.25); }
#playground-actions-left #playground-achievements-btn { position: relative; background: linear-gradient(160deg, #428bd8, #2261a6); border-color: #174b85; box-shadow: 0 4px 0 #174b85, 0 7px 14px rgba(35,31,24,.25); }
button.feature-locked {
    position: relative;
    cursor: not-allowed;
    filter: grayscale(.9);
    opacity: .5;
}
/* Das Schloss steht im Fluss hinter dem Text - ein Badge in der Ecke laege bei langen
   Beschriftungen und grosser Schrift auf Buchstaben und wuerde in Scrollzeilen abgeschnitten. */
button.feature-locked::after {
    content: '🔒';
    display: inline-block;
    margin-left: var(--sp-1);
    font-size: var(--ic-sm);
    line-height: 1;
    pointer-events: none;
}
button.feature-fresh {
    outline: 3px solid rgba(255, 210, 74, .7);
    outline-offset: 3px;
    animation: featureFreshPulse 1.35s ease-in-out infinite;
}
@keyframes featureFreshPulse {
    50% { outline-color: #fff1a3; outline-offset: 7px; }
}
#playground-actions .new-badge { top: -7px; right: -7px; }
#playground-top-right #profile-btn, #playground-top-right #legend-info-btn, #playground-top-right #settings-btn { width: clamp(36px, 5.4vmin, 45px); padding: 0; font-size: clamp(var(--ic-sm), 3vmin, 25px); }
#playground-top-right #profile-btn { background: linear-gradient(160deg, #79bc67, #438a48); border-color: #2d6734; box-shadow: 0 4px 0 #2d6734, 0 7px 14px rgba(35,31,24,.25); }
#playground-top-right #legend-info-btn { background: linear-gradient(160deg, #6ba8d7, #3472aa); border-color: #235983; box-shadow: 0 4px 0 #235983, 0 7px 14px rgba(35,31,24,.25); }

body.playground-active #start-screen:not(.legend-only) { display: none; }
body.playground-active #start-screen.legend-only { display: flex; z-index: 80; }
body.playground-active #start-screen.legend-only .main-menu-shell { display: none; }
body.playground-active #start-screen.legend-only .legend-panel { display: block; }

@media (max-width: 720px), (max-height: 480px) {
    .playground-actions { gap: var(--sp-1); }
    #playground-hud button { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-btn); }
    #playground-actions-left #playground-achievements-btn { max-width: 142px; }
}
@media (max-width: 720px), (max-height: 480px) {
    #playground-hud button { font-size: 0; min-width: 34px; padding: var(--sp-1) var(--sp-2); }
    #playground-hud button::first-letter { font-size: var(--ic-sm); }
    #playground-actions-left #playground-achievements-btn { max-width: none; }
    #playground-brand strong { font-size: var(--fs-cap); }
    #playground-brand span { font-size: var(--fs-cap); }
    .playground-resource { min-width: 108px; padding: var(--sp-2) var(--sp-3); font-size: clamp(var(--fs-body), 4.2vmin, 21px); }
}

#main-menu-close {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 8;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #d32f2f;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
#main-menu-close:hover { filter: brightness(1.08); transform: scale(1.05); }
#main-menu-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

#playground-menu-btn {
    position: absolute;
    left: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-left));
    bottom: max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom));
    z-index: 29;
    display: none;
    align-items: center;
    gap: var(--sp-2);
    min-height: clamp(var(--sp-6), 6vmin, 44px);
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(45, 84, 48, .9);
    border-radius: var(--r-md);
    color: #fff;
    background: linear-gradient(160deg, #5e9b59, #38703e);
    box-shadow: 0 4px 0 #294f2e, 0 6px 12px rgba(62, 45, 30, .25);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
body.playground-active #playground-menu-btn,
body.playground-active #chest-menu-btn,
body.playground-active #leaderboard-menu-btn,
body.playground-active #friends-menu-btn,
body.playground-active #profile-btn,
body.playground-active #settings-btn { display: flex; }
body.playground-active #chest-menu-btn {
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px));
}
body.playground-active #leaderboard-menu-btn {
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px) * 2);
}
body.playground-active #friends-menu-btn {
    bottom: calc(max(clamp(var(--sp-1), 1.5vmin, 12px), env(safe-area-inset-bottom)) + clamp(var(--sp-7), 7vmin, 52px) * 3);
}
body.playground-active #gutschein-menu-btn { display: none; }
body.playground-active.playground-menu-open #gutschein-menu-btn { display: flex; }
#shop-scope-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: min(360px, 90%);
    margin: 0 auto var(--sp-4);
    padding: var(--sp-1);
    border-radius: var(--r-pill);
    background: #d8c8a7;
}
#shop-scope-switch button {
    border: 0;
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-4);
    color: #5a4732;
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}
#shop-scope-switch button.active {
    color: #fff;
    background: #4e8a45;
    box-shadow: 0 3px 7px rgba(35, 31, 24, .25);
}
.playground-shop-canvas { width: 100%; height: 92px; border-radius: var(--r-md); display: block; }

.settings-panel { position: relative; width: min(94vw, 560px); text-align: left; }
.settings-panel > h1 { margin-right: var(--sp-7); }
.settings-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    display: grid;
    place-items: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #d84343;
    box-shadow: 0 3px 0 #9f2c2c;
    font-weight: 900; font-size: var(--fs-h2); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}
.settings-close:hover,
.settings-close:focus-visible { filter: brightness(1.08); transform: translateY(-1px) scale(1.04); outline: none; }
.settings-close:active { transform: translateY(2px); box-shadow: 0 1px 0 #9f2c2c; }
.settings-section {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3) var(--sp-3);
    background: rgba(94, 61, 40, 0.05);
    border: 1px dashed rgba(94, 61, 40, 0.25);
    border-radius: var(--r-md);
}
.settings-section h2 {
    margin: 0 0 var(--sp-2);
    font-size: clamp(var(--fs-cap), 2.4vmin, 17px);
    color: var(--forest-green-dark);
    text-align: left;
}
.settings-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.settings-label {
    flex: 0 0 auto;
    min-width: calc(var(--sp-8) * 2 + var(--sp-5));
    font-weight: 800;
    font-size: var(--fs-cap);
    color: var(--brown-dark);
}
.settings-value {
    font-weight: 800;
    font-size: var(--fs-cap);
    color: var(--forest-green-dark);
    min-width: var(--sp-8);
    text-align: right;
}
.settings-row input[type="range"] {
    flex: 1 1 auto;
    min-width: calc(var(--sp-8) + var(--sp-6));
    accent-color: var(--forest-green);
    cursor: pointer;
}
.settings-mute-btn {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: var(--ic-lg);
    min-width: var(--tap); min-height: var(--tap);
    padding: 0;
    border: 2px solid rgba(94, 61, 40, .32);
    border-radius: 50%;
    background: #fffaf0;
    cursor: pointer;
    font-size: var(--fs-body);
}
.settings-mute-btn[aria-pressed="true"] { background: rgba(198, 40, 40, .1); }
.settings-note {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--brown);
    margin: var(--sp-2) 0 0;
}
.settings-btn-row {
    display: flex;
    gap: var(--sp-3);
}
.settings-btn-row .btn { flex: 1; margin: 0; }
#account-switch-modal .settings-btn-row {
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}
#account-switch-modal .settings-btn-row .btn { width: 100%; }
.account-switch-new-btn {
    background: linear-gradient(160deg, #f6ca58, #c98d18);
    box-shadow: 0 5px 0 #94620d, 0 9px 18px var(--shadow);
    color: #5a3600;
}
.account-switch-new-btn:active {
    box-shadow: 0 1px 0 #94620d, 0 4px 10px var(--shadow);
}
.settings-section .btn { margin-bottom: 0; }

#settings-quality {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
#settings-quality button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-1);
    border: 2px solid rgba(94, 61, 40, 0.2);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, 0.8);
    color: var(--brown-dark);
    font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
    cursor: pointer;
}
#settings-quality button b { font-size: var(--fs-btn); }
#settings-quality button span { font-size: var(--fs-btn); }
#settings-quality button.active {
    border-color: var(--forest-green);
    background: var(--forest-green);
    color: #fff;
    box-shadow: 0 3px 7px rgba(35, 31, 24, 0.22);
}
.settings-display-mode {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.settings-display-mode button {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .2);
    border-radius: var(--r-md);
    color: var(--brown-dark);
    background: rgba(255, 253, 248, .8);
    font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
    cursor: pointer;
}
.settings-display-mode button span { font-size: var(--fs-btn); opacity: .8; text-align: right; }
.settings-display-mode button.active {
    border-color: var(--forest-green);
    color: #fff;
    background: var(--forest-green);
    box-shadow: 0 3px 7px rgba(35, 31, 24, .22);
}
.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-weight: 800;
    color: var(--brown-dark);
}
.settings-toggle {
    position: relative;
    display: inline-block;
    width: var(--tap);
    height: var(--sp-5);
    flex: 0 0 auto;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; }
.settings-toggle .slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: #a9a39b;
    border-radius: var(--r-pill);
    transition: background 0.2s ease;
}
.settings-toggle .slider::before {
    content: '';
    position: absolute;
    width: var(--sp-4h);
    height: var(--sp-4h);
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform 0.2s ease;
}
.settings-toggle input:checked + .slider { background: var(--forest-green); }
.settings-toggle input:checked + .slider::before { transform: translateX(18px); }
body.is-mobile .settings-section-graphics { display: block; }
/* Der Geräte-Check richtet sich an Desktop-Browser und bleibt auf Mobil aus. */
body.is-mobile #settings-compatibility-btn { display: none; }

/* Der Hub überschreibt die älteren, gestapelten Spielwiesen-Knöpfe. */
#playground-hud #gutschein-menu-btn,
#playground-hud #quests-menu-btn,
#playground-hud #leaderboard-menu-btn,
#playground-hud #friends-menu-btn,
#playground-hud #profile-btn,
#playground-hud #settings-btn,
#playground-hud #legend-info-btn {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

/* Namen-ändern-Knopf: ~30% kleiner, damit er nicht die ganze Breite dominiert. */
#settings-rename-note {
    margin-top: var(--sp-3);
}

#settings-switch-note.error { color: #c62828; }
/* ------------------------------------------------------- Installationsseite */
html.install-document,
body.install-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
html.install-document { background: #294a2d; }
body.install-page {
    position: relative;
    min-height: 100dvh;
    isolation: isolate;
    background: radial-gradient(circle at 50% 0%, #91bd70, #456f3b 48%, #294a2d);
    color: var(--c-ink);
}
.install-forest {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
.install-forest-layer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    transform-origin: center bottom;
}
.install-forest-back {
    height: 58%; /* frei: rein dekorative Waldsilhouette */
    background: linear-gradient(to bottom, rgba(70, 112, 60, .2), #365c35);
    clip-path: polygon(0 42%, 7% 20%, 12% 43%, 20% 8%, 28% 44%, 36% 17%, 44% 42%, 53% 4%, 62% 45%, 70% 15%, 78% 43%, 88% 10%, 94% 41%, 100% 22%, 100% 100%, 0 100%);
    animation: install-forest-breathe 8s ease-in-out infinite alternate;
}
.install-forest-front {
    height: 38%; /* frei: rein dekorative Waldsilhouette */
    background: linear-gradient(to bottom, #294c30, #203d29);
    clip-path: polygon(0 44%, 10% 16%, 17% 48%, 27% 8%, 38% 46%, 48% 19%, 57% 48%, 68% 5%, 79% 46%, 89% 13%, 100% 43%, 100% 100%, 0 100%);
}
.install-leaf {
    position: absolute;
    top: -10%; /* frei: dekorativer Animationsstart */
    font-size: var(--ic-md);
    opacity: 0;
    animation: install-leaf-drift 9s linear infinite;
}
.install-leaf-one { left: 12%; animation-delay: 1s; }
.install-leaf-two { left: 76%; animation-delay: 4s; }
.install-leaf-three { left: 52%; animation-delay: 7s; }
.install-shell {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    width: min(100%, 900px);
    min-height: 100dvh;
    margin: 0 auto;
    padding-top: max(var(--sp-4h), env(safe-area-inset-top));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-4h), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
}
.install-home-link {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-h-md);
    padding: 0 var(--sp-4);
    border: 2px solid rgba(255, 253, 248, .72);
    border-radius: var(--r-pill);
    background: rgba(35, 70, 39, .34);
    color: var(--soft-white);
    box-shadow: 0 var(--sh-press-y) 0 rgba(31, 61, 35, .7);
    font-size: var(--fs-sm);
    font-weight: 900;
    text-decoration: none;
    transition: background var(--dur-base) ease, color var(--dur-base) ease, transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.install-home-link::before {
    content: '';
    position: absolute;
    inset: calc((var(--tap) - var(--btn-h-md)) / -2) 0;
}
.install-home-link:hover { background: var(--soft-white); color: var(--forest-green-dark); }
.install-home-link:active { transform: translateY(var(--sp-1)); box-shadow: 0 var(--sh-press-in) 0 rgba(31, 61, 35, .7); }
.install-home-link:focus-visible,
.pwa-browser-choice:focus-visible { outline: 3px solid var(--c-focus); outline-offset: var(--sp-1); }
.install-hero {
    color: var(--soft-white);
    text-align: center;
}
.install-logo-wrap {
    position: relative;
    width: calc(var(--sp-8) + var(--sp-4));
    margin: 0 auto var(--sp-1);
    animation: install-logo-pop 700ms var(--ease-pop) both;
}
.install-logo {
    display: block;
    width: 100%;
    height: auto;
    border: 3px solid rgba(255, 253, 248, .82);
    border-radius: var(--r-md);
    box-shadow: var(--sh-card);
}
.install-kicker {
    margin-bottom: var(--sp-1);
    font-size: var(--fs-cap);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.install-hero h1 {
    color: var(--soft-white);
    font-size: var(--fs-disp);
    font-weight: 900;
    line-height: var(--lh-tight);
    text-shadow: 0 var(--sp-1) var(--sp-2) rgba(24, 50, 29, .45);
}
.install-mobile-heading,
.install-mobile-note { display: none; }
.install-mobile-note {
    align-items: center;
    align-self: center;
    gap: var(--sp-3);
    width: min(100%, 520px);
    padding: var(--sp-3);
    border: 2px solid rgba(169, 122, 21, .42);
    border-radius: var(--r-md);
    background: #fff4c9;
    box-shadow: var(--sh-card);
    color: var(--brown-dark);
    animation: install-card-in var(--dur-slow) var(--ease-pop) both;
}
.install-mobile-note > span { flex: 0 0 auto; font-size: var(--ic-md); line-height: 1; }
.install-mobile-note p { font-size: var(--fs-sm); font-weight: 800; line-height: var(--lh-body); }
/* ⚠ Die Wahl wegzunehmen ist an install-nur-app gebunden, NICHT an install-mobile-device:
   nur das iPhone kann kein Vollbild und hat wirklich keine Alternative. Android und iPad
   sehen hier weiterhin "Im Browser spielen". Gesetzt im Kopfskript von install.html. */
.install-nur-app .install-desktop-heading,
.install-nur-app .install-browser-choice { display: none; }
.install-nur-app .install-mobile-heading { display: inline; }
.install-nur-app .install-mobile-note { display: flex; }
.install-nur-app .install-choices { justify-content: center; }
.install-nur-app .install-app-choice { flex: 0 1 520px; }
/* Der Kontozugang bleibt auf JEDEM Gerät sichtbar: iOS-Startbildschirm-Apps hatten
   historisch einen vom Safari getrennten Speicher - dann ist er die einzige Rettung. */
/* Drehen-Hinweis: nur dort, wo wirklich installiert werden muss. Die Klasse install-quer
   setzt src/pwa.js bei flachem Querformat - bewusst per JS, weil eine eigene Media-Query
   die zwei erlaubten Layout-Breakpoints verletzen würde (siehe tools/ui-smoke.mjs). */
.install-quer-hinweis { display: none; }
.install-nur-app.install-quer .install-quer-hinweis {
    display: flex;
    align-items: center;
    align-self: center;
    gap: var(--sp-3);
    width: min(100%, 520px);
    padding: var(--sp-3);
    border: 2px solid rgba(169, 122, 21, .42);
    border-radius: var(--r-md);
    background: #fff4c9;
    color: var(--brown-dark);
}
.install-nur-app.install-quer .install-quer-hinweis > span { flex: 0 0 auto; font-size: var(--ic-md); line-height: 1; }
.install-nur-app.install-quer .install-quer-hinweis p { font-size: var(--fs-sm); font-weight: 800; line-height: var(--lh-body); }
.install-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
}
.install-choice {
    display: flex;
    flex: 1 1 var(--install-card-min);
    flex-direction: column;
    gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-4);
    border: 3px solid rgba(255, 253, 248, .84);
    border-radius: var(--r-lg);
    background: linear-gradient(150deg, rgba(255, 253, 248, .98), rgba(244, 239, 225, .98));
    box-shadow: var(--sh-card);
    animation: install-card-in var(--dur-slow) var(--ease-pop) both;
}
.install-app-choice { animation-delay: 120ms; }
.install-choice-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}
.install-choice-title > span {
    flex: 0 0 auto;
    font-size: var(--ic-xl);
    line-height: 1;
}
.install-choice-kicker {
    color: var(--c-ink-soft);
    font-size: var(--fs-cap);
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.install-choice h2,
.install-account h2 {
    color: var(--forest-green-dark);
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: var(--lh-tight);
}
.install-choice > p,
.install-account p {
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-body);
}
.install-save-hint {
    display: flex;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 2px solid rgba(169, 122, 21, .42);
    border-radius: var(--r-md);
    background: #fff4c9;
    color: var(--brown-dark);
}
.install-browser-choice .install-save-hint {
    margin-top: auto;
    margin-bottom: auto;
}
.install-save-hint > span { flex: 0 0 auto; font-size: var(--ic-md); line-height: 1; }
.install-save-hint p { font-size: var(--fs-sm); font-weight: 800; line-height: var(--lh-body); }
.install-benefits {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-body);
    list-style: none;
}
.install-benefits li { position: relative; padding-left: var(--sp-5); }
.install-benefits li::before { content: '✓'; position: absolute; left: 0; color: var(--c-primary); font-weight: 900; }
.install-choice-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--btn-h-lg);
    margin-top: auto;
    margin-bottom: 0;
    padding: var(--sp-3) var(--sp-5);
}
.install-choice .install-choice-action {
    padding: var(--sp-3) var(--sp-5);
}
.install-note {
    min-height: var(--sp-4h);
    color: var(--brown-dark);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-body);
    text-align: center;
}
.install-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-3) var(--sp-4);
    border: 2px solid rgba(255, 253, 248, .64);
    border-radius: var(--r-lg);
    background: rgba(251, 248, 240, .9);
    box-shadow: var(--sh-card);
    animation: install-card-in var(--dur-slow) var(--ease-pop) 240ms both;
}
.install-account .btn {
    flex: 0 1 auto;
    width: auto;
    margin-bottom: 0;
}
.install-account .btn.ghost {
    border: 2px solid var(--c-secondary);
    background: var(--c-surface);
    box-shadow: 0 var(--sh-press-y) 0 var(--c-secondary-dark);
    color: var(--c-secondary-dark);
}
.install-account .btn.ghost:active { box-shadow: 0 var(--sh-press-in) 0 var(--c-secondary-dark); }
.pwa-install-panel {
    width: min(100% - 2 * var(--sp-4), 560px);
    max-height: min(88dvh, 720px);
}
.pwa-guide-copy {
    color: var(--brown-dark);
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-body);
    text-align: center;
}
.pwa-browser-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}
.pwa-browser-choice {
    position: relative;
    display: flex;
    min-height: calc(var(--tap) + var(--sp-8));
    padding: var(--sp-3);
    border: 2px solid rgba(62, 132, 68, .38);
    border-radius: var(--r-md);
    background: linear-gradient(145deg, #fffef7, #e7f6df);
    box-shadow: 0 var(--sh-press-y) 0 rgba(49, 111, 57, .28);
    color: var(--forest-green-dark);
    font-family: inherit;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-base) ease;
}
.pwa-browser-choice > span { font-size: var(--ic-xl); line-height: 1; }
.pwa-browser-choice strong { font-size: var(--fs-btn); font-weight: 900; }
.pwa-browser-choice small { color: var(--brown); font-size: var(--fs-cap); font-weight: 800; line-height: var(--lh-tight); }
.pwa-browser-choice.is-current { border-color: var(--c-accent-dark); }
.pwa-browser-choice.is-current::after {
    content: 'Aktueller Browser';
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    background: var(--c-accent);
    color: var(--brown-dark);
    font-size: var(--fs-cap);
    font-weight: 900;
}
.pwa-browser-choice:active { transform: translateY(var(--sp-1)); box-shadow: 0 var(--sh-press-in) 0 rgba(49, 111, 57, .28); }
.pwa-guide-steps {
    display: grid;
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.pwa-guide-steps li {
    display: flex;
    flex-wrap: wrap;   /* das optionale Anleitungsbild rutscht unter Nummer und Text */
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 2px solid rgba(138, 90, 59, .22);
    border-radius: var(--r-md);
    background: var(--c-surface-2);
}
/* Screenshot zum Schritt. Fehlt die Datei, raeumt src/pwa.js (showGuide) das img wieder
   weg - der Schritt bleibt dann als reiner Text lesbar. */
.pwa-guide-bild {
    flex: 1 1 100%;
    width: 100%;
    max-width: 300px;
    margin-inline: auto;
    border: 2px solid rgba(138, 90, 59, .22);
    border-radius: var(--r-md);
    background: var(--c-surface);
}
.pwa-guide-steps li > span {
    display: grid;
    flex: 0 0 var(--tap);
    width: var(--tap);
    height: var(--tap);
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--c-primary);
    color: var(--soft-white);
    font-size: var(--fs-btn-lg);
    font-weight: 900;
}
.pwa-guide-steps p { font-size: var(--fs-body); font-weight: 800; line-height: var(--lh-body); }
.pwa-install-panel .panel-actions { justify-content: space-between; }
.pwa-install-panel .panel-actions .btn { flex: 1 1 0; margin-bottom: 0; }
@keyframes install-logo-pop {
    from { opacity: 0; transform: translateY(var(--sp-4)) scale(.72) rotate(-8deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes install-card-in {
    from { opacity: 0; transform: translateY(var(--sp-4)) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes install-forest-breathe {
    from { transform: scaleX(1) translateY(0); }
    to { transform: scaleX(1.015) translateY(var(--sp-1)); }
}
@keyframes install-leaf-drift {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }
    12% { opacity: .65; }
    82% { opacity: .5; }
    100% { opacity: 0; transform: translate3d(calc(var(--sp-8) * 2), 110dvh, 0) rotate(520deg); }
}
@media (max-width: 720px), (max-height: 480px) {
    .install-shell { gap: var(--sp-3); padding-right: max(var(--sp-3), env(safe-area-inset-right)); padding-left: max(var(--sp-3), env(safe-area-inset-left)); }
    .install-choice { gap: var(--sp-2); padding: var(--sp-3); }
    .install-save-hint { padding: var(--sp-2); }
    .install-account { padding: var(--sp-2) var(--sp-3); }
    .pwa-browser-picker { gap: var(--sp-2); }
}
@media (prefers-reduced-motion: reduce) {
    .install-logo-wrap,
    .install-mobile-note,
    .install-choice,
    .install-account,
    .install-forest-back,
    .install-leaf { animation: none; }
}

/* --------------------------------------------------------------- Bestenliste */
.lb-panel {
    width: min(96vw, 620px);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
}
#lb-tabs,
#settings-tabs {
    display: flex;
    position: relative;
    margin: var(--sp-1) 0 var(--sp-3);
    border-radius: var(--r-pill);
    border: 2px solid rgba(94, 61, 40, 0.15);
    background: rgba(255, 253, 248, 0.8);
    flex: 0 0 auto;
}
#lb-tabs::before,
#settings-tabs::before {
    content: '';
    position: absolute;
    top: 3px;
    height: calc(100% - 6px);
    width: calc(33.333% - 6px);
    margin-left: 3px;
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-radius: var(--r-pill);
    box-shadow: 0 3px 0 var(--forest-green-dark);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    pointer-events: none;
}
/* Bestenliste mit vier Reitern (Gesamt, Woche, Waldgruppen, Freunde) - die Pille rechnet auf 25%. */
#lb-tabs::before { width: calc(25% - 6px); }
#lb-tabs[data-active="0"]::before { left: 0%; }
#lb-tabs[data-active="1"]::before { left: 25%; }
#lb-tabs[data-active="2"]::before { left: 50%; }
#lb-tabs[data-active="3"]::before { left: 75%; }

/* Einstellungen teilen die Leiste der Bestenliste. Drei Reiter im Spiel,
   im Developermodus kommt ein vierter dazu - dann rechnet die Pille auf 25%. */
#settings-tabs[data-active="0"]::before { left: 0%; }
#settings-tabs[data-active="1"]::before { left: 33.333%; }
#settings-tabs[data-active="2"]::before { left: 66.666%; }
#settings-tabs[data-tabs="4"]::before { width: calc(25% - 6px); }
#settings-tabs[data-tabs="4"][data-active="1"]::before { left: 25%; }
#settings-tabs[data-tabs="4"][data-active="2"]::before { left: 50%; }
#settings-tabs[data-tabs="4"][data-active="3"]::before { left: 75%; }
.lb-tab {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    padding: var(--sp-3) 0;
    border: none;
    background: transparent;
    color: var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
    transition: color 0.25s ease;
}
.lb-tab.active { color: var(--soft-white); }

#lb-countdown {
    text-align: center;
    font-size: var(--fs-cap);
    font-weight: 800;
    color: var(--brown-dark);
    background: rgba(0, 131, 176, 0.1);
    border: 1px solid rgba(0, 131, 176, 0.25);
    border-radius: var(--r-pill);
    padding: var(--sp-1) var(--sp-3);
    margin-bottom: var(--sp-2);
}

/* Wochenreiter: Countdown und Belohnungen-Knopf liegen nebeneinander. */
.lb-week-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}

.lb-week-bar > #lb-countdown {
    flex: 0 1 auto;
    margin-bottom: 0;
    text-align: left;
}

#lb-rewards-btn {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-height: var(--tap);
    min-width: var(--tap);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
}
#lb-countdown b { font-variant-numeric: tabular-nums; color: var(--c-info); }
#lb-countdown.hidden { display: none; }

#lb-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-bottom: var(--sp-3);
}
.lb-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 8px;
    font-size: var(--fs-cap);
}
.lb-row:nth-child(even) { background: rgba(94, 61, 40, 0.05); }
.lb-row.me {
    background: rgba(92, 138, 74, 0.22);
    border: 2px solid var(--forest-green);
    font-weight: 800;
}
.lb-rank {
    flex: 0 0 auto;
    min-width: var(--sp-6);
    font-weight: 800;
    color: var(--brown-dark);
    text-align: right;
}
.lb-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lb-score {
    flex: 0 0 auto;
    font-weight: 800;
    color: var(--forest-green-dark);
    font-variant-numeric: tabular-nums;
}
.lb-hint {
    text-align: center;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--brown);
    padding: var(--sp-4) var(--sp-3);
}
.lb-percentile {
    margin-top: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    text-align: center;
    font-weight: 800;
    font-size: var(--fs-sm);
    color: var(--forest-green-dark);
    background: rgba(92, 138, 74, 0.14);
    border: 2px dashed var(--forest-green);
    border-radius: var(--r-md);
}
.record.rank { color: var(--c-info); animation: none; }

/* --------------------------------------------------------------- Wochenquests */
.quests-panel {
    width: min(96vw, 690px);
    max-height: 94dvh;
    display: flex;
    flex-direction: column;
}
.quests-body { 
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: 3px var(--sp-1) var(--sp-3);
}
.quests-body section { display: flex; flex-direction: column; gap: var(--sp-2); }
.quests-body h2 { margin: 2px 0 0; color: var(--brown-dark); font-size: clamp(var(--fs-h3), 3vmin, 24px); }
.quests-current-heading { display: flex; align-items: center; gap: var(--sp-2); min-height: 36px; }
.quests-current-heading h2 { flex: 0 0 auto; }
.quest-reset-timer { margin-left: auto; color: var(--brown); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.quest-reset-timer b { color: var(--c-info); font-variant-numeric: tabular-nums; }
.quest-dev-rotate-btn,
.quest-dev-complete-btn {
    display: grid;
    place-items: center;
    width: var(--ic-lg);
    min-width: var(--tap); min-height: var(--tap);
    padding: 0;
    border: 2px solid #297943;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(150deg, #68b94d, #397d36);
    box-shadow: 0 2px 0 #28652e;
    font-weight: 900; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.quest-dev-rotate-btn { flex: 0 0 auto; }
.quests-hint { margin: var(--sp-4h) 0; text-align: center; color: var(--brown); font-size: 1.15em; font-weight: 800; }
.quests-pending { padding-bottom: var(--sp-3); border-bottom: 2px dashed rgba(98, 67, 35, .28); }
.quest-card-wrap { position: relative; }
.quest-card-action { position: relative; }
.quest-card {
    width: 100%;
    min-height: 106px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-4) calc(var(--sp-8) + var(--sp-2)) var(--sp-4) var(--sp-4);
    border: 2px solid #a97d49;
    border-radius: var(--r-md);
    color: #51351f;
    background: linear-gradient(150deg, #fff8e8, #ead5ae);
    box-shadow: 0 3px 0 #b8874f, 0 7px 14px rgba(45, 31, 19, .16);
    font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui);
    text-align: left;
}
.quest-card:disabled { opacity: 1; cursor: default; }
.quest-card-wrap.has-dev-complete .quest-card { padding-right: calc(var(--sp-8) * 2); }
.quest-card strong { color: #49301c; font-size: clamp(var(--fs-body), 2.6vmin, 21px); }
.quest-progress-text { color: #76532e; font-variant-numeric: tabular-nums; }
.quest-progress { height: 14px; overflow: hidden; border-radius: var(--r-pill); background: rgba(83, 54, 29, .2); box-shadow: inset 0 1px 3px rgba(45,31,19,.22); }
.quest-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #78b95e, #2f7d47); transition: width .25s ease; }
.quest-card-title { display: block; margin: 0 0 var(--sp-1) var(--sp-4); color: #614018; font-size: clamp(var(--fs-body), 2.6vmin, 21px); }
.quest-card-wrap.is-complete .quest-card {
    justify-content: center;
    min-height: 67px;
    border-color: #e1aa2a;
    color: #70440d;
    background: linear-gradient(150deg, #fff3bb, #e8be58);
    box-shadow: 0 0 0 2px rgba(255, 230, 135, .62), 0 3px 0 #b77b16, 0 8px 18px rgba(112,68,13,.28);
    cursor: pointer;
    text-align: center;
    animation: questRewardPulse 1.7s ease-in-out infinite;
}
.quest-card.quest-claimed { min-height: 67px; color: #63705b; background: #e3e0cf; border-color: #b3ae96; box-shadow: 0 3px 0 #a9a38b; text-align: center; }
.quest-info-btn {
    position: absolute;
    top: 50%;
    right: var(--sp-4);
    width: var(--ic-lg);
    min-width: var(--tap); min-height: var(--tap);
    padding: 0;
    transform: translateY(-50%);
    border: 2px solid #6d4b29;
    border-radius: 50%;
    color: #fff;
    background: #79502b;
    font-weight: 900; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.quest-card-wrap.is-complete .quest-info-btn { border-color: #8f5c0e; background: #9f6611; }
.quest-dev-complete-btn { position: absolute; top: 50%; right: calc(var(--sp-8) + var(--sp-2)); transform: translateY(-50%); }
/* Kleines "i" auf jeder Errungenschaftskarte: 30 px sichtbar, 44 px Trefferflaeche
   ueber das ::after weiter unten (Kompaktpass-Familie). */
.ach-info-btn {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 4;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: var(--info-visible);
    height: var(--info-visible);
    padding: 0;
    border: 2px solid #5e3d28;
    border-radius: var(--r-pill);
    color: var(--soft-white);
    background: var(--c-secondary);
    box-shadow: 0 3px 0 var(--brown-dark);
    font-weight: 900; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.ach-info-btn:active { transform: translateY(3px); box-shadow: none; }
/* Das "i" belegt die rechte obere Ecke - die Neu-Blase weicht nach links aus. */
.achievement-card .new-badge { right: auto; left: -6px; }

.ach-info-status { margin: var(--sp-1) 0 0; color: var(--c-ink-soft); font-weight: 800; }
.ach-info-tiers { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
/* Eine Zeile je Stufe - bei sechs Stufen passt so alles ohne Scrollen ins Fenster. */
.ach-tier-row {
    display: grid;
    grid-template-columns: var(--ic-md) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    color: #53361f;
    background: rgba(143, 94, 38, .1);
    text-align: left;
}
.ach-tier-row.done { background: rgba(92, 138, 74, .16); }
.ach-tier-medal { font-size: var(--ic-md); line-height: 1; }
.ach-tier-name { font-size: var(--fs-body); line-height: var(--lh-tight); }
.ach-tier-goal { font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; }
.ach-tier-state { font-size: var(--fs-cap); font-weight: 800; white-space: nowrap; }
.ach-tier-row.done .ach-tier-state { color: var(--forest-green-dark); }
.quest-submodal { z-index: 220; background: rgba(21, 31, 24, .7); }
.quest-dialog { width: min(94vw, 529px); }
.quest-description { color: var(--brown-dark); font-weight: 800; line-height: 1.45; }
.quest-dialog h3 { margin: var(--sp-4) 0 var(--sp-2); color: var(--brown-dark); }
.quest-rewards { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-4); }
.quest-reward-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: #53361f; background: rgba(143, 94, 38, .1); }
.quest-reward-row span { font-size: 1.5em; }
@keyframes questRewardPulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.018); filter: brightness(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .quest-card-wrap.is-complete .quest-card { animation: none; }
}
@media (max-width: 720px), (max-height: 480px) {
    .quests-current-heading { gap: var(--sp-1); }
    .quest-reset-timer { font-size: var(--fs-cap); }
}

/* --------------------------------------------------------------- Namenswahl */
.name-panel { width: min(94vw, 460px); }
#name-modal input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
}
.name-warn {
    font-weight: 800;
    color: #c62828;
    background: rgba(211, 47, 47, 0.1);
    border: 2px solid rgba(211, 47, 47, 0.35);
    border-radius: 8px;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-body);
}
.name-error {
    color: #c62828;
    font-weight: 800;
    font-size: var(--fs-body);
    margin: 0 0 var(--sp-2);
}
.name-error.hidden { display: none; }

#import-modal input[type="text"],
#import-modal input[type="password"],
#password-modal input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
}
#import-modal input.hidden { display: none; }
/* Modus-Umschalter im Import-Dialog. */
.import-tabs {
    display: flex;
    gap: var(--sp-2);
    margin: var(--sp-1) 0 var(--sp-3);
}
.import-tab {
    flex: 1 1 0;
    padding: var(--sp-2) var(--sp-1);
    border: 2px solid rgba(94, 61, 40, 0.15);
    border-radius: var(--r-pill);
    background: rgba(255, 253, 248, 0.8);
    color: var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.import-tab:hover { background: rgba(94, 61, 40, 0.08); }
.import-tab.active {
    color: var(--soft-white);
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-color: transparent;
    box-shadow: 0 3px 0 var(--forest-green-dark);
}
.import-group.hidden { display: none; }
#import-recovery-code {
    width: 100%;
    box-sizing: border-box;
    margin: var(--sp-2) 0 0;
    padding: var(--sp-3);
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    resize: vertical;
    border: 2px solid #ccc;
    border-radius: 8px;
}

/* Angezeigter Wiederherstellungscode. */
#recovery-code-text {
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    background: rgba(0, 131, 176, 0.08);
    border: 2px dashed var(--c-info);
    border-radius: var(--r-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: var(--forest-green-dark);
    white-space: pre-wrap;
    word-break: break-all;
    text-align: center;
    -webkit-user-select: all;
    user-select: all;
}

/* --------------------------------------------- Regenbogenland (Bonus-Level) */
#rb-hud {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top:    max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-top));
    padding-right:  max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-right));
    padding-left:   max(clamp(var(--sp-2), 3.25vmin, 26px), env(safe-area-inset-left));
    pointer-events: none;
    z-index: 11;
}
#rb-hud.hidden { display: none; }

#rb-stars {
    display: flex;
    gap: var(--sp-1);
    background: rgba(255, 253, 248, 0.82);
    border: 2px solid rgba(94, 61, 40, 0.25);
    border-radius: var(--r-pill);
    padding: clamp(var(--sp-1), 1vmin, 8px) clamp(var(--sp-2), 2.25vmin, 18px);
    font-size: clamp(var(--fs-cap), 3.4vmin, 26px);
    box-shadow: 0 4px 14px var(--shadow);
}
.rb-star { opacity: 0.3; filter: grayscale(1); }
.rb-star.voll { opacity: 1; filter: none; animation: hudPop 0.25s ease; }

#rb-timer {
    background: rgba(255, 253, 248, 0.86);
    border: 2px solid rgba(94, 61, 40, 0.25);
    border-radius: var(--r-pill);
    padding: clamp(var(--sp-1), 1vmin, 8px) clamp(var(--sp-3), 3vmin, 26px);
    font-size: clamp(var(--fs-sm), 4.4vmin, 34px);
    font-weight: 800;
    color: var(--brown-dark);
    font-variant-numeric: tabular-nums;
    box-shadow: 0 4px 14px var(--shadow);
}
#rb-timer.knapp {
    color: #d42222;
    animation: rbTimerPuls 0.6s ease-in-out infinite;
}
@keyframes rbTimerPuls {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
#rb-hearts {
    display: flex;
    gap: var(--sp-1);
    font-size: clamp(var(--ic-sm), 4.2vmin, 32px);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.rb-heart.gebrochen { opacity: 0.45; filter: grayscale(0.7); }
.rb-heart.bruch { animation: rbHerzBruch 0.8s ease; }
@keyframes rbHerzBruch {
    0% { transform: scale(1) rotate(0deg); }
    35% { transform: scale(1.55) rotate(-14deg); }
    70% { transform: scale(0.9) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
}

#rb-joystick {
    position: fixed;
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 18px rgba(80, 60, 140, 0.25);
    pointer-events: none;
    z-index: 30;
}
#rb-joystick.hidden { display: none; }
#rb-joystick-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(80, 60, 140, 0.4);
}

#rb-welcome.overlay { background: rgba(255, 250, 255, 0.35); }
.rb-hint {
    font-size: 0.82em;
    opacity: 0.85;
    line-height: 1.45;
}

#rainbow-fx {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(38, 22, 58, 0.78);
    animation: fadeIn 0.25s ease;
}
#rainbow-fx.hidden { display: none; }
#rainbow-fx-canvas { width: 100%; height: 100%; display: block; }
#rainbow-fx-hint {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 800;
    font-size: clamp(var(--fs-body), 3vmin, 24px);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    animation: badgePulse 1s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
}
#rainbow-fx-hint.hidden { display: none; }
#rainbow-fx-continue {
    position: absolute;
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    min-width: 140px;
    width: auto;
}
#rainbow-fx-continue.hidden { display: none; }

/* ---------------------------------------------------------------- Spielerprofil */
#profile-screen {
    z-index: 15000;
    background: rgba(25, 31, 32, .72);
}
#profile-avatar-modal, #profile-title-modal { z-index: 15060; }
.profile-panel {
    position: relative;
    width: min(760px, 96vw);
    max-height: min(760px, 90dvh);
    overflow: auto;
}
.profile-panel > h1 { margin: 0 var(--sp-7) var(--sp-3); text-align: center; }
.profile-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin: var(--sp-2) 0 var(--sp-2);
}
.profile-avatar {
    display: block;
    flex: 0 0 auto;
    border-radius: 50%;
}
.profile-hero > .profile-avatar,
.profile-hero-avatar > .profile-avatar {
    border: 4px solid #fffdf1;
    box-shadow: 0 4px 13px rgba(35, 31, 24, .28);
}
.profile-hero-text h2 { margin: 0; color: var(--brown-dark); }
.profile-hero-text p {
    margin: 3px 0 0;
    color: var(--forest-green-dark);
    font-weight: 900;
}
.profile-hero-avatar { position: relative; display: inline-block; }
.profile-hero-row { display: flex; align-items: center; gap: var(--sp-2); }
.profile-edit-pen {
    border: 2px solid #d8c4a0; border-radius: 50%; background: #fffaf2; cursor: pointer;
    width: 30px; height: 30px; padding: 0; font-size: var(--fs-sm); line-height: 1; flex: 0 0 30px;
}
.profile-edit-pen:hover { filter: brightness(1.08); }
.profile-hero-avatar .profile-edit-pen { position: absolute; left: -4px; bottom: -4px; }
.profile-name-note {
    margin: var(--sp-2) 0 var(--sp-4);
    text-align: center;
    color: var(--brown);
    font-size: var(--fs-body);
}
.profile-section { margin: var(--sp-3) 0; }
.profile-section h2 {
    margin: 0 0 var(--sp-2);
    color: var(--forest-green-dark);
    font-size: clamp(var(--fs-sm), 2.2vmin, 18px);
}
.profile-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(52px, 1fr));
    gap: var(--sp-2);
}
.profile-avatar-choice {
    display: grid;
    place-items: center;
    min-height: calc(var(--sp-8) + var(--sp-4h));
    padding: var(--sp-1);
    border: 3px solid transparent;
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .72);
    cursor: pointer;
}
.profile-avatar-choice:hover { background: rgba(120, 168, 79, .13); }
.profile-avatar-choice.active {
    border-color: var(--forest-green);
    background: rgba(120, 168, 79, .2);
    box-shadow: 0 2px 7px rgba(35, 88, 42, .2);
}
.profile-title-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}
.profile-title-choice {
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .18);
    border-radius: var(--r-pill);
    color: var(--brown-dark);
    background: #fffdf8;
    font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui);
    cursor: pointer;
}
.profile-title-choice.active {
    border-color: var(--forest-green);
    color: #fff;
    background: var(--forest-green);
}
.profile-title-choice.profile-title-developer {
    border-color: var(--c-danger);
    color: var(--c-danger-dark);
}
.profile-title-choice.profile-title-developer.active {
    border-color: var(--c-danger-dark);
    color: #fff;
    background: var(--c-danger);
}
.profile-hero-text p.profile-title-developer,
.profile-person-text small.profile-title-developer {
    color: var(--c-danger-dark);
}
.profile-stats-title { margin: var(--sp-3) 0 var(--sp-1); font-size: 1rem; color: var(--forest-green-dark); }
.profile-stats-title:first-of-type { margin-top: var(--sp-1); }
.profile-picker-panel { max-width: min(520px, 92vw); max-height: 84dvh; overflow-y: auto; }
.profile-picker-hint { min-height: 2.4em; margin-top: var(--sp-2); font-size: .9rem; }
.profile-avatar-choice { position: relative; }
.cosmetic-locked { opacity: .45; filter: grayscale(.85); }
.cosmetic-lock {
    position: absolute; right: 2px; bottom: 2px; font-size: var(--fs-sm); line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.profile-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.profile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: var(--sp-7);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: rgba(77, 125, 75, .1);
    color: var(--brown-dark);
}
.profile-stat > span { display: flex; align-items: center; gap: var(--sp-2); }
.profile-stat b { color: var(--forest-green-dark); }

/* "Meine Multiplikatoren" im Spielerprofil. Handy zuerst: Quelle links, Wert rechts,
   Fliesstext ab --fs-sm - die Zeilen sind reine Anzeige und nirgends tapbar, deshalb
   ohne Mindesthoehe fuer Trefferflaechen. */
.profile-multi {
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    background: rgba(77, 125, 75, .1);
}
.profile-multi:last-child { margin-bottom: 0; }
.profile-multi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(77, 125, 75, .22);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    color: var(--brown-dark);
}
.profile-multi-head b { color: var(--forest-green-dark); }
.profile-multi-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--brown-dark);
}
.profile-multi-row > span { min-width: 0; overflow-wrap: anywhere; }
.profile-multi-row b { flex: none; color: var(--forest-green-dark); font-variant-numeric: tabular-nums; }
/* Gesperrte Ebenen stehen bewusst mit da - was fehlt, treibt staerker an als was man hat. */
.profile-multi-row.is-locked { opacity: .55; }
.profile-multi-row.is-locked b { color: var(--brown-dark); font-weight: 600; }
.profile-multi-next {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, .34);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--forest-green-dark);
    font-weight: 600;
}
/* Zustandshinweis unter einer Multiplikatorzeile - meldet, druckt nicht. */
.profile-multi-note {
    /* .panel zentriert - die Flex-Zeilen darueber merken das nicht, ein Block schon. */
    text-align: left;
    padding: 0 0 var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--brown-dark);
    opacity: .55;
}
.profile-multi-note.is-done {
    color: var(--forest-green-dark);
    opacity: 1;
    font-weight: 600;
}
.profile-person {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    flex: 1 1 auto;
}
.profile-person-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.profile-person-text .friend-name { flex: 0 1 auto; }
.profile-person-text small { color: var(--forest-green-dark); font-size: var(--fs-cap); font-weight: 800; }
.profile-person-text .player-activity {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    color: #756752;
    font-size: var(--fs-cap);
}
.player-activity::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #9b927f;
}
.player-activity.active { color: #267c43; }
.player-activity.active::before { background: #35b75b; box-shadow: 0 0 0 3px rgba(53, 183, 91, .16); }
.player-activity.offline_lt_24h::before { background: #d5a72d; }
.player-activity.offline_gt_24h::before,
.player-activity.offline_gt_2d::before { background: #c47b36; }
.player-activity.offline_gt_3d::before,
.player-activity.offline_gt_1w::before,
.player-activity.offline_gt_2w::before,
.player-activity.offline_gt_1m::before { background: #8f8575; }
.friend-profile-person {
    justify-content: center;
    padding: var(--sp-2) var(--sp-1) 2px;
}
.friend-profile-person .profile-person-text { flex: 0 1 auto; }
.friend-profile-person .friend-name { font-size: clamp(var(--fs-h3), 3vmin, 24px); }
.lb-profile-avatar { flex: 0 0 30px; }

/* ---------------------------------------------------------------- Freunde */
#friends-screen {
    z-index: 15000;
    background: rgba(25, 31, 32, .72);
}
.friends-submodal {
    z-index: 15020;
    background: rgba(20, 27, 28, .82);
}
.friends-panel,
.friends-dialog {
    position: relative;
    max-height: 88dvh;
    max-height: min(88dvh, 720px);
    overflow: auto;
}
.friends-panel { width: min(720px, 96vw); }
.friends-dialog { width: min(520px, 94vw); }
.friends-panel h1,
.friends-dialog h2 { text-align: center; margin-right: var(--sp-6); }
.friends-close {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: #d84343;
    box-shadow: 0 3px 0 #9f2c2c;
    font-weight: 900; font-size: var(--fs-h3); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.friends-actions {
    display: flex;
    justify-content: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}
.friends-actions .btn {
    flex: 1 1 0;
    width: auto;
    max-width: 280px;
    min-height: 50px;
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: clamp(var(--fs-sm), 2.25vmin, 18px);
    line-height: 1.15;
}
.friend-add-btn { background: linear-gradient(160deg, #73c87d, #3d9958); box-shadow: 0 3px 0 #2f7845; }
.friend-remove-btn,
.friend-confirm-delete {
    background: linear-gradient(160deg, #ef6a62, #c83c35);
    box-shadow: 0 3px 0 #982a25;
}
.friend-remove-tools {
    display: flex;
    justify-content: center;
    margin: -2px 0 var(--sp-3);
}
.friend-delete-btn {
    border: 0;
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-3);
    color: #fff;
    background: #c83933;
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
.friends-body,
.friend-search-results,
.friend-profile-body { min-height: 54px; }
.friends-section { margin: var(--sp-3) 0; }
.friends-section h3 {
    margin: 0 0 var(--sp-2);
    color: var(--forest-green-dark);
    font-size: var(--fs-sm);
}
.friend-empty,
.friend-hint {
    padding: var(--sp-3);
    text-align: center;
    color: var(--brown);
    font-size: var(--fs-sm);
}
.friend-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 42px;
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-2);
    border: 2px solid rgba(94, 61, 40, .16);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .82);
}
.friend-row.selected { border-color: #d84343; background: #fff1f0; }
.friend-name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 800; color: var(--brown-dark); }
.friend-icon-btn,
.friend-check {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--r-md);
    background: transparent;
    font-size: var(--ic-sm);
    cursor: pointer;
    transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.friend-icon-btn.accept { color: #24894b; }
.friend-icon-btn.decline,
.friend-icon-btn.cancel { color: #d84343; }
.friend-icon-btn.info { color: #1976d2; font-weight: 900; }
.friend-icon-btn.favorite { color: #c39100; }
.friend-icon-btn:hover,
.friend-icon-btn:focus-visible {
    transform: translateY(-1px) scale(1.06);
    outline: none;
    box-shadow: 0 2px 6px rgba(62, 45, 30, .18);
}
.friend-icon-btn.accept:hover,
.friend-icon-btn.accept:focus-visible { background: rgba(36, 137, 75, .14); }
.friend-icon-btn.decline:hover,
.friend-icon-btn.decline:focus-visible,
.friend-icon-btn.cancel:hover,
.friend-icon-btn.cancel:focus-visible { background: rgba(216, 67, 67, .14); }
.friend-icon-btn.favorite:hover,
.friend-icon-btn.favorite:focus-visible { background: rgba(224, 169, 42, .17); }
.friend-icon-btn.info:hover,
.friend-icon-btn.info:focus-visible { background: rgba(25, 118, 210, .14); }
.friend-icon-btn.visit { width: var(--tap); height: var(--tap); color: #24894b; }
.friend-icon-btn.visit:hover,
.friend-icon-btn.visit:focus-visible { background: rgba(36, 137, 75, .14); }
.friend-profile-visit { width: 100%; min-height: 44px; margin-top: var(--sp-3); }
.friend-icon-btn.gift:hover,
.friend-icon-btn.gift:focus-visible { background: rgba(224, 169, 42, .17); }
/* Verschenkt oder Kontingent leer: sichtbar, aber eindeutig aus dem Spiel. */
.friend-icon-btn.gift:disabled { opacity: .32; cursor: default; filter: grayscale(1); }
.friend-icon-btn.gift:disabled:hover { transform: none; box-shadow: none; background: transparent; }

/* Sammelknopf ueber den Brett-Zeilen. */
.news-claim-all { width: 100%; margin: 0 0 var(--sp-2); min-height: 42px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn.news-claim-btn {
    flex: 0 0 auto;
    width: auto;
    min-width: var(--tap);
    min-height: var(--btn-h-md);
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-btn);
    line-height: var(--lh-tight);
    white-space: nowrap;
}
.friend-icon-btn:active { transform: translateY(1px); box-shadow: none; }
.friend-status { color: var(--brown); font-size: var(--fs-cap); font-weight: 800; }
.friend-check {
    flex: 0 0 auto;
    border: 2px solid #d84343;
    color: transparent;
    font-size: var(--fs-body);
}
.friend-check.checked { color: #fff; background: #d84343; }
.friend-search-row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.friend-search-row input {
    min-width: 0;
    min-height: 46px;
    flex: 1;
    padding: var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .28);
    border-radius: var(--r-md);
    color: var(--brown-dark);
    background: #fffdf8;
    font-family: inherit;
    font-size: clamp(var(--fs-sm), 2vmin, 16px);
    font-weight: 800;
}
.friend-search-row input::placeholder { color: rgba(94, 61, 40, .58); }
.friend-search-row .btn {
    flex: 0 0 auto;
    width: auto;
    min-width: var(--tap); min-height: var(--tap);
    margin: 0;
    padding: var(--sp-3) var(--sp-4h);
    font-size: clamp(var(--fs-sm), 2vmin, 16px);
}
.friend-profile-dialog { max-width: 430px; }
.friend-profile-group-title {
    margin: var(--sp-3) 0 var(--sp-1); font-size: 1rem; color: var(--forest-green-dark);
}
.friend-profile-group-title:first-of-type { margin-top: var(--sp-2); }
.friend-back {
    border: 1px solid rgba(63, 102, 54, .24);
    border-radius: var(--r-pill);
    color: var(--forest-green-dark);
    background: rgba(255, 253, 248, .7);
    padding: var(--sp-1) var(--sp-3);
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 800;
    cursor: pointer;
}
.friend-back:hover,
.friend-back:focus-visible { background: rgba(92, 138, 74, .12); outline: none; }
.friend-profile-stats { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.friend-profile-stat {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--r-md);
    background: rgba(77, 125, 75, .1);
    color: var(--brown-dark);
}
.friend-profile-stat b { color: var(--forest-green-dark); }

/* ---------- Waldgruppen ---------- */
#community-tabs,
#quest-tabs {
    display: flex;
    position: relative;
    margin: var(--sp-1) 0 var(--sp-3);
    border-radius: var(--r-pill);
    border: 2px solid rgba(94, 61, 40, .15);
    background: rgba(255, 253, 248, .8);
}
#community-tabs::before,
#quest-tabs::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 0;
    height: calc(100% - 6px);
    width: calc(50% - 6px);
    margin-left: 3px;
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    border-radius: var(--r-pill);
    box-shadow: 0 3px 0 var(--forest-green-dark);
    transition: left .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
    pointer-events: none;
}
#community-tabs[data-active="1"]::before,
#quest-tabs[data-active="1"]::before { left: 50%; }
.community-tab {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    padding: var(--sp-3) 0;
    border: none;
    background: transparent;
    color: var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
    transition: color .25s ease;
}
.community-tab.active { color: var(--soft-white); }
.wg-quests-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-2);
}
.wg-quests-heading h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-quest-group-name {
    min-width: 0;
    overflow: hidden;
    color: var(--brown-dark);
    font-size: clamp(var(--fs-h3), 2.5vmin, 21px);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wg-quests-heading .quest-reset-timer {
    min-width: 0;
    margin-left: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
}
#wg-quests-body .wg-quest-search-btn { display: block; width: fit-content; margin-top: var(--sp-2); margin-inline: auto; }

.wg-actions { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.wg-actions .btn { width: 100%; max-width: none; min-height: 50px; margin: 0; }
.wg-hint { text-align: center; color: var(--brown); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.wg-error { color: #c62828; font-weight: 800; text-align: center; font-size: var(--fs-sm); }
.wg-error.hidden { display: none; }
.wg-sub { margin: var(--sp-3) 0 var(--sp-1); color: var(--forest-green-dark); font-size: var(--fs-sm); }

.wg-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-3);
    margin-bottom: var(--sp-3);
    border: 2px solid rgba(63, 102, 54, .28);
    border-radius: var(--r-md);
    background: rgba(120, 168, 79, .14);
}
.wg-banner-info { flex: 1 1 140px; min-width: 0; }
.wg-banner-name { font-weight: 900; color: var(--brown-dark); font-size: var(--fs-body); overflow-wrap: anywhere; }
.wg-banner-meta { color: var(--brown); font-weight: 800; font-size: var(--fs-sm); }
/* Levelstand der eigenen Gruppe: Kopfzeile mit "i", darunter der XP-Balken. */
.wg-level-box { margin-top: var(--sp-1); }
.wg-level-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--brown);
    font-weight: 800;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}
.wg-level-head span { min-width: 0; overflow-wrap: anywhere; }
/* .quest-info-btn ist absolut positioniert - hier laeuft der Knopf im Fluss mit. */
.wg-level-info-btn {
    position: static;
    flex: 0 0 auto;
    width: 24px;
    min-width: var(--tap); min-height: var(--tap);
    margin-left: auto;
    transform: none;
    font-size: var(--fs-body);
}
.wg-level-bar {
    height: 10px;
    margin-top: var(--sp-1);
    overflow: hidden;
    border-radius: var(--r-pill);
    background: rgba(83, 54, 29, .2);
    box-shadow: inset 0 1px 3px rgba(45, 31, 19, .22);
}
.wg-level-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0c33c, #d9962c);
    transition: width .25s ease;
}

.wg-level-stand { margin: 0 0 var(--sp-2); color: var(--brown); font-weight: 800; font-size: var(--fs-sm); }
.wg-level-list { display: flex; flex-direction: column; gap: var(--sp-1); max-height: none; overflow: visible; }
.wg-level-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(63, 102, 54, .2);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .55);
    opacity: .62;
}
.wg-level-row.erreicht { opacity: 1; border-color: rgba(63, 102, 54, .42); background: rgba(120, 168, 79, .18); }
.wg-level-mark { flex: 0 0 auto; font-size: var(--ic-sm); }
.wg-level-text { flex: 1 1 auto; min-width: 0; text-align: left; }
.wg-level-name { font-weight: 900; color: var(--brown-dark); font-size: var(--fs-body); }
.wg-level-bonus { color: var(--brown); font-weight: 800; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.wg-level-cost { flex: 0 0 auto; color: var(--brown); font-weight: 800; font-size: var(--fs-cap); font-variant-numeric: tabular-nums; }

.wg-banner-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.wg-banner-btns .btn { width: auto; margin: 0; padding: var(--sp-2) var(--sp-3); }
.wg-leave-btn { background: linear-gradient(160deg, #ef6a62, #c83c35); box-shadow: 0 3px 0 #982a25; }

.wg-icon { flex: 0 0 auto; border-radius: var(--r-md); }
.wg-row-icon { width: 34px; height: 34px; }

.wg-icon-picker { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.wg-icon-choice {
    padding: var(--sp-1);
    border: 3px solid transparent;
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .8);
    cursor: pointer;
    line-height: 0;
}
.wg-icon-choice.selected { border-color: var(--forest-green); background: rgba(120, 168, 79, .2); }

#wg-create-name,
#wg-settings-name {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .28);
    border-radius: var(--r-md);
    color: var(--brown-dark);
    background: #fffdf8;
    font-family: inherit;
    font-size: clamp(var(--fs-sm), 2vmin, 16px);
    font-weight: 800;
}
.wg-toggle-row { display: flex; gap: var(--sp-2); }
.wg-toggle { flex: 1 1 0; width: auto; min-height: 44px; margin: 0; font-size: var(--fs-cap); opacity: .55; }
.wg-toggle.active { opacity: 1; }

.wg-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    margin: var(--sp-2) 0;
    padding: var(--sp-2);
    border: 2px solid rgba(94, 61, 40, .16);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .82);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.wg-card:hover, .wg-card:focus-visible { border-color: var(--forest-green); outline: none; }
.wg-card-info { flex: 1; min-width: 0; }
.wg-card-name { font-weight: 800; color: var(--brown-dark); overflow-wrap: anywhere; }
.wg-card-meta { color: var(--brown); font-size: var(--fs-sm); font-weight: 800; }
.wg-badge {
    flex: 0 0 auto;
    padding: 3px var(--sp-2);
    border-radius: var(--r-pill);
    background: rgba(63, 102, 54, .14);
    color: var(--forest-green-dark);
    font-size: var(--fs-cap);
    font-weight: 800;
}
.wg-badge.voll { background: rgba(216, 67, 67, .14); color: #b3453f; }
.wg-role { flex: 0 0 auto; font-size: var(--fs-cap); font-weight: 900; color: var(--forest-green-dark); }
.wg-role.leader { color: #b8860b; }
.wg-best { flex: 0 0 auto; color: var(--brown); font-weight: 800; font-size: var(--fs-cap); }
.wg-profile-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.wg-profile-actions .btn { width: 100%; margin: 0; }

/* ---------- Schwarzes Brett ---------- */
.news-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 46px;
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .16);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .82);
}
.news-row.news-info { border-color: rgba(63, 102, 54, .3); background: rgba(120, 168, 79, .13); }
.news-symbol { flex: 0 0 auto; width: 34px; text-align: center; font-size: clamp(var(--ic-sm), 3vmin, 24px); }
.news-text { flex: 1; min-width: 0; }
.news-title { font-weight: 800; color: var(--brown-dark); overflow-wrap: anywhere; }
.news-sub {
    color: var(--brown);
    font-size: var(--fs-sm);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.news-info .news-sub { font-weight: 600; line-height: 1.35; }

/* ---------- Umfrage am Schwarzen Brett ----------
   Nach dem Abstimmen wird jede Antwortzeile SELBST zum Balken: die Gewichtung steht damit
   genau dort, wo die Antwort steht, und die Karte bleibt im Handy-Querformat halb so hoch
   wie mit einem zweiten Balkenblock darunter. Der Anteil kommt als Inline-Variable
   --anteil vom Client. */
.news-row.news-poll {
    display: block;
    border-color: rgba(224, 169, 42, .45);
    background: rgba(244, 239, 225, .92);
}
.news-poll-head { display: flex; align-items: center; gap: var(--sp-3); }
.news-poll-question { color: var(--c-ink); font-size: var(--fs-body); font-weight: 800; overflow-wrap: anywhere; }
.news-poll-intro {
    margin: var(--sp-2) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-body);
    overflow-wrap: anywhere;
}
/* --sp-3 statt --sp-2: zwischen zwei Trefferflaechen bleiben mindestens 8 px, auch in der
   Handy-Staffel. */
.news-poll-options { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.news-poll-option { display: flex; align-items: center; gap: var(--sp-3); }
.news-poll-answer {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-width: 0;
    min-height: var(--btn-h-lg);
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid var(--c-secondary);
    border-radius: var(--r-md);
    color: var(--c-ink);
    background: var(--c-surface);
    box-shadow: 0 3px 0 var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-tight);
    text-align: left;
    cursor: pointer;
}
.news-poll-answer:active { transform: translateY(3px); box-shadow: none; }
/* Ergebniszeile einer beendeten Umfrage: nicht druckbar, also ohne harten Unterschatten. */
.news-poll-answer-static { box-shadow: none; cursor: default; }
.news-poll-answer[aria-pressed="true"],
.news-poll-answer-static[data-meine="1"] { border-color: var(--forest-green-dark); background: rgba(120, 168, 79, .3); }
.news-poll-answer-text { min-width: 0; overflow-wrap: anywhere; }
.news-poll-answer-pct { flex: 0 0 auto; color: var(--c-ink-soft); font-size: var(--fs-sm); font-weight: 900; }
.news-poll[data-ergebnis="1"] .news-poll-answer {
    background:
        linear-gradient(to right, rgba(92, 138, 74, .38) 0 var(--anteil, 0%), rgba(0, 0, 0, 0) var(--anteil, 0%) 100%),
        var(--c-surface);
}
/* Hoehere Spezifitaet als die flaechige Auswahlfarbe oben - im Ergebniszustand gewinnt der
   Balken, die eigene Wahl behaelt nur ihren gruenen Rand und den Haken. */
.news-poll[data-ergebnis="1"] .news-poll-answer[aria-pressed="true"],
.news-poll[data-ergebnis="1"] .news-poll-answer-static[data-meine="1"] { border-color: var(--forest-green-dark); }
.news-poll-info {
    border: 2px solid var(--brown-dark);
    color: var(--soft-white);
    background: var(--c-secondary);
    box-shadow: 0 3px 0 var(--brown-dark);
    font-weight: 900;
    cursor: pointer;
}
.news-poll-info:active { transform: translateY(3px); box-shadow: none; }
.btn.news-poll-submit {
    width: 100%;
    margin: var(--sp-3) 0 0;
    min-height: var(--btn-h-lg);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-btn);
    line-height: var(--lh-tight);
}
.news-poll-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) var(--sp-3);
    margin: var(--sp-2) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.lb-row .wg-icon { width: 26px; height: 26px; margin-right: var(--sp-1); }
.lb-group-name { display: flex; align-items: center; min-width: 0; flex: 1; }

#friends-toast {
    position: fixed;
    top: max(var(--sp-4), env(safe-area-inset-top));
    left: 50%;
    z-index: 15100;
    max-width: min(92vw, 560px);
    transform: translate(-50%, -10px);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-pill);
    color: #fff;
    background: #2f7845;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
    font-weight: 900;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
#friends-toast.show { opacity: 1; transform: translate(-50%, 0); }
#friends-toast.hidden { display: none; }
.pwa-update-toast {
    position: fixed;
    top: max(var(--sp-4), env(safe-area-inset-top));
    left: 50%;
    z-index: 30000;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    max-width: min(94vw, 600px);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border-radius: var(--r-pill);
    color: #fff;
    background: #2f7845;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .35);
    font-weight: 900;
    transform: translateX(-50%);
}
.pwa-update-toast button {
    border: 0;
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-3);
    color: var(--brown-dark);
    background: #fff3b6;
    font-weight: 900; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
.pwa-update-toast.hidden { display: none; }
@media (max-width: 720px), (max-height: 480px) {
    .friends-actions { flex-direction: column; }
    .friends-actions .btn { width: 100%; max-width: none; }
    .friend-search-row { flex-direction: column; }
    .pwa-update-toast { border-radius: 16px; }
}

/* ⚠ Hier stand der dritte Skalierungs-Hack: "scale(.78)" auf die gesamte
   Lobbytafel. Er hat im Handy-Querformat jeden Button auf 78 % geschrumpft
   (52px -> 41px, 16px Schrift -> 12,5px) und damit das Button-System aus
   Etappe 2 genau dort ausgehebelt, wo der Spieler zuerst hinschaut.
   Die Tafel passt ohne ihn: die Regel unter (max-height: 560px) setzt
   min-height auf 0 und nimmt das Polster zurueck. */
@media (max-width: 720px), (max-height: 480px) {
    /* Kein bottom hier - das setzt der Kompakt-Block (max-height: 560px) weiter
       oben. Stuende es hier, gewaenne es allein durch die spaetere Position. */
    #lobby-screen .lobby-board { width: min(94vw, 560px); }
    /* Feuer ueber den Wiki-TV heben: auf 800x369 teilen sich beide die Bodenkante. */
    #lobby-screen .lobby-feuer { bottom: calc(var(--lobby-ground-bottom) + var(--sp-8) + var(--sp-8) + var(--sp-8) + var(--sp-2)); }
}

@media (max-width: 720px), (max-height: 480px) {
    body.playground-active {
        --playground-ui-gap: 12px;
        --playground-edge-left: max(8px, env(safe-area-inset-left));
        --playground-edge-right: max(8px, env(safe-area-inset-right));
        --playground-edge-top: max(12px, env(safe-area-inset-top));
        --playground-edge-bottom: max(12px, env(safe-area-inset-bottom));
        --playground-top-control-size: clamp(34px, 9vmin, 42px);
        --playground-action-height: clamp(29px, 7vmin, 38px);
        --playground-resource-width: clamp(86px, 18vmin, 108px);
        --playground-dialog-left: calc(var(--playground-edge-left) + var(--playground-resource-width) + var(--playground-ui-gap));
        --playground-dialog-right: calc(var(--playground-edge-right) + var(--playground-top-control-size) * 3 + 14px + var(--playground-ui-gap));
        --playground-dialog-bottom: calc(var(--playground-edge-bottom) + var(--playground-action-height) + var(--playground-ui-gap));
    }

    #playground-top-left {
        left: var(--playground-edge-left);
        gap: var(--sp-2);
    }
    #playground-top-right { right: var(--playground-edge-right); }
    #playground-top-right #profile-btn,
    #playground-top-right #legend-info-btn,
    #playground-top-right #settings-btn,
    #playground-back-btn {
        width: var(--playground-top-control-size);
        min-width: var(--playground-top-control-size);
        min-height: var(--playground-top-control-size);
        height: var(--playground-top-control-size);
        padding: 0;
    }
    #playground-back-btn {
        display: grid;
        place-items: center;
    }
    #playground-back-btn .playground-action-label { display: none; }
    #playground-hud .playground-actions button {
        width: auto;
        min-width: 0;
        min-height: var(--playground-action-height);
        height: var(--playground-action-height);
        padding: 3px clamp(var(--sp-2), 1.5vmin, 9px);
        display: inline-flex;
        gap: 3px;
        font-size: var(--fs-btn);
        white-space: nowrap;
    }
    .playground-action-label { display: inline; }
    .playground-action-icon { font-size: clamp(var(--fs-sm), 3.4vmin, 18px); }
    #playground-actions-left #playground-achievements-btn { max-width: none; }

    .playground-resource {
        min-width: var(--playground-resource-width);
        padding: var(--sp-2) var(--sp-3);
        font-size: clamp(var(--fs-sm), 4vmin, 20px);
    }
    .playground-actions {
        bottom: var(--playground-edge-bottom);
        flex-direction: row;
        align-items: center;
        gap: 3px;
    }
    #playground-actions-left { left: var(--playground-edge-left); }
    #playground-actions-right { right: var(--playground-edge-right); }
    #playground-actions .new-badge { top: -5px; right: -5px; }
    #playground-brand {
        max-width: calc(100vw - var(--playground-dialog-left) - var(--playground-dialog-right));
    }

    body.playground-active .overlay:has(> .panel) {
        padding-top: var(--playground-edge-top);
        padding-right: var(--playground-dialog-right);
        padding-bottom: var(--playground-dialog-bottom);
        padding-left: var(--playground-dialog-left);
    }
    body.playground-active .overlay:has(> .panel) > .panel {
        max-width: calc(100vw - var(--playground-dialog-left) - var(--playground-dialog-right)) !important;
        max-height: calc(100dvh - var(--playground-edge-top) - var(--playground-dialog-bottom)) !important;
        max-width: calc(100dvw - var(--playground-dialog-left) - var(--playground-dialog-right)) !important;
        max-height: calc(100dvh - var(--playground-edge-top) - var(--playground-dialog-bottom)) !important;
    }

    body.playground-active:has(.overlay:not(.hidden) > .panel) :is(
        #playground-back-btn,
        #playground-top-right button,
        .playground-actions button
    ) {
        pointer-events: none;
    }
    body.playground-active:has(.overlay:not(.hidden) > .panel) :is(
        #playground-build-bar,
        #playground-context,
        #playground-night-skip
    ) {
        visibility: hidden;
        pointer-events: none;
    }
}

/* ------------------------------------------------ Hunde-Inventar */
.inventory-panel {
    position: relative;
    text-align: center;
}
.inventory-dogs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-3);
}
.inventory-dog-card {
    position: relative;
    min-width: 0;
    border: 3px solid rgba(94, 61, 40, .24);
    border-radius: 16px;
    padding: var(--sp-2);
    color: var(--brown-dark);
    background: rgba(255, 253, 248, .88);
    box-shadow: 0 3px 0 rgba(94, 61, 40, .18);
    font-family: inherit;
    cursor: pointer;
}
.inventory-dog-pick {
    display: block;
    width: 100%;
    border: 0;
    padding: 0;
    color: inherit;
    background: none;
    font-family: inherit;
    cursor: inherit;
}
.inventory-dog-card canvas {
    display: block;
    width: 100%;
    height: clamp(58px, 12vmin, 92px);
    border-radius: var(--r-md);
}
.inventory-dog-card strong,
.inventory-dog-card .inventory-dog-locked { display: block; }
.inventory-dog-card strong { margin-top: var(--sp-1); font-size: var(--fs-sm); }
.inventory-dog-card .inventory-dog-locked { font-size: var(--fs-cap); opacity: .72; }
.dog-level-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-1);
}
.dog-level-num {
    flex-shrink: 0;
    color: var(--brown-dark);
    font-weight: 900; font-size: var(--fs-cap); font-family: var(--ff-ui);
}
.dog-level-track { flex: 1 1 auto; min-width: 0; }
.dog-level-meters {
    display: block;
    color: var(--brown);
    font-weight: 800; font-size: var(--fs-cap); font-family: var(--ff-ui);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dog-level-bar {
    height: 7px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: rgba(94, 61, 40, .18);
}
.dog-level-bar span {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, #7cbf5c, #4f8d45);
}
.dog-level-bar span.max { background: linear-gradient(90deg, #ffd76a, #e2ac2d); }
.dog-level-row .item-info-btn { width: 21px; min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-btn); }
.dog-level-summary { margin: 0 0 var(--sp-2); line-height: 1.45; font-size: var(--fs-cap); }
.dog-level-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-cap);
}
.dog-level-table td { padding: var(--sp-1) var(--sp-1); border-top: 1px solid rgba(94, 61, 40, .16); }
.dog-level-table td:first-child { font-weight: 800; white-space: nowrap; }
.dog-level-table td:last-child { color: var(--forest-green-dark); font-weight: 800; text-align: right; }
.dog-level-table tr.jetzt { background: rgba(226, 172, 45, .18); }
.inventory-dog-card.viewed-dog { border-color: #4f8d45; box-shadow: 0 3px 0 #376b34; }
.inventory-dog-card.active-dog { border-color: #e2ac2d; box-shadow: 0 0 0 2px #fff4b6, 0 4px 0 #a97913, 0 0 18px rgba(226, 172, 45, .55); }
/* Nur die Vorschau wird grau - das "i" der Levelzeile bleibt auch bei gesperrten
   Hunden lesbar und anklickbar. */
.inventory-dog-card.locked-dog { cursor: not-allowed; }
.inventory-dog-card.locked-dog .inventory-dog-pick { filter: grayscale(1); opacity: .52; }
.inventory-dog-card.locked-dog .dog-level-num,
.inventory-dog-card.locked-dog .dog-level-meters { opacity: .7; }
.inventory-dog-bar {
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-3);
}
.inventory-dog-bar .btn { min-width: 190px; margin: 0; }
.inventory-dog-perk {
    margin: 0;
    color: var(--forest-green-dark);
    font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui);
}
.inventory-item-info .item-effect { color: var(--forest-green-dark); font-weight: 800; }
.shop-effect {
    margin-top: 2px;
    color: var(--forest-green-dark);
    font-size: var(--fs-body);
    font-weight: 800;
}
#inventory-categories {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}
.inventory-cat {
    position: relative;
    border: 0;
    border-radius: var(--r-pill);
    padding: var(--sp-2) var(--sp-2);
    color: var(--brown-dark);
    background: rgba(94, 61, 40, .08);
    font-weight: 800; font-size: var(--fs-cap); font-family: var(--ff-ui);
    cursor: pointer;
}
/* Etwas kleiner und weiter innen: die Reiter stehen dicht an dicht. */
.inventory-cat .new-badge {
    top: -5px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    font-size: var(--fs-cap);
    line-height: 13px;
}
.inventory-cat.active {
    color: #fff;
    background: linear-gradient(160deg, var(--forest-green), var(--forest-green-dark));
    box-shadow: 0 3px 0 var(--forest-green-dark);
}
#inventory-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.inventory-item-card {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    border: 2px solid rgba(94, 61, 40, .16);
    border-radius: var(--r-md);
    padding: var(--sp-2);
    background: rgba(255, 253, 248, .9);
    text-align: left;
}
.inventory-item-card.equipped-item {
    border-color: #d5a62f;
    background: linear-gradient(160deg, #fffdf3, #fff1be);
}
.inventory-item-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 54px;
    overflow: hidden;
    border-radius: var(--r-md);
    background: rgba(94, 61, 40, .07);
    font-size: var(--ic-lg);
}
.inventory-item-icon canvas { width: 75px; height: 50px; }
.inventory-item-info { min-width: 0; }
.inventory-item-info strong,
.inventory-item-info span { display: block; }
.inventory-item-info strong { color: var(--brown-dark); font-size: var(--fs-cap); }
.inventory-item-info span { color: var(--brown); font-size: var(--fs-cap); }
.inventory-empty {
    grid-column: 1 / -1;
    margin: var(--sp-3) 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    color: var(--brown-dark);
    background: rgba(94, 61, 40, .07);
}
.inventory-shop-link {
    grid-column: 1 / -1;
    justify-self: center;
}
/* ------------------------------------------------ "i"-Knopf und Info-Fenster
   Ein Fenster fuer Shop, Inventar und Bauwerke (siehe _openItemInfo). */
.item-info-btn {
    flex-shrink: 0;
    align-self: center;
    justify-self: center;
    width: 26px;
    min-width: var(--tap); min-height: var(--tap);
    border: 2px solid rgba(94, 61, 40, .35);
    border-radius: 50%;
    background: rgba(255, 253, 248, .95);
    color: var(--brown-dark);
    font-weight: 900; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.item-info-btn:hover { background: #fff3d6; }
.item-info-btn:active { transform: translateY(1px); }
.item-info-panel {
    position: relative;
    color: var(--brown-dark);
    text-align: left;
}
.item-info-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    padding-right: var(--sp-6);
}
.item-info-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: rgba(94, 61, 40, .09);
    font-size: var(--ic-lg);
}
.item-info-panel h2 { margin: 0; color: var(--brown-dark); font-size: clamp(var(--fs-h3), 3vmin, 24px); }
.item-info-effect {
    margin: 0 0 var(--sp-3);
    color: var(--forest-green-dark);
    font-weight: 800;
    font-size: clamp(var(--fs-sm), 2vmin, 16px);
}
.item-info-text { margin: 0; line-height: 1.5; font-size: clamp(var(--fs-cap), 1.95vmin, 16px); }
.item-info-extra:empty { display: none; }
.item-info-extra { margin-top: var(--sp-3); }
.item-info-panel > .btn { margin: var(--sp-4) auto 0; display: block; }

/* ------------------------------------------------ Forschungslabor */
#lab-screen {
    z-index: 140;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #0c1d23;
    touch-action: none;
}
#lab-screen.hidden { display: none; }
#lab-canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    touch-action: none;
}
#lab-canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(185, 228, 235, .85); }
#lab-back-btn {
    position: absolute;
    left: max(var(--sp-4), env(safe-area-inset-left));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    min-width: clamp(130px, 16vw, 210px);
    min-height: clamp(var(--tap), 7vmin, 58px);
    padding: var(--sp-2) var(--sp-4h);
    border: 2px solid #426c7e;
    border-radius: var(--r-md);
    color: #f4fbfd;
    background: rgba(12, 24, 30, .9);
    box-shadow: 0 5px 0 rgba(5, 13, 17, .75);
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
#lab-back-btn:hover, #lab-back-btn:focus-visible {
    border-color: #83c7d7;
    background: rgba(28, 63, 70, .95);
    outline: none;
}
#lab-back-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(5, 13, 17, .75); }
#lab-action-status {
    position: absolute;
    top: max(var(--sp-4), env(safe-area-inset-top));
    left: 50%;
    min-width: 140px;
    transform: translate(-50%, -10px);
    padding: var(--sp-2) var(--sp-4);
    border: 2px solid rgba(214, 235, 231, .65);
    border-radius: var(--r-pill);
    color: #f3faf8;
    background: rgba(12, 31, 35, .9);
    font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui);
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
#lab-action-status.show { opacity: 1; transform: translate(-50%, 0); }
#lab-back-btn.hidden, .lab-subscreen.hidden, .lab-charge.hidden,
.lab-press-busy.hidden, .lab-press-upgrade > button.hidden,
.lab-research-list.hidden, .lab-research-detail.hidden,
.lab-potions-active.hidden { display: none; }

.lab-subscreen {
    position: absolute;
    z-index: 6;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--sp-3), env(safe-area-inset-top)) max(var(--sp-3), env(safe-area-inset-right))
        max(var(--sp-3), env(safe-area-inset-bottom)) max(var(--sp-3), env(safe-area-inset-left));
    overflow: auto;
    color: #eef8f6;
    background: rgba(5, 18, 23, .82);
    backdrop-filter: blur(5px);
    touch-action: pan-y;
}
.lab-window {
    width: min(930px, 96vw);
    max-height: 100%;
    overflow: auto;
    border: 3px solid #477c86;
    border-radius: var(--r-md);
    background: linear-gradient(145deg, #1b3438 0%, #10282e 58%, #0b1f25 100%);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .58), inset 0 1px rgba(211, 242, 237, .16);
    font-family: var(--ff-ui);
}
.lab-window-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4h);
    padding: var(--sp-4h) var(--sp-5) var(--sp-4);
    border-bottom: 2px solid rgba(106, 166, 170, .27);
}
.lab-window-kicker {
    margin: 0 0 2px;
    color: #82c5b0;
    font-size: var(--fs-cap);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.lab-window-head h1 { margin: 0; font-weight: 800; font-size: var(--fs-h1); font-family: var(--ff-ui); }
.lab-window-close {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0 0 var(--sp-1);
    border: 2px solid #6d9299;
    border-radius: 50%;
    color: #eef8f6;
    background: #17353b;
    font-weight: 800; font-size: var(--fs-h1); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-window-close:hover, .lab-window-close:focus-visible { border-color: #d7b15d; outline: none; }
.lab-press-content {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(245px, .75fr);
    gap: var(--sp-4);
    padding: var(--sp-4h) var(--sp-5) var(--sp-5);
}
.lab-press-machine, .lab-press-upgrade {
    min-width: 0;
    border: 2px solid rgba(111, 166, 168, .34);
    border-radius: var(--r-md);
    background: rgba(6, 24, 29, .58);
    box-shadow: inset 0 1px rgba(210, 239, 233, .08);
}
.lab-press-machine { padding: var(--sp-4); transition: filter .2s ease, opacity .2s ease; }
.lab-press-facts {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}
.lab-press-facts strong { color: #f0cb70; font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui); }

/* Rundes „i" plus Popover. */
.lab-info-wrap { position: relative; display: inline-flex; }
.lab-info-dot {
    display: inline-grid;
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid rgba(111, 166, 168, .55);
    border-radius: 50%;
    color: #cfe9e4;
    background: rgba(9, 34, 40, .9);
    font-weight: 900; font-size: var(--fs-cap); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-info-dot:hover, .lab-info-dot:focus-visible { border-color: #e9c56a; color: #ffe9a8; outline: none; }
.lab-info-pop {
    position: absolute;
    z-index: 8;
    top: var(--sp-5h);
    left: 0;
    display: flex;
    width: max-content;
    max-width: min(320px, 70vw);
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-3);
    border: 2px solid rgba(233, 197, 106, .45);
    border-radius: var(--r-md);
    color: #fffdf8;
    background: rgba(12, 30, 35, .97);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    font-size: var(--fs-cap);
    font-weight: 800;
    text-align: left;
    line-height: 1.4;
}
.lab-info-pop-right { left: auto; right: 0; }
.lab-info-pop.hidden { display: none; }
.lab-info-pop b { color: #ffe9a8; font-size: var(--fs-sm); }
.lab-info-pop small { color: #9fc0bb; font-size: var(--fs-cap); }
.lab-info-table { width: 100%; border-collapse: collapse; font-size: var(--fs-cap); }
.lab-info-table th { color: #9fc0bb; font-size: var(--fs-cap); text-transform: uppercase; }
.lab-info-table th, .lab-info-table td { padding: 2px var(--sp-2) 2px 0; text-align: left; }
.lab-info-table tr.jetzt td { color: #ffd766; }
.lab-press-wallet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    width: fit-content;
    min-width: 190px;
    margin: -5px 0 var(--sp-3) auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid #477079;
    border-radius: var(--r-md);
    color: #b5d5ce;
    background: #102f35;
    font-size: var(--fs-cap);
    font-weight: 800;
}
.lab-press-wallet strong { color: #fff1af; font-size: var(--fs-sm); }
.lab-meter-label {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 2px var(--sp-2);
    color: #b8d0ce;
    font-size: var(--fs-cap);
}
.lab-meter-label strong { color: #edf9f7; }
.lab-meter {
    height: 17px;
    overflow: hidden;
    border: 2px solid #39575e;
    border-radius: var(--r-pill);
    background: #081a1e;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .45);
}
.lab-meter > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #dbad39, #ffe789 78%, #fff5bd);
    transition: width .2s ease;
}
.lab-charge { margin-top: var(--sp-3); }
.lab-meter-charge > span { background: linear-gradient(90deg, #4f9bc0, #8ed9ed); }
.lab-press-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-4) 2px var(--sp-2);
    color: #c7ddda;
    font-size: var(--fs-sm);
    font-weight: 800;
}
.lab-press-slider-head strong { color: #f5d276; font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui); white-space: nowrap; }
.lab-press-slider {
    --fill: 0%;
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.lab-press-slider::-webkit-slider-runnable-track {
    height: 10px;
    border: 1px solid #477079;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, #e9bd53 0 var(--fill), #193940 var(--fill) 100%);
}
.lab-press-slider::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border: 3px solid #102b31;
    border-radius: 50%;
    appearance: none;
    background: #ffe18a;
    box-shadow: 0 0 0 2px #c69836;
}
.lab-press-slider::-moz-range-track { height: 10px; border: 1px solid #477079; border-radius: var(--r-pill); background: #193940; }
.lab-press-slider::-moz-range-progress { height: 10px; border-radius: var(--r-pill); background: #e9bd53; }
.lab-press-slider::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid #102b31; border-radius: 50%; background: #ffe18a; box-shadow: 0 0 0 2px #c69836; }
.lab-press-slider:focus-visible { outline: 2px solid #91cbd0; outline-offset: 3px; border-radius: var(--r-pill); }
.lab-press-slider:disabled { opacity: .42; cursor: default; }
.lab-press-slider-scale {
    display: flex;
    justify-content: space-between;
    margin: -1px 2px 0;
    color: #8fb0ae;
    font-size: var(--fs-cap);
    font-weight: 800;
}
.lab-press-preview {
    min-height: 25px;
    margin: var(--sp-4) 0 var(--sp-3);
    color: #fff1af;
    font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui);
    text-align: center;
}
.lab-primary-action, .lab-press-upgrade > button {
    width: 100%;
    min-width: var(--tap); min-height: var(--tap);
    border: 2px solid #88c79d;
    border-radius: var(--r-md);
    color: #f4fff6;
    background: linear-gradient(#3d815b, #286444);
    box-shadow: 0 4px 0 #153d2a;
    font-weight: 800; font-size: var(--fs-btn); font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-primary-action:hover:not(:disabled), .lab-primary-action:focus-visible,
.lab-press-upgrade > button:hover:not(:disabled), .lab-press-upgrade > button:focus-visible {
    filter: brightness(1.12);
    outline: none;
}
.lab-primary-action:disabled, .lab-press-upgrade > button:disabled {
    border-color: #526568;
    color: #93a4a3;
    background: #334548;
    box-shadow: none;
    cursor: not-allowed;
}
.lab-action-hint {
    min-height: 18px;
    margin: var(--sp-2) 2px 0;
    color: #dda99c;
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: 1.35;
    text-align: center;
}
.lab-press-upgrade {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4h);
    text-align: center;
}
.lab-upgrade-icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin-bottom: var(--sp-3);
    border: 3px solid #a47d39;
    border-radius: 50%;
    color: #f0c75d;
    background: #302d26;
    font-size: var(--ic-xl);
}
.lab-upgrade-head { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); }
.lab-press-upgrade h2 { margin: 0; color: #f0cb70; font-weight: 800; font-size: var(--fs-h2); font-family: var(--ff-ui); }
.lab-press-upgrade > p { margin: var(--sp-3) 0; color: #c2d8d4; font-size: var(--fs-sm); line-height: 1.45; }
.lab-press-upgrade > p:empty { display: none; }
.lab-upgrade-meta { display: block; margin-bottom: var(--sp-4); color: #fff0b0; font-size: var(--fs-sm); }
.lab-press-busy {
    position: absolute;
    inset: var(--sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    border: 2px solid #889798;
    border-radius: var(--r-md);
    color: #f1f5f4;
    background: rgba(34, 45, 46, .96);
    box-shadow: inset 0 0 35px rgba(0, 0, 0, .3);
}
.lab-press-busy strong { font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui); }
.lab-press-busy span { color: #ffdc7a; font-size: var(--fs-h3); font-weight: 900; }
.lab-press-busy small { color: #b9ccca; font-weight: 800; }
.lab-window.upgrading .lab-press-machine { filter: grayscale(1); opacity: .48; pointer-events: none; }

.lab-research-window { width: min(900px, 96vw); }
.lab-research-list { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.lab-research-intro { margin: 0 0 var(--sp-3); color: #b9d4cf; font-size: var(--fs-sm); font-weight: 800; text-align: center; }
.lab-research-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-4h);
}
.lab-research-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.lab-research-orb, .lab-detail-ring {
    --ring-fill: conic-gradient(from -90deg, #172b30 0deg 65deg, #07181c 65deg 72deg);
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(82px, 12vmin, 112px);
    height: clamp(82px, 12vmin, 112px);
    padding: var(--sp-3);
    border: 0;
    border-radius: 50%;
    color: #f5fbfa;
    background: var(--ring-fill);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .34);
}
.lab-research-orb::before, .lab-detail-ring::before {
    position: absolute;
    inset: var(--sp-3);
    border: 2px solid #4b7478;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 32%, #2e5659, #122a30 70%);
    box-shadow: inset 0 2px rgba(222, 249, 243, .15);
    content: '';
}
.lab-research-orb > span, .lab-detail-ring > span { position: relative; z-index: 1; font-size: clamp(var(--ic-lg), 5vmin, 48px); }
.lab-research-orb { cursor: pointer; transition: transform .14s ease, filter .14s ease; }
.lab-research-orb:hover, .lab-research-orb:focus-visible {
    outline: 3px solid rgba(238, 203, 106, .88);
    outline-offset: 3px;
    filter: brightness(1.16);
    transform: translateY(-2px);
}
.lab-research-item > strong { margin-top: var(--sp-2); color: #f3d27c; font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui); }
.lab-research-item > small {
    display: block;
    min-height: 18px;
    margin-top: 2px;
    color: #a9c6c2;
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 1.25;
}
.lab-research-detail { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.lab-detail-back {
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    color: #b9deda;
    background: transparent;
    font-weight: 800; font-size: var(--fs-cap); font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-detail-back:hover, .lab-detail-back:focus-visible { color: #ffda77; outline: none; }
.lab-detail-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    margin: var(--sp-2) 0 var(--sp-4);
}
.lab-detail-ring { flex: 0 0 auto; width: 150px; height: 150px; padding: var(--sp-3); }
.lab-detail-ring::before { inset: var(--sp-3); }
.lab-detail-ring > span { font-size: 62px; } /* frei: Emoji-Grossdarstellung, reine Bildgroesse - der Kompaktblock unten setzt den Handy-Wert. */
.lab-detail-level { margin: 0 0 3px; color: #83c8b3; font-size: var(--fs-sm); font-weight: 900; text-transform: uppercase; }
.lab-detail-hero h2 { margin: 0; color: #f2d078; font-weight: 800; font-size: var(--fs-h1); font-family: var(--ff-ui); }
.lab-detail-name-row { display: flex; align-items: center; gap: var(--sp-2); }
.lab-info-btn {
    width: 20px;
    min-width: var(--tap); min-height: var(--tap);
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: currentColor;
    background: rgba(255, 255, 255, .72);
    font-weight: 800; font-size: var(--fs-btn); line-height: 1; font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-info-btn:hover:not(:disabled), .lab-info-btn:focus-visible { filter: brightness(1.2); outline: 2px solid currentColor; }
.lab-info-btn:disabled { opacity: .45; cursor: default; }
.lab-detail-status { margin: var(--sp-2) 0 0; color: #b9d0cc; font-size: var(--fs-sm); font-weight: 800; }
.lab-detail-effect {
    max-width: 690px;
    margin: 0 auto var(--sp-4);
    padding: var(--sp-4) var(--sp-4);
    border: 2px solid rgba(98, 166, 169, .38);
    border-radius: var(--r-md);
    color: #f0f8f6;
    background: rgba(4, 23, 28, .58);
    font-weight: 800; font-size: var(--fs-body); line-height: 1.4; font-family: var(--ff-ui);
    text-align: center;
}
.lab-detail-facts {
    display: grid;
    max-width: 540px;
    margin: 0 auto var(--sp-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}
.lab-detail-facts > div {
    display: flex;
    min-height: 73px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid #516f72;
    border-radius: var(--r-md);
    background: #142f34;
}
.lab-detail-facts span { color: #9ec0bc; font-size: var(--fs-cap); font-weight: 800; text-transform: uppercase; }
.lab-detail-facts strong { margin-top: var(--sp-1); color: #ffe08a; font-size: var(--fs-h3); }
.lab-detail-actions { display: grid; max-width: 540px; margin: 0 auto; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.lab-detail-actions > button { min-width: var(--tap); min-height: var(--tap); }
#lab-research-queue {
    border: 2px solid #6fa7ba;
    border-radius: var(--r-md);
    color: #eefbff;
    background: linear-gradient(#36758c, #24566b);
    box-shadow: 0 4px 0 #143847;
    font-weight: 800; font-size: var(--fs-sm); font-family: var(--ff-ui);
    cursor: pointer;
}
#lab-research-queue:hover, #lab-research-queue:focus-visible { filter: brightness(1.13); outline: none; }
#lab-research-queue.is-unavailable { border-style: dashed; }

.lab-board-window { width: min(820px, 96vw); }
.lab-board-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5) var(--sp-2);
}
.lab-board-slot {
    min-width: 0;
    overflow: hidden;
    border: 2px solid rgba(113, 171, 172, .39);
    border-radius: var(--r-md);
    background: rgba(5, 24, 29, .62);
}
.lab-board-slot > h2 {
    margin: 0;
    padding: var(--sp-2) var(--sp-4);
    color: #a9cfca;
    background: rgba(50, 92, 94, .31);
    font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.lab-board-work { padding: var(--sp-4); }
.lab-board-work-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.lab-board-work-head > span { font-size: var(--ic-xl); }
.lab-board-work-head > div { display: flex; min-width: 0; flex-direction: column; }
.lab-board-work-head strong { overflow: hidden; color: #f2d079; font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui); text-overflow: ellipsis; white-space: nowrap; }
.lab-board-work-head small { margin-top: 3px; color: #b6cfcb; font-weight: 800; }
.lab-board-potion { min-height: 18px; margin: var(--sp-2) 0; color: #9ec8d7; font-size: var(--fs-cap); font-weight: 800; text-align: center; }
.lab-board-cancel {
    width: 100%;
    min-height: 36px;
    border: 2px solid #a66a65;
    border-radius: var(--r-md);
    color: #ffe7e2;
    background: #713d3a;
    font-weight: 800;
    cursor: pointer;
}
.lab-board-cancel.is-disabled { border-color: #5c6969; color: #91a09e; background: #354345; }
.lab-board-rush {
    width: 100%;
    min-height: 36px;
    margin-bottom: var(--sp-2);
    border: 2px solid #7fc7b0;
    border-radius: var(--r-md);
    color: #eafff7;
    background: #2f6d5c;
    font-weight: 800;
    cursor: pointer;
}
.lab-board-rush.is-disabled { border-color: #5c6969; color: #91a09e; background: #354345; cursor: default; }
.lab-board-empty {
    display: flex;
    min-height: 175px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8eaaa7;
    text-align: center;
}
.lab-board-empty > span { font-size: 42px; } /* frei: Emoji-Grossdarstellung, reine Bildgroesse - der Kompaktblock unten setzt den Handy-Wert. */
.lab-board-empty strong { color: #b9d0cd; }
.lab-board-empty small { margin-top: var(--sp-1); }
.lab-board-queue {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    border-top: 2px solid rgba(98, 152, 154, .3);
    background: rgba(38, 67, 68, .28);
}
.lab-board-queue > div { display: flex; min-width: 0; flex-direction: column; }
.lab-board-queue span { color: #87aaa6; font-size: var(--fs-cap); font-weight: 900; text-transform: uppercase; }
.lab-board-queue strong { overflow: hidden; color: #edf6f4; font-size: var(--fs-cap); text-overflow: ellipsis; white-space: nowrap; }
.lab-board-queue small { color: #a7bfbc; font-size: var(--fs-cap); }
.lab-board-queue > button {
    flex: 0 0 auto;
    width: 34px;
    min-width: var(--tap); min-height: var(--tap);
    border: 2px solid #9c6862;
    border-radius: 50%;
    color: #ffe8e3;
    background: #643a37;
    font-size: var(--fs-h2);
    cursor: pointer;
}
.lab-board-queue.empty { justify-content: center; color: #799592; }
.lab-board-status { min-height: 22px; margin: var(--sp-2) var(--sp-4h) var(--sp-4); color: #f1c87a; font-size: var(--fs-body); font-weight: 800; text-align: center; }

.lab-archive-window { width: min(1000px, 97vw); }
.lab-archive-book {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--sp-3);
    align-items: stretch;
    padding: var(--sp-4) var(--sp-4h) var(--sp-2);
}
.lab-archive-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 4px solid #73533b;
    border-radius: 8px var(--r-md) var(--r-md) 8px;
    background: linear-gradient(90deg, #d9c49a, #f4e8c8 4%, #f6ebcf 49%, #d2b986 50%, #f7ecd1 52%, #ead7ad 100%);
    box-shadow: inset 5px 0 12px rgba(85, 58, 33, .3), 0 8px 18px rgba(0, 0, 0, .35);
}
.lab-archive-card {
    display: flex;
    min-width: 0;
    min-height: 150px;
    flex-direction: column;
    padding: var(--sp-3);
    border: 2px solid #8c7655;
    border-radius: var(--r-md);
    color: #4f4639;
    background: rgba(244, 238, 219, .82);
    box-shadow: 0 2px 4px rgba(67, 49, 31, .2);
}
.lab-archive-card.researched { border-color: #478262; background: linear-gradient(145deg, #e9f5df, #cce3c6); }
.lab-archive-card.open { color: #696a67; background: linear-gradient(145deg, #dedbd2, #c3c2bd); filter: grayscale(.65); }
/* Eine Forschung je Seite: Kopf plus die fuenf Stufen untereinander. */
.lab-archive-sheet {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4);
    border: 2px solid #8c7655;
    border-radius: var(--r-md);
    color: #4f4639;
    background: rgba(244, 238, 219, .82);
    box-shadow: 0 2px 4px rgba(67, 49, 31, .2);
}
.lab-archive-sheet.researched { border-color: #478262; }
.lab-archive-sheet .lab-archive-card-head > span { width: 52px; height: 52px; font-size: var(--ic-lg); }
.lab-archive-sheet .lab-archive-card-head strong { font-size: var(--fs-h2); }
.lab-archive-explain { margin: 0; font-size: var(--fs-body); font-weight: 800; line-height: 1.4; }
.lab-archive-explain .lab-info-btn { margin-left: var(--sp-1); color: #315a55; vertical-align: text-bottom; }
.lab-archive-steps { display: flex; margin: 0; padding: 0; flex-direction: column; gap: var(--sp-2); list-style: none; }
.lab-archive-steps li {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid #8c7655;
    border-radius: var(--r-md);
    background: rgba(255, 253, 244, .6);
}
.lab-archive-steps li.researched { border-color: #478262; background: linear-gradient(145deg, #e9f5df, #cce3c6); }
.lab-archive-steps li.open { color: #6c6d6a; background: rgba(206, 205, 199, .55); filter: grayscale(.6); }
.lab-archive-steps b { font-weight: 800; font-size: var(--fs-cap); font-family: var(--ff-ui); }
.lab-archive-steps p { margin: 0; font-size: var(--fs-body); font-weight: 800; line-height: 1.35; }
.lab-archive-steps time { font-size: var(--fs-cap); font-weight: 800; text-align: right; white-space: nowrap; }
@media (max-width: 720px), (max-height: 480px) {
    .lab-archive-steps li { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); }
}

.lab-archive-card-head { display: flex; align-items: center; gap: var(--sp-2); }
.lab-archive-card-head > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2px solid #7c745f;
    border-radius: 50%;
    color: #314a3b;
    background: rgba(255, 255, 255, .54);
    font-size: var(--ic-md);
    font-weight: 900;
}
.lab-archive-card-head > div { display: flex; min-width: 0; flex-direction: column; }
.lab-archive-card-head strong { overflow: hidden; font-weight: 800; font-size: var(--fs-sm); font-family: var(--ff-ui); text-overflow: ellipsis; white-space: nowrap; }
.lab-archive-card-head small { font-size: var(--fs-cap); font-weight: 900; text-transform: uppercase; }
.lab-archive-card > p { flex: 1; margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-body); font-weight: 800; line-height: 1.35; }
.lab-archive-card > time { font-size: var(--fs-cap); font-weight: 800; }
.lab-book-arrow {
    min-width: 0;
    border: 2px solid #63888c;
    border-radius: var(--r-md);
    color: #eff9f7;
    background: #18373d;
    font-weight: 800; font-size: var(--fs-h1); font-family: var(--ff-ui);
    cursor: pointer;
}
.lab-book-arrow:hover:not(:disabled), .lab-book-arrow:focus-visible { border-color: #e9c56a; outline: none; }
.lab-book-arrow:disabled { color: #657879; background: #26393c; cursor: not-allowed; }
.lab-archive-page { margin: var(--sp-1) var(--sp-4h) var(--sp-4); color: #b9d2ce; font-size: var(--fs-cap); font-weight: 800; text-align: center; }

#research-info-modal { z-index: 100; background: rgba(4, 20, 24, .76); }
.research-info-panel { width: min(92vw, 580px); color: #35514e; }
.research-info-panel h2 { margin-top: 0; color: #315a55; font-weight: 800; font-size: var(--fs-h1); font-family: var(--ff-ui); }
.research-info-panel > p { color: #4a615c; font-weight: 800; line-height: 1.5; }
.research-info-effect {
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--r-md);
    color: #244d42 !important;
    background: rgba(86, 154, 110, .17);
}
.research-info-panel .btn { width: 100%; margin-bottom: 0; }

.lab-potions-window { width: min(720px, 96vw); }
.lab-potions-content { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4h); padding: var(--sp-5) var(--sp-5h) var(--sp-5h); }
.lab-potion-bottle {
    display: grid;
    align-self: stretch;
    place-items: center;
    border: 3px solid #557b7f;
    border-radius: var(--r-md);
    background: radial-gradient(circle at 50% 65%, rgba(87, 194, 224, .34), transparent 48%), #0e272d;
    box-shadow: inset 0 0 28px rgba(89, 191, 212, .2);
}
.lab-potion-bottle > span { font-size: 92px; filter: drop-shadow(0 0 14px rgba(101, 214, 238, .7)); } /* frei: Emoji-Grossdarstellung, reine Bildgroesse - der Kompaktblock unten setzt den Handy-Wert. */
.lab-potions-main { min-width: 0; }
.lab-potion-stock { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.lab-potion-stock span { color: #9abbb7; font-size: var(--fs-cap); font-weight: 900; text-transform: uppercase; }
.lab-potion-stock strong { color: #ffe087; font-weight: 800; font-size: var(--fs-h3); font-family: var(--ff-ui); }
.lab-potions-active {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 2px solid #5ba2b6;
    border-radius: var(--r-md);
    color: #e9fbff;
    background: rgba(35, 102, 119, .36);
    text-align: center;
}
.lab-potions-active strong { color: #9ee6f7; }
.lab-potions-active span { margin-top: 2px; font-size: var(--fs-cap); font-weight: 800; }
.lab-potions-explain { margin: var(--sp-3) 0 var(--sp-3); color: #bed4d0; font-size: var(--fs-body); line-height: 1.4; }

.lab-harald-window { width: min(760px, 96vw); }
.lab-harald-content {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
}
.lab-portrait-canvas, .dialog-portrait {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 3px solid #668b8c;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 34%, #38565a, #10272d 72%);
    box-shadow: inset 0 0 28px rgba(195, 232, 224, .13), 0 8px 20px rgba(0, 0, 0, .35);
}
.lab-harald-message { min-width: 0; }
.lab-harald-message > strong { color: #f0cc71; font-weight: 800; font-size: var(--fs-body); font-family: var(--ff-ui); }
.lab-harald-message > p {
    min-height: 82px;
    margin: var(--sp-3) 0 var(--sp-4h);
    color: #e7f2ef;
    font-weight: 800; font-size: var(--fs-body); line-height: 1.5; font-family: var(--ff-ui);
}
.lab-harald-message > .lab-primary-action + .lab-primary-action { margin-top: var(--sp-2); }

/* Willkommensgeschenk: wie Feature-Intro / Systemdialog – kompakt, linksbuendig,
   kleines Portraet. Spezifitaet muss .panel.panel-layout > .panel-body (display:block) schlagen. */
.panel.panel-layout.welcome-gift-panel {
    --panel-max: 420px;
    width: min(92vw, 420px);
    text-align: left;
}
.panel.panel-layout.welcome-gift-panel > .panel-head.welcome-gift-head {
    grid-template-columns: minmax(0, 1fr);
    text-align: left;
}
.welcome-gift-head > div { min-width: 0; }
.welcome-gift-kicker {
    margin: 0 0 var(--sp-1);
    color: var(--c-ink-soft);
    font-size: var(--fs-cap);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.panel.panel-layout.welcome-gift-panel > .panel-body.welcome-gift-body {
    display: grid;
    grid-template-columns: var(--shop-thumb) minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: start;
    text-align: left;
}
.welcome-gift-portrait {
    width: var(--shop-thumb);
    height: var(--shop-thumb);
    max-width: var(--shop-thumb);
    border-radius: 50%;
    border: 2px solid rgba(94, 61, 40, 0.18);
    background: radial-gradient(circle at 50% 34%, #f0e6d2, #d8c4a4 72%);
    box-shadow: var(--sh-card);
}
.panel.panel-layout.welcome-gift-panel #welcome-gift-text {
    margin: 0;
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-text);
    text-align: left;
}
.panel.panel-layout.welcome-gift-panel > .panel-actions {
    justify-content: stretch;
}
.panel.panel-layout.welcome-gift-panel > .panel-actions.panel-actions-single {
    justify-content: stretch;
}
.panel.panel-layout.welcome-gift-panel > .panel-actions .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
}
@media (max-width: 720px), (max-height: 480px) {
    .panel.panel-layout.welcome-gift-panel > .panel-body.welcome-gift-body {
        gap: var(--sp-2);
    }
    .panel.panel-layout.welcome-gift-panel #welcome-gift-text {
        font-size: var(--fs-dialog);
        line-height: var(--lh-body);
    }
}

/* Die geteilte Dialogbuehne liegt ueber #lab-screen (140) und
   #forge-interior-screen (117), aber weit unter den Toren (18800). */
.dialog-scene {
    position: fixed;
    z-index: 150;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(var(--sp-3), env(safe-area-inset-top)) max(var(--sp-3), env(safe-area-inset-right))
        max(var(--sp-3), env(safe-area-inset-bottom)) max(var(--sp-3), env(safe-area-inset-left));
    overflow: hidden;
    color: #eef8f6;
    background: rgba(3, 12, 16, .93);
    backdrop-filter: blur(9px);
}
.dialog-scene.hidden { display: none; }
.dialog-stage {
    display: grid;
    width: min(1040px, 97vw);
    grid-template-columns: minmax(130px, 190px) minmax(360px, 1fr) minmax(130px, 190px);
    gap: clamp(var(--sp-4), 2.5vw, var(--sp-5h));
    align-items: center;
}
.dialog-portrait { align-self: center; transition: opacity .18s ease, transform .18s ease; }
.dialog-scene[data-speaker="npc"] .dialog-portrait-dog,
.dialog-scene[data-speaker="dog"] .dialog-portrait-npc { opacity: 0; transform: scale(.86); }
.dialog-bubble {
    position: relative;
    min-width: 0;
    padding: clamp(var(--sp-5), 4vmin, 34px);
    border: 4px solid #d7b15d;
    border-radius: var(--r-lg);
    color: #263331;
    background: linear-gradient(145deg, #fffdf4, #e9e3cb);
    box-shadow: 0 18px 42px rgba(0, 0, 0, .48), inset 0 2px rgba(255, 255, 255, .9);
    cursor: pointer;
}
.dialog-bubble > strong { color: #315a55; font-weight: 900; font-size: var(--fs-h2); font-family: var(--ff-ui); }
.dialog-bubble > p {
    min-height: 118px;
    margin: var(--sp-3) 0 var(--sp-4);
    color: #293431;
    font-weight: 800; font-size: var(--fs-body); line-height: 1.48; font-family: var(--ff-ui);
}
.dialog-controls { display: flex; align-items: center; gap: var(--sp-3); }
.dialog-dots { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: var(--sp-1); }
.dialog-dots > span {
    width: 9px;
    height: 9px;
    border: 2px solid #6f827d;
    border-radius: 50%;
    background: transparent;
}
.dialog-dots > span.done { border-color: #56806d; background: #56806d; }
.dialog-dots > span.active { border-color: #b4872b; background: #e0b84e; transform: scale(1.28); }
.dialog-skip.hidden { display: none; }
.dialog-skip {
    min-height: var(--btn-h-md);
    padding-inline: var(--sp-3);
    border: 2px solid #6f827d;
    border-radius: var(--r-md);
    color: #3d4a47;
    background: rgba(255, 255, 255, .55);
    font-weight: 800; font-size: var(--fs-cap); font-family: var(--ff-ui);
    cursor: pointer;
}
.dialog-skip:hover, .dialog-skip:focus-visible { border-color: #b4872b; outline: 3px solid #d7b15d; }
#dialog-next {
    min-width: 125px;
    min-height: var(--btn-h-md);
    border: 2px solid #346d4b;
    border-radius: var(--r-md);
    color: #f7fff8;
    background: linear-gradient(#4a9568, #2f704c);
    box-shadow: 0 4px 0 #1d4c33;
    font-weight: 900; font-size: var(--fs-sm); font-family: var(--ff-ui);
    cursor: pointer;
}
#dialog-next:hover, #dialog-next:focus-visible { filter: brightness(1.12); outline: 3px solid #d7b15d; }
/* Sichtmass --btn-h-md liegt unter --tap, die Trefferflaeche nie. */
.dialog-skip, #dialog-next { position: relative; }
.dialog-skip::after, #dialog-next::after {
    content: '';
    position: absolute;
    inset: calc((var(--tap) - var(--btn-h-md)) / -2) 0;
}

@media (max-width: 720px), (max-height: 480px) {
    #lab-back-btn {
        left: max(var(--sp-3), env(safe-area-inset-left));
        bottom: max(var(--sp-3), env(safe-area-inset-bottom));
        min-width: 112px;
        min-width: var(--tap); min-height: var(--tap);
        padding: var(--sp-1) var(--sp-4);
    }
    .lab-subscreen { align-items: stretch; padding: var(--sp-1) max(var(--sp-2), env(safe-area-inset-right)) var(--sp-1) max(var(--sp-2), env(safe-area-inset-left)); }
    .lab-window { width: min(980px, 98vw); }
    .lab-window-head { align-items: center; padding: var(--sp-2) var(--sp-3); }
    .lab-window-kicker { display: none; }
    .lab-window-head h1 { font-size: var(--fs-h1); }
    .lab-window-close { width: 36px; height: 36px; font-size: var(--ic-md); }
    .lab-press-content { grid-template-columns: minmax(0, 1.55fr) minmax(215px, .7fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); }
    .lab-press-machine { padding: var(--sp-2); }
    .lab-press-facts { margin-bottom: var(--sp-2); }
    .lab-meter { height: 13px; }
    .lab-charge { margin-top: var(--sp-1); }
    .lab-press-wallet { min-width: 160px; margin-bottom: var(--sp-1); padding: var(--sp-1) var(--sp-2); }
    .lab-press-slider-head { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-cap); }
    .lab-press-slider-head strong { font-size: var(--fs-body); }
    .lab-press-slider { height: 20px; }
    .lab-press-preview { min-height: 18px; margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-sm); }
    .lab-primary-action { min-height: 35px; }
    .lab-action-hint { min-height: 13px; margin-top: var(--sp-1); font-size: var(--fs-body); }
    .lab-press-upgrade { padding: var(--sp-3); }
    .lab-upgrade-icon { width: 42px; height: 42px; margin-bottom: var(--sp-1); font-size: var(--ic-md); }
    .lab-press-upgrade h2 { font-size: var(--fs-h2); }
    .lab-press-upgrade > p { margin: var(--sp-2) 0; font-size: var(--fs-body); }
    .lab-upgrade-meta { margin-bottom: var(--sp-2); font-size: var(--fs-cap); }
    .lab-press-upgrade > button { min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-btn); }
    .lab-research-list { padding: var(--sp-1) var(--sp-3) var(--sp-2); }
    .lab-research-intro { margin-bottom: var(--sp-1); font-size: var(--fs-body); }
    .lab-research-grid { gap: 3px var(--sp-3); }
    .lab-research-orb { width: 58px; height: 58px; padding: var(--sp-2); }
    .lab-research-orb::before { inset: var(--sp-2); }
    .lab-research-orb > span { font-size: var(--ic-md); }
    .lab-research-item > strong { margin-top: 2px; font-size: var(--fs-cap); }
    .lab-research-item > small { min-height: 13px; font-size: var(--fs-cap); }
    .lab-research-detail { padding: var(--sp-1) var(--sp-4) var(--sp-2); }
    .lab-detail-back { padding: 2px var(--sp-1); font-size: var(--fs-cap); }
    .lab-detail-hero { gap: var(--sp-3); margin: 0 0 var(--sp-1); }
    .lab-detail-ring { width: 78px; height: 78px; padding: var(--sp-2); }
    .lab-detail-ring::before { inset: var(--sp-2); }
    .lab-detail-ring > span { font-size: var(--ic-xl); }
    .lab-detail-level { font-size: var(--fs-cap); }
    .lab-detail-hero h2 { font-size: var(--fs-h1); }
    .lab-detail-status { margin-top: 2px; font-size: var(--fs-body); }
    .lab-detail-effect { margin-bottom: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-body); }
    .lab-detail-facts { margin-bottom: var(--sp-1); gap: var(--sp-2); }
    .lab-detail-facts > div { min-height: 42px; }
    .lab-detail-facts span { font-size: var(--fs-cap); }
    .lab-detail-facts strong { margin-top: 1px; font-size: var(--fs-cap); }
    .lab-detail-actions { gap: var(--sp-2); }
    .lab-detail-actions > button { min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-btn); }
    .lab-board-slots { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) 2px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-board-slot > h2 { padding: var(--sp-1) var(--sp-2); font-size: var(--fs-h3); }
    .lab-board-work { padding: var(--sp-2) var(--sp-2); }
    .lab-board-work-head { gap: var(--sp-2); margin-bottom: var(--sp-1); }
    .lab-board-work-head > span { font-size: var(--ic-md); }
    .lab-board-work-head strong { font-size: var(--fs-cap); }
    .lab-board-work-head small { font-size: var(--fs-cap); }
    .lab-board-potion { min-height: 12px; margin: var(--sp-1) 0; font-size: var(--fs-cap); }
    .lab-board-cancel { min-height: 28px; font-size: var(--fs-cap); }
    .lab-board-empty { min-height: 119px; font-size: var(--fs-cap); }
    .lab-board-empty > span { font-size: var(--ic-lg); }
    .lab-board-queue { min-height: 48px; padding: var(--sp-1) var(--sp-2); }
    .lab-board-queue > button { width: 28px; min-width: var(--tap); min-height: var(--tap); font-size: var(--fs-h2); }
    .lab-board-status { min-height: 15px; margin: 3px var(--sp-3) var(--sp-1); font-size: var(--fs-body); }
    .lab-archive-book { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: var(--sp-1); padding: var(--sp-2) var(--sp-2) 2px; }
    .lab-archive-cards { gap: var(--sp-2); padding: var(--sp-2); }
    .lab-archive-card { min-height: 116px; padding: var(--sp-2); }
    .lab-archive-card-head { gap: var(--sp-1); }
    .lab-archive-card-head > span { width: 30px; height: 30px; font-size: var(--ic-sm); }
    .lab-archive-card-head strong { font-size: var(--fs-cap); }
    .lab-archive-card-head small { font-size: var(--fs-cap); }
    .lab-archive-card > p { margin: var(--sp-1) 0 3px; font-size: var(--fs-body); line-height: 1.2; }
    .lab-archive-card > time { font-size: var(--fs-cap); }
    .lab-book-arrow { font-size: var(--ic-md); }
    .lab-archive-page { margin: 2px var(--sp-2) var(--sp-1); font-size: var(--fs-cap); }
    .lab-potions-content { grid-template-columns: 130px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3); }
    .lab-potion-bottle > span { font-size: calc(var(--ic-xl) + var(--sp-4h)); }
    .lab-potion-stock strong { font-size: var(--fs-h2); }
    .lab-potions-active { margin-top: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-cap); }
    .lab-potions-explain { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-body); }
    .lab-harald-content { grid-template-columns: 145px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-2) var(--sp-4h) var(--sp-3); }
    .lab-harald-message > strong { font-size: var(--fs-h2); }
    .lab-harald-message > p { min-height: 54px; margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-body); line-height: 1.35; }
    .dialog-stage { grid-template-columns: 108px minmax(0, 1fr) 108px; gap: var(--sp-3); }
    .dialog-bubble { padding: var(--sp-3) var(--sp-4); border-width: 3px; border-radius: var(--r-md); }
    .dialog-bubble > strong { font-size: var(--fs-h2); }
    .dialog-bubble > p { min-height: 68px; margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.35; }
    .dialog-controls { gap: var(--sp-2); }
    .dialog-dots { gap: var(--sp-1); }
    .dialog-dots > span { width: 7px; height: 7px; border-width: 1px; }
    .dialog-skip { min-height: var(--btn-h-sm); padding-inline: var(--sp-2); font-size: var(--fs-cap); }
    #dialog-next { min-width: 100px; min-height: var(--btn-h-md); font-size: var(--fs-cap); }
}

@media (max-width: 720px), (max-height: 480px) {
    .lab-subscreen { align-items: flex-start; }
    .lab-press-content { grid-template-columns: 1fr; }
    .lab-research-grid { gap-inline: 8px; }
    .lab-board-slots { grid-template-columns: 1fr; }
    .lab-archive-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-potions-content { grid-template-columns: 1fr; }
    .lab-potion-bottle { display: none; }
    .lab-harald-content { grid-template-columns: 120px minmax(0, 1fr); padding-inline: var(--sp-4); }
    .dialog-stage { grid-template-columns: 84px minmax(0, 1fr) 84px; gap: var(--sp-2); }
}

/* ==========================================================================
   Button-Fundament (Etappe 2, skills/skill_ui_smartphone.md Kap. 5.1)
   --------------------------------------------------------------------------
   Steht bewusst am DATEIENDE und deklariert NUR die Invarianten: Schrift,
   Groesse, Radius, Trefferflaeche, Druckzustand, Fokus, Deaktiviert.
   Farben und Verlaeufe bleiben in den jeweiligen Komponentenregeln weiter
   oben - die will diese Schicht nicht anfassen, nur ihre Masse normieren.

   Vorher: .btn rendert im Handy-Querformat 10,3px gross und 42px hoch.
   Aktuell: 14px und 40px sichtbar; die Trefferflaeche bleibt separat 44px.
   ========================================================================== */

.btn,
.shop-buy,
.shop-cat,
.ach-tab,
.lobby-poster,
.lobby-board-corner,
.share-actions button,
#playground-info-actions > button,
#playground-build-bar button,
#playground-context button,
#playground-info button,
#back-to-lobby-btn,
#level-menu-button,
#chest-menu-btn,
#leaderboard-menu-btn,
#friends-menu-btn,
#gutschein-menu-btn {
    position: relative;
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
    min-height: var(--btn-h-md);
    border-radius: var(--r-pill);
    cursor: pointer;
    /* Trefferflaeche auch dann, wenn die Beschriftung kurz ist ("OK", "✓"). */
    min-width: var(--tap);
    text-align: center;
}

/* ⚠ Pflicht, sobald min-height gesetzt ist: ein <button> zentriert seinen Inhalt
   selbst, ein <a class="btn"> NICHT - dort klebte der Text sonst oben im Kasten
   (aufgefallen an "Zur Hauptseite" auf der Lobbytafel).

   ⚠ Das :not(.hidden) ist zwingend: Selektoren mit id (z.B. "#playground-context
   button", Spezifitaet 1,0,1) schlagen die Regel ".hidden { display: none }"
   (0,1,0) - ohne den Ausschluss wuerden ausgeblendete Buttons sichtbar. */
.btn:not(.hidden),
.shop-buy:not(.hidden),
.shop-cat:not(.hidden),
.ach-tab:not(.hidden),
.lobby-poster:not(.hidden),
.lobby-board-corner:not(.hidden),
.share-actions button:not(.hidden),
#playground-info-actions > button:not(.hidden),
#playground-build-bar button:not(.hidden),
#playground-context button:not(.hidden),
#playground-info button:not(.hidden),
#back-to-lobby-btn:not(.hidden),
#level-menu-button:not(.hidden),
#chest-menu-btn:not(.hidden),
#leaderboard-menu-btn:not(.hidden),
#friends-menu-btn:not(.hidden),
#gutschein-menu-btn:not(.hidden) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Primaeraktion eines Screens: eine Stufe groesser. */
.btn.primary,
#start-button,
#restart-button,
#playground-play-btn {
    font-size: var(--fs-btn-lg);
    min-height: var(--btn-h-lg);
}

/* Sekundaerstil bleibt farblich wie gehabt, nur die Groesse wird normiert -
   die eigene font-size/padding-Zeile in .btn.secondary faellt damit weg. */
.btn.secondary {
    font-size: var(--fs-btn);
    min-height: var(--btn-h-md);
}

/* Reiter und Kategorie-Chips sind dichter, behalten aber ihre 44px
   Trefferflaeche ueber das unsichtbare Overlay. */
.shop-cat,
.ach-tab {
    min-height: var(--btn-h-sm);
    padding-block: var(--sp-2);
}

/* Der harte Unterschatten ist die Signatur des Spiels: was ihn traegt, ist
   drueckbar. Der Druckzustand sinkt genau um den Schattenversatz ab. */
.btn:active,
.shop-buy:not(:disabled):active,
.lobby-poster:active,
#playground-info-actions > button:active,
#playground-build-bar button:active,
#playground-context button:active {
    transform: translateY(4px);
}

/* Tastatur-/Padbedienung muss sichtbar sein. */
.btn:focus-visible,
.shop-buy:focus-visible,
.shop-cat:focus-visible,
.ach-tab:focus-visible,
.lobby-poster:focus-visible,
.lobby-board-corner:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
}

/* Deaktiviert: 55 % Deckkraft, kein Schatten (nicht mehr drueckbar). */
.btn:disabled,
.shop-buy:disabled,
.lobby-poster:disabled,
.lobby-board-corner:disabled,
#playground-info-actions > button:disabled,
#playground-build-bar button:disabled,
#playground-context button:disabled {
    opacity: .55;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Traegt ein Button ein Badge, braucht er rechts Platz - sonst sitzt die Zahl
   auf der Beschriftung (siehe "Errungenschaften & Sammelheft"). */
#chest-menu-btn,
#friends-menu-btn,
#playground-achievements-btn,
#playground-inventory-btn {
    padding-right: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Kleine runde Icon-Buttons: sichtbar duerfen sie klein bleiben, die
   Trefferflaeche muss trotzdem 44px erreichen. Genau der von Material
   empfohlene Weg - ein unsichtbares Overlay statt eines fetten Kreises.
   -------------------------------------------------------------------------- */
.stat-info-btn,
.item-info-btn,
#legend-info-btn,
#legend-close-btn {
    position: relative;
    font-family: var(--ff-ui);
}
.stat-info-btn::after,
.item-info-btn::after,
#legend-info-btn::after,
#legend-close-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
    /* Nur Trefferflaeche, nichts Sichtbares. */
}

/* ==========================================================================
   Panel-/Modal-Geruest (Etappe 3)
   ========================================================================== */
.panel.panel-layout {
    --panel-max: 560px;
    width: min(calc(100% - 2 * var(--sp-4)), var(--panel-max)) !important;
    max-height: 88dvh;
    max-height: min(88dvh, 720px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    animation: none;
}

/* ⚠ Diese Regel ist mit (0,4,0) spezifischer als jede blosse Klasse: ein
   Unterfenster, das hier nicht ausgenommen ist, bekommt die 80 und liegt damit
   HINTER seinem eigenen Hauptfenster (Community 15000, Schmiede 118). */
.overlay:has(> .panel.panel-layout):not(.friends-submodal, .forge-submodal) { z-index: 80; }
#album-lightbox,
#item-info-modal { z-index: 130; }

.panel.panel-w-420 { --panel-max: 420px; }
.panel.panel-w-560 { --panel-max: 560px; }
.panel.panel-w-720 { --panel-max: 720px; }
.panel.panel-w-900 { --panel-max: 900px; }

.panel.panel-layout.panel-opening {
    animation: panelOpenFromTrigger 220ms var(--ease-pop);
    transform-origin: var(--panel-origin-x, 50%) var(--panel-origin-y, 50%);
}

@keyframes panelOpenFromTrigger {
    from { opacity: 0; transform: scale(.82); }
    to { opacity: 1; transform: scale(1); }
}

.panel.panel-layout > .panel-head {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--icon-btn);
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--btn-h-lg);
    padding: var(--sp-2) var(--panel-pad);
    color: var(--c-ink);
    background: var(--c-surface);
    border-bottom: 2px solid rgba(94, 61, 40, .16);
    box-shadow: 0 4px 12px rgba(35, 31, 24, .1);
    text-align: left;
}

.panel.panel-layout > .panel-head h1,
.panel.panel-layout > .panel-head h2 {
    min-width: 0;
    margin: 0;
    color: var(--c-ink);
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: var(--lh-tight);
}

.panel.panel-layout > .panel-body {
    min-height: 0;
    display: block;
    padding: var(--panel-pad);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    color: var(--c-ink);
    background: linear-gradient(160deg, var(--c-surface), var(--c-surface-2));
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    scrollbar-gutter: stable;
}

.panel.panel-layout > .panel-body.has-more,
.panel.panel-layout [data-panel-scroll].has-more,
.lab-window [data-panel-scroll].has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6)), transparent 100%);
}

.panel.panel-layout > .panel-actions,
.panel.panel-layout > .panel-body > .panel-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--panel-pad);
    background: var(--c-surface);
    border-top: 2px solid rgba(94, 61, 40, .16);
    box-shadow: 0 -4px 12px rgba(35, 31, 24, .1);
}

/* Die beiden aelteren Wrapper tragen Hauptteil und Fuss noch gemeinsam in
   .panel-body. Sie nutzen dasselbe Geruest, ohne ihre Etappe-4-Inhalte umzubauen. */
.panel.panel-layout > .panel-body:has(> .panel-main) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
    -webkit-mask-image: none;
    mask-image: none;
}

.panel.panel-layout > .panel-body > .panel-main {
    min-height: 0;
    padding: var(--panel-pad);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.main-menu-panel.panel-layout > .panel-head,
#gameover-screen .panel-layout > .panel-head {
    display: block;
    text-align: center;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}

.panel-close {
    position: relative;
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--soft-white);
    background: var(--c-danger);
    box-shadow: var(--sh-press) #8f2f20;
    font-family: var(--ff-ui);
    font-size: var(--ic-lg);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.panel-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

.panel-close:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #8f2f20;
}

/* Kern-Screens */
.panel.panel-layout.level-panel > .panel-body {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.panel.panel-layout.level-panel > .panel-body::-webkit-scrollbar { display: none; }

.level-panel .level-tree-container {
    min-height: 0;
    height: auto !important;
    overflow: visible;
}

.shop-balance-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-body);
    font-weight: 800;
}

.currency-pill {
    min-width: calc(var(--sp-8) * 2);
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    border-radius: var(--r-pill);
    font-size: var(--fs-body);
    font-weight: 900;
}

#shop-categories,
#playground-shop-cats {
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
}

#shop-items {
    gap: var(--sp-3);
    margin-bottom: 0;
}

.shop-separator {
    margin: var(--sp-4) 0 var(--sp-1);
    padding-top: var(--sp-2);
    border-top: 2px dashed rgba(139, 90, 43, .3);
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-align: center;
}

.chest-shop-card .shop-icon {
    margin-top: var(--sp-3);
}
.shop-item {
    position: relative;
    display: grid;
    grid-template-columns: calc(var(--ic-xl) * 2) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
}

.shop-item .shop-icon {
    display: grid;
    place-items: center;
    width: calc(var(--ic-xl) * 2);
    height: calc(var(--ic-xl) * 2);
    overflow: hidden;
    border-radius: var(--r-md);
    background: rgba(94, 61, 40, .07);
    font-size: var(--ic-xl);
    line-height: 1;
}

.shop-item .shop-icon img,
.shop-item .shop-icon canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shop-item .shop-name {
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

.shop-item .shop-desc,
.shop-effect,
.shop-price-hint,
.shop-stock {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.shop-item .shop-action,
.inventory-item-actions {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: end;
    gap: var(--sp-2);
    margin-left: 0;
}

#inventory-items {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-8) * 8)), 1fr));
    gap: var(--sp-3);
    margin-bottom: 0;
}

.inventory-item-card {
    grid-template-columns: calc(var(--ic-xl) * 2) minmax(0, 1fr) auto;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
}

.inventory-item-icon {
    width: calc(var(--ic-xl) * 2);
    height: calc(var(--ic-xl) * 2);
    border-radius: var(--r-md);
    font-size: var(--ic-xl);
}

.inventory-item-icon canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.inventory-item-info strong {
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

.inventory-item-info span,
.inventory-dog-perk {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.inventory-dog-card strong {
    font-size: var(--fs-body);
}

.inventory-dog-card .inventory-dog-locked,
.dog-level-num,
.dog-level-meters {
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    line-height: var(--lh-body);
}

.dog-level-meters {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.inventory-cat {
    min-width: var(--tap);
    min-height: var(--btn-h-sm);
    padding: var(--sp-2);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-tight);
}

#achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--sp-3);
    margin: var(--sp-2) 0;
    padding: var(--sp-1) var(--sp-2);
}
/* Drei Karten je Reihe, schmalere Fenster fallen auf die Mindestbreite zurueck.
   Ein Grid koennte das nicht: seine letzte Reihe beginnt immer in Spalte 1. */
.achievement-card {
    flex: 0 1 max(calc(var(--sp-8) * 5), calc((100% - 2 * var(--sp-3)) / 3));
    min-width: 0;
}

.achievement-title {
    min-height: 0;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

.achievement-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

/* Lange Einzeltitel (z.B. Ausdauersportler) brechen nur in der Kompaktstufe um. */
@media (max-width: 720px), (max-height: 480px) {
    .achievement-title {
        font-size: var(--fs-sm);
        overflow-wrap: anywhere;
        /* Zwei Zeilen reserviert: sonst steht die Karte mit Umbruch hoeher. */
        min-height: calc(var(--sp-6) + var(--sp-2));
        /* Rechter Freiraum fuers absolute i: Button-Breite plus Abstand. */
        box-sizing: border-box;
        width: 100%;
        padding-right: calc(var(--info-visible) + var(--sp-2));
    }
    /* 26px kuerzere Karte: sonst steht der Abholknopf der ersten Reihe bei
       800x369 genau dann unter der Kante, wenn der Sammelknopf erscheint. */
    .achievement-circle-wrapper {
        width: calc(var(--sp-8) * 2);
        height: calc(var(--sp-8) * 2);
        margin-bottom: var(--sp-2);
    }
    .achievement-circle-inner {
        width: calc(var(--sp-8) * 2 - var(--sp-4));
        height: calc(var(--sp-8) * 2 - var(--sp-4));
    }
    /* Zwei Textzeilen reserviert: sonst waechst die Reihe mit Umbruch. */
    .achievement-text {
        min-height: var(--sp-8);
    }
    .ach-reward { padding-top: var(--sp-2); }
}

.achievements-panel .ach-pane {
    overflow: visible;
}

.panel.panel-layout.achievements-panel > .panel-body {
    display: flex;
    flex-direction: column;
}

.achievements-panel #ach-pane-cards:not(.hidden) {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1 1 auto;
}

.achievements-panel #album-stage {
    min-height: 0;
    height: auto;
}

.album-cat-name,
.album-progress-text {
    font-size: var(--fs-body);
}

.album-cat-sub,
.album-cover-circle .acc-label,
.album-legend,
.album-note {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}

.album-legend .lg-chip,
.album-card .dup-count {
    font-size: var(--fs-cap);
}

#album-lightbox-panel .album-lightbox-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--sp-4);
}

#lb-info {
    min-width: 0;
}

#lb-desc {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

#lb-meta,
#lb-rarity {
    font-size: var(--fs-sm);
}

.item-info-head {
    grid-template-columns: var(--icon-btn) minmax(0, 1fr) !important;
    margin: 0;
    padding-right: var(--panel-pad);
}

.item-info-effect {
    font-size: var(--fs-body);
}

.item-info-text,
.dog-level-summary,
.dog-level-table {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.dog-level-table {
    table-layout: fixed;
}

.dog-level-table td:first-child {
    white-space: normal;
}

.item-info-extra {
    margin-top: var(--sp-3);
}
.item-info-extra .equipment-level-table {
    width: 100%;
}
body.item-info-up #chest-close,
body.item-info-up #chest-screen .panel-close {
    visibility: hidden !important;
    pointer-events: none !important;
}
#item-info-modal.chest-info-open { z-index: 140; }
#item-info-modal.chest-info-open .item-info-text { display: none; }
#item-info-modal.chest-info-open .item-info-extra {
    overflow: visible;
    max-height: none;
    margin-top: var(--sp-2);
}
#item-info-modal.chest-info-open .dog-level-summary {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
}
@media (max-width: 720px), (max-height: 480px) {
    #item-info-modal.chest-info-open .equipment-level-table th,
    #item-info-modal.chest-info-open .equipment-level-table td {
        height: 16px; /* frei: zehn Zeilen im Handy-Infofenster */
        padding: 0 var(--sp-1);
    }
}

/* Kistenlevel-Aufklapper: Fenster plus animierte Restzeilen (grid-rows-Technik). */
.chest-level-more {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--dur-base) ease, visibility var(--dur-base);
}
.chest-level-more.open {
    grid-template-rows: 1fr;
    visibility: visible;
}
.chest-level-more-inner {
    min-height: 0;
    overflow: hidden;
}
.chest-level-toggle {
    margin-top: var(--sp-2);
}

.item-info-panel > .panel-actions .btn {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .panel.panel-layout.panel-opening {
        animation: none;
    }
}

/* ==========================================================================
   Konto, Einstellungen und System-Tore (Etappe 7)
   ========================================================================== */
.panel.panel-layout.system-panel { --panel-max: 720px; }
.panel.panel-layout.system-dialog { --panel-max: 560px; }

/* Dichte Dialogstaffel (Skill Kap. 3.1): Konto-, Passwort- und Code-Fenster sind
   Systemtexte, keine Spielinhalte - sie lesen sich kompakter als der Fliesstext.
   Eingabefelder und Knoepfe behalten ihre Groesse und Trefferflaeche. */
.panel.panel-layout.system-dialog > .panel-body {
    font-size: var(--fs-dialog);
    line-height: var(--lh-body);
}

.panel.panel-layout.system-consequence > .panel-head {
    grid-template-columns: minmax(0, 1fr);
}

.panel.panel-layout.system-consequence > .panel-actions {
    flex-direction: row;
    justify-content: space-between;
}

.panel.panel-layout.system-consequence > .panel-actions.panel-actions-single {
    justify-content: flex-end;
}

/* Bei der Erstvergabe ist „Abbrechen“ verborgen - „Übernehmen“ steht dann allein und gehört
   wie bei panel-actions-single nach rechts, nicht an den linken Rand. */
#name-modal .panel-actions:has(> #name-anon-btn.hidden) {
    justify-content: flex-end;
}

.panel.panel-layout.system-consequence > .panel-actions .btn {
    width: auto;
    min-width: min(100%, 160px);
    margin: 0;
}

.system-actions-three {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.system-actions-three .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding-inline: var(--sp-3);
}

.system-stage {
    position: absolute;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding-top: max(var(--sp-5), env(safe-area-inset-top));
    padding-right: max(var(--sp-5), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-5), env(safe-area-inset-left));
    color: var(--c-on-color);
    background: var(--forest-green-dark);
    text-align: center;
}

.system-stage.hidden { display: none; }
.system-stage-icon { font-size: var(--ic-xl); line-height: 1; }
.system-stage h1,
.system-stage h2 {
    margin: 0;
    color: var(--c-on-color);
    font-size: var(--fs-h1);
}
.system-stage p {
    max-width: 560px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Solange der Ladebildschirm laeuft, nimmt darunter nichts Eingaben an - sonst
   landete der synthetische Klick nach dem Tap auf einem Lobby-Plakat (src/main.js). */
body.app-locked #lobby-screen,
body.app-locked #playground-hud,
body.app-locked #start-screen { pointer-events: none; }

#loading-screen { z-index: 10000; }
#loading-screen .lobby-title { margin: 0; font-size: var(--fs-disp); }
.loading-bar-bg {
    position: relative;
    width: min(72vw, 420px);
    height: var(--sp-5);
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .8);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, .3);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5), var(--sh-card);
}
#loading-bar-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--forest-green), #8bc34a);
    transition: width var(--dur-fast) linear;
}
#loading-percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    color: var(--c-on-color);
    font-size: var(--fs-cap);
    font-weight: 900;
    pointer-events: none;
}
#loading-text {
    min-height: var(--btn-h-sm);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .88);
    font-size: var(--fs-body);
    font-weight: 800;
}
#loading-text.loading-ready {
    min-width: 220px;
    padding-inline: var(--sp-4);
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: var(--r-pill);
    color: var(--c-on-color);
    background: var(--c-primary);
    box-shadow: 0 var(--sh-press-y) 0 var(--forest-green-dark);
    cursor: pointer;
    animation: textPulse 1.2s ease-in-out infinite;
}
#loading-screen.loading-complete { cursor: pointer; }
#loading-screen.loading-leaving { opacity: 0; transition: opacity var(--dur-slow) ease; }

/* Update-Sperre liegt unter den drei Verbindungs-Toren: ohne Netz laesst sich
   ohnehin nichts aktualisieren, und ein geloeschtes Konto wiegt schwerer. */
#update-gate { z-index: 18800; }
#connection-gate { z-index: 19000; }
/* Veralteter Spielstand: ueber der Sitzungswache, unter "Account weg" - wer gar kein
   Konto mehr hat, braucht keinen Sync mehr. */
#cloud-stale-gate { z-index: 19400; }
#session-busy-gate { z-index: 19250; }
#system-confirm-modal { z-index: 19300; }
#account-gone-modal { z-index: 19500; }
.system-gate { background: rgba(25, 31, 32, .88); }

/* Erbt Groesse und Druckverhalten von .btn.primary, faerbt nur golden um.
   4a2b03 auf dem dunklen Verlaufsende (#d99420) = 5,0:1. */
.btn.primary.update-gate-btn {
    border-color: #b76d10;
    color: #4a2b03;
    background: linear-gradient(160deg, #ffe38b, #d99420);
    box-shadow: 0 var(--sh-press-y) 0 #a45d0d;
}

.btn.primary.update-gate-btn:disabled { cursor: wait; }

.update-gate-btn.is-applying::after {
    content: '';
    display: inline-block;
    width: .85em;
    height: .85em;
    margin-left: var(--sp-2);
    vertical-align: -.08em;
    border: .15em solid currentColor;
    border-right-color: transparent;
    border-radius: var(--r-pill);
    animation: appSpin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .update-gate-btn.is-applying::after { animation-duration: 2.4s; }
}

.settings-panel,
.profile-panel,
.profile-picker-panel {
    width: auto;
    max-height: min(88dvh, 720px);
    overflow: hidden;
    text-align: left;
}
.settings-panel > .panel-body { display: grid; gap: var(--sp-3); }
.settings-section {
    margin: 0;
    padding: var(--sp-4);
    border: 2px solid rgba(94, 61, 40, .16);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .72);
    box-shadow: var(--sh-card);
}
.settings-section h2 {
    margin: 0 0 var(--sp-2);
    color: var(--forest-green-dark);
    font-size: var(--fs-h3);
}
.settings-note,
.profile-name-note,
.profile-person-text small,
.profile-person-text .player-activity {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.settings-row {
    min-height: var(--btn-h-sm);
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}
.settings-label,
.settings-value {
    min-width: 0;
    font-size: var(--fs-body);
}
.settings-row input[type="range"] { min-height: var(--btn-h-sm); }
.settings-mute-btn {
    width: var(--btn-h-md);
    height: var(--btn-h-md);
    border-radius: var(--r-pill);
    font-size: var(--ic-sm);
    box-shadow: 0 var(--sh-press-y) 0 rgba(94, 61, 40, .3);
}
.settings-mute-btn:active { transform: translateY(4px); box-shadow: 0 var(--sh-press-in) 0 rgba(94, 61, 40, .3); }
.settings-btn-row { gap: var(--sp-2); }
.settings-btn-row-spaced { margin-top: var(--sp-2); }

#settings-quality,
.settings-display-mode { gap: var(--sp-2); }
#settings-quality button,
.settings-display-mode button,
.import-tab {
    min-height: var(--btn-h-sm);
    border-radius: var(--r-pill);
    font-family: inherit;
    box-shadow: 0 var(--sh-press-y) 0 rgba(94, 61, 40, .22);
}
#settings-quality button:active,
.settings-display-mode button:active,
.import-tab:active { transform: translateY(4px); box-shadow: 0 var(--sh-press-in) 0 rgba(94, 61, 40, .22); }
#settings-quality button b,
.settings-display-mode button b { font-size: var(--fs-body); }
#settings-quality button span,
.settings-display-mode button span { font-size: var(--fs-sm); }
.settings-toggle-row {
    min-height: var(--btn-h-sm);
    font-size: var(--fs-body);
    cursor: pointer;
}
.settings-toggle {
    width: var(--btn-h-md);
    height: var(--btn-h-sm);
}
.settings-toggle .slider::before {
    width: var(--ic-md);
    height: var(--ic-md);
    left: var(--sp-1);
    top: var(--sp-3);
}
.settings-toggle input:checked + .slider::before { transform: translateX(20px); }

.settings-text-action {
    min-height: var(--btn-h-sm);
    margin: var(--sp-2) auto 0;
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-pill);
    color: var(--forest-green-dark);
    background: transparent;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}
.settings-text-action.reset-hint { color: var(--c-danger); }

.system-field {
    display: grid;
    gap: var(--sp-1);
    margin-bottom: var(--sp-3);
}
.system-field label { font-size: var(--fs-body); font-weight: 800; }
.system-field input,
#name-modal input[type="text"],
#import-modal input[type="text"],
#import-modal input[type="password"],
#password-modal input[type="password"],
#gutschein-input,
#waldpost-subject,
#waldpost-text,
#reset-modal input[type="text"],
#import-recovery-code,
.settings-row input[type="number"] {
    width: 100%;
    min-height: var(--btn-h-sm);
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .3);
    border-radius: var(--r-md);
    color: var(--c-ink);
    background: var(--c-surface);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 800;
}
.system-field input { margin: 0; }
#name-modal input[type="text"],
#gutschein-input,
#reset-modal input[type="text"] { text-align: center; }
#import-recovery-code,
#recovery-code-text { font-size: var(--fs-sm); }
.name-warn,
.name-error { font-size: var(--fs-sm); border-radius: var(--r-md); }

/* "Account vorhanden" steht bewusst UNTER der Namensbox statt darin: es ist
   der Ausweg aus der Namensvergabe, nicht eine ihrer Aktionen. Deshalb stapelt das
   Overlay hier ausnahmsweise in der Spalte. */
#name-modal { flex-direction: column; gap: var(--sp-3); }
.name-have-account-btn { flex: none; width: auto; max-width: min(100%, 320px); }

.profile-panel .panel-body { display: grid; gap: var(--sp-3); }
.profile-hero { margin: 0; gap: var(--sp-4); }
.profile-edit-pen {
    width: var(--btn-h-sm);
    height: var(--btn-h-sm);
    flex-basis: var(--btn-h-sm);
    font-size: var(--ic-sm);
}
.profile-avatar-grid { grid-template-columns: repeat(5, minmax(var(--btn-h-md), 1fr)); gap: var(--sp-2); }
.profile-avatar-choice { min-height: var(--btn-h-lg); border-radius: var(--r-md); }
.profile-title-grid { gap: var(--sp-2); }
.profile-title-choice { min-height: var(--btn-h-sm); font-size: var(--fs-sm); }
.profile-picker-panel { max-width: none; max-height: min(88dvh, 720px); }
.profile-picker-hint { min-height: var(--btn-h-sm); margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.profile-stat { min-height: var(--btn-h-sm); border-radius: var(--r-md); font-size: var(--fs-body); }

/* Waldpost-Brief: Betreff und Nachricht erben die Feldstaffel oben, hier stehen nur
   Textflaeche, Absender und Zeichenzaehler. */
.waldpost-panel .panel-body { display: grid; gap: var(--sp-2); }
.waldpost-intro { margin: 0; font-size: var(--fs-body); line-height: var(--lh-text); }
.waldpost-from {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
}
#waldpost-text {
    min-height: calc(4 * var(--sp-6));
    margin: 0;
    text-align: left;
    line-height: var(--lh-text);
    resize: vertical;
}
/* Eingabefelder sind tapbar - volle Trefferflaeche wie im Passwort-Panel. */
#waldpost-subject { min-height: var(--tap); margin: 0; }
/* Ganzer Satz, kein Kurzlabel - deshalb --fs-sm statt --fs-cap. */
.waldpost-count {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: right;
}
/* Restwarnung traegt Text UND Farbe - Farbe allein waere kein Bedeutungstraeger. */
.waldpost-count.waldpost-count-warn { color: var(--c-danger); font-weight: 800; }

/* Fuss des Briefes: sagt, ob der Postbote gleich kommt oder der Brief warten muss. */
.waldpost-hint {
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    color: var(--c-ink);
    background: var(--c-surface-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-text);
}

.lobby-modal-panel { width: auto; max-width: none; }
.lobby-modal-panel h2 { padding-right: 0; }
.share-actions { gap: var(--sp-2); }
.share-actions button {
    min-height: var(--btn-h-md);
    border-radius: var(--r-pill);
    font-size: var(--fs-btn);
}

.reset-dialog > .panel-head h2 { color: var(--c-danger); }
#reset-disabled-reason { color: var(--c-danger); }

/* ========================================================================
   Jubiläumsbrief – helle CSS-Pergamenthaut
   Der Text bleibt im vorhandenen Panel-Scrollbereich. Die stärkeren
   Selektoren überschreiben bewusst das allgemeine Panel-Gerüst, ohne andere
   Dialoge oder den Waldheft-Link anzufassen.
   ======================================================================== */
.panel.panel-layout.anniversary-letter-panel {
    --panel-max: 900px;
    position: relative;
    width: min(92vw, 900px) !important;
    max-width: 900px;
    max-height: var(--anniv-max-height);
    height: var(--anniv-max-height);
    color: #5a3b25;
    background:
        radial-gradient(ellipse at 4% 50%, rgba(174, 122, 43, .17), transparent 25%),
        radial-gradient(ellipse at 96% 48%, rgba(174, 122, 43, .15), transparent 24%),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 248, .74), transparent 30%),
        radial-gradient(circle at 84% 72%, rgba(202, 158, 84, .13), transparent 38%),
        repeating-linear-gradient(7deg, rgba(144, 102, 48, .022) 0 1px, transparent 1px 17px),
        linear-gradient(135deg, #f8efd9 0%, #f4e7c9 50%, #ead6aa 100%);
    border: 2px solid rgba(147, 116, 76, .68);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 65px rgba(15, 24, 17, .48), inset 0 0 45px rgba(137, 94, 35, .15);
    isolation: isolate;
}
.panel.panel-layout.anniversary-letter-panel::before,
.panel.panel-layout.anniversary-letter-panel::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: 4%;
    right: 4%;
    height: 38px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 249, 211, .96), rgba(198, 145, 58, .45));
    border: 1px solid rgba(139, 108, 65, .46);
    border-radius: 50% 48% 42% 45%;
    box-shadow: 0 4px 8px rgba(108, 71, 26, .20), inset 0 -7px 10px rgba(142, 91, 22, .14);
}
.panel.panel-layout.anniversary-letter-panel::before {
    top: -20px;
    transform: rotate(-.7deg);
}
.panel.panel-layout.anniversary-letter-panel::after {
    bottom: -20px;
    transform: rotate(.6deg);
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-head,
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body {
    position: relative;
    z-index: 1;
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--sp-3);
    min-height: 0;
    padding: var(--anniv-head-pad-top) var(--anniv-head-pad-x) var(--anniv-head-pad-bottom);
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
    position: relative;
}
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-title {
    min-width: 0;
    margin: 0;
    padding-right: 0;
    color: #65401f;
    font-family: var(--ff-letter);
    font-size: var(--anniv-title-size);
    font-weight: 700;
    line-height: 1.12;
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body {
    min-height: 0;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--anniv-head-pad-x) var(--anniv-body-pad-bottom);
    color: #5a3b25;
    background: transparent;
    font-family: var(--ff-letter);
    font-size: var(--anniv-body-size);
    font-weight: 400;
    line-height: var(--anniv-line-height);
    text-wrap: pretty;
}
/* Fade endet am Text, nicht im leeren Padding. */
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6) - var(--anniv-body-pad-bottom)), transparent calc(100% - var(--anniv-body-pad-bottom)));
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6) - var(--anniv-body-pad-bottom)), transparent calc(100% - var(--anniv-body-pad-bottom)));
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body::-webkit-scrollbar {
    display: none;
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body p {
    margin: 0 0 var(--anniv-paragraph-gap);
    color: #5a3b25;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body p:first-child,
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body strong {
    font-weight: 700;
}
.panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body .lobby-modal-wish {
    margin-bottom: 0;
    color: #39723e;
    font-weight: 700;
}
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-close {
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    justify-self: end;
    padding: 0;
    color: #fffaf0;
    background: var(--c-danger);
    box-shadow: 0 3px 0 var(--c-danger-dark);
    font-family: var(--ff-ui);
    font-size: var(--anniv-close-size);
    line-height: 1;
}
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-close:hover,
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-close:focus-visible {
    filter: brightness(1.08);
    transform: scale(1.04);
}
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-close:focus-visible {
    outline: 3px solid #7c531c;
    outline-offset: 3px;
}
.panel.panel-layout.anniversary-letter-panel .anniversary-letter-close:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--c-danger-dark);
}

@media (max-width: 720px), (max-height: 480px) {
    .panel.panel-layout.anniversary-letter-panel {
        width: min(94vw, 900px) !important;
        max-height: 88dvh;
        height: auto;
        border-radius: var(--r-md);
        --anniv-head-pad-top: 30px;
        --anniv-head-pad-x: 18px;
        --anniv-head-pad-bottom: var(--sp-1);
        --anniv-title-size: clamp(20px, 5.5vw, 28px);
        --anniv-body-pad-bottom: 28px;
        --anniv-body-size: 14px;
        --anniv-line-height: 1.45;
        --anniv-paragraph-gap: .7rem;
    }
    .panel.panel-layout.anniversary-letter-panel > .anniversary-letter-head {
        gap: var(--sp-2);
    }
    .panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body {
        padding: 0 var(--anniv-head-pad-x) var(--anniv-body-pad-bottom);
        font-size: var(--anniv-body-size);
        line-height: 1.48;
    }
    .panel.panel-layout.anniversary-letter-panel > .anniversary-letter-body p {
        margin-bottom: var(--anniv-paragraph-gap);
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel.panel-layout.anniversary-letter-panel .anniversary-letter-close {
        transition: none;
    }
}

@media (max-width: 720px), (max-height: 480px) {
    .panel.panel-layout.system-consequence > .panel-actions {
        flex-direction: row;
    }
    .system-actions-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .system-actions-three .btn { font-size: var(--fs-sm); }
    .settings-section { padding: var(--sp-3); }
    .profile-title-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-avatar-grid { grid-template-columns: repeat(5, minmax(var(--btn-h-sm), 1fr)); }
}

/* ==========================================================================
   Spielwiesen-HUD und Aktionsflaechen (Etappe 5)
   ========================================================================== */

body.playground-active {
    --pg-edge-top: max(var(--sp-3), env(safe-area-inset-top));
    --pg-edge-right: max(var(--sp-3), env(safe-area-inset-right));
    --pg-edge-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    --pg-edge-left: max(var(--sp-3), env(safe-area-inset-left));
    --pg-main-height: 48px;
}

/* Hauptleiste gehoert zur Handy-Dichtestufe (siehe :root-Block oben). */
@media (max-width: 720px), (max-height: 480px) {
    body.playground-active { --pg-main-height: 40px; }
}

#playground-hud #playground-resources {
    position: absolute;
    top: calc(var(--pg-edge-top) + var(--icon-btn) + var(--sp-2));
    left: var(--pg-edge-left);
    z-index: 44;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: 0;
    transform: none;
    color: inherit;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

.playground-resource {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 96px;
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-3);
    border: 2px solid rgba(255, 255, 255, .78);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    background: rgba(255, 250, 231, .96);
    box-shadow: var(--sh-card);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.playground-resource.diamond { color: var(--c-info-dark); }
.playground-resource-icon { width: var(--ic-md); font-size: var(--ic-md); text-align: center; }

#playground-top-left,
#playground-top-right {
    top: var(--pg-edge-top);
    z-index: 44;
    gap: var(--sp-2);
}

#playground-top-left { left: var(--pg-edge-left); }
#playground-top-right { right: var(--pg-edge-right); }

#playground-back-btn,
#playground-top-right > button {
    position: relative;
    inset: auto;
    z-index: auto;
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    border-radius: var(--r-pill);
    font-size: var(--ic-md);
}

#playground-back-btn::after,
#playground-top-right > button::after,
#pause-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

#playground-hud #playground-top-right #profile-btn,
#playground-hud #playground-top-right #legend-info-btn,
#playground-hud #playground-top-right #settings-btn {
    position: relative;
    inset: auto;
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    font-size: var(--ic-md);
}

#playground-back-btn .playground-action-label { display: none; }

#playground-brand {
    top: var(--pg-edge-top);
    z-index: 43;
    max-width: min(34vw, 280px);
    color: var(--soft-white);
    pointer-events: none;
}

#playground-brand strong { font-size: var(--fs-body); line-height: var(--lh-tight); }
#playground-brand span { font-size: var(--fs-cap); line-height: var(--lh-tight); }

#playground-main-actions {
    position: absolute;
    right: auto;
    bottom: var(--pg-edge-bottom);
    left: 50%;
    z-index: 45;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: var(--sp-2);
    width: min(calc(100% - 2 * var(--sp-4)), 600px);
    padding: 0;
    transform: translateX(-50%);
}

#playground-hud #playground-main-actions > button,
#playground-hud #playground-more-sheet button:not(.panel-close) {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    min-width: 0;
    min-height: var(--pg-main-height);
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid var(--c-secondary-dark);
    border-radius: var(--r-md);
    color: var(--c-on-color);
    background: linear-gradient(160deg, #9b6a45, var(--c-secondary-dark));
    box-shadow: var(--sh-press-y) var(--c-secondary-dark), var(--sh-card);
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
    text-align: center;
    white-space: nowrap;
}

#playground-main-actions .playground-action-icon,
#playground-more-sheet .playground-action-icon {
    display: block;
    font-size: var(--ic-sm);
    line-height: 1;
}

#playground-main-actions .playground-action-label,
#playground-more-sheet .playground-action-label {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
}

#playground-hud #playground-main-actions #playground-shop-btn {
    border-color: var(--c-accent-dark);
    color: #50300c;
    background: linear-gradient(160deg, #f5cf72, var(--c-accent));
    box-shadow: var(--sh-press-y) var(--c-accent-dark), var(--sh-card);
}

#playground-hud #playground-main-actions #playground-inventory-btn {
    border-color: var(--c-metal-dark);
    color: #2c333a;
    background: linear-gradient(160deg, #eff2f4, var(--c-metal));
    box-shadow: var(--sh-press-y) var(--c-metal-dark), var(--sh-card);
}

#playground-hud #playground-build-btn.playground-primary-action {
    min-height: var(--pg-main-height);
    border-color: var(--c-primary-dark);
    background: linear-gradient(160deg, #7fc66d, var(--c-primary));
    box-shadow: var(--sh-press-y) var(--c-primary-dark), 0 0 0 3px rgba(255, 210, 74, .72), var(--sh-card);
    font-size: var(--fs-btn);
}

#playground-build-btn.playground-primary-action .playground-action-icon { font-size: var(--ic-md); }

#playground-hud #playground-main-actions #quests-menu-btn {
    border-color: #18191c;
    color: var(--soft-white);
    background: linear-gradient(160deg, #4b4e55, #202126);
    box-shadow: var(--sh-press-y) #111216, var(--sh-card);
}

#playground-hud #playground-more-btn {
    border-color: var(--c-info-dark);
    background: linear-gradient(160deg, #5f9fc1, var(--c-info));
    box-shadow: var(--sh-press-y) var(--c-info-dark), var(--sh-card);
}

/* ---------- Besuchsmodus (Etappe 7): fremde Spielwiese ansehen ---------- */
/* Im Besuch verschwindet die komplette eigene Bedienleiste -
   es bleibt genau ein Knopf zum Zurueckkehren. */
body.playground-visit #playground-main-actions,
body.playground-visit #playground-more-btn,
body.playground-visit #playground-more-sheet,
body.playground-visit #playground-more-backdrop,
body.playground-visit #playground-build-bar,
body.playground-visit #playground-context,
body.playground-visit #playground-night-skip { display: none !important; }

#playground-visit-title {
    position: absolute;
    top: var(--pg-edge-top);
    left: 50%;
    z-index: 44;
    max-width: min(calc(100% - 2 * var(--sp-4)), 480px);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    color: var(--soft-white);
    background: rgba(19, 33, 21, .62);
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    pointer-events: none;
}

#playground-visit-bar {
    position: absolute;
    bottom: var(--pg-edge-bottom);
    left: 50%;
    z-index: 45;
    width: min(calc(100% - 2 * var(--sp-4)), 600px);
    transform: translateX(-50%);
}

#playground-hud #playground-visit-bar #playground-visit-back {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 var(--sp-4);
    border: 2px solid var(--c-primary-dark);
    border-radius: var(--r-md);
    color: var(--c-on-color);
    background: linear-gradient(160deg, #7fc66d, var(--c-primary));
    box-shadow: var(--sh-press-y) var(--c-primary-dark), 0 0 0 3px rgba(255, 210, 74, .72), var(--sh-card);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 900;
    line-height: var(--lh-tight);
    cursor: pointer;
}

#playground-hud #playground-visit-bar #playground-visit-back:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 currentColor;
}

#playground-main-actions > button:active,
#playground-more-sheet button:not(.panel-close):active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 currentColor;
}

#playground-main-actions .new-badge,
#playground-more-sheet .new-badge {
    top: calc(-1 * var(--sp-2));
    right: calc(-1 * var(--sp-2));
    min-width: 24px;
    height: 24px;
    padding: 0 var(--sp-1);
    border: 2px solid var(--soft-white);
    font-size: var(--fs-cap);
    line-height: 20px;
}

#playground-more-backdrop {
    position: absolute;
    inset: 0;
    z-index: 46;
    background: rgba(19, 33, 21, .52);
    pointer-events: auto;
}

#playground-more-sheet {
    position: absolute;
    bottom: calc(var(--pg-edge-bottom) + var(--pg-main-height) + var(--sp-2));
    left: 50%;
    z-index: 47;
    box-sizing: border-box;
    width: min(calc(100% - 2 * var(--sp-4)), 520px);
    max-height: calc(100dvh - var(--pg-edge-top) - var(--pg-main-height) - 2 * var(--sp-5));
    overflow: hidden;
    border: 3px solid rgba(94, 61, 40, .35);
    border-radius: var(--r-lg);
    color: var(--c-ink);
    background: linear-gradient(160deg, var(--c-surface), var(--c-surface-2));
    box-shadow: var(--sh-modal);
    transform: translateX(-50%);
    pointer-events: auto;
    animation: pgMoreOpen 180ms var(--ease-pop);
}

#playground-more-sheet.hidden,
#playground-more-backdrop.hidden { display: none; }

@keyframes pgMoreOpen {
    from { opacity: 0; transform: translateX(-50%) translateY(var(--sp-4)) scale(.96); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.playground-more-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--icon-btn);
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--btn-h-lg);
    padding: var(--sp-1) var(--sp-3);
    border-bottom: 2px solid rgba(94, 61, 40, .16);
    background: var(--c-surface);
}

.playground-more-head h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-tight); }

#playground-hud #playground-more-close {
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    border-radius: var(--r-pill);
    background: var(--c-danger);
    box-shadow: var(--sh-press-y) var(--c-danger-dark);
    font-size: var(--ic-lg);
}

.playground-more-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-3);
    overflow-y: auto;
}

#playground-hud #playground-more-sheet button:not(.panel-close) {
    min-height: var(--btn-h-md);
    border-color: var(--c-secondary-dark);
}

#playground-hud #playground-more-sheet button:not(.panel-close)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}

body.playground-active #playground-more-sheet:not(.hidden) :is(#gutschein-menu-btn, #leaderboard-menu-btn, #friends-menu-btn) {
    position: relative;
    inset: auto;
    display: flex;
}

#playground-hud #playground-more-sheet #playground-level-btn { background: linear-gradient(160deg, #d89c4f, #9b5e2e); }
#playground-hud #playground-more-sheet #playground-achievements-btn { background: linear-gradient(160deg, #5a98d8, #27649f); }
#playground-hud #playground-more-sheet #gutschein-menu-btn { background: linear-gradient(160deg, #f5cf72, #c8892d); color: #50300c; }
#playground-hud #playground-more-sheet #leaderboard-menu-btn { background: linear-gradient(160deg, #b5bcc4, #747e88); color: #262d32; }
#playground-hud #playground-more-sheet #friends-menu-btn { background: linear-gradient(160deg, #70ad75, #3e7a48); }

#playground-build-bar,
#playground-context {
    right: auto;
    bottom: calc(var(--pg-edge-bottom) + var(--pg-main-height) + var(--sp-3));
    left: 50%;
    z-index: 45;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    width: max-content;
    max-width: min(calc(100% - 2 * var(--sp-4)), 900px);
    min-height: var(--btn-h-lg);
    padding: var(--sp-2);
    overflow-x: auto;
    overflow-y: hidden;
    border: 2px solid rgba(94, 61, 40, .25);
    border-radius: var(--r-lg);
    background: rgba(255, 250, 231, .97);
    box-shadow: var(--sh-card);
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
}

/* ⚠ Ausnahme zu Skill Kap. 4.1 ("oben Mitte traegt keine haeufige Aktion"): die
   Platzieren-Leiste ist ein temporaerer Modus und verdeckte unten genau das Objekt,
   das der Spieler gerade setzt. Oben steht waehrend des Bauens sonst nichts.
   Muss NACH der gemeinsamen Regel stehen - sonst blieben top und bottom zugleich. */
#playground-build-bar {
    top: calc(var(--pg-edge-top) + var(--icon-btn) + var(--sp-3));
    bottom: auto;
}

#playground-build-label,
#playground-context-name {
    flex: 0 0 auto;
    padding: 0 var(--sp-2);
    color: var(--c-ink);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 900;
    line-height: var(--lh-tight);
    white-space: nowrap;
}

#playground-build-bar button,
#playground-context button {
    flex: 0 0 auto;
    min-height: var(--btn-h-md);
    padding: var(--sp-2) var(--sp-4);
    border: 2px solid var(--c-primary-dark);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
    white-space: nowrap;
}

/* Reine Icon-Aktionen der Kontextleiste: quadratisch, Glyphe auf Icon-Skala. */
#playground-context button#playground-context-info,
#playground-context button#playground-context-move,
#playground-context button#playground-context-stash {
    width: var(--tap);
    padding-inline: 0;
    font-size: var(--ic-sm);
}

#playground-build-confirm { background: linear-gradient(160deg, #78b662, var(--c-primary)); }
#playground-build-cancel,
#playground-context-cancel-upgrade { border-color: var(--c-danger-dark); background: linear-gradient(160deg, #ef6a62, var(--c-danger)); }

#playground-hud #playground-night-skip {
    right: var(--pg-edge-right);
    bottom: calc(var(--pg-edge-bottom) + var(--pg-main-height) + var(--sp-3));
    z-index: 44;
    min-height: var(--btn-h-md);
    height: auto;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    font-size: var(--fs-btn);
}

body.playground-active .overlay:has(> .panel.panel-layout) {
    padding: var(--pg-edge-top) var(--pg-edge-right) var(--pg-edge-bottom) var(--pg-edge-left);
}

body.playground-active .overlay:has(> .panel.panel-layout) > .panel.panel-layout {
    max-width: min(calc(100dvw - var(--pg-edge-left) - var(--pg-edge-right)), var(--panel-max)) !important;
    max-height: min(calc(100dvh - var(--pg-edge-top) - var(--pg-edge-bottom)), 720px) !important;
}

.playground-info-panel > .panel-body,
.playground-upgrade-panel > .panel-body,
.playground-cancel-upgrade-panel > .panel-body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

#playground-info-body > :first-child,
.playground-cancel-upgrade-panel > .panel-body > :first-child { margin-top: 0; }
#playground-info-body > :last-child,
.playground-cancel-upgrade-panel > .panel-body > :last-child { margin-bottom: 0; }

#playground-info-actions {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

#playground-info-actions > button {
    width: 100%;
    min-height: var(--btn-h-md);
    border-radius: var(--r-pill);
    font-size: var(--fs-btn);
}

/* Die Aktionen stehen im Fuss wie im Stufen-Fenster - der Rumpf scrollt allein. */
.playground-info-panel > .panel-actions > #playground-info-actions {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}
.playground-info-panel > .panel-actions:has(> #playground-info-actions:empty) { display: none; }

.playground-info-panel.pg-mine-info-panel > .panel-head {
    color: #f3edff;
    background: #35264b;
    border-bottom-color: #6d4f8e;
}

.playground-info-panel.pg-mine-info-panel > .panel-head h2 { color: #f5f0ff; }
.playground-info-panel.pg-mine-info-panel > .panel-body {
    color: #f3edff;
    background: radial-gradient(circle at 78% 13%, rgba(90, 215, 240, .2), transparent 23%), linear-gradient(145deg, #463364, #150e1e 76%);
}

.pg-factory-subtitle,
.pg-info-breite,
.pg-mine-subtitle { font-size: var(--fs-sm); line-height: var(--lh-body); }

.pg-factory-stamp,
.pg-factory-section,
.pg-info-card,
.pg-mine-rate,
.pg-mine-crystal-card,
.sleep-assignment {
    margin-top: var(--sp-3);
    border-radius: var(--r-md);
}

.pg-factory-section,
.pg-info-card,
.pg-mine-crystal-card,
.sleep-assignment { padding: var(--sp-3); }

.pg-factory-label,
.pg-info-label,
.pg-mine-label { font-size: var(--fs-cap); }

.pg-factory-note,
.pg-info-note,
.pg-info-beispiel,
.pg-mine-note,
.pg-level-hint { font-size: var(--fs-sm); line-height: var(--lh-body); }

.pg-factory-row { gap: var(--sp-3); font-size: var(--fs-body); }
.pg-factory-row + .pg-factory-row { margin-top: var(--sp-2); }
.pg-factory-amount,
.pg-info-wert,
.pg-mine-progress { font-size: var(--fs-h2); line-height: var(--lh-tight); }

.pg-level-line {
    margin: var(--sp-3) 0 var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
    font-size: var(--fs-body);
}

.playground-upgrade-panel > .panel-actions,
.playground-cancel-upgrade-panel > .panel-actions {
    justify-content: stretch;
}

.playground-upgrade-panel > .panel-actions > button,
.playground-cancel-upgrade-panel > .panel-actions > button { flex: 1 1 0; }

#playground-upgrade-stats,
#playground-upgrade-duration,
.pg-upgrade-hint,
.pg-upgrade-preview figcaption { font-size: var(--fs-sm); line-height: var(--lh-body); }

#playground-upgrade-confirm .pg-upgrade-back {
    border-color: var(--c-secondary-dark);
    color: var(--c-ink);
    background: linear-gradient(160deg, #efe4cf, #d4b98c);
    box-shadow: var(--sh-press-y) #9e7545, var(--sh-card);
}

body.playground-active:has(.overlay:not(.hidden) > .panel.panel-layout) :is(
    #playground-build-bar,
    #playground-context,
    #playground-night-skip,
    #playground-main-actions,
    #playground-top-left,
    #playground-top-right,
    #playground-resources
) {
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #playground-more-sheet,
    .panel.panel-layout.panel-opening { animation: none; }
}

/* ==========================================================================
   Lobby und Laufbild (Etappe 4)
   ========================================================================== */
#lobby-screen {
    align-items: center;
    justify-content: center;
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    container-type: inline-size;
    overflow: hidden;
}

.lobby-board {
    position: absolute;
    left: 50%;
    bottom: calc(var(--lobby-ground-bottom) + var(--lobby-leg-depth));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-3);
    width: min(calc(100% - var(--sp-6)), 560px);
    min-height: 0;
    max-height: 88dvh;
    max-height: min(88dvh, 560px);
    margin: 0;
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-width: var(--sp-2);
    border-radius: var(--r-xl);
    transform: translateX(-50%);
}

.lobby-board::before {
    inset: var(--sp-2);
    border-radius: var(--r-lg);
}

.lobby-board-leg {
    bottom: calc(0px - var(--lobby-leg-depth) - var(--sp-2));
    width: var(--sp-5);
    height: var(--sp-6);
}

/* Waldpost-Briefkasten: steht rechts neben der Tafel auf derselben Bodenlinie. Die Grafik
   kommt als Canvas-Blit aus render/briefkasten-art.js, das Schild darueber uebernimmt die
   Sprache von _hubLabel am Schwarzen Brett (Sahnepille, brauner Rand, brauner Text). */
.lobby-mailbox {
    position: absolute;
    /* Halbe Tafelbreite - sie ist min(94vw, 560px) bzw. min(100% - --sp-6, 560px). Das min()
       aussen haelt den Kasten auch in ungewoehnlich schmalen Fenstern im Bild. */
    left: min(
        calc(50% + min(47vw, 280px) + var(--sp-2)),
        calc(100% - 80px - max(var(--sp-3), env(safe-area-inset-right)))
    );
    bottom: var(--lobby-ground-bottom);
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    cursor: pointer;
    transition: transform var(--dur-fast) ease;
}

.lobby-mailbox canvas { display: block; }

/* Lagerfeuer zwischen Flocke und dem Waldheft-TV, auf der Bodenlinie. */
.lobby-feuer {
    position: absolute;
    right: min(
        calc(50% + min(47vw, 280px) + var(--sp-2) + 92px + var(--sp-4)), /* frei: RETRO_PC_PX */
        calc(100% - 80px - max(var(--sp-3), env(safe-area-inset-left))) /* frei: FEUER_PX */
    );
    bottom: var(--lobby-ground-bottom);
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    cursor: pointer;
    z-index: 3;
    pointer-events: auto;
    transition: transform var(--dur-fast) ease;
}
.lobby-feuer canvas { display: block; }
.lobby-feuer-label {
    display: grid;
    justify-items: center;
    gap: 0;
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid var(--brown-dark);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    background: var(--c-surface);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
    white-space: normal;
    text-align: center;
    max-width: calc(var(--sp-8) * 3);
    order: -1;
}
.lobby-feuer-tage,
.lobby-feuer-bonus {
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
}
.lobby-feuer-bonus {
    font-weight: 600;
    color: var(--forest-green-dark);
}
.lobby-feuer:hover { transform: translateY(-2px) scale(1.04); }
.lobby-feuer:active { transform: translateY(1px) scale(.97); }
.lobby-feuer:focus-visible { outline: 3px solid var(--c-focus); outline-offset: var(--sp-1); }
.lobby-feuer.is-zuendet { animation: lobby-feuer-zuend 0.7s ease; }
@keyframes lobby-feuer-zuend {
    0% { transform: scale(1); }
    35% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.panel.panel-layout.streak-sheet-panel { --panel-max: 560px; }
.streak-invite,
.streak-hinweis,
.streak-stand,
.streak-schutz,
.streak-schluss {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-body);
    color: var(--c-ink);
}
.streak-stand {
    font-weight: 800;
    font-size: var(--fs-h3);
    color: var(--forest-green-dark);
}
.streak-schutz, .streak-hinweis { color: var(--c-ink-soft); }
.streak-schluss { color: var(--c-ink-soft); }
.streak-schluss.is-done { color: var(--forest-green-dark); }
.streak-dots {
    display: flex;
    gap: var(--sp-2);
    justify-content: center;
    margin: 0 0 var(--sp-4);
}
.streak-dot {
    width: var(--ic-md);
    height: var(--ic-md);
    border-radius: var(--r-pill);
    border: 2px solid var(--brown-dark);
    background: var(--c-surface-2);
}
.streak-dot.is-on {
    background: var(--gold);
    border-color: var(--brown-dark);
}

.lobby-mailbox-label {
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid var(--brown-dark);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    background: var(--c-surface);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.lobby-mailbox:hover { transform: translateY(-2px) scale(1.04); }
.lobby-mailbox:active { transform: translateY(1px) scale(.97); }
.lobby-mailbox:focus-visible { outline: 3px solid var(--c-focus); outline-offset: var(--sp-1); }

@keyframes lobby-wiki-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Waldheft-Roehrenfernseher: links neben der Tafel, etwas tiefer als der Briefkasten. */
.lobby-wiki {
    position: absolute;
    right: min(
        calc(50% + min(47vw, 280px) + var(--sp-2)),
        calc(100% - 112px - max(var(--sp-3), env(safe-area-inset-left)))
    );
    bottom: calc(var(--lobby-ground-bottom) - var(--sp-3));
    display: grid;
    justify-items: center;
    gap: var(--sp-1);
    min-height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-md);
    background: none;
    cursor: pointer;
    transition: transform var(--dur-fast) ease;
    animation: lobby-wiki-idle 2.4s ease-in-out infinite;
}

.lobby-wiki canvas { display: block; }

.lobby-wiki-label {
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid var(--brown-dark);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    background: var(--c-surface);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.lobby-wiki:hover {
    animation: none;
    transform: translateY(-4px) scale(1.08);
}
.lobby-wiki:active { transform: translateY(1px) scale(.97); }
.lobby-wiki:focus-visible { outline: 3px solid var(--c-focus); outline-offset: var(--sp-1); }

@media (prefers-reduced-motion: reduce) {
    .lobby-wiki { animation: none; }
    .lobby-feuer.is-zuendet { animation: none; }
}

#lobby-screen .lobby-title,
#lobby-screen .lobby-welcome,
#lobby-screen .lobby-posters {
    grid-column: 1 / -1;
}

#lobby-screen .lobby-title {
    margin: 0;
    color: #2e1a0e !important;
    font-family: var(--ff-ui);
    font-size: var(--fs-disp);
    font-weight: 900;
    line-height: var(--lh-tight);
    letter-spacing: normal;
    white-space: nowrap;
}

.lobby-welcome {
    min-height: 0;
    margin: 0;
    color: #51311c;
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-tight);
    animation: none;
}

.lobby-posters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    width: 100%;
}

/* Die eine Hauptaktion steht ueber den beiden Nebenplakaten. */
#lobby-screen .lobby-primary-btn { grid-column: 1 / -1; }

#lobby-screen .lobby-poster {
    width: 100%;
    min-height: var(--btn-h-lg);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.lobby-poster::before,
.lobby-poster::after {
    width: var(--sp-2);
    height: var(--sp-2);
    border-radius: var(--r-pill);
}


#lobby-screen .lobby-board-corner {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    box-sizing: border-box;
    width: 100%;
    height: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-tight);
    white-space: nowrap;
    transform: none;
}

#lobby-screen .lobby-board-corner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}

@container (max-width: 740px) { /* frei: Viewport trennt Narrow-Portrait von den Referenzformaten */
    #lobby-screen .lobby-board-corner {
        grid-column: 1 / -1;
        width: fit-content;
        justify-self: center;
    }
}

#hud {
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-bottom: var(--sp-3);
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
}

.hud-col,
.hud-row {
    gap: var(--sp-2);
}

.hud-item {
    min-height: var(--tap);
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    color: var(--c-ink);
    background: var(--c-surface);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 900;
    line-height: var(--lh-tight);
}

.hud-item .icon,
#record-run-badge .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ic-md);
    font-size: var(--ic-md);
    line-height: 1;
}

.hud-item .unit {
    margin-left: 0;
    font-size: var(--fs-cap);
    line-height: var(--lh-tight);
}

#pause-button {
    position: relative;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    font-size: var(--ic-md);
    line-height: 1;
}

.badge {
    min-height: var(--sp-6);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
}

#rainbow-badge { background: linear-gradient(45deg, rgba(255, 100, 100, .92), rgba(100, 100, 255, .92)); }
#slowmo-badge { background: linear-gradient(45deg, #00b4db, #0083b0); }
#boost-badge { background: linear-gradient(45deg, #ff9500, #ff3b30); }

#record-bar-container {
    top: max(var(--sp-3), env(safe-area-inset-top));
    gap: var(--sp-1);
}

#record-bar-remaining,
#record-bar-percent {
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.record-bar-row {
    gap: var(--sp-2);
}

#record-bar-track {
    width: clamp(160px, 30vw, 300px);
    height: var(--sp-4);
    border-radius: var(--r-pill);
}

#record-run-badge {
    top: max(var(--sp-3), env(safe-area-inset-top));
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 900;
    line-height: var(--lh-tight);
}

#record-surplus {
    font-size: var(--fs-body);
}

#toast {
    max-width: calc(100% - var(--sp-8));
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-lg); /* Einzeiler bleibt Pille, Mehrzeiler wird Rechteck statt Kreis. */
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-tight);
    text-align: center;
}

#pause-hint {
    top: max(calc(var(--sp-8) + var(--sp-4)), env(safe-area-inset-top));
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-tight);
}

#center-toast {
    max-width: calc(100% - var(--sp-8));
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    font-family: var(--ff-ui);
    font-size: var(--fs-h3);
    font-weight: 900;
    line-height: var(--lh-tight);
    transform: translate(-50%, -40%) scale(.92);
}

#center-toast.show {
    transform: translate(-50%, -50%) scale(1);
}

#center-toast-subtitle {
    margin-top: var(--sp-1);
    font-size: var(--fs-sm);
    font-weight: 600;
}

#countdown-screen {
    z-index: 1000;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: none;
}

#countdown-number {
    color: var(--soft-white);
    font-family: var(--ff-ui);
    font-size: calc(var(--fs-disp) + var(--fs-disp));
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 40px rgba(255, 255, 255, .3);
}

#countdown-number.countdown-pop {
    animation: popIn 220ms var(--ease-pop);
}

.btn.danger {
    color: var(--soft-white);
    background: linear-gradient(160deg, var(--c-danger), var(--c-danger-dark));
    box-shadow: var(--sh-press) var(--c-danger-dark), var(--sh-card);
}

.btn.danger:active {
    box-shadow: 0 1px 0 var(--c-danger-dark);
}

.pause-panel > .panel-head {
    display: block;
    text-align: center;
}

.panel.panel-layout.pause-panel { background: var(--c-surface); }

.pause-panel .pause-warning {
    max-width: 34em;
    margin: 0 auto;
    color: var(--c-ink-soft);
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-text);
    text-align: center;
}

.pause-panel .pause-warning strong {
    display: block;
    margin-top: var(--sp-2);
    color: var(--c-ink);
    font-weight: 800;
}

.panel.panel-layout.pause-panel > .panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.panel.panel-layout.pause-panel > .panel-actions .btn,
.panel.panel-layout.feature-intro-panel > .panel-actions .btn,
#gameover-screen > .panel-layout > .panel-actions .btn {
    margin: 0;
    min-height: var(--btn-h-lg);
    font-size: var(--fs-btn);
}

.panel.panel-layout.pause-panel > .panel-actions .btn.primary,
.panel.panel-layout.feature-intro-panel > .panel-actions .btn.primary,
#gameover-screen > .panel-layout > .panel-actions .btn.primary {
    font-size: var(--fs-btn-lg);
}
/* GameOver-Fuss einschliesslich Primaeraktion auf einer Stufe. */
#gameover-screen > .panel-layout > .panel-actions .btn,
#gameover-screen > .panel-layout > .panel-actions .btn.primary {
    font-size: var(--fs-btn);
    padding: var(--sp-3) var(--sp-5);
}

.panel.panel-layout.pause-panel > .panel-actions .btn,
.panel.panel-layout.pause-panel > .panel-actions .btn.primary {
    min-height: var(--btn-h-lg);
    font-size: var(--fs-btn);
}

/* RB-Pause-Fuss auf einer Stufe (gleiche Hoehen/Flucht). */
#rb-pause > .panel-layout > .panel-actions .btn,
#rb-pause > .panel-layout > .panel-actions .btn.primary {
    min-height: var(--btn-h-lg);
    font-size: var(--fs-btn);
    padding: var(--sp-3) var(--sp-5);
}

/* App-Hinweis-Fuss wie GameOver auf einer Stufe. */
#app-hinweis-modal .panel-actions .btn,
#app-hinweis-modal .panel-actions .btn.primary {
    font-size: var(--fs-btn);
    padding: var(--sp-3) var(--sp-5);
}

#gameover-screen .panel-layout > .panel-head {
    padding: var(--sp-2) var(--panel-pad);
}

#gameover-screen .logo {
    margin: 0 0 var(--sp-1);
    font-size: var(--ic-lg);
    animation: none;
}

#gameover-screen .panel-head h1 {
    font-size: var(--fs-h2);
}

#gameover-screen .subtitle {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
}

#gameover-screen .panel-main {
    display: grid;
    gap: var(--sp-2);
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

/* GameOver-Koerper scrollt selbst, damit der Verlaufshinweis greift. */
#gameover-screen .panel-body {
    display: block;
    overflow-y: auto;
}
#gameover-screen .panel-body.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6)), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sp-6)), transparent 100%);
}

#gameover-screen .stats-row,
#gameover-screen .stats-row.small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-2);
    margin: 0;
}

#gameover-screen .stat,
#gameover-screen .stats-row:first-of-type .stat:nth-child(3),
#gameover-screen .stats-row.small:last-of-type .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .15);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .75);
    box-shadow: none;
}

#gameover-screen .stat-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-tight);
}

#gameover-screen .stat-value,
#gameover-screen .stats-row:first-of-type .stat:nth-child(3) .stat-value,
#gameover-screen .stats-row.small:last-of-type .stat .stat-value {
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

#gameover-screen .record {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
}

#gameover-screen > .panel-layout > .panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#gameover-screen #restart-button {
    grid-column: auto;
    order: 0;
}

#gameover-screen #cert-button {
    grid-column: 1 / -1;
    order: 3;
}

.treat-breakdown-panel > .panel-body {
    font-size: var(--fs-body);
}

#treat-breakdown-list {
    margin: 0 0 var(--sp-3);
}

#treat-breakdown-list li {
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

#treat-breakdown-total {
    margin: 0;
    font-size: var(--fs-h3);
}

.feature-intro-panel > .panel-head {
    display: block;
    text-align: center;
}

.feature-intro-icon {
    margin: 0;
    width: auto;
    font-size: var(--ic-lg);
    letter-spacing: 0;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.feature-intro-panel > .panel-body {
    display: grid;
    gap: var(--sp-2);
}

.feature-intro-panel > .panel-body p {
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 600;
    line-height: var(--lh-text);
    text-align: center;
}

.feature-intro-panel > .panel-actions {
    justify-content: stretch;
}

/* ==========================================================================
   Community (Etappe 6)
   ========================================================================== */
.panel.panel-layout.community-panel {
    --panel-max: 720px;
    overflow: hidden;
}

.panel.panel-layout.community-dialog {
    --panel-max: 560px;
    overflow: hidden;
}

.community-panel > .panel-body,
.community-dialog > .panel-body {
    padding: var(--sp-3) var(--panel-pad);
}

.community-tabs,
#lb-tabs.community-tabs {
    min-height: var(--btn-h-sm);
    margin: 0 0 var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.community-tabs > button,
#lb-tabs.community-tabs > button {
    min-width: var(--tap);
    min-height: var(--btn-h-sm);
    padding: var(--sp-2) var(--sp-1);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
    white-space: nowrap;
}

.community-tabs:has(> :nth-child(5)) > button {
    flex: 0 0 23%;
}

#lb-countdown {
    margin: 0 0 var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
}

#lb-body {
    margin: 0;
    overflow: visible;
}

.lb-row,
.friend-row,
.wg-card,
.news-row {
    min-height: var(--btn-h-lg);
    margin: var(--sp-2) 0;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
    border-radius: var(--r-md);
    background: var(--c-surface);
    font-size: var(--fs-body);
}

.lb-name {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 800;
}

.lb-rank,
.lb-score,
.friend-status,
.wg-card-meta,
.news-sub {
    font-size: var(--fs-sm);
}

.lb-profile-avatar,
.wg-row-icon {
    flex: 0 0 var(--ic-xl);
    width: var(--ic-xl) !important;
    height: var(--ic-xl) !important;
}

.lb-row .wg-icon {
    flex: 0 0 var(--ic-xl);
    width: var(--ic-xl) !important;
    height: var(--ic-xl) !important;
    margin-right: 0;
}

.quests-body {
    gap: var(--sp-4);
    padding: 0;
    overflow: visible;
}

.quests-body section {
    gap: var(--sp-2);
}

.quests-body h2,
.quests-current-heading h2 {
    font-size: var(--fs-h3);
}

.quests-current-heading {
    min-height: var(--btn-h-sm);
    gap: var(--sp-2);
}

.quest-reset-timer {
    font-size: var(--fs-sm);
}

.quest-list-row {
    display: grid;
    grid-template-columns: var(--ic-xl) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-3);
    min-height: calc(var(--btn-h-lg) + var(--sp-4));
    padding: var(--sp-3);
    border: 2px solid rgba(94, 61, 40, .18);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}

.quest-list-row.is-complete {
    border-color: var(--c-accent);
    background: #fff7d4;
}

.quests-rarity {
    padding: var(--sp-2);
    border: 1px solid rgba(94,61,40,.14);
    border-radius: var(--r-md);
    background: rgba(255,253,248,.48);
}
.quests-rarity > h3 {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
}
.quest-list-row.quest-rare { border-color: #6d91ad; }
.quest-list-row.quest-legendary {
    border-color: #c89b28;
    background-image: linear-gradient(120deg, rgba(255,239,160,.18), rgba(255,255,255,.1));
    box-shadow: inset 0 0 0 1px #fff0a0, var(--sh-card);
}
.quest-rarity-badge {
    justify-self: start;
    padding: 1px var(--sp-2);
    border: 1px solid #8c9399;
    border-radius: var(--r-pill);
    color: #4d555c;
    background: #e8ebed;
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: var(--lh-tight);
}
.quest-rare .quest-rarity-badge { border-color: #6d91ad; color: #34536a; background: #e3f0f5; }
.quest-legendary .quest-rarity-badge { border-color: #c89b28; color: #634208; background: #fff0a9; }

.quest-list-icon {
    width: var(--ic-xl);
    font-size: var(--ic-lg);
    line-height: 1;
    text-align: center;
}

.quest-list-copy {
    min-width: 0;
    display: grid;
    gap: var(--sp-1);
}

.quest-list-copy > strong {
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.quest-progress-text,
.quest-status {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.quest-status-ready { color: #76540c; }
.quest-status-done { color: var(--forest-green-dark); }

.quest-progress {
    height: var(--sp-2);
    border-radius: var(--r-pill);
}

.quest-card-action {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.quest-card-action .quest-collect-btn {
    width: auto;
    min-height: var(--btn-h-md);
    margin: 0;
    padding-inline: var(--sp-3);
    color: var(--c-ink);
    background: #f2c94c;
    box-shadow: 0 5px 0 #b98517;
}

.quest-info-btn,
.quest-dev-complete-btn,
.friend-icon-btn,
.friend-check,
.wg-level-info-btn {
    position: static;
    display: grid;
    place-items: center;
    flex: 0 0 var(--tap);
    width: var(--tap);
    height: var(--tap);
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0;
    transform: none;
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--ic-sm);
    line-height: 1;
}

.quest-info-btn,
.wg-level-info-btn {
    border: 2px solid #5e3d28;
    color: var(--soft-white);
    background: var(--c-secondary);
    box-shadow: 0 5px 0 var(--brown-dark);
}

.quest-dev-complete-btn {
    border: 2px solid var(--forest-green-dark);
    box-shadow: 0 5px 0 var(--forest-green-dark);
}

.quest-info-btn:active,
.quest-dev-complete-btn:active,
.friend-icon-btn:active,
.friend-check:active,
.wg-level-info-btn:active {
    transform: translateY(4px);
    box-shadow: none;
}

.friends-actions {
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
}

.friends-actions .btn,
.wg-actions .btn {
    min-height: var(--btn-h-lg);
    margin: 0;
    font-size: var(--fs-btn);
}

.friend-delete-btn,
.news-claim-all {
    min-height: var(--btn-h-md);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
}

.friend-row .profile-person {
    min-width: 0;
    flex: 1 1 auto;
}

.friend-row .profile-avatar {
    flex: 0 0 var(--ic-xl);
    width: var(--ic-xl) !important;
    height: var(--ic-xl) !important;
}

.friend-generic-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 var(--ic-xl);
    width: var(--ic-xl);
    height: var(--ic-xl);
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
    font-size: var(--ic-md);
    line-height: 1;
}

.friend-name,
.wg-card-name,
.news-title {
    font-size: var(--fs-body);
    font-weight: 800;
}

.friend-search-row {
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
}

.friend-search-row input,
#wg-create-name,
#wg-settings-name {
    min-height: var(--btn-h-md);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-body);
}

.friend-search-row .btn {
    min-height: var(--btn-h-md);
    margin: 0;
    font-size: var(--fs-btn);
}

.wg-actions,
.wg-profile-actions {
    gap: var(--sp-2);
}

.wg-banner {
    gap: var(--sp-3);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--r-md);
}

.wg-icon-picker {
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
}

.wg-icon-choice {
    min-width: var(--btn-h-lg);
    min-height: var(--btn-h-lg);
    border-radius: var(--r-md);
}

.wg-toggle-row {
    gap: var(--sp-2);
}

.wg-toggle {
    min-height: var(--btn-h-md);
    margin: 0;
    color: var(--c-ink);
    background: transparent;
    border: 2px solid rgba(94, 61, 40, .3);
    box-shadow: 0 5px 0 rgba(94, 61, 40, .3);
    font-size: var(--fs-btn);
}

.wg-toggle.active {
    color: var(--soft-white);
    background: var(--c-secondary);
}

.wg-card {
    box-shadow: var(--sh-card);
}

.news-row {
    display: grid;
    grid-template-columns: var(--ic-xl) minmax(0, 1fr) auto;
}

.news-symbol {
    width: var(--ic-xl);
    font-size: var(--ic-md);
}

.community-dialog .quest-rewards {
    gap: var(--sp-2);
    margin: var(--sp-2) 0 0;
}

.quest-reward-row {
    min-height: var(--btn-h-md);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-md);
}

.panel.panel-layout.consequence-dialog > .panel-actions {
    flex-direction: row;
    justify-content: space-between;
}

.panel.panel-layout.consequence-dialog > .panel-actions .btn,
.wg-detail-actions .btn {
    width: auto;
    margin: 0;
}

.wg-detail-actions:not(:has(.btn:not(.hidden))) {
    display: none;
}

@media (max-width: 720px), (max-height: 480px) {
    .quest-list-row {
        grid-template-columns: var(--ic-lg) minmax(0, 1fr) auto;
        gap: var(--sp-2);
        padding: var(--sp-2);
    }

    .quest-list-icon {
        width: var(--ic-lg);
        font-size: var(--ic-md);
    }

    .quest-card-action .quest-collect-btn {
        padding-inline: var(--sp-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lobby-start-update,
    .lobby-start-tutorial,
    .badge,
    #record-run-badge,
    #countdown-number.countdown-pop,
    .treat-bonus-pop {
        animation: none;
    }
}

/* ===========================================================================
   Labor, Kisten und Zeremonien (Etappe 8)
   ========================================================================== */
.panel.panel-layout.ceremony-dialog,
.panel.panel-layout.research-info-panel { --panel-max: 560px; }

.panel.panel-layout.ceremony-dialog > .panel-head,
.panel.panel-layout.research-info-panel > .panel-head {
    grid-template-columns: minmax(0, 1fr);
}

.panel.panel-layout.ceremony-dialog > .panel-actions,
.panel.panel-layout.research-info-panel > .panel-actions {
    flex-direction: row;
    justify-content: space-between;
}

.panel.panel-layout.ceremony-dialog > .panel-actions.panel-actions-single,
.panel.panel-layout.research-info-panel > .panel-actions.panel-actions-single {
    justify-content: flex-end;
}

.panel.panel-layout.ceremony-dialog > .panel-actions .btn,
.panel.panel-layout.research-info-panel > .panel-actions .btn {
    width: auto;
    margin: 0;
}

#rb-welcome.overlay,
#rb-pause.overlay {
    z-index: 160;
}

.rb-hint {
    margin: var(--sp-3) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    opacity: 1;
}

.chest-panel { width: auto; }
.chest-panel > .panel-body { display: grid; gap: var(--sp-3); }
#chest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
}
.chest-card {
    position: relative;
    display: grid;
    grid-template-rows: 80px auto auto;
    align-items: center;
    justify-items: center;
    min-width: 0;
    min-height: 0;
    padding: calc(var(--sp-3) + 22px) var(--sp-3) var(--sp-3); /* frei: 22px Badgehoehe */
    border: 2px solid color-mix(in srgb, var(--c-ink) 20%, transparent);
    border-radius: var(--r-md);
    background: var(--c-surface);
    box-shadow: var(--sh-card);
}
.chest-card.has-stock {
    border-color: var(--c-accent);
    background: linear-gradient(160deg, var(--c-surface), var(--c-surface-2));
    box-shadow: 0 var(--sh-press-y) 0 var(--c-accent-dark), var(--sh-card);
}
.chest-card.has-stock:active {
    transform: translateY(4px);
    box-shadow: 0 var(--sh-press-in) 0 var(--c-accent-dark), var(--sh-card);
}

.chest-art {
    width: 80px;
    max-height: 80px;
    object-fit: contain;
}
.chest-name {
    margin: var(--sp-1) 0 0;
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: 800;
}
.chest-hint {
    margin: var(--sp-1) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-tight);
    opacity: 1;
}
.chest-card-kopf {
    position: absolute;
    top: var(--sp-1);
    left: var(--sp-1);
    right: var(--sp-1);
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    pointer-events: none;
}
.chest-card-kopf .item-info-btn {
    margin-left: auto;
    pointer-events: auto;
}
.chest-card-kopf .equipment-level-badge {
    position: static !important;
    pointer-events: none;
}
.chest-card-kopf .chest-count {
    pointer-events: none;
}
.chest-count {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: auto;
    min-height: 20px;
    /* em: der Pillenradius ist die halbe Hoehe und waechst mit der Schrift (Groessenregler). */
    padding: var(--sp-1) 0.85em;
    border-radius: var(--r-pill);
    background: var(--c-danger);
    font-size: var(--fs-cap);
    line-height: 1;
    /* Auf sehr schmalen Karten schrumpft die Pille - dann kuerzen statt herauslaufen. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chest-inhalt {
    margin: var(--sp-1) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    opacity: 1;
}

#chest-fx-continue,
#rainbow-fx-continue {
    right: max(var(--sp-4), env(safe-area-inset-right));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    min-width: 160px;
    width: auto;
}
#rainbow-fx-hint {
    bottom: max(var(--sp-8), env(safe-area-inset-bottom));
    max-width: calc(100% - 2 * var(--sp-4));
    color: var(--c-on-color);
    font-size: var(--fs-body);
    text-align: center;
    white-space: normal;
}

#rb-hud {
    gap: var(--sp-3);
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
}
#rb-stars,
#rb-timer,
#rb-hearts {
    min-height: var(--btn-h-sm);
    display: flex;
    align-items: center;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-surface) 92%, transparent);
    box-shadow: var(--sh-card);
}
#rb-stars { gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); font-size: var(--ic-md); }
#rb-timer { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-h2); font-weight: 900; }
#rb-hearts { gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); font-size: var(--ic-md); }

#rb-joystick {
    border-color: color-mix(in srgb, var(--c-on-color) 90%, transparent);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-info) 28%, transparent);
    box-shadow: 0 0 0 var(--sp-2) color-mix(in srgb, var(--c-on-color) 12%, transparent), var(--sh-card);
}
#rb-joystick-dot {
    border: 3px solid color-mix(in srgb, var(--c-info) 45%, transparent);
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--c-on-color) 96%, transparent);
}

#lab-back-btn {
    left: max(var(--sp-4), env(safe-area-inset-left));
    bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    min-width: 160px;
    min-height: var(--btn-h-md);
    padding: 0 var(--sp-4);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 800;
}
#lab-action-status {
    top: max(var(--sp-3), env(safe-area-inset-top));
    min-width: 160px;
    padding: var(--sp-2) var(--sp-4);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
}
.lab-subscreen {
    align-items: center;
    padding-top: max(var(--sp-3), env(safe-area-inset-top));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    overflow: hidden;
}
.lab-window {
    width: min(calc(100% - 2 * var(--sp-4)), 900px);
    max-height: min(88dvh, 720px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: var(--r-lg);
    font-family: var(--ff-ui);
}
.lab-window-head {
    position: relative;
    z-index: 3;
    align-items: center;
    gap: var(--sp-3);
    min-height: var(--btn-h-lg);
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-info-dark);
    box-shadow: var(--sh-card);
}
.lab-window-kicker {
    margin: 0 0 var(--sp-1);
    font-size: var(--fs-cap);
}
.lab-window-head h1 {
    margin: 0;
    font-family: var(--ff-ui);
    font-size: var(--fs-h2);
    font-weight: 900;
}
.lab-window-close {
    width: var(--icon-btn);
    height: var(--icon-btn);
    padding: 0;
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--ic-lg);
    font-weight: 900;
    box-shadow: 0 var(--sh-press-y) 0 var(--c-ink);
}
.lab-window-close:active { transform: translateY(4px); box-shadow: 0 var(--sh-press-in) 0 var(--c-ink); }
.lab-window-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.lab-press-content { padding: var(--sp-4); gap: var(--sp-3); }
.lab-press-machine,
.lab-press-upgrade { border-radius: var(--r-md); }
.lab-press-machine { padding: var(--sp-4); }
.lab-press-wallet,
.lab-detail-effect,
.lab-detail-facts > div,
.lab-board-slot,
.lab-board-queue,
.lab-potions-active { border-radius: var(--r-md); }
.lab-press-slider { min-height: var(--btn-h-sm); }
.lab-primary-action,
.lab-press-upgrade > button,
.lab-detail-actions > button,
.lab-board-cancel,
.lab-board-rush,
.lab-board-queue > button,
.lab-book-arrow,
#dialog-next,
.dialog-skip,
.lab-detail-back,
.lab-info-dot,
.lab-info-btn {
    min-width: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    border-radius: var(--r-pill);
    font-family: var(--ff-ui);
    font-size: var(--fs-btn);
    font-weight: 800;
}
.lab-primary-action,
.lab-press-upgrade > button,
.dialog-skip,
#dialog-next { min-height: var(--btn-h-md); }
.lab-info-dot,
.lab-info-btn { width: var(--btn-h-sm); height: var(--btn-h-sm); padding: 0; }
.lab-action-hint,
.lab-research-intro,
.lab-detail-status,
.lab-board-status,
.lab-potions-explain,
.lab-harald-message > p { font-size: var(--fs-body); line-height: var(--lh-body); }
.lab-research-list,
.lab-research-detail,
.lab-board-window > .lab-window-body,
.lab-archive-window > .lab-window-body { padding: var(--sp-4); }
.lab-research-grid { gap: var(--sp-3); }
.lab-research-item > strong { font-family: var(--ff-ui); font-size: var(--fs-body); }
.lab-research-item > small { min-height: var(--ic-sm); font-size: var(--fs-sm); }
.lab-detail-back { padding: 0 var(--sp-3); }
.lab-detail-hero { gap: var(--sp-4); }
.lab-detail-ring { width: 120px; height: 120px; padding: var(--sp-3); }
.lab-detail-ring::before { inset: var(--sp-3); }
.lab-detail-ring > span { font-size: var(--ic-xl); }
.lab-detail-hero h2 { font-family: var(--ff-ui); font-size: var(--fs-h2); }
.lab-detail-actions { gap: var(--sp-3); }
.lab-board-slots { padding: 0; gap: var(--sp-3); }
.lab-board-status { margin: var(--sp-3) 0 0; }
.lab-board-cancel,
.lab-board-rush { font-size: var(--fs-sm); }
.lab-archive-book { padding: 0; gap: var(--sp-2); }
.lab-book-arrow { width: var(--btn-h-md); }
.lab-archive-page { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); }
.lab-potions-window,
.lab-harald-window,
.lab-board-window { width: min(calc(100% - 2 * var(--sp-4)), 720px); }
.lab-potions-content,
.lab-harald-content { padding: var(--sp-4); gap: var(--sp-4); }
.dialog-stage {
    width: min(calc(100% - 2 * var(--sp-4)), 900px);
    gap: var(--sp-4);
}
.dialog-bubble {
    max-height: min(88dvh, 720px);
    padding: var(--sp-4);
    overflow-y: auto;
    border-radius: var(--r-lg);
}
.dialog-bubble > strong { font-family: var(--ff-ui); font-size: var(--fs-h3); }
.dialog-bubble > p {
    min-height: 0;
    margin: var(--sp-3) 0 var(--sp-4);
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
#research-info-modal { z-index: 170; }
.research-info-panel { width: auto; color: var(--c-ink); }
.research-info-panel > .panel-head h2 { font-family: var(--ff-ui); font-size: var(--fs-h2); }
.research-info-panel > .panel-body > p { color: var(--c-ink); font-size: var(--fs-body); line-height: var(--lh-body); }
.research-info-effect { padding: var(--sp-3); border-radius: var(--r-md); }

/* Gesperrte Forschung: der Satz steht ueber der Erklaerung, damit sofort klar ist,
   warum die Kachel grau war. Schloss im Text, nicht nur als Farbe. */
.research-info-lock {
    margin: 0 0 var(--sp-3);
    padding: var(--sp-3);
    border: 2px solid #b98b3a;
    border-radius: var(--r-md);
    color: #6b4a15;
    background: #fbf1d8;
    font-weight: 800;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.research-info-lock::before { margin-right: var(--sp-2); content: '🔒'; }
.research-info-panel #research-info-steps { margin: var(--sp-3) 0 0; }
.research-info-panel.is-locked #research-info-steps li.open { filter: none; }

/* Gesperrte Kachel am Forschungstisch: grau, ohne Fortschrittsring, ohne Anheben beim
   Zeigen - aber weiterhin antippbar, sie oeffnet das Sperr-Fenster. */
.lab-research-orb.is-locked {
    --ring-fill: conic-gradient(from -90deg, #2a3234 0deg 360deg);
    filter: grayscale(.85);
}
.lab-research-orb.is-locked:hover, .lab-research-orb.is-locked:focus-visible {
    filter: grayscale(.85) brightness(1.1);
    transform: none;
}
.lab-research-item.is-locked > strong { color: #b9c4c2; }
.lab-research-item.is-locked > small { color: #93a5a3; }

@media (max-width: 720px), (max-height: 480px) {
    #chest-list { gap: var(--sp-2); }
    /* Pillenrand und -schatten beruehren sonst das Level-Badge (nur Kompakt). */
    .chest-card-kopf { gap: var(--sp-2); }
    .chest-card { min-height: 0; padding: calc(var(--sp-2) + 20px) var(--sp-2) var(--sp-2); } /* frei: 20px Badgehoehe */
    .lab-window { width: min(calc(100% - 2 * var(--sp-3)), 900px); }
    .lab-window-kicker { display: none; }
    .lab-press-content {
        grid-template-columns: minmax(0, 1.5fr) minmax(220px, .75fr);
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3) var(--sp-3);
    }
    .lab-press-machine,
    .lab-press-upgrade { padding: var(--sp-3); }
    .lab-research-list,
    .lab-research-detail,
    .lab-board-window > .lab-window-body,
    .lab-archive-window > .lab-window-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
    /* Zehn Kacheln auf knapper Hoehe: vier je Reihe mit dichten Labels. */
    .lab-research-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
    .lab-research-item > strong { font-size: var(--fs-cap); }
    .lab-research-item > small { font-size: var(--fs-cap); }
    .lab-detail-ring { width: 80px; height: 80px; padding: var(--sp-2); }
    .lab-detail-ring::before { inset: var(--sp-2); }
    .lab-board-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-potions-content { grid-template-columns: 120px minmax(0, 1fr); }
    .lab-harald-content { grid-template-columns: 140px minmax(0, 1fr); }
    .dialog-stage { grid-template-columns: 100px minmax(0, 1fr) 100px; gap: var(--sp-3); }
    .dialog-bubble { padding: var(--sp-3); }
}

/* ==========================================================================
   Schmiede-Update: kompakte Ausrüstungsnavigation und gemeinsame L1–L6-Info
   ========================================================================== */
.equipment-subtabs {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin: calc(-1 * var(--sp-1)) 0 var(--sp-2);
    padding: var(--sp-1);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(84, 65, 48, .18);
    border-radius: var(--r-pill);
    background: rgba(255, 250, 235, .62);
    scrollbar-width: thin;
}

.equipment-subtab {
    position: relative;
    box-sizing: border-box;
    flex: 1 0 auto;
    min-width: max-content;
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--c-ink-soft);
    font-family: var(--ff-ui);
    font-size: var(--fs-sm);
    font-weight: 800;
    line-height: var(--lh-tight);
    cursor: pointer;
}

.equipment-subtab.active {
    border-color: rgba(95, 61, 38, .32);
    background: #fff8df;
    color: var(--brown-dark);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.78), 0 2px 6px rgba(73,48,29,.12);
}

.equipment-subtab::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: max(100%, var(--tap));
    height: var(--tap);
    transform: translate(-50%, -50%);
}

.equipment-card {
    position: relative;
    overflow: hidden;
    border: 2px solid #8c939b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 2px 7px rgba(40,48,54,.12);
}

.equipment-card::before {
    content: '';
    position: absolute;
    inset: 3px;
    z-index: 0;
    border: 1px solid rgba(73,80,86,.22);
    border-radius: calc(var(--r-md) - 3px);
    pointer-events: none;
}

.equipment-card > * { position: relative; z-index: 1; }
.equipment-card.rarity-rare {
    border-color: #6588a6;
    background-image: linear-gradient(135deg, rgba(211,231,240,.24), transparent 46%);
}
.equipment-card.rarity-legendary {
    border-color: #c99c26;
    background-image: linear-gradient(118deg, rgba(255,239,150,.18), rgba(255,255,255,.04), rgba(255,218,91,.2));
    box-shadow: inset 0 0 0 1px #fff1a4, 0 2px 10px rgba(168,111,9,.2);
}

.equipment-level-badge {
    position: absolute !important;
    top: var(--sp-1);
    left: var(--sp-1);
    z-index: 4 !important;
    display: grid;
    place-items: center;
    min-width: 26px;
    height: 22px;
    padding: 0 var(--sp-1);
    border: 2px ridge #a9afb5;
    border-radius: var(--r-sm);
    background: linear-gradient(145deg, #eef1f3, #8b939b);
    color: #242a2f;
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px rgba(255,255,255,.7);
    box-shadow: 0 1px 3px rgba(36,42,47,.25);
}
.rarity-rare > .equipment-level-badge {
    border-color: #8fb4cf;
    background: linear-gradient(145deg, #e5f4fa, #7193ab);
}
.rarity-legendary > .equipment-level-badge {
    border-color: #efcf62;
    background: linear-gradient(145deg, #fff5a8, #c58a18);
    color: #50320a;
}

.forge-locked-item .inventory-item-icon,
.forge-locked-item .shop-icon { filter: grayscale(.45) sepia(.12); opacity: .72; }
.forge-locked-item::after {
    content: '⚒';
    position: absolute;
    right: var(--sp-2);
    bottom: var(--sp-2);
    z-index: 3;
    font-size: var(--ic-md);
    opacity: .42;
    pointer-events: none;
}

#item-info-modal.equipment-info-open .item-info-panel {
    --panel-max: 760px;
    width: min(760px, calc(100vw - 2 * var(--sp-2)));
    max-height: calc(100dvh - 2 * var(--sp-1));
    overflow: hidden;
}

#item-info-modal.equipment-info-open .panel-head {
    min-height: 38px;
    padding-block: var(--sp-1);
}

#item-info-modal.equipment-info-open .panel-body {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    overflow: hidden;
}

#item-info-modal.equipment-info-open .item-info-effect,
#item-info-modal.equipment-info-open .item-info-text,
#item-info-modal.equipment-info-open .item-info-extra,
.equipment-level-summary { margin: 0; }

#item-info-modal.equipment-info-open .item-info-effect,
#item-info-modal.equipment-info-open .item-info-text {
    overflow: hidden;
    font-size: var(--fs-sm);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#item-info-modal.equipment-info-open .item-info-extra { margin-top: 0; }
.equipment-level-overview { display: grid; gap: var(--sp-1); min-width: 0; }
.equipment-level-summary {
    color: var(--c-ink-soft);
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 1.1;
}

.equipment-level-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
    table-layout: fixed;
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: 1.05;
}
.equipment-level-table th,
.equipment-level-table td {
    height: 21px;
    padding: 1px var(--sp-1);
    overflow: hidden;
    border-block: 1px solid rgba(92,75,57,.12);
    background: rgba(255,252,241,.62);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.equipment-level-table th { width: 102px; text-align: left; }
.equipment-level-table td:nth-child(3) { width: 78px; text-align: right; }
.equipment-level-table td:nth-child(4) { width: 82px; color: var(--c-ink-soft); }
.equipment-level-table tr.current > * { background: #e9f5df; border-color: #8eb277; }
.equipment-level-table tr.next > * { background: #fff4cf; border-color: #d8b45c; }
.equipment-level-table tr.future > * { color: #666d72; }
.equipment-level-rune {
    display: inline-grid;
    place-items: center;
    min-width: 25px;
    height: 18px;
    margin-right: var(--sp-1);
    border: 1px solid #77818a;
    border-radius: var(--r-sm);
    background: linear-gradient(#eff2f4, #aab1b7);
    color: #283139;
    font-weight: 900;
}
.equipment-row-marker { color: #4a683b; font-size: .9em; }
.equipment-level-table tr.next .equipment-row-marker { color: #795d17; }

.equipment-affix {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-2);
    min-height: 28px;
    padding: var(--sp-1) var(--sp-2);
    overflow: hidden;
    border: 1px solid #d6a82f;
    border-radius: var(--r-sm);
    background: linear-gradient(110deg, rgba(255,243,164,.78), rgba(255,251,225,.94), rgba(255,225,107,.66));
    color: #5d3b08;
    font-family: var(--ff-ui);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}
.equipment-affix b { white-space: nowrap; }
.equipment-affix span { overflow-wrap: anywhere; }

#item-info-modal.equipment-info-open .panel-actions {
    min-height: 38px;
    padding-block: var(--sp-1);
}

@media (max-width: 720px), (max-height: 480px) {
    #item-info-modal.equipment-info-open .item-info-icon {
        width: var(--ic-lg);
        height: var(--ic-lg);
        font-size: var(--ic-md);
    }
    #item-info-modal.equipment-info-open .item-info-text { display: none; }
    #item-info-modal.equipment-info-open .equipment-level-table th,
    #item-info-modal.equipment-info-open .equipment-level-table td { height: 19px; }
    #item-info-modal.equipment-info-open .panel-actions .btn {
        min-height: var(--btn-h-sm);
        height: var(--btn-h-sm);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .equipment-card.rarity-legendary::before {
        background: linear-gradient(105deg, transparent 25%, rgba(255,255,220,.45) 48%, transparent 70%);
        background-size: 220% 100%;
        animation: equipment-legendary-shimmer 5s ease-in-out infinite;
    }
}

@keyframes equipment-legendary-shimmer {
    0%, 55%, 100% { background-position: 160% 0; }
    75% { background-position: -80% 0; }
}

/* ==========================================================================
   Schmiedebildschirm: ein Amboss-Auftrag, ein bezahlter Warteslot
   ========================================================================== */
#forge-screen { z-index: 118; }
.panel.panel-layout.forge-panel {
    --panel-max: 980px;
    width: min(96vw, 980px);
    height: min(94dvh, 640px);
    max-height: 94dvh;
    overflow: hidden;
    border-color: #71503a;
    background: linear-gradient(155deg, #fff9e9, #ead8b8);
}
.forge-head {
    min-height: var(--tap);
    gap: var(--sp-3);
    padding-block: var(--sp-1);
    background: linear-gradient(110deg, #3f3028, #76513a 58%, #3b2b25);
}
/* Der Kopf hat drei Kinder (Titel, Guthaben, X). Ohne eigene dritte Spalte steckt
   .panel-head das Guthaben in die 40-px-Spalte des X und schiebt das X in Zeile 2. */
.panel.panel-layout > .panel-head.forge-head {
    grid-template-columns: minmax(0, 1fr) auto var(--icon-btn);
}
.forge-head > div:first-child { min-width: 0; }
.forge-head h1 {
    margin: 0;
    overflow: hidden;
    color: var(--c-on-color);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.forge-kicker {
    margin: 0;
    color: #f4d59d;
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-tight);
}
.forge-wallet {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    color: var(--c-on-color);
    font-size: var(--fs-sm);
    white-space: nowrap;
}
.forge-wallet > span {
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--r-pill);
    background: rgba(20,13,10,.25);
}
/* Schmiedemenue nach "Variante C": schmale Icon-Liste links, grosse
   Detailansicht rechts, Auftraege als aufklappbarer Streifen darunter. */
/* Vier Klassen, damit die Regel `.panel.panel-layout > .panel-body` (display: block)
   nicht gewinnt - dasselbe Muster nutzt der Einstellungen-Bildschirm. */
.panel.panel-layout.forge-panel > .panel-body {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.6fr);
    gap: var(--sp-3);
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    overflow: hidden;
}
.forge-rail,
.forge-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    padding: var(--sp-2);
    border: 2px solid rgba(91,67,45,.22);
    border-radius: var(--r-md);
    background: rgba(255,253,244,.7);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}
.forge-stage { gap: var(--sp-2); overflow-y: auto; }
.forge-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2);
}
.forge-rail-head h2,
.forge-jobs-head h2,
.forge-copy h2 {
    margin: 0;
    color: var(--brown-dark);
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}
.forge-count {
    color: var(--c-ink-soft);
    font-size: var(--fs-cap);
    font-weight: 800;
    white-space: nowrap;
}

/* Die drei Kategorien stehen zwischen Titel und Liste. */
.forge-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-1);
    margin: var(--sp-2) 0;
}
.forge-category {
    position: relative;
    min-width: 0;
    min-height: var(--btn-h-sm);
    padding: 0 var(--sp-1);
    border: 2px solid rgba(91,67,45,.28);
    border-radius: var(--r-pill);
    background: #fffdf4;
    color: #6a533b;
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 800;
    cursor: pointer;
}
.forge-category::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}
.forge-category.is-active {
    border-color: #ae7c31;
    background: var(--c-gold, #f8d986);
    color: var(--brown-dark);
}
/* Leere Kategorien bleiben lesbar, treten aber zurueck. */
.forge-category.is-empty:not(.is-active) { color: #8d7a63; opacity: .72; }

/* Eine Spalte: nur Icon und Name, Levelbadge sitzt im Icon. */
.forge-items {
    display: grid;
    grid-auto-rows: min-content;
    gap: var(--sp-2);
    min-height: 0;
    overflow-y: auto;
    padding-right: var(--sp-1);
}
.forge-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-1) var(--sp-2);
    border: 2px solid transparent;
    border-radius: var(--r-md);
    background: #fffdf6;
    box-shadow: 0 2px 0 rgba(91,67,45,.16);
    color: var(--c-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
/* Gewoehnlich ohne Rahmen, selten silbern, legendaer golden. */
.forge-item--rare { border-color: #b9c3c5; }
.forge-item--legendary { border-color: #d9aa47; }
.forge-item[aria-selected="true"] {
    background: #fff2cf;
    box-shadow: 0 0 0 2px #c8912f, 0 2px 0 rgba(91,67,45,.16);
}
.forge-item-icon {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 56px;
}
.forge-item-icon canvas { display: block; width: 100%; height: 35px; object-fit: contain; }
.forge-item-level {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 var(--sp-1);
    border-radius: var(--r-sm);
    background: rgba(44,31,22,.86);
    color: #ffe9ae;
    font-size: var(--fs-cap);
    font-weight: 900;
}
.forge-item-name {
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 800;
    overflow-wrap: anywhere;
}
.forge-item-state {
    margin-left: auto;
    color: #8a5a20;
    font-size: var(--fs-cap);
    font-weight: 800;
    white-space: nowrap;
}
.forge-item-busy { opacity: .74; }
.forge-empty {
    display: grid;
    justify-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    text-align: center;
}
.forge-empty > span { font-size: var(--ic-lg); }
.forge-empty p { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* Rechts: grosses Icon mit Level und "i", daneben Name und Wirkung. */
.forge-selected {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr);
    gap: var(--sp-3);
    align-items: start;
}
.forge-art {
    position: relative;
    min-width: 0;
    padding: var(--sp-2);
    border-radius: var(--r-md);
}
.forge-art canvas { display: block; width: 100%; max-height: 132px; }
.forge-art-level {
    position: absolute;
    top: var(--sp-1);
    left: var(--sp-1);
    padding: 0 var(--sp-2);
    border-radius: var(--r-sm);
    background: rgba(44,31,22,.86);
    color: #ffe9ae;
    font-size: var(--fs-cap);
    font-weight: 900;
}
.forge-info {
    position: absolute;
    top: var(--sp-1);
    right: var(--sp-1);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 2px solid #8a6a3a;
    border-radius: 50%;
    background: #fff4d2;
    color: #6b4a17;
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 900;
    cursor: pointer;
}
.forge-info::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}
.forge-copy { min-width: 0; display: grid; gap: var(--sp-1); align-content: start; }
.forge-rarity {
    justify-self: start;
    padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: #ece4d3;
    color: #5f4a35;
    font-size: var(--fs-cap);
    font-weight: 900;
}
.forge-rarity-rare { background: #dfe7e8; color: #3f5257; }
.forge-rarity-legendary { background: #fbe6ad; color: #7a5410; }
.forge-summary {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-dialog);
    font-weight: 600;
    line-height: var(--lh-body);
}
.forge-label {
    display: block;
    color: #927a5a;
    font-size: var(--fs-cap);
    font-weight: 800;
    text-transform: uppercase;
}
.forge-current strong,
.forge-affix strong {
    font-size: var(--fs-sm);
    font-weight: 900;
    overflow-wrap: anywhere;
}
.forge-affix { color: #815607; }
.forge-affix.hidden { display: none; }

/* Kompakte Upgrade-Aktion: Aktuell -> Naechster Effekt, Preis, Dauer. */
.forge-upgrade-card {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 2px solid rgba(91,67,45,.22);
    border-radius: var(--r-md);
    background: #fffaec;
}
.forge-effect-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: center;
}
.forge-effect-pair strong {
    font-size: var(--fs-sm);
    font-weight: 900;
    overflow-wrap: anywhere;
}
.forge-effect-arrow { color: #a07b3f; font-size: var(--fs-h3); font-weight: 900; }
.forge-upgrade-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.forge-upgrade-main {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1 1 auto;
    min-width: 0;
}
.forge-cost {
    padding: 0 var(--sp-2);
    border-radius: var(--r-pill);
    background: #f3e6c4;
    color: #6b4a17;
    font-size: var(--fs-sm);
    font-weight: 900;
    white-space: nowrap;
}
.forge-upgrade { flex: 1 1 auto; min-height: var(--btn-h-lg); margin: 0; }
.forge-duration { color: var(--c-ink-soft); font-size: var(--fs-cap); font-weight: 800; white-space: nowrap; }
.forge-reason {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-dialog);
    font-weight: 600;
    line-height: var(--lh-body);
}

/* Das "i"-Blatt haengt frei ueber dem Fenster und wird per JS platziert. */
.forge-info-panel {
    position: fixed;
    z-index: 240;
    top: var(--forge-info-top);
    left: var(--forge-info-left);
    width: min(90vw, 320px);
    max-height: 60dvh;
    overflow-y: auto;
    padding: var(--sp-2);
    border: 2px solid #a5813c;
    border-radius: var(--r-md);
    background: #fffaec;
    box-shadow: var(--sh-modal);
}
.forge-info-panel.hidden { display: none; }
.forge-info-heading {
    margin: 0 0 var(--sp-2);
    color: var(--brown-dark);
    font-size: var(--fs-sm);
    font-weight: 900;
}
.forge-info-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    border-top: 1px solid rgba(91,67,45,.16);
    font-size: var(--fs-cap);
}
.forge-info-row:first-child { border-top: 0; }
.forge-info-row strong { color: #8a6a3a; font-weight: 900; }
.forge-info-row.is-current {
    background: #fff0c9;
    border-radius: var(--r-sm);
    font-weight: 800;
}

/* Auftraege: Zusammenfassung immer sichtbar, Karten auf Wunsch. */
.forge-jobs {
    display: grid;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-2);
    border-top: 2px solid rgba(91,67,45,.18);
}
.forge-jobs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}
.forge-job-toggle {
    position: relative;
    min-height: var(--btn-h-sm);
    padding: 0 var(--sp-2);
    border: 2px solid rgba(91,67,45,.28);
    border-radius: var(--r-pill);
    background: #fffdf4;
    color: #6a533b;
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 800;
    cursor: pointer;
}
.forge-job-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}
.forge-job-summary { color: var(--c-ink-soft); font-size: var(--fs-dialog); font-weight: 600; }
.forge-job-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}
.forge-job-cards.hidden { display: none; }
.forge-job {
    display: grid;
    gap: var(--sp-1);
    align-content: start;
    min-width: 0;
    padding: var(--sp-2);
    border: 2px solid rgba(91,67,45,.22);
    border-radius: var(--r-md);
    background: #fffdf6;
    font-size: var(--fs-cap);
}
.forge-job > div:first-child { display: grid; gap: var(--sp-1); }
.forge-job strong,
.forge-job span { overflow-wrap: anywhere; }
.forge-job button {
    position: relative;
    min-height: var(--btn-h-sm);
    padding: 0 var(--sp-2);
    border: 2px solid #b4562f;
    border-radius: var(--r-pill);
    background: #ffe6d4;
    color: #8a3a17;
    font-family: inherit;
    font-size: var(--fs-cap);
    font-weight: 800;
    cursor: pointer;
}
.forge-job button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}
.forge-job-empty { border-style: dashed; opacity: .76; }
.forge-job-active { border-color: #c17b35; background: #fff0c6; }
.forge-job-queued { border-color: #71889b; background: #edf1f2; }
.forge-progress {
    height: 9px;
    border-radius: var(--r-pill);
    background: rgba(60,44,30,.2);
    overflow: hidden;
}
.forge-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e49a35, #ffd76d);
    transition: width .35s linear;
}
.forge-job-locked { color: #72594c; font-weight: 800; }
.forge-submodal { z-index: 220; background: rgba(26,20,15,.76); }
.forge-dialog { width: min(92vw, 520px); }
.forge-dialog .panel-body p { margin: 0 0 var(--sp-2); line-height: 1.4; }
.forge-dialog-note {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: #fff0c9;
    color: #684619;
    font-weight: 800;
}
.equipment-migration-dialog { width: min(92vw, 620px); }
.equipment-migration-dialog .panel-body > p {
    margin: 0 0 var(--sp-3);
    color: var(--c-ink-soft);
    line-height: 1.45;
}
.equipment-migration-refunds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: var(--sp-2) 0 var(--sp-3);
}
.equipment-migration-refunds > div {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border: 2px solid #c49b43;
    border-radius: var(--r-md);
    background: #fff2cb;
    color: #61431b;
    text-align: center;
}
.equipment-migration-refunds span { font-size: var(--fs-sm); font-weight: 800; }
.equipment-migration-refunds strong { font-size: var(--fs-h3); }
.equipment-migration-items { font-size: var(--fs-sm); }
.equipment-migration-oak {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: #fff0c9;
    color: #684619 !important;
    font-size: var(--fs-sm);
    font-weight: 800;
}
.equipment-migration-aura {
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    background: #e8f2e1;
    color: #35522e !important;
    font-weight: 800;
}

@media (max-width: 720px), (max-height: 480px) {
    .panel.panel-layout.forge-panel {
        width: calc(100dvw - 2 * var(--sp-1)) !important;
        height: calc(100dvh - 2 * var(--sp-1));
        max-height: none;
    }
    .forge-head { padding-inline: var(--sp-2); }
    .forge-kicker,
    .forge-building-level { display: none; }
    .forge-head h1 { font-size: var(--fs-body); }
    .forge-wallet { gap: var(--sp-1); }
    .forge-wallet > span { padding: var(--sp-1); }
    .panel.panel-layout.forge-panel > .panel-body { gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-2); }
    .forge-rail, .forge-stage { padding: var(--sp-1); }
    .forge-rail-head h2, .forge-jobs-head h2, .forge-copy h2 { font-size: var(--fs-sm); }
    .forge-categories { margin: var(--sp-1) 0; }
    .forge-items { gap: var(--sp-1); }
    .forge-item { padding: var(--sp-1); }
    .forge-item-icon { width: 40px; }
    .forge-item-icon canvas { height: 25px; }
    .forge-selected { grid-template-columns: minmax(0, .62fr) minmax(0, 1.5fr); gap: var(--sp-2); }
    .forge-art { padding: var(--sp-1); }
    .forge-art canvas { max-height: 84px; }
    .forge-summary { display: none; }
    .forge-upgrade-card { gap: var(--sp-1); padding: var(--sp-1); }
    .forge-upgrade { min-height: var(--btn-h-md); }
    .forge-reason { line-height: var(--lh-tight); }
    .forge-jobs { gap: var(--sp-1); padding-top: var(--sp-1); }
    .forge-job { gap: var(--sp-1); padding: var(--sp-1); line-height: var(--lh-tight); }
    .forge-job button { min-height: var(--btn-h-sm); }
    .equipment-migration-dialog .panel-body { padding-block: var(--sp-2); }
    .equipment-migration-dialog .panel-body > p { margin-bottom: var(--sp-2); line-height: 1.2; }
    .equipment-migration-refunds { gap: var(--sp-2); margin-block: var(--sp-1) var(--sp-2); }
    .equipment-migration-refunds > div { padding: var(--sp-2); }
}

@media (prefers-reduced-motion: reduce) {
    .forge-progress > span { transition: none; }
}

/* --------------------------------------------------------------------------
   Edeltrauds Hofschmiede: begehbarer Innenraum
   -------------------------------------------------------------------------- */
/* Der Innenraum liegt unter dem Schmiedemenue (z-index 118). */
#forge-interior-screen {
    z-index: 117;
    overflow: hidden;
    background: #120d0b;
}

#forge-interior-screen.hidden { display: none; }

#forge-interior-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    outline: none;
}

#forge-interior-canvas:focus-visible {
    box-shadow: inset 0 0 0 var(--sp-1) #ffe28a;
}

#forge-interior-status {
    position: absolute;
    z-index: 3;
    top: max(var(--sp-3), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    color: #fffdf8;
    font-size: var(--fs-sm);
    font-weight: 800;
    pointer-events: none;
}

#forge-interior-back {
    position: absolute;
    z-index: 3;
    top: max(var(--sp-3), env(safe-area-inset-top));
    left: max(var(--sp-3), env(safe-area-inset-left));
    min-width: calc(var(--tap) * 2);
    min-height: var(--btn-h-md);
    padding: 0 var(--sp-3);
    border: 0;
    border-radius: var(--r-pill);
    color: #fffdf8;
    background: var(--c-secondary);
    box-shadow: 0 5px 0 var(--brown-dark);
    font-family: inherit;
    font-size: var(--fs-btn);
    font-weight: 800;
}

#forge-interior-back:active {
    transform: translateY(var(--sp-1));
    box-shadow: 0 1px 0 var(--brown-dark);
}

#forge-interior-back:focus-visible,
.forge-menu-card button:focus-visible {
    outline: var(--sp-1) solid #fff4b1;
    outline-offset: var(--sp-1);
}

/* Edeltrauds Karte im Innenraum */
.forge-menu-layer {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(var(--sp-3), env(safe-area-inset-top)) max(var(--sp-3), env(safe-area-inset-right))
             max(var(--sp-3), env(safe-area-inset-bottom)) max(var(--sp-3), env(safe-area-inset-left));
    background: rgba(26, 21, 16, .68);
}

.forge-menu-layer.hidden { display: none; }

.forge-menu-card {
    width: min(100%, 420px);
    max-height: 100%;
    overflow-y: auto;
    padding: var(--panel-pad);
    border: var(--sp-1) solid #80553a;
    border-radius: var(--r-lg);
    color: var(--c-ink);
    background: var(--cream-soft);
    box-shadow: var(--sh-modal);
}

.forge-menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-2);
}

.forge-menu-head h2 {
    margin: 0;
    color: var(--brown-dark);
    font-size: var(--fs-h2);
    font-weight: 900;
}

.forge-menu-head p {
    margin: 0;
    color: #9a6231;
    font-size: var(--fs-cap);
    font-weight: 800;
}

.forge-menu-body {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
}

.forge-menu-copy {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-dialog);
    font-weight: 600;
    line-height: var(--lh-body);
}

.forge-menu-body .btn {
    width: 100%;
    min-height: var(--btn-h-lg);
    margin: 0;
}

.forge-menu-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

#forge-screen[data-forge-parent="scene"] { background: rgba(24, 19, 14, .46); }

body.forge-interior-active #playground-hud { pointer-events: none; }
body.forge-interior-active #gallery-controls,
body.forge-interior-active #gallery-hud { display: none !important; }

@media (max-width: 720px), (max-height: 480px) {
    #forge-interior-back {
        top: max(var(--sp-2), env(safe-area-inset-top));
        left: max(var(--sp-2), env(safe-area-inset-left));
        min-height: var(--btn-h-sm);
        padding-inline: var(--sp-2);
        font-size: var(--fs-sm);
    }
}

@media (prefers-reduced-motion: reduce) {
    #forge-interior-screen *,
    #forge-interior-screen *::before,
    #forge-interior-screen *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Smartphone-Kompaktpass: Shop, Bauen und Sammlungen (Etappe 11)
   ========================================================================== */
#shop-screen .panel.panel-layout.shop-panel > .panel-body {
    padding: var(--sp-2) var(--panel-pad) var(--panel-pad);
}

#shop-screen .panel.panel-layout.shop-panel > .panel-head,
#achievements-screen .panel.panel-layout.achievements-panel > .panel-head,
#chest-screen .panel.panel-layout.chest-panel > .panel-head,
#news-screen .panel.panel-layout > .panel-head {
    min-height: var(--tap);
    padding-block: var(--sp-1);
}

.shop-balance-container {
    min-height: var(--btn-h-sm);
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
}

.shop-balance-container > span:first-child { white-space: nowrap; }

.currency-pill {
    min-width: 0;
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-body);
}

#shop-categories,
#playground-shop-cats {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
    padding: var(--sp-1);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

#shop-categories .shop-cat,
#playground-shop-cats .shop-cat {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: auto;
    height: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-sm);
}

.shop-cat::before,
.shop-buy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}

#shop-items { gap: var(--sp-2); }

#shop-screen .shop-item {
    position: relative;
    grid-template-columns: var(--shop-thumb) minmax(0, 1fr) minmax(150px, auto);
    min-height: calc(var(--shop-thumb) + 2 * var(--sp-2));
    gap: var(--sp-2);
    padding: var(--sp-2);
}

#shop-screen .shop-item .shop-icon {
    width: var(--shop-thumb);
    height: var(--shop-thumb);
    font-size: var(--ic-lg);
}

#shop-screen .shop-info {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: var(--sp-1);
}

#shop-screen .shop-name {
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
}

/* Dichte Dialogstaffel und ausdrueckliches Gewicht 600: geerbte 800 liessen die
   Beschreibung genauso schwer wirken wie den Namen darueber. */
#shop-screen .shop-desc {
    display: -webkit-box;
    overflow: hidden;
    color: var(--c-ink-soft);
    font-size: var(--fs-dialog);
    font-weight: 600;
    line-height: var(--lh-tight);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

#shop-screen :is(.shop-effect, .shop-price-hint, .shop-lock-note) {
    overflow: hidden;
    color: var(--c-ink-soft);
    font-size: var(--fs-dialog);
    font-weight: 600;
    line-height: var(--lh-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

#shop-screen .shop-lock-note { color: var(--c-danger); font-weight: 800; }

#shop-screen .shop-item .shop-action {
    position: relative;
    align-self: stretch;
    min-width: 150px;
    min-height: var(--shop-thumb);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding-top: calc(var(--info-visible) + var(--sp-1));
}

#shop-screen .shop-action > .item-info-btn {
    position: absolute;
    top: 0;
    right: 0;
}

#shop-screen .shop-stock {
    position: absolute;
    top: var(--sp-1);
    right: calc(var(--info-visible) + var(--sp-2));
    font-size: var(--fs-cap);
    line-height: var(--lh-tight);
    white-space: nowrap;
}

#shop-screen .shop-buy {
    box-sizing: border-box;
    width: auto;
    height: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}

/* Info- und Kauf-Trefferflaeche stehen nebeneinander mit mindestens 8 px Abstand. */
#shop-screen:not([data-shop-scope="playground"]) .shop-buy {
    margin-right: calc(var(--info-visible) + var(--sp-4));
}

.shop-separator {
    margin: var(--sp-2) 0 0;
    padding-top: var(--sp-1);
    font-size: var(--fs-sm);
}

/* Der Bauen-Aufruf nutzt zwei eigenstaendige Karten je Zeile. */
#shop-screen[data-shop-scope="playground"] #shop-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--sp-2);
}

#shop-screen[data-shop-scope="playground"] .shop-item {
    grid-template-areas:
        'icon info'
        'icon action';
    grid-template-columns: var(--shop-thumb) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
}

#shop-screen[data-shop-scope="playground"] .shop-icon { grid-area: icon; }

#shop-screen[data-shop-scope="playground"] .shop-info {
    grid-area: info;
    align-self: end;
    padding-right: calc(var(--info-visible) + var(--sp-2));
}

#shop-screen[data-shop-scope="playground"] .shop-action {
    position: static;
    grid-area: action;
    min-width: 0;
    min-height: var(--btn-h-sm);
    align-self: start;
    justify-content: flex-start;
    padding: 0;
}

#shop-screen[data-shop-scope="playground"] .shop-action > .item-info-btn {
    top: var(--sp-2);
    right: var(--sp-2);
}

/* Das Heft bekommt nach Kopf und den kompakten Reitern den gesamten Rest. */
#achievements-screen .achievements-panel > .panel-head h1 { font-size: var(--fs-h2); }

.panel.panel-layout.achievements-panel > .panel-body {
    padding: var(--sp-2) var(--panel-pad) var(--panel-pad);
}

#ach-tabs {
    min-height: var(--btn-h-sm);
    margin: 0 0 var(--sp-1);
}

#ach-tabs .ach-tab {
    box-sizing: border-box;
    height: var(--btn-h-sm);
    min-height: var(--btn-h-sm);
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-btn);
}

.achievements-panel #ach-pane-cards:not(.hidden),
.achievements-panel #album-stage,
.achievements-panel #album-book { min-height: 0; }

.achievements-panel #album-stage { flex: 1 1 auto; height: auto; }

#album-dots { padding: var(--sp-1) 0 0; }

.album-cat-name,
.album-progress-text { font-size: var(--fs-sm); }

/* Kisten zeigen nur die Karten samt ihrer Beschreibung. */
#chest-screen .panel.panel-layout.chest-panel > .panel-body { padding-top: var(--sp-2); }

/* Entwicklertexte am Schwarzen Brett bleiben Fliesstext, werden aber dichter gesetzt. */
#news-body { font-size: var(--fs-body); line-height: var(--lh-body); }

#news-body .news-row {
    min-height: 0;
    margin: var(--sp-1) 0;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
}

#news-body .news-info { grid-template-columns: var(--ic-lg) minmax(0, 1fr); }
#news-body .news-symbol { width: var(--ic-lg); font-size: var(--ic-md); }
#news-body .news-title { font-size: var(--fs-body); line-height: var(--lh-tight); }
#news-body .news-sub { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Einheitliche kleine Info-Scheibe, getrennt von ihrer 44px-Trefferflaeche. */
.stat-info-btn,
.item-info-btn,
.dog-level-row .item-info-btn,
.quest-info-btn,
.wg-level-info-btn,
.news-poll-info,
.lab-info-dot,
.lab-info-btn {
    position: relative;
    /* Altlast-Offsets loeschen (.quest-info-btn war absolut) - sonst wandert das i aus der Reihe. */
    top: auto; right: auto; bottom: auto; left: auto;
    transform: none;
    box-sizing: border-box;
    flex: 0 0 var(--info-visible);
    width: var(--info-visible);
    min-width: var(--info-visible);
    height: var(--info-visible);
    min-height: var(--info-visible);
    padding: 0;
    border-radius: var(--r-pill);
    font-size: var(--fs-btn);
    line-height: 1;
}

.stat-info-btn::after,
.item-info-btn::after,
.ach-info-btn::after,
.quest-info-btn::after,
.wg-level-info-btn::after,
.news-poll-info::after,
.lab-info-dot::after,
.lab-info-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

.lab-info-pop { top: calc(var(--info-visible) + var(--sp-1)); }

/* ==========================================================================
   Kompaktpass Etappe 12: Konto, Profil und Community
   ========================================================================== */

/* Der Stift bleibt sichtbar klein; der Klickbereich liegt unsichtbar darueber. */
.profile-edit-pen {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 var(--info-visible);
    width: var(--info-visible);
    min-width: var(--info-visible);
    height: var(--info-visible);
    min-height: var(--info-visible);
    padding: 0;
    font-size: var(--fs-btn);
}

.profile-edit-pen::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

.profile-hero-text {
    display: grid;
    gap: var(--sp-2);
}

.profile-hero-row {
    min-height: var(--tap);
    gap: var(--sp-2);
}

/* Das Passwortfenster verliert Leerraum, nicht Bedienflaeche. */
.panel.panel-layout.password-panel { --panel-max: 480px; }

.password-panel > .panel-head {
    min-height: var(--tap);
    padding-block: var(--sp-1);
}

.panel.panel-layout.password-panel > .panel-body {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-3);
}

.password-panel > .panel-body > p { margin: 0; }

#password-modal input[type="password"] {
    min-height: var(--tap);
    margin: var(--sp-1) 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-body);
}

.password-panel > .panel-actions {
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
}

.password-panel > .panel-actions .btn {
    min-height: var(--btn-h-md);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}

/* Einstellungen: drei Reiter (im Developermodus vier), pro Reiter genau ein
   Bildschirm. Die Reiterleiste teilt sich ihre Regeln mit #lb-tabs. */
.panel.panel-layout.system-panel.settings-panel.panel-w-900 {
    --panel-max: 900px;
    container-type: inline-size;
}

.panel.panel-layout.settings-panel > .panel-body {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.settings-panel #settings-tabs { margin: 0; }
.settings-panel .settings-tab.hidden { display: none; }

.settings-panel .settings-tabpanel {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
}

/* Konto bleibt in allen drei Referenzformaten zweispaltig: links die beiden
   kurzen Karten, rechts der Spielstand ueber beide Zeilen. */
.settings-panel #settings-tab-konto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-panel #settings-tab-konto .settings-section-profile {
    grid-column: 1;
    grid-row: 1;
}

.settings-panel #settings-tab-konto .settings-section-save {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.settings-panel #settings-tab-konto .settings-section-danger {
    grid-column: 1;
    grid-row: 2;
}

/* Portrait (390): Konto einspaltig stapeln, Referenzformate bleiben zweispaltig. */
@container (max-width: 560px) { /* frei: Panelbreite trennt Portrait von den Referenzformaten */
    .settings-panel #settings-tab-konto { grid-template-columns: 1fr; }
    .settings-panel #settings-tab-konto .settings-section-profile,
    .settings-panel #settings-tab-konto .settings-section-save,
    .settings-panel #settings-tab-konto .settings-section-danger { grid-column: 1; grid-row: auto; }
}

.settings-panel #settings-tab-konto .settings-section {
    padding: var(--sp-2) var(--sp-3);
}

.settings-panel #settings-tab-konto .settings-section-save > h2 {
    margin-bottom: var(--sp-1);
}

.settings-panel .settings-tabpanel.hidden { display: none; }

.settings-panel > .panel-head {
    min-height: var(--tap);
    padding-block: var(--sp-1);
}

/* Hierarchie: Paneltitel > Kartentitel > Zeile > Hinweis. Vorher waren
   Paneltitel und Kartentitel gleich gross. */
.settings-panel > .panel-head h1,
#settings-title {
    font-size: var(--fs-h2);
    font-weight: 900;
}

#settings-close {
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    font-size: var(--ic-md);
}

.settings-panel .settings-section {
    position: relative;
    padding: var(--sp-3);
    border: 1px solid rgba(94, 61, 40, .18);
    border-radius: var(--r-md);
    background: rgba(255, 253, 248, .78);
    box-shadow: none;
}

.settings-panel .settings-section h2 {
    margin: 0 0 var(--sp-2);
    padding-right: calc(var(--info-visible) + var(--sp-2));
    font-size: var(--settings-title);
    font-weight: 800;
    line-height: var(--lh-tight);
}

/* Das kleine i sitzt oben rechts in seiner Karte (Skill 5.3) und bleibt ueber
   sein Pseudo-Element 44 px erreichbar. */
.settings-panel .settings-info {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--info-visible);
    height: var(--info-visible);
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: rgba(94, 61, 40, .1);
    color: var(--c-ink-soft);
    font-family: inherit;
    font-size: var(--ic-sm);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.settings-panel .settings-info::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

/* Gefahrenzone: die zerstoerende Aktion steht allein und abgesetzt - frueher
   lag der Dev-Link direkt daneben. */
.settings-panel .settings-section-danger {
    border-color: rgba(200, 69, 47, .4);
    background: rgba(200, 69, 47, .07);
}

/* Konto: Name und Bearbeitung bilden eine einzige, ruhige Kopfzeile. Der
   kostenlose Icon-Knopf bleibt sichtbar kompakt, hat aber die volle
   Trefferflaeche des Token-Systems. */
.settings-panel .settings-name-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    min-height: var(--tap);
}

.settings-panel .settings-name-head h2 {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-wrap: break-word;
}

.settings-panel .settings-rename-btn {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    border-color: var(--c-primary);
    color: var(--forest-green-dark);
    background: var(--c-surface);
    box-shadow: 0 var(--settings-press) 0 var(--forest-green-dark);
    white-space: nowrap;
}

.settings-panel .settings-rename-btn.settings-rename-icon-only {
    width: var(--tap);
    min-width: var(--tap);
    height: var(--tap);
    padding: 0;
    font-size: var(--ic-sm);
}

.settings-panel .settings-rename-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

.settings-panel .settings-save-status {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
}

.settings-panel .settings-save-status p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--settings-fs);
    font-weight: 600;
    line-height: var(--lh-tight);
}

.settings-panel .settings-save-status strong { color: var(--c-ink); }
.settings-panel .settings-save-status strong.is-ok { color: var(--forest-green-dark); }
.settings-panel .settings-save-status strong.is-open { color: var(--c-secondary-dark); }

.settings-panel :is(.settings-save-group, .settings-switch-group) {
    display: grid;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
}

.settings-panel .settings-save-group { margin-top: var(--sp-1); }

/* Eine einzelne Aktion mit Namen: Label und Knopf stehen nebeneinander
   (Skill 4.5), der Hinweis darunter ueber beide Spalten. Gestapelt kostete
   "Anderes Konto" im Konto-Reiter eine ganze Zeile Hoehe. */
.settings-panel .settings-switch-group {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--sp-2);
    padding-top: var(--sp-1);
    border-top: 1px solid rgba(94, 61, 40, .18);
}

.settings-panel .settings-switch-group h3 { grid-column: 1; }
.settings-panel #settings-switch-note { grid-column: 1 / -1; }

.settings-panel :is(.settings-save-group, .settings-switch-group) h3 {
    margin: 0;
    color: var(--c-ink-soft);
    font-size: var(--settings-fs);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.settings-panel .settings-save-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
}

.settings-panel .settings-save-actions .btn {
    width: 100%;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
    padding-inline: var(--sp-1);
}

/* Einzelaktion waechst zum Inhalt, statt ueber die Panelbreite gestreckt zu werden. */
.settings-panel .settings-info-action {
    justify-self: end;
    width: auto;
    min-width: 0;
    margin: 0;
    color: var(--c-on-color);
    background: var(--c-info);
    box-shadow: 0 var(--settings-press) 0 var(--c-info-dark);
    white-space: nowrap;
}

.settings-panel #settings-tab-konto .settings-section-danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.settings-panel .settings-danger-copy {
    flex: 1 1 calc(var(--sp-8) * 3);
    min-width: 0;
}

.settings-panel .settings-danger-copy h2 {
    margin-bottom: var(--sp-1);
    padding-right: 0;
}

.settings-panel #settings-tab-konto #reset-save-btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

/* Hilfe-Reiter: gleich breite Wege untereinander. */
.settings-panel .settings-link-list {
    display: grid;
    gap: var(--sp-2);
}

.settings-panel .settings-link-list .btn {
    width: 100%;
    flex: 1 1 auto;
}

.settings-panel .settings-section-about {
    padding: var(--sp-2) var(--sp-3);
    border: 0;
    background: transparent;
}

.settings-panel .settings-legal-row {
    color: var(--c-ink-soft);
    font-size: var(--settings-fs);
    font-weight: 600;
    text-align: center;
}

.settings-panel .settings-legal-row a { color: inherit; text-decoration: underline; }

/* Versionszeile: reine Information. Sieben Tipps oeffnen die Code-Abfrage -
   sie darf deshalb nach nichts Anklickbarem aussehen. */
.settings-panel .settings-version {
    margin: var(--sp-2) 0 0;
    color: var(--c-ink-soft);
    font-size: var(--fs-cap);
    font-weight: 600;
    text-align: center;
    opacity: .7;
    user-select: none;
    -webkit-user-select: none;
}

/* Update-Testzentrale: eigener, flacher Dev-Dialog statt weiterer langer
   Einstellungsfelder. Pro Reiter bleibt nur ein Testbereich sichtbar. */
.dev-update-panel > .panel-body {
    display: grid;
    gap: var(--sp-2);
}

.dev-update-kicker {
    display: block;
    margin-bottom: var(--sp-1);
    color: var(--c-accent-dark);
    font-size: var(--fs-cap);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.dev-update-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-1);
}

.dev-update-tabs button {
    min-width: 0;
    min-height: var(--tap);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid rgba(94, 61, 40, .24);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    background: var(--c-surface);
    font-size: var(--fs-btn);
    font-weight: 800;
    cursor: pointer;
}

.dev-update-tabs button.active {
    border-color: var(--c-primary);
    color: var(--c-on-color);
    background: var(--c-primary);
}

.dev-update-tab-panel {
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border: 1px solid rgba(94, 61, 40, .18);
    border-radius: var(--r-sm);
    background: rgba(255, 253, 248, .76);
}

.dev-update-status,
.dev-update-help,
.dev-update-live-status { margin: 0; line-height: var(--lh-body); }

.dev-update-status {
    min-height: var(--btn-h-sm);
    padding: var(--sp-2);
    border-radius: var(--r-sm);
    color: var(--forest-green-dark);
    background: rgba(65, 118, 72, .1);
    font-size: var(--fs-body);
    font-weight: 800;
}

.dev-update-help { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* Wirtschafts-Dashboard der Update-Testzentrale. Reine Anzeige, nichts tapbar. */
.dev-update-subhead {
    margin: var(--sp-4) 0 var(--sp-2);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    color: var(--c-ink);
}
.dev-economy-board {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: var(--r-md);
    overflow: hidden;
}
.dev-economy-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-3);
    background: rgba(255, 255, 255, .05);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: var(--c-ink-soft);
}
.dev-economy-row b { flex: none; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.dev-economy-row.is-head {
    margin-top: var(--sp-2);
    background: rgba(255, 255, 255, .12);
    font-weight: 600;
    color: var(--c-ink);
}
.dev-economy-row.is-head:first-child { margin-top: 0; }

.dev-update-control-row,
.dev-update-actions,
.dev-update-primary-row,
.dev-update-value-grid {
    display: grid;
    align-items: center;
    gap: var(--sp-2);
}

.dev-update-control-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.dev-update-check {
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline: var(--sp-2);
    color: var(--c-ink);
    font-weight: 800;
}
.dev-update-check input {
    width: var(--ic-md);
    height: var(--ic-md);
    accent-color: var(--c-primary);
}
.dev-update-item-row { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.dev-update-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dev-update-actions-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dev-update-primary-row { justify-items: center; }
.dev-update-primary-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dev-update-value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dev-update-control-row label,
.dev-update-value-grid label {
    color: var(--c-ink);
    font-size: var(--fs-body);
    font-weight: 800;
}

.dev-update-control-row select,
.dev-update-value-grid input {
    width: 100%;
    min-width: 0;
    min-height: var(--tap);
    padding: var(--sp-1) var(--sp-2);
    border: 1px solid rgba(94, 61, 40, .3);
    border-radius: var(--r-sm);
    color: var(--c-ink);
    background: var(--c-surface);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: 600;
}

.dev-update-value-grid label { display: grid; gap: var(--sp-1); }

.dev-update-panel .btn {
    min-width: 0;
    min-height: var(--tap);
    margin: 0;
    padding: var(--sp-1) var(--sp-2);
    font-size: var(--fs-btn);
}

.dev-update-primary-row .btn { width: min(100%, calc(var(--sp-8) * 4)); }
.dev-update-primary-row-two .btn { width: 100%; }

.dev-update-live-status {
    min-height: var(--fs-body);
    color: var(--forest-green-dark);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-align: center;
}

.dev-update-live-status.error { color: var(--c-danger); }

.settings-panel :is(.settings-note, .settings-label) {
    font-size: var(--settings-fs);
    font-weight: 600;
    line-height: 1.35;
}

.settings-panel .settings-toggle-row {
    font-size: var(--fs-btn);
    font-weight: 800;
    line-height: var(--lh-tight);
}

.settings-panel .settings-value {
    font-size: var(--settings-fs);
    font-weight: 800;
}

.settings-panel .settings-note { margin: var(--sp-1) 0 0; }

.settings-panel .settings-password-hint {
    display: block;
    width: 100%;
    margin: var(--sp-2) 0 0;
    text-align: left;
}

#settings-rename-note { margin-top: var(--sp-1); }

.settings-panel .settings-rename-missing {
    margin-top: var(--sp-1);
    color: var(--c-secondary-dark);
    font-weight: 800;
}

/* Auswahl aus mehreren Optionen hat genau EINE Form: gleich breite Segmente,
   fette Zeile mit Kurzbeschreibung darunter. Frueher war der Anzeige-Modus
   eine Tabellenzeile und die Aufloesung ein Segment. */
.settings-panel .settings-segment {
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.settings-panel #settings-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.settings-panel .settings-display-mode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--tap);
    align-items: stretch;
    gap: var(--sp-2);
}

.settings-panel :is(#settings-quality, .settings-display-mode) button {
    position: relative;
    display: grid;
    align-content: center;
    /* justify-content ueberschreibt das geerbte space-between der Altregel - sonst
       sitzt die einzige Spalte links und justify-items zentriert ins Leere. */
    justify-content: center;
    justify-items: center;
    gap: 0;
    min-height: var(--settings-control-h);
    padding: var(--sp-1) var(--sp-2);
    border-width: 1px;
    border-radius: var(--r-md);
    box-shadow: none;
    line-height: var(--lh-tight);
    text-align: center;
}

.settings-panel :is(#settings-quality, .settings-display-mode) button b {
    font-size: var(--fs-btn);
    font-weight: 800;
}

.settings-panel :is(#settings-quality, .settings-display-mode) button span {
    font-size: var(--fs-cap);
    font-weight: 600;
    text-align: center;
    opacity: .85;
}

.settings-panel .settings-section-audio .settings-row {
    min-height: var(--tap);
    margin-bottom: var(--sp-2);
}

.settings-panel .settings-row {
    min-height: var(--settings-control-h);
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

/* Buttons wachsen zum Inhalt und werden nicht ueber die Panelbreite gestreckt.
   Nur ein echtes Paar (Passwort / Wiederherstellungscode) teilt sich die Zeile. */
.settings-panel .settings-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.settings-panel .settings-btn-row .btn {
    flex: 0 1 auto;
    width: fit-content;
    margin: 0;
}

.settings-panel .settings-btn-row-spaced .btn { flex: 1 1 40%; }

/* Bedienbares folgt ab hier der Buttonstaffel des Spiels (--settings-control-h
   = --btn-h-md, --fs-btn, Gewicht 800). Die dichte Staffel --settings-fs bleibt
   dem Lesetext: Hinweise, Labels und Werte. */
.settings-panel :is(.btn, .settings-text-action) {
    min-height: var(--settings-control-h);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
    font-weight: 800;
    box-shadow: 0 var(--settings-press) 0 rgba(94, 61, 40, .28);
}

#settings-screen :is(.btn, .settings-text-action) {
    font-size: var(--fs-btn);
    font-weight: 800;
}

.settings-panel :is(.btn, .settings-text-action):active {
    transform: translateY(var(--settings-press));
    box-shadow: none;
}

.settings-panel .settings-mute-btn {
    position: relative;
    width: var(--settings-control-h);
    min-width: var(--settings-control-h);
    height: var(--settings-control-h);
    min-height: var(--settings-control-h);
    font-size: var(--fs-body);
    box-shadow: none;
}

.settings-panel .settings-mute-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--tap);
    height: var(--tap);
    transform: translate(-50%, -50%);
}

/* Der sichtbare Schalter bleibt kompakt; die zugehoerige Label-Zeile ist die 44px-Trefferflaeche. */
.settings-panel .settings-section-performance .settings-toggle-row {
    min-height: var(--tap);
}

.settings-panel .settings-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: var(--btn-h-md);
    height: var(--ic-md);
}

.settings-panel .settings-toggle input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.settings-panel .settings-toggle .slider {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    border-radius: var(--r-pill);
    background: #a9a39b;
    transition: background .2s ease;
}

.settings-panel .settings-toggle .slider::before {
    width: var(--ic-sm);
    height: var(--ic-sm);
    top: 50%;
    left: var(--sp-1);
    transform: translateY(-50%);
}

.settings-panel .settings-toggle input:checked + .slider { background: var(--c-primary); }
.settings-panel .settings-toggle input:checked + .slider::before { transform: translate(16px, -50%); }
.settings-panel .settings-toggle input:focus-visible + .slider { outline: 2px solid var(--c-focus); outline-offset: 2px; }

.settings-panel :is(#settings-quality, .settings-display-mode) button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--tap));
    height: max(100%, var(--tap));
    transform: translate(-50%, -50%);
}

/* Suchfeld und Suche bleiben in einer Zeile; Aktionsreihen wachsen nur zum Inhalt. */
.friend-search-row,
.wg-search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}

.friend-search-row input {
    min-height: var(--tap);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-body);
}

.friend-search-row .btn {
    flex: 0 0 auto;
    width: auto;
    min-height: var(--btn-h-md);
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}

#wg-search-btn {
    width: var(--icon-btn);
    min-width: var(--icon-btn);
    height: var(--icon-btn);
    min-height: var(--icon-btn);
    padding: 0;
    font-size: var(--ic-sm);
}

.friends-actions,
.wg-actions,
.wg-profile-actions,
.wg-banner-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-2);
}

.friends-actions .btn,
.wg-actions .btn,
.wg-profile-actions .btn,
.wg-banner-btns .btn {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    min-height: var(--btn-h-md);
    margin: 0;
    padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-btn);
}

#wg-create-btn,
#wg-random-btn { width: fit-content; }

@media (max-width: 720px), (max-height: 480px) {
    .friend-search-row,
    .wg-search-row { flex-direction: row; }

    .friends-actions,
    .wg-actions,
    .wg-profile-actions { flex-direction: row; }

    .friends-actions .btn,
    .wg-actions .btn,
    .wg-profile-actions .btn {
        width: auto;
        max-width: 100%;
    }

    /* ------------------------------------------------ Querformat nutzen
       Im Querformat ist HOEHE die knappe Achse und Breite reichlich. Listen
       unabhaengiger Bloecke laufen deshalb zweispaltig, statt den Spieler
       durch eine lange Saeule scrollen zu lassen. Das Muster gibt es schon
       beim Bauen (#shop-screen[data-shop-scope="playground"] #shop-items). */
    .settings-panel .settings-tabpanel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }

    /* Das Profil bleibt einspaltig - der Held ist ein breiter Streifen. Platz
       spart hier die Statistik, die im Querformat drei statt zwei Werte je
       Zeile traegt. */
    .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Bloecke mit langem Fliesstext oder Dev-Feldern brauchen die volle Zeile. */
    .settings-panel .settings-section-help,
    .settings-panel .settings-section-about { grid-column: 1 / -1; }

    /* Im Hilfe-Reiter laufen die Wege selbst zweispaltig - eine Spalte
       gleich breiter Knoepfe waere im Querformat verschenkte Breite. */
    .settings-panel .settings-link-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Die beiden Spalten teilen sich die Breite: das Label darf sie nicht
       mehr allein fuellen, sonst bricht der Regler in die naechste Zeile. */
    .settings-panel .settings-label { min-width: 0; }
    .settings-panel .settings-row { flex-wrap: nowrap; }
    .settings-panel .settings-row input[type="range"] { min-width: 0; }

    /* Handy: Info-28/Stift-30 statt Token-26 (Skill 5.3). */
    .news-poll-info,
    .wg-level-info-btn,
    .item-info-btn,
    .dog-level-row .item-info-btn { flex: 0 0 var(--btn-h-sm); width: var(--btn-h-sm); min-width: var(--btn-h-sm); height: var(--btn-h-sm); min-height: var(--btn-h-sm); }
    .profile-edit-pen { flex: 0 0 var(--icon-btn); width: var(--icon-btn); min-width: var(--icon-btn); height: var(--icon-btn); min-height: var(--icon-btn); }
}

@media (max-width: 720px), (max-height: 480px) {
    .dev-update-panel > .panel-head { padding-block: var(--sp-1); }
    .dev-update-panel > .panel-body { gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); }
    .dev-update-tab-panel { gap: var(--sp-1); padding: var(--sp-1); }
    .dev-update-tabs button,
    .dev-update-panel .btn,
    .dev-update-control-row select,
    .dev-update-value-grid input { min-height: var(--btn-h-sm); }
    .dev-update-status { min-height: 0; padding: var(--sp-1) var(--sp-2); }
    .dev-update-help { font-size: var(--fs-cap); }
}

/* Etappe 9: Browser-Standardstile duerfen die eine UI-Typografie nicht
   unbemerkt auf Arial sowie 400/700 zuruecksetzen. */
html, body { font-weight: 600; }
button, input, select, textarea { font-family: inherit; font-weight: inherit; }
strong, b { font-weight: 800; }
h1, h2, h3 { font-weight: 900; }

/* Laengere Hinweise sind Fliesstext, keine Kleinlabels. */
.settings-note,
.profile-name-note,
.profile-person-text small,
.profile-person-text .player-activity,
#gameover-screen .subtitle,
.lab-press-slider-head { font-size: var(--fs-body); }
#lab-press-storage-text { font-size: var(--fs-sm); }
.lab-window-kicker { font-size: var(--fs-body); }
.lab-window-head h1 { color: var(--c-on-color); }
.lab-window-head .lab-window-kicker { color: var(--c-on-color); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: var(--dur-reduced) !important;
        animation-iteration-count: 1 !important;
        transition-duration: var(--dur-reduced) !important;
        scroll-behavior: auto !important;
    }

    .chest-wiggle,
    .rb-star.voll,
    .rb-heart.bruch,
    #rb-timer.knapp,
    #rainbow-fx-hint { animation: none; }
}

/* ==========================================================================
   Professor Lucky's FAQ / Wissensecke Modal & Holz-Scrollbar
   ========================================================================== */

#faq-screen .faq-panel {
    max-width: min(92vw, 680px);
    max-height: min(88dvh, 620px);
}

.faq-body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--panel-pad);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #8b5a2b rgba(90, 60, 35, 0.12);
}

/* Eichenholz-Scrollbar (Webkit) */
.faq-body::-webkit-scrollbar {
    width: 10px;
}
.faq-body::-webkit-scrollbar-track {
    background: rgba(90, 60, 35, 0.12);
    border-radius: var(--r-sm);
    margin: var(--sp-1) 0;
}
.faq-body::-webkit-scrollbar-thumb {
    background: #8b5a2b;
    border-radius: var(--r-sm);
    border: 2px solid rgba(255, 250, 240, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.faq-body::-webkit-scrollbar-thumb:hover {
    background: #a46d36;
}

/* Waldheft-Banner ganz oben */
.faq-waldheft-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: rgba(76, 120, 50, 0.12);
    border: 2px solid rgba(76, 120, 50, 0.35);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.faq-waldheft-icon {
    font-size: var(--fs-disp);
    line-height: 1;
    flex-shrink: 0;
}
.faq-waldheft-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
}
.faq-waldheft-title {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: #2c4a1e;
    margin: 0;
}
.faq-waldheft-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #3b3026;
    margin: 0;
}
.faq-waldheft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    margin-top: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    min-height: var(--tap);
    background: #447a32;
    color: #ffffff;
    font-size: var(--fs-btn);
    font-weight: 800;
    border-radius: var(--r-sm);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: background 0.15s, transform 0.1s;
}
.faq-waldheft-btn:hover {
    background: #53943d;
    transform: translateY(-1px);
}

/* 2-stufiges Akkordeon */
.faq-cat-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.faq-cat-block {
    background: rgba(255, 252, 245, 0.85);
    border: 2px solid #8c735d;
    border-radius: var(--r-sm);
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(45, 30, 15, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.faq-cat-block.is-open {
    border-color: #5c3e21;
    box-shadow: 0 3px 8px rgba(45, 30, 15, 0.14);
}
.faq-cat-header {
    width: 100%;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: rgba(140, 115, 93, 0.12);
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.faq-cat-header:hover {
    background: rgba(140, 115, 93, 0.22);
}
.faq-cat-block.is-open .faq-cat-header {
    background: rgba(92, 62, 33, 0.18);
    border-bottom: 1.5px solid rgba(140, 115, 93, 0.3);
}
.faq-cat-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.faq-cat-icon {
    font-size: var(--fs-h2);
    line-height: 1;
}
.faq-cat-title {
    font-size: var(--fs-h3);
    font-weight: 800;
    color: #3b2818;
}
.faq-cat-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}
.faq-cat-badge {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #5c4533;
    background: rgba(255, 255, 255, 0.8);
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-pill);
    border: 1px solid rgba(140, 115, 93, 0.3);
}
.faq-arrow {
    font-size: var(--fs-sm);
    color: #5c3e21;
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}
.faq-arrow.is-rotated {
    transform: rotate(90deg);
}
.faq-q-list {
    display: flex;
    flex-direction: column;
    padding: var(--sp-2);
    gap: var(--sp-2);
    background: rgba(255, 253, 248, 0.6);
}
.faq-q-block {
    border: 1px solid rgba(140, 115, 93, 0.25);
    border-radius: var(--r-sm);
    background: #ffffff;
    overflow: hidden;
}
.faq-q-block.is-open {
    border-color: #8c735d;
    box-shadow: 0 1px 4px rgba(45, 30, 15, 0.08);
}
.faq-q-header {
    width: 100%;
    min-height: var(--tap);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
.faq-q-header:hover {
    background: rgba(140, 115, 93, 0.08);
}
.faq-q-text {
    font-size: var(--fs-body);
    font-weight: 800;
    color: #2b1f14;
    line-height: var(--lh-tight);
}
.faq-a-box {
    padding: var(--sp-3);
    background: rgba(254, 250, 242, 0.95);
    border-top: 1px dashed rgba(140, 115, 93, 0.35);
}
.faq-a-header {
    font-size: var(--fs-sm);
    font-weight: 800;
    color: #724e2c;
    margin-bottom: var(--sp-1);
}
.faq-a-text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: #2b2219;
    margin: 0;
}