:root{color-scheme:dark;--ink:#171411;--cream:#fff0d6;--orange:#ff6a17}*{box-sizing:border-box}body{margin:0;background:#100f0e;color:var(--cream);font-family:Arial,Helvetica,sans-serif}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,canvas:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}button:disabled{opacity:.5;cursor:wait}#game{max-width:1240px;margin:24px auto 0;border:1px solid #3c3026;background:var(--ink);box-shadow:0 20px 80px #0008}header{display:flex;align-items:center;padding:20px 28px;gap:28px;border-bottom:3px solid var(--orange)}.brand{font-size:clamp(23px,3.1vw,42px);font-weight:1000;font-style:italic;letter-spacing:-2px;line-height:1}.brand span{color:var(--orange)}small{display:block;font-size:10px;letter-spacing:2px;font-weight:700;font-style:normal}.brand small{color:#a39483;margin-top:10px;letter-spacing:2.7px}.stats{display:flex;gap:30px;margin-left:auto}.stats small{color:#a39483;margin-bottom:5px}.stats strong{font-size:30px;font-variant-numeric:tabular-nums;font-weight:900}.stats b{color:var(--orange)}.stats i{font-style:normal;color:#9b8b79;font-size:20px}.tools{display:flex;gap:8px}.tools button,footer button{border:1px solid #514333;background:transparent;border-radius:3px;padding:11px;font-size:10px;font-weight:800}.tools button:last-child{font-size:18px;padding:6px 12px}#stage{position:relative;aspect-ratio:3/2;overflow:hidden;background:#362b23}canvas{display:block;width:100%;height:100%;touch-action:none}.objective{position:absolute;top:16px;left:20px;display:flex;align-items:center;gap:9px;background:#14110edb;border:1px solid #82715866;padding:10px 12px;font-size:10px;letter-spacing:1.3px;pointer-events:none}.dot{height:5px;width:5px;border-radius:50%;background:var(--orange)}#clock{padding-left:15px;color:#ab9b86;font-variant-numeric:tabular-nums}#combo{position:absolute;right:25px;top:25px;color:#ffba66;font-size:26px;font-weight:1000;font-style:italic;text-shadow:2px 3px #27160c;pointer-events:none}#hint{position:absolute;bottom:25px;width:100%;text-align:center;font-size:12px;letter-spacing:.4px;color:#fff5df;text-shadow:0 2px 5px #000;pointer-events:none}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,#100e0cf0,#100e0c80 55%,#100e0c28);display:flex;align-items:center;padding:7%;z-index:5}.overlay.hidden{display:none}.panel{max-width:480px}.panel>small{color:#ff9a4a}.panel h1{font-size:clamp(40px,6vw,78px);line-height:.95;letter-spacing:-3px;text-transform:uppercase;margin:24px 0;font-weight:1000}.panel h1 em{color:var(--orange)}.panel p{font-size:16px;line-height:1.6;color:#d7c3a9}.primary{border:0;background:var(--orange);color:#1d1107;padding:18px 32px;font-weight:900;font-size:14px;letter-spacing:1px;margin-top:13px;box-shadow:4px 4px 0 #612708}.primary:hover{background:#ff934d;transform:translateY(-1px)}.panel .micro{font-size:10px;color:#b29c83;margin-top:18px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 25px;border-top:1px solid #745136}.keys{display:flex;gap:22px;font-size:10px;font-weight:700;color:#c4b59e}.keys span{display:flex;align-items:center;gap:8px}kbd{font:700 10px Arial;border:1px solid #86735a;padding:6px;border-radius:3px;color:#fff0d6;background:#28211a}.charge{width:170px;font-size:9px;font-weight:800;letter-spacing:1px}.charge>div{height:4px;background:#4a3627;margin-top:8px}.charge i{display:block;width:100%;height:100%;background:var(--orange)}.below{display:flex;justify-content:space-between;gap:10px;padding:14px 25px;font-size:9px;color:#9b8b79;letter-spacing:1px;background:#100f0e}.below label{display:flex;align-items:center;gap:5px;letter-spacing:0}input{accent-color:#ff6a17}#touch{display:none;position:absolute;inset:0;pointer-events:none;z-index:3}#stick{position:absolute;bottom:22px;left:24px;width:110px;height:110px;border:2px solid #efd6ae70;border-radius:50%;background:#18120b55;pointer-events:auto;touch-action:none}#knob{position:absolute;width:46px;height:46px;left:30px;top:30px;border:2px solid #f9d4a1b0;background:#dba36150;border-radius:50%;pointer-events:none}.actions{position:absolute;right:20px;bottom:25px;display:flex;gap:14px;align-items:flex-end}.actions button{border-radius:50%;width:82px;height:82px;background:#e85918c9;border:2px solid #ffbd6c;color:#fff0d6;pointer-events:auto;font-size:19px;font-weight:900;touch-action:none;user-select:none}.actions button:first-child{width:64px;height:64px;font-size:13px;background:#1b1712a8}#touch button:active{transform:scale(.93)}@media(pointer:coarse){#touch{display:block}.keys{display:none}#hint{bottom:150px}}@media(max-width:700px){#game{margin:0;border:0}header{padding:14px 12px;gap:12px}.brand{letter-spacing:-1px;font-size:23px}.brand small{font-size:6px;letter-spacing:1px;margin-top:6px}.stats{gap:12px}.stats small{font-size:7px;letter-spacing:1px}.stats strong{font-size:22px}.stats i{font-size:14px}.tools{gap:5px}.tools button{padding:7px 5px;font-size:7px}.tools button:last-child{padding:4px 8px}#stage{aspect-ratio:3/2}.objective{top:8px;left:8px;font-size:7px;gap:5px;padding:6px}#combo{font-size:18px;top:40px;right:10px}#hint{font-size:9px;bottom:12px}footer{padding:12px;gap:12px}.keys{gap:8px;font-size:7px}.keys span{gap:4px}kbd{font-size:7px;padding:4px}.charge{width:120px;font-size:7px}footer button{font-size:8px;padding:8px}.below{padding:10px 12px;font-size:7px}.below>span:nth-child(2){display:none}.panel h1{font-size:40px;margin:10px 0;letter-spacing:-1px}.panel>small{font-size:7px}.panel p{font-size:11px;margin:8px 0}.primary{font-size:11px;padding:12px 22px;margin-top:5px}.panel .micro{font-size:8px;margin-top:10px}}@media(pointer:coarse) and (orientation:portrait){#stage{aspect-ratio:auto;height:calc(66.667vw + 150px);background:#211a13}canvas{height:calc(66.667vw)}#touch{top:auto;height:150px;border-top:1px solid #66503b}#stick{bottom:15px}.actions{bottom:24px}#hint{bottom:157px}.overlay{padding-bottom:150px}.panel h1{font-size:32px}.panel p{font-size:10px}.objective{font-size:6px}}@media(max-height:600px) and (orientation:landscape){#game{margin:0 auto;max-width:calc((100dvh - 110px)*1.5)}header{padding:7px 12px}.brand{font-size:23px}.brand small{display:none}.stats strong{font-size:20px}.stats small{font-size:7px}footer{padding:7px 12px}.below{display:none}#hint{bottom:10px}#stick{width:90px;height:90px;bottom:10px;left:10px}#knob{left:20px;top:20px}.actions{bottom:10px;right:10px}.actions button{width:65px;height:65px}.actions button:first-child{width:52px;height:52px}}
@media(min-width:701px) and (min-height:601px){#game{max-width:min(1240px,calc((100dvh - 230px)*1.5));margin-top:14px}header{padding:15px 22px}.brand{font-size:clamp(23px,3vw,38px)}footer{padding:13px 20px}}
.stats strong{white-space:nowrap}.keys kbd{white-space:nowrap}
@media(max-width:700px){header{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 12px}.brand{font-size:24px;white-space:nowrap}.brand small{font-size:6px}.stats{gap:14px}.stats strong{font-size:20px}.tools{grid-column:1/-1;justify-self:end;gap:6px}.tools button{padding:5px 9px}.tools button:last-child{padding:1px 10px;font-size:16px}.keys{display:none}#touch{display:block}.charge{width:155px}.below{font-size:8px}.overlay{padding-top:30px}}
@media(max-width:700px) and (orientation:portrait){#stage{aspect-ratio:auto;height:calc(66.667vw + 150px);background:#211a13}canvas{height:calc(66.667vw)}#touch{top:auto;height:150px;border-top:1px solid #66503b}#stick{bottom:15px}.actions{bottom:24px}#hint{bottom:157px}.overlay{padding-bottom:150px}.panel h1{font-size:32px}.panel p{font-size:10px}.objective{font-size:6px}}
@media(max-height:600px) and (orientation:landscape){header{display:flex;gap:10px;padding:6px 10px}.brand{font-size:20px;white-space:nowrap}.stats{gap:10px}.stats strong{font-size:18px}.tools{gap:4px}.tools button{font-size:7px;padding:4px}.tools button:last-child{padding:3px 8px;font-size:14px}.keys{display:none}#touch{display:block}.charge{width:120px}.overlay .panel h1{font-size:32px;margin:8px 0}.overlay .panel p{font-size:10px}.overlay .primary{padding:10px 16px;font-size:10px}.panel .micro{margin-top:8px;font-size:8px}}