@font-face{font-family:Fraunces;src:url('./assets/atelier-fraunces.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:DM;src:url('./assets/manner-dm.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--paper:#fcf8f5;--ink:#274c42;--muted:#59685e;--glass:#c9dfd3;--line:#274c4230;--white:#fffdf8;--pink:#e9bdb0;font-family:DM,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button:focus-visible,summary:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #aa532c;outline-offset:5px}button{color:inherit}button,a{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}h1,h2,p{margin:0}[hidden]{display:none!important}.game-shell{max-width:1064px;margin:auto;padding:20px 32px 24px}.brand-row{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:13px;gap:20px}.brand-logo{display:block;width:120px;flex-shrink:0}.brand-logo img{display:block;width:100%;height:auto;object-fit:contain}.edition{font-size:12px;letter-spacing:.16em}.round-length{font-size:13px}.intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:28px 0 24px}h1{font:500 clamp(2.3rem,4.5vw,3.5rem)/1.08 Fraunces,Georgia,serif;letter-spacing:-.055em}h1 em{display:block;font-family:Georgia,serif;font-weight:400;letter-spacing:-.06em}.intro p{font-size:16px;line-height:1.65;max-width:285px}.game{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--glass)}.scoreboard{display:flex;gap:38px;align-items:center;position:relative;z-index:2;padding:17px 28px;border-bottom:1px solid var(--line);background:#ffffff26}.stat{display:flex;flex-direction:column;min-width:78px}.stat>span{font-size:12px;letter-spacing:.12em;margin-bottom:4px}.stat strong{font-size:27px;line-height:1.1;font-weight:500;font-variant-numeric:tabular-nums}.stat b{font-weight:500}.stat small{font-size:15px;margin-left:3px}.coverage-stat{position:relative;flex:1}.progress-track{position:absolute;height:4px;background:#274c421c;border-radius:4px;left:96px;right:10px;bottom:11px;overflow:hidden}.progress-track i{height:100%;width:0;display:block;background:var(--ink);transition:width .1s}.icon-button{display:grid;place-content:center;width:42px;height:42px;background:transparent;border:1px solid var(--line);border-radius:50%;font-size:18px;flex-shrink:0}.stage{height:370px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 54% 47%,#e6eee0 0,transparent 60%)}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.stage-note{position:absolute;top:21px;left:24px;max-width:150px;font-size:11px;line-height:1.6;letter-spacing:.13em;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;padding:28px;background:linear-gradient(90deg,#d3e3d7 16%,#d3e3d7ec 39%,#d3e3d700 72%);pointer-events:none}.overlay>div{pointer-events:auto;width:min(340px,100%)}.card-kicker{font-size:11px;letter-spacing:.13em;display:block;margin-bottom:16px}h2{font:500 37px/1.05 Fraunces,Georgia,serif;letter-spacing:-.04em}.overlay p{font-size:15px;line-height:1.6;margin:18px 0;max-width:28ch}.primary{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:16px 20px;min-height:54px;min-width:228px;border:0;background:var(--ink);border-radius:8px;color:var(--white);font-size:15px}.primary:hover{background:#163d31}.primary span{font-size:22px;line-height:1}.feedback{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:14px;background:var(--ink);color:var(--white);padding:9px 16px;border-radius:30px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}.feedback.show{opacity:1}.game-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:10px 24px;background:#ffffff32;border-top:1px solid var(--line)}.game-bottom p{font-size:13px;display:flex;align-items:center;gap:10px}.control-dot{width:7px;height:7px;background:var(--ink);border-radius:50%;flex-shrink:0}.text-button{border:0;background:transparent;font-size:14px;min-height:40px;white-space:nowrap}.text-button span{margin-left:12px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:20px}fieldset{margin:0;padding:0;border:0;display:flex;align-items:center;gap:6px}legend{float:left;font-size:13px;padding:0;margin-right:12px}fieldset label{font-size:13px;cursor:pointer;padding:10px 12px;border:1px solid transparent;border-radius:30px}fieldset label:has(input:checked){background:var(--ink);color:var(--white)}fieldset label:has(input:focus-visible){outline:3px solid #aa532c;outline-offset:3px}fieldset input{position:absolute;opacity:0;width:1px;height:1px}fieldset:disabled label{opacity:.5;cursor:default}footer p{font:italic 16px/1.4 Georgia,serif;max-width:26ch;text-align:right}.keyboard-help{font-size:13px;margin-top:15px;color:var(--muted)}.keyboard-help summary{cursor:pointer;width:max-content;padding:5px 0}.keyboard-help p{line-height:1.6;margin-top:8px;max-width:65ch}.result-score{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}.result-score b{font:500 64px/1 Fraunces,Georgia,serif;letter-spacing:-.07em}.result-score span{font-size:18px}.overlay .result-detail{font-size:13px;margin:10px 0 17px}.overlay .result-card h2{font-size:29px}.overlay .result-card p{margin:10px 0}.result-card .card-kicker{margin-bottom:8px}.result-card .primary{margin-top:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.time-stat.urgent strong{color:#9c3c26}
@media(min-width:1000px) and (min-height:850px){.game-shell{padding-top:32px}.intro{margin:35px 0}.stage{height:440px}}
@media(max-width:640px){.game-shell{padding:16px 16px 22px}.brand-row{padding:0 4px 14px}.brand-logo{width:100px}.round-length{display:none}.edition{font-size:10px;letter-spacing:.1em}.intro{display:block;margin:24px 4px 20px}h1{font-size:38px;line-height:1.06}h1 em{display:inline}.intro p{font-size:14px;line-height:1.5;margin-top:12px;max-width:none}.intro p br{display:none}.scoreboard{gap:15px;padding:14px 17px}.stat{min-width:65px}.stat>span{font-size:10px;letter-spacing:.08em}.stat strong{font-size:24px}.progress-track{left:0;right:6px;bottom:-8px;height:3px}.precision-stat{min-width:70px}.icon-button{width:36px;height:36px}.stage{height:350px}.stage-note{top:16px;left:17px;font-size:10px;max-width:110px}.overlay{padding:22px;align-items:flex-end;background:linear-gradient(0deg,#d3e3d7 0%,#d3e3d7f2 35%,#d3e3d720 80%)}.overlay>div{width:100%}.start-card h2{font-size:32px}.start-card h2 br{display:none}.card-kicker{font-size:10px;margin-bottom:8px}.overlay p{font-size:14px;margin:10px 0 14px;max-width:33ch}.primary{width:100%;font-size:15px;min-height:48px;padding:13px 17px}.game-bottom{padding:8px 15px;gap:5px;flex-wrap:wrap}.game-bottom p{font-size:12px;line-height:1.5}.control-dot{display:none}.text-button{font-size:12px;min-height:34px;margin-left:auto}footer{display:block;margin-top:14px}fieldset{justify-content:center;gap:0}legend{font-size:12px;margin-right:6px}fieldset label{font-size:12px;padding:10px}footer p{font-size:14px;text-align:center;max-width:none;margin-top:14px}.keyboard-help{font-size:12px}.result-score b{font-size:53px}.result-card .primary{margin-top:12px}.feedback{bottom:14px;font-size:12px;padding:8px 12px}.game{border-radius:16px}.overlay:has(.result-card:not([hidden])),.overlay:has(.pause-card:not([hidden])){align-items:center;background:#d3e3d7ed}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Navigation back to the salon; the game keeps its isolated styles. */
.brand-logo{text-decoration:none}.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:inherit;text-decoration:none;text-underline-offset:4px}.back-link:hover{text-decoration:underline}.brand-logo:focus-visible,.back-link:focus-visible{outline:3px solid var(--ink);outline-offset:5px}@media(max-width:640px){.brand-row .edition{display:none}.back-link{margin-left:auto;font-size:13px}}

/* Match the salon's lighter control surfaces. */
.primary{background:#c9e3dc;color:#33302b;border:1px solid #6b7068;border-radius:999px;box-shadow:inset 0 1px 0 #fffdfb;min-height:48px}.primary:hover{background:#b5d8cf}
.icon-button{background:#fffdfb;border-color:#6b7068;min-width:44px;min-height:44px}.text-button{min-height:44px}
fieldset label{min-height:44px;display:inline-flex;align-items:center}fieldset label:has(input:checked){background:#fffdfb;color:#33302b;box-shadow:inset 0 0 0 2px #6b7068}
