@font-face{font-family:Chakra Petch;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/chakra-petch-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/chakra-petch-latin-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/chakra-petch-latin-700.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink: #0b1620;--paper: #eef6ff;--glass: rgba(10, 22, 34, .62);--glass-line: rgba(190, 224, 250, .28);--jet: #35d0ff;--yeti: #ff4d4d;--gold: #ffd24a;--shadow: 0 6px 22px rgba(4, 14, 24, .45);--pad: 14px}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0d1621;color:var(--paper);font-family:Chakra Petch,Segoe UI,Noto Sans Thai,system-ui,sans-serif;font-weight:600;-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#scene{position:fixed;inset:0;width:100%;height:100%;display:block}#deck{position:fixed;left:0;right:0;top:var(--play-h, 100%);bottom:0;display:none;align-items:flex-start;justify-content:center;padding-top:68px;background:linear-gradient(180deg,#16293c,#0d1621 55%);border-top:1px solid rgba(190,224,250,.16);box-shadow:inset 0 14px 26px #00000073}body.letterbox #deck{display:flex}.deck-hint{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;letter-spacing:2px;color:#cee2f257;text-align:center;transition:opacity .6s}body.playing .deck-hint{opacity:.42}kbd{display:inline-block;min-width:1.6em;padding:1px 6px;font:inherit;font-size:.85em;text-align:center;color:var(--paper);background:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-bottom-width:2px;border-radius:4px}#mirror-frame{position:fixed;border:2px solid rgba(232,244,255,.75);border-radius:3px;box-shadow:var(--shadow),inset 0 0 22px #06121e8c;pointer-events:none;opacity:0;transition:opacity .4s}#mirror-frame.on{opacity:1}#mirror-frame.alert{border-color:var(--yeti);animation:mirror-pulse .42s infinite alternate}#mirror-frame span{position:absolute;top:-2px;left:-2px;background:#0b1620d9;color:var(--paper);font-size:9px;letter-spacing:2px;padding:2px 7px}#mirror-frame.alert span{background:var(--yeti);color:#fff}@keyframes mirror-pulse{0%{box-shadow:var(--shadow),0 0 #ff4d4d00}to{box-shadow:var(--shadow),0 0 20px 3px #ff4d4dcc}}#hud{--edge-t: calc(var(--pad) + env(safe-area-inset-top));--edge-l: calc(var(--pad) + env(safe-area-inset-left));--edge-r: calc(var(--pad) + env(safe-area-inset-right));--edge-b: calc(var(--pad) + env(safe-area-inset-bottom));position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .28s}#hud.on{opacity:1}#hud-left{position:absolute;top:var(--edge-t);left:var(--edge-l);display:flex;align-items:center;gap:10px}.icon-btn{pointer-events:auto;width:40px;height:40px;display:grid;place-items:center;padding:0;color:var(--paper);background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;box-shadow:var(--shadow);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.icon-btn svg{width:18px;height:18px;fill:currentColor}.icon-btn:active{transform:translateY(1px)}.chip{display:flex;align-items:baseline;gap:1px;padding:5px 12px 4px;font-size:20px;line-height:1;color:var(--gold);background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}.chip .x{font-size:13px;opacity:.7}.chip.event{--glow: rgba(120, 190, 255, .55);--glow-soft: rgba(120, 190, 255, .25);--glow-hot: rgba(160, 215, 255, .7);gap:6px;font-size:15px;font-weight:600;color:#dceaff;border-color:var(--glow);box-shadow:var(--shadow),0 0 14px var(--glow-soft);overflow:hidden;max-width:0;padding-left:0;padding-right:0;opacity:0;white-space:nowrap;transition:max-width .4s ease,opacity .3s,padding .4s}.chip.event.on{max-width:180px;padding-left:10px;padding-right:10px;opacity:1;animation:event-glow 1.6s ease-in-out infinite alternate}.chip.event .ico{font-size:13px}.chip.event b{color:var(--gold);font-size:17px}@keyframes event-glow{0%{box-shadow:var(--shadow),0 0 8px var(--glow-soft)}to{box-shadow:var(--shadow),0 0 20px var(--glow-hot)}}@media(max-width:560px){.chip.event span:not(.ico),.chip.event b{display:none}.chip.event.on{max-width:34px;padding-left:8px;padding-right:8px}}.chip.event.dusk{--glow: rgba(255, 150, 90, .55);--glow-soft: rgba(255, 150, 90, .25);--glow-hot: rgba(255, 185, 120, .7);color:#ffd9bd}.chip.event.ice{--glow: rgba(120, 240, 255, .6);--glow-soft: rgba(120, 240, 255, .3);--glow-hot: rgba(180, 250, 255, .85);color:#d5fbff}.chip.bump{animation:chip-bump .45s ease-out}@keyframes chip-bump{0%{transform:scale(1)}30%{transform:scale(1.35);filter:brightness(1.6)}to{transform:scale(1)}}#hud-right{position:absolute;top:var(--edge-t);right:var(--edge-r);text-align:right}.score-block{padding:7px 13px 8px;background:var(--glass);border:1px solid var(--glass-line);border-radius:10px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.score-now{font-size:32px;font-weight:700;line-height:1;letter-spacing:.5px;font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(53,208,255,.35)}.score-best{margin-top:3px;font-size:11px;letter-spacing:1px;opacity:.65}.score-best b{margin-left:6px;font-variant-numeric:tabular-nums}.readouts{display:flex;justify-content:flex-end;gap:7px;margin-top:7px}.readout{display:flex;align-items:baseline;gap:4px;padding:4px 10px;font-size:17px;background:var(--glass);border:1px solid var(--glass-line);border-radius:8px;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}.readout span{font-size:9px;letter-spacing:1px;opacity:.55}#bars{position:absolute;left:var(--edge-l);bottom:var(--edge-b);display:flex;flex-direction:column;gap:6px;width:min(210px,46vw)}.bar-wrap{display:flex;align-items:center;gap:8px;opacity:.95}#wrap-jet{transition:opacity .3s}#wrap-jet.idle{opacity:.35}.bar-label{font-size:9px;letter-spacing:1.5px;width:30px;text-shadow:0 1px 3px rgba(0,0,0,.8)}.bar{flex:1;height:9px;padding:1px;background:var(--glass);border:1px solid var(--glass-line);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}.fill{height:100%;width:0%;border-radius:5px;transition:width .08s linear}.fill.jet{background:linear-gradient(90deg,#1a9fd0,var(--jet));box-shadow:0 0 10px #35d0ffb3}.fill.yeti{background:linear-gradient(90deg,#b02a2a,var(--yeti))}#toast{position:absolute;left:50%;top:60%;transform:translate(-50%);font-size:clamp(20px,4.5vw,30px);font-weight:700;letter-spacing:1px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.75);opacity:0;white-space:nowrap}#toast.show{animation:toast-pop .9s ease-out}@keyframes toast-pop{0%{opacity:0;transform:translate(-50%,16px) scale(.85)}16%{opacity:1;transform:translate(-50%) scale(1.08)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-22px)}}#damage-vignette{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(190,20,20,.9) 100%);transition:opacity .25s}body.letterbox #damage-vignette,body.letterbox #countdown{bottom:calc(100% - var(--play-h))}body.letterbox #toast{top:calc(var(--play-h) * .6)}body.letterbox #bars,body.letterbox .readouts{top:calc(var(--play-h) + 16px);bottom:auto}#countdown{position:fixed;inset:0;display:none;place-items:center;pointer-events:none;font-size:clamp(64px,18vw,150px);font-weight:700;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.6)}#countdown.on{display:grid}#countdown span{animation:count-pop .9s ease-out}@keyframes count-pop{0%{opacity:0;transform:scale(1.7)}25%{opacity:1;transform:scale(1)}to{opacity:.15;transform:scale(.85)}}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;overflow-y:auto;background:radial-gradient(ellipse at center,#0814208c,#060e18db);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);text-align:center;animation:fade-in .22s ease-out}.overlay.hidden{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.card{display:flex;flex-direction:column;align-items:center;gap:13px;width:min(430px,100%);padding:26px 24px 22px;background:#0b1825b8;border:1px solid var(--glass-line);border-radius:16px;box-shadow:0 20px 60px #0000008c;animation:card-in .28s cubic-bezier(.2,1.1,.4,1)}.card.narrow{width:min(340px,100%)}@keyframes card-in{0%{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}.logo{line-height:.9}.logo h1{margin:0;font-size:clamp(38px,10vw,62px);font-weight:700;letter-spacing:2px;text-shadow:0 3px 0 #123449,0 10px 26px rgba(0,0,0,.55)}.logo h1 span{color:var(--jet)}.logo-sub{margin-top:6px;font-size:13px;letter-spacing:12px;text-indent:12px;opacity:.6}.screen-title{margin:0;font-size:clamp(22px,5vw,32px);font-weight:700;letter-spacing:1px}.screen-title.dead{color:#ff7b7b}.tag{margin:0;font-size:13px;font-weight:400;opacity:.75}.note{margin:0;font-size:11px;font-weight:400;opacity:.5;line-height:1.6}.note.dim{opacity:.32}.best-row{display:flex;align-items:baseline;gap:10px;padding:5px 14px;font-size:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.12);border-radius:999px}.best-row b{font-size:17px;color:var(--gold);font-variant-numeric:tabular-nums}.best-row.hidden{display:none}.keys{width:100%;display:flex;flex-direction:column;gap:6px;padding:12px 14px;font-size:12px;font-weight:400;background:#ffffff0b;border:1px solid rgba(255,255,255,.1);border-radius:10px}.key-row{display:flex;align-items:center;gap:5px}.key-row em{font-style:normal;opacity:.45;font-size:11px;margin:0 2px}.key-row span{margin-left:auto;opacity:.8}kbd.wide{min-width:auto;padding:1px 9px}.btn{pointer-events:auto;font-family:inherit;font-weight:700;letter-spacing:1px;cursor:pointer;border-radius:10px;transition:transform .06s,filter .15s}.btn:active{transform:translateY(2px)}.btn.primary{width:100%;padding:13px 30px;font-size:17px;color:#06202c;background:linear-gradient(180deg,#7ce4ff,var(--jet));border:none;box-shadow:0 4px #1580a6,0 10px 24px #35d0ff4d}.btn.primary:active{box-shadow:0 2px #1580a6}.btn.primary:hover{filter:brightness(1.08)}.btn-row{display:flex;gap:9px;width:100%}.btn.ghost{flex:1;padding:9px 14px;font-size:13px;color:var(--paper);background:#ffffff12;border:1px solid rgba(255,255,255,.2)}.btn.ghost:hover{background:#ffffff24}.hint{margin:0;font-size:11px;font-weight:400;opacity:.45}.credit{margin:0;font-size:10px;font-weight:400;opacity:.35}.credit b{font-weight:600}.load-track{width:100%;height:6px;background:#ffffff1f;border-radius:999px;overflow:hidden}#load-bar{width:0%;height:100%;background:linear-gradient(90deg,#1a9fd0,var(--jet));border-radius:999px;transition:width .2s ease-out}#load-msg.error{color:#ff8b8b;opacity:1}.result{width:100%}.result .big{font-size:clamp(46px,12vw,62px);font-weight:700;line-height:1;color:var(--jet);font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(53,208,255,.4)}.result .sub{font-size:10px;letter-spacing:4px;opacity:.5;margin-bottom:12px}.result .line{display:flex;justify-content:space-between;gap:20px;font-size:13px;font-weight:400;padding:6px 2px;border-top:1px solid rgba(255,255,255,.1)}.result .line b{font-weight:700;font-variant-numeric:tabular-nums}#o-newbest{padding:6px 18px;font-size:14px;letter-spacing:1px;color:#3a2a00;background:linear-gradient(180deg,#ffe487,var(--gold));border-radius:999px;box-shadow:0 0 24px #ffd24a80;animation:best-glow .9s ease-in-out infinite alternate}#o-newbest.hidden{display:none}@keyframes best-glow{0%{transform:scale(1)}to{transform:scale(1.05)}}.near-note{font-size:12px;font-weight:400;opacity:.7}.near-note.hidden{display:none}.mini-stats{display:flex;gap:8px;width:100%}.mini-stats div{flex:1;padding:9px 4px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:9px}.mini-stats b{display:block;font-size:19px;font-variant-numeric:tabular-nums}.mini-stats span{font-size:10px;font-weight:400;opacity:.55}#settings-list{width:100%;display:flex;flex-direction:column;gap:7px}.setting{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:11px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--paper);text-align:left;background:#ffffff0f;border:1px solid rgba(255,255,255,.13);border-radius:10px;cursor:pointer}.setting:hover{background:#ffffff1c}.switch{position:relative;flex:none;width:42px;height:23px;background:#ffffff24;border-radius:999px;transition:background .18s}.switch:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;background:#cfe2f2;border-radius:50%;transition:transform .18s,background .18s}.setting.on .switch{background:var(--jet)}.setting.on .switch:after{transform:translate(19px);background:#06202c}@media(max-width:560px){:root{--pad: 10px}.score-now{font-size:26px}.card{padding:20px 18px 18px;gap:11px}.readouts{position:fixed;right:var(--edge-r);bottom:var(--edge-b);margin-top:0}.readout{font-size:15px}}@media(hover:hover){.touch-only{display:none}}.rotate-icon{width:62px;height:96px;margin-bottom:4px;border:3px solid var(--paper);border-radius:9px;position:relative;animation:rotate-hint 2.4s ease-in-out infinite}.rotate-icon:after{content:"";position:absolute;left:50%;bottom:6px;width:18px;height:3px;border-radius:2px;background:var(--paper);transform:translate(-50%)}@keyframes rotate-hint{0%,22%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media(prefers-reduced-motion:reduce){.rotate-icon{animation:none;transform:rotate(-90deg)}}