/* 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;

  --t: #8b5cf6; --t-dark: #5b21b6; --t-tint: #f5f3ff;
  --h: #f43f5e; --h-dark: #9f1239; --h-tint: #fff1f2;
  --z: #3b82f6; --z-dark: #1e40af; --z-tint: #eff6ff;
  --e: #22c55e; --e-dark: #166534; --e-tint: #effcf4;

  /* Kastenfarben */
  --c-build: #7c3aed; --c-word: #e11d48; --c-neighbours: #2563eb; --c-parity: #d97706; --c-line: #0d9488;
  --c-dice: #c026d3; --c-field: #0891b2; --c-house: #ea580c; --c-place: #4f46e5; --c-compare: #4d7c0f;
  --c-round: #db2777; --c-fingers: #b45309; --c-tally: #475569; --c-money: #15803d; --c-digits: #6d28d9;
  --c-double: #c2410c; --c-digitsum: #0369a1; --c-steps: #0f766e;

  --radius: 22px;
  --radius-sm: 14px;
  --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;
}

* { 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; }
: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;
}

.app.is-dragging,
.app.is-dragging * { cursor: grabbing !important; }

/* ---------- Kopfzeile ---------- */

.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); }

/* Titel und Zahl stehen nebeneinander, damit die Kopfzeile flach bleibt. */
.task {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: clamp(10px, 1.4vw, 20px);
  min-width: 0;
}

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

.target,
.target-input {
  min-width: 2ch;
  margin: 0;
  padding: .06em .12em 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 9vh, 6.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: .92;
}

.target { display: inline-flex; transition: background .15s; }
.target:hover { background: var(--soft); }

.target-input {
  width: 4.4ch;
  border-bottom: 4px solid var(--rose);
  border-radius: 10px 10px 0 0;
  background: #fff5f7;
  text-align: center;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}

.digit { display: inline-block; }
.digit.is-group { margin-left: .16em; }
.target.is-flip .digit { animation: rise .42s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 45ms); }

.dice {
  display: grid;
  flex: none;
  place-items: center;
  width: clamp(46px, 7vh, 60px);
  height: clamp(46px, 7vh, 60px);
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #fff;
  box-shadow: none;
  transition: transform .15s;
}

.dice svg { width: 100%; height: 100%; }
.dice:hover { transform: translateY(-1px) rotate(-6deg); }
.dice.is-rolling svg { animation: roll .45s ease-out; }

.tools { position: relative; display: flex; 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ü „Aufgaben auswählen“ ---------- */

.menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 12px);
  right: 0;
  width: min(560px, 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 10px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.menu-list { columns: 2; column-gap: 18px; }
.menu-group { break-inside: avoid; margin-bottom: 10px; }
.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-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px 4px 6px;
  border-radius: 12px;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 500;
}

.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: 28px; height: 28px; }
.menu-icon svg { width: 100%; height: 100%; }
.menu-note { margin: 2px 4px 10px; color: var(--muted); font-size: .82rem; font-weight: 500; }

