/* Hallmark · genre: playful · macrostructure: game arena · design-system: design.md · designed-as-app
 * Game-native geometry, not a tool workbench. Static chrome tokens; colors inside the wheel are game data.
 */
@import url('/tokens.css');
@font-face{font-family:'Bricolage Grotesque';src:url('/fonts/bricolage.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/fonts/plex.woff2') format('woff2');font-weight:100 700;font-display:swap}
*{box-sizing:border-box}html,body{overflow-x:clip}body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);font-synthesis:none}button,input{font:inherit}button,a,summary{touch-action:manipulation}button,a,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{cursor:default}button,a,summary{white-space:nowrap}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:3px solid var(--color-focus);outline-offset:5px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.shell{max-width:1040px;margin:auto;padding:0 var(--space-lg)}.site-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);min-height:88px}.wordmark{font:800 27px var(--font-display);letter-spacing:-1.5px;text-decoration:none}.wordmark span{font-weight:400;color:var(--color-muted);letter-spacing:-1px}.site-header nav{display:flex;gap:var(--space-xs);align-items:center}.site-header nav a{padding:var(--space-sm) var(--space-md);min-height:44px;display:grid;place-items:center;text-decoration:none;font-size:var(--text-sm);border-radius:var(--radius-sm);color:var(--color-muted)}.site-header nav a[aria-current=page]{background:var(--color-paper-3);color:var(--color-ink)}
.arena{max-width:660px;margin:var(--space-md) auto var(--space-2xl);position:relative}.hud{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-md);font-size:var(--text-sm);color:var(--color-muted)}.hud .quiet{justify-self:end}.hud #round-label{font-variant-numeric:tabular-nums}.hud #progress{display:flex;gap:6px}.hud i{height:5px;width:25px;background:var(--color-rule);border-radius:5px}.hud i.current{background:var(--color-ink)}.hud i.complete{background:var(--color-accent)}.stage-title{text-align:center;min-height:106px;padding-top:var(--space-xl)}h1,h2{font-family:var(--font-display);font-style:normal;overflow-wrap:anywhere;min-width:0}.stage-title h1{font-size:clamp(1.65rem,4vw,2.4rem);font-weight:600;line-height:1.1;letter-spacing:-1px;margin:0 0 var(--space-sm)}.stage-title p{margin:0;color:var(--color-muted);line-height:1.5;font-size:var(--text-base)}.play-space{position:relative;max-width:420px;margin:auto;display:grid;place-items:center;padding:var(--space-md) 0}.wheel-shell{position:relative;width:min(78vw,344px);aspect-ratio:1}.hue-wheel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(hsl(0 85% 60%),hsl(60 85% 60%),hsl(120 85% 60%),hsl(180 85% 60%),hsl(240 85% 60%),hsl(300 85% 60%),hsl(360 85% 60%));touch-action:none;cursor:crosshair;opacity:.88}.hue-wheel[aria-disabled=true]{cursor:default}.hue-wheel[aria-disabled=true] .hue-handle{opacity:0}.hue-handle{position:absolute;width:28px;height:28px;left:50%;top:50%;margin:-14px;border:4px solid var(--color-ink);background:var(--color-paper);border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px var(--color-paper);z-index:2}.disk{position:absolute;inset:34px;border:8px solid var(--color-paper);border-radius:50%;overflow:hidden;background:var(--color-paper-2);display:grid;place-items:center;isolation:isolate;pointer-events:none}.target-fill,.guess-fill{position:absolute;inset:0;background:var(--color-paper-2)}.target-fill{display:none}.guess-fill{display:none}.disk #disk-copy{position:relative;text-align:center;padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm);z-index:1;color:var(--color-ink)}#disk-copy span{font-size:var(--text-lg);color:var(--color-muted)}#disk-copy strong{font:700 clamp(1.8rem,4vw,2.5rem) var(--font-display);letter-spacing:-1px;line-height:1.05}.arena[data-phase=watch] .target-fill{display:block}.arena[data-phase=watch] #disk-copy{color:var(--color-ink);background:var(--color-paper);border-radius:var(--radius-sm);padding:var(--space-sm) var(--space-md)}.arena[data-phase=watch] #disk-copy span{font-size:var(--text-sm)}.arena[data-phase=watch] #disk-copy strong{font-size:2rem;font-variant-numeric:tabular-nums}.arena[data-phase=adjust] .guess-fill{display:block}.arena[data-phase=adjust] #disk-copy{display:none}.arena[data-phase=result] .target-fill,.arena[data-phase=result] .guess-fill,.arena[data-phase=finished] .target-fill,.arena[data-phase=finished] .guess-fill{display:block}.arena[data-phase=result] .guess-fill,.arena[data-phase=finished] .guess-fill{left:50%;border-left:2px solid var(--color-paper)}.arena[data-phase=result] #disk-copy,.arena[data-phase=finished] #disk-copy{background:var(--color-paper);border-radius:50%;width:118px;height:118px;gap:2px;justify-content:center;padding:0}.arena[data-phase=result] #disk-copy strong,.arena[data-phase=finished] #disk-copy strong{font-size:3.4rem}.arena[data-phase=result] #disk-copy span,.arena[data-phase=finished] #disk-copy span{font-size:var(--text-sm);order:2}.arena[data-phase=watch] .hue-wheel{opacity:.2}.arena[data-phase=result] .hue-wheel,.arena[data-phase=finished] .hue-wheel{opacity:.35}
#shade-wrap{width:58%;aspect-ratio:1;position:relative;pointer-events:auto;border:2px solid var(--color-ink);border-radius:4px}#shade{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}#shade-handle{position:absolute;left:75%;top:45%;height:20px;width:20px;transform:translate(-50%,-50%);border:3px solid var(--color-ink);box-shadow:0 0 0 2px var(--color-paper);border-radius:50%;pointer-events:none}#compare-labels{position:absolute;bottom:29px;left:0;right:0;display:flex;justify-content:space-around;gap:10px}#compare-labels span{background:var(--color-paper);color:var(--color-ink);font-size:12px;padding:4px 8px;border-radius:4px}.target-reference{position:absolute;right:0;top:15px;display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--color-paper);padding:5px;border-radius:10px;color:var(--color-muted);font-size:var(--text-sm)}#reference-color{height:42px;width:42px;display:block;border-radius:50%;border:2px solid var(--color-ink)}.countdown{height:4px;width:180px;margin:var(--space-sm) auto var(--space-md);background:var(--color-paper-3);overflow:hidden;border-radius:3px}.countdown span{display:block;height:100%;background:var(--color-accent);transform-origin:left}.game-actions{text-align:center;margin-top:var(--space-md);min-height:172px}.setup{display:flex;justify-content:center;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.difficulty{display:flex;border-radius:10px;background:var(--color-paper-2);padding:4px}.difficulty button{border:0;background:none;padding:var(--space-sm) var(--space-md);min-height:40px;border-radius:7px;color:var(--color-muted);font-size:var(--text-sm)}.difficulty button[aria-pressed=true]{background:var(--color-paper-3);color:var(--color-ink)}.quiet{background:none;border:0;padding:var(--space-sm);min-height:44px;color:var(--color-muted);font-size:var(--text-sm)}.quiet[aria-pressed=true]{color:var(--color-accent)}.primary{background:var(--color-accent);color:var(--color-accent-ink);border:0;border-radius:50px;min-height:60px;min-width:220px;padding:var(--space-md) var(--space-xl);font:700 var(--text-lg) var(--font-display);display:inline-flex;justify-content:center;align-items:center;gap:var(--space-xl);transition:transform var(--dur-micro) var(--ease-out)}.primary:disabled{background:var(--color-paper-3);color:var(--color-muted);opacity:.9}.primary span{font-size:1.4em}.hint{font-size:var(--text-sm);color:var(--color-muted);min-height:24px;margin:var(--space-md) 0 0}.personal-best{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);font-size:var(--text-sm);color:var(--color-muted);padding-top:var(--space-sm)}.personal-best strong{color:var(--color-ink);font-variant-numeric:tabular-nums;margin-left:var(--space-sm)}.storage-note{font-size:var(--text-sm);text-align:center;margin:0;min-height:20px;color:var(--color-muted)}.rules{max-width:660px;margin:0 auto var(--space-2xl);border-top:1px solid var(--color-rule);padding-top:var(--space-md);color:var(--color-muted)}summary{cursor:pointer;min-height:44px;padding:var(--space-sm) 0;color:var(--color-ink);font-size:var(--text-sm)}p{line-height:1.65}.rules p{max-width:65ch}#keyboard-controls{max-width:420px;margin:0 auto var(--space-md)}.keyboard-fields{display:grid;gap:var(--space-sm);padding:var(--space-sm) 0}.keyboard-fields label{display:grid;grid-template-columns:100px minmax(0,1fr);gap:var(--space-md);align-items:center;font-size:var(--text-sm)}input[type=range]{width:100%;accent-color:var(--color-accent);height:44px}#run-summary{padding:var(--space-md) 0 var(--space-lg)}.summary-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-md)}.summary-head h2{margin:0;font-size:var(--text-lg)}#total-score{font:700 2rem var(--font-display)}#history{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-sm)}.history-round{display:flex;flex-direction:column;gap:var(--space-sm);text-align:center;font-size:var(--text-sm);color:var(--color-muted)}.history-colors{display:grid;grid-template-columns:1fr 1fr;height:55px;border-radius:var(--radius-sm);overflow:hidden}.history-colors i{display:block}.history-round strong{color:var(--color-ink)}.paper{max-width:660px;margin:var(--space-2xl) auto 5rem}.paper h1{font-size:var(--text-display);letter-spacing:-1.5px}.paper h2{margin-top:var(--space-2xl)}.paper p{color:var(--color-muted)}footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-md);font-size:var(--text-sm);color:var(--color-muted);padding:var(--space-lg) 0 var(--space-xl)}footer div{display:flex;gap:var(--space-lg)}footer a{min-height:44px;display:inline-flex;align-items:center}
.memory-board{width:min(78vw,344px);aspect-ratio:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}.memory-pad{border:0;position:relative;min-height:100px;transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out);opacity:.7}.memory-pad span{position:absolute;display:grid;place-items:center;min-height:34px;min-width:34px;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--color-ink);background:var(--color-paper);border-radius:50%;font-weight:600}.pad-1{background:var(--color-red);border-radius:100% 15px 15px 15px}.pad-2{background:var(--color-yellow);border-radius:15px 100% 15px 15px}.pad-3{background:var(--color-green);border-radius:15px 15px 15px 100%}.pad-4{background:var(--color-blue);border-radius:15px 15px 100% 15px}.memory-pad.lit{opacity:1;transform:scale(.94);box-shadow:inset 0 0 0 5px var(--color-ink)}.memory-pad.wrong{outline:4px solid var(--color-error);outline-offset:3px}.memory-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:94px;width:94px;background:var(--color-paper);border:10px solid var(--color-paper);border-radius:50%;display:grid;place-items:center;pointer-events:none;font:600 2.4rem var(--font-display)}.arena[data-phase=paused] .play-space{visibility:hidden}.arena[data-phase=watch] .stage-title h1,.arena[data-phase=adjust] .stage-title h1,.arena[data-phase=result] .stage-title h1{font-size:clamp(1.65rem,4vw,2.4rem)}.arena[data-phase=result] .disk,.arena[data-phase=finished] .disk{animation:reveal var(--dur-short) var(--ease-out)}@keyframes reveal{from{opacity:.2;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media(hover:hover){.quiet:hover,.site-header nav a:hover{color:var(--color-ink)}.primary:hover:not(:disabled){transform:translateY(-2px)}.memory-pad:hover:not(:disabled){opacity:1}}@media(min-width:640px){.arena{margin-top:var(--space-lg)}.stage-title{min-height:120px}.game-actions{margin-top:var(--space-lg)}}@media(max-width:420px){.shell{padding:0 var(--space-md)}.site-header{min-height:72px}.wordmark{font-size:23px}.wordmark span{display:none}.site-header nav a{padding:var(--space-sm) 12px}.hud{gap:var(--space-sm)}.hud i{width:17px}.stage-title{min-height:102px}.stage-title p{font-size:var(--text-sm)}.disk{inset:28px;border-width:7px}.wheel-shell{width:min(82vw,320px)}.target-reference{right:-3px;top:0}.setup{gap:var(--space-sm)}.primary{min-height:56px}.game-actions{min-height:156px}.memory-center{height:80px;width:80px}.personal-best{gap:var(--space-sm)}footer{font-size:13px}.arena[data-phase=result] #disk-copy,.arena[data-phase=finished] #disk-copy{width:94px;height:94px}.arena[data-phase=result] #disk-copy strong,.arena[data-phase=finished] #disk-copy strong{font-size:2.7rem}#compare-labels{bottom:17px}#compare-labels span{font-size:12px;padding:4px 6px}}
#compare-labels{bottom:40px;left:30px;right:30px;justify-content:space-between;gap:6px}
@media(max-width:420px){#compare-labels{bottom:34px;left:28px;right:28px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.challenge-note{font-size:var(--text-sm);color:var(--color-muted);max-width:52ch;margin:0 auto var(--space-md);line-height:1.5}
.share-result{text-align:center;border-top:1px solid var(--color-rule);margin-top:var(--space-xl);padding-top:var(--space-md)}
.share-result p{font-size:var(--text-sm);color:var(--color-muted)}
#share-status{min-height:1.5em}.share-result .primary{font-size:var(--text-base);min-height:52px}
#share-fallback{display:block;text-align:left;font-size:var(--text-sm);line-height:1.5}
#share-text{display:block;width:100%;resize:vertical;font:inherit;color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:var(--space-md);margin-top:var(--space-sm)}
#share-text:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.difficulty button:disabled,.quiet:disabled{opacity:.55;cursor:not-allowed}
.primary:disabled{cursor:not-allowed}
.setup{flex-wrap:wrap}.summary-head{flex-wrap:wrap}
/* The run is over: replace the last-round wheel with a compact results screen. */
body:not([data-mode="memory"]) .arena[data-phase="finished"] .play-space{display:none}
body:not([data-mode="memory"]) .arena[data-phase="finished"] .stage-title{min-height:0;padding:var(--space-xl) 0}
body:not([data-mode="memory"]) .arena[data-phase="finished"] .game-actions{display:flex;flex-direction:column;min-height:0;margin-top:0}
.arena[data-phase="finished"] .game-actions .action-line{order:0}
.arena[data-phase="finished"] .game-actions .hint{order:1}
.arena[data-phase="finished"] .game-actions .setup{order:2;margin-top:var(--space-md);margin-bottom:0}
.arena[data-phase="finished"] .challenge-note{display:none}