/* Schriften: selbst gehostet, SIL Open Font License (assets/fonts/OFL.txt) */
@font-face {
  font-family: "Baloo Tamma 2";
  src: url("assets/fonts/baloo-tamma-2.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik";
  src: url("assets/fonts/rubik.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Erzeugt von _grafiken/zeichne.py: gezeichnete Kastenrahmen als Daten-URIs (border-image, slice 34). */
:root {
  --frame: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M31.30 4.80Q60.70 5.05 90.50 4.80Q117.50 4.80 117.50 31.80Q117.98 61.22 117.50 90.80Q117.50 117.80 90.50 117.80Q61.15 117.91 31.30 117.80Q4.30 117.80 4.30 90.80Q3.90 61.05 4.30 31.80Q4.30 4.80 31.30 4.80Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M30.00 3.00Q59.93 2.28 90.00 3.00Q117.00 3.00 117.00 30.00Q117.06 59.53 117.00 90.00Q117.00 117.00 90.00 117.00Q60.56 117.56 30.00 117.00Q3.00 117.00 3.00 90.00Q3.65 59.89 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%231c2230%22 stroke-width=%222.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-ok: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M31.30 4.80Q60.61 4.32 90.50 4.80Q117.50 4.80 117.50 31.80Q116.91 61.30 117.50 90.80Q117.50 117.80 90.50 117.80Q60.37 117.75 31.30 117.80Q4.30 117.80 4.30 90.80Q3.84 60.71 4.30 31.80Q4.30 4.80 31.30 4.80Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M30.00 3.00Q61.09 3.52 90.00 3.00Q117.00 3.00 117.00 30.00Q117.63 60.86 117.00 90.00Q117.00 117.00 90.00 117.00Q60.14 117.32 30.00 117.00Q3.00 117.00 3.00 90.00Q2.08 59.68 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%224.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-warn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M31.30 4.80Q61.22 4.59 90.50 4.80Q117.50 4.80 117.50 31.80Q117.33 61.67 117.50 90.80Q117.50 117.80 90.50 117.80Q60.38 117.42 31.30 117.80Q4.30 117.80 4.30 90.80Q4.62 60.84 4.30 31.80Q4.30 4.80 31.30 4.80Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M30.00 3.00Q60.08 3.05 90.00 3.00Q117.00 3.00 117.00 30.00Q118.01 58.93 117.00 90.00Q117.00 117.00 90.00 117.00Q58.97 116.91 30.00 117.00Q3.00 117.00 3.00 90.00Q4.08 60.36 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%23ea6c0c%22 stroke-width=%224.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-open: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M31.30 4.80Q61.15 5.02 90.50 4.80Q117.50 4.80 117.50 31.80Q117.41 61.48 117.50 90.80Q117.50 117.80 90.50 117.80Q61.29 118.05 31.30 117.80Q4.30 117.80 4.30 90.80Q4.49 61.76 4.30 31.80Q4.30 4.80 31.30 4.80Z%22 fill=%22%23fff%22/%3E%3Cpath d=%22M30.00 3.00Q60.16 3.92 90.00 3.00Q117.00 3.00 117.00 30.00Q117.82 59.48 117.00 90.00Q117.00 117.00 90.00 117.00Q60.61 117.10 30.00 117.00Q3.00 117.00 3.00 90.00Q3.96 59.50 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%23a3abbb%22 stroke-width=%223.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-soft: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30.00 3.00Q59.28 2.66 90.00 3.00Q117.00 3.00 117.00 30.00Q118.05 59.47 117.00 90.00Q117.00 117.00 90.00 117.00Q59.06 116.54 30.00 117.00Q3.00 117.00 3.00 90.00Q2.52 59.12 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%23c3c9d6%22 stroke-width=%222.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-soft-ok: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30.00 3.00Q59.19 4.04 90.00 3.00Q117.00 3.00 117.00 30.00Q116.16 60.16 117.00 90.00Q117.00 117.00 90.00 117.00Q60.92 116.82 30.00 117.00Q3.00 117.00 3.00 90.00Q2.64 60.40 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%2316a34a%22 stroke-width=%223.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
  --frame-soft-warn: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22120%22 height=%22120%22 viewBox=%220 0 120 120%22%3E%3Cpath d=%22M30.00 3.00Q60.61 3.19 90.00 3.00Q117.00 3.00 117.00 30.00Q116.44 60.41 117.00 90.00Q117.00 117.00 90.00 117.00Q61.06 116.10 30.00 117.00Q3.00 117.00 3.00 90.00Q2.01 59.34 3.00 30.00Q3.00 3.00 30.00 3.00Z%22 fill=%22none%22 stroke=%22%23ea6c0c%22 stroke-width=%223.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

:root {
  color-scheme: light;
  --bg: #f4f5f9;
  --card: #ffffff;
  --ink: #1c2230;
  --muted: #6b7385;
  --line: #e6e8ef;
  --soft: #f0f1f6;
  --field: #fafbfd;
  --rose: #e11d48;
  --rose-2: #ff5c86;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #ea6c0c;
  --warn-soft: #ffedd5;
  --hint: #d99a00;
  --hint-soft: #fef3c7;

  /* Kastenfarben: Bühne und Antwort; im Menü eine Farbe je Mengenbild */
  --c-stage: #0891b2; --c-answer: #7c3aed;
  --k-dice: #c026d3; --k-five: #334155; --k-field: #0891b2; --k-fingers: #b45309; --k-tally: #475569;
  --k-beads: #e11d48; --k-cloud: #7c3aed; --k-domino: #4d7c0f; --k-rods: #2563eb; --k-money: #15803d;

  --radius: 22px;
  --gap: 14px;
  --shadow: 0 1px 2px rgba(20, 27, 45, .05), 0 12px 32px -14px rgba(20, 27, 45, .2);
  --font: "Rubik", ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Baloo Tamma 2", ui-rounded, "SF Pro Rounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --answer-w: clamp(300px, 32vw, 560px);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 6% -12%, #ffe3ea 0, transparent 62%),
    radial-gradient(820px 520px at 104% 112%, #e3f0ff 0, transparent 60%),
    var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
svg { display: block; }
h2 { margin: 0; }

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

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

.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--gap);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Kopfzeile (wie „Zahl des Tages“ und „Zahlen legen“) ---------- */

.topbar {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 8px 12px 8px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.left { display: flex; align-items: center; gap: 14px; min-width: 0; }

.brand { display: block; flex: none; border-radius: 50%; line-height: 0; transition: transform .15s; }
.brand:hover { transform: rotate(-4deg) scale(1.04); }
.brand-logo { width: clamp(44px, 7vh, 58px); height: auto; border-radius: 50%; box-shadow: 0 4px 12px -4px rgba(225, 29, 72, .35); }

.segmented { display: inline-flex; flex: none; padding: 4px; border-radius: 999px; background: var(--soft); }

.segmented button {
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}

.segmented button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 27, 45, .14); }

.task {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 10px;
  min-width: 0;
}

.task-icon { flex: none; width: clamp(34px, 5.4vh, 46px); height: clamp(34px, 5.4vh, 46px); }
.task-icon svg { width: 100%; height: 100%; }

.task-label {
  color: var(--rose);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5.2vh, 2.9rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transform: translateY(.08em);
}

.tools { position: relative; display: flex; align-items: center; justify-self: end; gap: 8px; }

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 600;
}

.chip-btn.has-label { width: auto; padding: 0 16px 0 11px; }
.chip-btn svg { flex: none; width: 25px; height: 25px; }
.chip-btn:hover,
.chip-btn[aria-expanded="true"] { background: var(--soft); }

/* ---------- Menü „Einstellungen“ (gruppiert wie „Zahl des Tages“) ---------- */

.menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  right: 0;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100dvh - 130px);
  overflow: auto;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(20, 27, 45, .08), 0 24px 48px -16px rgba(20, 27, 45, .35);
  animation: slide .18s ease-out;
}

.menu-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.menu-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 22px; align-items: start; }
.menu-side { display: grid; gap: 14px; }
.menu-group { min-width: 0; }
.menu-group-title { margin: 0 0 4px; padding: 0 4px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.menu-group-title span { letter-spacing: .02em; text-transform: none; }
.menu-hint { margin: 4px 4px 0; color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.3; }

/* Schalter im Menü: Zeit, nächstes Bild, Modus */
.menu-seg { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--soft); }
.menu-seg button {
  flex: 1 1 auto;
  min-width: 42px;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.menu-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 27, 45, .14); }