/* Autokorrektur (28.09.2026 abends): Schalter unter der Liste */
.menu-switch { position: relative; display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; padding: 8px 10px; border-radius: 14px; background: var(--soft); cursor: pointer; }
.menu-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; flex: none; width: 50px; height: 30px; border-radius: 999px; background: #cfd4e0; transition: background-color .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(20, 27, 45, .25); transition: transform .15s; }
.menu-switch input:checked + .switch-track { background: var(--ok); }
.menu-switch input:checked + .switch-track::after { transform: translateX(20px); }
.menu-switch input:focus-visible + .switch-track { outline: 3px solid #2563eb; outline-offset: 2px; }
.menu-switch-text { display: grid; gap: 1px; min-width: 0; }
.menu-switch-text b { font-size: .95rem; font-weight: 600; }
.menu-switch-text small { color: var(--muted); font-size: .78rem; font-weight: 500; line-height: 1.2; }

.menu-reset {
  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(--c-dice); }
[data-for="fingers"] { --art-color: var(--c-fingers); }
[data-for="build"] { --art-color: var(--c-build); }
[data-for="field"] { --art-color: var(--c-field); }
[data-for="tally"] { --art-color: var(--c-tally); }
[data-for="money"] { --art-color: var(--c-money); }
[data-for="house"] { --art-color: var(--c-house); }
[data-for="place"] { --art-color: var(--c-place); }
[data-for="digits"] { --art-color: var(--c-digits); }
[data-for="word"] { --art-color: var(--c-word); }
[data-for="neighbours"] { --art-color: var(--c-neighbours); }
[data-for="compare"] { --art-color: var(--c-compare); }
[data-for="round"] { --art-color: var(--c-round); }
[data-for="parity"] { --art-color: var(--c-parity); }
[data-for="double"] { --art-color: var(--c-double); }
[data-for="digitsum"] { --art-color: var(--c-digitsum); }
[data-for="steps"] { --art-color: var(--c-steps); }
[data-for="line"] { --art-color: var(--c-line); }
.menu-box { --art-color: var(--ok); }

/* ---------- Arbeitsfläche: Zeilen werden in app.js berechnet ---------- */

.sheet { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; }
.sheet-top { display: flex; gap: var(--gap); min-height: 0; flex: var(--h, 1) 1 calc(var(--h, 0) * 1px); }
/* Linke Spalte: „Lege die Zahl“ als normaler Kasten, darunter eine weitere Karte (28.09.2026 abends) */
.sheet-tall { display: flex; flex: none; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.sheet-tall > .card { flex: var(--h, 1) 1 calc(var(--h, 0) * 1px); }
.sheet-rows { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.sheet-row { display: flex; gap: var(--gap); min-width: 0; min-height: 0; flex: var(--h, 1) 1 calc(var(--h, 0) * 1px); }
.sheet-row > .card { flex: var(--w, 1) 1 calc(var(--w, 0) * 1px); }
.sheet-line { flex: calc(var(--h, 1) * .4) 1 calc(var(--h, 0) * 1px); }
.sheet-line > .card { flex: 1 1 auto; }
.sheet-body { display: flex; flex: 1 1 auto; gap: var(--gap); min-height: 0; }
.sheet-main { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.sheet-side { display: flex; flex: none; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.sheet-side > .card { flex: var(--h, 1) 1 calc(var(--h, 0) * 1px); }

.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);
  container-type: inline-size;
}

.card-build { --c: var(--c-build); --tint: #f5f3ff; }
.card-word { --c: var(--c-word); --tint: #fff1f4; }
.card-neighbours { --c: var(--c-neighbours); --tint: #eff6ff; }
.card-parity { --c: var(--c-parity); --tint: #fff7e6; }
.card-line { --c: var(--c-line); --tint: #ecfdf8; }
.card-dice { --c: var(--c-dice); --tint: #fdf4ff; }
.card-field { --c: var(--c-field); --tint: #ecfeff; }
.card-house { --c: var(--c-house); --tint: #fff7ed; }
.card-place { --c: var(--c-place); --tint: #eef2ff; }
.card-compare { --c: var(--c-compare); --tint: #f7fee7; }
.card-round { --c: var(--c-round); --tint: #fdf2f8; }
.card-fingers { --c: var(--c-fingers); --tint: #fffbeb; }
.card-tally { --c: var(--c-tally); --tint: #f1f5f9; }
.card-money { --c: var(--c-money); --tint: #f0fdf4; }
.card-digits { --c: var(--c-digits); --tint: #f5f3ff; }
.card-double { --c: var(--c-double); --tint: #fff7ed; }
.card-digitsum { --c: var(--c-digitsum); --tint: #f0f9ff; }
.card-steps { --c: var(--c-steps); --tint: #f0fdfa; }

/* Kopf je Karte (28.09.2026 abends): rechts oben Haken (nur diese Karte prüfen), Lupe (groß zeigen), Mülleimer (leeren).
   Die Knöpfe werden in schmalen Karten kleiner; der Titel bekommt immer den Platz links davon. */
.card-head, .card-tools, .card-mark { --btn: 44px; --btn-gap: 4px; --tools: calc(var(--btn) * 3 + var(--btn-gap) * 2); }
.card-head { min-height: 44px; display: flex; align-items: center; gap: 10px; min-width: 0; padding-right: calc(var(--tools) + 8px); }

.card-tools { position: absolute; z-index: 3; top: 7px; right: 8px; display: flex; gap: var(--btn-gap); }
.card-btn {
  display: grid;
  place-items: center;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  --art-color: #cbd5e1;
  transition: background-color .15s, transform .15s;
}
.card-btn svg { width: 68%; height: 68%; }
.card-btn:hover { background: #e4e7ef; }
.card-btn:active { transform: scale(.92); }
.card-btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; }
.card-check:hover { --art-color: #86efac; }
.card-zoom:hover, .card-zoom[aria-pressed="true"] { --art-color: #bfdbfe; }
.card-clear:hover { --art-color: #fda4af; }
@container (max-width: 300px) {
  .card-head, .card-tools, .card-mark { --btn: 44px; --btn-gap: 3px; }
}

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

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

.card-title {
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(.94rem, 2.2vh, 1.16rem);
  font-weight: 800;
  line-height: 1.05;
  transform: translateY(.06em);
}

.card-sub { overflow: hidden; min-width: 0; color: var(--muted); font-size: .78rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.card-sub.is-note { color: var(--warn); font-weight: 700; }
.card-sub.is-note.is-good { color: #11632f; }
/* Nur Überschriften im Kopf (Alex, 28.09.2026): Anleitungen ausgeblendet, Hinweise nach dem Prüfen bleiben */
.card-sub:not(.is-note) { display: none; }
/* Hinweise nach dem Prüfen oder beim Umschalten stehen in einer eigenen Zeile unter dem Titel */
.card-head:has(.card-sub.is-note) { flex-wrap: wrap; row-gap: 2px; }
.card-head:has(.card-sub.is-note) .card-title { min-width: auto; }
.card-sub.is-note { flex-basis: 100%; white-space: normal; line-height: 1.2; }

/* Kleine Knöpfe im Kartenkopf: „neu“, „mit Cent“, Umschalter */
.card-tool,
.pill-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  margin-left: auto;
  padding: 0 12px 0 8px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
}
.card-tool svg { width: 24px; height: 24px; --art-color: var(--c); }
.card-tool:hover, .pill-toggle:hover { background: var(--soft); }
.card-tool.is-spin svg { animation: spin .45s ease-out; }
.pill-box { display: grid; place-items: center; width: 20px; height: 20px; border: 2px solid #cfd4e0; border-radius: 6px; background: #fff; --art-color: var(--ok); }
.pill-box svg { width: 17px; height: 17px; visibility: hidden; }
.pill-toggle[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 45%, #fff); background: var(--tint); }
.pill-toggle[aria-pressed="true"] .pill-box { border-color: var(--ok); background: var(--ok-soft); }
.pill-toggle[aria-pressed="true"] .pill-box svg { visibility: visible; }

.mode-switch { display: flex; flex: none; gap: 2px; margin-left: auto; padding: 3px; border-radius: 999px; background: var(--soft); }
.mode-switch button { height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 600; white-space: nowrap; }
.mode-switch button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 27, 45, .14); }
/* Köpfe mit Umschalter (Strichliste, Blöcke legen, Zahlwort): In schmalen Karten fällt zuerst die
   Unterzeile weg, dann das Symbol; reicht es dann noch nicht, rutscht der Umschalter in eine zweite Zeile. */
.card-head:has(.mode-switch, .card-tool, .pill-toggle) { flex-wrap: wrap; row-gap: 4px; }
.card-head:has(.mode-switch, .card-tool, .pill-toggle) .card-title { min-width: auto; }
@container (max-width: 520px) {
  .card-head:has(.mode-switch) .card-sub { display: none; }
}
@container (max-width: 400px) {
  .card-head:has(.mode-switch, .card-tool, .pill-toggle) .card-icon { display: none; }
  .mode-switch button { padding: 0 8px; }
}
@container (max-width: 280px) {
  .card-icon { display: none; }
}
.eq-red { color: #e11d48; }
.eq-blue { color: #2563eb; }
.card-eq { flex: none; margin-left: auto; color: #11632f; font-family: var(--font-display); font-size: clamp(1.05rem, 2.6vh, 1.4rem); font-weight: 800; white-space: nowrap; }

/* Ergebniszeichen liegt genau auf dem Haken-Knopf; ein Tippen darauf prüft die Karte erneut. */
.card-mark {
  position: absolute;
  z-index: 4;
  top: calc(7px + var(--btn) * .09);
  right: calc(8px + var(--btn) * 2.09 + var(--btn-gap) * 2);
  display: none;
  pointer-events: none;
  place-items: center;
  width: calc(var(--btn) * .82);
  height: calc(var(--btn) * .82);
  border-radius: 50%;
  color: #fff;
}

.card-mark svg { display: none; width: 100%; height: 100%; }
.card.is-right .mark-right { display: block; }
.card.is-wrong .mark-wrong { display: block; }
.card.is-open .mark-open { display: block; }

.card.is-right { border-image-source: var(--frame-ok); }
.card.is-right .card-mark { display: grid; background: #fff; }
.card.is-wrong { border-image-source: var(--frame-warn); animation: shake .42s; }
.card.is-wrong .card-mark { display: grid; background: #fff; }
.card.is-open { border-image-source: var(--frame-open); }
.card.is-open .card-mark { display: grid; background: #fff; }

/* Gemeinsame Zahlenfelder */
.num-input,
.nb input,
.room,
.place-field input,
.round input,
.calc input,
.qsum input,
input.st-box,
.dg-cell {
  height: clamp(44px, 6vh, 56px);
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.1vh, 1.65rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  padding: .12em 0 0;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
  transition: border-color .15s, background .15s;
}

.nb input:focus,
.room:focus,
.place-field input:focus,
.round input:focus,
.calc input:focus,
.qsum input:focus,
.dg-cell:focus { border-color: #93b4f5; background: #fff; }

input.is-right { border-color: var(--ok) !important; background: #f0fdf4 !important; }
input.is-wrong { border-color: var(--warn) !important; background: #fff7ed !important; }

/* ---------- Lege die Zahl ---------- */

.build { display: grid; grid-template-columns: clamp(78px, 8vw, 112px) minmax(0, 1fr); gap: 10px; min-height: 0; }
.app[data-range="1000"] .build,
.app[data-range="10000"] .build { grid-template-columns: clamp(70px, 6.4vw, 104px) minmax(0, 1fr); gap: 8px; }
.app[data-range="1000"] .mat,
.app[data-range="10000"] .mat { gap: 6px; }
.app[data-range="10"] .build,
.app[data-range="20"] .build { grid-template-columns: clamp(66px, 6.4vw, 96px) minmax(0, 1fr); }

.palette { display: grid; grid-auto-rows: minmax(0, 1fr); gap: 8px; min-height: 0; }

.tile {
  --c: var(--e); --c-dark: var(--e-dark); --tint: var(--e-tint);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: 4px;
  min-height: 0;
  padding: 8px 6px 7px;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--tint);
  cursor: grab;
  touch-action: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}

.tile:hover { border-color: color-mix(in srgb, var(--c) 35%, transparent); box-shadow: 0 12px 22px -14px var(--c); transform: translateY(-2px); }
.tile:active { transform: scale(.97); }
.tile-t { --c: var(--t); --c-dark: var(--t-dark); --tint: var(--t-tint); }
.tile-h { --c: var(--h); --c-dark: var(--h-dark); --tint: var(--h-tint); }
.tile-z { --c: var(--z); --c-dark: var(--z-dark); --tint: var(--z-tint); }

.tile-art { position: relative; align-self: stretch; justify-self: stretch; min-height: 0; pointer-events: none; }
.tile-art svg { position: absolute; inset: 0; width: auto; max-width: 100%; max-height: 100%; margin: auto; filter: drop-shadow(0 3px 3px rgba(20, 27, 45, .16)); }
.tile-t .tile-art svg { height: clamp(32px, 7.4vh, 68px); aspect-ratio: 1; }
.tile-h .tile-art svg { height: clamp(30px, 7vh, 64px); aspect-ratio: 1; }
.tile-z .tile-art svg { height: clamp(44px, 10vh, 90px); aspect-ratio: 15 / 105; }
.tile-e .tile-art svg { height: clamp(16px, 3.6vh, 30px); aspect-ratio: 1; }
.tile-label { color: var(--c-dark); font-size: .74rem; font-weight: 600; pointer-events: none; }

.mat {
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 8px;
  min-height: 0;
  border-radius: var(--radius-sm);
  transition: box-shadow .2s;
}

.mat.is-target { box-shadow: 0 0 0 4px color-mix(in srgb, var(--drag-c, var(--rose)) 40%, transparent); }

.col {
  --c: var(--e); --c-dark: var(--e-dark); --tint: var(--e-tint);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-sm);
  background: var(--tint);
  transition: background .2s;
}

.col-t { --c: var(--t); --c-dark: var(--t-dark); --tint: var(--t-tint); }
.col-h { --c: var(--h); --c-dark: var(--h-dark); --tint: var(--h-tint); }
.col-z { --c: var(--z); --c-dark: var(--z-dark); --tint: var(--z-tint); }
.col.is-hot { background: color-mix(in srgb, var(--c) 16%, #fff); }

.col-head { display: flex; justify-content: center; padding: 8px 8px 0; }

.col-letter {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding-top: .12em;
  border-radius: 9px;
  background: var(--c);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 16px -8px var(--c);
}

.col-body {
  display: grid;
  grid-template-columns: repeat(var(--per, 1), var(--bw, 30px));
  align-content: center;
  justify-content: center;
  gap: var(--gap-b, 6px);
  min-width: 0;
  min-height: 0;
  padding: 8px;
  overflow: hidden;
}

.col-foot { display: flex; justify-content: center; gap: clamp(2px, 1cqi, 6px); padding: 2px 2px 8px; }

.step {
  position: relative;
  display: grid;
  place-items: center;
  /* In schmalen Karten (vier Stellen) werden die Knöpfe kleiner, statt über die Spalte zu ragen. */
  width: clamp(22px, 7.5cqi, 32px);
  height: clamp(22px, 7.5cqi, 32px);
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--c-dark, var(--ink));
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(20, 27, 45, .12);
}

.step::after { position: absolute; inset: -6px; content: ""; }
.step:active { transform: scale(.92); }
.step:disabled { opacity: .35; cursor: default; }

/* 28.09.2026 (Alex): gelegte Blöcke, Würfel, Plättchen und Finger ohne Schatten; nur das Ziehbild (.ghost) behält ihn. */
.blk { width: var(--bw, 30px); aspect-ratio: 1; cursor: grab; touch-action: none; }
.blk-z { aspect-ratio: 15 / 105; }
.blk svg { width: 100%; height: 100%; pointer-events: none; }
.blk.is-new { animation: pop .3s cubic-bezier(.2, .9, .3, 1.35); }
.blk.is-lifted { opacity: .22; }
.blk.is-leaving { animation: leave .18s ease-in forwards; pointer-events: none; }

/* ---------- Zwei Würfel ---------- */

.dice-task { display: flex; align-items: center; justify-content: center; gap: clamp(8px, min(2.2vw, 4cqi), 30px); min-height: 0; --die: clamp(34px, min(12vh, 19cqi), 124px); --pick: clamp(26px, min(6vh, 10cqi), 56px); }
.dice-slots { display: flex; align-items: center; gap: 8px; }
.die-slot { position: relative; width: var(--die); height: var(--die); border-radius: 24%; transition: box-shadow .15s; }
.die-slot.is-over { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 40%, transparent); }

.die-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 3px dashed color-mix(in srgb, var(--c) 35%, #d5d9e4);
  border-radius: 24%;
  background: var(--field);
  touch-action: none;
}

.die-face.has-value { border: 0; background: transparent; cursor: grab; }
.die-face svg { width: 100%; height: 100%; pointer-events: none; }
.die-face.is-lifted { opacity: .25; }

.die-clear {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(20, 27, 45, .22);
}

.die-clear::after { position: absolute; inset: -6px; content: ""; }
.dice-plus { color: var(--muted); font-family: var(--font-display); font-size: clamp(1.6rem, 4.4vh, 2.8rem); font-weight: 800; line-height: 1; }
.dice-tray { display: grid; grid-template-columns: repeat(3, var(--pick)); gap: 6px; padding: 8px; border-radius: 16px; background: var(--tint); }
.die-pick { width: var(--pick); height: var(--pick); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; transition: transform .12s; }
.die-pick:hover { transform: translateY(-2px) rotate(-4deg); }
.die-pick svg { width: 100%; height: 100%; pointer-events: none; }

/* ---------- Zehnerfeld / Zwanzigerfeld ---------- */

.field-wrap { display: grid; place-items: center; min-height: 0; }
.field { --cell: clamp(28px, min(6.4vh, 15.4cqi), 62px); display: flex; gap: clamp(4px, .8vw, 10px); }
.field.is-twenty { --cell: clamp(24px, min(6.2vh, 8cqi), 58px); }
/* Pfeil vor jeder Reihe: ganze Reihe auf einmal füllen */
.row-picks { display: grid; grid-template-rows: repeat(2, 1fr); height: calc(var(--cell) * 2); }
/* Hunderterfeld (28.09.2026): 10 × 10 mit Lücke nach fünf Spalten und fünf Reihen */
.field.is-hundred { --cell: clamp(18px, min(2.9vh, 7.6cqi), 34px); }
.field.is-hundred .tenframe { width: calc(var(--cell) * 10.35); height: calc(var(--cell) * 10.35); }
.field.is-hundred .tenframe-cells { grid-template-columns: repeat(5, 1fr) .35fr repeat(5, 1fr); grid-template-rows: repeat(5, 1fr) .35fr repeat(5, 1fr); gap: 0; }
.field.is-hundred .row-picks { grid-template-rows: repeat(5, 1fr) .35fr repeat(5, 1fr); height: calc(var(--cell) * 10.35); }
.field.is-hundred .cell { border: 1px solid #cfd4e0; border-radius: 0; }
.field.is-hundred .cell svg { width: 84%; height: 84%; }
.field.is-hundred .row-pick { width: calc(var(--cell) * 1.1); border-radius: 8px; }
.row-pick { display: grid; place-items: center; width: calc(var(--cell) * .78); min-height: 0; padding: 0; border: 0; border-radius: 12px; background: none; --art-color: var(--c-field); transition: background-color .15s, transform .15s; }
.row-pick svg { width: 62%; height: 62%; }
.row-pick:hover { background: var(--soft); }
.row-pick:active { transform: scale(.92); }
.field.is-twenty .tenframe { width: calc(var(--cell) * 10.4); }
.field.is-twenty .tenframe-cells { grid-template-columns: repeat(5, 1fr) .4fr repeat(5, 1fr); }
.tenframe { position: relative; width: calc(var(--cell) * 5); height: calc(var(--cell) * 2); }
.tenframe-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tenframe-cells { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; }

.cell {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
}

.cell svg { width: 76%; height: 76%; pointer-events: none; }
.cell.is-red { --chip: #f43f5e; --chip-rim: #9f1239; }
.cell.is-blue { --chip: #3b82f6; --chip-rim: #1e40af; }
.cell.is-red svg, .cell.is-blue svg { animation: pop .2s ease-out; }
.cell:hover { background: rgba(28, 34, 48, .04); }

/* ---------- Zahlenhaus ---------- */

/* Titel und Anleitung bleiben auch in der schmalen Hausspalte getrennt. */
.card-house .card-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; }
.card-house .card-icon { grid-row: 1 / 3; }
.card-house .card-title { margin: 0; }
.card-house .card-sub { grid-column: 2; white-space: normal; font-size: .7rem; line-height: 1.2; }


.house-wrap { display: grid; grid-template-columns: minmax(0, 220px) auto; justify-content: center; align-items: stretch; gap: clamp(8px, 1.2vw, 14px); min-height: 0; }
.house { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; padding: 0 clamp(10px, 8%, 22px) 5px; }
.house-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.house-roof { position: relative; height: clamp(50px, 9vh, 92px); }
.house-number { position: absolute; z-index: 1; top: var(--win-y, 60%); left: 50%; font-family: var(--font-display); font-size: clamp(1.1rem, calc(var(--win-h, 30px) * .82), 2.4rem); font-weight: 800; line-height: 1; transform: translate(-50%, -42%); }
.house-floors { position: relative; display: grid; grid-template-rows: repeat(var(--floors, 3), minmax(0, 1fr)); min-height: 0; }
.floor { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; padding: 3px 5px; gap: 10px; }
.room {
  height: auto;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: .12em 0 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-display);
  font-size: clamp(.95rem, calc(var(--fh, 36px) * .6), 2.1rem);
  font-weight: 800;
  line-height: 1;
}
button.room { touch-action: none; transition: background .12s, box-shadow .12s; }
button.room.is-empty { background: #f4eadb; box-shadow: inset 0 0 0 1px #dfcbb0; }
button.room.is-selected { background: #eef4ff; box-shadow: inset 0 0 0 3px #3b82f6; }
button.room.is-over { background: var(--tint); box-shadow: inset 0 0 0 3px var(--c); }
button.room.is-right { box-shadow: inset 0 0 0 3px var(--ok); color: #11632f; }
button.room.is-wrong { background: #fff7ed; box-shadow: inset 0 0 0 3px var(--warn); }
button.room.is-lifted { opacity: .3; }

.house-bar { display: grid; grid-template-columns: repeat(var(--cols, 1), clamp(34px, 4.4vh, 48px)); grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr)); grid-auto-flow: column; align-content: stretch; gap: 4px 5px; min-height: 0; padding: 2px 0 6px; }
.hb-num { position: relative; display: grid; place-items: center; min-height: 0; padding: .12em 0 0; border: 0; background: none; cursor: grab; touch-action: none; transition: transform .12s; --card-fill: #fff; }
.hb-num.is-alt { --card-fill: #ffe8d6; }
.hb-num.is-zero { --card-fill: #eef0f5; }
.hb-num svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hb-num b { position: relative; font-family: var(--font-display); font-size: clamp(.95rem, calc(var(--th, 36px) * .56), 1.7rem); font-weight: 800; line-height: 1; }
.hb-num:hover { transform: translateY(-1px) rotate(-2deg); }
.hb-num:active { transform: scale(.94); }
.ghost-num { display: grid; place-items: center; padding-top: .12em; border: 2px solid var(--ink); border-radius: 9px; background: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; }

/* ---------- Stufenwerte ---------- */

.place { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 6px; min-height: 0; }
.place-num, .op { font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vh, 1.9rem); font-weight: 800; line-height: 1; }
.op { color: var(--muted); }
.place-field { display: grid; justify-items: center; gap: 2px; }
.place-field input { width: calc(var(--digits, 2) * .62em + 20px); }
.place-field span, .dg-head { font-family: var(--font-display); font-size: .9rem; font-weight: 800; line-height: 1; }
.place-t span { color: var(--t-dark); }
.place-h span { color: var(--h-dark); }
.place-z span { color: var(--z-dark); }
.place-e span { color: var(--e-dark); }

/* ---------- Stellenwerttafel ---------- */

.digits { display: grid; place-items: center; min-height: 0; }
.digits-table { display: grid; grid-template-columns: repeat(var(--cols, 4), clamp(40px, min(7.6vh, 22cqi), 66px)); overflow: hidden; border: 2px solid var(--ink); border-radius: 12px; background: #fff; }
.dg-head { display: grid; place-items: center; height: clamp(24px, 3.6vh, 32px); padding-top: .14em; color: #fff; }
.dg-t { background: var(--t); }
.dg-h { background: var(--h); }
.dg-z { background: var(--z); }
.dg-e { background: var(--e); }
.dg-cell { width: 100%; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: #fff; }
.dg-cell.is-inner { border-left: 2px solid #aab1c0; }
.dg-cell:focus { background: #f5f8ff; }

/* ---------- Zahlwort ---------- */

.word { --ws: 1; display: grid; align-content: safe center; gap: clamp(8px, 1.4vh, 14px); min-height: 0; }

.word-answer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: calc(clamp(52px, 8vh, 66px) * var(--ws));
  padding: 6px;
  border: 2px dashed #d5d9e4;
  border-radius: 16px;
  background: var(--field);
  transition: border-color .15s, background .15s, gap .25s;
}

.word-answer:empty::before {
  color: #9aa1b2;
  font-size: .88rem;
  font-weight: 500;
  content: attr(data-empty-text);
}

.word-answer.is-over { border-color: var(--rose); background: #fff5f7; }
.word-answer.is-joined { gap: 0; border-style: solid; border-color: #bbf7d0; background: #f0fdf4; }
.word-answer.is-joined .wtile { border-radius: 0; box-shadow: none; }
.word-answer.is-joined .wtile:first-child { border-radius: 12px 0 0 12px; }
.word-answer.is-joined .wtile:last-child { border-radius: 0 12px 12px 0; }
.word-answer.is-joined .wtile:only-child { border-radius: 12px; }

.word-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: calc(44px * var(--ws)); }

.wtile {
  height: calc(clamp(40px, 6vh, 50px) * var(--ws));
  padding: .1em calc(clamp(11px, 1.1vw, 17px) * var(--ws)) 0;
  border: 2px solid #e1e4ec;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(clamp(1.08rem, 2.7vh, 1.45rem) * var(--ws));
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 0 #e1e4ec;
  cursor: grab;
  touch-action: none;
  transition: transform .12s;
}

.wtile:hover { transform: translateY(-1px); }
.wtile.is-new { animation: pop .25s ease-out; }
.wtile.is-lifted { opacity: .25; }
.word-answer .wtile { border-color: #fbc0cd; background: #fff4f6; box-shadow: 0 3px 0 #fbc0cd; }
.word-answer.is-joined .wtile { border-color: #bbf7d0; background: #fff; color: #11632f; }

/* ---------- Nachbarn ---------- */

.nb { display: grid; align-content: safe center; gap: clamp(6px, 1.2vh, 12px); min-height: 0; }
.nb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: clamp(4px, 2cqi, 8px); }
.nb-field { display: grid; justify-items: center; gap: 2px; min-width: 0; }
/* Beschriftung bricht in schmalen Karten um („Tausender / davor“), statt über den Rand zu laufen */
.nb-field span { max-width: 100%; color: var(--muted); font-size: clamp(.64rem, 4.2cqi, .72rem); font-weight: 500; line-height: 1.1; text-align: center; }
.nb input { width: 100%; max-width: 116px; }

.nb-center {
  display: grid;
  place-items: center;
  min-width: clamp(44px, min(6vw, 22cqi), 76px);
  height: clamp(44px, 6vh, 56px);
  padding: .12em clamp(5px, 2.4cqi, 10px) 0;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3.1vh, 1.65rem);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.nb-center.is-small { background: var(--soft); color: var(--ink); }

/* ---------- Gerade / ungerade, Vergleichen ---------- */

.parity { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }

.parity button {
  min-height: 0;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  padding: 0 4px;
  font-size: clamp(.85rem, min(2.5vh, 12cqi), 1.3rem);
  font-weight: 600;
  transition: background .15s, border-color .15s, transform .12s;
}

.parity button:active, .cmp-buttons button:active { transform: scale(.97); }
.parity button[aria-pressed="true"] { border-color: #f59e0b; background: #fff7e6; color: #7a4b00; }
.card-parity.is-right .parity button[aria-pressed="true"] { border-color: var(--ok); background: #f0fdf4; color: #11632f; }
.card-parity.is-wrong .parity button[aria-pressed="true"] { border-color: var(--warn); background: #fff7ed; color: #9a3412; }

.compare { display: grid; align-content: safe center; justify-items: center; gap: clamp(6px, 1.2vh, 12px); min-height: 0; }
.cmp-row { display: flex; align-items: center; gap: clamp(4px, 3cqi, 10px); max-width: 100%; }
.cmp-num { font-family: var(--font-display); font-size: clamp(1.3rem, min(4.2vh, 8cqi), 2.4rem); font-weight: 800; line-height: 1; white-space: nowrap; transform: translateY(.06em); }
.cmp-num.is-target { color: var(--rose); }

.cmp-slot {
  display: grid;
  place-items: center;
  width: clamp(34px, min(6vh, 20cqi), 56px);
  height: clamp(34px, min(6vh, 20cqi), 56px);
  flex: none;
  padding-top: .1em;
  border: 2px dashed #cfd4e0;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vh, 2.2rem);
  font-weight: 800;
  line-height: 1;
}

.cmp-slot.has-value { border-style: solid; border-color: var(--c); background: var(--tint); }
.card-compare.is-right .cmp-slot { border-color: var(--ok); background: #f0fdf4; }
.card-compare.is-wrong .cmp-slot { border-color: var(--warn); background: #fff7ed; }
/* Die drei Zeichen-Knöpfe teilen sich die Kartenbreite; sie werden nie breiter als ein Drittel. */
.cmp-buttons { display: flex; gap: clamp(4px, 2.5cqi, 8px); max-width: 100%; }

.cmp-buttons button {
  width: clamp(34px, min(6.4vh, 28cqi), 60px);
  height: clamp(40px, 6vh, 54px);
  padding-top: .1em;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--field);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vh, 1.8rem);
  font-weight: 800;
  line-height: 1;
}

.cmp-buttons button[aria-pressed="true"] { border-color: var(--c); background: var(--tint); }

/* ---------- Runden, Verdoppeln/Halbieren, Quersumme ---------- */

.round, .calc { display: grid; align-content: safe center; gap: clamp(6px, 1.2vh, 10px); min-height: 0; }
.round-row, .calc-row { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 130px); align-items: center; justify-content: center; gap: 10px; }
.round-label, .calc-label { color: var(--muted); font-size: .9rem; font-weight: 500; white-space: nowrap; text-align: right; }
.round input, .calc input { width: 100%; }

.qsum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(4px, 3cqi, 10px); min-height: 0; }
.qsum-num { font-family: var(--font-display); font-size: clamp(1.1rem, min(3.8vh, 12cqi), 2.2rem); font-weight: 800; line-height: 1; white-space: nowrap; transform: translateY(.06em); }
.qsum-arrow { color: var(--muted); font-size: 1.4rem; font-weight: 600; }
.qsum input { width: clamp(52px, min(9vh, 30cqi), 90px); }

/* ---------- Fingerbild ---------- */

.hands { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 24px); min-height: 0; }
.hand { width: auto; height: min(100%, 46cqi, clamp(96px, 18vh, 190px)); aspect-ratio: 1; overflow: visible; --hand: #fdf0e2; }
.hand.is-left { transform: scaleX(-1); }
.finger { cursor: pointer; outline: none; }
.finger:focus-visible use { filter: drop-shadow(0 0 2px #2563eb) drop-shadow(0 0 2px #2563eb); }
.finger:hover use { opacity: .92; }

/* ---------- Strichliste ---------- */

.tally { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 0; }

.tally-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 2px 10px;
  height: 100%;
  min-height: 70px;
  max-height: 150px;
  padding: 6px;
  border: 2px dashed #d5d9e4;
  border-radius: 16px;
  background: var(--field);
  touch-action: manipulation;
}

.tally-area:empty::before { color: #9aa1b2; font-size: .88rem; font-weight: 500; content: attr(data-empty-text); }
.tally-area svg { width: clamp(38px, 7vh, 64px); height: clamp(38px, 7vh, 64px); }
.tally-steps { display: grid; gap: 8px; }
.card-tally .step { --c-dark: var(--ink); width: 44px; height: 44px; background: var(--soft); box-shadow: none; }
.tally[data-mode="tap"] .tally-pad, .tally[data-mode="tap"] .tally-tools,
.tally[data-mode="draw"] .tally-area, .tally[data-mode="draw"] .tally-steps { display: none; }
.tally-pad {
  position: relative;
  align-self: stretch;
  min-height: 70px;
  border: 2px dashed #d5d9e4;
  border-radius: 16px;
  background: var(--field);
  cursor: crosshair;
  touch-action: none;
}
.tally-pad:not(.has-ink)::before { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa1b2; font-size: .88rem; font-weight: 500; content: attr(data-empty-text); pointer-events: none; }
.tally-ink { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tally-count { position: absolute; right: 8px; bottom: 6px; padding: 3px 9px 1px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(20, 27, 45, .18); font-family: var(--font-display); font-size: .95rem; font-weight: 800; }
.tally-hint { position: absolute; left: 8px; bottom: 6px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 110px); padding: 3px 10px 2px 4px; border-radius: 999px; background: var(--hint-soft, #fef3c7); color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.15; }
.tally-hint svg { flex: none; width: 22px; height: 22px; --art-color: var(--hint, #d99a00); }
.tally-tools { display: grid; gap: 8px; }
.tool-btn { min-width: 76px; height: 40px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--soft); font-size: .82rem; font-weight: 600; }
.tool-btn:disabled { opacity: .4; cursor: default; }
.tool-btn[aria-pressed="true"] { background: var(--hint-soft); box-shadow: inset 0 0 0 2px var(--hint); color: var(--ink); }
.tally-pad.is-erasing, .draw-pad.is-erasing { border-color: var(--hint); cursor: cell; }
.rubber { fill: rgba(217, 154, 0, .16); stroke: var(--hint); stroke-width: 2; pointer-events: none; }
.tally-tools { gap: 6px; }
.tally-tools .tool-btn { height: 34px; }

/* ---------- Zeichenfelder: Geheimschrift beim Blöcke legen, Zahlwort selbst schreiben (28.09.2026) ---------- */

.draw-pad {
  position: relative;
  align-self: stretch;
  min-width: 0;
  min-height: 70px;
  border: 2px dashed #d5d9e4;
  border-radius: 16px;
  background: var(--field);
  cursor: crosshair;
  touch-action: none;
}
.draw-pad:not(.has-ink)::before { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; color: #9aa1b2; font-size: .88rem; font-weight: 500; text-align: center; content: attr(data-empty-text); pointer-events: none; }
.pad-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pad-ink .ink { fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.pad-ink .ink-e { stroke: var(--e-dark); stroke-width: 8; }
.pad-ink .ink-z { stroke: var(--z-dark); }
.pad-ink .ink-h { stroke: var(--h-dark); }
.pad-ink .ink-t { stroke: var(--t-dark); }
.pad-ink .ink-q { stroke: #a3abbb; stroke-dasharray: 1 7; }
.pad-ink .tag { --c: var(--e); --c-dark: var(--e-dark); }
.pad-ink .tag-z { --c: var(--z); --c-dark: var(--z-dark); }
.pad-ink .tag-h { --c: var(--h); --c-dark: var(--h-dark); }
.pad-ink .tag-t { --c: var(--t); --c-dark: var(--t-dark); }
.pad-ink .tag-q { --c: var(--warn); --c-dark: var(--warn); }
.pad-ink .tag rect { fill: #fff; stroke: var(--c); stroke-width: 2; }
.pad-ink .tag text { fill: var(--c-dark); font-family: var(--font-display); font-size: 15px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.pad-count { position: absolute; z-index: 1; right: 8px; bottom: 6px; max-width: calc(100% - 16px); overflow: hidden; padding: 3px 9px 1px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(20, 27, 45, .18); font-family: var(--font-display); font-size: .95rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.pad-hint { position: absolute; z-index: 1; left: 8px; bottom: 6px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 3px 10px 2px 4px; border-radius: 999px; background: var(--hint-soft); color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.15; pointer-events: none; }
.pad-hint svg { flex: none; width: 22px; height: 22px; --art-color: var(--hint); }
.pad-hint:has(~ .pad-count:not([hidden])) { max-width: calc(100% - 140px); }
.pad-count[hidden], .pad-hint[hidden] { display: none; }

/* Blöcke legen: Legen | Zeichnen in Geheimschrift (Punkt = 1, Strich = 10, Viereck = 100, Würfel = 1000) */
.build[data-mode="draw"] .palette,
.build[data-mode="draw"] .mat,
.build[data-mode="lay"] .code-side,
.build[data-mode="lay"] .code-pad { display: none; }
.code-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-width: 0; min-height: 0; }
.code-key { display: grid; grid-auto-rows: minmax(0, 58px); align-content: start; gap: 6px; min-height: 0; margin: 0; }
.key-row {
  --c: var(--e); --c-dark: var(--e-dark); --tint: var(--e-tint);
  --code-ink: var(--c-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  background: var(--tint);
}
.key-row[hidden] { display: none; }
.key-t { --c: var(--t); --c-dark: var(--t-dark); --tint: var(--t-tint); }
.key-h { --c: var(--h); --c-dark: var(--h-dark); --tint: var(--h-tint); }
.key-z { --c: var(--z); --c-dark: var(--z-dark); --tint: var(--z-tint); }
.key-row dt { display: flex; flex: none; align-items: center; justify-content: center; width: clamp(22px, 4.4vh, 38px); height: clamp(22px, 4.4vh, 38px); }
.key-row dt svg { width: 100%; height: 100%; }
.key-z dt svg { width: auto; aspect-ratio: 16 / 80; }
.key-e dt svg { width: 70%; height: 70%; }
.key-row dd { margin: 0; padding-top: .12em; color: var(--c-dark); font-family: var(--font-display); font-size: clamp(.9rem, 2.4vh, 1.2rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.key-row dd::before { color: var(--muted); font-weight: 700; content: "= "; }
.code-tools { display: grid; gap: 6px; }
.code-tools .tool-btn { min-width: 0; height: 36px; padding: 0 6px; }
.code-pad.is-unknown .tag-q rect { fill: var(--warn-soft); }

/* ---------- Geld legen ---------- */

.money { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; min-height: 0; }

.money-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px 6px;
  min-height: 52px;
  padding: 6px;
  overflow: hidden;
  border: 2px dashed #d5d9e4;
  border-radius: 16px;
  background: var(--field);
  transition: border-color .15s, background .15s;
}

.money-field:empty::before { color: #9aa1b2; font-size: .88rem; font-weight: 500; content: attr(data-empty-text); }
.money-field.is-over { border-color: var(--c); background: var(--tint); }
.money-tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.money-pick, .money-item { padding: 0; border: 0; background: none; cursor: grab; touch-action: none; transition: transform .12s; }
.money-pick:hover { transform: translateY(-2px); }
.money-item.is-new { animation: pop .25s ease-out; }
.money-item.is-lifted { opacity: .25; }

.coin, .note { position: relative; display: grid; place-items: center; pointer-events: none; }
/* Größen: Euro-Münzen, Cent-Münzen etwa nach echten Durchmessern; --mt schrumpft die Leiste, --ms das gelegte Geld. */
.money-tray { --k: var(--mt, 1); }
.money-field { --k: var(--ms, 1); }
.coin { --d: clamp(34px, 5.6vh, 50px); width: calc(var(--d) * var(--k, 1)); height: calc(var(--d) * var(--k, 1)); }
.coin-2 { --d: clamp(37px, 6vh, 54px); }
.cent-50 { --d: clamp(35px, 5.8vh, 52px); }
.cent-20 { --d: clamp(32px, 5.4vh, 48px); }
.cent-10 { --d: clamp(30px, 5vh, 45px); }
.coin-1 { --coin-ring: #d9a520; --coin-core: #d3d9e1; }
.coin-2 { --coin-ring: #d3d9e1; --coin-core: #e3b53a; }
.note { width: calc(clamp(52px, 8vh, 80px) * var(--k, 1)); aspect-ratio: 96 / 52; }
.coin svg, .note svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coin b, .note b { position: relative; padding-top: .14em; font-family: var(--font-display); font-weight: 800; line-height: 1; white-space: nowrap; }
.coin b { font-size: calc(var(--d) * var(--k, 1) * .28); }
.cent b { font-size: calc(var(--d) * var(--k, 1) * .26); }
.note b { margin-right: 22%; font-size: calc(clamp(.85rem, 2vh, 1.15rem) * var(--k, 1)); }
.ghost.ghost-money { display: grid; place-items: center; filter: none; }

/* ---------- Zähl in Schritten weiter ---------- */

.steps { display: grid; align-content: safe center; gap: clamp(6px, 1.2vh, 10px); min-height: 0; }
.steps-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.steps-sizes { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--soft); }
.steps-label { padding: 0 4px 0 10px; color: var(--muted); font-size: .76rem; font-weight: 500; }
.steps-sizes button { min-width: 44px; height: 40px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.steps-sizes button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20, 27, 45, .14); }
.steps-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 6px; row-gap: 0; width: min(100%, 420px); justify-self: center; }
.steps-row.is-long { width: min(100%, 470px); }
.st-hop { position: relative; grid-row: 1; display: grid; justify-items: center; height: clamp(40px, 5.5vh, 50px); color: var(--c); }
.st-hop b { position: relative; z-index: 1; padding: 0 3px; background: #fff; font-family: var(--font-display); font-size: clamp(1.15rem, 2.7vh, 1.5rem); font-weight: 800; line-height: 1.1; }
.st-hop svg { position: absolute; right: 12%; bottom: 0; left: 12%; width: 76%; height: 70%; }
.st-hop.is-back svg { transform: scaleX(-1); }
.st-box { grid-row: 2; width: 100%; min-width: 0; }
b.st-box { display: grid; place-items: center; height: clamp(44px, 6vh, 56px); padding-top: .12em; border-radius: 12px; background: var(--ink); color: #fff; font-family: var(--font-display); font-size: clamp(1.1rem, 2.9vh, 1.55rem); font-weight: 800; line-height: 1; white-space: nowrap; }
.steps-row.is-long .st-box { font-size: clamp(1rem, 2.5vh, 1.4rem); }
/* Die dunkle Zahl lässt sich in ein anderes Kästchen ziehen oder antippen und dann ein Kästchen antippen (28.09.2026 abends). */
b.st-start { cursor: grab; touch-action: none; outline: none; transition: box-shadow .15s, opacity .15s; }
b.st-start:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2563eb; }
b.st-start[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--c); }
b.st-start.is-lifted { opacity: .25; }
.steps-row.is-picking input.st-box { pointer-events: none; }
.steps-row .st-box.is-free { border-color: color-mix(in srgb, var(--c) 55%, #fff); border-style: dashed; background: var(--tint); }
.steps-row .st-box.is-over { border-style: solid; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.steps-row .st-box.is-blocked { border-color: #d5dae4; background: repeating-linear-gradient(45deg, #eef0f5 0 5px, #fff 5px 10px); opacity: .7; }
.ghost.ghost-step { border: 0; border-radius: 12px; background: var(--ink); color: #fff; }

/* ---------- Zahlenstrahl ---------- */

.line {
  --pad: clamp(22px, 3vw, 44px);
  /* Platz hinter der letzten Zahl für die Pfeilspitze; gleicher Wert wie LINE_TAIL in app.js */
  --tail: 30px;
  --track: clamp(34px, 5.4vh, 46px);
  --pin: clamp(44px, 7.2vh, 60px);
  position: relative;
  min-height: 0;
  border-radius: var(--radius-sm);
  background: var(--tint);
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.line:focus-visible { box-shadow: 0 0 0 3px #2563eb; }

.line-track {
  position: absolute;
  right: calc(var(--pad) - 10px);
  bottom: var(--track);
  left: var(--pad);
  height: 4px;
  visibility: hidden;
}

.line-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }


.line-ticks { position: absolute; inset: 0; pointer-events: none; }



.tick-label {
  position: absolute;
  bottom: 3px;
  left: calc(var(--pad) + (100% - var(--pad) * 2 - var(--tail)) * var(--p));
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(.9rem, 2.3vh, 1.2rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%) translateY(var(--dy, 0px)) rotate(var(--r, 0deg));
}

.line.is-dense .tick-label.is-odd { display: none; }

.pin {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--track) - 3px);
  left: calc(var(--pad) + (100% - var(--pad) * 2 - var(--tail)) * var(--p));
  width: var(--pin);
  height: var(--pin);
  --art-color: var(--rose-2);
  transform: translateX(calc(var(--pin) * -12.5 / 48));
  pointer-events: none;
  transition: left .08s;
}
.pin svg { width: 100%; height: 100%; }
.pin span {
  position: absolute;
  top: calc(var(--pin) * .2);
  left: calc(var(--pin) * .317);
  display: grid;
  place-items: center;
  width: calc(var(--pin) * .5);
  height: calc(var(--pin) * .3);
  padding-top: .14em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: calc(var(--pin) * .235);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.pin.is-long span { font-size: calc(var(--pin) * .19); }
.pin.is-end { transform: translateX(calc(var(--pin) * -35.5 / 48)); }
.pin.is-end svg { transform: scaleX(-1); }
.pin.is-end span { left: calc(var(--pin) * .183); }
.line.is-dragging .pin { transition: none; }
.card-line.is-right .pin { --art-color: var(--ok); }
.card-line.is-wrong .pin { --art-color: var(--warn); }
/* Ausschnitt ab der Mitte: links Platz für die drei Punkte „…“ (28.09.2026 abends) */
.line.is-part { --pad: clamp(40px, 3.8vw, 54px); }
/* Eintragen: Pfeil auf eine Stelle, darüber das Feld für die Zahl */
.line.is-type { cursor: default; touch-action: auto; }
.line-ask {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--track) + 24px);
  left: calc(var(--pad) + (100% - var(--pad) * 2 - var(--tail)) * var(--p));
  transform: translateX(-50%);
}
.line-ask input {
  display: block;
  width: 4.1ch;
  height: clamp(34px, 5.2vh, 46px);
  padding: .14em 0 0;
  border: 2px solid #e11d48;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.8vh, 1.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  outline: none;
  user-select: text;
  -webkit-user-select: text;
}
.app[data-range="1000"] .line-ask input { width: 4.4ch; }
.app[data-range="10000"] .line-ask input { width: 5.4ch; }
.line-ask input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #bfdbfe; }

/* ---------- Lupe (28.09.2026 abends) ---------- */
.zoom-layer { position: fixed; z-index: 45; inset: 0; }
.zoom-backdrop { position: absolute; inset: 0; background: rgba(20, 27, 45, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .18s ease-out; }
.zoom-stage { position: absolute; inset: 70px 0 10px; display: grid; place-items: center; pointer-events: none; }
.zoom-stage > .card { pointer-events: auto; flex: none; animation: zoom-in .2s ease-out; box-shadow: 0 30px 80px -20px rgba(10, 14, 25, .55); }
.card-holder { flex: none; }
html.is-zoom, html.is-zoom body { overflow: hidden; }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } }

/* ---------- Ziehen ---------- */

.ghost {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  filter: drop-shadow(0 14px 16px rgba(20, 27, 45, .3));
  will-change: transform;
}

.ghost svg { width: 100%; height: 100%; }
.ghost.is-removing { opacity: .4; }
.ghost.wtile { display: grid; place-items: center; box-shadow: 0 16px 24px -12px rgba(20, 27, 45, .45); }

/* ---------- 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;
}

.btn svg { width: 22px; height: 22px; }
.btn:active { transform: scale(.97); }
.btn-ghost { background: var(--soft); }
.btn-ghost:hover { background: #e7e9f0; }

.btn-primary {
  --art-color: #fff;
  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); }

.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 leave { to { opacity: 0; transform: scale(.4); } }
@keyframes rise { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes roll { to { transform: rotate(360deg); } }
@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; } }

/* ---------- Scrollmodus: Die Karten passen nicht auf einen Blick (Handy, viele Aufgaben) ---------- */

html.is-scroll,
html.is-scroll body { overflow: auto; }
.app.is-scroll { height: auto; min-height: 100dvh; grid-template-rows: auto auto auto; }
.app.is-scroll .topbar { position: sticky; top: max(8px, env(safe-area-inset-top)); }
.app.is-scroll .actions { position: sticky; z-index: 10; bottom: max(8px, env(safe-area-inset-bottom)); }
.app.is-scroll .sheet-top,
.app.is-scroll .sheet-row,
.app.is-scroll .sheet-line,
.app.is-scroll .sheet-body { flex: none; }
.app.is-scroll .sheet-side > .card { flex: none; min-height: calc(var(--h, 0) * 1px); }
.app.is-scroll .sheet-rows > .sheet-row { min-height: calc(var(--h, 0) * 1px); }
.app.is-scroll .sheet-row > .card { min-height: calc(var(--h, 0) * 1px); }
.app.is-scroll .sheet-row > .card-build,
.app.is-scroll .sheet-line > .card-line { height: calc(var(--h, 0) * 1px); }
.app.is-scroll .sheet-tall > .card { flex: none; min-height: calc(var(--h, 0) * 1px); }
.app.is-scroll .parity button { min-height: 48px; }
.app.is-scroll .house-floors { grid-template-rows: repeat(var(--floors, 3), 38px); }
.app.is-scroll .hand { height: min(46cqi, clamp(110px, 18vh, 170px)); }

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

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

/* Mittlere Breiten: Kopfzeile zweizeilig */
@media (max-width: 1020px) and (min-width: 641px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; 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; }
}

@media (max-width: 640px) {
  :root { --gap: 10px; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    row-gap: 8px;
    padding: 8px;
  }
  .left { display: contents; }
  .brand { grid-column: 1; grid-row: 1; }
  .task { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: auto auto; grid-template-areas: "label label" "num dice"; align-items: center; justify-items: center; column-gap: 8px; row-gap: 0; }
  .task-label { grid-area: label; font-size: 1.25rem; transform: none; }
  .target, .target-input { grid-area: num; font-size: 2.9rem; }
  .dice { grid-area: dice; width: 42px; height: 42px; }
  .tools { grid-column: 3; grid-row: 1; }
  .segmented { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .segmented button { flex: 1; min-height: 34px; padding: 0 4px; font-size: .82rem; }
  .brand-logo { width: 42px; }
  .chip-btn { width: 42px; height: 42px; }
  .card-sub { display: none; }
  .card-eq { font-size: 1.05rem; }
  .build { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app[data-range] .build { grid-template-columns: minmax(0, 1fr); }
  .palette { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tile { grid-template-rows: 44px auto; padding: 6px 4px 5px; }
  .tile-art svg { max-height: 44px; }
  .tile-label { font-size: .68rem; }
  .code-side { grid-template-rows: auto; grid-template-columns: minmax(0, 1fr) auto; }
  .code-key { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .code-tools { grid-auto-flow: column; }
  .col-foot { gap: 4px; padding: 2px 2px 6px; }
  .step { width: 28px; height: 28px; font-size: 1.05rem; }
  .menu { position: fixed; top: 76px; right: 12px; left: 12px; width: auto; max-height: calc(100dvh - 96px); }
  .menu-list { columns: 1; }
  .actions { flex-wrap: wrap; gap: 8px; padding: 10px; border-radius: 18px; }
  .feedback { flex: 1 1 100%; font-size: .86rem; }
  .btn-ghost { width: 46px; height: 46px; padding: 0; justify-content: center; }
  .btn-ghost .label { display: none; }
  .btn-primary { flex: 1; justify-content: center; height: 50px; font-size: 1rem; }
  .card, .actions, .topbar { border-radius: 18px; }
}

@media (max-height: 560px) and (orientation: landscape) and (min-width: 901px) {
  :root { --gap: 8px; }
  .card { padding: 8px 10px 10px; gap: 4px; }
  .card-sub { display: none; }
}

@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); }

/* ---------- Ausschnitt aus der Hundertertafel (28.09.2026) ---------- */
.card-chart { --c: #9333ea; --tint: #faf5ff; }
.chart-wrap { display: grid; place-items: center; min-height: 0; }
.chart { --n: 3; --cs: clamp(52px, min(8.4vh, 22cqi), 72px); display: grid; grid-template-columns: repeat(var(--n), var(--cs)); grid-auto-rows: var(--cs); }
.chart.is-gap { --n: 5; --cs: clamp(40px, min(6.6vh, 16cqi), 58px); }
.ch-cell { display: grid; place-items: center; margin: -1px 0 0 -1px; border: 2px solid var(--ink); background: #fff; color: var(--ink); font-family: var(--font-display); font-size: calc(var(--cs) * .42); font-weight: 800; line-height: 1; }
.ch-cell.is-target { background: var(--ink); color: #fff; padding-top: .1em; }
.ch-cell.is-blank { background: #f6f7fa; }
.ch-cell.is-out { background: repeating-linear-gradient(45deg, #e9ecf2 0 4px, #fff 4px 9px); border-color: #b8c0d0; }
.ch-cell.is-none { visibility: hidden; }
.ch-cell input { width: 100%; height: 100%; padding: .12em 0 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: center; }
.ch-cell input:focus { outline: none; background: var(--tint); }
/* Hilfe auf Wunsch (28.09.2026): „?“ am Außenrand des Feldes, angetippt zeigt das leere Feld Pfeil und Rechenschritt */
.ch-cell.is-ask { grid-template-rows: minmax(0, 1fr) 24px; }
.ch-cell.is-ask input { min-height: 0; }
.ch-help { display: grid; place-items: center; width: 100%; height: 24px; padding: 0; border: 0; border-top: 1px solid #e5d3f5; background: var(--tint); color: #7623bb; font-family: var(--font); font-size: 15px; font-weight: 700; line-height: 1; }
.ch-help[aria-pressed="true"] { background: #7623bb; color: #fff; }
.ch-help:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.zoom-number { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 6px 22px; border-radius: 16px; background: #fff; color: var(--ink); font-size: 18px; font-weight: 600; white-space: nowrap; }
.zoom-number b { font: 800 36px/1.2 var(--font-display); }
.place-field span { max-width: 8em; font-size: .75rem; text-align: center; }


/* ---------- Jede Karte richtet sich nach ihrem eigenen Platz (28.09.2026 abends, Alex) ---------- */
/* Schmale Karten: Der Titel fließt um die drei Knöpfe rechts oben herum, Umschalter und „neu“ rutschen darunter. */
@container (max-width: 300px) {
  .card > .card-head,
  .card-house > .card-head { display: block; padding-right: 0; }
  .card > .card-head::before { content: ""; float: right; width: calc(var(--tools) + 4px); height: calc(var(--btn) - 2px); }
  .card > .card-head .card-icon { display: none; }
  .card > .card-head .card-title { font-size: clamp(.8rem, 7cqi, 1.1rem); overflow-wrap: break-word; hyphens: auto; }
  .card > .card-head .card-sub.is-note { display: block; margin-top: 2px; }
  .card > .card-head .mode-switch,
  .card > .card-head .card-tool,
  .card > .card-head .pill-toggle { width: fit-content; max-width: 100%; margin-top: 4px; }
  .card > .card-head .card-eq { display: block; width: fit-content; margin-top: 2px; }
  .card > .card-head .mode-switch button { padding: 0 6px; font-size: .72rem; }
}
/* „Lege die Zahl“ als normaler Kasten: Sind die Vorratskacheln niedrig, entfällt ihre Beschriftung (T/H/Z/E stehen über den Spalten). */
.card-build.is-short .tile { padding: 4px; gap: 0; }
.card-build.is-short .tile-label { display: none; }