/* Eigene, kräftigere Easing-Kurven statt der schwachen CSS-Standards, plus
   eine zweite Akzentfarbe nur für den Core-Modus (bewusst abweichend von
   --green) -- die beiden Rundentypen sollen sich auch farblich unterscheiden
   lassen, nicht nur über Text/Icon. */
:root {
    --atlas-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --atlas-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --atlas-core-accent: #f0b429;
    /* Dritte Akzentfarbe, exklusiv fuer capital-daily: ein Kartennadel-Rot,
       damit "find the capital" sich auch farblich klar von split (gruen)
       und core (amber) absetzt -- eigenes Modul, eigene Identitaet. */
    --atlas-capital-accent: #ff6b5c;
    --atlas-capital-accent-rgb: 255, 107, 92;
    /* Vierte Akzentfarbe, exklusiv fuer border-daily: Faden-Violett statt
       Signal-Rot (capital), Amber (core) oder Gruen (split) -- "find the
       border" bekommt eine eigene "Naht/Faden"-Bildsprache (siehe ABDR-Block
       weiter unten), Violett ist im Spiel bisher komplett unbelegt. */
    --atlas-border-accent: #a78bfa;
    --atlas-border-accent-rgb: 167, 139, 250;
    /* Fünfte Akzentfarbe, exklusiv für "for dummies" (Balance-Namensschirm,
       siehe ABAL-Block weiter unten): Skala-Türkis, unbelegt neben Signal-Rot
       (capital), Faden-Violett (border), Grün/Amber (split/core in-game) --
       steht für ein Messinstrument, nicht für eines der beiden Rundentypen. */
    --atlas-balance-accent: #2dd4bf;
    --atlas-balance-accent-rgb: 45, 212, 191;
}
:root[data-theme="light"] {
    --atlas-core-accent: #ad7400;
    --atlas-capital-accent: #c73a28;
    --atlas-capital-accent-rgb: 199, 58, 40;
    --atlas-border-accent: #7c3aed;
    --atlas-border-accent-rgb: 124, 58, 237;
    --atlas-balance-accent: #0f766e;
    --atlas-balance-accent-rgb: 15, 118, 110;
}

/* ── HUB (atlas-hub, neuer Einstiegsscreen) ─────────────────────
   Bewusst kein weiteres 440px-Karten-Menü wie der Rest der Plattform --
   atlas-hub soll wie der Eingang zu einer eigenen kleinen Geo-Spielesammlung
   wirken: breiterer Rahmen, große Kachel-Grid statt Liste, eigene Typografie
   für Titel/Untertitel. "balance" (ex-"for dummies"), "find the border" und
   "find the capital" sind spielbar, die vierte Kachel ist ein sichtbar
   gedimmter "coming soon"-Platzhalter. */
.hub-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}

.hub-header {
    margin-bottom: 36px;
}

.hub-header .logo {
    margin-bottom: 16px;
}

.hub-title {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 10px;
    color: var(--text);
}

.hub-subtitle {
    font-family: var(--sans);
    font-weight: 300;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--muted);
    max-width: 46ch;
}

.hub-backlink {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 18px;
    transition: color 150ms var(--atlas-ease-out);
}

.hub-backlink:hover { color: var(--text); }

.hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.hub-tile {
    position: relative;
    width: 100%;
    text-align: left;
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    cursor: pointer;
    font-family: var(--sans);
    color: var(--text);
    opacity: 0;
    transform: translateY(10px);
    animation: hubTileIn 420ms var(--atlas-ease-out) forwards;
    transition: transform 180ms var(--atlas-ease-out), border-color 180ms var(--atlas-ease-out), box-shadow 180ms var(--atlas-ease-out);
}

.hub-tile:nth-child(1) { animation-delay: 0ms; }
.hub-tile:nth-child(2) { animation-delay: 60ms; }
.hub-tile:nth-child(3) { animation-delay: 120ms; }
.hub-tile:nth-child(4) { animation-delay: 180ms; }

@keyframes hubTileIn {
    to { opacity: 1; transform: translateY(0); }
}

.hub-tile-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.hub-tile-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--surface2);
    color: var(--muted);
    flex-shrink: 0;
}

.hub-tile-icon svg {
    width: 26px;
    height: 26px;
}

.hub-tile-name {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hub-tile-desc {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--muted);
}

/* Einzige spielbare Kachel: grüner Akzent + Pfeil, per Hover leicht angehoben. */
.hub-tile-active { border-color: var(--green); box-shadow: 0 0 28px rgba(74, 222, 128, 0.10); }
.hub-tile-active .hub-tile-icon { color: var(--green); background: rgba(74, 222, 128, 0.14); }

.hub-tile-cta {
    position: absolute;
    top: 22px;
    right: 20px;
    color: var(--green);
    transition: transform 180ms var(--atlas-ease-out);
}

.hub-tile-active:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
    .hub-tile-active:hover {
        transform: translateY(-3px);
        border-color: var(--green);
        box-shadow: 0 0 36px rgba(74, 222, 128, 0.16);
    }
    .hub-tile-active:hover .hub-tile-cta { transform: translateX(3px); }
}

