/*
 * app.css — komplettes Erscheinungsbild der App.
 *
 * Aufbau: 1. Farbtokens (hell/dunkel)  2. Reset und iOS-Eigenheiten
 *         3. Layout  4. Kopfzeile  5. Spielfeld  6. Aktionen und Zahlenpad
 *         7. Dialoge, Toast, Overlays  8. Animationen  9. Sonderfaelle
 *
 * Dynamisches Styling passiert ausschliesslich ueber Klassen und Custom
 * Properties (el.style.setProperty) — es gibt keine style="..."-Attribute im
 * Markup, damit die CSP ohne 'unsafe-inline' auskommt.
 */

/* ---------------------------------------------------------------- 1. Farben */

:root {
  --bg: #f2ece0;
  --surface: #fbf8f2;
  --surface-sunk: #efe7d8;
  --ink: #262420;
  --ink-2: #6e6658;
  --ink-3: #8d8476;
  --line: #dbcfb8;
  --line-strong: #b6a88e;
  --accent: #2b6c74;
  --accent-2: #35848e;
  --accent-bg: #d9e8e9;
  --accent-bg-2: #c2dcdf;
  --accent-bg-3: #a9ccd1;
  --danger: #a5443b;
  --danger-bg: #f0d7d2;
  --overlay: rgba(242, 236, 224, .88);
  --shadow: 0 1px 2px rgba(60, 48, 30, .06), 0 6px 20px rgba(60, 48, 30, .10);
  --shadow-soft: 0 1px 2px rgba(60, 48, 30, .07);
  --radius: 12px;
  --radius-sm: 9px;
  --dur: 150ms;
  --ease: cubic-bezier(.22, .8, .34, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171a;
    --surface: #1e2126;
    --surface-sunk: #282d34;
    --ink: #e9e3d6;
    --ink-2: #a29a8b;
    --ink-3: #8b8375;
    --line: #363c44;
    --line-strong: #545c68;
    --accent: #74b7c0;
    --accent-2: #8fcdd5;
    --accent-bg: #23383d;
    --accent-bg-2: #2c464c;
    --accent-bg-3: #365760;
    --danger: #d97b70;
    --danger-bg: #3d2723;
    --overlay: rgba(21, 23, 26, .88);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

/* Manueller Umschalter gewinnt in beide Richtungen */
html[data-theme="hell"] {
  --bg: #f2ece0; --surface: #fbf8f2; --surface-sunk: #efe7d8;
  --ink: #262420; --ink-2: #6e6658; --ink-3: #8d8476;
  --line: #dbcfb8; --line-strong: #b6a88e;
  --accent: #2b6c74; --accent-2: #35848e;
  --accent-bg: #d9e8e9; --accent-bg-2: #c2dcdf; --accent-bg-3: #a9ccd1;
  --danger: #a5443b; --danger-bg: #f0d7d2;
  --overlay: rgba(242, 236, 224, .88);
  --shadow: 0 1px 2px rgba(60, 48, 30, .06), 0 6px 20px rgba(60, 48, 30, .10);
  --shadow-soft: 0 1px 2px rgba(60, 48, 30, .07);
  color-scheme: light;
}

html[data-theme="dunkel"] {
  --bg: #15171a; --surface: #1e2126; --surface-sunk: #282d34;
  --ink: #e9e3d6; --ink-2: #a29a8b; --ink-3: #8b8375;
  --line: #363c44; --line-strong: #545c68;
  --accent: #74b7c0; --accent-2: #8fcdd5;
  --accent-bg: #23383d; --accent-bg-2: #2c464c; --accent-bg-3: #365760;
  --danger: #d97b70; --danger-bg: #3d2723;
  --overlay: rgba(21, 23, 26, .88);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ------------------------------------------- 2. Reset und iOS-Eigenheiten */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* kein Body-Scroll — alles passt aufs Display */
  overscroll-behavior: none;     /* kein Gummiband-Effekt auf iOS */
  background: var(--bg);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;    /* killt Doppeltipp-Zoom und die 300-ms-Verzoegerung */
}

button, textarea {
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

[hidden] { display: none !important; }

.sprite { display: none; }

.icon {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
}

/* ---------------------------------------------------------------- 3. Layout */

.app {
  height: 100dvh;                /* dvh statt vh wegen der Safari-Adressleiste */
  max-width: 560px;
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

/* Ohne Browser-Chrome ist oben mehr Luft noetig (Statusbar) */
@media (display-mode: standalone) {
  .app { padding-top: max(16px, calc(env(safe-area-inset-top) + 6px)); }
}

/* ------------------------------------------------------------- 4. Kopfzeile */

.hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.chip {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--ink);
  transition: transform var(--dur) var(--ease);
}

.chip:active { transform: scale(.96); }

.hdr-stats {
  margin-left: auto;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink-2);
}

.stat-k { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; }
.stat-v { font-weight: 600; color: var(--ink); font-size: 14px; }
.stat.over .stat-v { color: var(--danger); }
.stat.hidden-stat { display: none; }

.ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ico:active { transform: scale(.94); color: var(--accent); }

/* ------------------------------------------------------------- 5. Spielfeld */

.board-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: size;          /* liefert 100cqh fuer die Kantenlaenge unten */
}

.board {
  width: min(100%, 62vh);
  width: min(100%, 100cqh);      /* quadratisch, begrenzt durch Breite ODER Hoehe */
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  background: var(--line-strong); /* die 2px-Fugen sind die Blocklinien */
  border-radius: var(--radius);
  /* Der Aussenrahmen liegt als Ring ausserhalb der Box: ein 2px-Padding wuerde
     in den abgerundeten Ecken vom overflow:hidden weggeschnitten. */
  box-shadow: 0 0 0 2px var(--line-strong), var(--shadow);
  overflow: hidden;
  container-type: size;          /* Basis fuer die Schriftgroessen in cqw */
  user-select: none;             /* Longpress soll keine Ziffern markieren */
  -webkit-user-select: none;
  transition: filter 200ms var(--ease), opacity 200ms var(--ease);
}

.blk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 1px;
  min-width: 0;
  min-height: 0;
  background: var(--line);       /* die 1px-Fugen sind die Zellenlinien */
}

