/* Layout: one working column; family switch and level ladder on top, the puzzle card below, coach notes tucked under it. */
:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --ink: #16233b;
  --muted: #5a6880;
  --line: #d3dbe6;
  --accent: #2f5dff;
  --accent-ink: #ffffff;
  --sun: #f2c14e;
  --good: #1e8a5a;
  --good-bg: #e2f4ea;
  --bad: #b23b3b;
  --bad-bg: #fbe6e4;
  --code-bg: #f4f6fb;
  --kw: #2f5dff;
  --f-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1726; --surface: #172235; --ink: #e8eef8; --muted: #9fb0c8; --line: #2a3a55;
  --accent: #7d9bff; --accent-ink: #0f1726; --sun: #f2c14e; --good: #5fd39a; --good-bg: #13362a;
  --bad: #ff8b84; --bad-bg: #3a1c1f; --code-bg: #111b2b; --kw: #8fb0ff; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f1726; --surface: #172235; --ink: #e8eef8; --muted: #9fb0c8; --line: #2a3a55;
  --accent: #7d9bff; --accent-ink: #0f1726; --sun: #f2c14e; --good: #5fd39a; --good-bg: #13362a;
  --bad: #ff8b84; --bad-bg: #3a1c1f; --code-bg: #111b2b; --kw: #8fb0ff; color-scheme: dark; }