/* "coming soon"-Kacheln: gedimmt über Icon/Text/Border statt über die eigene
   Container-opacity, damit die Eintritts-Animation (die genau diese opacity
   nutzt) nicht mit dem Dimm-Zustand kollidiert. */
.hub-tile-soon { cursor: not-allowed; }
.hub-tile-soon .hub-tile-icon { color: var(--muted); opacity: 0.6; }
.hub-tile-soon .hub-tile-name { color: var(--muted); }
.hub-tile-soon .hub-tile-desc { opacity: 0.75; }

.hub-tile-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 9px;
}

/* Klick auf eine "coming soon"-Kachel: kein toter Link, sondern ein kurzer,
   wiederholbarer Hinweis-Nudge -- auf .hub-tile-content statt auf der Kachel
   selbst, damit die (bereits abgeschlossene) Eintritts-Animation der Kachel
   nicht erneut anläuft. */
@keyframes hubSoonNudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

.hub-tile-content.hub-nudge {
    animation: hubSoonNudge 300ms var(--atlas-ease-out);
}

@media (max-width: 600px) {
    .hub-shell { padding: 40px 16px 56px; }
    .hub-grid { grid-template-columns: 1fr; }
    .hub-tile { padding: 20px 18px; }
    .hub-tile-icon { width: 38px; height: 38px; }
    .hub-tile-icon svg { width: 22px; height: 22px; }
}

/* ── ROUND-TYPE STAGE ──────────────────────────────────────────
   Ersetzt das alte Badge/Icon-Paar komplett: statt eines statischen
   Symbols führt die Bühne die Mechanik einmal live vor, wenn eine Runde
   geladen wird -- beim Split zieht sich die Diagonale sichtbar durchs
   Quadrat, beim Core fällt der Punkt hörbar in die Mitte des Rings ein.
   Das läuft bei JEDER neuen Runde ab, nicht nur bei einem Typwechsel
   (atlasSetRoundTypeIndicator setzt data-type kurz zurück), damit sich
   auch zwei Runden desselben Typs hintereinander wie ein neuer Versuch
   anfühlen. */
.round-type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: center;
    width: 100%;
    padding: 4px 0 2px;
}

.type-stage {
    position: relative;
    width: 48px;
    height: 48px;
}

.type-stage[data-type] {
    animation: atlasStageBreathe 4s ease-in-out infinite;
}

.type-stage svg {
    position: absolute;
    inset: 0;
    overflow: visible;
}

.ts-split, .ts-core {
    opacity: 0;
    transform: scale(0.9);
    color: var(--muted);
    transition: opacity 200ms var(--atlas-ease-out), transform 200ms var(--atlas-ease-out);
}

.type-stage[data-type="split"] .ts-split {
    opacity: 1;
    transform: scale(1);
    color: var(--green);
    transition: opacity 260ms var(--atlas-ease-out) 40ms, transform 260ms var(--atlas-ease-bounce) 40ms;
}

.type-stage[data-type="core"] .ts-core {
    opacity: 1;
    transform: scale(1);
    color: var(--atlas-core-accent);
    transition: opacity 260ms var(--atlas-ease-out) 40ms, transform 260ms var(--atlas-ease-bounce) 40ms;
}

/* split: Rahmen + zwei Dreieckshälften, durch eine Diagonale getrennt, die
   sich per stroke-dashoffset selbst "zeichnet" statt einfach zu erscheinen --
   die Hälften blenden erst danach auf, so liest es sich als "Linie zuerst,
   dann die Teilung", nicht als ein einziges Cross-Fade. */
.ts-split-frame { fill: none; stroke: currentColor; stroke-width: 2; }

.ts-split-half {
    fill: currentColor;
    opacity: 0;
    transition: opacity 220ms var(--atlas-ease-out);
}
.type-stage[data-type="split"] .ts-split-half-a { opacity: 0.85; transition-delay: 260ms; }
.type-stage[data-type="split"] .ts-split-half-b { opacity: 0.22; transition-delay: 320ms; }

.ts-split-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 68;
    stroke-dashoffset: 68;
    transition: stroke-dashoffset 320ms var(--atlas-ease-out);
}
.type-stage[data-type="split"] .ts-split-line { stroke-dashoffset: 0; }

/* core: zwei Ringe als Zielscheibe + ein Punkt, der von oben hereinfällt und
   spürbar überschwingt, bevor er einrastet (--atlas-ease-bounce). */
.ts-core-ring { fill: none; stroke: currentColor; }
.ts-core-ring-outer { stroke-width: 2; opacity: 0.9; }
.ts-core-ring-inner { stroke-width: 1.5; opacity: 0.45; }

.ts-core-dot {
    fill: currentColor;
    opacity: 0;
    transform: translateY(-18px);
    transition: transform 380ms var(--atlas-ease-bounce), opacity 120ms linear;
}
.type-stage[data-type="core"] .ts-core-dot {
    opacity: 1;
    transform: translateY(0);
    transition: transform 420ms var(--atlas-ease-bounce) 60ms, opacity 80ms linear 60ms;
}

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

.round-type-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color 240ms var(--atlas-ease-out);
}

/* Legend-Card in der Daily-Lobby: statische Kurzform derselben Glyphen,
   dauerhaft nebeneinander -- keine Bewegung, das wird bei jedem Spielstart
   gezeigt, Bewegung wäre hier reine Dekoration. */
