:root{font-family:"Segoe UI",system-ui,sans-serif;color:#384437;background:#faf7ef;font-synthesis:none;--green:#567a5b;--deep:#355a3f;--muted:#6b7163;--line:#e2e1d5;--cream:#faf7ef;--sage:#d9e4bd}*{box-sizing:border-box}body{margin:0}button,input,select,summary{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.5}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a67625;outline-offset:4px}h1,h2,p{margin-top:0}h1,h2{font-family:"Comic Sans MS","Chalkboard SE",ui-rounded,cursive;font-weight:500;letter-spacing:-.04em}h1{font-size:clamp(2.2rem,4.5vw,3.5rem);line-height:1.22}h2{font-size:1.6rem}button{font-weight:600}.topbar{max-width:1120px;margin:auto;padding:28px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:10px;align-items:center;font-weight:700;font-size:1.3rem;text-decoration:none;white-space:nowrap}.brand svg{width:30px;height:30px}nav{display:flex;gap:32px}nav a{text-decoration:none;font-size:.9375rem;padding:10px 0;color:var(--muted);border-bottom:2px solid transparent}nav a[aria-current=page]{color:var(--deep);border-color:var(--green)}main{max-width:1080px;margin:22px auto 0;padding:0 32px}.screen{min-height:480px}.home-screen{position:relative;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:12px 20px;padding:32px 10px 0}.welcome-copy{position:relative;z-index:1;padding-left:20px}.eyebrow{font-size:.75rem;letter-spacing:.14em;font-weight:700;color:var(--green);margin-bottom:22px}.welcome-copy h1{font-size:clamp(2.8rem,5vw,4.2rem);margin-bottom:24px}.welcome-description{font-size:1.25rem;line-height:1.7;color:#58614f}.primary,.secondary{border-radius:30px;min-height:48px;padding:13px 28px;border:1px solid transparent;font-size:1rem}.primary{background:var(--green);color:#fff;box-shadow:inset 0 -2px 0 #0000000c}.secondary{background:#edf0e9;color:var(--deep);border-color:#d9dfd5}.start-button{min-width:235px;display:flex;align-items:center;justify-content:space-between;font-family:"Comic Sans MS","Chalkboard SE",cursive;font-size:1.5rem;margin-top:28px}.start-button span{font-family:system-ui}.quiet{font-size:.875rem;line-height:1.6;color:var(--muted)}#home-size{margin:12px 8px 0}.welcome-art{align-self:center;width:100%;}.welcome-art img{display:block;width:125%;height:auto;margin-left:-10%;max-height:490px;object-fit:contain}.welcome-bottom{grid-column:1/-1;display:flex;justify-content:center;gap:68px;margin:38px 0 10px;padding-top:24px;border-top:1px solid var(--line);font-size:.875rem;color:#59654f}.welcome-bottom>span{display:flex;gap:10px;align-items:center}.little-symbol{font-size:1.8rem;color:#799561}.little-symbol.heart{color:#ba745a}.little-symbol.star{color:#b5973e}footer{font-size:.8125rem;color:var(--muted);text-align:center;margin:38px 20px 24px}footer span{color:#bd8067;margin-left:6px}.game-screen{max-width:580px;margin:auto;min-height:0}.game-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 24px}.game-toolbar h1{font-size:1.75rem;margin:0;white-space:nowrap}.game-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px}#timer{font-size:1.125rem;color:#857437;font-variant-numeric:tabular-nums}.text-button{border:0;background:transparent;color:var(--muted);padding:10px 4px;min-height:44px;font-size:.9375rem;text-align:left}.icon-button{height:42px;min-width:42px;border:0;border-radius:50%;background:#e9eee6;color:var(--deep);font-size:1.125rem}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(var(--size,3),minmax(0,1fr));gap:5px;aspect-ratio:1;width:100%}.cell{min-width:0;min-height:44px;border:1px solid #d5d5c8;box-shadow:0 2px 0 #dddccf60;background:#fffdf8;color:#354332;border-radius:12px;font-size:clamp(1.7rem,4.7vw,2.8rem);font-family:"Comic Sans MS","Chalkboard SE",ui-rounded,cursive;font-variant-numeric:tabular-nums;font-weight:500;padding:0;user-select:none;-webkit-user-select:none}.cell.last-found{background:var(--sage);border-color:#c5d3a6}.cell:disabled{opacity:1}.board[data-size="5"] .cell,.board[data-size="6"] .cell{font-size:clamp(1.25rem,4vw,2rem);border-radius:9px}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#edf0e3;border:1px solid #d6ddc8;border-radius:18px;padding:20px}.overlay .eyebrow{margin-bottom:14px}.overlay h2{font-size:2rem;margin-bottom:16px}.overlay p:not(.eyebrow){color:var(--muted);font-size:1rem;line-height:1.6}.progress-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px auto 0;max-width:440px}.progress-dot{width:12px;height:12px;border:1px solid #bdc8b2;border-radius:50%;background:transparent}.progress-dot.done{background:#78966b;border-color:#78966b}.progress-dot.current{background:#d9e4bd;outline:3px solid #eaf0dd;outline-offset:1px}.feedback{font-size:.9375rem;line-height:1.5;min-height:1.5em;color:var(--muted);text-align:center;margin:20px 0 8px}.game-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}.result-screen{max-width:640px;margin:auto;text-align:center}.result-screen>.eyebrow{margin-bottom:14px}.result-screen>h1{font-size:3.4rem;margin-bottom:10px}.result-art{width:min(100%,380px);height:215px;object-fit:contain;display:block;margin:0 auto 8px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:#fffdf9;border-radius:16px;padding:22px 8px}.result-stats>div+div{border-left:1px solid var(--line)}.result-stats span,.stat-card span{display:block;color:var(--muted);font-size:.875rem;margin-bottom:8px}.result-stats strong{font-size:1.25rem;font-weight:600}.encouragement{background:#f4eade;border-radius:16px;padding:20px;line-height:1.7;margin:18px 0}.encouragement span{color:#b3765a}.result-actions{display:flex;gap:12px}.result-actions button{flex:1}.result-screen>.text-button{margin:12px auto}.page-title{display:flex;justify-content:space-between;align-items:center;gap:20px}.page-title h1{font-size:2.5rem;margin-bottom:8px}.page-title .eyebrow{margin-bottom:12px}.filter-label{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;color:var(--muted)}select{background:#fffdf9;border:1px solid #ccd1c1;border-radius:10px;padding:11px 16px;color:var(--deep);min-height:44px}.empty-state{text-align:center;padding:58px 16px;background:#f1f2e8;border:1px dashed #cfd7c0;border-radius:18px;margin:26px 0}.empty-state h2{margin:18px 0 10px}.empty-state p{color:var(--muted);line-height:1.6}.empty-number{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:var(--sage);border-radius:14px;font-size:1.8rem;color:var(--deep)}.progress-summary{display:grid;grid-template-columns:1fr 200px;gap:22px;margin-top:22px}.chart-card,.stat-card{border:1px solid var(--line);border-radius:14px;background:#fffdf9;padding:22px}.chart-card h2{font:600 1rem "Segoe UI",sans-serif;margin-bottom:8px}.chart-card>.quiet{margin:0 0 12px}.chart-card svg{display:block;width:100%;height:auto;overflow:visible}.stat-stack{display:grid;gap:12px}.stat-card strong{font-size:1.8rem;font-weight:500}.recent-title{font:650 1.125rem "Segoe UI",sans-serif;margin:30px 0 16px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;font-size:.875rem;text-align:left;white-space:nowrap}th{background:#eceee4;font-weight:650}td,th{padding:14px 18px}td{border-top:1px solid var(--line)}.storage-note{font-size:.8125rem;line-height:1.6;color:var(--muted);margin-top:24px}.settings-screen{max-width:580px;margin:auto}.settings-screen h1{font-size:2.35rem;margin-bottom:12px}.settings-screen>.eyebrow{margin-bottom:16px}fieldset{border:0;padding:0;margin:28px 0 22px;min-width:0}legend{padding:0;font-weight:650;font-size:.9375rem;margin-bottom:12px}.segments{display:flex;gap:8px}.segments button{flex:1;min-height:46px;padding:8px 5px;background:#fffdf9;border:1px solid #d7dacd;border-radius:9px;color:#4f5d48;font-size:.9375rem;font-weight:600}.segments button[aria-pressed=true]{background:var(--sage);border-color:#c7d5af;color:#2f512e}.field-help{font-size:.8125rem;color:var(--muted);margin:9px 0 0;line-height:1.5}.toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;padding:18px 0;border-bottom:1px solid var(--line);font-weight:600;font-size:1rem}.toggle small{display:block;color:var(--muted);font-weight:400;font-size:.8125rem;line-height:1.5;margin-top:5px}.toggle input{appearance:none;flex-shrink:0;width:44px;height:27px;background:#b8c0af;border-radius:30px;position:relative;cursor:pointer;margin:0}.toggle input:before{content:"";position:absolute;width:21px;height:21px;border-radius:50%;background:#fffdf9;left:3px;top:3px}.toggle input:checked{background:var(--green)}.toggle input:checked:before{left:20px}.kind-note{padding:16px 20px;background:#edf0e2;border-radius:12px;font-size:.875rem;color:#59694c;line-height:1.6;margin:22px 0}.save-button{width:100%}#save-status{min-height:1.5em;margin:12px 0;text-align:center}.storage-warning{max-width:700px;margin:20px auto;padding:16px;border:1px solid #ba9b50;background:#fff5d7;color:#645019;border-radius:12px;line-height:1.5;font-size:.875rem}dialog{border:1px solid var(--line);border-radius:20px;padding:28px;max-width:min(440px,calc(100% - 32px));background:var(--cream);color:inherit}dialog::backdrop{background:#25352266}dialog p{line-height:1.6;color:var(--muted)}.dialog-actions{display:flex;gap:10px;flex-wrap:wrap}[hidden]{display:none!important}@media(hover:hover){.primary:hover{background:#46694c}.secondary:hover{background:#e3e9db}.cell:hover{border-color:#91a67f;background:#f0f2e5}.cell.last-found:hover{background:var(--sage)}nav a:hover{color:var(--deep)}}@media(max-width:740px){.topbar{padding:18px 20px;gap:14px}.brand{font-size:1.1rem;gap:6px}.brand svg{width:24px;height:24px}nav{gap:16px}nav a{font-size:.8125rem}main{padding:0 20px;margin:18px auto 0}.home-screen{grid-template-columns:1fr;gap:0;padding:10px 0 0;text-align:center}.welcome-copy{padding:0}.welcome-copy>.eyebrow{font-size:.6875rem;letter-spacing:.1em;margin-bottom:16px}.welcome-copy h1{font-size:2.65rem;margin-bottom:16px}.welcome-description{font-size:1rem;line-height:1.6}.start-button{margin:20px auto 0;min-width:240px;justify-content:center;gap:40px}.welcome-art{grid-row:2;max-width:420px;margin:auto}.welcome-art img{width:100%;margin:0;max-height:285px}.welcome-bottom{gap:18px;margin:10px 0 0;padding-top:18px;font-size:.75rem;justify-content:space-around}.welcome-bottom>span{display:flex;flex-direction:column;gap:5px}.little-symbol{font-size:1.5rem}.game-screen{max-width:510px}.game-toolbar{gap:8px;margin-bottom:20px}.game-toolbar h1{font-size:1.5rem}.game-tools{gap:8px}.game-tools #timer{font-size:.9375rem}.board{gap:4px}.cell{border-radius:9px}.progress-dots{gap:7px;margin-top:22px}.progress-dot{width:10px;height:10px}.result-screen>h1{font-size:2.75rem}.result-art{height:190px}.result-stats{padding:18px 4px}.result-stats strong{font-size:1.05rem}.result-stats span{font-size:.8125rem}.encouragement{font-size:.9375rem;padding:18px 12px}.result-actions{gap:10px}.result-actions button{padding:12px 18px}.page-title{align-items:flex-start}.page-title h1{font-size:2rem}.page-title .eyebrow{font-size:.625rem;letter-spacing:.1em}.page-title .quiet{font-size:.8125rem}.progress-summary{grid-template-columns:1fr;gap:14px}.stat-stack{grid-template-columns:repeat(3,1fr);gap:8px}.stat-card{padding:14px 10px}.stat-card span{font-size:.6875rem;min-height:2.8em;margin-bottom:3px}.stat-card strong{font-size:1.4rem}.chart-card{padding:18px}.settings-screen h1{font-size:2rem}.settings-screen>.eyebrow{font-size:.6875rem}.settings-screen>.quiet{font-size:.875rem}.screen{min-height:0}footer{margin-top:30px;font-size:.75rem}.storage-warning{margin:20px}.game-screen~footer{margin-top:22px}td,th{padding:12px}.feedback{font-size:.875rem}.board[data-size="6"]{gap:3px}}@media(max-width:360px){.topbar{padding:16px 12px}nav{gap:11px}.brand{font-size:1rem}main{padding:0 12px}.game-toolbar{grid-template-columns:auto 1fr auto}.game-toolbar h1{text-align:center;font-size:1.35rem}.game-toolbar .text-button span{display:none}.icon-button{min-width:36px;height:36px}.cell{font-size:1.8rem}.welcome-bottom{gap:10px}.result-actions button{padding:12px 15px;font-size:.9375rem}.board[data-size="6"] .cell{font-size:1.2rem}.filter-label{font-size:.6875rem}.page-title{gap:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.progress-filters{display:flex;gap:12px}@media(max-width:740px){.page-title{flex-wrap:wrap}.progress-filters{width:100%}.filter-label{flex:1}.filter-label select{width:100%}}
.welcome-art img{width:110%;margin-left:-5%}@media(max-width:740px){.welcome-art img{width:100%;margin-left:0}.stat-card span{font-size:.8125rem}}
h1[tabindex="-1"]:focus{outline:none}
.session-progress{text-align:center;font-size:.875rem;font-weight:600;color:var(--green);margin:0 0 14px}
.number-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:600}
.number-setting small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted);line-height:1.5;margin-top:5px}
.number-setting input{width:84px;min-height:46px;flex-shrink:0;border:1px solid #ccd1c1;border-radius:10px;background:#fffdf9;color:var(--deep);padding:10px;font:inherit;text-align:center}
.result-screen{position:relative;isolation:isolate}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;border-radius:18px}
.confetti span{position:absolute;top:-20px;left:var(--left);width:9px;height:15px;border-radius:3px;opacity:0;animation:confetti-fall 2.1s var(--delay) ease-out both}
.celebrating .result-art{animation:happy-bounce 850ms ease-out both}
.celebrating #result-title{animation:happy-bounce 650ms ease-out both}
#result-message{color:inherit}
@keyframes confetti-fall{0%{opacity:0;transform:translate(0,-20px) rotate(0)}10%{opacity:.9}75%{opacity:.85}100%{opacity:0;transform:translate(var(--drift),440px) rotate(var(--turn))}}
@keyframes happy-bounce{0%{transform:scale(.93)}45%{transform:scale(1.035)}75%{transform:scale(.99)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.confetti{display:none}.celebrating .result-art,.celebrating #result-title{animation:none}}
@media(max-width:400px){.result-actions{flex-wrap:wrap}.result-actions button{flex:1 1 100%}}
/* Consistent control sizing and finishing details. */
button, input, select { line-height: 1.4; }
.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 48px;
  line-height: 1.4;
  text-align: center;
}
.control-icon { width: 22px; height: 22px; display: block; flex: 0 0 22px; }
.start-button {
  display: inline-flex;
  margin-top: 8px;
  width: min(100%, 260px);
  min-width: 0;
  min-height: 60px;
  padding: 14px 24px;
  justify-content: center;
  gap: 12px;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: 0;
}
.start-button span { font-family: inherit; }
#auto-next-controls { margin: 0 0 20px; }
#auto-next-message { margin-bottom: 10px; }
.next-group-count { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--soft); color: var(--deep); font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.session-bar { display: flex; gap: 5px; width: min(100%, 360px); margin: 20px auto 12px; }
.session-segment { flex: 1; min-width: 0; height: 14px; border-radius: 7px; background: var(--surface, #fffdf9); border: 1px solid var(--line); }
.session-segment.complete { background: #78966b; border-color: #67865a; }
.start-button .control-icon { width: 20px; height: 20px; flex-basis: 20px; }
#home-size { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0; font-size: .875rem; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; }
#back-home { justify-self: start; }
.game-tools { min-width: 0; }
#timer { white-space: nowrap; }
nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.field-help, .toggle small, .number-setting small, .filter-label { font-size: .875rem; }
.toggle, .number-setting { gap: 20px; }
.toggle input { appearance: none; -webkit-appearance: none; }
.number-setting input { font-variant-numeric: tabular-nums; font-size: 1rem; }
.result-actions { align-items: stretch; }
.result-actions button { min-height: 52px; }
.result-stats strong { font-variant-numeric: tabular-nums; }
.stat-card span { font-size: .875rem; line-height: 1.4; }
.progress-summary { min-width: 0; }
.chart-card { min-width: 0; }
.table-wrap { overscroll-behavior-x: contain; }
.dialog-actions button { flex: 1 1 140px; }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { box-shadow: inset 0 2px 3px #00000015; }
@media (min-width: 741px) {
  .game-screen { width: min(100%, 580px, max(300px, calc(100svh - 380px))); }
}
@media (max-width: 740px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
  nav { gap: 16px; }
  nav a { font-size: .875rem; }
  .welcome-copy > .eyebrow, .settings-screen > .eyebrow, .page-title .eyebrow { font-size: .75rem; line-height: 1.6; }
  .welcome-copy h1 { font-size: clamp(2.2rem, 10vw, 2.65rem); }
  .start-button { margin: 8px auto 0; }
  .welcome-bottom { font-size: .8125rem; }
  .stat-card { padding: 14px 10px; }
  .stat-card span { min-height: 2.8em; font-size: .8125rem; }
  .progress-filters { flex-wrap: wrap; }
  .filter-label { min-width: 120px; font-size: .875rem; }
  .game-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .game-toolbar h1 { text-align: center; white-space: normal; line-height: 1.25; }
}
@media (max-width: 360px) {
  .topbar { justify-content: center; }
  nav { gap: 14px; }
  .brand { font-size: 1.1rem; }
  .game-tools { gap: 5px; }
  #back-home { width: 44px; padding: 10px; }
  .game-toolbar h1 { font-size: 1.3rem; }
  .segments { gap: 5px; }
  .result-stats span { font-size: .8125rem; }
}

@media (min-width: 741px) {
  body[data-screen="game"] .topbar { padding-top: 16px; padding-bottom: 16px; }
  body[data-screen="game"] main { margin-top: 12px; }
  body[data-screen="game"] footer { margin-top: 20px; margin-bottom: 16px; }
  .game-screen .progress-dots { margin-top: 18px; }
  .game-screen .feedback { margin-top: 14px; }
}
/* Daily palettes colour the whole app; correct answers always remain green. */
:root { --page: #faf7ef; --ink: #384437; --surface: #fffdf8; --soft: #e4ebd5; --hover: #46694c; background: var(--page); color: var(--ink); }
body { background: var(--page); }
.welcome-description, .welcome-bottom, .eyebrow { color: var(--muted); }
.daily-theme { display: inline-block; border: 1px solid var(--line); border-radius: 24px; background: var(--soft); color: var(--deep); padding: 8px 14px; letter-spacing: .06em; }
.start-button { width: min(100%, 300px); min-height: 76px; font-size: 2rem; font-weight: 700; line-height: 1.15; gap: 16px; border-radius: 24px; padding: 17px 24px; box-shadow: 0 5px 0 var(--deep); }
.start-button .control-icon { width: 42px; height: 42px; flex-basis: 42px; }
body[data-screen="home"] > footer { display: none; }
.start-button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 3px 0 var(--deep); }
#home-size { margin-top: 20px; }
.secondary, .icon-button, .overlay, .empty-state, .kind-note, .encouragement, th { background: var(--soft); color: var(--deep); border-color: var(--line); }
.cell, .segments button, select, .number-setting input, .result-stats, .chart-card, .stat-card { background: var(--surface); color: var(--ink); border-color: var(--line); }
.cell { box-shadow: 0 2px 0 var(--line); }
.cell.last-found { background: #d9e4bd; border-color: #b8ca95; color: #354332; box-shadow: 0 2px 0 #bdcea0; }
.segments button[aria-pressed="true"] { background: var(--soft); color: var(--deep); border-color: var(--green); }
.overlay p:not(.eyebrow) { color: var(--muted); }
.brand svg path:first-child { fill: var(--green); }
.brand svg path:last-child { stroke: var(--deep); }
.progress-dot { border-color: var(--line); }
.progress-dot.done { background: var(--green); border-color: var(--green); }
.progress-dot.current { background: var(--soft); outline-color: var(--line); }
.theme-setting { display: flex; flex-direction: column; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-weight: 600; }
.theme-setting small { display: block; font-size: .875rem; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 5px; }
.theme-setting select { width: 100%; min-width: 0; font-size: 1rem; }
@media (hover: hover) {
  .primary:hover { background: var(--hover); }
  .secondary:hover, .cell:hover { background: var(--soft); border-color: var(--green); }
  .cell.last-found:hover { background: #d9e4bd; border-color: #b8ca95; }
}
@media (max-width: 360px) { .start-button { font-size: 1.875rem; min-height: 72px; } }