.cell {
  position: relative;
  min-width: 0;                  /* sonst dehnt der Inhalt die Zeile auf */
  min-height: 0;
  overflow: hidden;              /* Notizen bleiben sicher in der Zelle */
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: background-color 120ms var(--ease);
}

.cell .v {
  font-size: 22px;
  font-size: 6.2cqw;
  line-height: 1;
  font-weight: 400;
  color: var(--accent);          /* eigene Eingaben in der Akzentfarbe */
}

.cell.given .v {
  color: var(--ink);
  font-weight: 600;              /* Vorgaben kraeftiger als eigene Eingaben */
}

.cell .n {
  position: absolute;
  inset: 6%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}

.cell .n i {
  font-style: normal;
  font-size: 9px;
  font-size: 2.85cqw;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  opacity: 0;
}

.cell .n i.on { opacity: 1; }

/* Hervorhebungen — Reihenfolge bestimmt, was gewinnt */
.cell.peer { background: var(--surface-sunk); }
.cell.same { background: var(--accent-bg); }
.cell.bad { background: var(--danger-bg); }
.cell.bad .v { color: var(--danger); }
.cell.hinted { background: var(--accent-bg-2); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.sel { background: var(--accent-bg-3); box-shadow: inset 0 0 0 2px var(--accent); }
.cell.sel.bad { background: var(--danger-bg); box-shadow: inset 0 0 0 2px var(--danger); }

/* Overlays ueber dem Feld (Pause, Generierung) */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 12px;
  align-content: center;
  border-radius: var(--radius);
  background: var(--overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
}

.ov-text { margin: 0; color: var(--ink-2); font-size: 14px; }

.big-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  box-shadow: var(--shadow);
}

html[data-theme="dunkel"] .big-btn, .big-btn { color: #fbf8f2; }

.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 700ms linear infinite;
}

/* Hinweisleiste liegt ueber dem Feld, damit sie das Layout nicht verschiebt */
.hintbar {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  animation: rise 180ms var(--ease);
}

.hintbar.top {
  top: 6px;
  bottom: auto;
}

.hint-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2);
}

.hint-text b { color: var(--ink); }

.hint-close {
  flex: none;
  color: var(--ink-3);
  padding: 2px;
}

.hint-close .icon { width: 18px; height: 18px; }

/* -------------------------------------------- 6. Aktionen und Zahlenpad */

.actions {
  display: flex;
  gap: 8px;
}

.act {
  flex: 1;
  min-height: 52px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--ink-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.act span { font-size: 11px; letter-spacing: .2px; }
.act:active { transform: scale(.96); }
.act[disabled] { opacity: .4; }

.act[aria-pressed="true"] {
  background: var(--accent);
  color: #fbf8f2;
}

.act .badge {
  position: absolute;
  top: 5px;
  right: 7px;
  font-size: 9px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--ink-3);
}