.menu-seg .unit { font-weight: 500; }
.seg-icon { flex: none; width: 26px; height: 26px; margin: 0 2px 0 4px; --art-color: var(--c-stage); }
.seg-icon svg { width: 100%; height: 100%; }

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 2px;
  padding: 4px 8px 4px 6px;
  border-radius: 12px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 500;
  break-inside: avoid;
}

.menu-item:hover { background: var(--soft); }
.menu-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.menu-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid #cfd4e0;
  border-radius: 8px;
  background: #fff;
  --art-color: var(--ok);
}

.menu-box svg { width: 22px; height: 22px; visibility: hidden; }
.menu-item input:checked + .menu-box { border-color: var(--ok); background: var(--ok-soft); }
.menu-item input:checked + .menu-box svg { visibility: visible; }
.menu-item input:focus-visible + .menu-box { outline: 3px solid #2563eb; outline-offset: 2px; }
.menu-item.is-locked { cursor: default; }
.menu-item.is-locked .menu-box { opacity: .6; }
.menu-icon { flex: none; width: 30px; height: 30px; }
.menu-icon svg { width: 100%; height: 100%; }
.menu-text { display: grid; min-width: 0; line-height: 1.15; }
.menu-text small { color: var(--muted); font-size: .76rem; font-weight: 500; }
.menu-note { margin: 2px 4px 8px; color: var(--muted); font-size: .82rem; font-weight: 500; }

.menu-reset {
  margin-top: 4px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  font-size: .88rem;
  font-weight: 600;
}

.menu-reset:hover { background: #e7e9f0; }

[data-for="dice"] { --art-color: var(--k-dice); }
[data-for="five"] { --art-color: var(--k-five); }
[data-for="field"] { --art-color: var(--k-field); }
[data-for="fingers"] { --art-color: var(--k-fingers); }
[data-for="tally"] { --art-color: var(--k-tally); }
[data-for="beads"] { --art-color: var(--k-beads); }
[data-for="cloud"] { --art-color: var(--k-cloud); }
[data-for="domino"] { --art-color: var(--k-domino); }
[data-for="rods"] { --art-color: var(--k-rods); }
[data-for="money"] { --art-color: var(--k-money); }
.menu-box { --art-color: var(--ok); }

/* ---------- Arbeitsfläche: Bühne links, Antwort rechts (Hochformat: untereinander) ---------- */

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--answer-w);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  min-width: 0;
  min-height: 0;
}

