/* =========================================================================
   Zehner-Paare – Skin "Original"

   Der ursprüngliche Look: warmes Papierweiß, runde weiße Spielsteine,
   beschriftete Knopfleiste. Läuft auf demselben Markup wie material3.css;
   umgeschaltet wird in den Einstellungen.
   ========================================================================= */

@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito-latin-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Das hidden-Attribut muss immer stechen: .button, .snackbar und andere
   Komponenten setzen selbst ein display und wuerden es sonst ueberschreiben. */
[hidden] { display: none !important; }

/* Bildroehre, Sternenfeld und Kombo-Einblendung gehoeren allein dem Arcade-Stil. */
.scanlines, .combo-pop, .starfield, .crt-boot, .max-flash { display: none; }

:root {
  --bg: #f4f1ea;
  --bg-blob-1: rgba(245, 158, 11, 0.16);
  --bg-blob-2: rgba(45, 156, 219, 0.14);
  --surface: rgba(255, 255, 255, 0.72);
  --felt: rgba(255, 255, 255, 0.44);
  --surface-solid: #ffffff;
  --line: rgba(24, 28, 40, 0.10);
  --ink: #1e2230;
  --ink-soft: #5b6274;
  --tile: #ffffff;
  --tile-edge: rgba(24, 28, 40, 0.14);
  --tile-ink: #232838;
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(24, 28, 40, .14);
  --empty: rgba(24, 28, 40, 0.10);
  --hole: rgba(24, 28, 40, 0.11);
  --hole-shadow: inset 0 1px 3px rgba(24, 28, 40, .16);
  --accent: #ef7d31;
  --accent-ink: #2b1103;
  --accent-soft: rgba(239, 125, 49, 0.16);
  --good: #16a37b;
  --good-ink: #0f7d5e;
  --good-soft: rgba(22, 163, 123, 0.18);
  --bad: #e2483d;
  --bad-soft: rgba(226, 72, 61, 0.16);
  --hintc: #2b8fd6;
  --hint-soft: rgba(43, 143, 214, 0.18);
  --gap: 4px;
  --cell-max: 64px;
  --shadow-lift: 0 10px 30px rgba(24, 28, 40, .16);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10131c;
    --bg-blob-1: rgba(245, 158, 11, 0.13);
    --bg-blob-2: rgba(56, 130, 246, 0.14);
    --surface: rgba(30, 35, 50, 0.72);
    --felt: rgba(255, 255, 255, 0.028);
    --surface-solid: #1a1f2c;
    --line: rgba(255, 255, 255, 0.10);
    --ink: #e9ecf5;
    --ink-soft: #98a1b8;
    --tile: #2e3549;
    --tile-edge: rgba(255, 255, 255, .16);
    --tile-ink: #f0f3fb;
    --tile-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 2px 6px rgba(0, 0, 0, .35);
    --empty: rgba(255, 255, 255, 0.075);
    --hole: rgba(0, 0, 0, 0.42);
    --hole-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
    --accent: #f79245;
    --accent-ink: #201304;
    --accent-soft: rgba(247, 146, 69, 0.20);
    --good: #34d0a0;
    --good-soft: rgba(52, 208, 160, 0.18);
    --bad: #f4756a;
    --bad-soft: rgba(244, 117, 106, 0.18);
    --hintc: #5fb3f2;
    --hint-soft: rgba(95, 179, 242, 0.20);
    --shadow-lift: 0 10px 34px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #10131c;
  --bg-blob-1: rgba(245, 158, 11, 0.13);
  --bg-blob-2: rgba(56, 130, 246, 0.14);
  --surface: rgba(30, 35, 50, 0.72);
  --felt: rgba(255, 255, 255, 0.028);
  --surface-solid: #1a1f2c;
  --line: rgba(255, 255, 255, 0.10);
  --ink: #e9ecf5;
  --ink-soft: #98a1b8;
  --tile: #2e3549;
  --tile-edge: rgba(255, 255, 255, .16);
  --tile-ink: #f0f3fb;
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 2px 6px rgba(0, 0, 0, .35);
  --empty: rgba(255, 255, 255, 0.075);
  --hole: rgba(0, 0, 0, 0.42);
  --hole-shadow: inset 0 2px 4px rgba(0, 0, 0, .45);
  --accent: #f79245;
  --accent-ink: #201304;
  --accent-soft: rgba(247, 146, 69, 0.20);
  --good: #34d0a0;
  --good-soft: rgba(52, 208, 160, 0.18);
  --bad: #f4756a;
  --bad-soft: rgba(244, 117, 106, 0.18);
  --hintc: #5fb3f2;
  --hint-soft: rgba(95, 179, 242, 0.20);
  --shadow-lift: 0 10px 34px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; overscroll-behavior: none; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 4%, var(--bg-blob-1), transparent 62%),
    radial-gradient(42vmax 42vmax at 92% 88%, var(--bg-blob-2), transparent 64%);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reine Material-Zutaten hier ausblenden */
