/* =========================================================
   SKIN V28 -- gleicht die App optisch an die Landingpage (Design-Master v28) an.

   Auftrag des Inhabers (2026-10-06): "nur an das neue Design anpassen, nicht mehr
   und nicht weniger". Deshalb ist diese Datei eine reine Optik-Schicht:
     - wird als LETZTES Stylesheet geladen (siehe app.html) und ueberschreibt nur
       Aussehen: Hintergrund, Flaechen, Linien, Schrift, Farben, Knoepfe, Abstaende.
     - keine Funktion, kein Ablauf, keine Reihenfolge von Bedienelementen geaendert,
       kein JavaScript noetig. Alle Klassen/IDs, an denen app.js haengt, bleiben.
     - Loeschen dieser einen Datei (plus Link in app.html) stellt die alte Optik
       vollstaendig wieder her.

   Leitlinien, aus der Landing uebernommen:
     - ruhiger Navy-Hintergrund mit Koernung statt Neon-Foto, keine Scanlines
     - EINE Akzentfarbe (Cyan), Gold nur fuer Punkte/Prestige, Rot/Gruen nur fuer
       Falsch/Richtig. Magenta bleibt Ghost Duell und der Insider-Klasse vorbehalten.
     - Flaechen: dunkles Glas mit feiner neutraler Linie, eckig, kein Aussen-Glow
     - Fjalla One fuer Ueberschriften, Barlow fuer Text, JetBrains Mono/EC Pathway
       fuer Zahlen
     - Bewegung zurueckhaltend: keine Lichtstreifen, kein Pulsieren von Titeln
   Die App bleibt dabei bewusst dichter und funktionaler als die Landing
   (Marken-Regel: verwandt, aber nicht identisch).
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
    --navy: #081228; --navy2: #04070f; --card: #1B1E49; --card2: #10132c;
    --subtext: #B6C0E0; --muted: #818EB4; --line: rgba(255,255,255,0.08);
    --glass-bg: rgba(20,23,55,0.55);
    --f-display: 'Fjalla One', Impact, sans-serif;
    --f-body: 'Barlow', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(.22,1,.36,1);
    --max: 1180px;
    --gutter: clamp(16px, 3.05vw, 32px);
    --hdr: 60px;
    --cut: 10px;

    /* ec-Tokens der Unterseiten (Rangliste/Profil/Ergebnis) auf die Landing-Werte ziehen */
    --ec-bg-0: #04070f; --ec-bg-1: #060a16; --ec-bg-2: #081228; --ec-bg-3: #0b1024;
    --ec-panel: #0b0f22; --ec-panel-elevated: #10142b; --ec-panel-active: #151a36;
    --ec-text-secondary: #B6C0E0; --ec-text-tertiary: #818EB4; --ec-text-muted: #6f7b9e;
    --ec-border-white: rgba(255,255,255,0.08);
    --ec-border-subtle: rgba(255,255,255,0.06);
    --ec-border-default: rgba(255,255,255,0.14);
    --ec-border-strong: rgba(0,240,255,0.38);
    --ec-surface-hover: rgba(255,255,255,0.035);
    --ec-glow-cyan: none; --ec-glow-cyan-strong: none; --ec-glow-pink: none; --ec-glow-gold: none;
    --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;
}
@media (max-width: 768px) { :root { --hdr: 52px; } }

/* ---------- 2. Umgebung ---------- */
html { scrollbar-color: rgba(0,240,255,0.55) transparent; }
* { scrollbar-color: rgba(0,240,255,0.45) transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.45); border: 2px solid var(--navy2); background-clip: padding-box; box-shadow: none; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--cyan); background-clip: padding-box; box-shadow: none; }
::selection { background: var(--cyan); color: #001018; }

body { background-color: var(--navy2); font-weight: 500; }
/* Derselbe ruhige Verlauf wie auf der Landing (Cyan-Hauch oben links, ein Hauch Gold),
   dazu dieselbe feine Koernung. Liegt hinter allem, auch hinter den Antwort-Blitzern. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -5; pointer-events: none;
    background:
        radial-gradient(680px 520px at 6% -8%, rgba(0,240,255,.13), transparent 58%),
        radial-gradient(500px 420px at 78% 55%, rgba(255,215,0,.04), transparent 62%),
        radial-gradient(640px 500px at 18% 92%, rgba(0,240,255,.06), transparent 60%),
        linear-gradient(180deg, var(--navy) 0%, #05070f 45%, var(--navy2) 100%);
}
body::after {
    content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.bg-fx-layer { background: none !important; }
.app-container::before { display: none; }

/* ---------- 3. Kopfzeile: volle Breite, Logo links, flache Linien-Icons ---------- */
.ehren-header-full {
    max-width: none; height: var(--hdr); grid-template-rows: var(--hdr);
    grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-8);
    padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
    background: rgba(4,6,14,.68); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line); box-shadow: none;
}
.header-center { order: -1; height: auto; justify-content: flex-start; gap: var(--s-3); }
.header-left { order: 0; display: flex; align-items: center; gap: var(--s-4); }
.header-right { order: 1; gap: var(--s-4) !important; }
.header-logo-col { align-items: flex-start; gap: 3px; }
.header-logo { height: 26px; filter: drop-shadow(0 0 10px rgba(0,240,255,.4)); }
.header-tagline { font: 600 8.5px/1 var(--f-body); letter-spacing: 1.6px; color: var(--muted); padding-left: 2px; }
/* Das Versions-Abzeichen "BETA v1.5" gehoert zur alten Optik und ist auf der Landing
   nicht vorhanden. Nur ausgeblendet, das Element bleibt im HTML. */
.header-beta-badge { display: none; }

.header-nav { gap: var(--s-1); }
.header-btn { border: none; }
.header-icon-btn {
    width: 36px; height: 36px; border-radius: 50%; overflow: visible;
    transition: background .2s, opacity .2s;
}
.header-icon-btn::after { display: none; }
.header-nav-icon { width: 18px; height: 18px; opacity: .85; transition: opacity .2s, filter .2s; }
@media (hover: hover) and (pointer: fine) {
    .header-btn:hover { background: rgba(255,255,255,.06); border-color: transparent; box-shadow: none; transform: none; }
    .header-icon-btn:hover { transform: none; background: rgba(255,255,255,.06); }
    .header-icon-btn:hover .header-nav-icon { filter: brightness(1.45); opacity: 1; }
}
.header-divider { background: var(--line); height: 20px; }
.header-score-box { align-items: flex-end; line-height: 1.1; gap: 2px; }
.header-score-label { font: 700 8.5px/1 var(--f-body); letter-spacing: 1.4px; color: var(--muted); }
.header-score-value { font-size: 15px; color: var(--headline); text-shadow: none; }