.rt-legend-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.rt-legend-row:last-child { margin-bottom: 0; }

.rt-legend-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
}

.rt-legend-title {
    display: block;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: inherit;
}

.rt-legend-desc {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .type-stage[data-type] { animation: none; }
    .ts-split, .ts-core, .ts-split-half, .ts-split-line, .ts-core-dot {
        transition-duration: 120ms !important;
        transition-delay: 0ms !important;
    }
    .ts-split, .ts-core, .ts-core-dot { transform: none !important; }

    .hub-tile {
        animation: none;
        opacity: 1;
        transform: none;
        transition: border-color 120ms ease, box-shadow 120ms ease;
    }
    .hub-tile-active:hover,
    .hub-tile-active:active { transform: none; }
    .hub-tile-content.hub-nudge { animation: none; }

    /* acap-* (capital-daily Nicht-Spiel-Screens): Bewegung raus, sanftes
       Einblenden bleibt -- kein translateY/scale/rotate mehr, nur opacity. */
    .acap-tag, .acap-shell .tagline, .acap-dossier, .acap-field-group,
    .acap-btn, #atlas-capital-rank-display, .acap-actions, .acap-lb-row {
        animation-duration: 160ms !important;
        animation-timing-function: ease !important;
        transform: none !important;
    }
    .acap-result-icon { animation: acapFadeOnly 160ms ease 60ms forwards; }
    .acap-stamp { animation: acapFadeOnly 160ms ease 300ms forwards; transform: rotate(-3deg) !important; }
    .acap-btn:active { transform: none; }
    #atlas-capital-controls .btn:active { transform: none; }

    /* abdr-* (border-daily Nicht-Spiel-Screens): gleiches Prinzip wie acap-*
       oben -- Bewegung raus, reines Opacity-Einblenden bleibt. */
    .abdr-tag, .abdr-shell .tagline, .abdr-brief, .abdr-field-group,
    .abdr-btn, #atlas-border-rank-display, .abdr-actions, .abdr-lb-row {
        animation-duration: 160ms !important;
        animation-timing-function: ease !important;
        transform: none !important;
    }
    .abdr-result-icon { animation: acapFadeOnly 160ms ease 60ms forwards; }
    .abdr-stamp { animation: acapFadeOnly 160ms ease 300ms forwards; transform: rotate(-2deg) !important; }
    .abdr-btn:active { transform: none; }
    #atlas-border-controls .btn:active { transform: none; }
    .abdr-zoom-pill { transition: opacity 120ms ease !important; }

    /* abal-* (for-dummies Nicht-Spiel-Screens): gleiches Prinzip wie acap-* bzw. abdr-*
       oben -- Bewegung raus, reines Opacity-Einblenden bleibt. */
    .abal-tag, .abal-shell .tagline, .abal-brief, .abal-field-group,
    .abal-btn, #atlas-rank-display, .abal-actions, .abal-lb-row {
        animation-duration: 160ms !important;
        animation-timing-function: ease !important;
        transform: none !important;
    }
    .abal-result-icon { animation: acapFadeOnly 160ms ease 60ms forwards; }
    .abal-stamp { animation: acapFadeOnly 160ms ease 300ms forwards; transform: rotate(-1.5deg) !important; }
    .abal-btn:active { transform: none; }
    #atlas-controls .btn:active { transform: none; }
}

@keyframes acapFadeOnly {
    to { opacity: 1; }
}

/* ── CANVAS ──────────────────────────────────────────────── */
#atlas-canvas-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    height: 60vh;
    margin: 0 auto;
    padding: 0;
}

#atlas-canvas {
    border-radius: var(--radius);
    cursor: crosshair;
    touch-action: none;
    display: block;
}

#atlas-hint {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--atlas-balance-accent);
    opacity: 0.85;
    letter-spacing: 0.5px;
    text-align: center;
    transition: opacity 0.3s;
    white-space: nowrap;
}

#atlas-hint.hidden {
    opacity: 0;
}

/* ── CANVAS (capital daily, gleiche Maße wie #atlas-canvas-wrapper) ──
   Eigene "Signal Lock"-Bildsprache: die Nadel/Ringe auf dem Canvas werden
   in JS mit --atlas-capital-accent gezeichnet (atlasCapitalDraw), diese
   Regeln betreffen nur den DOM-Rahmen drumherum. */
#atlas-capital-canvas-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    height: 74vh;
    margin: 0 auto;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#atlas-capital-canvas {
    border-radius: var(--radius);
    cursor: crosshair;
    touch-action: none;
    display: block;
}

#atlas-capital-hint {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--atlas-capital-accent);
    opacity: 0.85;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 0 2px;
    transition: opacity 0.3s;
    white-space: nowrap;
}

#atlas-capital-round-display {
    color: var(--atlas-capital-accent) !important;
}

/* ── CANVAS (locate daily, gleiche Maße wie #atlas-canvas-wrapper) ──
   Phase 2 (Kernmechanik): bewusst schlicht, geerbt aus der capital-Palette
   (--atlas-capital-accent) statt einer eigenen Identitaet -- die kommt erst
   im Design-Pass (Phase 3). */