.ripple, .sheet__handle, .chip__check, .segmented__check { display: none !important; }

.body-large { font-size: 1rem; }
.body-medium, .body-small { font-size: .9rem; }

/* --- Grundgerüst -------------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 620px;
  margin-inline: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.top-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
  padding: 10px 12px 4px;
}

.top-app-bar__title {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand-dot { color: var(--accent); }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, transform .12s;
}
.icon-button:active { transform: scale(.92); }
@media (hover: hover) { .icon-button:hover { background: var(--surface); color: var(--ink); } }
.icon-button:disabled { opacity: .38; cursor: default; }

.icon { width: 22px; height: 22px; display: block; fill: currentColor; }

:focus-visible { outline: 3px solid var(--hintc); outline-offset: 2px; }

/* --- Statuszeile -------------------------------------------------------- */

.hud {
  position: relative;
  display: flex;
  gap: 8px;
  flex: none;
  padding: 4px 12px 10px;
}
.stat-card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}
.stat-card__label {
  font-size: .70rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.stat-card__value {
  font-size: 1.2rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat-card__value.bump { animation: bump .38s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); color: var(--accent); }
  100% { transform: scale(1); }
}

.combo-badge {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% - 6px)) scale(.8);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: .78rem; font-weight: 800;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transition: opacity .18s, transform .28s cubic-bezier(.2, 1.4, .4, 1);
}
.combo-badge.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.progress {
  flex: none;
  height: 4px;
  margin: 0 14px 0;
  border-radius: 999px;
  background: var(--empty);
  overflow: hidden;
}
.progress__indicator {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--good));
  transition: width .45s cubic-bezier(.2, .9, .3, 1);
}

/* --- Spielfeld ---------------------------------------------------------- */

/* --- Feste Zeile fuer Kombo und Hinweise --------------------------------- */

.ticker {
  position: relative;
  flex: none;
  height: 40px;
  margin: 0 12px;
}
.ticker.hint .combo-badge { opacity: 0; }

.board-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 8px;
  display: flex;
  justify-content: center;
  /* start, nicht stretch: bei stretch bekaeme das Feld genau die sichtbare
     Hoehe, und jede Zeile, die durch Auffuellen dazukommt, laege ausserhalb
     seines Rahmens. Die freie Flaeche holt sich das Feld ueber min-height. */
  align-items: start;
  scroll-padding-block: 12px;
}
.board-wrap.scrollable {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 20px), transparent 100%);
}

.board {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), 1fr);
  gap: var(--gap);
  width: min(100%, calc(var(--cols, 9) * var(--cell-max) + (var(--cols, 9) - 1) * var(--gap) + 16px));
  align-content: start;
  /* Die freie Flaeche gehoert weiter zum Feld, das Feld waechst aber mit
     seinen Zeilen ueber sie hinaus. */
  min-height: 100%;
  padding: 10px 8px;
  border-radius: 24px;
  background: var(--felt);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(24, 28, 40, .07);
}

.cell {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--tile-edge);
  border-radius: clamp(7px, 26cqw / 9, 14px);
  background: var(--tile);
  box-shadow: var(--tile-shadow);
  color: var(--tile-ink);
  font: inherit;
  font-weight: 700;
  font-size: clamp(16px, 6.2cqw, 30px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: scale .14s cubic-bezier(.2, 1.4, .4, 1), background-color .16s, color .16s, box-shadow .16s;
}

.cell.empty {
  background: var(--hole);
  border-color: transparent;
  box-shadow: var(--hole-shadow);
  color: transparent;
  cursor: default;
  pointer-events: none;
  scale: .86;
}

.cell.sel {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
  scale: 1.12;
  box-shadow: 0 8px 18px rgba(239, 125, 49, .45), 0 0 0 4px rgba(239, 125, 49, .30);
  z-index: 2;
}