body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5; }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px 48px; display: grid; gap: 18px; }
h1 { font-family: var(--f-display); font-weight: 600; font-size: 1.9rem; margin: 0; letter-spacing: 0.2px; }
.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 4px; }
.tab { font: 600 0.95rem var(--f-display); border: 0; background: transparent; color: var(--muted); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.ladder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 0.9rem; }
.rungs { display: flex; gap: 4px; }
.rung { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 0.9rem var(--f-display); cursor: pointer; }
.rung.on { background: var(--sun); color: #16233b; border-color: var(--sun); }
.rung.done { border-color: var(--good); color: var(--good); }
.auto { display: flex; align-items: center; gap: 6px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 16px; min-width: 0; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.prompt { font-size: 1.12rem; margin: 0; max-width: 62ch; }
pre.rule { margin: 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; font: 500 0.95rem/1.65 var(--f-mono); overflow-x: auto; white-space: pre; }
pre.rule .k { color: var(--kw); font-weight: 700; }
pre.rule .o { background: var(--sun); color: #16233b; border-radius: 4px; padding: 0 4px; }
.map { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); }
.map svg { display: block; width: 100%; max-width: 100%; height: auto; min-width: 320px; }
.map.build g.walkway { cursor: pointer; }
.map g.walkway.sel line:first-of-type { stroke: #2f5dff; stroke-width: 11; }
.map g.walkway.sel rect { fill: #f2c14e; }
.map g.walkway:focus-visible rect { stroke: #2f5dff; stroke-width: 3; }

.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.opt { font: 600 1.05rem var(--f-body); text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.opt:hover { border-color: var(--accent); }
.opt:focus-visible, .btn:focus-visible, .tab:focus-visible, .rung:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.right { border-color: var(--good); background: var(--good-bg); }
.opt[disabled] { cursor: default; }
.dice { font-size: 1.6rem; letter-spacing: 4px; display: block; line-height: 1.2; }
.nums { font-size: 0.85rem; color: var(--muted); font-weight: 400; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn { font: 600 1rem var(--f-display); padding: 10px 18px; border-radius: 10px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--accent); }
.btn[disabled] { opacity: 0.45; cursor: default; }
.tally { margin-left: auto; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

.feedback { border-radius: 12px; padding: 12px 16px; font-weight: 700; }
.feedback.good { background: var(--good-bg); color: var(--good); }
.feedback.bad { background: var(--bad-bg); color: var(--bad); }
.hintbox { border-left: 4px solid var(--sun); padding: 6px 0 6px 14px; display: grid; gap: 6px; }
.explain { background: var(--code-bg); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; font-size: 0.98rem; }
.explain p { margin: 0; white-space: pre-wrap; }

details.coach { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px; color: var(--muted); font-size: 0.92rem; }
details.coach summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.coach ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.coach .tag { font: 500 0.8rem var(--f-mono); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .feedback { animation: pop 160ms ease-out; } @keyframes pop { from { transform: scale(0.98); } to { transform: none; } } }

*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
.loaderr{color:var(--bad)}

.codebook { border-collapse: collapse; font-size: 1rem; min-width: 0; }
.codebook th { text-align: left; font: 600 0.8rem var(--f-body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 4px 16px 6px 0; }
.codebook td { padding: 6px 16px 6px 0; border-top: 1px solid var(--line); }
.codebook td:first-child { font-weight: 700; }
.flashes { display: inline-flex; gap: 0; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.fl { display: inline-flex; justify-content: center; width: 1.35em; color: var(--accent); font-size: 1.15rem; line-height: 1; }
.signal { display: grid; gap: 6px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.signal { overflow-x: auto; }
.signal .flashes { font-size: 1.25rem; }
.options.wide { grid-template-columns: 1fr; }
.numin { font: 600 1.1rem var(--f-body); width: 7em; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.numin:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }

.explain p.mono { font-family: var(--f-mono); font-size: 0.9rem; white-space: pre; overflow-x: auto; }
.map svg[data-family="grid_routes"] { max-width: 640px; min-width: 0; margin: 0 auto; }

/* Nuts and Bolts */
.belt { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 6px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.opt .belt { background: transparent; border: 0; padding: 0; }
.part { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.pi { font: 500 0.7rem var(--f-mono); color: var(--muted); }
.pt .nut { fill: none; stroke: var(--ink); stroke-width: 2; }
.pt .hole { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.pt .bolt { fill: var(--muted); }
.pt .thread { stroke: var(--surface); stroke-width: 1; }
.pt.big .nut, .pt.big .hole { stroke: var(--accent); stroke-width: 2.4; }
.pt.big .bolt { fill: var(--accent); }
/* Box Rows */
.boxrows { justify-self: start; border-collapse: separate; border-spacing: 4px; font: 600 1.15rem var(--f-mono); }
.boxrows thead th { font: 600 0.75rem var(--f-mono); color: var(--bad); text-align: center; }
.boxrows tbody th { font: 600 1.1rem var(--f-display); padding-right: 8px; text-align: right; }
.boxrows td { width: 2.2em; height: 2.2em; text-align: center; border: 2px solid var(--ink); border-radius: 6px; background: var(--surface); }

/* Lights On */
.map svg.circuit { min-width: 0; max-width: 560px; margin: 0 auto; }
.circuit .wire { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.circuit .gate { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.circuit .g-xor { fill: var(--accent); stroke: var(--accent); }
.circuit .g-and { fill: var(--sun, #f2c14e); stroke: var(--ink); }
.circuit .g-or { fill: var(--good, #2e9e5b); stroke: var(--ink); }
.circuit .pad { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.circuit .btn text { font: 600 13px var(--f-display, sans-serif); fill: var(--ink); pointer-events: none; }
.map.build .circuit g.btn { cursor: pointer; }
.circuit g.btn.sel .pad { fill: #a0662b; stroke: #6b4219; }
.circuit g.btn.sel text { fill: #fff; }
.circuit g.btn:focus-visible .pad { stroke: var(--accent); stroke-width: 4; }
.circuit .bulb circle { fill: var(--code-bg); stroke: var(--ink); stroke-width: 2; }
.circuit .bulb rect { fill: var(--muted); }
.circuit .bulb.lit circle { fill: #ffd84d; stroke: #b88a00; }
/* Bead Rules */
.grammar { display: grid; gap: 6px; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.tokens { display: inline-flex; flex-wrap: wrap; gap: 2px; vertical-align: middle; }
.bead text { font: 700 11px var(--f-body, sans-serif); fill: #fff; }
.rules { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; }
.rules li { line-height: 1.8; }
.arrow { margin: 0 8px; color: var(--muted); }
.ob-x { fill: #5bc0eb; stroke: #1f6f99; stroke-width: 1.5; }
.ob-y { fill: #e8b600; stroke: #8a6a00; stroke-width: 1.5; }
.ob-yi { fill: none; stroke: #8a6a00; stroke-width: 1.5; }
.ob-a { fill: #2e9e5b; stroke: #1c6038; stroke-width: 1.5; }
.ob-c { fill: #d9534f; stroke: #8f2a27; stroke-width: 1.5; }
/* Pantry Map */
.shelves { display: grid; grid-template-columns: repeat(var(--cols), 44px); gap: 4px; justify-self: start; }
.shelf { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; position: relative; padding: 0; }
.shelf.dot::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--ink); }
.shelf.edit { border-style: dashed; border-color: var(--muted); }
.shelf.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.shelf.sel.edit::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--accent); }
.shelf.right { border-color: var(--good, #2e9e5b); }
@media (max-width: 420px) { .shelves { grid-template-columns: repeat(var(--cols), 38px); } .shelf { width: 38px; height: 38px; } }

/* Accounts: sign-in card and the "signed in as" line */
.account { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 0.9rem; color: var(--muted); }
.account[hidden] { display: none; }
.account a, .linkbtn { color: var(--accent); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.auth { display: grid; gap: 14px; max-width: 360px; }
.auth h2 { font-family: var(--f-display); font-weight: 600; margin: 0; }
.auth label { display: grid; gap: 4px; font-weight: 700; font-size: 0.95rem; }
.auth input { font: 1rem var(--f-body); padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); min-width: 0; }
.auth input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; border-color: var(--accent); }