#atlas-locate-canvas-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    height: 74vh;
    margin: 0 auto;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#atlas-locate-canvas {
    border-radius: var(--radius);
    touch-action: none;
    display: block;
}

#atlas-locate-hint {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--atlas-capital-accent);
    opacity: 0.85;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 0 2px;
    white-space: nowrap;
}

#atlas-locate-round-display {
    color: var(--atlas-capital-accent) !important;
}

/* ── CANVAS (border daily, gleiche Maße wie #atlas-canvas-wrapper) ──
   Eigene "Naht"-Bildsprache: die gezeichnete Linie/Grenze wird in JS mit
   strokeStitchPath() als Heftstich statt als glatter Strich gezeichnet
   (siehe atlasBorderDraw) -- diese Regeln betreffen nur DOM-Rahmen und die
   Zoom-Anzeige drumherum. */
#atlas-border-canvas-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 960px;
    height: 74vh;
    margin: 0 auto;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#atlas-border-canvas {
    border-radius: var(--radius);
    cursor: crosshair;
    touch-action: none;
    display: block;
}

#atlas-border-hint {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--atlas-border-accent);
    opacity: 0.85;
    letter-spacing: 0.5px;
    text-align: center;
    padding: 4px 0 2px;
    white-space: nowrap;
}

#atlas-border-round-display {
    color: var(--atlas-border-accent) !important;
}

/* Persistentes Zoom-HUD statt eines reinen Interaktions-Toasts -- zeigt den
   aktuellen Zoomstand immer dezent an (opacity 0.5) und hellt bei jeder
   Aenderung kurz auf (.active), damit Pinch/Scroll-Zoom sichtbares Feedback
   bekommt, ohne ein eigenes Steuerelement zu erfinden. */
.abdr-zoom-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    color: var(--atlas-border-accent);
    background: var(--surface2);
    border: 1px solid rgba(var(--atlas-border-accent-rgb), 0.35);
    border-radius: 20px;
    padding: 3px 9px;
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 200ms var(--atlas-ease-out), box-shadow 200ms var(--atlas-ease-out);
}

.abdr-zoom-pill.active {
    opacity: 1;
    box-shadow: 0 0 14px rgba(var(--atlas-border-accent-rgb), 0.3);
}

#atlas-border-score-display {
    transition: transform 200ms var(--atlas-ease-bounce);
}

#atlas-border-score-display.perfect {
    color: var(--green);
}

#atlas-border-message {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    padding: 4px 20px 12px;
    min-height: 24px;
}

#atlas-border-country-reveal {
    color: var(--atlas-border-accent) !important;
}

#atlas-capital-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
}

#atlas-capital-controls .btn {
    width: auto;
    min-width: 140px;
    padding: 10px 24px;
    transition: transform 140ms var(--atlas-ease-out), opacity 0.15s;
}

#atlas-capital-controls .btn:active {
    transform: scale(0.97);
}

/* Bekannter Fix: .btn ist plattformweit width:100% (style.css) -- ohne
   Override strecken sich Confirm/Clear/Next im #atlas-border-controls-Flex
   ueber die volle Fensterbreite. Gleiches Muster wie #atlas-capital-controls
   oben. */
#atlas-border-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
}

#atlas-border-controls .btn {
    width: auto;
    min-width: 140px;
    padding: 10px 24px;
    transition: transform 140ms var(--atlas-ease-out), opacity 0.15s;
}

#atlas-border-controls .btn:active {
    transform: scale(0.97);
}

#atlas-capital-score-display {
    transition: transform 200ms var(--atlas-ease-bounce);
}

#atlas-capital-score-display.perfect {
    color: var(--green);
}

#atlas-capital-message {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    padding: 4px 20px 12px;
    min-height: 24px;
}

/* .btn ist plattformweit width:100% -- ohne Override strecken sich
   Confirm/Next im #atlas-locate-controls-Flex ueber die volle Fensterbreite,
   gleiches Muster wie #atlas-capital-controls oben. */
#atlas-locate-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 8px 20px;
}

#atlas-locate-controls .btn {
    width: auto;
    min-width: 140px;
    padding: 10px 24px;
    transition: transform 140ms var(--atlas-ease-out), opacity 0.15s;
}

#atlas-locate-controls .btn:active {
    transform: scale(0.97);
}

#atlas-locate-message {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    padding: 4px 20px 12px;
    min-height: 24px;
}

#atlas-capital-country-reveal {
    color: var(--atlas-capital-accent) !important;
}

/* ── ACAP "FIELD DOSSIER" (Namenseingabe/Gameover/Leaderboard) ──────────
   Eigenstaendige Bildsprache fuer die drei Nicht-Spiel-Screens des
   capital-daily: statt der generischen 440px-Karten-Optik von
   atlas-daily-lobby/-gameover/-leaderboard ein "Feldbericht"-Look --
   gestrichelte Passfoto-Ecken, Mono-Case-Tag, Akzentrot durchgaengig.
   Bewusst eigener Klassen-Namespace (acap-*), keine der bestehenden
   .card/.split-lb-*-Klassen werden angefasst oder wiederverwendet. */
.acap-shell {
    max-width: 440px;
    margin: 0 auto;
    padding: 72px 20px 48px;
}

.acap-shell.acap-center { text-align: center; }