.cell.partner {
  box-shadow: var(--tile-shadow), 0 0 0 2px var(--good);
  color: var(--good-ink);
}

.cell.hinted { animation: hint .75s ease-in-out 4; z-index: 2; }
@keyframes hint {
  0%, 100% { box-shadow: 0 0 0 2px var(--hint-soft); }
  50% { box-shadow: 0 0 0 3px var(--hintc), 0 4px 14px var(--hint-soft); }
}

.cell.bad {
  background: var(--bad-soft);
  border-color: var(--bad);
  color: var(--bad);
  animation: shake .34s cubic-bezier(.36, .07, .19, .97);
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.cell.clearing {
  background: var(--good);
  border-color: transparent;
  color: #fff;
  animation: pop .3s cubic-bezier(.3, 1.2, .5, 1) forwards;
  z-index: 2;
  pointer-events: none;
}
@keyframes pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(.35); opacity: 0; }
}

.cell.enter { animation: drop .34s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes drop {
  0% { transform: translateY(-14px) scale(.7); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.cell.rowout { animation: rowout .26s ease-in forwards; pointer-events: none; }
@keyframes rowout {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* --- Effektebene -------------------------------------------------------- */

.fx { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; z-index: 5; }

.burst {
  position: absolute;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid var(--good);
  animation: burst .5s ease-out forwards;
}
@keyframes burst {
  0% { transform: scale(.6); opacity: .9; }
  100% { transform: scale(6); opacity: 0; }
}

.spark {
  position: absolute;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 2px;
  background: var(--accent);
  animation: spark .55s ease-out forwards;
}
@keyframes spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2) rotate(180deg); opacity: 0; }
}

.floater {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 800; font-size: .95rem;
  color: var(--good);
  text-shadow: 0 1px 8px var(--bg);
  white-space: nowrap;
  animation: floatup .95s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  25% { opacity: 1; transform: translate(-50%, -70%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

/* --- Knopfleiste: vier beschriftete Knöpfe ------------------------------- */

.bottom-app-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex: none;
  padding: 6px 10px 8px;
  background: transparent;
}
.bottom-app-bar__actions { display: contents; }

.bottom-app-bar .icon-button,
.fab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: auto;
  min-height: 56px;
  height: auto;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, background .18s, opacity .18s;
}
.bottom-app-bar .icon-button:active, .fab:active { transform: scale(.95); }
.bottom-app-bar .icon-button .icon { width: 20px; height: 20px; color: var(--ink-soft); }
.fab .icon { width: 20px; height: 20px; color: #c0561a; }
.fab__label, .action-label { display: block; }
.fab { position: relative; }
.fab__label + .fab__count { margin-left: 4px; }
.fab__count { font-variant-numeric: tabular-nums; }
.fab:disabled, .bottom-app-bar .icon-button:disabled { opacity: .38; cursor: default; }
.fab.urge { animation: urge 1.2s ease-in-out infinite; }
/* Auffuellen braucht eine Flaeche, sonst sieht es wie Zurueck/Tipp/Neu aus. */
.fab {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: #7a3b0e;
  font-weight: 800;
}
/* In der Sackgasse ist der Knopf die Rettung – und sieht auch danach aus. */
.fab--rescue { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.fab--rescue .icon { color: var(--accent-ink); }
@keyframes urge {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50% { box-shadow: 0 0 0 6px var(--accent-soft); }
}
/* Reihenfolge wie im Original: Zurück · Tipp · Auffüllen · Neu */
#btn-undo { order: 1; }
#btn-hint { order: 2; }
.fab { order: 3; }
#btn-new { order: 4; }

/* Icon oben, darunter "Auffüllen 4" in einer Zeile */
.fab {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon icon" "label count";
  justify-content: center;
  align-content: center;
  gap: 2px 5px;
}
.fab .icon { grid-area: icon; justify-self: center; }
.fab__label { grid-area: label; }
.fab__count { grid-area: count; margin: 0; }

/* --- Hinweisstreifen ------------------------------------------------------ */

.snackbar {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% - 10px));
  z-index: 60;
  width: max-content;
  max-width: 100%;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--surface-solid);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  font-size: .86rem; font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .24s cubic-bezier(.2, 1.3, .4, 1);
}
.snackbar.show { opacity: 1; transform: translate(-50%, -50%); }

/* --- Blätter und Dialoge --------------------------------------------------- */

.sheet {
  position: relative;
  width: min(100%, 520px);
  max-width: none;
  max-height: 92dvh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheetin .3s cubic-bezier(.2, .9, .3, 1); }
.sheet.closing { animation: sheetout .2s ease-in forwards; }
@keyframes sheetin { from { transform: translateY(24px); opacity: .4; } }
@keyframes sheetout { to { transform: translateY(24px); opacity: 0; } }
@media (min-width: 560px) { .sheet { margin: auto; border-radius: 24px; } }

.sheet::backdrop, .dialog::backdrop { background: rgba(10, 12, 20, .5); backdrop-filter: blur(2px); }
.sheet:focus, .dialog:focus { outline: none; }

.sheet__close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
}
.sheet__body { padding: 16px 20px; overflow-y: auto; }
.sheet__headline {
  margin: 0 0 14px;
  padding-right: 44px;
  font-size: 1.12rem; font-weight: 800;
}
.sheet__subhead { margin: 18px 0 8px; font-size: .96rem; font-weight: 800; }
.sheet__body p { margin: 0 0 12px; line-height: 1.55; color: var(--ink-soft); }
.sheet__body p b, .bullets b { color: var(--ink); }
.sheet__actions, .dialog__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  flex: none;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.bullets { margin: 0 0 12px; padding-left: 20px; color: var(--ink-soft); line-height: 1.6; }
.bullets li { margin-bottom: 6px; }

