:root{--bg: #7ec9f5;--panel: rgba(255, 255, 255, .92);--panel-border: rgba(58, 44, 105, .14);--ink: #3a2c5a;--ink-dim: #8d82b5;--orange: #ff9d3b;--orange-deep: #f5822a;--pink: #ff5fd0;--sky: #35c1f0;--danger: #e6455f;--green: #43d66e}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg);color:var(--ink);font-family:"Baloo 2",Fredoka,Trebuchet MS,Inter,system-ui,sans-serif;overflow:hidden;user-select:none}#app,#stage-host{position:fixed;inset:0}canvas{display:block}.hidden{display:none!important}#topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;pointer-events:none;z-index:5}#match-title{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:2px solid var(--panel-border);border-radius:999px;padding:6px 18px;box-shadow:0 3px #3a2c692e}#match-name{font-weight:800;letter-spacing:.14em;font-size:14px;color:var(--ink)}#match-name:before{content:"🍬 "}#match-sub{font-size:11px;color:var(--ink-dim);letter-spacing:.05em;font-weight:600}#match-stats{display:flex;gap:10px}.stat{display:flex;flex-direction:column;align-items:center;background:var(--panel);border:2px solid var(--panel-border);border-radius:16px;padding:4px 14px;box-shadow:0 3px #3a2c692e}.stat-label{font-size:9px;letter-spacing:.2em;color:var(--ink-dim);font-weight:700}.stat span:last-child{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05}#stat-alive{color:var(--sky)}#stat-zone{color:#e0457f;font-size:14px!important;line-height:24px}#stat-time{color:var(--ink)}#killfeed{position:fixed;top:52px;right:14px;z-index:5;display:flex;flex-direction:column;gap:5px;align-items:flex-end;pointer-events:none}.feed-row{background:var(--panel);border:2px solid var(--panel-border);border-radius:999px;padding:4px 14px;font-size:12px;font-weight:700;letter-spacing:.02em;box-shadow:0 3px #3a2c6926;animation:feedIn .3s cubic-bezier(.2,1.6,.4,1);white-space:nowrap}.feed-row .victim{text-decoration:line-through;opacity:.75}.feed-row .zone-kill{color:var(--danger);font-weight:800}.feed-row.fading{opacity:0;transition:opacity .6s}@keyframes feedIn{0%{transform:translate(28px) scale(.85);opacity:0}}#legend{position:fixed;left:12px;top:50%;transform:translateY(-50%);z-index:4;display:flex;flex-direction:column;gap:2px;background:var(--panel);border:2px solid var(--panel-border);border-radius:16px;padding:8px;max-height:60vh;overflow:hidden;box-shadow:0 4px #3a2c692e}.legend-row{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:2.5px 6px;border-radius:8px;cursor:pointer}.legend-row:hover{background:#ff9d3b26}.legend-row.dead{opacity:.35;text-decoration:line-through}.legend-row.active{outline:2px solid var(--orange)}.legend-dot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(58,44,105,.5);box-shadow:inset -1px -2px #0000002e}.legend-elim{margin-left:auto;color:var(--ink-dim);font-size:10px}#bottombar{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:10px 14px 12px;z-index:5}#btn-play{width:42px;height:42px;border-radius:50%;border:none;background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff;font-size:16px;cursor:pointer;box-shadow:0 4px 0 var(--orange-deep),0 6px 14px #3a2c6940;transition:transform .08s}#btn-play:hover{transform:scale(1.08)}#btn-play:active{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-deep)}#tick-label{font-size:12px;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums;width:74px;background:var(--panel);border-radius:999px;padding:3px 10px;border:2px solid var(--panel-border)}#timeline-wrap{position:relative;flex:1;height:26px;display:flex;align-items:center}#timeline-track{position:absolute;left:0;right:0;height:8px;border-radius:999px;background:#ffffffbf;border:2px solid var(--panel-border)}#timeline-progress{position:absolute;left:0;height:8px;border-radius:999px;width:0;background:linear-gradient(90deg,#ffd93b,var(--orange),var(--pink))}#timeline-markers{position:absolute;left:0;right:0;height:12px}.tl-marker{position:absolute;top:0;width:4px;height:12px;border-radius:2px;transform:translate(-50%);box-shadow:0 1px 3px #3a2c6959}#timeline{position:absolute;width:100%;appearance:none;background:transparent;height:26px;cursor:pointer;margin:0}#timeline::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--orange);box-shadow:0 2px 6px #3a2c6959;cursor:grab}#speed-group{display:flex;gap:4px;background:var(--panel);border:2px solid var(--panel-border);border-radius:999px;padding:3px}.speed{border:none;background:transparent;color:var(--ink-dim);font-size:11.5px;padding:5px 9px;border-radius:999px;cursor:pointer;font-weight:800;font-family:inherit}.speed.active{color:#fff;background:linear-gradient(180deg,var(--orange),var(--orange-deep));box-shadow:0 2px 0 var(--orange-deep)}#cam-select{background:var(--panel);color:var(--ink);border:2px solid var(--panel-border);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700;max-width:230px;font-family:inherit}#winner-modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#3a2c6959;backdrop-filter:blur(4px);overflow:hidden}.modal-card{background:#fffdf5;border:3px solid var(--panel-border);border-radius:26px;padding:34px 56px;text-align:center;box-shadow:0 8px #3a2c6940,0 24px 60px #3a2c6959;animation:modalIn .5s cubic-bezier(.2,1.6,.4,1)}@keyframes modalIn{0%{transform:scale(.6) rotate(-3deg);opacity:0}}.crown{font-size:44px;filter:drop-shadow(0 4px 8px rgba(255,193,47,.6));animation:crownBob 1.6s ease-in-out infinite}@keyframes crownBob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}#winner-name{font-size:32px;font-weight:800;margin:6px 0 2px;letter-spacing:.03em}#winner-sub{font-size:12px;color:var(--ink-dim);letter-spacing:.18em;text-transform:uppercase;font-weight:700}#podium{margin-top:18px;list-style:none;font-size:14px;font-weight:700}#podium li{padding:4px 0;display:flex;gap:10px;justify-content:center;align-items:center}#podium .rank{color:var(--ink-dim);width:20px}.confetti-piece{position:absolute;top:-24px;border-radius:3px;animation:confettiFall linear forwards;pointer-events:none;z-index:1}@keyframes confettiFall{0%{transform:translateY(-30px) rotate(0);opacity:1}85%{opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:.4}}#loading{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,#a8dcff,#7ec9f5 55%,#5db2ea)}.load-card{width:340px;text-align:center;background:var(--panel);border:3px solid var(--panel-border);border-radius:24px;padding:30px 26px 26px;box-shadow:0 8px #3a2c6933}.logo{font-size:25px;font-weight:800;letter-spacing:.12em;color:var(--ink);line-height:1.08}.logo span{color:var(--pink)}.logo b{color:var(--orange-deep);font-weight:800}.logo i{color:var(--pink);font-style:normal;font-size:.74em;vertical-align:.14em;margin:0 .08em}.logo-kana{display:block;font-size:10px;font-weight:800;color:var(--pink);letter-spacing:.42em;text-indent:.42em;margin:0 0 2px}.logo.small{font-size:18px;margin-bottom:18px}.logo.small .logo-kana{font-size:8.5px;margin-bottom:1px}#load-status{margin:18px 0 10px;font-size:12px;color:var(--ink-dim);letter-spacing:.06em;font-weight:700}.bar{height:10px;background:#ece7f8;border-radius:999px;overflow:hidden;border:2px solid var(--panel-border)}#load-bar{height:100%;width:0;background:linear-gradient(90deg,#ffd93b,var(--orange),var(--pink));border-radius:999px;transition:width .15s}#picker{position:fixed;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,#a8dcff,#7ec9f5 55%,#5db2ea)}.picker-wrap{position:relative}.hanko{position:absolute;top:-16px;right:10px;z-index:3;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;line-height:1;letter-spacing:.02em;font-family:"Baloo 2",Hiragino Maru Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif;background:radial-gradient(circle at 32% 28%,#ff6d86,var(--danger));border:2.5px solid #fff;box-shadow:0 3px #3a2c6947,inset 0 0 0 2px #fff6;transform:rotate(9deg);pointer-events:none}#hero-host{position:absolute;inset:0;pointer-events:none;z-index:2}.picker-card{position:relative;z-index:1;background:var(--panel);border:3px solid var(--panel-border);border-radius:26px;padding:30px 36px;width:470px;max-height:76vh;overflow:auto;box-shadow:0 8px #3a2c6933}.picker-row{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;margin:7px 0;border-radius:14px;border:2px solid var(--panel-border);cursor:pointer;font-size:13.5px;font-weight:700;background:#fff;transition:transform .08s}.picker-row:hover{border-color:var(--orange);transform:translateY(-1px);box-shadow:0 3px #ff9d3b66}.picker-meta{color:var(--ink-dim);font-size:11px;font-weight:600}.upload{display:block;margin-top:16px;text-align:center;font-size:12px;color:var(--ink-dim);cursor:pointer;font-weight:700}.upload:hover{color:var(--orange)}.upload input{display:none}@keyframes mascot-press{0%,to{transform:translateY(0);box-shadow:0 4px 0 var(--orange-deep)}35%{transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--orange-deep)}70%{transform:translateY(-2px) scale(1.03)}}.mascot-press{animation:mascot-press .5s ease-out}@keyframes mascot-poke{0%,to{border-color:var(--panel-border);transform:translate(0)}20%{border-color:var(--orange);transform:translate(-2px)}50%{transform:translate(2px) scale(1.02)}}.mascot-poke{animation:mascot-poke .6s ease-out}@keyframes mascot-boop{0%,to{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-1.6deg)}65%{transform:translateY(1px) rotate(1.2deg)}}.mascot-boop{animation:mascot-boop .6s ease-out}.home-actions{margin-top:20px;display:flex;flex-direction:column;gap:10px}.home-actions .upload{margin-top:0}#browse-replays-btn{padding:12px 16px;height:46px;box-sizing:border-box;border-radius:999px;cursor:pointer;background:#fff;color:var(--ink);border:3px solid var(--panel-border);font-weight:800;letter-spacing:.1em;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px #3a2c6933;transition:transform .08s;font-family:inherit}#browse-replays-btn:hover{transform:scale(1.03);border-color:var(--orange)}#browse-replays-btn:active{transform:translateY(2px);box-shadow:0 2px #3a2c6933}.count-badge{background:var(--sky);color:#fff;border-radius:999px;padding:2px 9px;font-size:11px;letter-spacing:0;font-weight:800}#replays-page{position:fixed;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 20%,#a8dcff,#7ec9f5 55%,#5db2ea)}body.ambient #picker,body.ambient #replays-page{background:radial-gradient(ellipse at 30% 20%,#a8dcff40,#7ec9f573 55%,#5db2eaad)}.replays-card{background:var(--panel);border:3px solid var(--panel-border);border-radius:26px;box-shadow:0 8px #3a2c6933;display:flex;flex-direction:column;width:520px;max-height:80vh;padding:22px 26px}.replays-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}.replays-title{margin-bottom:0;font-size:14px}#replays-back{padding:7px 14px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;background:#fff;color:var(--ink-dim);border:2px solid var(--panel-border);font-family:inherit;transition:transform .08s}#replays-back:hover{color:var(--orange);border-color:var(--orange);transform:scale(1.05)}.replays-list{flex:1;overflow-y:auto;min-height:120px}#replays-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding-top:12px;border-top:2px dashed var(--panel-border);margin-top:10px}#replays-nav button{padding:7px 16px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:800;background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff;border:none;box-shadow:0 3px 0 var(--orange-deep);font-family:inherit;transition:transform .08s}#replays-nav button:hover:not(:disabled){transform:scale(1.05)}#replays-nav button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--orange-deep)}#replays-nav button:disabled{opacity:.4;cursor:default;filter:grayscale(.6)}#replays-page-indicator{color:var(--ink-dim);font-size:12px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums;min-width:56px;text-align:center}.play-join{margin-top:22px;border-top:2px dashed var(--panel-border);padding-top:18px}.play-join h3{color:var(--pink);font-size:14px;letter-spacing:.1em;font-weight:800}.play-join p{color:var(--ink-dim);font-size:12px;font-weight:600;margin:6px 0 10px}.play-join input{background:#fff;border:2px solid var(--panel-border);color:var(--ink);margin-top:12px;padding:0 14px;height:46px;box-sizing:border-box;border-radius:999px;font-size:13px;width:100%;outline:none;font-family:inherit;font-weight:600}.play-join input:focus{border-color:var(--orange)}#play-name::placeholder{font-style:italic;color:#a99fc9}.play-join button{margin:10px 0 0;padding:0 20px;height:46px;box-sizing:border-box;border-radius:999px;cursor:pointer;background:linear-gradient(180deg,var(--orange),var(--orange-deep));color:#fff;border:none;font-weight:800;letter-spacing:.1em;font-size:12.5px;box-shadow:0 4px 0 var(--orange-deep);transition:transform .08s;font-family:inherit}.play-join button:hover{transform:scale(1.05)}.play-join button:active{transform:translateY(2px);box-shadow:0 2px 0 var(--orange-deep)}#play-hud{position:fixed;left:14px;bottom:64px;z-index:6;background:var(--panel);border:2px solid var(--panel-border);border-radius:18px;padding:12px 16px;min-width:250px;box-shadow:0 4px #3a2c692e}#play-status{font-size:12.5px;color:var(--ink);font-weight:800;letter-spacing:.04em;margin-bottom:6px}.pbar{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11px;font-weight:700}.pbar span{width:48px;color:var(--ink-dim);font-variant-numeric:tabular-nums}.pbar div{flex:1;height:10px;background:#ece7f8;border-radius:999px;overflow:hidden;border:2px solid var(--panel-border)}.pbar i{display:block;height:100%;border-radius:999px}.pcd{font-size:11px;color:var(--ink-dim);margin-top:4px;font-weight:700}#play-keys{margin-top:8px;font-size:10px;color:var(--ink-dim);letter-spacing:.03em;font-weight:700}#play-replay{margin-top:6px;font-size:12px;font-weight:700}#play-replay a{color:var(--orange)}#btn-audio{width:34px;height:40px;border-radius:14px;background:var(--panel);border:2px solid var(--panel-border);font-size:16px;cursor:pointer;line-height:1;box-shadow:0 3px #3a2c692e;transition:transform .08s;font-family:inherit;pointer-events:auto}#btn-audio:hover{transform:scale(1.1)}#btn-audio:active{transform:translateY(2px);box-shadow:none}body.playing #stage-host{cursor:none}body.playing #bottombar{display:none}#reticle{position:fixed;left:0;top:0;z-index:8;width:34px;height:34px;pointer-events:none;display:flex;align-items:center;justify-content:center}#reticle s{position:absolute;inset:0;border-radius:50%;border:2.5px solid var(--gun, rgba(255, 255, 255, .95));box-shadow:0 0 6px #3a2c69b3,inset 0 0 4px #3a2c6980;transition:transform .07s,border-color .07s}#reticle b{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 4px #3a2c69cc}#reticle.fire s{transform:scale(.8);border-color:var(--orange)}#reticle.cd s{border-color:var(--danger);transform:scale(1.12)}#reticle.sprint s{border-color:var(--orange);border-style:dashed}#vignette{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(230,45,70,.55) 100%);opacity:0;transition:opacity .5s ease-out}#dmg-arrow{position:fixed;left:50%;top:50%;z-index:7;pointer-events:none}#dmg-arrow i{position:absolute;left:-14px;top:-150px;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid var(--danger);filter:drop-shadow(0 0 6px rgba(230,69,95,.8));animation:arrowPop .7s ease-out}@keyframes arrowPop{0%{opacity:0;transform:scale(1.7)}25%{opacity:1;transform:scale(1)}to{opacity:.85}}#play-banner{position:fixed;top:22%;left:50%;transform:translate(-50%);z-index:8;pointer-events:none;font-size:30px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-shadow:0 3px 0 rgba(58,44,105,.45),0 0 18px rgba(255,255,255,.4);animation:bannerPop .35s cubic-bezier(.2,1.8,.4,1);white-space:nowrap}#play-banner.zone-warn{color:var(--danger);animation:zonePulse .9s ease-in-out infinite}@keyframes bannerPop{0%{transform:translate(-50%) scale(.4);opacity:0}}@keyframes zonePulse{0%,to{opacity:1}50%{opacity:.45}}#play-over{position:fixed;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;background:#3a2c6947;backdrop-filter:blur(2px);pointer-events:none}#play-over .modal-card{pointer-events:auto}#play-over-title{font-size:30px;font-weight:800;margin:6px 0 2px;letter-spacing:.04em;color:var(--ink)}#play-over-sub{font-size:12px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase;font-weight:700}#play-over-sub a{color:var(--orange);text-transform:none;letter-spacing:0}#play-over-actions{margin-top:18px}#play-leave{padding:10px 22px;border-radius:999px;cursor:pointer;background:#fff;color:var(--ink);border:3px solid var(--panel-border);font-weight:800;letter-spacing:.1em;font-size:12px;font-family:inherit;box-shadow:0 4px #3a2c6933;transition:transform .08s}#play-leave:hover{transform:scale(1.05);border-color:var(--orange)}.pbar.mini div{height:6px}.pbar.mini span{font-size:9.5px;width:44px}.picker-card{text-align:center}.picker-card .play-join p{max-width:42ch;margin-inline:auto}.picker-card .play-join input{text-align:center}.picker-card .play-join button,.picker-card .home-actions button,.picker-card .home-actions .upload{width:100%}.picker-card .logo.small{animation:logo-bob 2.6s ease-in-out infinite}@keyframes logo-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.home-keys{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:16px}.home-keys kbd{font-family:inherit;font-size:10.5px;font-weight:800;color:var(--ink);background:#fff;border:2px solid var(--panel-border);border-radius:7px;padding:3px 7px;box-shadow:0 2px 0 var(--panel-border);animation:key-glow 2.8s ease-in-out infinite}.home-keys kbd:nth-child(1){animation-delay:0s}.home-keys kbd:nth-child(2){animation-delay:.14s}.home-keys kbd:nth-child(3){animation-delay:.28s}.home-keys kbd:nth-child(4){animation-delay:.42s}.home-keys kbd:nth-child(6){animation-delay:.56s}.home-keys kbd:nth-child(8){animation-delay:.7s}.home-keys kbd:nth-child(9){animation-delay:.84s}.home-keys kbd:nth-child(10){animation-delay:.98s}@keyframes key-glow{0%,12%,to{border-color:var(--panel-border);transform:translateY(0);box-shadow:0 2px 0 var(--panel-border)}6%{border-color:var(--orange);transform:translateY(-2px);box-shadow:0 4px #ff9d3b73}}.home-keys-sep{color:var(--ink-dim);font-weight:800;font-size:11px}.home-keys-wide{padding:3px 12px}.home-tip{margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--ink-dim)}