.acap-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--atlas-capital-accent);
    border: 1px solid rgba(var(--atlas-capital-accent-rgb), 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(6px);
    animation: acapIn 380ms var(--atlas-ease-out) forwards;
}

.acap-logo { margin-bottom: 6px; }
.acap-accent { color: var(--atlas-capital-accent); }

.acap-shell .tagline {
    opacity: 0;
    transform: translateY(6px);
    animation: acapIn 380ms var(--atlas-ease-out) 40ms forwards;
}

/* Briefing-Panel: gestrichelter Rahmen + zwei gegenueberliegende
   "Passfoto"-Eckwinkel, Akzent-Tönung im Hintergrund. */
.acap-dossier {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px dashed rgba(var(--atlas-capital-accent-rgb), 0.4);
    border-radius: 10px;
    background: rgba(var(--atlas-capital-accent-rgb), 0.06);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    opacity: 0;
    transform: translateY(8px);
    animation: acapIn 380ms var(--atlas-ease-out) 90ms forwards;
}

.acap-dossier::before,
.acap-dossier::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--atlas-capital-accent);
    opacity: 0.7;
}
.acap-dossier::before { top: -1px; left: -1px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.acap-dossier::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }

.acap-dossier-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--atlas-capital-accent);
}

.acap-field-group {
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(8px);
    animation: acapIn 380ms var(--atlas-ease-out) 140ms forwards;
}

.acap-field-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.acap-field {
    width: 100%;
    padding: 10px 2px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 180ms var(--atlas-ease-out);
}

.acap-field:focus {
    border-bottom-color: var(--atlas-capital-accent);
}

.locate-hard-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    animation: acapIn 380ms var(--atlas-ease-out) 180ms forwards;
}

.locate-hard-toggle input[type="checkbox"] {
    accent-color: var(--atlas-capital-accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.acap-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 140ms var(--atlas-ease-out), opacity 150ms, box-shadow 150ms var(--atlas-ease-out);
    opacity: 0;
    transform: translateY(8px);
    animation: acapIn 380ms var(--atlas-ease-out) 190ms forwards;
}

.acap-btn:nth-of-type(2) { animation-delay: 230ms; }

.acap-btn:active { transform: scale(0.97); }

.acap-btn-primary {
    background: var(--atlas-capital-accent);
    color: #1a0a08;
    box-shadow: 0 0 0 rgba(var(--atlas-capital-accent-rgb), 0);
}

@media (hover: hover) and (pointer: fine) {
    .acap-btn-primary:hover { box-shadow: 0 0 24px rgba(var(--atlas-capital-accent-rgb), 0.28); }
}

.acap-btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

@keyframes acapIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Gameover: Koordinaten-Fix-Anmutung statt einer schlichten Zahl -- die
   Nadel-Ikone + der "signal locked"-Stempel rahmen den Score als Ergebnis
   einer Ortung, nicht nur als Punktzahl. */
.acap-result-icon {
    display: inline-flex;
    color: var(--atlas-capital-accent);
    opacity: 0;
    animation: acapPop 460ms var(--atlas-ease-bounce) 60ms forwards;
}

.acap-result-score {
    font-family: var(--mono);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--text);
    margin: 10px 0 2px;
}

.acap-stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--atlas-capital-accent);
    border: 1.5px solid rgba(var(--atlas-capital-accent-rgb), 0.55);
    border-radius: 4px;
    padding: 3px 10px;
    transform: rotate(-3deg);
    opacity: 0;
    animation: acapStampIn 320ms var(--atlas-ease-bounce) 420ms forwards;
}

@keyframes acapPop {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes acapStampIn {
    0%   { opacity: 0; transform: rotate(-3deg) scale(1.4); }
    100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

#atlas-capital-rank-display {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--muted);
    margin: 14px 0 18px;
    opacity: 0;
    animation: acapIn 340ms var(--atlas-ease-out) 260ms forwards;
}

.acap-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    animation: acapIn 340ms var(--atlas-ease-out) 300ms forwards;
}

.acap-actions .acap-btn { animation: none; opacity: 1; transform: none; margin-top: 0; }

/* Leaderboard: Rang-Medaillon statt Nummer-in-Text, eigener Zeilentyp. */
.acap-lb-list {
    max-height: 60vh;
    overflow-y: auto;
}

.acap-lb-empty {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 8px 0;
}

.acap-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(6px);
    animation: acapIn 320ms var(--atlas-ease-out) forwards;
}

.acap-lb-row:last-child { border-bottom: none; }

.acap-lb-rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border);
}

.acap-lb-row:nth-child(1) .acap-lb-rank {
    color: var(--atlas-capital-accent);
    border-color: var(--atlas-capital-accent);
    background: rgba(var(--atlas-capital-accent-rgb), 0.12);
}

.acap-lb-name {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--text);
}

.acap-lb-score {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--atlas-capital-accent);
}

.acap-lb-hard {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 1px;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 5px;
}

/* ── ABDR "STITCHED SEAM" (Namenseingabe/Gameover/Leaderboard) ──────────
   Eigenstaendige Bildsprache fuer die drei Nicht-Spiel-Screens des
   border-daily: eine Grenze ist auch eine Naht zwischen zwei Stuecken Stoff
   -- Nadel/Faden-Icon, laufender Heftstich statt gestrichelter Passfoto-
   Ecken (acap-dossier), Faden-Violett (--atlas-border-accent) durchgaengig.
   Eigener Klassen-Namespace (abdr-*), keine .acap-* oder .card-Klassen
   angefasst oder wiederverwendet. */
