/* ══════════════════════════════════════════════════════════════════════════
   Flip7 — Punktezähler.

   Bewusst EIN Erscheinungsbild, dunkel, ohne Hell-Variante: Gespielt wird
   abends am Tisch, das Handy liegt zwischen Karten und Gläsern. Ein heller
   Bildschirm blendet dort, und zwei gepflegte Farbwelten wären doppelte
   Arbeit für einen Fall, den es hier nicht gibt.

   Zwei Maße ziehen sich durch alles:
     · Touch-Fläche mindestens 48 px — darunter trifft niemand mit Wurstfingern.
     · Schriftgröße in Eingabefeldern mindestens 16 px. Alles darunter lässt
       iOS beim Antippen hineinzoomen, und die Tabelle springt aus dem Bild.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --grund:        #0d1017;
    --grund-2:      #141926;
    --karte:        #1a2030;
    --karte-hoch:   #222a3d;
    --rand:         #2b344a;
    --text:         #eef1f7;
    --text-leise:   #97a1b8;

    --primaer:      #f5a524;
    --primaer-dunkel: #d98b0d;
    --primaer-text: #1a1204;

    --gruen:        #2ecc71;
    --rot:          #ef4444;
    --blau:         #3b82f6;

    --radius:       16px;
    --radius-klein: 12px;
    --leiste-hoehe: 84px;

    --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--grund);
    color: var(--text);
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    /* Kein Gummiband-Scrollen über die Ränder hinaus — das sieht auf einer
       App-artigen Oberfläche nach kaputt aus. */
    overscroll-behavior-y: none;
    /* Doppeltipp-Zoom weg: In der Tabelle tippt man schnell hintereinander
       auf "0" und "+15", und iOS deutet das sonst als Zoom. */
    touch-action: manipulation;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 22px; }
h2 { font-size: 19px; }

/* Zahlen laufen in Tabellen sonst optisch aus der Spur. */
.gesamt, .runden-eingabe, .h-wert, .sieger-liste b { font-variant-numeric: tabular-nums; }

/* ── Ansichten ─────────────────────────────────────────────────────────── */

.ansicht {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
[hidden] { display: none !important; }

.inhalt {
    flex: 1;
    padding: 16px;
    /* Platz für die klebende Leiste, plus Home-Indikator. */
    padding-bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 24px);
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */

.kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
    background: rgba(13, 16, 23, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rand);
}
.kopf-titel { font-size: 20px; }
.kopf .klein { display: block; margin-top: 1px; }

.klein { font-size: 13px; color: var(--text-leise); }

.rund-knopf {
    flex: none;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--rand);
    border-radius: 50%;
    background: var(--karte);
    color: var(--text);
    cursor: pointer;
}
.rund-knopf svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
                  stroke-width: 2; stroke-linecap: round; }
.rund-knopf svg circle { fill: currentColor; stroke: none; }

/* ── Bausteine ─────────────────────────────────────────────────────────── */

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 18px;
}

.block { margin-bottom: 26px; }
.block-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 12px;
}

.leer {
    color: var(--text-leise);
    font-size: 14px;
    margin: 0 0 14px;
    padding: 14px;
    border: 1px dashed var(--rand);
    border-radius: var(--radius-klein);
}

.hinweis { color: var(--text-leise); font-size: 14px; margin: 0 0 16px; }

.meldung {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: var(--radius-klein);
    font-size: 14px;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ffc9c9;
}
.meldung.gut {
    background: rgba(46, 204, 113, 0.13);
    border-color: rgba(46, 204, 113, 0.4);
    color: #b6f2d0;
}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */

.knopf {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-klein);
    font: inherit;
    font-weight: 650;
    font-size: 16px;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease, background .15s ease;
}
.knopf:active { transform: scale(.975); }
.knopf:disabled { opacity: .42; cursor: default; transform: none; }
.knopf.gross { min-height: 56px; font-size: 17px; }
.knopf.breit { width: 100%; }

