:root{color-scheme:light;--ink:#23483f;--cream:#fff4d6;--coral:#e97861;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}*{box-sizing:border-box}body{margin:0;background:#173d38;color:var(--ink);font-family:'Trebuchet MS',Arial,sans-serif}button,select{font:inherit}button{cursor:pointer;min-height:48px;border:2px solid var(--ink);border-radius:12px;background:var(--cream);color:var(--ink);font-weight:800;padding:10px 18px;box-shadow:0 3px 0 #183e3830}button:hover{filter:brightness(1.04);transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible,select:focus-visible{outline:4px solid #ec9b51;outline-offset:3px}button.primary{background:var(--ink);color:var(--cream)}button.coral{background:var(--coral)}button:disabled{opacity:.45;cursor:default}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}#game{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden;margin:auto;isolation:isolate}canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}#screen{position:absolute;inset:0;pointer-events:none;overflow:auto}#screen>*{pointer-events:auto}#hud{position:absolute;top:max(10px,env(safe-area-inset-top));left:calc(14px + var(--safe-left));right:calc(14px + var(--safe-right));display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff2d6ed;border:2px solid #385c4f;border-radius:16px;padding:8px 10px 8px 17px;box-shadow:0 4px 0 #234b3e1c}.event-label small{display:block;font-size:10px;letter-spacing:1.7px;font-weight:800}.event-label strong{font-size:23px;letter-spacing:-.7px}#stat{font-size:18px;font-weight:bold;display:flex;align-items:center;gap:9px}#stat .dots{letter-spacing:4px;color:#df765d;font-size:22px}.hud-right{display:flex;gap:14px;align-items:center}#clock{font-size:26px;font-variant-numeric:tabular-nums}#pause{padding:0;width:48px;background:#ead9b0}#controls{position:absolute;inset:0;pointer-events:none;touch-action:none}#stick{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:calc(28px + var(--safe-left));width:136px;height:136px;pointer-events:auto;touch-action:none;border:2px solid #f8f0c994;background:#1e54474d;border-radius:50%;user-select:none}#stick-ring{position:absolute;inset:17%;border:1px dashed #fff6d59c;border-radius:50%}#knob{position:absolute;top:43px;left:43px;width:46px;height:46px;border:3px solid #fff0bb;border-radius:50%;background:#f5ddb8bd;box-shadow:0 3px 0 #173b3a30}#stick small{position:absolute;bottom:5px;width:100%;font-size:9px;text-align:center;color:#fff3ce;font-weight:bold;letter-spacing:1px;pointer-events:none}#action{position:absolute;right:calc(32px + var(--safe-right));bottom:calc(28px + env(safe-area-inset-bottom));width:98px;height:98px;min-height:72px;pointer-events:auto;touch-action:none;border:4px solid #fff2c3;border-radius:50%;background:#edbf64;color:#23483f;font-size:17px;box-shadow:0 7px 0 #26483c70;user-select:none}#action.held{transform:translateY(5px);background:#fff2ac;box-shadow:0 2px 0 #26483c70}#keyboard{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;color:#fff0c3;opacity:.8}.mirrored #stick{left:auto;right:calc(28px + var(--safe-right))}.mirrored #action{right:auto;left:calc(32px + var(--safe-left))}.large #stick{width:156px;height:156px}.large #knob{left:53px;top:53px}.large #action{width:112px;height:112px}.hero{position:absolute;top:7%;left:50%;transform:translateX(-50%);text-align:center;width:94%}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:900}.logo{font-size:clamp(62px,10vw,112px);line-height:.9;letter-spacing:-8px;margin:15px 0 8px;color:#fff1c2;-webkit-text-stroke:3px var(--ink);text-shadow:0 6px 0 var(--ink);transform:rotate(-3deg)}.hero p{font-size:17px;font-weight:bold;margin:18px 0}.home-actions{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:90%}.tag{background:#f4e7b9;border:1px solid #516d52;border-radius:20px;padding:6px 15px;font-size:11px;font-weight:bold;letter-spacing:1.3px}.panel{width:min(760px,92%);margin:5vh auto;padding:24px 30px;border:3px solid var(--ink);border-radius:24px;background:#fff2d7f5;box-shadow:0 9px 0 #214b3e35}.panel h1{font-size:36px;letter-spacing:-1.5px;margin:8px 0}.panel h2{margin:8px 0;font-size:29px;letter-spacing:-1px}.panel p{line-height:1.45}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.select-panel{width:min(1120px,96%);margin:3vh auto;background:#fff3d9f5;text-align:center;padding:16px}.cast{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:14px 0}.cast button{padding:6px 4px;min-width:0;background:#f5e6bd}.cast button.selected{outline:3px solid #df7759;background:#fff7e0}.cast canvas{position:relative;width:100%;height:85px;object-fit:contain}.cast strong{display:block}.cast small{font-size:11px;font-weight:normal}.options{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:14px}.options select{padding:9px;border:2px solid var(--ink);border-radius:10px;background:#fff6df;color:var(--ink)}.brief{max-width:690px}.brief .number{float:right;font-size:70px;line-height:1;font-weight:900;color:#debd80}.brief ol{padding-left:22px;line-height:1.5}.brief li{padding-bottom:8px}.brief .control{background:#e5e6c1;padding:12px;border-radius:12px;font-weight:bold;text-align:center}#modal,#rotate{position:absolute;inset:0;z-index:5;background:#153e3ba8;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto}#modal .panel{margin:auto;max-width:640px}#rotate{z-index:9;background:#234b43f5;text-align:center;color:#fff2cf}#rotate b{font-size:80px}.joke-answers{display:grid;gap:9px;margin-top:14px}.joke-answers button{text-align:left;min-height:52px}.joke-answers button.correct{background:#accb91}.joke-answers button.wrong{background:#ecc398}.subtle{font-size:12px;opacity:.75}.results{max-width:800px}.result-row{display:grid;grid-template-columns:30px 1fr 95px 65px;gap:10px;padding:8px;border-bottom:1px solid #aab190;font-size:14px;align-items:center}.result-row.you{background:#f0cb79;border-radius:8px}.result-row small{font-size:11px}.result-row b:last-child{text-align:right}.result-head{font-size:10px;letter-spacing:1px;font-weight:bold}.setting{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:13px 0;font-size:16px}.setting input{width:24px;height:24px;accent-color:#3b7761}.countdown{text-align:center;color:#fff2cc}.countdown b{font-size:100px;text-shadow:0 4px 0 #14352b}.countdown p{font-size:20px}.score-photo{height:98px;position:relative}.score-photo canvas{position:relative;width:100%;height:98px}.save-note{position:absolute;bottom:4px;left:8px;font-size:10px;color:#fff1cf}.practice-grid{display:grid;gap:9px}.practice-grid button{text-align:left;display:flex;justify-content:space-between}.pause-copy{font-size:16px}.hint{padding:8px;border-radius:8px;background:#e4e7c6}.tiny{font-size:11px}
@media(max-height:500px) and (orientation:landscape){.hero{top:5%}.logo{font-size:74px;margin:9px 0;letter-spacing:-6px}.hero p{font-size:14px;margin:13px 0}.eyebrow{font-size:10px}.home-actions{bottom:4%}.panel{margin:2vh auto;padding:15px 22px}.panel h1{font-size:29px;margin:5px 0}.panel h2{font-size:24px}.panel p{margin:8px 0;font-size:14px}.brief li{padding-bottom:3px;font-size:14px}.brief ol{margin:8px 0}.brief .control{padding:7px;font-size:13px}.actions{margin-top:10px}.select-panel{padding:10px 18px}.cast{margin:8px 0}.cast canvas{height:66px}.cast strong{font-size:13px}.cast small{font-size:10px}.cast button{padding:3px}.options{font-size:12px;gap:8px}.options select{padding:6px}.result-row{padding:5px 8px;font-size:13px}.results h1{font-size:25px}.score-photo{height:68px}.score-photo canvas{height:68px}#hud{padding:5px 7px 5px 12px;top:7px}.event-label strong{font-size:18px}.event-label small{font-size:8px}#stat{font-size:14px;gap:5px}#stat .dots{font-size:17px;letter-spacing:2px}#clock{font-size:22px}#stick{width:116px;height:116px;bottom:12px;left:22px}#knob{left:33px;top:33px}#action{width:82px;height:82px;bottom:22px;right:26px;font-size:14px}.joke-answers{gap:8px;margin-top:10px}.joke-answers button{padding:8px 12px}.large #knob{left:53px;top:53px}.setting{margin:8px 0;font-size:14px}.tag{font-size:9px}.score-photo{display:none}}
@media(orientation:portrait){.cast{grid-template-columns:repeat(4,1fr)}.panel{margin:5vh auto}.hero{top:13%}.logo{font-size:90px}.home-actions{bottom:12%}.options{flex-direction:column}.event-label strong{font-size:16px}#stat{font-size:12px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.logo{transform:none}}

@media(max-height:500px) and (orientation:landscape){.final-results .score-photo{display:block;height:60px}.final-results .score-photo canvas{height:60px}.final-results .result-row{padding:3px 8px;font-size:12px}.final-results h1{font-size:24px}.final-results p{margin:5px 0}.final-results{padding:12px 22px}.final-results .actions{margin-top:8px}}

/* Touch HUD stays outside the illustrated action; long action labels fit their circle. */
#action{padding:0}
@media(hover:none) and (pointer:coarse){#keyboard{display:none}}