@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{--ink:#3b4354;--muted:#9095a0;--accent:#549b89;--paper:#f5f0e9}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}main{max-width:820px;margin:auto;padding:26px 26px 20px}header{display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:var(--ink);font-family:'Manrope',system-ui,sans-serif;font-size:25px;font-weight:700;letter-spacing:-1.2px}.brand span{color:var(--accent);font-size:31px;margin-right:8px}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,.arena:focus-visible{outline:3px solid #bc8ac7;outline-offset:3px}#mute,#pause,#refresh{border:1px solid #d5d8d8;background:transparent;color:var(--ink);border-radius:20px;padding:9px 13px;font-size:11px}.intro{padding:33px 0 22px}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--accent);font-weight:700}h1{font-family:'Manrope',system-ui,sans-serif;font-size:45px;letter-spacing:-2px;font-weight:500;margin:11px 0}em{font-style:normal;color:var(--accent)}.intro p{font-size:13px;color:var(--muted);margin:0}nav{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:24px}nav button{text-align:left;padding:15px 12px;border:1px solid #dcdedb;border-radius:12px;background:#fff8;color:var(--ink)}nav button.active{border-color:var(--accent);background:#fff}nav b{display:block;font-size:12px;font-weight:500;margin:6px 0}nav small{font-size:9px;color:var(--muted)}nav span{font-size:10px;color:var(--accent)}.hud{display:flex;gap:22px;align-items:center;padding:0 3px 14px}.hud>div:first-child span{display:block;font-size:11px;color:var(--muted)}.hud strong{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums}.progress{flex:1;max-width:300px;margin-left:auto}.progress>div:first-child{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:8px}.track{background:#dde2de;height:4px;border-radius:3px;overflow:hidden}.track i{display:block;height:100%;background:var(--accent);width:0}.arena{position:relative;width:100%;height:460px;border-radius:20px;overflow:hidden;background:#d8e9dd;touch-action:manipulation;user-select:none}canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f8f4e9c9;backdrop-filter:blur(5px);padding:20px}#overlay[hidden]{display:none}h2{font-family:'Manrope',system-ui,sans-serif;font-weight:500;letter-spacing:-1px}#overlay h2{font-size:39px;line-height:1.14;margin:14px 0}#overlay p{font-size:12px;line-height:1.7;margin:0 0 19px;color:#6e7b7c}.primary{border:0;border-radius:25px;background:var(--ink);color:white;padding:14px 26px;font-size:13px}#tip{font-size:9px;color:#88958d;margin-top:16px}#feedback{position:absolute;top:32px;left:0;right:0;text-align:center;font-size:19px;font-weight:700;color:var(--accent);pointer-events:none;text-shadow:0 1px 10px white}.tap{width:100%;padding:17px;margin-top:14px;background:#fff7;border:1px solid #c8d6cd;border-radius:12px;color:var(--accent);font-size:11px;letter-spacing:3px}.tap:active:not(:disabled){background:#d2e6dc}.settings{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:10px;color:var(--muted);margin:14px 0 28px}.settings label{display:flex;gap:8px;align-items:center}input[type=range]{width:75px;accent-color:var(--accent)}.leaderboard{background:#fff7;border:1px solid #dce0d8;border-radius:18px;padding:22px}.leaderhead{display:flex;justify-content:space-between;align-items:center}.leaderhead h2{font-size:23px;margin:7px 0}.fine{font-size:10px;color:var(--muted);line-height:1.6}#status{font-size:12px;color:var(--accent)}#rows{list-style:none;margin:15px 0;padding:0}#rows li{display:flex;gap:14px;border-bottom:1px solid #e2e6df;padding:12px 2px;font-size:12px}#rows li b{width:23px;color:var(--muted)}#rows li span{flex:1;overflow-wrap:anywhere}#rows li strong{color:var(--accent)}#submit[hidden]{display:none}#submit label{font-size:12px}#submit>div{display:flex;gap:8px;margin-top:8px}#name{min-width:0;flex:1;font:inherit;font-size:13px;border:1px solid #ced8cd;border-radius:8px;background:#fff;padding:11px}#submitButton{padding:11px;border:0;border-radius:8px;background:var(--ink);color:white;font-size:12px}footer{font-size:9px;color:var(--muted);padding:25px 0;display:flex;justify-content:space-between;gap:10px}.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@media(max-width:560px){main{padding:20px 16px}.intro{padding-top:26px}h1{font-size:34px}nav{gap:5px}nav button{padding:10px 7px}nav b{font-size:10px}nav small{font-size:8px}.arena{height:420px}.settings{font-size:9px}footer{flex-direction:column}.leaderboard{padding:18px}}

#restart{border:1px solid #c8d6cd;background:#ffffff80;color:var(--accent);border-radius:18px;padding:9px 11px;font-size:11px;white-space:nowrap}.hud{gap:12px}@media(max-width:560px){.hud{gap:8px}.progress{min-width:55px}.hud>div:first-child span{font-size:10px}#restart{font-size:10px;padding:8px}}

.checkpoint{margin-top:12px;border:1px solid #93b2a1;background:#fff8;border-radius:20px;padding:11px 18px;font-size:11px;color:var(--accent)}.checkpoint[hidden]{display:none}

.arena{height:520px}@media(max-width:560px){.arena{height:480px}}.sync{font-size:11px;color:var(--muted);margin:-12px 0 22px}.sync summary{cursor:pointer}.sync label{display:flex;align-items:center;gap:12px;margin-top:12px}.sync input{width:150px;accent-color:var(--accent)}.sync p{font-size:10px;line-height:1.6}

nav{grid-template-columns:repeat(4,minmax(0,1fr))}.thumb-pads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.thumb-pads[hidden]{display:none}.thumb-pads button{touch-action:none;min-height:90px;border:1px solid var(--accent);border-radius:16px;background:#ffffffa0;color:var(--accent);font-size:12px;font-weight:700}.thumb-pads button:active{background:#d9cbea;transform:scale(.98)}