.dialog {
  width: min(94%, 420px);
  max-width: none;
  margin: auto;
  padding: 26px 20px 0;
  border: 0;
  border-radius: 24px;
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  text-align: center;
}
.dialog[open] { animation: sheetin .3s cubic-bezier(.2, .9, .3, 1); }
.dialog.closing { animation: sheetout .2s ease-in forwards; }

/* --- Belohnung fuer einen Bestwert --------------------------------------- */

.dialog { position: relative; isolation: isolate; overflow: hidden; }

.dialog__rays {
  position: absolute;
  top: -46px; left: 50%;
  width: 230px; height: 230px;
  margin-left: -115px;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg, #f5c451 0deg 4deg, transparent 4deg 20deg);
  -webkit-mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, .45) 26%, transparent 52%);
  mask-image: radial-gradient(circle, #000 6%, rgba(0, 0, 0, .45) 26%, transparent 52%);
}
.dialog.is-record .dialog__rays {
  animation: rays-in .5s cubic-bezier(.2, .9, .3, 1) forwards,
             rays-spin 26s linear .5s infinite;
}
@keyframes rays-in { from { opacity: 0; scale: .35; } to { opacity: .32; scale: 1; } }
@keyframes rays-spin { to { rotate: 360deg; } }

.record-ribbon[hidden] { display: none; }   /* schlaegt das display der Regel darunter */
.record-ribbon {
  display: inline-flex;
  align-items: center;
  margin: 0 auto 14px;
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f8b64c, #ef7d31);
  color: #2b1103;
  font-size: .84rem;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(239, 125, 49, .35);
}
/* Das Band des Weltrekords: Gold, mit einem laufenden Schimmer darauf. */
.dialog.is-record .record-ribbon {
  background: linear-gradient(180deg, #f5c451, #e8a33d);
  color: #3a2606;
  box-shadow: 0 4px 16px rgba(245, 196, 81, .5);
  animation: ribbon-pop .5s cubic-bezier(.2, 1.5, .4, 1) 200ms backwards,
             ribbon-shine 1.6s ease-in-out 600ms 2;
}
@keyframes ribbon-shine {
  0%, 100% { filter: none; }
  50% { filter: brightness(1.2); }
}
@keyframes ribbon-pop {
  0% { opacity: 0; scale: .4; }
  65% { opacity: 1; scale: 1.14; }
  100% { opacity: 1; scale: 1; }
}
.dialog.is-record .dialog__icon {
  background: linear-gradient(135deg, rgba(248, 182, 76, .3), rgba(239, 125, 49, .25));
  color: #e0902a;
  animation: badgein .55s cubic-bezier(.2, 1.5, .4, 1),
             trophy-cheer 1.4s ease-in-out 500ms 2;
}
@keyframes trophy-cheer {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -12deg; }
  40% { rotate: 10deg; }
  60% { rotate: -6deg; }
  80% { rotate: 3deg; }
}

