:root{color-scheme:light;font-family:Arial Narrow,Helvetica Neue,Arial,sans-serif;--cream: #f3e8cf;--paper: #fff8e8;--coral: #f1645b;--blue: #1746b8;--ink: #171622;--gold: #f6ba48;--shadow: rgba(23, 22, 34, .28);--sand: #ead8b8;--danger: #bd2d28}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--cream);color:var(--ink)}button{font:inherit}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}#app{position:relative;isolation:isolate;background:var(--sand)}#game{display:block;width:100%;height:100%;touch-action:none}#hud{position:absolute;z-index:20;inset:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) auto max(12px,env(safe-area-inset-left));min-height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;pointer-events:none}.brand-block,.readouts,.hud-actions{display:flex;align-items:center}.brand-block{gap:10px;letter-spacing:.12em}.brand-block strong{display:block;font-size:13px}.brand-block small{display:block;margin-top:3px;font-size:9px;opacity:.65;letter-spacing:.16em}.route-trace{display:flex;gap:3px;margin-top:5px}.route-trace span{display:flex;align-items:center;gap:3px;min-width:27px;padding:2px 4px;border:1px solid rgba(23,22,34,.24);background:#fff8e86b}.route-trace b{font:800 7px/1 ui-monospace,monospace}.route-trace small{display:block;margin:0;font:800 7px/1 ui-monospace,monospace;opacity:.55}.route-trace span.sealed{border-color:var(--blue);background:var(--gold);box-shadow:2px 2px 0 var(--coral)}.route-trace span.sealed small{color:var(--blue);opacity:1}.brand-mark{width:29px;height:29px;display:block;background:linear-gradient(90deg,transparent 43%,var(--ink) 44% 56%,transparent 57%),linear-gradient(0deg,transparent 43%,var(--ink) 44% 56%,transparent 57%),var(--coral);box-shadow:5px 5px 0 var(--blue);transform:rotate(-3deg)}.readouts{gap:5px;padding:5px;background:#fff8e8e6;border:1px solid rgba(23,22,34,.2);box-shadow:4px 5px #17162224}.readout{min-width:76px;padding:2px 10px;border-right:1px solid rgba(23,22,34,.18)}.readout:last-child{border-right:0}.readout span{display:block;font-size:8px;letter-spacing:.17em;opacity:.6}.readout strong{display:block;margin-top:1px;font:700 16px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace}.readout.warning strong{color:var(--danger);animation:strain .55s steps(2) infinite}@keyframes strain{50%{transform:translateY(-2px)}}.hud-actions{justify-content:flex-end;gap:6px;pointer-events:auto}.icon-button{min-width:38px;height:36px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:10px;font-weight:800;cursor:pointer}.icon-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.icon-button[aria-pressed=true]{background:var(--gold)}#objective{position:absolute;z-index:15;top:max(82px,calc(env(safe-area-inset-top) + 76px));left:50%;width:min(540px,calc(100% - 32px));transform:translate(-50%);padding:9px 14px;background:var(--ink);color:var(--paper);text-align:center;font-size:11px;font-weight:700;letter-spacing:.035em;box-shadow:5px 5px 0 var(--coral);pointer-events:none;transition:opacity .2s,transform .2s}#objective.route-pulse{background:var(--blue);box-shadow:5px 5px 0 var(--gold);animation:route-beat .72s cubic-bezier(.16,1,.3,1)}@keyframes route-beat{0%{transform:translate(-50%) scale(.96)}45%{transform:translate(-50%) scale(1.025)}to{transform:translate(-50%) scale(1)}}#objective.hidden{opacity:0;transform:translate(-50%,-8px)}#grab-indicator{position:absolute;z-index:16;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:10px auto;gap:1px 8px;padding:9px 12px;border-left:4px solid var(--coral);background:#fff8e8f0;box-shadow:4px 4px #1716223d;opacity:0;transform:translateY(10px);transition:opacity .15s,transform .15s;pointer-events:none}#grab-indicator.visible{opacity:1;transform:none}#grab-indicator span{grid-row:1 / 3;align-self:center;width:8px;height:28px;background:var(--blue)}#grab-indicator strong{font-size:10px;letter-spacing:.12em}#grab-indicator small{font-size:8px;opacity:.6}.overlay{position:absolute;z-index:40;inset:0;display:grid;place-items:center end;padding:92px max(5vw,34px) 28px;background:linear-gradient(90deg,#f3e8cf14 0 34%,#f3e8cfdb 70%);backdrop-filter:blur(2px)}.overlay[hidden]{display:none}.overlay.compact{place-items:center;background:#17162278;backdrop-filter:blur(7px)}.title-card,.panel{position:relative;width:min(510px,100%);padding:clamp(24px,5vw,46px);background:var(--paper);border:2px solid var(--ink);box-shadow:-12px 12px 0 var(--blue),-16px 16px 0 var(--coral)}.title-card:before,.panel:before{content:"";position:absolute;inset:8px;border:1px solid rgba(23,22,34,.25);pointer-events:none}.eyebrow{margin:0 0 10px;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.2em}h1{margin:0;line-height:.78;letter-spacing:-.07em}h1 span,h1 em{display:block;font-style:normal}h1 span{color:var(--coral);font-size:clamp(52px,11vw,94px)}h1 em{margin-left:42px;color:var(--blue);font-size:clamp(52px,11vw,94px)}.title-card>p:not(.eyebrow){max-width:46ch;margin:25px 0 20px;font:16px/1.5 Georgia,serif}.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0;border:1px solid var(--ink)}.rules-grid span{padding:10px;border-right:1px solid var(--ink);font-size:9px;letter-spacing:.08em;text-align:center}.rules-grid span:last-child{border-right:0}.rules-grid b{display:block;font:800 20px/1 ui-monospace,monospace}.primary-button,.secondary-button{position:relative;z-index:1;min-height:46px;border:2px solid var(--ink);border-radius:0;font-size:11px;font-weight:900;letter-spacing:.12em;cursor:pointer}.primary-button{width:100%;background:var(--coral);box-shadow:5px 5px 0 var(--ink)}.secondary-button{width:100%;margin-top:12px;background:var(--paper)}.title-card>small{display:block;margin-top:18px;text-align:center;font-size:9px;letter-spacing:.08em;opacity:.6}.panel{width:min(410px,100%);text-align:center;box-shadow:9px 9px 0 var(--coral)}.panel h2{margin:0 0 12px;color:var(--blue);font:800 clamp(35px,8vw,56px)/1 Georgia,serif}.panel>p:not(.eyebrow){margin:0 0 22px;font:15px/1.5 Georgia,serif}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:24px;border-block:1px solid var(--ink)}.result-grid span{padding:12px 4px;border-right:1px solid var(--ink);font-size:8px;letter-spacing:.1em}.result-grid span:last-child{border-right:0}.result-grid strong{display:block;margin-top:5px;font:800 15px/1 ui-monospace,monospace;overflow-wrap:anywhere}.help-panel{position:absolute;z-index:35;top:84px;right:16px;width:min(290px,calc(100% - 32px));padding:16px;background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--coral)}.help-panel[hidden]{display:none}.help-panel div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed rgba(23,22,34,.3);font-size:10px;letter-spacing:.08em}.help-panel p{margin:12px 0 0;font:12px/1.45 Georgia,serif}#touch-controls{display:none;position:absolute;z-index:25;inset:auto 0 max(12px,env(safe-area-inset-bottom));padding:0 max(14px,env(safe-area-inset-left));justify-content:space-between;align-items:end;pointer-events:none}#stick-zone{position:relative;width:104px;height:104px;border:2px solid rgba(23,22,34,.65);border-radius:50%;background:#fff8e86b;pointer-events:auto;touch-action:none}#stick-zone span{position:absolute;left:50%;bottom:8px;transform:translate(-50%);font-size:8px;letter-spacing:.14em}#stick-knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px;border:2px solid var(--ink);border-radius:50%;background:var(--coral);box-shadow:3px 3px 0 var(--blue)}.touch-actions{display:grid;grid-template-columns:repeat(3,54px);gap:7px;align-items:end;pointer-events:auto}.touch-actions button{width:54px;height:54px;padding:0;border:2px solid var(--ink);border-radius:50%;background:#fff8e8db;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:10px;font-weight:900;touch-action:manipulation}.touch-actions button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}#hop-button{width:62px;height:62px;margin:-4px;background:var(--blue);color:var(--paper)}@media(pointer:coarse),(max-width:760px){#touch-controls{display:flex}#grab-indicator{bottom:132px}#hud{grid-template-columns:1fr auto;gap:7px}#seed-label{display:none}.readouts{position:absolute;top:66px;left:0}.readout{min-width:67px;padding-inline:8px}#objective{top:max(126px,calc(env(safe-area-inset-top) + 118px));font-size:10px}.title-card{padding:25px 22px}.title-card:before,.panel:before{inset:6px}.title-card>p:not(.eyebrow){font-size:14px}.overlay{padding-top:142px}}@media(max-width:520px){.brand-mark{width:24px;height:24px}.brand-block strong{font-size:11px}.hud-actions{gap:4px}.icon-button{min-width:34px;height:33px}#sound-button{font-size:8px}.readout{min-width:60px}.readout strong{font-size:14px}.rules-grid span{padding:8px 3px}.rules-grid b{font-size:16px}.title-card{box-shadow:8px 8px 0 var(--blue),11px 11px 0 var(--coral)}.touch-actions{grid-template-columns:repeat(3,48px);gap:5px}.touch-actions button{width:48px;height:48px}#hop-button{width:55px;height:55px}#stick-zone{width:92px;height:92px}}@media(max-height:610px){.overlay{padding-top:72px;padding-bottom:12px}.title-card{padding-block:20px}.title-card>p:not(.eyebrow){margin:16px 0 12px}.rules-grid{margin:12px 0}h1 span,h1 em{font-size:48px}#objective{display:none}#touch-controls{transform:scale(.82);transform-origin:bottom left}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(min-width:761px){#hud{padding-bottom:8px;background:linear-gradient(180deg,rgba(243,232,207,.72),transparent)}.title-card,.panel{border-top:3px solid var(--coral)}}@media(max-width:760px){#hud{padding:9px 10px}.readouts{top:58px;left:8px;right:8px;width:auto;justify-content:stretch}.readout{min-width:0;flex:1;padding-inline:6px}.readout span{font-size:7px;letter-spacing:.12em}#objective{top:112px;width:calc(100% - 24px)}#objective.route-pulse{animation:none}#grab-indicator{bottom:124px;max-width:calc(100% - 24px)}.overlay{align-items:start;overflow-y:auto;place-items:start center;background:#f3e8cfdb;backdrop-filter:blur(5px);padding:96px 12px 16px}.title-card,.panel{max-height:calc(100dvh - 112px);overflow:auto}.title-card h1 span,.title-card h1 em{font-size:clamp(46px,15vw,70px)}.title-card>p:not(.eyebrow){font-size:13px}.rules-grid{grid-template-columns:repeat(3,1fr)}.result-grid{grid-template-columns:repeat(2,1fr)}.result-grid span:nth-child(2){border-right:0}.result-grid span:nth-child(-n+2){border-bottom:1px solid var(--ink)}.help-panel{top:70px;right:12px;left:12px;width:auto;max-height:calc(100dvh - 82px);overflow:auto}#touch-controls{right:10px;left:10px;gap:8px}}@media(max-width:760px){#objective{right:12px;left:12px;transform:none}#objective.hidden{transform:translateY(-8px)}}