.meet-hosts-icon { width: 18px; height: 18px; display: block; filter: none; animation: none; }
.meet-hosts-icon img { width: 18px; height: 18px; display: block; opacity: .85; }
#meet-hosts-btn.hosts-hidden .meet-hosts-icon { filter: none; opacity: .5; }
#meet-hosts-btn.hosts-hidden .meet-hosts-icon::after { background: var(--subtext); left: -2px; right: -2px; }
.host-hint-bubble {
    background: #0b0f22; border: 1px solid rgba(255,255,255,.14); color: var(--subtext);
    font: 600 11.5px/1.3 var(--f-body); padding: 8px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.host-hint-bubble::before { border-bottom-color: rgba(255,255,255,.14); }
.host-hint-bubble::after { border-bottom-color: #0b0f22; }

.auth-btn { border-radius: 50%; }
.auth-btn.logged-in { box-shadow: none; border: 1px solid rgba(0,240,255,.55); }
.auth-btn.tier1, .auth-btn.tier2, .auth-btn.tier3, .auth-btn.tier4 { box-shadow: none; }
.creator-badge { font: 700 9.5px/1 var(--f-body); letter-spacing: 1px; color: var(--cyan); border: 1px solid rgba(0,240,255,.35); text-shadow: none; padding: 6px 10px; }
.creator-badge .dot { background: var(--cyan); box-shadow: none; }

/* ---------- 4. Rahmen: kein gerahmter Kasten mehr, Inhalt steht frei auf der Seite ---------- */
.app-container {
    max-width: var(--max); height: calc(100dvh - var(--hdr));
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: none; box-shadow: none;
}
.view-container { padding: clamp(20px, 4vh, 44px) var(--gutter) 64px; }
.view-container:has(.leaderboard-view-wide) { padding-left: var(--gutter); padding-right: var(--gutter); }
.center-view { max-width: 1116px; animation-name: skinRise; animation-duration: .45s; animation-timing-function: var(--ease); }
@keyframes skinRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.legal-footer { background: linear-gradient(to top, rgba(4,7,15,.96) 60%, rgba(4,7,15,0)); padding: 12px var(--gutter); }
.legal-footer-links a { font: 600 11px var(--f-body); letter-spacing: .3px; color: var(--muted); }
.legal-footer-links a:not(:last-child)::after { color: rgba(129,142,180,.4); }
.legal-footer-satire { font: 500 10px var(--f-body); color: #7c88a8; border-right-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .legal-footer-links a:hover { color: #fff; border-color: transparent; } }

/* ---------- 5. Ueberschriften ---------- */
.section-title {
    font: 400 clamp(22px, 2.6vw, 30px)/1 var(--f-display); letter-spacing: -.012em; text-transform: uppercase;
    color: var(--headline); text-align: left; text-shadow: none; margin: 0 0 var(--s-6);
}
.section-divider { display: none; }
.section-divider.quiz-divider { display: block; }
/* Begruessung als Augenbraue ueber der Ueberschrift: derselbe Punkt-Strich-Auftakt wie
   die Abschnitts-Augenbrauen der Landing. */
.greeting {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; margin: 0 0 var(--s-3);
    font: 700 10.5px/1 var(--f-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan); text-shadow: none;
}
.greeting::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0; }
.greeting .greeting-name { color: var(--headline); text-shadow: none; margin-left: -4px; }
.session-momentum { width: 100%; text-align: left; font: 500 13px/1.5 var(--f-body); letter-spacing: 0; color: var(--subtext); margin: calc(-1 * var(--s-3)) 0 var(--s-5); }
.pink-glow, .purple-glow, .cyan-glow, .gold-glow { text-shadow: none; }

/* ---------- 6. Kacheln ---------- */
.grid-2-col { gap: var(--s-4); }
.bento-tile {
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 60%);
    border: 1px solid var(--line); padding: var(--s-5); gap: var(--s-4); align-items: flex-start;
    transition: transform .3s var(--ease), border-color .25s, background .25s, box-shadow .3s;
}
.bento-tile::before { display: none; }
.matrix-tile::before { display: none; }
.tile-icon {
    width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
    background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.2);
}
.tile-icon-img, .tile-icon svg { width: 22px; height: 22px; opacity: 1; }
.hover-gold .tile-icon { background: rgba(255,215,0,.07); border-color: rgba(255,215,0,.24); }
.hover-red .tile-icon { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.26); }
.tile-content { gap: 4px; min-width: 0; }
.tile-content h4 { font: 400 19px/1.08 var(--f-display); letter-spacing: -.004em; color: #fff; text-transform: uppercase; }
.tile-content p { font: 500 13px/1.45 var(--f-body); color: var(--subtext); }
.meta-tag { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px; }
.meta-tag.cyan { color: var(--muted); }
.meta-tag.red { color: #ff8a8a; }
.tile-question-count { font: 700 10px/1 var(--f-mono); letter-spacing: .3px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.creator-genre-tag { font: 500 11.5px var(--f-body); color: var(--muted); }
.mode-grid-divider { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; color: var(--muted); margin: var(--s-3) 0 0; }
.mode-grid-divider::after { background: var(--line); }

@media (hover: hover) and (pointer: fine) {
    .hover-cyan:hover, .hover-purple:hover {
        border-color: rgba(0,240,255,.45); background: linear-gradient(165deg, rgba(0,240,255,.07), rgba(0,240,255,.012) 60%);
        transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.42);
    }
    .hover-gold:hover {
        border-color: rgba(255,215,0,.5); background: linear-gradient(165deg, rgba(255,215,0,.07), rgba(255,215,0,.012) 60%);
        transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.42);
    }
    .hover-red:hover {
        border-color: rgba(239,68,68,.5); background: linear-gradient(165deg, rgba(239,68,68,.08), rgba(239,68,68,.012) 60%);
        transform: translateY(-3px); box-shadow: 0 22px 44px rgba(0,0,0,.42);
    }
    .hover-cyan:hover .tile-icon-img, .hover-red:hover .tile-icon-img, .hover-gold:hover .tile-icon-img,
    .hover-purple:hover .tile-icon-img, .hover-purple:hover .tile-icon svg { filter: none; transform: none; }
}
.bento-tile.is-selected {
    border-color: rgba(0,240,255,.8) !important; background: linear-gradient(165deg, rgba(0,240,255,.1), rgba(0,240,255,.02) 60%) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.4) !important; transform: translateY(-2px) !important;
}
.bento-tile.is-selected .tile-icon-img { filter: none !important; transform: none !important; }
[data-category="boss"].is-selected {
    border-color: rgba(239,68,68,.8) !important; background: linear-gradient(165deg, rgba(239,68,68,.1), rgba(239,68,68,.02) 60%) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.4) !important;
}