.dialog__icon {
  width: 74px; height: 74px;
  margin: 0 auto 12px;
  padding: 20px;
  display: block;
  border-radius: 50%;
  background: var(--good-soft);
  color: var(--good);
  animation: badgein .55s cubic-bezier(.2, 1.5, .4, 1);
}
.dialog__icon.sad { background: var(--bad-soft); color: var(--bad); }
@keyframes badgein { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }
.dialog__headline { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; }
.dialog__text { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.dialog__actions { margin-top: 18px; padding-inline: 0; }

.end-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 18px 0 0; text-align: left;
}
.end-stats div { background: var(--empty); border-radius: 12px; padding: 9px 12px; }
.end-stats dt {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}
.end-stats dd { margin: 2px 0 0; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit; font-weight: 700;
  cursor: pointer;
  transition: transform .12s, background .18s;
}
.button:active { transform: scale(.96); }
.button--filled { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.button--text { border-color: transparent; color: var(--ink); }

/* --- Auswahlgruppen -------------------------------------------------------- */

.chips, .segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--empty);
  border: 0;
  border-radius: 14px;
  overflow: visible;
  height: auto;
}
.chips .chip, .segmented button {
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  height: auto;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.segmented + .segmented { margin-top: 8px; }
.chips .chip[aria-pressed="true"], .segmented button[aria-pressed="true"] {
  background: var(--surface-solid);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

/* --- Schalter --------------------------------------------------------------- */

.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  cursor: pointer;
  font-size: .94rem;
}
.switch { position: relative; flex: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  display: block;
  position: relative;
  width: 48px; height: 28px;
  border-radius: 999px;
  background: var(--empty);
  border: 1px solid var(--line);
  transition: background .2s;
}
.switch__track::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-solid);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .22s cubic-bezier(.2, 1.3, .4, 1);
}
.switch input:checked + .switch__track { background: var(--good); border-color: transparent; }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--hintc); outline-offset: 2px; }


/* Das Blatt der Einstellungen hat eine FESTE Hoehe.
   Ohne sie waechst es mit dem Inhalt, und weil ein Bottom Sheet unten
   verankert ist, wandert dabei seine Oberkante nach oben: klappt man eine
   Gruppe auf, rutscht der eben angetippte Titel unter dem Finger weg.
   Gemessen waren das bis zu 164 px Blattbewegung. Mit fester Hoehe scrollt
   nur noch der Inhalt, und das laesst sich ausgleichen (siehe initGruppen
   in app.js). */
#dlg-settings { height: min(92dvh, 900px); }
#dlg-settings .sheet__body { flex: 1 1 auto; min-height: 0; }

/* --- Aufklappbare Gruppen in den Einstellungen ---------------------------- */

/*
 * Die Kopfzeile ist ein Raster mit zwei Spalten und zwei Zeilen: Titel oben
 * links, Zustand darunter, Pfeil rechts ueber beide Zeilen. Der Zustand
 * bekommt damit die ganze Breite und darf umbrechen - abgeschnitten wird
 * nichts, auch nicht bei "Mittel · Diagonal · Umbruch · Partner" auf 320 px.
 */
.group { border-bottom: 1px solid var(--line); }
.group__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1px 10px;
  padding: 14px 2px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.group__head::-webkit-details-marker { display: none; }
.group__title {
  grid-column: 1; grid-row: 1;
  font-size: .95rem; font-weight: 800; color: var(--ink);
}
.group__now {
  grid-column: 1; grid-row: 2;
  font-size: .78rem; color: var(--ink-soft); line-height: 1.35;
}
.group__now:empty { display: none; }
.group__arrow {
  grid-column: 2; grid-row: 1 / span 2;
  width: 20px; height: 20px;
  flex: none;
  color: var(--ink-soft);
  transition: rotate .2s ease;
}
.group[open] .group__arrow { rotate: 180deg; }
.group__head:focus-visible { outline: 3px solid var(--hintc); outline-offset: -2px; border-radius: 10px; }
.group__body { padding: 2px 2px 18px; }
.group__body > .field:last-child { margin-bottom: 0; }
.group__body > .switch-row:last-child { margin-bottom: 0; }

/* --- Felder und Listen ------------------------------------------------------ */

