/* Layout: Kopfzeile, darunter Spielfeld links und Bedienfeld rechts; auf dem Handy untereinander. */
:root {
  --bg: #f6f4ef;
  --surface: #fffefa;
  --ink: #17202e;
  --muted: #585d68;
  --line: #cfcabd;
  --line-strong: #17202e;
  --brand: #172a46;
  --on-brand: #f6f4ef;
  --accent: #f0b429;
  --on-accent: #172a46;
  --user: #2a5d94;
  --note: #4f5866;
  --peer: #e8edf4;
  --same: #fbe3a6;
  --sel: #f5c84f;
  --hint: #2f8f5b;
  --hint-bg: #dff1e6;
  --error: #b42318;
  --error-bg: #f9dcd7;
  --key: #ffffff;
  --key-border: #d8d3c6;
  --pressed: #172a46;
  --on-pressed: #f6f4ef;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1625; --surface: #16223a; --ink: #e8ecf3; --muted: #a3adbd; --line: #2e3c58; --line-strong: #8da2c6;
    --brand: #0a1220; --on-brand: #e8ecf3; --accent: #f0b429; --on-accent: #172a46; --user: #8fc4ff; --note: #b7c2d4;
    --peer: #1d2b47; --same: #4d3f14; --sel: #6e5612; --hint: #7fd6a4; --hint-bg: #173a2a; --error: #ff8f80; --error-bg: #4a1f1b;
    --key: #1b2944; --key-border: #2e3c58; --pressed: #f0b429; --on-pressed: #172a46; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e1625; --surface: #16223a; --ink: #e8ecf3; --muted: #a3adbd; --line: #2e3c58; --line-strong: #8da2c6;
  --brand: #0a1220; --on-brand: #e8ecf3; --accent: #f0b429; --on-accent: #172a46; --user: #8fc4ff; --note: #b7c2d4;
  --peer: #1d2b47; --same: #4d3f14; --sel: #6e5612; --hint: #7fd6a4; --hint-bg: #173a2a; --error: #ff8f80; --error-bg: #4a1f1b;
  --key: #1b2944; --key-border: #2e3c58; --pressed: #f0b429; --on-pressed: #172a46; color-scheme: dark;
}