.act[aria-pressed="true"] .badge { color: #fbf8f2; opacity: .85; }

.pad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

/* 9 Tasten brechen zu 5 + 4 um — so bleibt jede Taste sicher ueber 44 x 44 pt */
.key {
  flex: 0 0 calc((100% - 4 * 6px) / 5);
  min-height: 46px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  position: relative;
  display: grid;
  place-items: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.key b {
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

.key i {
  position: absolute;
  right: 6px;
  top: 4px;
  font-style: normal;
  font-size: 10px;
  color: var(--ink-3);
}

.key:active { transform: scale(.95); background: var(--accent-bg); }
.key.done { opacity: .35; }
.key.done b { color: var(--ink-3); }

/* ------------------------------------------ 7. Dialoge, Toast, Overlays */

.sheet {
  border: 0;
  padding: 20px;
  width: min(92vw, 420px);
  max-height: 86dvh;
  overflow-y: auto;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  margin: auto;
  overscroll-behavior: contain;
}

.sheet::backdrop {
  background: rgba(20, 16, 10, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sheet h2 {
  margin: 0 0 14px;
  font-size: 19px;
  letter-spacing: .2px;
}

.sheet .lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.list { display: grid; gap: 6px; margin-bottom: 14px; }

.row {
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  font-size: 15px;
  min-height: 46px;
  transition: transform var(--dur) var(--ease);
}

.row:active { transform: scale(.985); }
.row small { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 2px; }
.row.active { box-shadow: inset 0 0 0 2px var(--accent); }

.btn {
  min-height: 46px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fbf8f2;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  transition: transform var(--dur) var(--ease);
}

.btn:active { transform: scale(.98); }

.btn.ghost {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 500;
}

.btn.danger { color: var(--danger); }

.btn-row { display: flex; gap: 8px; margin-top: 14px; }

.settings { display: grid; gap: 16px; margin-bottom: 18px; }

.set { display: grid; gap: 7px; }
.set.row-between { grid-template-columns: 1fr auto; align-items: center; }
.set-label { font-size: 14px; font-weight: 500; }
.set-hint { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }

.seg {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-sunk);
}

.seg button {
  flex: 1;
  min-height: 38px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
}

.switch {
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: var(--line);
  padding: 3px;
  display: flex;
  transition: background-color var(--dur) var(--ease);
}

.switch .knob {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease);
}

.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] .knob { transform: translateX(20px); }

.ta {
  width: 100%;
  margin: 8px 0 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  resize: vertical;
}

.stats-table { display: grid; gap: 8px; }

.st-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}

.st-row b { font-size: 14px; font-weight: 600; }
.st-row .st-main { font-size: 12.5px; color: var(--ink-2); text-align: right; }
.st-row .st-sub { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); }

.result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.result div {
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
}

.result b { display: block; font-size: 19px; font-weight: 600; }
.result span { font-size: 11px; color: var(--ink-2); }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 420px);
  padding: 11px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  box-shadow: var(--shadow);
  animation: rise 180ms var(--ease);
}

.toast-btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-2);
  white-space: nowrap;
}

/* ------------------------------------------------------------ 8. Animationen */

@keyframes pop {
  0% { transform: scale(.6); opacity: .4; }
  70% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes flash {
  0% { background-color: var(--accent-bg-2); }
  100% { background-color: transparent; }
}

@keyframes wave {
  0% { transform: scale(1); }
  40% { transform: scale(.86); background-color: var(--accent-bg-2); }
  100% { transform: scale(1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.cell .v.pop { animation: pop 170ms var(--ease); }
.cell.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  animation: flash 420ms ease-out;
  pointer-events: none;
}
.board.won .cell { animation: wave 900ms ease-out var(--wave, 0ms); }
.board.paused { filter: blur(9px); opacity: .55; }

.toast { animation: rise 180ms var(--ease); }
/* Toast wird per translateX zentriert — die Animation darf das nicht ueberschreiben */
@keyframes rise-toast {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.toast { animation-name: rise-toast; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .board.paused { filter: none; opacity: .12; }
}

/* ---------------------------------------------------------- 9. Sonderfaelle */

/* Zeigegeraete mit echtem Hover — nie als einzige Zustandsanzeige */
@media (hover: hover) and (pointer: fine) {
  .key:hover, .act:hover, .row:hover { background: var(--accent-bg); }
  .act[aria-pressed="true"]:hover { background: var(--accent-2); }
  .ico:hover { color: var(--accent); }
}

/* Querformat: Feld links, Bedienung rechts — sonst bleibt vom Feld nichts uebrig */
@media (orientation: landscape) and (max-height: 560px) {
  .app {
    max-width: none;
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr) minmax(200px, 290px);
    column-gap: 14px;
  }
  .hdr { grid-row: 1; grid-column: 1 / -1; }
  .board-wrap { grid-row: 2 / span 2; grid-column: 1; }
  .actions { grid-row: 2; grid-column: 2; }
  .pad { grid-row: 3; grid-column: 2; align-content: start; }
  .key { flex-basis: calc((100% - 2 * 6px) / 3); }
}

/* Sehr schmale Geraete (iPhone SE und aehnlich) */
@media (max-width: 360px) {
  .act span { font-size: 10px; }
  .key { min-height: 44px; }
  .key b { font-size: 21px; }
}

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