*{box-sizing:border-box}body{margin:0;background:#142f29;color:#fff8e5;font-family:system-ui,sans-serif;overflow:hidden}main{position:absolute;inset:0;display:grid;place-items:center}canvas{width:100%;height:100%;display:block;touch-action:none}header{position:absolute;top:22px;left:30px;right:25px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-shadow:0 2px 10px #173624}.brand{font-size:34px;font-weight:950;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:3px}button{border:1px solid #fff6c94a;color:#fff8df;background:#244839d9;border-radius:30px;padding:14px 25px;font:600 16px system-ui;cursor:pointer;touch-action:none;user-select:none}button:focus-visible{outline:3px solid #fff4b1;outline-offset:4px}button:disabled{opacity:.5}#pause{padding:12px 18px}#progress{font-size:13px;background:#1b392e99;padding:10px 18px;border-radius:30px}#hint{position:absolute;top:105px;font-size:14px;text-align:center;background:#193f328c;border-radius:24px;padding:9px 20px;pointer-events:none}footer{position:absolute;bottom:18px;text-align:center;display:grid;justify-items:center;gap:8px}footer small{font-size:11px;text-shadow:0 1px 6px #000}#jump,#again{background:#ffd28b;color:#2c402e;border:0;min-width:210px;box-shadow:0 5px 24px #183b3040}.meter{height:9px;width:210px;border-radius:8px;background:#203e35b8;position:relative;overflow:hidden}.meter i{display:block;height:100%;background:#ffda89;width:0}.meter b{position:absolute;left:48%;width:16%;height:100%;top:0;border-left:2px solid white;border-right:2px solid white;background:#fff5}.meter{opacity:.8}section{position:absolute;inset:0;background:#16382baa;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}h1{font:48px Georgia;margin:15px}section p{max-width:380px;line-height:1.6} [hidden]{display:none!important}@media(max-width:650px){header{top:15px;left:18px;right:18px}.brand{font-size:27px}#progress{font-size:11px;max-width:160px}#hint{top:95px;font-size:12px;max-width:90%}footer{bottom:20px}h1{font-size:36px}}@media(max-height:480px){header{top:10px}.brand{font-size:25px}#hint{top:66px;font-size:12px}footer{bottom:8px;gap:4px}#jump{padding:10px 22px}footer small{font-size:9px}}

.controls{display:flex;gap:10px;align-items:center}#left,#right{padding:12px 17px;min-width:48px}#sound{font-size:12px;padding:12px;margin-left:auto}header{gap:10px}@media(max-width:650px){#sound{font-size:10px;padding:10px}#progress{max-width:100px;padding:8px}#jump{min-width:180px}.controls{gap:6px}}
.route{position:absolute;top:88px;left:24px;font-size:12px;padding:9px 15px}.brand small{font-size:8px;letter-spacing:1px}#hint{max-width:54%;top:88px}@media(max-width:650px){header{gap:5px;left:10px;right:10px}.brand{font-size:23px}.brand small{max-width:96px}#progress{max-width:120px;font-size:10px}#sound{padding:9px 7px}#pause{padding:10px 12px}.route{top:90px;left:10px;font-size:10px;padding:8px}#hint{top:135px;max-width:92%;font-size:11px}}@media(max-height:480px){.route{top:65px}#hint{top:65px;font-size:10px;max-width:55%}}


#panel{overflow:hidden}#panel h1,#panel p,#panel>button{position:relative;z-index:1}#panel[data-mode="won"]{background:#12382bd9}#panel[data-mode="won"] h1{color:#ffdb96;font-size:clamp(28px,5vw,52px);max-width:750px}#home{margin-top:14px;min-width:210px}#fireworks{position:absolute;inset:0;pointer-events:none;overflow:hidden}/* Firework trails stay behind the readable victory panel. */
.firework{position:absolute}
.firework i{position:absolute;width:19px;height:4px;border-radius:50%;background:linear-gradient(90deg,transparent,var(--color),#fff8db);box-shadow:0 0 9px var(--color),0 0 19px var(--color);opacity:0;animation:celebrate 3.2s cubic-bezier(.12,.65,.3,1) var(--delay) infinite both}
.firework-core{position:absolute;width:48px;height:48px;margin:-24px;border-radius:50%;background:radial-gradient(circle,#fff6ce 0%,var(--color) 22%,transparent 70%);opacity:0;animation:firework-glow 3.2s ease-out var(--delay) infinite both}
#panel[data-mode="won"]{background:radial-gradient(ellipse at 50% 45%,#12382bf5 0%,#102b35eb 65%,#171d38ef 100%)}
#panel[data-mode="won"] h1,#panel[data-mode="won"] p{text-shadow:0 2px 12px #071e19,0 0 22px #071e19}
@keyframes celebrate{0%,5%{opacity:0;transform:translate(0,0) rotate(var(--angle)) scale(.15)}12%{opacity:1}55%{opacity:1}85%,100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 35px)) rotate(var(--angle)) scale(.45)}}
@keyframes firework-glow{0%,4%{opacity:0;transform:scale(.2)}12%{opacity:.9;transform:scale(1)}32%,100%{opacity:0;transform:scale(2)}}
@media(prefers-reduced-motion:reduce){.firework i{animation:none;opacity:.65;transform:translate(var(--dx),var(--dy)) rotate(var(--angle)) scale(.65)}.firework-core{animation:none}}

.site-exit{position:fixed;left:20px;bottom:18px;z-index:3;color:#fff8df;background:#244839ed;border:1px solid #fff6c94a;border-radius:24px;padding:10px 14px;text-decoration:none;font:600 12px system-ui}.home-link{position:relative;z-index:1;display:inline-block;color:#fff8df;background:#244839d9;border:1px solid #fff6c94a;border-radius:30px;padding:14px 25px;text-decoration:none;font:600 16px system-ui}.home-link:focus-visible,.site-exit:focus-visible{outline:3px solid #fff4b1;outline-offset:4px}@media(max-width:650px){.site-exit{bottom:145px;left:10px;padding:8px 10px}}

@media(orientation:portrait){header{top:max(10px,env(safe-area-inset-top));padding:7px;background:#163b2aaa;border-radius:18px}.route{top:82px}#hint{top:122px;font-weight:700;text-shadow:0 1px 3px #123;transition:opacity .2s}footer{bottom:max(16px,env(safe-area-inset-bottom));background:#173b2ab8;padding:12px;border-radius:22px}footer small{display:none}.site-exit{top:82px;right:10px;left:auto;bottom:auto;font-size:11px;padding:7px 10px}h1{font-family:system-ui,sans-serif}.firework i,.firework-core{animation-iteration-count:2}}