:root{--pine:#10332d;--deep:#0a211d;--cream:#fbf0dc;--orange:#ff5a1f;--sun:#ffc43d;--sky:#7fd1d9;--bar:#10332d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deep);color:var(--cream);font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;overscroll-behavior:none}
#app{height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
#stage{position:relative;height:100%;overflow:hidden}
canvas#cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#hud{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:6px 10px;background:linear-gradient(var(--bar),rgba(16,51,45,.88));border-bottom:3px solid var(--orange)}
.stat{display:flex;flex-direction:column;line-height:1.05;min-width:48px;font-variant-numeric:tabular-nums;font-weight:800;font-size:16px}
.stat .k{font-size:9px;text-transform:uppercase;letter-spacing:.1em;opacity:.7;font-weight:600;color:var(--sun)}
button.sm{margin-left:auto;padding:7px 14px;border-radius:10px;border:2px solid var(--sun);background:transparent;font-weight:800}
#cue{position:absolute;left:8px;top:58px;max-width:calc(100% - 150px);background:rgba(16,51,45,.86);padding:6px 12px;border-radius:12px;font-size:13px;font-weight:700;pointer-events:none;border-left:4px solid var(--sun)}
#cue.warn{background:var(--orange);border-color:var(--cream)}
#cue:empty{display:none}
#controls{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:12px 14px;pointer-events:none}
#controls[hidden]{display:none}
#pad{pointer-events:auto;touch-action:none;position:relative;width:clamp(104px,30vw,140px);aspect-ratio:1;border-radius:50%;border:3px solid rgba(251,240,220,.8);background:rgba(16,51,45,.55);user-select:none;-webkit-user-select:none}
#pad .pl{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
#knob{position:absolute;left:50%;top:50%;width:46%;height:46%;margin:-23% 0 0 -23%;border-radius:50%;background:var(--sun);border:3px solid var(--pine)}
#pad.on{background:rgba(16,51,45,.75)}
.action{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:clamp(100px,28vw,136px);height:clamp(64px,16vh,88px);border-radius:20px;border:3px solid var(--cream);background:var(--orange);font-weight:900;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.action b{font-size:16px;text-transform:uppercase;letter-spacing:.03em}.action small{font-size:10px;opacity:.8}
.action:disabled{background:#5d6d66;border-color:#9aa8a0;cursor:default}
.panel{position:absolute;inset:0;display:none;overflow:auto;background:rgba(10,33,29,.9);padding:14px;-webkit-overflow-scrolling:touch}
.panel.open{display:flex;flex-direction:column}
.card{flex:none;width:min(540px,100%);margin:auto;background:var(--cream);color:var(--pine);border-radius:18px;padding:18px;border:4px solid var(--orange)}
.card h1,.card h2{margin:0 0 6px;font-size:26px;line-height:1.1}
.card p{margin:4px 0 8px;font-size:14px}
.help{margin:0;padding-left:18px;font-size:13px;display:grid;gap:5px}.help b{color:#c23c0c}
.results{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;font-variant-numeric:tabular-nums;margin:8px 0}
.results dt{opacity:.7}.results dd{margin:0;font-weight:800}
.row2{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.primary,.alt{padding:12px 18px;border-radius:12px;font-weight:800;border:3px solid var(--pine);flex:1}
.primary{background:var(--orange);color:#fff}.alt{background:transparent;color:var(--pine)}
@media (max-height:480px){#hud{padding:3px 10px}.stat{flex-direction:row;gap:5px;align-items:baseline}#cue{top:38px;font-size:12px;padding:3px 10px}.card{padding:10px}.card h1{font-size:20px}.row2{margin-top:8px}#controls{padding:8px 12px}#pad{width:104px}.action{height:58px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}