.abdr-shell {
    max-width: 440px;
    margin: 0 auto;
    padding: 72px 20px 48px;
}

.abdr-shell.abdr-center { text-align: center; }

.abdr-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--atlas-border-accent);
    border: 1px solid rgba(var(--atlas-border-accent-rgb), 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(6px);
    animation: abdrIn 380ms var(--atlas-ease-out) forwards;
}

.abdr-logo { margin-bottom: 6px; }
.abdr-accent { color: var(--atlas-border-accent); }

.abdr-shell .tagline {
    opacity: 0;
    transform: translateY(6px);
    animation: abdrIn 380ms var(--atlas-ease-out) 40ms forwards;
}

/* Briefing-Panel: schlichter, gedeckter Rahmen (bewusst KEIN dashed-border
   wie acap-dossier) plus zwei kleine Kreuzstich-Marken an gegenueber-
   liegenden Ecken statt der L-foermigen Passfoto-Ecken von acap-dossier --
   eigenstaendiges, aber unkompliziertes Motiv, das den Radius des Panels
   nicht antasten muss (die Marken sind kleine, unabhaengige 11x11px-Boxen). */
.abdr-brief {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--atlas-border-accent-rgb), 0.32);
    background: rgba(var(--atlas-border-accent-rgb), 0.06);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    opacity: 0;
    transform: translateY(8px);
    animation: abdrIn 380ms var(--atlas-ease-out) 90ms forwards;
}

.abdr-brief::before,
.abdr-brief::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    background:
        linear-gradient(45deg, transparent 46%, rgba(var(--atlas-border-accent-rgb), 0.85) 46% 54%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, rgba(var(--atlas-border-accent-rgb), 0.85) 46% 54%, transparent 54%);
}
.abdr-brief::before { top: -5px; left: -5px; }
.abdr-brief::after  { bottom: -5px; right: -5px; }

.abdr-brief-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--atlas-border-accent);
}

.abdr-field-group {
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(8px);
    animation: abdrIn 380ms var(--atlas-ease-out) 140ms forwards;
}

.abdr-field-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.abdr-field {
    width: 100%;
    padding: 10px 2px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 180ms var(--atlas-ease-out);
}

.abdr-field:focus {
    border-bottom-color: var(--atlas-border-accent);
}

.abdr-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 140ms var(--atlas-ease-out), opacity 150ms, box-shadow 150ms var(--atlas-ease-out);
    opacity: 0;
    transform: translateY(8px);
    animation: abdrIn 380ms var(--atlas-ease-out) 190ms forwards;
}

.abdr-btn:nth-of-type(2) { animation-delay: 230ms; }

.abdr-btn:active { transform: scale(0.97); }

.abdr-btn-primary {
    background: var(--atlas-border-accent);
    color: #170f2e;
}

@media (hover: hover) and (pointer: fine) {
    .abdr-btn-primary:hover { box-shadow: 0 0 24px rgba(var(--atlas-border-accent-rgb), 0.28); }
}

.abdr-btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

@keyframes abdrIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Gameover: Naht-Icon statt Zielscheibe/Nadel -- der "seam sealed"-Stempel
   rahmt den Score als abgeschlossene, verknotete Naht statt einer reinen
   Ortung (Abgrenzung zu acap-result-icon/acap-stamp). */
.abdr-result-icon {
    display: inline-flex;
    color: var(--atlas-border-accent);
    opacity: 0;
    animation: acapPop 460ms var(--atlas-ease-bounce) 60ms forwards;
}

.abdr-result-score {
    font-family: var(--mono);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--text);
    margin: 10px 0 2px;
}

.abdr-stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--atlas-border-accent);
    border: 1.5px solid rgba(var(--atlas-border-accent-rgb), 0.55);
    border-radius: 4px;
    padding: 3px 10px;
    transform: rotate(-2deg);
    opacity: 0;
    animation: abdrStampIn 320ms var(--atlas-ease-bounce) 420ms forwards;
}

@keyframes abdrStampIn {
    0%   { opacity: 0; transform: rotate(-2deg) scale(1.4); }
    100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}

#atlas-border-rank-display {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--muted);
    margin: 14px 0 18px;
    opacity: 0;
    animation: abdrIn 340ms var(--atlas-ease-out) 260ms forwards;
}

.abdr-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    animation: abdrIn 340ms var(--atlas-ease-out) 300ms forwards;
}

.abdr-actions .abdr-btn { animation: none; opacity: 1; transform: none; margin-top: 0; }

/* Leaderboard: gleicher Aufbau wie acap-lb-*, eigener Namespace/Akzent. */
.abdr-lb-list {
    max-height: 60vh;
    overflow-y: auto;
}

.abdr-lb-empty {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 8px 0;
}

.abdr-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(6px);
    animation: abdrIn 320ms var(--atlas-ease-out) forwards;
}

.abdr-lb-row:last-child { border-bottom: none; }

.abdr-lb-rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border);
}