/* Startseite der App: drei Kacheln pro Reihe statt zwei sehr breiter, die beiden
   Direkt-Einstiege darunter teilen sich die Breite. */
@media (min-width: 1051px) {
    #matrix-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #matrix-grid > .bento-tile { grid-column: span 2; min-height: 148px; }
    #matrix-grid > #ghost-duel-tile, #matrix-grid > #creator-room-tile { grid-column: span 3; min-height: 0; }
    #matrix-grid > .mode-grid-divider, #matrix-grid > #room-join-status { grid-column: 1 / -1; }
    #matrix-grid > .add-friend-row { grid-column: span 3; }
    #creator-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #view-mode { max-width: 820px; }
    #view-room-create .grid-2-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Creator-Kacheln */
#creator-grid .bento-tile { align-items: center; }
.creator-avatar-placeholder {
    width: 44px; height: 44px; background: rgba(0,240,255,.1); border: 1px solid rgba(0,240,255,.28); color: var(--cyan);
    font: 400 18px/1 var(--f-display); box-shadow: none;
}
.creator-avatar-photo { border: 1px solid rgba(255,255,255,.22); box-shadow: none; filter: grayscale(.35) contrast(1.05); }
.creator-tile.is-selected .creator-avatar-photo, .creator-tile.is-selected .creator-avatar-placeholder { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
    .creator-tile:hover .creator-avatar-placeholder { box-shadow: none; transform: none; }
    .creator-tile:hover .creator-avatar-photo { box-shadow: 0 14px 34px rgba(0,0,0,.6); border-color: rgba(0,240,255,.6); filter: none; }
}

/* ---------- 7. Knoepfe ---------- */
.btn-solid, .btn-outline, .btn-secondary, .lifeline-btn, #continue-btn, #replay-same-btn {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn-solid::after, .btn-secondary::after, .btn-outline::after, .lifeline-btn::after, .answer-tile::after { display: none; }
.btn-solid {
    background: var(--cyan); color: #001018; font: 700 13px/1 var(--f-body); letter-spacing: .6px; padding: 15px 24px;
    transition: filter .2s, transform .12s var(--ease);
}
.btn-outline, .btn-secondary, #replay-same-btn {
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); color: #fff;
    font: 600 12.5px/1 var(--f-body); letter-spacing: .6px; padding: 12px 20px; box-shadow: none;
    transition: background .2s, border-color .2s, transform .12s var(--ease);
}
#continue-btn {
    background: rgba(0,240,255,.06); border: 1px solid rgba(0,240,255,.45); color: var(--cyan);
    font: 700 13px/1 var(--f-body); letter-spacing: .8px; padding: 15px 24px;
}
.btn-solid:active, .btn-outline:active, .btn-secondary:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
    .btn-solid:hover, #new-round-btn:hover { box-shadow: none; filter: brightness(1.08); transform: none; background: var(--cyan); color: #001018; }
    .btn-outline:hover, .btn-secondary:hover, #replay-same-btn:hover {
        background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: #fff; box-shadow: none; transform: none; filter: none;
    }
    #continue-btn:hover { background: rgba(0,240,255,.14); border-color: var(--cyan); color: #fff; box-shadow: none; filter: none; }
}
.profile-btn-row .btn-solid, .profile-btn-row .btn-secondary, .profile-btn-row .btn-outline,
.end-btn-row .btn-solid, .end-btn-row .btn-secondary { padding: 14px 22px; font-size: 12.5px; }

/* Eingabefelder */
input[type="text"], input[type="email"], textarea, select {
    background: rgba(255,255,255,.035); border: 1px solid var(--line); color: #fff; font-family: var(--f-body);
    transition: border-color .2s;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: var(--cyan); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* ---------- 8. Eddy & Roxy ---------- */
.co-host-bar { background: transparent; border-bottom: 1px solid var(--line); padding: var(--s-3) var(--gutter); }
.co-host-collapse, .co-host-terminal { max-width: 1116px; }
.host-avatar { width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
.host-name { font: 700 10.5px/1 var(--f-body); letter-spacing: 1.5px; text-shadow: none; }
.typewriter-text { font: 500 14px/1.45 var(--f-body); font-style: italic; color: var(--subtext); height: 4.35em; }
.typing-dots span { box-shadow: none; }
.host-loading-track { background: rgba(255,255,255,.08); height: 2px; }
.host-loading-fill { background: var(--cyan); }
.host-loading-fill::after { display: none; }
.host-loading-pct { font: 700 9.5px var(--f-mono); color: var(--muted); text-shadow: none; }

/* ---------- 9. Quiz: derselbe Aufbau wie die Quiz-Karte der Landing ---------- */
#view-quiz {
    max-width: 860px; align-items: stretch;
    background: linear-gradient(160deg, var(--glass-bg), rgba(6,9,22,.92));
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 20px 40px rgba(0,0,0,.4), 0 0 70px rgba(0,240,255,.07);
    padding: var(--s-5) var(--s-7) var(--s-7);
}
#view-quiz > .answers-grid, #view-quiz > .question-text, #view-quiz > .lifeline-bar, #view-quiz > #continue-btn, #view-quiz > .review-badge { align-self: center; }
.quiz-header-bar { gap: var(--s-4); }
.section-divider.quiz-divider {
    width: 100%; height: 1px; margin: var(--s-4) 0 clamp(14px, 3vh, 26px);
    background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.02));
}
.progress-dots { gap: 6px; }
.progress-dot { width: 7px; height: 7px; background: rgba(255,255,255,.14); border: none; }
.progress-dot.current { background: var(--cyan); box-shadow: 0 0 8px var(--cyan), 0 0 2px #fff; animation: none; }
.progress-dot.correct { background: var(--green); }
.progress-dot.wrong { background: var(--red); }
.progress-dot.skipped { background: transparent; box-shadow: inset 0 0 0 1px var(--muted); }
.progress-dot.cliffhanger-dot { box-shadow: inset 0 0 0 1px var(--gold); }
.round-score-box { align-items: flex-end; gap: 3px; }
.round-score-label { font: 700 8.5px/1 var(--f-body); letter-spacing: 1.6px; color: var(--muted); }
.round-score-value { font: 700 15px/1 var(--f-mono); color: var(--gold); text-shadow: none; }
.timer-wrap { width: 46px; height: 46px; }
.timer-ring-bg { stroke: rgba(255,255,255,.1); stroke-width: 4; }
.timer-ring-fg { stroke-width: 4; filter: none; }
.timer-ring-fg.warning { filter: none; }
.timer-number { font: 700 15px/1 var(--f-mono); color: var(--cyan); }
.timer-wrap.no-timer .timer-number { color: var(--muted); font-size: 20px; }
.tag-pill { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); color: var(--subtext); }
.tag-pill.community { border-color: rgba(0,240,255,.4); color: var(--cyan); background: rgba(0,240,255,.07); box-shadow: none; animation: none; font-size: 10px; padding: 6px 10px; }
.tag-pill.sponsored, .tag-pill.cliffhanger { border-color: rgba(255,215,0,.45); color: var(--gold); text-shadow: none; }
.review-badge { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; border-radius: 0; background: rgba(255,215,0,.08); border-color: rgba(255,215,0,.3); padding: 6px 10px; }