.field { margin: 0 0 20px; }
.field__title {
  margin: 0 0 8px;
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.field__note { margin: 8px 0 0; font-size: .8rem; color: var(--ink-soft); }

.best-list { margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.best-list li {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 40px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.best-list li:last-child { border-bottom: 0; }
.best-list b { font-variant-numeric: tabular-nums; }

/* --- Kuerzel: die eigene Spalte in der Bestenliste und das Eingabefeld ----- */

/* Der Name steht links und nimmt sich den Platz, das Kuerzel bekommt eine
   feste Spalte davor: so stehen alle Kuerzel untereinander, statt in jeder
   Zeile anders auszurichten. */
.best-list li > span:first-child { flex: 1; }
.best-list__who {
  flex: none;
  min-width: 3.4em;
  padding-inline-end: 10px;
  text-align: end;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.initials {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  font-size: .94rem;
}
.initials__input {
  width: 6.6em;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--tile-edge);
  border-radius: 12px;
  background: var(--tile);
  color: var(--tile-ink);
  font: inherit; font-weight: 800;
  font-size: 1.05rem; letter-spacing: .16em; text-align: center;
  text-transform: uppercase;
}
.initials__input::placeholder { color: var(--ink-soft); opacity: .5; letter-spacing: .16em; }
/* Im Enddialog steht das Feld mittig unter den Zahlen, nicht als Zeile mit
   Beschriftung links und Feld rechts. */
.initials--end { justify-content: center; margin-top: 14px; }
.initials--end[hidden] { display: none; }

/* --- Beispielraster in den Regeln -------------------------------------------- */

.demo {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 18px; padding: 14px;
  background: var(--empty);
  border-radius: 18px;
}
.demo__grid { display: grid; grid-template-columns: repeat(3, 40px); gap: 5px; flex: none; }
.demo__cell {
  display: grid; place-items: center;
  height: 40px;
  border-radius: 11px;
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-shadow);
  color: var(--tile-ink);
  font-weight: 700;
}
.demo__cell--a { background: var(--good); color: #fff; border-color: transparent; }
.demo__cell--b { background: var(--hintc); color: #fff; border-color: transparent; }
.demo__legend {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 8px;
  font-size: .84rem; color: var(--ink-soft);
}
.demo__legend li { display: flex; align-items: center; gap: 7px; }
.demo__swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.demo__swatch--a { background: var(--good); }
.demo__swatch--b { background: var(--hintc); }

/* --- Konfetti ----------------------------------------------------------------- */

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti[popover] { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; }
.confetti[popover]::backdrop { background: transparent; }
.confetti i {
  position: absolute; top: -14px;
  width: 9px; height: 14px; border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  0% { transform: translateY(-10px) rotate(0); opacity: 1; }
  100% { transform: translateY(105dvh) rotate(720deg); opacity: .9; }
}

/* --- Schmale Geräte ------------------------------------------------------------ */

@media (max-width: 359px) {
  :root { --gap: 3px; }
  .board-wrap { padding-inline: 6px; }
  .bottom-app-bar { gap: 4px; padding-inline: 6px; }
  .bottom-app-bar .icon-button, .fab { font-size: .64rem; }
  .action-label, .fab__label { white-space: nowrap; }
  .top-app-bar__title { font-size: 1.06rem; }
}

@media (max-height: 460px) and (orientation: landscape) {
  .top-app-bar { padding-block: 2px 0; }
  .hud { padding-bottom: 4px; }
  .stat-card { padding-block: 3px; }
  .bottom-app-bar .icon-button, .fab { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cell.sel { scale: 1; box-shadow: 0 0 0 3px var(--accent); }
}
/*
 * Die Zeile unter der Zahl bleibt stehen, auch wenn sie leer ist (im
 * Zeit-Kaertchen ist sie das immer). Ohne die reservierte Hoehe waeren die
 * drei Kaertchen verschieden hoch, und weil sie in einer Reihe auf dieselbe
 * Hoehe gezogen werden, staenden die drei Zahlen darueber auf verschiedener
 * Hoehe - genau das sah nach einem Fehler aus.
 *
 * Die Schriftgroesse waechst mit dem Schirm, und die Grenzen sind gemessen,
 * nicht geraten: in ein Kaertchen passen bei 320 px rund 79 px Text, bei
 * 390 px rund 103 px. "Mondo 4155 CHR" - der breiteste WIRKLICHE Fall aus drei
 * Sprachen - braucht bei 9 px genau noch 320 px Breite und steht damit
 * ueberall einzeilig da. Bei 11 px braeuchte er 99 px und braeche auf kleinen
 * Schirmen um, darum clamp(9px, 2,3vw, 11px): unten 9, oben die alte Groesse.
 *
 * Nachgezaehlt ueber drei Sprachen, vier Breiten und alle Stile: der wirkliche
 * Fall (vierstellig) steht ueberall in einer Zeile. Fuenf- und sechsstellige
 * Staende nehmen bei 320 px zwei, sechsstellige teils auch bei 360 px - nie
 * drei, die Abnahmepruefung bleibt also gruen. Einzeilig waeren auch die erst
 * bei 7 px, und dafuer die Zeile auf ALLEN kleinen Schirmen zu verkleinern
 * lohnt einen Punktestand nicht, den bisher niemand erreicht hat.
 *
 * Die reservierte Hoehe haengt an derselben Groesse (1,3em).
 */
.stat-card__note {
  font-size: clamp(9px, 2.3vw, .70rem);    /* siehe oben */
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-top: 1px;
  line-height: 1.3;
  min-height: 1.3em;             /* eine Zeile, auch wenn sie leer ist */
}

/* --- Der Weltrekord im Punktekaertchen ------------------------------------ */

/*
 * Ueber der Marke: die Zeile wird golden, und die Karte bekommt denselben
 * Rand. Eine Farbe fuer einen Zustand - der Rand allein waere ein Raetsel.
 *
 * Das Gold ist ein fester Wert und keine Themenfarbe: es ist dieselbe Farbe,
 * die das goldene Konfetti traegt (siehe confetti() in app.js), und die liegt
 * dort aus demselben Grund fest.
 */
.stat-card__note--world.is-beaten { color: #b8801f; font-weight: 800; }
.stat-card.beaten { border-color: #d8a63a; }

/*
 * Ab dem Weltrekord traegt der Punktestand selbst die Rekordfarbe - bis zum
 * Ende der Partie. Die Feier ist der Augenblick, die Farbe der Zustand: man
 * sieht bei jedem Zug, dass hier gerade ein Rekordlauf laeuft.
 */
.stat-card__value.rekord { color: #b8801f; }

/* Punkte- und Uebrig-Kaertchen sind antippbar (Weltrekorde / Schwierigkeit). */
.stat-card[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stat-card[role="button"]:active { transform: scale(.97); }
.stat-card[role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* --- Wenn ein Rekord faellt ---------------------------------------------- */

/* Die Punktekarte schlaegt einmal aus - dort ist die Zahl eingeschlagen. */
.stat-card.record-pop { animation: record-pop .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes record-pop {
  0% { transform: scale(1); }
  22% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/*
 * Die Welle ueber dem Feld. Deckungsgleich mit dem Brett (dieselbe
 * Breitenformel, --cols setzt app.js auch auf den Rahmen), faengt keinen Tipp
 * ab und ist ohne Klasse voellig unsichtbar - im Ruhezustand kostet sie nichts.
 */
.record-wave {
  position: absolute;
  top: 6px; bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 12px),
             calc(var(--cols, 9) * var(--cell-max) + (var(--cols, 9) - 1) * var(--gap) + 16px));
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
}
.record-wave.run {
  background: linear-gradient(100deg, transparent 30%,
    rgba(245, 196, 81, .58) 50%, transparent 70%);
  background-size: 260% 100%;
  animation: record-wave 1.6s linear forwards,
             record-glow 1.6s ease-in-out forwards;
}
/*
 * Der Streifen faehrt einmal von links nach rechts durch. Die Prozente sind
 * gerechnet, nicht geraten: bei background-size 260 % verschiebt 100 %
 * Position um -1,6 Bildbreiten, der Streifen sitzt in der Mitte der Bahn. Bei
 * 130 % steht er also gerade eben links ausserhalb, bei -30 % rechts
 * ausserhalb - dazwischen ist er die ganze Zeit zu sehen. Mit einer weiteren
 * Spanne stuende er die halbe Laufzeit im Nichts.
 */
@keyframes record-wave {
  0%   { opacity: 1; background-position: 130% 0; }
  92%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}
@keyframes record-glow {
  0%, 100% { box-shadow: none; }
  28%, 72% { box-shadow: inset 0 0 0 3px rgba(245, 196, 81, .9),
                         0 0 34px rgba(245, 196, 81, .45); }
}

.version { text-align: center; opacity: .7; margin-top: 16px; }