.abdr-lb-row:nth-child(1) .abdr-lb-rank {
    color: var(--atlas-border-accent);
    border-color: var(--atlas-border-accent);
    background: rgba(var(--atlas-border-accent-rgb), 0.12);
}

.abdr-lb-name {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--text);
}

.abdr-lb-score {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--atlas-border-accent);
}

/* ── ABAL "BALANCE READING" (Namenseingabe/Gameover/Leaderboard) ────────
   Eigenstaendige Bildsprache fuer die drei Nicht-Spiel-Screens von "for
   dummies": split (Flaeche exakt halbieren) und core (Schwerpunkt treffen)
   sind beides Formen von Balance -- Flaechen- vs. Massenausgleich. Statt
   Passfoto-Ecken (acap) oder Kreuzstich-Marken (abdr) bekommt das Panel
   einen Skalenstrich am oberen Rand (::before, repeating-linear-gradient) --
   ein Messinstrument, kein Dokument/Naht. Eigener Klassen-Namespace
   (abal-*), keine .acap-*, .abdr-* oder .card-Klassen angefasst oder wiederverwendet. */
.abal-shell {
    max-width: 440px;
    margin: 0 auto;
    padding: 72px 20px 48px;
}

.abal-shell.abal-center { text-align: center; }

.abal-tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--atlas-balance-accent);
    border: 1px solid rgba(var(--atlas-balance-accent-rgb), 0.4);
    border-radius: 20px;
    padding: 3px 10px;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(6px);
    animation: abalIn 380ms var(--atlas-ease-out) forwards;
}

.abal-logo { margin-bottom: 6px; }
.abal-accent { color: var(--atlas-balance-accent); }

.abal-shell .tagline {
    opacity: 0;
    transform: translateY(6px);
    animation: abalIn 380ms var(--atlas-ease-out) 40ms forwards;
}

/* Briefing-Panel: schlichter Rahmen + ein Skalenstrich (Tick-Marken wie an
   einer Waage/einem Messgeraet) entlang der Oberkante statt Ecken-Motiven. */
.abal-brief {
    position: relative;
    padding: 20px 20px 18px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--atlas-balance-accent-rgb), 0.3);
    background: rgba(var(--atlas-balance-accent-rgb), 0.06);
    font-size: 0.85rem;
    line-height: 1.7;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    animation: abalIn 380ms var(--atlas-ease-out) 90ms forwards;
}

.abal-brief::before {
    content: '';
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 5px;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(var(--atlas-balance-accent-rgb), 0.55) 0,
        rgba(var(--atlas-balance-accent-rgb), 0.55) 1.5px,
        transparent 1.5px,
        transparent 9px
    );
}

.abal-brief-intro {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--atlas-balance-accent-rgb), 0.2);
}

.abal-brief-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--atlas-balance-accent);
}

.abal-field-group {
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(8px);
    animation: abalIn 380ms var(--atlas-ease-out) 140ms forwards;
}

.abal-field-label {
    display: block;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.abal-field {
    width: 100%;
    padding: 10px 2px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 180ms var(--atlas-ease-out);
}

.abal-field:focus {
    border-bottom-color: var(--atlas-balance-accent);
}

.abal-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 8px;
    border: none;
    border-radius: 8px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 140ms var(--atlas-ease-out), opacity 150ms, box-shadow 150ms var(--atlas-ease-out);
    opacity: 0;
    transform: translateY(8px);
    animation: abalIn 380ms var(--atlas-ease-out) 190ms forwards;
}

.abal-btn:nth-of-type(2) { animation-delay: 230ms; }

.abal-btn:active { transform: scale(0.97); }

.abal-btn-primary {
    background: var(--atlas-balance-accent);
    color: #052422;
}

@media (hover: hover) and (pointer: fine) {
    .abal-btn-primary:hover { box-shadow: 0 0 24px rgba(var(--atlas-balance-accent-rgb), 0.28); }
}

.abal-btn-secondary {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
}

@keyframes abalIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Gameover: die Waage-Ikone ruht mittig (kein Ausschlag mehr) -- Sinnbild fuer
   "im Gleichgewicht", der Stempel bestaetigt es als Text. */
.abal-result-icon {
    display: inline-flex;
    color: var(--atlas-balance-accent);
    opacity: 0;
    animation: acapPop 460ms var(--atlas-ease-bounce) 60ms forwards;
}

.abal-result-score {
    font-family: var(--mono);
    font-size: 2.8rem;
    font-weight: 600;
    color: var(--text);
    margin: 10px 0 2px;
}

.abal-stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--atlas-balance-accent);
    border: 1.5px solid rgba(var(--atlas-balance-accent-rgb), 0.55);
    border-radius: 4px;
    padding: 3px 10px;
    transform: rotate(-1.5deg);
    opacity: 0;
    animation: abalStampIn 320ms var(--atlas-ease-bounce) 420ms forwards;
}

@keyframes abalStampIn {
    0%   { opacity: 0; transform: rotate(-1.5deg) scale(1.4); }
    100% { opacity: 1; transform: rotate(-1.5deg) scale(1); }
}

#atlas-rank-display {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--muted);
    margin: 14px 0 18px;
    opacity: 0;
    animation: abalIn 340ms var(--atlas-ease-out) 260ms forwards;
}

