@font-face{font-family:Barlow;src:url(./fonts/barlow-condensed-800.woff2)}@font-face{font-family:Manrope;src:url(./fonts/manrope-variable.woff)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#272b2e;color:#f4f1e8;font-family:Manrope,sans-serif;overscroll-behavior:none}::selection{background:#f2dab0;color:#242925}#app{position:relative;height:100svh;max-width:1500px;margin:auto;overflow:hidden;user-select:none;-webkit-user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}#app:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0005,transparent 22%,transparent 75%,#0009)}header{position:absolute;top:max(24px,env(safe-area-inset-top));left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;filter:drop-shadow(0 1px 4px #0007)}.wordmark{font:800 40px/.8 Barlow,sans-serif;letter-spacing:-.03em}.wordmark span{display:block;font:700 11px Manrope,sans-serif;letter-spacing:0;margin-top:9px}nav{display:flex;gap:6px}button{font:700 12px Manrope,sans-serif;color:#f4f1e8;border:0;background:#20262df5;border-radius:24px;padding:12px 16px;min-height:44px;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}button:hover{background:#3e4852}button:focus-visible{outline:3px solid #f2dab0;outline-offset:4px}button[hidden]{display:none}.tally{position:absolute;top:104px;left:28px;display:flex;flex-direction:column;gap:6px;pointer-events:none;text-shadow:0 2px 5px #000c}.tally div{display:flex;align-items:baseline;gap:6px}.tally strong{font:800 40px/1 Barlow,sans-serif;font-variant-numeric:tabular-nums}.tally span{font-size:12px;font-weight:700}#help-copy{display:none;position:absolute;top:82px;right:22px;max-width:290px;padding:16px;background:#20262d;border-radius:12px;font-size:13px;line-height:1.6;pointer-events:none}#help-copy span{display:block;margin-top:10px;font-size:12px}#app[data-help=true] #help-copy{display:block}footer{position:absolute;bottom:max(22px,env(safe-area-inset-bottom));left:18px;right:18px;text-align:center;pointer-events:none;text-shadow:0 1px 5px #000a}h1{font:700 14px/1.5 Manrope,sans-serif;margin:0 0 12px}footer p{display:none;font-size:14px;margin:0;line-height:1.5}#control,#retry{display:block;margin:0 auto;min-width:220px;min-height:48px;touch-action:none;transition:background .1s}#control{color:#f4f1e8;background:#20262deb;border:1px solid #f4f1e84d}#app[data-queued=true] #control{background:#f1e8d8;color:#24272b;border-color:transparent}#retry{background:#f1e8d8;color:#24272b;border-radius:12px;margin-top:18px;font-size:14px}#control[hidden],#retry[hidden]{display:none}#retry:hover{background:#fff6e7}#app:not([data-phase=ready]):not([data-phase=over]):not([data-paused=true]) #instruction{display:none}#feedback{position:absolute;top:40%;left:10%;right:10%;text-align:center;font:800 25px Barlow,sans-serif;color:#fff4d7;opacity:0;transform:translateY(5px);transition:opacity .12s,transform .12s;pointer-events:none;text-shadow:0 2px 7px #000a}#feedback.show{opacity:1;transform:translateY(0)}#app[data-phase=over] footer{padding:22px 16px;background:#20262df5;border-radius:14px;max-width:380px;margin:auto}#app[data-phase=over] h1{font:800 30px/1.1 Barlow,sans-serif}#app[data-phase=over] #hint{display:block}#app[data-phase=over] #rhythm{display:none}@media(max-width:600px){header{left:18px;right:18px}.tally{left:18px;top:96px}.wordmark{font-size:36px}button{padding:10px 13px}footer{bottom:max(20px,env(safe-area-inset-bottom))}}@media(max-height:650px){header{top:16px}.tally{top:86px}.tally strong{font-size:32px}footer{bottom:12px}}@media(prefers-reduced-motion:reduce){#feedback,#control{transition:none}}#app[data-paused=true] #instruction{display:block}#control{min-height:52px;opacity:.85}#app[data-phase=over] #points{display:none}#help-copy{z-index:3;max-width:min(290px,calc(100% - 36px))}#feedback{top:54%}@media(max-width:360px){header{left:12px;right:12px}nav{gap:3px}nav button{padding:9px;min-width:44px}.wordmark{font-size:30px}}#app[data-taught=true]:not([data-phase=over]):not([data-paused=true]) #instruction{display:none}#app[data-taught=true] #control:not(:focus-visible){opacity:0}#app[data-review=true] footer{visibility:hidden}#campaign-panel[hidden],#score-form[hidden],#campaign-board[hidden]{display:none}#campaign-panel{pointer-events:auto;text-shadow:none;margin:12px auto 0;max-width:380px}#campaign-panel p{display:block;font-size:12px;margin:0 0 10px}#campaign-start{background:#f1e8d8;color:#24272b;min-width:220px;font-size:14px}#campaign-panel label{display:block;text-align:left;font-size:12px;margin-bottom:6px}.score-fields{display:flex;gap:8px}#player-name{min-width:0;flex:1;background:#f4f1e8;color:#20262d;border:1px solid #aeb6bc;border-radius:8px;padding:10px;font:16px Manrope,sans-serif;user-select:text;-webkit-user-select:text}#player-name:focus-visible,#campaign-board:focus-visible{outline:3px solid #f2dab0;outline-offset:3px}#score-form small{display:block;text-align:left;font-size:10px;line-height:1.5;margin-top:6px;color:#d2d8db}#save-score{border:1px solid #75818b;border-radius:8px;padding:10px;white-space:nowrap}#campaign-board{display:inline-flex;align-items:center;min-height:44px;color:#f4e0bd;font-size:12px;text-decoration:underline}button:disabled{cursor:wait;opacity:.6}#app[data-campaign-gate=true] footer{padding:20px 16px;background:#20262df5;border-radius:14px;max-width:380px;margin:auto}#app[data-campaign-gate=true] #instruction{display:block}#app[data-campaign-gate=true] #control{display:none}#app[data-connected=true][data-phase=over] footer{max-height:calc(100svh - 105px);overflow-y:auto;pointer-events:auto}