.question-text {
    font: 600 clamp(1.15rem, 3.1vh, 1.55rem)/1.38 var(--f-body); color: #fff; text-align: left;
    width: 100%; max-width: 700px; margin-bottom: clamp(14px, 3vh, 26px);
}
.answers-grid, #room-answers-grid { counter-reset: ans; gap: var(--s-3); }
.answer-tile {
    counter-increment: ans; gap: var(--s-3);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.25);
    color: var(--subtext); font: 600 clamp(.95rem, 2vh, 1.06rem)/1.3 var(--f-body);
    padding: clamp(12px, 2.2vh, 18px) var(--s-4);
    transition: transform .12s var(--ease), border-color .2s, background .2s, color .2s, box-shadow .2s;
}
/* Buchstaben-Marke A-D wie auf der Landing-Quizkarte. Rein per CSS-Zaehler, die Kacheln
   selbst erzeugt weiterhin app.js unveraendert. Die Marke uebernimmt bei Richtig/Falsch
   die Signalfarbe und ersetzt damit das fruehere Haken/Kreuz am rechten Rand. */
.answer-tile::before,
.answer-tile.correct-answer::before, .answer-tile.wrong-answer::before, .answer-tile.reveal-correct::before {
    content: counter(ans, upper-alpha); position: static; transform: none; animation: none;
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: rgba(0,240,255,.12); border: 1px solid rgba(0,240,255,.3); color: var(--cyan);
    font: 700 11px/1 var(--f-mono); transition: background .2s, border-color .2s, color .2s;
}
@media (hover: hover) and (pointer: fine) {
    .answer-tile:hover:not(.disabled):not(.correct-answer):not(.wrong-answer) {
        border-color: rgba(0,240,255,.5); color: #fff; transform: translateY(-1px);
        background: linear-gradient(180deg, rgba(0,240,255,.1), rgba(0,240,255,.02));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 14px rgba(0,240,255,.18);
    }
}
.answer-tile:active:not(.disabled) { transform: scale(.97); }
.answer-tile.disabled { opacity: .5 !important; filter: none; }
.answer-tile.correct-answer, .answer-tile.reveal-correct {
    background: linear-gradient(180deg, rgba(34,197,94,.22), rgba(34,197,94,.06)) !important;
    border-color: var(--green) !important; color: #fff !important; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 22px rgba(34,197,94,.25);
}
.answer-tile.correct-answer { animation: answerPop .4s var(--ease); }
.answer-tile.reveal-correct { animation: none; }
.answer-tile.correct-answer::before, .answer-tile.reveal-correct::before { background: var(--green); border-color: var(--green); color: #04170c; }
.answer-tile.wrong-answer {
    background: linear-gradient(180deg, rgba(239,68,68,.2), rgba(239,68,68,.05)) !important;
    border-color: var(--red) !important; color: #fff !important; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 18px rgba(239,68,68,.2);
    animation: errorShake .4s ease;
}
.answer-tile.wrong-answer::before { background: var(--red); border-color: var(--red); color: #2b0505; }
.answer-tile.cliffhanger-pending {
    background: linear-gradient(180deg, rgba(255,215,0,.14), rgba(255,215,0,.04)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1); animation: none; font-weight: 600;
}
.answer-tile.cliffhanger-pending::before { content: counter(ans, upper-alpha); position: static; transform: none; background: var(--gold); border-color: var(--gold); color: #1a1200; font: 700 11px/1 var(--f-mono); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; }

.lifeline-bar { gap: var(--s-2); }
.lifeline-btn {
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14); color: var(--subtext);
    font: 700 10.5px/1 var(--f-body); letter-spacing: 1px; padding: 10px 14px; gap: 8px;
}
.lifeline-icon { width: 15px; height: 15px; }
.lifeline-count { background: rgba(0,240,255,.14); color: var(--cyan); font: 700 10px/1 var(--f-mono); min-width: 17px; height: 17px; margin-left: 0; }
.lifeline-btn:disabled .lifeline-count { background: rgba(255,255,255,.08); color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
    .lifeline-btn:hover:not(:disabled) { background: rgba(0,240,255,.08); border-color: rgba(0,240,255,.5); color: #fff; box-shadow: none; }
}
.streak-popup, .speedster-popup, .impact-number { font-family: var(--f-display); font-weight: 400; letter-spacing: .5px; }
.streak-popup { text-shadow: 0 0 26px rgba(0,240,255,.5); }
.streak-popup.tier3, .speedster-popup, .impact-number { text-shadow: 0 0 26px rgba(255,215,0,.45); }

/* ---------- 10. Fenster (Einstellungen, Einreichen, Name, Duell) ---------- */
.modal-backdrop { background: rgba(2,4,10,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-window {
    background: linear-gradient(165deg, #10142b, #090c1c); border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.6); padding: var(--s-7);
}
.modal-close { color: var(--muted); width: 36px; height: 36px; top: 12px; right: 12px; }
@media (hover: hover) and (pointer: fine) { .modal-close:hover { color: #fff; text-shadow: none; } }
.modal-body h3 { font: 400 18px/1.1 var(--f-display); letter-spacing: 0; text-transform: uppercase; color: #fff; margin-bottom: var(--s-3); }
.modal-body p { font: 500 14px/1.55 var(--f-body); color: var(--subtext); }
.divider { background: var(--line); }

/* ---------- 11. Schrift: Fjalla One hat nur EINEN Schnitt. Aeltere Regeln fordern dafuer
   700/900 an, der Browser hat dann kuenstlich gefettet (verschmiert). Abgeschaltet; schraeg
   darf weiter kuenstlich erzeugt werden (Barlow kursiv liegt nur in 600 vor). ---------- */
* { font-synthesis: style small-caps; }

/* ---------- 12. Karten auf allen Unterseiten: eine Flaeche, eine feine Linie, eckig, ohne
   HUD-Eckklammern und ohne Aussen-Glow ---------- */
.panel, .lb-card, .identity-card, .end-hero, .end-rank-context, .end-ghost-grid, .friend-code-box, .activity-chart-wrap,
.end-stage-v2 .identity-card, .end-stage-v2 .end-hero, .end-stage-v2 .panel, .end-stage-v2 .header-stat-tile {
    background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.008) 60%), var(--ec-panel);
    border: 1px solid var(--line); border-radius: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.panel::before, .panel::after, .identity-card::before, .identity-card::after,
.end-hero::before, .end-hero::after, .end-stage::before, .end-stage::after,
.end-rank-context::before, .end-rank-context::after, .end-ghost-grid::before, .end-ghost-grid::after { content: none; display: none; }
.panel h3, .lb-card-title {
    font: 700 10.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
    border-bottom-color: var(--line);
}
.panel h3::before { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.panel-count { font: 600 10px var(--f-mono); color: var(--muted); }
.profile-stage-v2 .btn-solid, .profile-stage-v2 .btn-secondary, .profile-stage-v2 .btn-outline,
.profile-stage-v2 input, .profile-stage-v2 select, .profile-stage-v2 textarea,
.end-stage-v2 .btn-solid, .end-stage-v2 .btn-secondary, .end-stage-v2 .btn-outline, .end-stage-v2 .end-profile-link { border-radius: 0; }

/* Kennzahlen-Leisten */
.header-stat-tile, .lb-stats-grid, .profile-stat-tiles-row, .profile-stats, .end-stat-tiles { background: rgba(255,255,255,.02); border-color: var(--line); }
.header-stat-tile .stat-icon,
.end-stat-tiles .header-stat-tile .stat-icon { background: rgba(0,240,255,.08); border: 1px solid rgba(0,240,255,.2); border-radius: 0; color: var(--cyan); }
.header-stat-tile .stat-label, .profile-stat-card .stat-label,
.lb-stats-grid .header-stat-tile .stat-label { font: 700 9.5px/1.2 var(--f-body); letter-spacing: 1.2px; color: var(--muted); }
.end-stat-tiles .header-stat-tile .stat-label { font-size: 9px; }
.header-stat-tile .stat-value, .profile-stat-card .stat-value, .profile-stage-v2 .stat-value, .end-stage-v2 .stat-value,
.lb-stats-grid .header-stat-tile .stat-value {
    font-family: "EC Pathway", var(--f-mono); font-weight: 700; font-stretch: 75%; letter-spacing: 0;
    font-variant-numeric: tabular-nums lining-nums; color: var(--headline);
}
.end-stat-tiles .header-stat-tile .stat-value { font-size: 17px; }

/* ---------- 13. Ergebnis: die Belohnung. Klasse gross, Punkte in Gold, sonst Ruhe ---------- */
.end-stage { background: none; border: none; padding: 0; max-width: 980px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.end-hero {
    background: radial-gradient(520px 260px at 12% 0%, var(--end-glow, transparent), transparent 70%),
                linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.01) 60%), var(--ec-panel);
    padding: var(--s-7); border-bottom: 1px solid var(--line); margin-bottom: 0;
}
.end-badge-img { filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.honor-title, .end-hero-text .honor-title {
    font: 400 clamp(1.9rem, 3.6vw, 2.9rem)/1 var(--f-display); letter-spacing: -.012em; text-shadow: none !important; animation: none !important;
    margin-bottom: var(--s-3);
}
.honor-title.tier1 { color: #aab3cf; }
.honor-title.tier2 { color: var(--headline); }
.honor-title.tier4 { color: #b79dff; }
.honor-title.tier5 { color: var(--gold); }
.honor-title.tier6 { color: #fff; }
.honor-subtier-badge { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); filter: none; }
.end-hero-text .end-comment { font: 600 15px/1.5 var(--f-body); font-style: italic; color: var(--subtext); }
.end-percentile { font: 700 12px var(--f-body); letter-spacing: .3px; color: var(--gold); }
.end-score-block { border-left-color: var(--line); }
.end-score-label { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.6px; color: var(--muted); }
.end-score, .end-score-block .end-score {
    font-family: "EC Pathway", var(--f-mono); font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums lining-nums;
    color: var(--gold); text-shadow: 0 0 34px rgba(255,215,0,.22); line-height: 1.05;
}
.end-score-block .end-record { font: 600 11.5px/1.3 var(--f-body); color: var(--subtext); }
.end-bonus-hint { background: rgba(255,255,255,.02); border-color: var(--line); font: 500 13px/1.4 var(--f-body); color: var(--subtext); }
.end-stats { border-left: 1px solid var(--line); background: rgba(255,255,255,.02); }
.perf-label { font: 600 14px/1.3 var(--f-body); }
.perf-sub { font: 700 9px/1 var(--f-body); letter-spacing: 1px; color: var(--muted); }
.perf-value, .end-stage-v2 .perf-value { font: 700 15px/1 var(--f-mono); letter-spacing: 0; }
.perf-total { border-top-color: var(--line); }
.perf-total .perf-label { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.4px; color: var(--muted); }
.perf-total .perf-value { color: var(--gold); font-size: 20px; text-shadow: none; }
.xp-tier-icon, .xp-tier-icon-next { filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.xp-bar-track, .xp-bar-track-vertical { background: rgba(255,255,255,.08); }
.xp-bar-track-vertical .xp-bar-fill { background: linear-gradient(0deg, var(--cyan), var(--gold)); }
.xp-bar-fill { box-shadow: none; }
.xp-label { font: 600 13px/1.3 var(--f-body); letter-spacing: 0; text-shadow: none; color: var(--headline); }
.end-profile-link { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04); color: #fff; font: 600 12px/1.2 var(--f-body); letter-spacing: .4px; padding: 12px; }
@media (hover: hover) and (pointer: fine) { .end-profile-link:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); } }
.end-rank-context .rc-title { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; color: var(--muted); }
.rc-row { font: 500 13px/1.3 var(--f-body); }
.rc-row.is-you { background: linear-gradient(90deg, rgba(0,240,255,.09), transparent 65%); border-left: none; color: var(--cyan); }
.end-btn-row #new-round-btn { min-width: 220px; }
/* Kategorie-Balken und alles, was noch im alten Magenta stand: auf Cyan (Magenta gehoert
   Ghost Duell). Betrifft nur Flaechen ohne eigene Bedeutung als Klassenfarbe. */
.stat-bar-fill, .stat-bar .stat-bar-fill, .cat-bar-fill, .category-bar-fill { background: var(--cyan) !important; box-shadow: none !important; }
.stat-bar-count { font: 700 12px var(--f-mono) !important; color: var(--headline); }

/* ---------- 14. Rangliste: Vergleichen und Messen. Tabs und Zeilen wie die Ranglisten-Karte
   der Landing ---------- */
@media (min-width: 1051px) {
    .leaderboard-layout { grid-template-columns: 240px minmax(0, 1fr) 300px; gap: var(--s-5); }
    .leaderboard-layout.lb-no-position { grid-template-columns: 0 minmax(0, 1fr) 300px; }
}
.lb-main-header-icon { width: 44px; height: 44px; border-radius: 0; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.2); }
.lb-main-header-text h2 { font: 400 clamp(22px, 2.6vw, 30px)/1 var(--f-display); letter-spacing: -.012em; color: var(--headline); margin-bottom: 6px; }
.lb-main-header-text p { font: 500 13px var(--f-body); color: var(--muted); }
.lb-percentile-badge { border-color: var(--line); background: rgba(255,255,255,.02); }
.leaderboard-tabs, .leaderboard-view-wide .leaderboard-tabs {
    gap: 2px; padding: 3px; min-height: 0; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.02);
    margin-bottom: var(--s-4); align-self: center;
}
.leaderboard-tab, .leaderboard-view-wide .leaderboard-tab {
    font: 700 10px/1 var(--f-body); letter-spacing: .6px; color: var(--muted); padding: 9px 14px; border: none; text-shadow: none;
    transition: color .2s, background .2s;
}
.leaderboard-tab.is-active { color: var(--navy); background: var(--cyan); text-shadow: none; box-shadow: 0 0 14px -3px rgba(0,240,255,.7); }
.leaderboard-tab.is-active::after { display: none; }
@media (hover: hover) and (pointer: fine) { .leaderboard-tab:not(.is-active):hover { color: var(--subtext); } }
.leaderboard-hint { font: 500 13px/1.5 var(--f-body); color: var(--muted); }
.friends-sub-btn { border: 1px solid rgba(255,255,255,.14); color: var(--muted); border-radius: 0; font: 700 10px/1 var(--f-body); letter-spacing: .6px; padding: 8px 14px; }
.friends-sub-btn.is-active { background: rgba(0,240,255,.08); border-color: rgba(0,240,255,.5); color: var(--cyan); box-shadow: none; }
.lb-period-btn { border-color: rgba(255,255,255,.16); color: var(--subtext); border-radius: 50%; }
#lb-period-label, #lb-page-label { font: 700 10.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.leaderboard-list { max-width: 640px; gap: 0; }
.leaderboard-row { border-radius: 0; border: none; border-top: 1px solid rgba(255,255,255,.045); min-height: 58px; }
.leaderboard-row:first-child { border-top: none; }
.leaderboard-row.tier1, .leaderboard-row.tier2, .leaderboard-row.tier3, .leaderboard-row.tier4, .leaderboard-row.tier5, .leaderboard-row.tier6 { background: transparent; }
.leaderboard-row.top1 { background: linear-gradient(90deg, rgba(255,215,0,.09), transparent 65%); }
.leaderboard-row.top2 { background: linear-gradient(90deg, rgba(199,210,224,.06), transparent 65%); }
.leaderboard-row.top3 { background: linear-gradient(90deg, rgba(226,152,75,.07), transparent 65%); }
.leaderboard-row.is-you { background: linear-gradient(90deg, rgba(0,240,255,.1), transparent 70%); border: none; border-top: 1px solid rgba(255,255,255,.045); box-shadow: none; }
.leaderboard-row.is-you .lb-name { color: var(--cyan); }
.leaderboard-row .rank { font-family: "EC Pathway", var(--f-mono); font-weight: 800; font-stretch: 75%; width: auto; min-width: 44px; text-shadow: none !important; }
.leaderboard-row .lb-name { font: 600 14px/1.2 var(--f-body); }
.leaderboard-row .lb-score { font-family: "EC Pathway", var(--f-mono); font-weight: 700; font-stretch: 75%; font-size: 17px; font-variant-numeric: tabular-nums lining-nums; }
.lb-row-avatar { background: rgba(255,255,255,.06); color: var(--subtext); font: 400 14px/1 var(--f-display); }
.leaderboard-row.is-you .lb-row-avatar { background: rgba(0,240,255,.14); color: var(--cyan); box-shadow: none; }
.leaderboard-row.top1 .lb-row-avatar { background: rgba(255,215,0,.16); color: var(--gold); }
.lb-row-tier { background: none !important; padding: 0; font: 700 9px/1 var(--f-body); letter-spacing: .8px; text-shadow: none !important; }
.lb-row-tier.tier1 { color: var(--muted); } .lb-row-tier.tier2 { color: var(--subtext); }
.lb-row-tier.tier4 { color: #b79dff; } .lb-row-tier.tier5 { color: var(--gold); } .lb-row-tier.tier6 { color: #fff; }
.lb-position-avatar { box-shadow: none; }
.lb-position-rank { font-family: "EC Pathway", var(--f-mono); font-weight: 800; font-stretch: 75%; }
.lb-tier-legend { border-color: var(--line); }
.lb-tier-row { border-bottom-color: var(--line); }
.lb-tier-row.is-current { background: linear-gradient(90deg, rgba(0,240,255,.09), transparent 75%); }
.lb-tier-icon { border-radius: 0; }
.lb-tier-name { font: 700 13px/1.2 var(--f-body); }
.lb-tier-range { font: 500 11.5px/1.35 var(--f-body); color: var(--muted); }
.lb-steige-auf-btn { border-radius: 0; }

/* ---------- 15. Profil: persoenliches Daten-Dashboard ---------- */
.profile-stage::before { display: none; }
.profile-avatar-wrap, .profile-stage-v2 .profile-avatar-wrap { border-width: 2px; box-shadow: none !important; background: rgba(255,255,255,.04); }
.avatar-edit-btn { box-shadow: none; border-width: 1px; }
.bio-edit-btn, .avatar-edit-btn { background: #0b0f22; border-color: rgba(0,240,255,.45); }
.profile-name, .profile-header-bar .profile-name { font: 400 clamp(24px, 2.6vw, 32px)/1 var(--f-display); letter-spacing: -.01em; }
.profile-header-bar .profile-tier-row { border-radius: 0; background: rgba(255,255,255,.04) !important; padding: 5px 10px; }
.profile-header-bar .profile-tier { font: 700 10.5px/1 var(--f-body); letter-spacing: 1px; text-transform: uppercase; }
.profile-bio { font: 500 14px/1.4 var(--f-body); }
.profile-equipped-title { border-radius: 0; font: 700 10px/1 var(--f-body); letter-spacing: .8px; }
.profile-tier-badge-large { filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.profile-tabs { background: rgba(255,255,255,.02); border-color: rgba(255,255,255,.1); min-height: 0; padding: 3px; gap: 2px; }
.profile-tab { font: 700 10px/1 var(--f-body) !important; letter-spacing: .6px; color: var(--muted); padding: 9px 14px; text-shadow: none; }
.profile-tab.active { color: var(--navy) !important; background: var(--cyan); box-shadow: 0 0 14px -3px rgba(0,240,255,.7); text-shadow: none; }
.profile-tab.active::after { display: none; }
.activity-chart-title { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; color: var(--muted); }
.badge { background: rgba(255,255,255,.02); border-color: var(--line); }
.badge.tier-bronze, .badge.tier-silver, .badge.tier-gold { box-shadow: none; }
.badge.tier-bronze { background: linear-gradient(165deg, rgba(226,152,75,.12), rgba(255,255,255,.01) 70%); border-color: rgba(226,152,75,.45); }
.badge.tier-silver { background: linear-gradient(165deg, rgba(199,210,224,.12), rgba(255,255,255,.01) 70%); border-color: rgba(199,210,224,.4); }
.badge.tier-gold, .mastery-hex-grid .badge.tier-gold { background: linear-gradient(165deg, rgba(255,215,0,.12), rgba(255,255,255,.01) 70%); border-color: rgba(255,215,0,.45); }
.badge-title { font: 600 10.5px/1.25 var(--f-body); }
.badge-equip-btn { font: 700 9px/1 var(--f-body); letter-spacing: .6px; }
.mastery-status { font: 700 9.5px/1 var(--f-body); letter-spacing: 1px; }
.mastery-status.is-done { text-shadow: none; }
.rival-title { font: 700 14px/1.2 var(--f-body); }
.rival-vs { font: 700 9.5px/1 var(--f-body); letter-spacing: 1px; color: var(--muted); }
.profile-friends-title { font: 700 10.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.friend-code-label { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.4px; color: var(--muted); }
.friend-code-value { font: 700 26px/1 var(--f-mono); letter-spacing: 5px; text-shadow: none; }
#add-friend-input, #room-join-input {
    background: rgba(255,255,255,.035); border: 1px solid var(--line); font: 700 14px/1 var(--f-mono); letter-spacing: 3px; padding: 13px 14px;
}
#add-friend-input::placeholder, #room-join-input::placeholder { font: 600 12.5px/1 var(--f-body); letter-spacing: 1px; opacity: 1; color: var(--muted); }
#room-join-input:focus, #add-friend-input:focus { border-color: var(--cyan); }
.add-friend-msg.err { color: #ff8a8a; }
.friend-row { background: rgba(255,255,255,.02); border-left: none; border: 1px solid var(--line); font: 600 14px/1.2 var(--f-body); }
.friend-row .friend-score { font: 700 14px/1 var(--f-mono); color: var(--headline); }
.friends-list-empty, .empty-hint { font: 500 13px/1.5 var(--f-body); color: var(--muted); }
.growth-text { font: 500 13.5px/1.5 var(--f-body); }

/* ---------- 16. Creator Room ---------- */
#room-mode-toggle .btn-outline.is-selected { background: rgba(0,240,255,.1); color: var(--cyan); border-color: rgba(0,240,255,.6); box-shadow: none; }
.btn-solid.btn-solid-purple { background: var(--cyan); color: #001018; box-shadow: none; }
.btn-solid.btn-solid-purple:disabled { background: rgba(255,255,255,.08); color: var(--muted); cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .btn-solid.btn-solid-purple:hover { box-shadow: none; } }
.btn-solid:disabled { background: rgba(255,255,255,.08); color: var(--muted); cursor: not-allowed; filter: none; }
.room-question-counter { font: 700 11px/1 var(--f-mono); letter-spacing: 2px; color: var(--muted); }
#room-code-display { font-family: var(--f-mono) !important; text-shadow: none !important; }
.form-field label { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.form-field input, .form-field textarea, .form-field select { background: rgba(255,255,255,.035); border-color: var(--line); font: 500 14px/1.4 var(--f-body); padding: 12px; }
.admin-row { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-left: 1px solid var(--line); }

/* ---------- 17. Korrekturen am ersten Durchgang ---------- */
.greeting { display: block; }
.greeting::before { display: inline-block; vertical-align: middle; margin: -2px 8px 0 0; }
.greeting .greeting-name { margin-left: 0; }
.creator-genre-tag { display: block; margin-top: 5px; }
/* Nur die NICHT gewaehlten/NICHT richtigen Antworten treten nach der Aufloesung zurueck. */
.answer-tile.disabled { opacity: 1 !important; }
.answer-tile.disabled:not(.correct-answer):not(.wrong-answer):not(.reveal-correct):not(.cliffhanger-pending) { opacity: .45 !important; }

/* ---------- 18. Handy ---------- */
@media (max-width: 768px) {
    .ehren-header-full { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-2); padding: 0 10px; }
    .header-center { display: none; }
    .header-left { gap: 0; }
    .header-nav { gap: 0; }
    .header-icon-btn { width: 38px; height: 38px; }
    .header-icon-btn .header-nav-icon { width: 19px; height: 19px; }
    .header-right { gap: var(--s-2) !important; }
    .header-score-label { font-size: 8px; }
    .header-score-value { font-size: 14px; }
    .app-container { height: calc(100dvh - var(--hdr)); }
    .view-container { padding-top: var(--s-5); }
    .section-title { font-size: 24px; margin-bottom: var(--s-5); }
    .bento-tile { padding: var(--s-4); }
    #matrix-grid > .add-friend-row { flex-wrap: wrap; }
    .co-host-bar { padding: var(--s-2) var(--gutter); }
    .host-avatar { width: 52px; height: 52px; }
    .typewriter-text { height: 5.8em; font-size: 13.5px; }
    #view-quiz { padding: var(--s-4) var(--s-4) var(--s-5); }
    #view-quiz .question-text { font-weight: 600; }
    #view-quiz .answer-tile { font-weight: 600; }
    .timer-wrap { width: 40px; height: 40px; }
    .timer-number { font-size: 13px; }
    .progress-dot { width: 6px; height: 6px; }
    .end-hero { padding: var(--s-5); }
    .modal-window { padding: var(--s-5); }
    .legal-footer { background: none; padding: 0 var(--gutter) 12px; }
}

/* ---------- 19. Letzte Glanz-Icons der alten Optik. Die Bilder setzt app.js weiterhin
   unveraendert; hier wird nur das angezeigte Bild auf das passende Linien-Icon umgestellt. ---------- */
img[src$="cat-streamslang.png"] { content: url("../assets/ui/tile-slang.svg"); }
img[src$="cat-creatorvault.png"] { content: url("../assets/ui/tile-vault.svg"); }
img[src$="cat-mysterymatrix.png"] { content: url("../assets/ui/tile-mystery.svg"); }
img[src$="cat-communitybrain.png"] { content: url("../assets/ui/tile-community.svg"); }
img[src$="cat-bossfragen.png"] { content: url("../assets/ui/tile-boss.svg"); }
img[src$="cat-12sec.png"] { content: url("../assets/ui/tile-ranked.svg"); }
img[src$="cat-training.png"] { content: url("../assets/ui/tile-training.svg"); }
.stat-bar-icon { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.2); }
.stat-bar-label { font: 600 12.5px/1.2 var(--f-body); color: var(--subtext); margin-bottom: 6px; }
.stat-bar-track { height: 4px; background: rgba(255,255,255,.08); }
.stat-bar-row { gap: 12px; padding: 6px; }
.mastery-hex-grid .badge-icon-img, .profile-stage-v2 .mastery-hex-grid .badge-icon-img { border-radius: 0; background: rgba(0,240,255,.07); border: 1px solid rgba(0,240,255,.2); width: 36px; height: 36px; }
.profile-stat-bars-header { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.2px; color: var(--muted); }
.profile-stat-bars-header span { font-family: "EC Pathway", var(--f-mono); font-weight: 700; font-stretch: 75%; font-size: 20px; }

/* Rangliste: Platz-Schild wie auf der Landing (Gold/Silber/Bronze fuer 1-3) statt 3D-Medaille */
.lb-medal { display: none; }
.leaderboard-row .rank {
    min-width: 54px; height: 30px; padding: 0 8px; justify-content: center; gap: 4px; font-size: 17px; line-height: 1;
    background: var(--card2); color: var(--headline);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.leaderboard-row.top1 .rank, .leaderboard-row.top1.is-you .rank { background: var(--gold); color: #1a1200; }
.leaderboard-row.top2 .rank, .leaderboard-row.top2.is-you .rank { background: var(--silver); color: #1a1200; }
.leaderboard-row.top3 .rank, .leaderboard-row.top3.is-you .rank { background: var(--bronze); color: #1a1200; }
.leaderboard-row.is-you .rank { color: var(--cyan); }
.rank-change { font: 700 10px/1 var(--f-mono); }

/* ---------- 20. Meldungen und seltene Momente ---------- */
.host-avatar { box-shadow: none !important; }
.achievement-toast {
    background: linear-gradient(165deg, #10142b, #090c1c); border: 1px solid rgba(255,215,0,.45);
    box-shadow: 0 20px 50px rgba(0,0,0,.55); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.achievement-toast.active { animation: none; }
.achievement-toast-icon { filter: none; }
.achievement-toast-label { font: 700 9.5px/1 var(--f-body); letter-spacing: 1.4px; }
.achievement-toast-title { font: 700 15px/1.25 var(--f-body); }
.room-link-toast { background: #1c0a0d; border-color: rgba(239,68,68,.6); box-shadow: 0 20px 50px rgba(0,0,0,.55); border-radius: 0; }
.room-link-toast-text { font: 500 13.5px/1.4 var(--f-body); }
.promotion-ceremony { background: rgba(2,4,10,.94); }
.promotion-label { font: 700 11px/1 var(--f-body); letter-spacing: 3px; color: var(--cyan); text-shadow: none; }
.promotion-badge { filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)) drop-shadow(0 0 46px rgba(255,215,0,.28)); }
.promotion-title { font: 400 clamp(2rem, 5vw, 3.2rem)/1 var(--f-display); letter-spacing: -.012em; text-shadow: none; }
.promotion-ceremony.tier6-ceremony .promotion-label, .promotion-ceremony.tier6-ceremony .promotion-title { text-shadow: none; }
.cookie-consent-banner {
    background: rgba(4,6,14,.94); border-top: 1px solid var(--line); box-shadow: 0 -18px 40px rgba(0,0,0,.45);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.cookie-consent-text { font: 500 13px/1.5 var(--f-body); color: var(--subtext); }
.cookie-consent-actions button { padding: 12px 20px; font-size: 12px; }

/* ---------- 21. Feinschliff ---------- */
/* Abgeschraegte Knoepfe schneiden einen aussenliegenden Fokusring ab: Ring nach innen. */
.btn-solid:focus-visible, .btn-outline:focus-visible, .btn-secondary:focus-visible, .lifeline-btn:focus-visible,
#continue-btn:focus-visible, #replay-same-btn:focus-visible { outline-offset: -4px; }
.btn-solid:focus-visible { outline-color: #001018; }
.end-profile-link { font-size: 11px; letter-spacing: .2px; }
.room-category-tile { align-items: center; }
#view-room-create > p, #view-room-create .leaderboard-hint { text-align: left; width: 100%; }
.settings-toggle-btn { min-width: 108px; }
.btn-outline.muted-state { opacity: 1; color: var(--muted); border-color: rgba(255,255,255,.1); }

/* ---------- 22. Nachbesserungen aus der Bildkontrolle ---------- */
.end-scroll-zone > .end-panel-grid, .end-scroll-zone > .end-comparison-grid { width: 100%; }
/* Die Hinweisblase "Eddy & Roxy warten hier" haengt frei unter der Kopfzeile. Solange sie
   sichtbar ist, bekommt der Inhalt auf dem Handy etwas Luft nach oben, damit sie keine
   Ueberschrift verdeckt; auf dem Desktop weicht nur die rechte Ranglisten-Spalte aus. */
@media (max-width: 768px) {
    body:has(#host-hint-bubble:not([style*="display:none"]):not([style*="display: none"])) .view-container { padding-top: 52px; }
}
@media (min-width: 1051px) {
    body:has(#host-hint-bubble:not([style*="display:none"]):not([style*="display: none"])) .leaderboard-view-wide .lb-col-right { margin-top: 36px; }
}