.app[data-mode="show"] .sheet { grid-template-columns: minmax(0, 1fr); }
.app[data-mode="show"] .card-answer { display: none; }

.card {
  --c: var(--rose); --tint: #fff1f4;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 8px 12px 10px;
  /* Gezeichneter Rahmen samt Fläche (rahmen.css aus _grafiken/zeichne.py) */
  border: 2px solid transparent;
  border-image: var(--frame) 34 fill / 24px / 0 stretch;
  border-radius: 20px;
  background: none;
  box-shadow: var(--shadow);
}

.card-stage { --c: var(--c-stage); --tint: #ecfeff; }
.card-answer { --c: var(--c-answer); --tint: #f5f3ff; }

.card-head { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 36px; }

.card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--tint);
}

.card-icon svg { width: 27px; height: 27px; --art-color: var(--c); }

.card-title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.6vh, 1.4rem);
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateY(.06em);
}

.card-sub { overflow: hidden; min-width: 0; color: var(--muted); font-size: .82rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

.card-mark {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
}

.card-mark svg { display: none; width: 100%; height: 100%; }
.card.is-right .mark-right,
.card.is-wrong .mark-wrong { display: block; }
.card.is-right .card-mark,
.card.is-wrong .card-mark { display: grid; }
.card.is-right { border-image-source: var(--frame-ok); }
.card.is-wrong { border-image-source: var(--frame-warn); animation: shake .42s; }

/* Kurzanzeige der Zeit im Kopf der Bühne: öffnet die Einstellungen */
.time-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 12px 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font-size: .9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  --art-color: var(--c-stage);
}
.time-chip svg { width: 24px; height: 24px; }
.time-chip:hover,
.time-chip[aria-expanded="true"] { background: #e7e9f0; }
.chip-count { margin-left: 7px; padding-left: 7px; border-left: 2px solid #d5d9e4; color: var(--muted); font-weight: 600; }

/* ---------- Bühne ---------- */

.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  container-type: size;
}

.stage-picture { position: absolute; inset: 6px; }
.stage-picture .pic { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage-picture.is-in .pic { animation: flash-in .1s ease-out; }
.pic text { font-family: var(--font-display); font-weight: 800; }

.stage-cover {
  --slat: clamp(20px, 8cqh, 34px);
  --rail: clamp(12px, 5cqh, 22px);
  position: absolute;
  z-index: 1;
  inset: 4px;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-image: var(--frame-soft) 34 / 24px / 0 stretch;
  border-radius: 18px;
  /* Rolltor: leicht unruhige Lamellen (Kachel 200 × 30, auf Lamellenhöhe gestaucht) */
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='30' viewBox='0 0 200 30' preserveAspectRatio='none'%3E%3Crect width='200' height='30' fill='%23eef1f6'/%3E%3Cpath d='M0 5Q50 4.2 100 5.1T200 5' fill='none' stroke='%23fafbfd' stroke-width='3.2'/%3E%3Cpath d='M0 26.4Q50 25.6 100 26.7T200 26.4' fill='none' stroke='%23c6cddb' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M0 28.9Q50 28.4 100 29.1T200 28.9' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3C/svg%3E") 0 0 / 200px var(--slat) repeat;
  transform-origin: 50% 100%;
}

/* Endleiste mit Griff */
.stage-cover::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: var(--rail);
  border-top: 2px solid #b9c0ce;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(#e6e9f0, #cfd5e0);
}
.stage-cover::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: calc(var(--rail) * .3);
  left: 50%;
  width: clamp(56px, 14cqi, 120px);
  height: calc(var(--rail) * .38);
  border-radius: 999px;
  background: #a3abbc;
  transform: translateX(-50%);
}

