:root{--accent:#c2338a;--accent-fill:color-mix(in srgb,var(--accent) 75%,#111a2d);--accent-soft:#f29ac7;--launch:#0a0f1e;
  --of-paper:#0f1629;--of-ink:#eef2ff;--of-muted:#a9b5d2;--of-bad:#ff7c91;--pressed:#3a4a74;--btn:#1d2946;--btn-line:#46557c;
  --night:#05070b;--night-btn:#18223b;--night-line:#34436a;
  --motion-press:80ms;--motion-fast:140ms;--motion-base:200ms;--motion-sheet:280ms;--ease-out:cubic-bezier(.2,0,0,1);
  --deck-size:64px;--deck-cols:5;
  color:var(--of-ink);font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
html[data-theme=light]{--of-paper:#f4f6fb;--of-ink:#121a2e;--of-muted:#4d5874;--pressed:#d3daea;--btn:#e6eaf4;--btn-line:#b8c1d8;color-scheme:light}
@media (display-mode:standalone){html[data-theme=light]{--of-paper:#0f1629;--of-ink:#eef2ff;--of-muted:#a9b5d2;--pressed:#3a4a74;--btn:#1d2946;--btn-line:#46557c;color-scheme:dark}}
*{box-sizing:border-box}

/* §2.4 shared PWA shell block, verbatim */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
html,body{position:fixed;inset:0;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--of-paper)}
.game-shell{display:grid;grid-template-rows:auto 1fr auto;height:100%;height:100dvh;
  --T:env(safe-area-inset-top,0px);--R:env(safe-area-inset-right,0px);--B:env(safe-area-inset-bottom,0px);--L:env(safe-area-inset-left,0px);--G:12px}
.hud{min-height:calc(44px + var(--T));padding:var(--T) calc(var(--R) + var(--G)) 0 calc(var(--L) + var(--G));background:#05070b;color:#f3f6ff}
.stage{position:relative;min-height:0;padding:8px calc(var(--R) + var(--G)) 8px calc(var(--L) + var(--G))}
#board{touch-action:none;display:block;margin:0 auto}
.deck{padding:0 calc(var(--R) + var(--G)) calc(var(--B) + 8px) calc(var(--L) + var(--G))}
.hud,.deck,.stage,canvas,button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;min-width:44px;min-height:44px;font-size:16px}
button:active{background:var(--pressed);transition:background var(--motion-press,80ms) var(--ease-out,ease-out)}
.card-body{overflow:auto;overscroll-behavior:contain;min-height:0;touch-action:pan-y pinch-zoom}
input,select,textarea{font-size:max(16px,1rem);-webkit-user-select:text;user-select:text}
/* end of the verbatim block */

.game-shell{background:linear-gradient(#0a0f1e,#111a33);overflow:hidden}
button{font-family:inherit;font-weight:800;color:inherit;border:1px solid var(--btn-line);border-radius:8px;background:var(--btn);cursor:pointer;padding:0 14px;line-height:1.1}
button:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* HUD: one line, never wraps; readouts share the free width */
.hud{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;position:relative;z-index:1}
.hud-btn{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:10px;background:var(--night-btn);border-color:var(--night-line);color:#f3f6ff}
.hud-btn:active{background:#2c3a60}
#btn-sound .icon-sound,#btn-sound[aria-pressed=true] .icon-muted{display:none}
#btn-sound[aria-pressed=true] .icon-sound{display:block}
.hud-read{flex:0 1 120px;min-width:0;display:grid;justify-items:center;line-height:1.05}
.hud-label{font-size:10px;font-weight:800;letter-spacing:.12em;color:#8f9dc2}
.hud-val{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btn-pause+.hud-read,#btn-help{margin-left:auto}

/* Stage: the canvas bleeds to the stage edges; layout inside honours the padding */
.stage{overflow:hidden}
#board{position:absolute;inset:0;width:100%;height:100%}
.hold-btn{position:absolute;z-index:1;min-width:52px;min-height:48px;padding:0;background:transparent;border:0;border-radius:8px}
.hold-btn:active,.hold-btn.held{background:rgba(255,255,255,.08)}
.hold-btn:disabled{cursor:default}
.chip{position:absolute;z-index:2;left:calc(var(--L) + var(--G));top:12px;width:max-content;max-width:calc(50% - 150px);margin:0;padding:8px 12px;white-space:normal!important;line-height:1.3;border-radius:999px;background:rgba(5,7,11,.82);border:1px solid var(--night-line);color:#f3f6ff;font-size:14px;font-weight:700;pointer-events:none}

/* Deck: grid of square pads; size and columns come from computeLayout */
.deck{display:grid;grid-template-columns:repeat(var(--deck-cols),var(--deck-size));grid-auto-rows:var(--deck-size);gap:8px;justify-content:center;align-content:end;background:var(--night);position:relative;z-index:1}
.deck button{width:var(--deck-size);height:var(--deck-size);padding:0;display:grid;place-items:center;border-radius:14px;background:linear-gradient(#212d4c,#18223b);border-color:#3d4d78;color:#e9eeff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 0 #03050a}
.deck button svg{width:44%;height:44%}
.deck button:active,.deck button.held{background:#34457a;box-shadow:inset 0 2px 6px rgba(0,0,0,.4)}
.deck button[data-action=hard]{border-color:color-mix(in srgb,var(--accent) 60%,#3d4d78);color:#ffd2ea}
.deck.gestures{grid-auto-rows:0}
@media (orientation:landscape){
  .game-shell{grid-template-columns:1fr auto;grid-template-rows:auto 1fr}
  .hud{grid-column:1/-1}
  .stage{padding-right:var(--G)}
  .deck{grid-row:2;grid-column:2;align-content:center;background:transparent;padding:8px calc(var(--R) + var(--G)) calc(var(--B) + 8px) 0}
}

/* Cards: PWA §9 translucent style; layers inset by the safe areas plus the gutter */
.card-layer,.scrim{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:calc(var(--T) + var(--G)) calc(var(--R) + var(--G)) calc(var(--B) + var(--G)) calc(var(--L) + var(--G))}
.card-layer{background:rgba(5,7,11,.42)}
html[data-theme=light] .card-layer{background:rgba(226,232,244,.3)}
#lobby{top:calc(44px + var(--T));padding-top:var(--G)}
.scrim{z-index:20;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.card-body{width:100%;max-width:28rem;max-height:calc(100dvh - var(--T) - var(--B) - 24px);padding:20px;color:var(--of-ink);
  background:color-mix(in srgb,var(--of-paper) 72%,transparent);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border:1px solid color-mix(in srgb,var(--of-ink) 14%,transparent);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
@supports not (backdrop-filter:blur(1px)){.card-body{background:color-mix(in srgb,var(--of-paper) 94%,transparent)}}
.scrim .card-body{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--of-paper) 90%,transparent)}
#app:has(#explainer:not([hidden])) .card-layer:not([hidden]) > .card-body{visibility:hidden}
.card-body h1,.card-body h2,.card-body h3,.card-body p{margin:0}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.16em;color:var(--accent-soft);margin-bottom:6px!important}
html[data-theme=light] .eyebrow,html[data-theme=light] .label{color:#a3226f}
.label{display:block;font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:4px}
.secondary-btn,.lobby-secondary .kit-install-btn{background:var(--btn);border-color:var(--btn-line)}
.primary-btn,.start-btn{background:var(--accent-fill);border-color:color-mix(in srgb,var(--accent) 70%,#fff 10%);color:#fff;min-height:48px}
.primary-btn:active,.start-btn:active{background:color-mix(in srgb,var(--accent) 55%,#111a2d)}
.text-btn{background:none;border:0;color:var(--of-muted);text-decoration:underline;text-underline-offset:3px;font-weight:700}
.close-btn{flex:none;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:8px;background:transparent;border-color:color-mix(in srgb,var(--of-ink) 18%,transparent)}
.card-note{font-size:14px;color:var(--of-muted)}

/* Lobby */
.lobby-card h1{font-size:28px;font-weight:800;line-height:1.1;letter-spacing:-.01em}
.lede{font-size:16px;line-height:1.45;margin-top:8px!important;color:var(--of-ink)}
.mode-select{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:color-mix(in srgb,var(--of-ink) 7%,transparent);border:1px solid color-mix(in srgb,var(--of-ink) 12%,transparent)}
.mode-btn{min-height:44px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:var(--of-muted);font-size:15px}
.mode-btn.active{background:var(--accent-fill);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mode-note{font-size:14px;color:var(--of-muted);margin-top:8px!important;min-height:1.3em}
.start-btn{display:block;width:100%;min-height:52px;margin-top:14px;font-size:18px;border-radius:10px;letter-spacing:.02em}
.best-score{margin-top:12px!important;font-size:15px;color:var(--of-muted);text-align:center}
.best-score strong{color:var(--of-ink);font-variant-numeric:tabular-nums}
.lobby-secondary{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lobby-secondary button{flex:1 1 auto;white-space:nowrap;padding:0 10px}

/* Explainer (§2.7): title, three-row pictogram table, keys, the joke, field note, foot */
.explainer-card{padding:20px 20px 16px}
.explainer-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.explainer-header h2{font-size:20px;font-weight:800}
.howto{width:100%;border-collapse:separate;border-spacing:0 8px}
.howto td{vertical-align:middle;font-size:15px;line-height:1.4;color:var(--of-ink)}
.howto td strong{display:block;font-size:16px;font-weight:800;margin-bottom:1px}
.howto td.picto{width:60px;padding-right:12px}
.picto svg{display:block;width:48px;height:48px}
.picto-bg{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:color-mix(in srgb,var(--accent) 45%,transparent)}
.picto-tile{fill:#ffb454;stroke:#0a0f1e;stroke-width:1.2}
.picto-ink{stroke:rgba(10,15,30,.45);stroke-width:2;stroke-linecap:round}
.picto-line{fill:none;stroke:var(--of-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.picto-dash{fill:none;stroke:var(--of-muted);stroke-width:2;stroke-dasharray:3 4;stroke-linecap:round}
.picto-dot{fill:var(--accent-soft)}
.explainer-keys{margin-top:6px!important;font-size:14px;line-height:1.5;color:var(--of-muted)}
.the-joke,.field-note{margin-top:14px;padding:10px 12px;border-radius:8px;border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.the-joke p,.field-note p{font-size:15px;line-height:1.45}
.field-note{border-left-color:#93b4ff;background:color-mix(in srgb,#93b4ff 9%,transparent)}
.field-note .label{color:#93b4ff}
html[data-theme=light] .field-note .label{color:#2d5bc4}
.explainer-foot{margin-top:14px!important;text-align:center;font-size:14px;color:var(--of-muted)}

/* Pause and game over */
.pause-dialog h2,.over-dialog h2{font-size:24px;font-weight:800}
.pause-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.pause-actions .primary-btn,#btn-quit{grid-column:1/-1}
.pause-actions .primary-btn{min-height:52px;font-size:18px}
.pause-dialog .card-note{margin-top:8px}
#btn-reset-scores{display:block;margin:10px auto 0}
.over-reason{margin-top:6px!important;font-size:16px;line-height:1.45}
.over-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 0}
.over-stats div{padding:8px;border-radius:8px;text-align:center;background:color-mix(in srgb,var(--of-ink) 6%,transparent)}
.over-stats dt{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--of-muted)}
.over-stats dd{margin:2px 0 0;font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}
.over-scores{margin-top:14px}
.over-scores h3{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--of-muted)}
.over-scores ol{margin:6px 0 0;padding:0;list-style:none;counter-reset:rank}
.over-scores li{counter-increment:rank;display:flex;justify-content:space-between;gap:8px;padding:5px 8px;border-radius:6px;font-variant-numeric:tabular-nums;font-size:15px}
.over-scores li::before{content:counter(rank) ".";color:var(--of-muted);width:1.5em}
.over-scores li span:first-of-type{flex:1;font-weight:800}
.over-scores li.mine{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.over-scores li.empty::before{content:none}
.over-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}

/* Motion: overlays fade and settle; reduced motion keeps only a 120 ms opacity crossfade */
.card-layer:not([hidden]),.scrim:not([hidden]){animation:layer-in var(--motion-fast) var(--ease-out)}
.card-layer:not([hidden]) > .card-body,.scrim:not([hidden]) > .card-body{animation:card-in var(--motion-fast) var(--ease-out)}
@keyframes layer-in{from{opacity:0}}
@keyframes card-in{from{opacity:0;transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transform:none!important;translate:none!important;scale:none!important}
  .card-layer:not([hidden]) > .card-body,.scrim:not([hidden]) > .card-body{animation:layer-in 120ms linear}}
html[data-reduced-motion=on] *{transform:none!important;scale:none!important}
html[data-reduced-motion=on] .card-layer:not([hidden]) > .card-body,html[data-reduced-motion=on] .scrim:not([hidden]) > .card-body{animation:layer-in 120ms linear}
@media (orientation:landscape) and (max-height:500px){
  .lobby-card{max-width:46rem;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .lobby-card .mode-select{margin-top:0}
  .over-dialog{max-width:46rem;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;align-content:start}
  .over-dialog>*{grid-column:1}
  .over-dialog .over-scores{grid-column:2;grid-row:1/span 4;margin-top:0}
  .over-dialog .over-actions{grid-column:2;grid-row:5;align-self:end}
}
@media (max-height:500px){.card-body{padding:14px}.lobby-card h1{font-size:24px}.lede{font-size:15px}.hud-val{font-size:16px}}