.abal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    animation: abalIn 340ms var(--atlas-ease-out) 300ms forwards;
}

.abal-actions .abal-btn { animation: none; opacity: 1; transform: none; margin-top: 0; }

/* Leaderboard: gleicher Aufbau wie acap-lb-* bzw. abdr-lb-*, eigener Namespace/Akzent.
   Ersetzt die zuvor wiederverwendeten .split-lb-*-Klassen aus style.css
   (plattformweit, split.js) -- "for dummies" bekommt eine eigene Zeile statt
   fremder Klassen. */
.abal-lb-list {
    max-height: 60vh;
    overflow-y: auto;
}

.abal-lb-empty {
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 8px 0;
}

.abal-lb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border);
    opacity: 0;
    transform: translateY(6px);
    animation: abalIn 320ms var(--atlas-ease-out) forwards;
}

.abal-lb-row:last-child { border-bottom: none; }

.abal-lb-rank {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    border: 1px solid var(--border);
}

.abal-lb-row:nth-child(1) .abal-lb-rank {
    color: var(--atlas-balance-accent);
    border-color: var(--atlas-balance-accent);
    background: rgba(var(--atlas-balance-accent-rgb), 0.12);
}

.abal-lb-name {
    flex: 1;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--text);
}

.abal-lb-score {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--atlas-balance-accent);
}

/* ── FEEDBACK BAR (split-Rundentyp) ──────────────────────── */
#atlas-split-feedback-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 20px;
    min-height: 48px;
    font-family: var(--mono);
}

.split-area-label {
    font-size: 0.9rem;
    color: var(--muted);
    min-width: 60px;
    text-align: center;
    transition: color 0.2s;
}

#atlas-feedback-score {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text);
    min-width: 80px;
    text-align: center;
    transition: all 0.2s;
}

#atlas-feedback-score.perfect {
    color: var(--green);
}

#atlas-core-score-display.perfect {
    color: var(--green);
}

/* ── CONTROLS ────────────────────────────────────────────── */
#atlas-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 20px 8px;
}

#atlas-controls .btn {
    width: auto;
    min-width: 140px;
    padding: 10px 24px;
    transition: transform 140ms var(--atlas-ease-out), opacity 0.15s;
}

#atlas-controls .btn:active {
    transform: scale(0.97);
}

/* ── MESSAGE ─────────────────────────────────────────────── */
#atlas-message {
    text-align: center;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--muted);
    padding: 4px 20px 12px;
    min-height: 24px;
}

#atlas-country-reveal {
    color: var(--atlas-balance-accent) !important;
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    #atlas-canvas-wrapper { padding: 8px 0 0; }

    #atlas-canvas {
        width: 100% !important;
        height: 72vw !important;
        border-radius: 0;
    }

    #atlas-hint { font-size: 0.7rem; }
    .type-stage { width: 40px; height: 40px; }
    #atlas-split-feedback-bar { padding: 8px 12px; gap: 10px; }
    .split-area-label { font-size: 0.8rem; min-width: 50px; }
    #atlas-feedback-score { font-size: 1.2rem; }
    #atlas-controls { padding: 0 12px 8px; }
    #atlas-controls .btn { min-width: 100px; padding: 10px 16px; }
    #atlas-message { padding: 4px 12px 8px; }

    #atlas-capital-canvas-wrapper {
        height: auto;
        padding: 8px 0 0;
    }
    #atlas-capital-canvas {
        width: 100% !important;
        height: 72vw !important;
        border-radius: 0;
    }
    #atlas-capital-hint { font-size: 0.7rem; }
    #atlas-capital-controls .btn { min-width: 100px; padding: 10px 16px; }
    #atlas-capital-message { padding: 4px 12px 8px; }

    .acap-shell { padding: 56px 16px 40px; }
    .acap-result-score { font-size: 2.2rem; }

    #atlas-border-canvas-wrapper {
        height: auto;
        padding: 8px 0 0;
    }
    #atlas-border-canvas {
        width: 100% !important;
        height: 72vw !important;
        border-radius: 0;
    }
    #atlas-border-hint { font-size: 0.7rem; }
    #atlas-border-controls .btn { min-width: 100px; padding: 10px 16px; }
    #atlas-border-message { padding: 4px 12px 8px; }
    .abdr-zoom-pill { top: 6px; right: 6px; }

    .abdr-shell { padding: 56px 16px 40px; }
    .abdr-result-score { font-size: 2.2rem; }

    .abal-shell { padding: 56px 16px 40px; }
    .abal-result-score { font-size: 2.2rem; }

    #atlas-locate-canvas-wrapper {
        height: auto;
        padding: 8px 0 0;
    }
    #atlas-locate-canvas {
        width: 100% !important;
        height: 72vw !important;
        border-radius: 0;
    }
    #atlas-locate-hint { font-size: 0.7rem; }
    #atlas-locate-controls .btn { min-width: 100px; padding: 10px 16px; }
    #atlas-locate-message { padding: 4px 12px 8px; }
}

@keyframes splitShake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

@keyframes splitPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); box-shadow: 0 0 12px rgba(74, 222, 128, 0.4); }
    100% { transform: scale(1); box-shadow: none; }
}