@font-face{font-family:Chakra Petch;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ChakraPetch-400-thai.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ChakraPetch-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2122}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ChakraPetch-700-thai.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}@font-face{font-family:Chakra Petch;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ChakraPetch-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+2122}:root{--bg: #05070d;--panel: rgba(10, 16, 30, .86);--panel-border: rgba(64, 220, 255, .35);--cyan: #35e6ff;--cyan-soft: rgba(53, 230, 255, .15);--magenta: #ff3fd8;--green: #33ff9c;--red: #ff4d5e;--amber: #ffb020;--text: #eaf6ff;--text-dim: #7fa3c0;--font: "Chakra Petch", "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif}*{box-sizing:border-box}html{overscroll-behavior:none;height:100%}html,body,#app{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas#game-canvas{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:20;background:radial-gradient(circle at 50% 20%,rgba(53,230,255,.08),transparent 60%),var(--bg);animation:fade-in .4s ease}.hidden{display:none!important}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.title-xl{font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text);text-shadow:0 0 18px var(--cyan),0 0 46px rgba(53,230,255,.4);margin:0 0 .5rem;text-align:center}.subtitle{color:var(--cyan);letter-spacing:.35em;text-transform:uppercase;font-size:clamp(.7rem,1.4vw,1rem);margin-bottom:3rem;opacity:.85}.btn{font-family:var(--font);background:linear-gradient(135deg,#35e6ff26,#35e6ff0d);border:1px solid var(--panel-border);color:var(--text);padding:.9em 2.6em;font-size:1.05rem;letter-spacing:.18em;text-transform:uppercase;border-radius:4px;cursor:pointer;transition:all .2s ease}.btn:hover:not(:disabled){background:var(--cyan-soft);box-shadow:0 0 24px #35e6ff59;transform:translateY(-1px)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.danger{border-color:#ff4d5e80;color:var(--red)}.btn.danger:hover:not(:disabled){background:#ff4d5e1f;box-shadow:0 0 24px #ff4d5e4d}.btn.small{padding:.5em 1.2em;font-size:.85rem}.field{background:#050a14b3;border:1px solid var(--panel-border);color:var(--text);font-family:var(--font);font-size:1.1rem;letter-spacing:.12em;text-align:center;text-transform:uppercase;padding:.85em 1.2em;border-radius:4px;outline:none;width:min(320px,80vw);margin-bottom:1.2rem}.field:focus{border-color:var(--cyan);box-shadow:0 0 18px #35e6ff40}.status-msg{min-height:1.6em;margin-bottom:1rem;letter-spacing:.15em;text-transform:uppercase;font-size:.95rem}.status-msg.error{color:var(--red);text-shadow:0 0 12px rgba(255,77,94,.6)}.status-msg.ok{color:var(--green);text-shadow:0 0 12px rgba(51,255,156,.6)}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:6px;padding:1.5rem 2rem;backdrop-filter:blur(6px)}.lobby-panel{min-width:min(480px,90vw);text-align:center}.player-list{list-style:none;margin:1.5rem 0;padding:0;display:flex;flex-direction:column;gap:.5rem;max-height:40vh;overflow-y:auto}.player-list li{display:flex;justify-content:space-between;padding:.6em 1em;background:#35e6ff0d;border:1px solid rgba(53,230,255,.15);border-radius:4px;letter-spacing:.1em}.player-list .ready-tag{color:var(--green)}.lobby-count{margin:1rem 0;font-size:1.2rem;letter-spacing:.15em}.lobby-waiting{color:var(--cyan);letter-spacing:.3em;font-size:.85rem;animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}#hud{position:fixed;inset:0;z-index:15;pointer-events:none;font-family:var(--font)}.hud-top{position:absolute;top:1.2rem;left:50%;transform:translate(-50%);text-align:center}.hud-progress-label{letter-spacing:.25em;font-size:.8rem;color:var(--cyan);text-shadow:0 0 10px rgba(53,230,255,.6)}.hud-progress-value{font-size:1.6rem;font-weight:700;text-shadow:0 0 14px rgba(53,230,255,.5)}.hud-target-marker{position:absolute;transform:translate(-50%,-100%);text-align:center;color:var(--amber);font-weight:700;letter-spacing:.15em;text-shadow:0 0 10px rgba(255,176,32,.8);white-space:nowrap}.hud-target-marker .dist{display:block;font-size:.75rem;color:var(--text-dim);font-weight:400}.hud-reject{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:1.4rem;color:var(--red);letter-spacing:.2em;text-shadow:0 0 14px rgba(255,77,94,.7);animation:reject-pop .9s ease forwards}@keyframes reject-pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.9)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}.hud-bottom-left{position:absolute;bottom:1.2rem;left:1.2rem;font-size:.75rem;letter-spacing:.1em;color:var(--text-dim);line-height:1.5}.hud-player-status{position:absolute;top:5.5rem;left:50%;transform:translate(-50%);display:flex;gap:.6rem;font-size:.75rem;letter-spacing:.08em}.hud-player-status span{padding:.2em .6em;border:1px solid rgba(53,230,255,.25);border-radius:3px;background:#050a1480}.hud-player-status span.done{color:var(--green);border-color:#33ff9c66}.hud-banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.4rem,3.5vw,2.4rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 20px rgba(53,230,255,.7);text-align:center;animation:reject-pop 1.8s ease forwards}.hud-mission-complete{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);text-align:center}.hud-mission-complete .line1{font-size:2.2rem;font-weight:800;letter-spacing:.15em;color:var(--green);text-shadow:0 0 20px rgba(51,255,156,.6)}.hud-mission-complete .line2{margin-top:.6rem;letter-spacing:.3em;color:var(--cyan);font-size:.9rem}.crosshair{position:absolute;top:50%;left:50%;width:8px;height:8px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transform:translate(-50%,-50%)}#ceremony-layer{position:fixed;inset:0;z-index:30;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column}.ceremony-text{font-size:clamp(1.4rem,4vw,2.6rem);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 22px rgba(53,230,255,.7);text-align:center;animation:fade-in .6s ease}.countdown-number{font-size:clamp(6rem,20vw,12rem);font-weight:800;color:#fff;text-shadow:0 0 40px var(--cyan);animation:countdown-pop 1s ease}@keyframes countdown-pop{0%{transform:scale(1.4);opacity:0}30%{transform:scale(1);opacity:1}to{transform:scale(1);opacity:1}}#ceremony-video{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:31}.fade-black{position:fixed;inset:0;background:#000;z-index:40;opacity:0;pointer-events:none;transition:opacity 1.1s ease}.fade-black.on{opacity:1}.loading-bar-track{width:min(420px,80vw);height:6px;background:#35e6ff1a;border:1px solid var(--panel-border);border-radius:3px;overflow:hidden;margin:1.5rem 0 .8rem}.loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .25s ease}.loading-detail{font-size:.75rem;color:var(--text-dim);letter-spacing:.1em;text-align:center}#debug-panel{position:fixed;bottom:.8rem;right:.8rem;z-index:50;background:#000000bf;border:1px solid rgba(53,230,255,.3);border-radius:4px;padding:.6rem .9rem;font-size:.68rem;line-height:1.5;color:var(--green);font-family:Consolas,monospace;white-space:pre;pointer-events:none}#touch-controls{position:fixed;inset:0;z-index:16;pointer-events:none}.touch-stick,.touch-btn{position:absolute;pointer-events:auto;border-radius:50%;background:#35e6ff1f;border:1px solid rgba(53,230,255,.4)}.touch-stick{left:calc(1.5rem + env(safe-area-inset-left,0px));bottom:calc(1.5rem + env(safe-area-inset-bottom,0px));width:110px;height:110px}.touch-stick .knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#35e6ff66}.touch-btn{right:calc(1.5rem + env(safe-area-inset-right,0px));bottom:calc(2rem + env(safe-area-inset-bottom,0px));width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:.7rem;letter-spacing:.1em;color:var(--text)}.touch-btn.jump{right:calc(1.5rem + env(safe-area-inset-right,0px));bottom:calc(6.8rem + env(safe-area-inset-bottom,0px));width:60px;height:60px}.touch-btn.attack{right:calc(1.5rem + env(safe-area-inset-right,0px));bottom:calc(2rem + env(safe-area-inset-bottom,0px))}.touch-btn.run{right:calc(7.5rem + env(safe-area-inset-right,0px));bottom:calc(2rem + env(safe-area-inset-bottom,0px))}@media (min-width: 900px){#touch-controls{display:none}}#prize-alert{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#02040ab8;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s ease}#prize-alert.show{opacity:1}.prize-card{text-align:center;padding:2.4rem 3rem;border:1px solid rgba(255,176,32,.55);border-radius:10px;background:radial-gradient(circle at 50% 0%,#ffb02024,#0a101eeb);box-shadow:0 0 60px #ffb02059;animation:prize-pop .5s cubic-bezier(.2,1.4,.4,1)}@keyframes prize-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}.prize-title{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:.1em;color:var(--amber);text-shadow:0 0 24px rgba(255,176,32,.7);margin-bottom:1.2rem}.prize-body{font-size:clamp(1.1rem,2.6vw,1.5rem);letter-spacing:.1em;line-height:1.8}.prize-winner-name{display:inline-block;margin-top:.3rem;font-size:clamp(1.8rem,5vw,3rem);font-weight:800;color:var(--cyan);text-shadow:0 0 26px rgba(53,230,255,.7)}.prize-counter{margin-top:1.4rem;font-size:.85rem;letter-spacing:.2em;color:var(--text-dim)}#spectate-hint{position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);z-index:15;font-size:.75rem;letter-spacing:.1em;color:var(--text-dim);text-align:center;pointer-events:none;text-shadow:0 0 8px rgba(0,0,0,.8)}#spectate-state-banner{position:fixed;top:1.2rem;left:50%;transform:translate(-50%);z-index:15;font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px rgba(53,230,255,.6);pointer-events:none}
