/* WIGGLE 0.4: muted measuring-tool colours, explicit outcomes, mobile actions. */
:root {
  --catch:#26734d; --catch-wash:#e8f3ec;
  --miss:#ae493c; --miss-wash:#faede8;
  --dock-height:120px;
  --size-ink:#286f9f; --size-wash:#e7f0f7;
}
:root[data-theme="dark"] {
  --catch:#9adbb4; --catch-wash:#18372a;
  --miss:#ffb1a1; --miss-wash:#402620;
  --size-ink:#8abde3; --size-wash:#203448;
}
/* Identity colours are not outcome colours; selected and spent also use labels. */
[data-window="pin"], [data-size="pin"] {--size-ink:#6550a1;--size-wash:#eeeaf6}
[data-window="tight"], [data-size="tight"] {--size-ink:#4a59a0;--size-wash:#ebeef8}
[data-window="steady"], [data-size="steady"] {--size-ink:#286f9f;--size-wash:#e7f0f7}
[data-window="roomy"], [data-size="roomy"] {--size-ink:#46798d;--size-wash:#eaf1f4}
[data-window="wide"], [data-size="wide"] {--size-ink:#627581;--size-wash:#eef1f3}
[data-theme="dark"] [data-window="pin"], [data-theme="dark"] [data-size="pin"] {--size-ink:#bfabea;--size-wash:#302942}
[data-theme="dark"] [data-window="tight"], [data-theme="dark"] [data-size="tight"] {--size-ink:#acb8f1;--size-wash:#28314b}
[data-theme="dark"] [data-window="steady"], [data-theme="dark"] [data-size="steady"] {--size-ink:#8abde3;--size-wash:#203448}
[data-theme="dark"] [data-window="roomy"], [data-theme="dark"] [data-size="roomy"] {--size-ink:#9ecbdc;--size-wash:#263a42}
[data-theme="dark"] [data-window="wide"], [data-theme="dark"] [data-size="wide"] {--size-ink:#b6c5cf;--size-wash:#30383e}
.sound-button {position:relative;gap:0;padding:5px;width:44px;height:44px}
.sound-button svg {width:19px;height:19px}
.sound-state {font-size:9px;line-height:11px;letter-spacing:.2px}
.sound-button[aria-pressed="true"] {background:var(--soft)}
.sound-button:disabled {opacity:.6}
.window-options {gap:8px;padding:3px}
.window-option {position:relative;height:82px;border-color:var(--size-ink);background:var(--size-wash);color:var(--ink);gap:2px}
.window-option:not(:disabled):hover {border-color:var(--size-ink);background:var(--size-wash);box-shadow:inset 0 0 0 1px var(--size-ink)}
.window-option.selected,.window-option.selected:not(:disabled):hover {outline:2px solid var(--ink);outline-offset:2px;border-color:var(--size-ink);background:var(--size-wash);color:var(--ink)}
.window-option.selected::after {content:'';position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.window-option.selected .window-percent {color:var(--muted);opacity:1}
.window-mini {height:7px;width:19px;border:2px solid var(--size-ink);border-top:0;margin-top:3px;flex-shrink:0}
.window-mini[data-size="0"] {width:8px}.window-mini[data-size="1"] {width:12px}.window-mini[data-size="3"] {width:26px}.window-mini[data-size="4"] {width:33px}
.window-option.used {color:var(--muted);background:var(--soft);border-color:var(--line-strong)}
.window-option.used .window-name {text-decoration:none}
.window-option.used .window-mini {visibility:hidden}
.window-option.used .window-points {font-size:14px;line-height:1.2}
.window-percent {font-size:10px;color:var(--muted)}
.window-caption {padding-top:8px;min-height:29px;font-size:12px}
.ruler-band {border-color:var(--size-ink);background:var(--size-wash)}
.ruler-centre,.ruler-grip {background:var(--size-ink)}
.range-bubble {background:var(--size-wash);color:var(--ink)}
.inactive.has-position .range-bubble {background:var(--size-wash);color:var(--ink)}
.ruler.revealed.hit .ruler-band {border-color:var(--catch);background:var(--catch-wash)}
.ruler.revealed.miss .ruler-band {border-color:var(--miss);background:var(--miss-wash)}
.answer-pin,.answer-pin::before {background:var(--ink)}
.answer-label {color:var(--ink)}
.ruler.revealed {height:160px}
.revealed .answer-label {top:137px}
.q-link.hit .q-number {color:var(--catch);background:var(--catch-wash);border-color:var(--catch)}
.q-link.miss .q-number {color:var(--miss);background:var(--miss-wash);border-color:var(--miss)}
.reveal {padding-top:8px;border-top:0}
.range-summary {display:flex;flex-direction:column;gap:4px;font-size:13px}
.range-summary strong {font-size:19px;font-weight:700}
.range-summary span {color:var(--muted)}
.spent-summary {display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding:13px 0}
.answer-details {border-block:1px solid var(--line);padding:7px 0;font-size:13px}
.answer-details summary {min-height:36px;display:flex;align-items:center;cursor:pointer;font-weight:600;gap:9px}
.answer-details summary::before {content:'+';font-size:18px;font-weight:400}
.answer-details[open] summary::before {content:'−'}
.answer-details .source-note {color:var(--muted);font-size:12px;margin:10px 0}
.action-dock {margin-top:15px;padding-top:12px;border-top:1px solid var(--line);background:var(--bg)}
.action-dock .commit-zone {margin-top:0}
.action-dock .commit-warning {margin-top:8px;font-size:12px}
.action-dock>.btn {justify-content:space-between}
.verdict {display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid;border-radius:4px;padding:10px 12px;margin-bottom:10px}
.verdict.hit {color:var(--catch);background:var(--catch-wash);border-color:var(--catch)}
.verdict.miss {color:var(--miss);background:var(--miss-wash);border-color:var(--miss)}
.verdict strong {display:block;font-size:18px}
.verdict small {display:block;font-size:11px;line-height:1.4;margin-top:2px}
.verdict-points {font-size:26px;font-weight:750;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.verdict-points small {font-size:10px;font-weight:400}
.receipt-window {color:var(--catch);background:var(--catch-wash);border:1px solid var(--catch)}
.receipt-window.miss {color:var(--miss);background:var(--miss-wash);border-color:var(--miss)}
.review-row .q-number {color:var(--catch);background:var(--catch-wash)}
.review-row.miss .q-number {color:var(--miss);background:var(--miss-wash)}
.round-review summary {font-weight:650}
.local-release {font-size:11px;color:var(--muted);margin-top:5px}
.results-bottom {align-items:flex-start}
.dialog {padding:0;overflow:hidden;max-height:calc(100dvh - 24px)}
.dialog[open] {display:flex;flex-direction:column}
.dialog-head {margin:0;padding:17px 22px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.dialog-head h2 {font-size:24px}
.dialog-body {padding:19px 22px;overflow:auto;overscroll-behavior:contain}
.dialog-close {width:44px;height:44px;flex-basis:44px}
.dialog-body .intro-lead {font-size:16px;line-height:1.5;margin-bottom:14px}
.intro-example {padding:10px 16px 12px;background:var(--soft);border-radius:4px;text-align:center;margin-bottom:16px}
.intro-range {font-size:12px;font-weight:600}
.intro-track {height:40px;position:relative;width:85%;margin:0 auto 8px;border-bottom:1px solid var(--line-strong)}
.intro-band {position:absolute;bottom:0;height:22px;left:27%;width:46%;background:var(--catch-wash);border:2px solid var(--catch)}
.intro-pin {position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:34px;font-size:12px;font-weight:650}
.intro-pin::after {content:'';position:absolute;bottom:0;left:50%;height:16px;width:2px;background:var(--ink)}
.intro-caption {font-size:12px;color:var(--catch);font-weight:600}
.dialog-body details.extra-rules {border-top:0;margin-top:9px;padding-bottom:0}
.help-window strong {font-size:11px}.help-window span {font-size:10px}
.sound-controls {padding:3px 0 16px;display:grid;grid-template-columns:1fr auto;gap:9px 14px;align-items:center}
.sound-controls label {grid-column:1/-1;font-size:12px;font-weight:600;display:flex;justify-content:space-between}
.sound-controls input {width:100%;min-height:44px;accent-color:var(--ink);margin:0}
.sound-controls p {grid-column:1/-1;margin:0!important}
.sound-controls .btn {min-height:44px}
.setting-row {padding:15px 0}
@media(max-width:600px) {
  html {scroll-padding-bottom:calc(var(--dock-height) + 24px)}
  .header-inner {height:58px;grid-template-columns:1fr auto 1fr;padding:0 12px}
  .brand {font-size:27px;gap:6px;letter-spacing:-1px}
  .brand::before,.brand::after {height:25px;width:5px}
  .nav-button {width:40px;height:44px;padding:7px}
  .sound-button {padding:4px}
  .game {padding-top:14px}
  .game-top {margin-bottom:12px}
  .game-date {margin-top:2px}
  .score-total {font-size:23px}
  .question-head {min-height:0;padding:17px 0 10px}
  .question-head h2 {font-size:23px;line-height:1.25}
  .question-meta {margin-bottom:7px}
  .question-note {margin-top:7px;font-size:12px}
  .ruler {height:125px}
  .ruler.revealed {height:157px}
  .window-option {height:78px;padding:6px 1px}
  .window-options {gap:7px}
  .window-name {font-size:11px}
  .window-points {font-size:18px}
  .window-percent {font-size:9px}
  .window-caption {font-size:11px;padding-top:7px}
  .section-label {font-size:12px;margin-bottom:7px}
  .has-action-dock #main {padding-bottom:calc(var(--dock-height) + 18px)}
  .has-action-dock .footer {padding-bottom:calc(var(--dock-height) + 22px)}
  .action-dock {position:fixed;bottom:0;left:0;right:0;z-index:8;margin:0;padding:10px 20px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line-strong)}
  .action-dock .commit-zone {grid-template-columns:minmax(0,1.5fr) minmax(108px,1fr);gap:9px}
  .number-entry input {font-size:16px;max-width:none}
  .number-entry .unit {display:none}
  .nudge-button {width:44px;min-width:44px;height:46px}
  .action-dock .commit-warning {font-size:11px;line-height:1.35}
  .action-dock .btn {font-size:14px}
  .verdict {padding:9px 11px;margin-bottom:8px}
  .verdict strong {font-size:17px}
  .verdict small {font-size:11px}
  .verdict-points {font-size:25px}
  .flow-actions .action-dock {position:static;padding-inline:0;margin-top:15px}
  .flow-actions #main {padding-bottom:0}
  .flow-actions .footer {padding-bottom:20px}
  .dialog-head {padding:10px 16px}
  .dialog-head h2 {font-size:22px}
  .dialog-body {padding:15px 18px}
  .dialog-body p {margin-bottom:12px;line-height:1.5}
  .intro-example {margin-bottom:12px}
}
@media(max-width:359px) {
  .header-inner {padding-inline:8px}
  .brand {font-size:25px;padding-inline:4px;gap:5px}
  .nav-button {width:38px}
  .question-head h2 {font-size:21px}
  .question-head {padding-top:14px}
  .window-name {font-size:10px}
  .window-option {height:75px}
  .window-options {gap:6px}
  .action-dock {padding-inline:14px}
  .action-dock .commit-zone {grid-template-columns:minmax(0,1.65fr) minmax(99px,1fr);gap:8px}
  .range-summary strong {font-size:17px}
}
@media(prefers-reduced-motion:no-preference) {
  :root:not([data-reduced-motion="true"]) .verdict {animation:outcome-in .18s ease-out}
  @keyframes outcome-in {from{opacity:.45}to{opacity:1}}
}
@media(forced-colors:active) {
  .window-option {border-color:ButtonText}
  .window-option.selected {outline:3px solid Highlight}
  .window-mini {border-color:ButtonText}
  .window-option.selected::after {background:Highlight;forced-color-adjust:none}
  .verdict,.receipt-window {border:2px solid CanvasText}
  .ruler.revealed .ruler-band {border-color:Highlight;background:Canvas;forced-color-adjust:none}
  .answer-pin,.answer-pin::before {background:CanvasText;forced-color-adjust:none}
}