.knopf.primaer { background: var(--primaer); color: var(--primaer-text); }
.knopf.primaer:not(:disabled):hover { background: #ffb43d; }

.knopf.sekundaer {
    background: var(--karte-hoch);
    color: var(--text);
    border-color: var(--rand);
}
.knopf.sekundaer:not(:disabled):hover { background: #2a3348; }

.knopf.gefahr {
    background: transparent;
    color: #ff8080;
    border-color: rgba(239, 68, 68, .45);
}
.knopf.gefahr:not(:disabled):hover { background: rgba(239, 68, 68, .12); }

.knopf + .knopf { margin-top: 10px; }
.blatt-knoepfe .knopf + .knopf { margin-top: 0; }

.sym { width: 20px; height: 20px; fill: none; stroke: currentColor;
       stroke-width: 2.2; stroke-linecap: round; }

.link {
    background: none; border: none; padding: 8px 4px;
    color: var(--primaer); font: inherit; font-size: 15px;
    cursor: pointer; text-decoration: none;
}
.link:hover { text-decoration: underline; }

/* ── Formulare ─────────────────────────────────────────────────────────── */

.formular { margin-bottom: 16px; }
.formular h2 { margin-bottom: 18px; }

.feld { display: block; margin-bottom: 16px; }
.feld > span { display: block; font-size: 14px; color: var(--text-leise);
               margin-bottom: 7px; }
.feld small { display: block; margin-top: 6px; font-size: 13px;
              color: var(--text-leise); }

input[type=text], input[type=email], input[type=password] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    background: var(--grund-2);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    color: var(--text);
    font: inherit;
    font-size: 16px;          /* nie kleiner — sonst zoomt iOS beim Antippen */
}
input:focus-visible, button:focus-visible, .aufklapp:focus-visible {
    outline: 2px solid var(--primaer);
    outline-offset: 2px;
}
input::placeholder { color: #5f6a83; }

.haken {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 18px; cursor: pointer;
    min-height: 44px;
}
.haken input { width: 22px; height: 22px; accent-color: var(--primaer); flex: none; }

.wechsel {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    gap: 4px; margin-top: 12px;
}

/* ── Anmeldeansicht ────────────────────────────────────────────────────── */

.konto-huelle {
    width: 100%; max-width: 420px;
    margin: auto;
    padding: calc(env(safe-area-inset-top) + 24px) 16px
             calc(env(safe-area-inset-bottom) + 24px);
}
.marke { text-align: center; margin-bottom: 26px; }
.marke h1 { font-size: 34px; letter-spacing: -0.02em; }
.marke-unter { margin: 6px 0 0; color: var(--text-leise); font-size: 15px; }

/* Drei angedeutete Karten über dem Namen — der einzige Zierrat der App. */
.marke-karten { display: flex; justify-content: center; margin-bottom: 16px; }
.mk {
    width: 46px; height: 62px;
    display: grid; place-items: center;
    border-radius: 10px;
    font-size: 26px; font-weight: 800;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.mk1 { background: var(--primaer); color: var(--primaer-text);
       transform: rotate(-14deg) translateX(14px); z-index: 3; }
.mk2 { background: #e8ecf5; color: #131722; transform: translateY(-6px); z-index: 2; }
.mk3 { background: var(--blau); color: #fff;
       transform: rotate(14deg) translateX(-14px); z-index: 1; }

/* ── Spielerraster (Startseite) ────────────────────────────────────────── */

.raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.spieler-kachel {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 6px;
    background: var(--karte);
    border: 2px solid var(--rand);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .06s ease;
}
.spieler-kachel:active { transform: scale(.97); }
.spieler-kachel[aria-pressed="true"] {
    border-color: var(--primaer);
    background: rgba(245, 165, 36, .13);
}
.spieler-kachel .name {
    font-size: 13px; font-weight: 600; text-align: center;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kachel-haken {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primaer); color: var(--primaer-text);
    display: none; place-items: center;
    font-size: 14px; font-weight: 800;
}
.spieler-kachel[aria-pressed="true"] .kachel-haken { display: grid; }

/* Runde Icons — überall dieselbe Bauform, nur andere Größe. */
.icon {
    --gr: 56px;
    width: var(--gr); height: var(--gr);
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--karte-hoch);
    display: grid; place-items: center;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    border: 1px solid var(--rand);
}
.icon.klein { --gr: 44px; font-size: 16px; }
.icon.gross { --gr: 96px; font-size: 34px; }
.icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Wertung über mehrere Spiele ───────────────────────────────────────── */

.wertung-karte { padding: 14px; }
.wertung-kopf {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
/* „3 Spiele" darf nicht umbrechen, wenn der Name lang ist — der Name kuerzt
   sich stattdessen selbst (text-overflow unten). */
.wertung-kopf .klein { flex: none; white-space: nowrap; }
.wertung-titel {
    font-size: 15px; text-align: left;
    margin: 22px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--rand);
    color: var(--text-leise);
}

.rangliste {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.rangliste li {
    display: grid;
    /* Platz | Icon | Name | Siege+Punkte */
    grid-template-columns: 20px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    text-align: left;
}
/* Nur der erste Platz leuchtet — bei Gleichstand an der Spitze eben zweimal. */
.rangliste li.fuehrt { background: rgba(245, 165, 36, .14); }
.rangliste li.fuehrt .rl-siege { color: var(--primaer); }

.rl-platz {
    font-size: 14px; text-align: right;
    color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.rl-name {
    font-weight: 650; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rl-name small {
    display: block; font-weight: 500; font-size: 12px; color: var(--text-leise);
}
.rl-zahlen { text-align: right; }
.rl-siege { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rl-punkte {
    display: block; font-size: 12px;
    color: var(--text-leise); font-variant-numeric: tabular-nums;
}

.icon.mini { --gr: 34px; font-size: 14px; }

/* ── Gäste ─────────────────────────────────────────────────────────────── */

.gast-zeile { display: flex; gap: 10px; margin-bottom: 12px; }
.gast-zeile input { flex: 1; }
.gast-zeile .knopf { flex: none; width: 50px; padding: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px;
    padding: 0 8px 0 14px;
    background: rgba(59, 130, 246, .16);
    border: 1px solid rgba(59, 130, 246, .45);
    border-radius: 999px;
    font-size: 15px;
}
.chip button {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border: none; border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--text);
    font-size: 16px; line-height: 1; cursor: pointer;
}

/* ── Wiederaufnahme ────────────────────────────────────────────────────── */

.hinweis-karte {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 24px;
    border-color: rgba(245, 165, 36, .5);
    background: rgba(245, 165, 36, .1);
}
.hinweis-karte .klein { display: block; }

/* ── Spieltabelle ──────────────────────────────────────────────────────── */

.tabelle { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }

.zeile {
    display: grid;
    /* Icon | Name+Knöpfe | Eingabe | Gesamt */
    grid-template-columns: 44px minmax(0, 1fr) 62px 58px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
}
.zeile.fuehrt {
    border-color: var(--primaer);
    background: linear-gradient(90deg, rgba(245, 165, 36, .16), rgba(245, 165, 36, .05));
}
.zeile.fuehrt .gesamt { color: var(--primaer); }

/* Endstand: keine Eingabe mehr, dafuer mehr Luft fuer die Punktzahl. */
.zeile.fertig { grid-template-columns: 44px minmax(0, 1fr) auto; min-height: 62px; }
.zeile.fertig .gesamt { font-size: 26px; }

.zeile-mitte { min-width: 0; }
.zeile-name {
    font-weight: 650; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 6px;
}
.krone { font-size: 13px; }

.schnell { display: flex; gap: 6px; }
.schnell button {
    min-height: 34px;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid var(--rand);
    background: var(--karte-hoch);
    color: var(--text-leise);
    font: inherit; font-size: 13px; font-weight: 650;
    cursor: pointer;
}
.schnell button:active { transform: scale(.94); }
.schnell .bust[aria-pressed="true"] {
    background: rgba(239, 68, 68, .9); border-color: transparent; color: #fff;
}
.schnell .bonus[aria-pressed="true"] {
    background: var(--gruen); border-color: transparent; color: #04240f;
}

.runden-eingabe {
    width: 100%;
    min-height: 52px;
    padding: 0 6px;
    text-align: center;
    background: var(--grund-2);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    color: var(--text);
    font: inherit; font-size: 20px; font-weight: 700;
    -webkit-appearance: none; appearance: none;
}
.runden-eingabe:focus { border-color: var(--primaer); outline: none; }
/* Zahlenfelder in Firefox/Chrome ohne Pfeilchen. */
.runden-eingabe::-webkit-outer-spin-button,
.runden-eingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.gesamt {
    text-align: right;
    font-size: 22px; font-weight: 800;
    letter-spacing: -0.02em;
}
.gesamt small { display: block; font-size: 11px; font-weight: 600;
                color: var(--text-leise); letter-spacing: 0; }

/* ── Historie ──────────────────────────────────────────────────────────── */

.aufklapp {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    color: var(--text);
    font: inherit; font-weight: 650;
    cursor: pointer;
}
.aufklapp .pfeil {
    width: 18px; height: 18px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round;
    transition: transform .18s ease;
}
.aufklapp[aria-expanded="true"] .pfeil { transform: rotate(90deg); }
.aufklapp .klein { margin-left: auto; }

.historie { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }

.h-spieler {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: var(--radius-klein);
    overflow: hidden;
}
.h-kopf {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 14px;
    background: none; border: none;
    color: var(--text); font: inherit; text-align: left;
    cursor: pointer;
}
.h-kopf .name { flex: 1; font-weight: 650; overflow: hidden;
                text-overflow: ellipsis; white-space: nowrap; }
.h-kopf .summe { font-weight: 800; font-variant-numeric: tabular-nums; }
.h-kopf .pfeil {
    width: 16px; height: 16px; flex: none;
    fill: none; stroke: var(--text-leise); stroke-width: 2.4; stroke-linecap: round;
    transition: transform .18s ease;
}
.h-kopf[aria-expanded="true"] .pfeil { transform: rotate(90deg); }

.h-runden {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 4px 14px 14px;
}
.h-wert {
    display: inline-flex; align-items: baseline; gap: 6px;
    min-height: 40px;
    padding: 0 12px;
    background: var(--karte-hoch);
    border: 1px solid var(--rand);
    border-radius: 10px;
    color: var(--text);
    font: inherit; font-size: 15px;
    cursor: pointer;
}
.h-wert i { font-style: normal; font-size: 12px; color: var(--text-leise); }
.h-wert b { font-weight: 700; }
.h-wert .b7 { color: var(--gruen); font-size: 12px; font-weight: 700; }
.h-wert.null b { color: var(--text-leise); }

/* ── Klebende Leiste ───────────────────────────────────────────────────── */

.leiste {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: rgba(13, 16, 23, .93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--rand);
}
.leiste-info { flex: 1; min-width: 0; }
.leiste-info strong { display: block; font-size: 15px; }
.leiste-info .klein { display: block; }
.leiste .knopf.breit { width: 100%; }

/* ── Desktop: die Leiste klebt nicht mehr ──────────────────────────────────
   Am Fensterrand festgeheftet ergibt sie nur auf dem Handy Sinn, wo der
   Daumen unten ist und die Tabelle die ganze Höhe füllt. Auf einem grossen
   Bildschirm steht "Runde abschliessen" sonst weit unterhalb der letzten
   Zeile, mit einem Feld voll Leere dazwischen — der Knopf gehoert dorthin,
   wo gerade getippt wurde. Also zurueck in den Fluss, direkt unter die
   Tabelle (dort steht er im Dokument, siehe index.html). */
@media (min-width: 720px) {
    .leiste {
        position: static;
        max-width: 640px;
        margin: 4px auto 28px;
        padding: 0;
        background: none;
        border-top: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    /* Der Platzhalter fuer die schwebende Leiste faellt mit ihr weg. */
    .inhalt { padding-bottom: 32px; }

    /* Die Startleiste steht ausserhalb von .inhalt und braucht deshalb den
       Seitenabstand selbst, damit sie mit dem Inhalt darueber fluchtet. */
    #ansicht-start .leiste { padding: 0 16px 24px; }

    /* Ohne den klebenden Balken darf die Kurzmeldung wieder tiefer sitzen. */
    .toast { bottom: 28px; }
}

/* ── Überlagerungen ────────────────────────────────────────────────────── */

.ueberlagerung {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(4, 6, 11, .72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: einblenden .16s ease;
}
@keyframes einblenden { from { opacity: 0; } }

.blatt {
    width: 100%; max-width: 480px;
    max-height: 92dvh;
    overflow-y: auto;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
    background: var(--grund-2);
    border: 1px solid var(--rand);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    animation: hochschieben .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes hochschieben { from { transform: translateY(14%); } }
.blatt h2 { margin-bottom: 16px; }

.blatt-knoepfe {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px;
}
.blatt-knoepfe .knopf { width: 100%; }
#knopf-spieler-loeschen { margin-top: 14px; }

/* Auf breiten Bildschirmen mittig statt am unteren Rand. */
@media (min-width: 720px) {
    .ueberlagerung { align-items: center; }
    .blatt { border-radius: 22px; border-bottom: 1px solid var(--rand);
             padding-bottom: 24px; }
    @keyframes hochschieben { from { transform: scale(.97); } }
}

/* ── Foto-Auswahl ──────────────────────────────────────────────────────── */

.foto-wahl { display: flex; flex-direction: column; align-items: center;
             gap: 8px; margin-bottom: 22px; }
.foto-knopf {
    position: relative;
    width: 104px; height: 104px;
    border-radius: 50%;
    border: 2px dashed var(--rand);
    background: var(--karte);
    padding: 0; overflow: hidden;
    cursor: pointer;
}
.foto-knopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-platzhalter {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    font-size: 34px; font-weight: 700; color: var(--text-leise);
}
.foto-marke {
    position: absolute; right: 2px; bottom: 2px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--primaer);
    color: var(--primaer-text);
    border: 3px solid var(--grund-2);
}
.foto-marke svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
                  stroke-width: 2; stroke-linejoin: round; }

/* ── Ausschnitt wählen ─────────────────────────────────────────────────── */

.zuschnitt-buehne {
    position: relative;
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1;
    margin: 0 auto 18px;
    overflow: hidden;           /* beschneidet den Schatten der Maske */
    border-radius: 16px;
    background: #05070c;
    /* Ohne das scrollt die Seite mit, statt das Bild zu verschieben. */
    touch-action: none;
    cursor: grab;
}
.zuschnitt-buehne:active { cursor: grabbing; }
.zuschnitt-buehne canvas { display: block; width: 100%; height: 100%; }

/* Der runde Ausschnitt: ein Kreis, dessen riesiger Schlagschatten alles
   ausserhalb abdunkelt. Die Buehne schneidet den Schatten wieder ab. */
.zuschnitt-maske {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(5, 7, 12, .72);
    border: 2px solid rgba(255, 255, 255, .55);
    pointer-events: none;
}

.zuschnitt-regler {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px;
}
.zuschnitt-regler .sym { flex: none; stroke: var(--text-leise); }
.zuschnitt-regler .klein-sym { width: 15px; height: 15px; }
.zuschnitt-regler input[type=range] {
    flex: 1;
    accent-color: var(--primaer);
    height: 40px;               /* Touch-Flaeche, nicht Strichstaerke */
}

/* ── Wertungsname (antippbar) ──────────────────────────────────────────── */

.wertung-name {
    display: inline-flex; align-items: center; gap: 8px;
    flex: 1; min-width: 0;
    padding: 4px 0;
    background: none; border: none;
    color: var(--text);
    font: inherit; font-weight: 700; font-size: 16px;
    text-align: left; cursor: pointer;
}
.wertung-name span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wertung-name .stift {
    width: 15px; height: 15px; flex: none;
    fill: none; stroke: var(--text-leise); stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.wertung-name:hover .stift { stroke: var(--primaer); }

/* ── Sieger ────────────────────────────────────────────────────────────── */

.sieger-ueberlagerung { align-items: center; }
.sieger-blatt {
    text-align: center;
    border-radius: 22px;
    border-bottom: 1px solid var(--rand);
    margin: 12px;
    padding-bottom: 24px;
    background: linear-gradient(180deg, #202742, var(--grund-2) 42%);
}
.sieger-kroenchen { font-size: 44px; margin: 0 0 4px; animation: huepf 1.1s ease infinite; }
@keyframes huepf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.sieger-blatt h2 { font-size: 27px; margin-bottom: 18px; color: var(--primaer); }

.sieger-koepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.sieger-koepfe .icon {
    border: 3px solid var(--primaer);
    box-shadow: 0 8px 30px rgba(245, 165, 36, .3);
}
.sieger-name { font-size: 21px; font-weight: 800; margin: 14px 0 20px; }

.sieger-liste {
    list-style: none; counter-reset: platz;
    margin: 0 0 22px; padding: 0;
    text-align: left;
}
.sieger-liste li {
    counter-increment: platz;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 15px;
}
.sieger-liste li:nth-child(odd) { background: rgba(255, 255, 255, .045); }
.sieger-liste li::before {
    content: counter(platz) ".";
    width: 24px; flex: none;
    color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.sieger-liste li.ist-sieger { color: var(--primaer); font-weight: 700; }
.sieger-liste .sp-name { flex: 1; overflow: hidden; text-overflow: ellipsis;
                         white-space: nowrap; }
.sieger-liste b { font-weight: 800; }

.konfetti { position: absolute; inset: 0; width: 100%; height: 100%;
            pointer-events: none; }

/* ── Kurzmeldung ───────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    left: 50%; bottom: calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 18px);
    transform: translateX(-50%);
    z-index: 80;
    max-width: min(92vw, 420px);
    padding: 13px 18px;
    background: #eef1f7;
    color: #12151f;
    border-radius: 999px;
    font-size: 15px; font-weight: 600;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
    animation: toast-auf .2s ease;
}
.toast.schlecht { background: var(--rot); color: #fff; }
@keyframes toast-auf { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ── Ladezustand ───────────────────────────────────────────────────────── */

.laden { position: fixed; inset: 0; display: grid; place-items: center; }
.spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--rand);
    border-top-color: var(--primaer);
    border-radius: 50%;
    animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* Wer Bewegung abgestellt hat, bekommt keine — bis auf den Spinner, der ohne
   Drehung nichts mehr aussagt. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .spinner { animation: dreh 1.4s linear infinite !important; }
}