/* Fällt wie ein Rolltor: beschleunigt, Aufschlag bei 62,5 % = 250 ms (app.js ROLL_HIT), zweimal nachfedern */
.stage-cover.is-rolling { animation: roll-down .4s both; will-change: transform; }
.stage-cover.is-rolling .cover-ask svg { transform-origin: 50% 88%; animation: wobble .7s .24s both; }
.stage-cover.is-opening { animation: roll-up .5s both; pointer-events: none; will-change: transform; }
/* Beim Zeigen schneller hoch (app.js ROLL_OPEN = 350 ms) */
.stage-cover.is-opening.is-quick { animation-duration: .35s; }

.show-big {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: clamp(70px, 16cqh, 110px);
  padding: 0 clamp(26px, 5cqi, 44px) 0 clamp(20px, 4cqi, 34px);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose-2), var(--rose));
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7cqh, 2.9rem);
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 16px 30px -14px rgba(225, 29, 72, .85);
  transition: transform .12s;
  --art-color: #fde047;
}

.show-big svg { width: 1.35em; height: 1.35em; }
.show-big span { transform: translateY(.08em); }
.show-big:hover { transform: translateY(-2px); }
.show-big:active { transform: scale(.97); }

/* Countdown 3 – 2 – 1: gezeichneter Ring, Ziffer in Baloo */
.countdown {
  --art-color: #3b82f6;
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(120px, min(62cqh, 44cqi), 330px);
  aspect-ratio: 1;
}
.countdown[data-count="2"] { --art-color: #f59e0b; }
.countdown[data-count="1"] { --art-color: #e11d48; }
.countdown svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.countdown b {
  position: relative;
  padding-top: .14em;
  color: var(--art-color);
  font-family: var(--font-display);
  font-size: clamp(64px, min(40cqh, 28cqi), 210px);
  font-weight: 800;
  line-height: 1;
}
.countdown.is-tick svg,
.countdown.is-tick b { animation: tick .8s cubic-bezier(.2, .9, .3, 1.2); }

.cover-ask { display: grid; justify-items: center; gap: 4px; color: var(--muted); font-family: var(--font-display); font-size: clamp(1.6rem, 9cqh, 3.4rem); font-weight: 800; line-height: 1; }
.cover-ask svg { width: clamp(64px, 30cqh, 180px); height: clamp(64px, 30cqh, 180px); --art-color: #fbbf24; }

/* Lösung: Ziffernkärtchen oben rechts, das Bild rückt zur Seite */
.solution {
  --badge: clamp(70px, min(34cqh, 22cqi), 190px);
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: calc(var(--badge) * 1.1);
  animation: pop .25s ease-out;
  --card-fill: #dcfce7;
}

.solution svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.solution b { position: relative; padding-top: .12em; font-family: var(--font-display); font-size: calc(var(--badge) * .5); font-weight: 800; line-height: 1; white-space: nowrap; }
.solution.is-long b { font-size: calc(var(--badge) * .36); }
.stage.is-solved .stage-picture { right: calc(clamp(70px, min(34cqh, 22cqi), 190px) + 22px); }

/* ---------- Antwort ---------- */

.answer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "round" "slot" "bar";
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.answer.is-wide {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "round round" "slot bar";
  column-gap: 14px;
}

.round { grid-area: round; display: flex; align-items: center; gap: 10px; min-width: 0; }
.round-dots { display: flex; flex: none; gap: 3px; }
.round-dots svg { width: 17px; height: 17px; }
.round-dots .is-right { --chip: #22c55e; --chip-rim: #166534; }
.round-dots .is-wrong { --chip: #fb923c; --chip-rim: #c2410c; }
.round-text { overflow: hidden; min-width: 0; color: var(--muted); font-size: .88rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.round-text b { color: var(--ink); }

.card-tool {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.card-tool svg { width: 24px; height: 24px; --art-color: var(--c); }
.card-tool:hover { background: var(--soft); }
.card-tool.is-spin svg { animation: spin .45s ease-out; }

.slot {
  grid-area: slot;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding: 4px 16px 2px;
  border: 2px solid transparent;
  border-image: var(--frame-soft) 34 / 24px / 0 stretch;
  border-radius: 18px;
  background: var(--field);
}

.answer.is-wide .slot { flex-direction: column; gap: 2px; min-width: clamp(120px, 20vw, 190px); }
.slot-label { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.slot-value {
  min-width: 1.6ch;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 8.5vh, 4.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  transform: translateY(.08em);
}
.slot.is-empty .slot-value { color: #c3c9d6; }
.slot.is-right { border-image-source: var(--frame-soft-ok); background: var(--ok-soft); }
.slot.is-right .slot-value { color: #11632f; }
.slot.is-wrong { border-image-source: var(--frame-soft-warn); background: var(--warn-soft); }
.slot.is-wrong .slot-value { color: #9a3412; }
.slot-value.is-pop { animation: pop .18s ease-out; }

/* Zahlenleiste und Ziffernfeld: Größe der Kärtchen setzt app.js (--card) */
.numbar {
  grid-area: bar;
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  place-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}

.num {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--card, 60px);
  height: calc(var(--card, 60px) * 1.1);
  padding: .1em 0 0;
  border: 0;
  background: none;
  touch-action: manipulation;
  transition: transform .12s;
  --card-fill: #fff;
}

.num svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.num b { position: relative; font-family: var(--font-display); font-size: calc(var(--card, 60px) * .5); font-weight: 800; line-height: 1; }
.num.is-five { --card-fill: #f5f3ff; }
.num:hover:not(:disabled) { transform: translateY(-1px) rotate(-2deg); }
.num:active:not(:disabled) { transform: scale(.94); }
.num:disabled { opacity: .45; }
.num.is-picked { --card-fill: #ddd6fe; }
.num.is-picked b { color: #4c1d95; }
.num.is-solution { --card-fill: #dcfce7; opacity: 1; }
.num.is-miss { --card-fill: #ffedd5; opacity: 1; }
.num.key-back b { font-size: calc(var(--card, 60px) * .42); }
.numbar[data-cols="3"] .key-0 { grid-column: 2; }
.numbar[data-cols="6"] .key-back { grid-row: 1 / span 2; grid-column: 6; }
.numbar[data-cols="6"] .key-0 { grid-column: 5; grid-row: 2; }
.app[data-phase="ready"] .numbar,
.app[data-phase="showing"] .numbar { opacity: .5; }

/* ---------- Leiste unten ---------- */

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 7px 5px 14px;
  border: 2px solid transparent;
  border-image: var(--frame) 34 fill / 24px / 0 stretch;
  border-radius: 20px;
  background: none;
  box-shadow: var(--shadow);
}

.feedback {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  font-size: clamp(.92rem, 2.1vh, 1.2rem);
  font-weight: 500;
  line-height: 1.25;
}

.feedback b { font-weight: 700; }
.fb-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--muted); }
.fb-icon svg { width: 24px; height: 24px; }
.feedback.is-hint { --bulb-fill: #fbbf24; --bulb-rays: 1; }
.feedback.is-right .fb-icon { background: var(--ok-soft); color: var(--ok); }
.feedback.is-wrong .fb-icon { background: var(--warn-soft); color: var(--warn); }
.feedback.is-hint .fb-icon { background: var(--hint-soft); color: var(--hint); }
.feedback.is-right, .feedback.is-wrong, .feedback.is-hint { animation: slide .3s ease-out; }
.feedback.is-right { color: #11632f; }

.btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .12s, box-shadow .15s, opacity .15s;
}

.btn svg { width: 24px; height: 24px; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; }
.btn-ghost { background: var(--soft); --art-color: #3b82f6; }
.btn-ghost:hover { background: #e7e9f0; }

.btn-primary {
  --art-color: #fff;
  min-width: 210px;
  justify-content: center;
  height: 56px;
  padding: 0 30px 0 24px;
  background: linear-gradient(135deg, var(--rose-2), var(--rose));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 12px 24px -12px rgba(225, 29, 72, .8);
}

.btn-primary.is-next { background: var(--ink); box-shadow: 0 12px 24px -12px rgba(28, 34, 48, .8); }
.btn-primary.is-show { --art-color: #fde047; }
.btn-primary.is-reveal { --bulb-fill: #fde047; --bulb-rays: 1; }

/* Nach dem Prüfen automatisch weiter (Alex, 28.09.2026): 3 – 2 – 1 im Weiter-Knopf, dann fährt das Tor zu */
.auto-count {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0 -14px 0 2px;
  padding-top: .14em;
  border-radius: 50%;
  background: #fde047;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}
.auto-count.is-tick { animation: tick .8s cubic-bezier(.2, .9, .3, 1.2); }
.btn-primary.is-paused .auto-count { background: #d5d9e4; }

.confetti { position: fixed; z-index: 60; top: 0; left: 0; width: 18px; height: 18px; pointer-events: none; }
.confetti svg { width: 100%; height: 100%; }

@keyframes pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@keyframes slide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes flash-in { from { opacity: .2; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes roll-down {
  0% { transform: translateY(-102%); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  62.5% { transform: scaleY(.985); animation-timing-function: cubic-bezier(.5, 1, .89, 1); }
  75% { transform: translateY(-4%); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  87.5% { transform: scaleY(.995); animation-timing-function: cubic-bezier(.5, 1, .89, 1); }
  93.5% { transform: translateY(-1%); animation-timing-function: cubic-bezier(.11, 0, .5, 0); }
  100% { transform: none; }
}
@keyframes roll-up {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, 0, .6, 1); }
  14% { transform: translateY(1.5%); animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
  100% { transform: translateY(-102%); }
}
@keyframes wobble { 0% { transform: none; } 20% { transform: rotate(-10deg); } 42% { transform: rotate(7deg); } 62% { transform: rotate(-3.5deg); } 80% { transform: rotate(1.5deg); } 100% { transform: none; } }
@keyframes tick { 0% { opacity: 0; transform: scale(.55) rotate(-8deg); } 30% { opacity: 1; transform: scale(1.06) rotate(1deg); } 45% { transform: scale(1) rotate(0); } 100% { transform: scale(1); } }

/* ---------- Anpassungen an Bildschirmgrößen (Tablet und Tafel) ---------- */

@media (max-height: 800px) {
  :root { --gap: 12px; }
  .btn-primary { height: 52px; }
  .btn { height: 48px; }
}

@media (max-width: 700px) {
  .chip-btn.has-label { width: 46px; padding: 0; }
  .chip-label { display: none; }
}

/* Schmales Menü: Spalten untereinander */
@media (max-width: 620px) {
  .menu-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Hochformat: Bühne oben, Antwort unten */
@media (max-aspect-ratio: 1/1) {
  .sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .app[data-mode="show"] .sheet { grid-template-rows: minmax(0, 1fr); }
}

/* Schmale Breiten: Kopfzeile zweizeilig, Titel in der zweiten Reihe */
@media (max-width: 900px) {
  .topbar { grid-template-rows: auto auto; row-gap: 4px; }
  .left { grid-column: 1 / 3; grid-row: 1; }
  .tools { grid-column: 3; grid-row: 1; }
  .task { grid-column: 1 / -1; grid-row: 2; }
  .task-label { font-size: clamp(1.5rem, 3.6vh, 2.2rem); }
}

@media (max-width: 700px) {
  .segmented .bis { display: none; }
  .btn-primary { min-width: 0; }
}

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

/* Zurück zur Übersicht (Alex, 28.09.2026) */
a.chip-btn { color: var(--ink); text-decoration: none; }
.back-btn svg { transform: scaleX(-1); }