/* Ansicht: Größe (--z) und hoher Kontrast. Gesetzt über <html data-size="…" data-contrast="hoch">. */
:root { --z: 1; }
:root[data-size="gross"] { --z: 1.2; }
:root[data-size="sehr-gross"] { --z: 1.4; }
@media (prefers-color-scheme: light) { :root[data-contrast="hoch"]:not([data-theme="dark"]) {
  --ink: #000; --muted: #2b2f36; --line: #5d594e; --line-strong: #000; --user: #0b3d91; --note: #111827;
  --peer: #dbe3ef; --same: #f7d26a; --sel: #f0b429; --key-border: #5d594e; --error: #8f1409; } }
:root[data-contrast="hoch"][data-theme="light"] {
  --ink: #000; --muted: #2b2f36; --line: #5d594e; --line-strong: #000; --user: #0b3d91; --note: #111827;
  --peer: #dbe3ef; --same: #f7d26a; --sel: #f0b429; --key-border: #5d594e; --error: #8f1409; }
@media (prefers-color-scheme: dark) { :root[data-contrast="hoch"]:not([data-theme="light"]) {
  --bg: #000; --surface: #0b1220; --ink: #fff; --muted: #e2e8f0; --line: #8da2c6; --line-strong: #e8ecf3; --user: #b9dcff; --note: #f1f5f9;
  --peer: #1f2f50; --key: #0b1220; --key-border: #8da2c6; } }
:root[data-contrast="hoch"][data-theme="dark"] {
  --bg: #000; --surface: #0b1220; --ink: #fff; --muted: #e2e8f0; --line: #8da2c6; --line-strong: #e8ecf3; --user: #b9dcff; --note: #f1f5f9;
  --peer: #1f2f50; --key: #0b1220; --key-border: #8da2c6; }
:root[data-contrast="hoch"] .cell.given { font-weight: 900; }
:root[data-contrast="hoch"] .box { gap: 2px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: calc(16px * var(--z)); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar { background: var(--brand); color: var(--on-brand); }
.topbar-inner { max-width: calc(960px * var(--z)); margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.brand { font-family: var(--font-display); font-size: calc(22px * var(--z)); letter-spacing: .2px; }
.brand span { color: var(--accent); }

.game-wrap { max-width: calc(960px * var(--z)); margin: 0 auto; padding: 16px 16px 40px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: center; }
.play { flex: 1 1 340px; max-width: calc(560px * var(--z)); min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.panel { flex: 1 1 280px; max-width: calc(560px * var(--z)); min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 12px; background: var(--peer); }
.levels button { min-height: calc(44px * var(--z)); border: 0; border-radius: 9px; background: transparent; font-weight: 700; font-size: calc(14px * var(--z)); cursor: pointer; padding: 0 4px; }
.levels button[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); }

.status { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 12px; font-size: calc(14px * var(--z)); color: var(--muted); min-height: calc(36px * var(--z)); font-variant-numeric: tabular-nums; }
.status strong { color: var(--ink); font-weight: 700; }
.status .grow { flex: 1; }
.status .time { color: var(--ink); font-weight: 700; font-size: calc(15px * var(--z)); min-width: 3.2em; text-align: right; }
.icon-btn { width: calc(36px * var(--z)); height: calc(36px * var(--z)); border-radius: 10px; border: 1px solid var(--key-border); background: var(--key); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.mistakes.has { color: var(--error); font-weight: 700; }

.board { position: relative; width: 100%; aspect-ratio: 1; max-width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 2px; background: var(--line-strong); border-radius: 6px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); min-width: 0; min-height: 0; }
.cell { position: relative; border: 0; padding: 0; margin: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: clamp(calc(18px * var(--z)), calc(5.6vw * var(--z)), calc(30px * var(--z))); font-weight: 500; color: var(--user); cursor: pointer; font-variant-numeric: tabular-nums; min-width: 0; min-height: 0; line-height: 1; overflow: hidden; }
.cell .notes { position: absolute; inset: 1px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); font-size: clamp(calc(9px * var(--z)), calc(2.4vw * var(--z)), calc(13px * var(--z))); font-weight: 600; color: var(--note); }
.cell .notes i { font-style: normal; display: flex; align-items: center; justify-content: center; }
.cell .notes i.match { color: var(--ink); background: var(--same); border-radius: 3px; }
.cell.given { color: var(--ink); font-weight: 800; }
.cell.peer { background: var(--peer); }
.cell.same { background: var(--same); }
.cell.selected { background: var(--sel); }
.cell.wrong { color: var(--error); }
.cell.conflict { background: var(--error-bg); }
.cell.conflict.given { color: var(--error); }
.cell.selected.conflict { box-shadow: inset 0 0 0 3px var(--error); }
.cell.hinted { box-shadow: inset 0 0 0 3px var(--hint); }
.cell.hint-target { background: var(--hint-bg); box-shadow: inset 0 0 0 3px var(--hint); }
.cell:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--brand); }
.board.busy .cell, .board.paused .cell { color: transparent; }
.board.busy .notes, .board.paused .notes { visibility: hidden; }
.board.won .cell { cursor: default; }

.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg) 72%, transparent); border-radius: 6px; z-index: 2; }
.overlay-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; max-width: calc(320px * var(--z)); width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 40px rgba(10, 18, 32, .25); }
.overlay-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: min(calc(32px * var(--z)), 9vw); text-wrap: balance; }
.overlay-card p { margin: 0; color: var(--muted); }
.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0; }
.summary div { display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; border-radius: 10px; background: var(--peer); }
.summary b { font-size: calc(20px * var(--z)); font-variant-numeric: tabular-nums; }
.summary span { font-size: calc(12px * var(--z)); color: var(--muted); }

.tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tool { min-height: calc(52px * var(--z)); border-radius: 12px; border: 1px solid var(--key-border); background: var(--key); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: calc(14px * var(--z)); padding: 0 6px; }
.tool[aria-pressed="true"] { background: var(--pressed); color: var(--on-pressed); border-color: var(--pressed); }
.tool:disabled { opacity: .4; cursor: default; }
.tool svg { flex-shrink: 0; }
@media (max-width: 420px) { .tool .badge { display: none; } .tool { gap: 6px; } }
.tool .badge { font-size: calc(11px * var(--z)); font-weight: 800; padding: 2px 6px; border-radius: 999px; background: var(--peer); color: var(--ink); }
.tool[aria-pressed="true"] .badge { background: var(--on-pressed); color: var(--pressed); }

.pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.key { min-height: calc(56px * var(--z)); border-radius: 12px; border: 1px solid var(--key-border); background: var(--key); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 4px 0; }
.key .num { font-size: calc(26px * var(--z)); font-weight: 700; line-height: 1.1; color: var(--user); font-variant-numeric: tabular-nums; }
.pad.notes-on .key .num { color: var(--note); font-size: calc(20px * var(--z)); }
.key .left { font-size: calc(11px * var(--z)); color: var(--muted); font-variant-numeric: tabular-nums; }
.key:disabled { opacity: .4; cursor: default; }
.key.erase { font-size: calc(13px * var(--z)); font-weight: 700; gap: 2px; }
.key:active:not(:disabled), .tool:active:not(:disabled) { transform: translateY(1px); }

.hintbox { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--hint-bg); border: 1px solid var(--hint); }
.hintbox .label { font-size: calc(12px * var(--z)); font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--hint); }
.hintbox p { margin: 0; line-height: 1.5; }
.hintbox .row { display: flex; gap: 8px; flex-wrap: wrap; }
.hint-learn { font-weight: 700; color: var(--hint); min-height: calc(32px * var(--z)); display: inline-flex; align-items: center; }
.hintbox .btn { flex: 1 1 120px; min-height: calc(44px * var(--z)); font-size: calc(15px * var(--z)); }

.btn { min-height: calc(48px * var(--z)); padding: 0 18px; border-radius: 12px; border: 0; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: calc(16px * var(--z)); cursor: pointer; }
.btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--key-border); }
.help { margin: 0; font-size: calc(13px * var(--z)); line-height: 1.6; color: var(--muted); }
kbd { font-family: var(--font-body); font-size: calc(12px * var(--z)); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--key-border); background: var(--key); white-space: nowrap; }

.confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.confirm p { margin: 0; font-weight: 600; }
.confirm div { display: flex; gap: 8px; flex-wrap: wrap; }
.confirm .btn { flex: 1 1 120px; min-height: calc(44px * var(--z)); font-size: calc(15px * var(--z)); }

.head-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: calc(40px * var(--z)); padding: 0 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--on-brand) 30%, transparent); background: transparent; color: var(--on-brand); font-weight: 700; font-size: calc(14px * var(--z)); cursor: pointer; }
.newbest { color: var(--hint) !important; font-weight: 800; }
.note { margin: 0; font-size: calc(13px * var(--z)); line-height: 1.5; color: var(--muted); }
.note.warn { color: var(--error); }
.modal { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-start; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg) 60%, rgba(0, 0, 0, .45)); overflow-y: auto; }
.modal-card { width: 100%; max-width: calc(600px * var(--z)); margin: auto 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 50px rgba(10, 18, 32, .3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: calc(30px * var(--z)); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat-card h3 { margin: 0; font-size: calc(15px * var(--z)); }
.stat-card .big { font-size: calc(24px * var(--z)); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-card .big small { font-size: calc(13px * var(--z)); font-weight: 600; color: var(--muted); }
.stat-card dl { margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 10px; font-size: calc(13px * var(--z)); }
.stat-card dt { color: var(--muted); }
.stat-card dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-card.empty .big { color: var(--muted); font-size: calc(15px * var(--z)); font-weight: 600; }
.sync { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.sync h3 { margin: 0; font-size: calc(18px * var(--z)); }
.sync p { margin: 0; line-height: 1.5; }
.code-form { display: flex; flex-direction: column; gap: 6px; }
.code-form label { font-size: calc(14px * var(--z)); font-weight: 600; }
.code-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.code-row input { flex: 1 1 180px; min-width: 0; min-height: calc(48px * var(--z)); padding: 0 12px; border-radius: 12px; border: 1px solid var(--key-border); background: var(--key); color: var(--ink); font: 700 calc(18px * var(--z))/1 var(--font-body); letter-spacing: 1px; text-transform: uppercase; }
.code { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; min-height: calc(52px * var(--z)); padding: 0 12px; border-radius: 12px; background: var(--peer); font-size: clamp(calc(19px * var(--z)), calc(6vw * var(--z)), calc(26px * var(--z))); font-weight: 800; letter-spacing: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; user-select: all; }
.code + .btn { flex: 1 1 100%; }
.sync-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sync-actions .btn { flex: 1 1 160px; min-height: calc(44px * var(--z)); font-size: calc(14px * var(--z)); }
.btn.danger { color: var(--error); border-color: var(--error); }
.btn.danger-solid { background: var(--error); color: var(--surface); }
.msg { font-weight: 600; }
.msg:empty { display: none; }
.msg.err { color: var(--error); }
@media (max-width: 420px) { .head-btn span { display: none; } .head-btn { padding: 0 10px; } }

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