:root { --background:#faf9f6; --surface:#fff; --primaryText:#252b2b; --secondaryText:#626b68; --accent:#276653; --divider:#d8dfda; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--primaryText); background:var(--background); }
* { box-sizing:border-box; }
body { margin:0; }
html { --insetTop:env(safe-area-inset-top,0px); --insetBottom:env(safe-area-inset-bottom,0px); }
html[data-embedded="true"] { --insetTop:0px; --insetBottom:0px; }
body { overscroll-behavior-y:contain; }
main { width:100%; max-width:520px; margin:auto; min-height:100vh; min-height:100dvh; padding:max(12px,var(--insetTop)) max(16px,env(safe-area-inset-right)) max(12px,var(--insetBottom)) max(16px,env(safe-area-inset-left)); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.screen-landing { display:flex; flex-direction:column; padding-top:max(20px,var(--insetTop)); }
.screen-game { display:flex; flex-direction:column; gap:8px; }
.game-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-height:44px; }
.game-toolbar h1 { flex:1; min-width:min(35%,8rem); overflow-wrap:anywhere; margin:0; font-size:1.15rem; letter-spacing:-.02em; }
.game-toolbar button { flex-shrink:0; width:44px; height:44px; min-height:44px; padding:0; background:transparent; border:0; font-size:1.25rem; }
.game-content,.game-panel { display:flex; flex-direction:column; gap:8px; min-width:0; }
.game-content { flex:none; }
.game-content p { margin:0; }
.game-toolbar .reset-game { display:inline-flex; align-items:center; justify-content:center; gap:5px; width:auto; min-width:78px; padding:0 12px; font-size:.82rem; font-weight:650; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--divider)); border-radius:999px; box-shadow:0 2px 5px -4px var(--primaryText); }
.game-toolbar .reset-game:active { background:color-mix(in srgb,var(--accent) 16%,var(--surface)); }
.game-toolbar .reset-game:disabled { opacity:.5; }
.game-toolbar .reset-game { max-width:calc(100% - 48px); height:auto; }
.game-toolbar .reset-game span:last-child { min-width:0; overflow-wrap:anywhere; }
.reset-icon { display:inline-block; font-size:1.2rem; font-weight:500; line-height:1; }
.how-to-play { border:1px solid var(--divider); border-radius:12px; background:var(--surface); }
.how-to-play summary { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding:10px 12px; cursor:pointer; font-size:.85rem; font-weight:650; list-style:none; }
.how-to-play summary::-webkit-details-marker { display:none; }
.how-to-play summary::after { content:'⌄'; font-size:1.15rem; }
.how-to-play[open] summary::after { content:'⌃'; }
.how-to-body { max-height:220px; max-height:min(220px,40dvh); overflow-y:auto; padding:0 14px 12px; font-size:.85rem; line-height:1.5; }
.how-to-body ol { margin:0; padding-left:22px; }
.how-to-body li { padding:4px 0 4px 4px; }
.how-to-body li::marker { color:var(--accent); font-weight:700; }
.how-to-body p { font-size:inherit; line-height:inherit; }
.game-caveat { padding:10px; background:var(--background); border-radius:8px; }
.daily-caveat { padding-top:8px; border-top:1px solid var(--divider); }
h1 { font-size:2rem; letter-spacing:-.04em; margin:16px 0 8px; line-height:1.2; }
/* Route headings receive programmatic focus for screen readers, not a control ring. */
h1[tabindex="-1"]:focus { outline:none; box-shadow:none; background:transparent; }
h2 { font-size:1.3rem; margin:12px 0; }
p { color:var(--secondaryText); line-height:1.6; margin:8px 0; }
button,select,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button,select { font:inherit; color:var(--primaryText); background:var(--surface); border:1px solid var(--divider); border-radius:12px; min-height:48px; padding:10px 14px; cursor:pointer; max-width:100%; }
button:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button:disabled { cursor:default; }
button[aria-pressed="true"],.primary { border:2px solid var(--accent); color:var(--accent); font-weight:650; }
.daily-summary { margin:0; font-size:.8rem; }
.daily-status { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.daily-ring { width:52px; height:52px; flex-shrink:0; position:relative; display:grid; place-items:center; }
.daily-ring svg { position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.daily-ring circle { fill:none; stroke-width:4; }
.ring-track { stroke:var(--divider); }
.ring-fill { stroke:var(--accent); stroke-linecap:butt; }
.ring-count { font-size:.75rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.daily-status-text { min-width:0; }
.daily-status-title { margin:0 0 2px; color:var(--primaryText); font-size:.95rem; font-weight:650; }
.daily-summary { font-size:.75rem; line-height:1.4; }
.catalog { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:8px; row-gap:clamp(12px,3dvh,24px); margin:0; }
.game-card { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:8px; background:transparent; border:0; border-radius:16px; padding:0 2px; min-width:0; text-align:center; overflow-wrap:anywhere; transition:transform .15s ease; }
.game-card:active { transform:scale(.98); }
.icon-wrap { position:relative; display:grid; place-items:center; width:min(100%,clamp(66px,22vw,110px)); aspect-ratio:1; background:var(--cardSurface); border:1px solid color-mix(in srgb,var(--cardAccent) 8%,transparent); border-radius:27%; color:var(--cardAccent); box-shadow:0 10px 20px -13px color-mix(in srgb,var(--primaryText) 32%,transparent),0 2px 7px -5px color-mix(in srgb,var(--primaryText) 22%,transparent); }
.game-icon { display:block; width:56%; height:56%; background:var(--cardAccent); mask:var(--icon) center/contain no-repeat; -webkit-mask:var(--icon) center/contain no-repeat; }
.badge { position:absolute; right:-3px; bottom:-3px; background:var(--surface); border:2px solid var(--accent); color:var(--accent); border-radius:50%; width:20px; height:20px; font-size:12px; display:grid; place-items:center; }
.game-name { font-weight:600; font-size:.8rem; line-height:1.2; min-height:2.4em; display:flex; align-items:flex-start; justify-content:center; }
.footer { text-align:center; font-size:.75rem; line-height:1.4; margin:8px 0 0; }
.bonus-card { display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:16px; background:var(--surface); border:1px solid var(--divider); border-radius:12px; }
.bonus-card h2 { margin:0 0 4px; font-size:1rem; }
.bonus-card p { margin:0; font-size:.85rem; line-height:1.4; }
.bonus-card button { width:100%; min-height:48px; }
.bonus-card button:disabled { opacity:.6; }
.screen-result:has(.bonus-card) .result-mark { width:48px; height:48px; font-size:24px; margin:0 auto 8px; }
.screen-result:has(.bonus-card) .result { padding:4px 0; }
.screen-result:has(.bonus-card) .result h1 { margin:8px 0; }
.screen-result:has(.bonus-card) .result button { margin-top:12px; }
@media (max-height:580px) {
  .bonus-card { padding:8px 12px; gap:6px; margin-top:8px; }
  .screen-landing:has(.bonus-card) .catalog { row-gap:4px; }
  .screen-landing:has(.bonus-card) .icon-wrap { width:32px; height:32px; flex-shrink:0; }
  .screen-landing:has(.bonus-card) .game-card { flex-direction:row; gap:4px; min-height:48px; text-align:start; }
  .screen-landing:has(.bonus-card) .game-name { min-height:0; align-items:center; font-size:.7rem; }
}
@media (orientation:landscape) and (max-height:500px) {
  .screen-landing:has(.bonus-card) .daily-ring { width:40px; height:40px; }
  .screen-result:has(.bonus-card) { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:center; }
  .screen-result:has(.bonus-card) .result { padding:8px; }
  .screen-result:has(.bonus-card) .bonus-card { margin:0; }
}
.back { border:0; padding-left:0; background:transparent; color:var(--secondaryText); font-size:.85rem; }
.progress { margin:0; color:var(--accent); font-size:.85rem; font-weight:600; }
.pairs { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:start; }
.pair-column { display:grid; gap:8px; }
.pair-column button { min-height:clamp(56px,12vh,76px); min-height:clamp(56px,12dvh,76px); padding:8px; overflow-wrap:anywhere; font-size:.85rem; }
.pair-column button.matched { border-style:dashed; color:var(--accent); }
.feedback { order:-2; min-height:36px; margin:0; padding:6px 10px; color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); border:1px solid color-mix(in srgb,var(--accent) 25%,var(--divider)); border-radius:10px; font-size:.9rem; font-weight:600; line-height:1.35; }
.feedback:empty { min-height:0; padding:0; border:0; background:transparent; }
.feedback.is-error { color:var(--error); background:color-mix(in srgb,var(--error) 11%,var(--surface)); border-color:color-mix(in srgb,var(--error) 32%,var(--divider)); }
.feedback.is-error::before { content:'!'; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:7px; border-radius:50%; color:var(--surface); background:var(--error); font-size:.75rem; vertical-align:middle; }
.game-hint { order:-1; padding:7px 10px; border-left:3px solid var(--accent); border-radius:4px 10px 10px 4px; background:color-mix(in srgb,var(--accent) 8%,var(--surface)); color:var(--primaryText); font-size:.9rem; font-weight:550; line-height:1.35; }
.tiles { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:4px 0; }
.tiles button { width:44px; min-width:44px; min-height:44px; padding:6px; font-size:1.1rem; font-weight:650; }
.tiles button:disabled { opacity:.4; }
.answer { display:block; text-align:center; min-height:48px; padding:10px 8px; border-bottom:2px solid var(--divider); font-size:1.3rem; letter-spacing:.12em; overflow-wrap:anywhere; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:0; }
.actions>* { flex:1; }
.screen-result { display:grid; align-content:center; }
.result { text-align:center; padding:12px 0; }
.result-mark { font-size:40px; color:var(--accent); width:88px; height:88px; border:2px solid var(--divider); border-radius:50%; display:grid; place-items:center; margin:0 auto 24px; animation:arrive .35s ease-out; }
.result button { margin-top:24px; }
.test-settings { margin-top:16px; border-top:1px solid var(--divider); padding-top:8px; font-size:.8rem; color:var(--secondaryText); }
.test-settings summary { cursor:pointer; min-height:44px; padding:12px 0; }
.test-settings label { display:grid; gap:8px; margin:12px 0; }
.test-settings button { margin:6px 4px 6px 0; font-size:.8rem; }
.notice { font-size:.8rem; }
.sudoku-board,.number-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; max-width:360px; margin:0 auto; flex-shrink:0; }
.sudoku-board { width:min(100%,clamp(218px,calc(100vh - 312px),328px)); width:min(100%,clamp(218px,calc(100dvh - 312px),328px)); }
.number-grid { width:min(100%,clamp(214px,calc(100vh - 222px),360px)); width:min(100%,clamp(214px,calc(100dvh - 222px),360px)); }
.screen-game[data-game="mini_sudoku"] .progress { width:min(100%,clamp(218px,calc(100dvh - 312px),328px)); margin:0 auto; }
.screen-game[data-game="number_grid"] .progress { width:min(100%,clamp(214px,calc(100dvh - 222px),360px)); margin:0 auto; }
.sudoku-board { border:2px solid var(--primaryText); border-radius:8px; overflow:hidden; }
.sudoku-cell { min-width:0; min-height:44px; aspect-ratio:1; border-radius:0; border:0; border-right:1px solid var(--divider); border-bottom:1px solid var(--divider); font-size:1.3rem; padding:4px; color:var(--accent); }
.sudoku-cell:nth-child(4n) { border-right:0; }
.sudoku-cell:nth-child(4n+2) { border-right:2px solid var(--primaryText); }
.sudoku-cell:nth-child(n+5):nth-child(-n+8) { border-bottom:2px solid var(--primaryText); }
.sudoku-cell:nth-child(n+13) { border-bottom:0; }
.sudoku-cell.given { background:var(--background); color:var(--primaryText); font-weight:700; }
.sudoku-cell[aria-pressed="true"] { box-shadow:inset 0 0 0 3px var(--accent); }
.sudoku-cell:focus-visible { outline-offset:-4px; }
.number-pad { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; width:min(100%,clamp(236px,calc(100dvh - 312px),328px)); margin:0 auto; }
.number-pad button { min-height:44px; padding:8px; }
.erase-key { grid-column:auto; }
.number-grid { gap:8px; }
.number-grid button { aspect-ratio:1; min-height:44px; min-width:0; padding:4px; font-size:1.3rem; font-weight:600; }
.number-grid .found { border-style:dashed; color:var(--accent); background:var(--background); }
.sequence-values { display:flex; gap:6px; margin:12px 0; }
.sequence-value { flex:1; min-width:0; display:grid; place-items:center; min-height:56px; border-bottom:2px solid var(--divider); font-size:clamp(1rem,4.5vw,1.4rem); }
.sequence-value:last-child { color:var(--accent); border-color:var(--accent); }
.sequence-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sequence-options button { min-height:64px; font-size:1.3rem; }
.sequence-options button:disabled { opacity:.45; text-decoration:line-through; }
.rule { font-size:.85rem; }
.maze-board { width:min(100%,clamp(152px,calc(100vh - 312px),344px)); width:min(100%,clamp(152px,calc(100dvh - 312px),344px)); flex-shrink:0; margin:0 auto; padding:6px; background:var(--surface); border-radius:12px; }
.screen-game[data-game="maze"] .progress { width:min(100%,clamp(152px,calc(100dvh - 312px),344px)); margin:0 auto; }
.maze-board:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.maze-board svg { display:block; width:100%; height:auto; touch-action:manipulation; }
.maze-wall { stroke:var(--primaryText); stroke-width:2.5; stroke-linecap:round; }
.maze-player,.maze-goal { fill:var(--accent); }
.maze-goal { font-size:26px; }
.maze-controls { display:grid; grid-template-columns:repeat(3,minmax(44px,1fr)); grid-template-rows:repeat(2,44px); width:min(100%,clamp(152px,calc(100dvh - 312px),344px)); margin:0 auto; gap:6px; }
.maze-controls button { min-height:44px; padding:4px; }
.maze-controls button { font-size:1.4rem; }
.maze-controls [aria-disabled="true"] { opacity:.4; }
.move-up { grid-column:2; grid-row:1; }.move-left { grid-column:1; grid-row:2; }.move-down { grid-column:2; grid-row:2; }.move-right { grid-column:3; grid-row:2; }
@keyframes arrive { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
.shape-board,.pipe-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; width:min(100%,clamp(188px,calc(100dvh - 252px),300px)); margin:0 auto; }
.shape-cell,.pipe-cell { min-width:0; min-height:44px; aspect-ratio:1; padding:0; border-radius:8px; }
.shape-cell.filled { background:var(--accent); color:var(--background); font-weight:700; }
.shape-cell.drop-target { outline:3px dashed var(--accent); outline-offset:-3px; }
.shape-tray { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:min(100%,clamp(188px,calc(100dvh - 252px),300px)); margin:0 auto; gap:4px; }
.screen-game[data-game="shape_fit"] .feedback { width:min(100%,clamp(188px,calc(100dvh - 252px),300px)); margin:0 auto; }
.shape-piece { padding:4px; height:64px; touch-action:none; display:grid; place-items:center; }
.shape-mini { display:grid; grid-template-columns:repeat(4,10px); grid-template-rows:repeat(4,10px); gap:1px; pointer-events:none; }
.shape-mini span { background:var(--accent); color:var(--background); font-size:8px; line-height:10px; }
.pipe-board { width:min(100%,clamp(188px,calc(100dvh - 162px),340px)); gap:4px; }
.screen-game[data-game="pipe_connect"] .progress { width:min(100%,clamp(188px,calc(100dvh - 162px),340px)); margin:0 auto; }
.pipe-cell { position:relative; overflow:hidden; color:var(--secondaryText); }
.pipe-cell.connected { color:var(--accent); border-color:var(--accent); }
.pipe-arm { position:absolute; background:currentColor; pointer-events:none; }
.pipe-0,.pipe-2 { width:8px; height:50%; left:calc(50% - 4px); }
.pipe-1,.pipe-3 { height:8px; width:50%; top:calc(50% - 4px); }
.pipe-0 { top:0; }.pipe-1 { right:0; }.pipe-2 { bottom:0; }.pipe-3 { left:0; }
.pipe-center { position:absolute; width:24px; height:24px; top:calc(50% - 12px); left:calc(50% - 12px); border-radius:50%; background:var(--surface); border:3px solid currentColor; font-size:12px; font-weight:700; line-height:18px; pointer-events:none; }
.code-history { list-style:none; padding:0; margin:0; height:72px; font-size:.75rem; font-variant-numeric:tabular-nums; }
.code-history li { display:flex; justify-content:space-between; gap:8px; height:24px; align-items:center; }
.code-answer { text-align:center; font-size:1.6rem; letter-spacing:.25em; height:40px; color:var(--accent); }
.code-pad { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
.code-pad button { min-height:44px; padding:6px; }
.code-pad button:disabled { opacity:.35; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:340px) { main { padding-left:16px; padding-right:16px; } .pairs { gap:8px; } }
@media (max-height:580px) {
  main { padding-top:max(8px,var(--insetTop)); padding-bottom:max(8px,var(--insetBottom)); }
  .screen-landing { padding-top:max(8px,var(--insetTop)); }
  .screen-game[data-game="mini_sudoku"] { gap:4px; }
  .screen-game[data-game="mini_sudoku"] .game-content { gap:3px; }
  .daily-status { margin-bottom:8px; }
  .catalog { row-gap:8px; }
  .icon-wrap { width:min(100%,clamp(62px,21vw,74px)); }
  .game-card { gap:4px; }
  .screen-game,.game-content,.game-panel { gap:6px; }
  .number-pad .erase-key { padding:4px; font-size:0; }
  .number-pad .erase-key::after { content:'⌫'; font-size:1.3rem; }
  .pair-column { gap:6px; }
  .screen-game[data-game="word_match"] .pair-column button { min-height:48px; padding:6px; line-height:1.35; }
  .screen-game > .notice { margin:0; line-height:1.3; }
  .sequence-values { margin:4px 0; }
  .sequence-options { gap:6px; }
  .sequence-options button { min-height:52px; }
  .game-content p:not(.feedback) { font-size:.8rem; line-height:1.4; }
  .game-content .notice { margin:0; }
}