*{margin:0;padding:0;box-sizing:border-box}:root{--pink: #ff8fb1;--pink-deep: #f06292;--blue: #7fc8f8;--blue-deep: #4aa3e0;--green: #9be29b;--cream: #fff8ef;--ink: #4a3f4c;--shadow: rgba(74, 63, 76, .25)}html,body{width:100%;height:100%;overflow:hidden;font-family:Segoe UI,Hiragino Maru Gothic ProN,Comic Sans MS,sans-serif;color:var(--ink);background:#bde3f5;-webkit-user-select:none;user-select:none}canvas.game{position:fixed;top:0;right:0;bottom:0;left:0;display:block}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui>*{pointer-events:auto}.hidden{display:none!important}button{font-family:inherit;font-weight:800;color:#fff;border:none;cursor:pointer;border-radius:18px;transition:transform .08s ease,filter .12s ease}button:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.06)}button:active{transform:translateY(1px) scale(.98)}.big{font-size:20px;padding:14px 28px;letter-spacing:.5px}.pink{background:var(--pink-deep);box-shadow:0 5px #c2497a,0 8px 14px var(--shadow)}.blue{background:var(--blue-deep);box-shadow:0 5px #34779f,0 8px 14px var(--shadow)}.green{background:#5cb85c;box-shadow:0 5px #3f8f3f,0 8px 14px var(--shadow)}.grey{background:#9a93a0;box-shadow:0 5px #6f6975}input[type=text]{font-family:inherit;font-size:18px;font-weight:700;color:var(--ink);background:#fff;border:3px solid #e8d9e0;border-radius:14px;padding:12px 16px;outline:none}input[type=text]:focus{border-color:var(--pink)}.card{background:#fff8eff0;border-radius:26px;box-shadow:0 12px 40px var(--shadow),inset 0 0 0 4px #fff9;padding:22px}#screen-home{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:20px 20px 20px max(5vw,24px);overflow-y:auto;pointer-events:none}#screen-home>*{pointer-events:auto}@media (max-width: 760px){#screen-home{align-items:center;padding:14px}.logo img{height:clamp(70px,10vh,120px)}}.logo{margin:auto 0 0;width:min(520px,94vw);display:flex;justify-content:center;flex-shrink:0;transform:rotate(-2deg);filter:drop-shadow(0 9px 22px var(--shadow))}.logo img{display:block;height:clamp(90px,16vh,200px);width:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.home-card{width:min(520px,94vw);display:flex;flex-direction:column;gap:14px;margin-bottom:auto;flex-shrink:0}.home-card .row{display:flex;gap:10px;align-items:center}#name-input{flex:1;text-align:center}.cust-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#a08ca6;margin:4px 2px 2px}.cust-row{display:flex;gap:8px;flex-wrap:wrap}.cust-btn{min-width:52px;height:52px;border-radius:16px;background:#fff;color:var(--ink);font-size:24px;box-shadow:0 3px #decfd8;padding:0 8px}.cust-btn.sel{background:var(--pink);box-shadow:0 3px #c2497a;outline:3px solid #fff}.swatch{min-width:38px;height:38px;border-radius:12px;box-shadow:0 3px #00000026}.swatch.sel{outline:4px solid #fff;box-shadow:0 0 0 3px var(--ink)}.join-row{display:flex;gap:10px}#code-input{width:130px;text-align:center;text-transform:uppercase;letter-spacing:3px}.error-text{color:#d9435f;font-weight:800;min-height:22px;text-align:center}#btn-spin{position:absolute;right:14%;bottom:9%;font-size:18px;padding:12px 16px}@media (max-width: 760px){#btn-spin{display:none}}#hud-lobby{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#hud-lobby>*{pointer-events:auto}#room-code-box{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px}#room-code-box .code{font-size:30px;font-weight:900;letter-spacing:6px;color:var(--pink-deep)}#room-code-box .label{font-size:12px;font-weight:800;color:#a08ca6;text-transform:uppercase}#btn-copy{font-size:14px;padding:8px 14px}#btn-menu{font-size:16px;padding:8px 12px}#player-panel{position:absolute;top:18px;right:18px;width:230px;max-height:60vh;overflow-y:auto;padding:14px 16px}#player-panel h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#a08ca6;margin-bottom:8px}.player-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-weight:700;font-size:15px}.player-row .who{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-row .ok{color:#5cb85c}.player-row .crown{font-size:14px}.player-row .promote{font-size:12px;padding:2px 7px;background:#efe6ee;box-shadow:0 2px #d6c8d4;opacity:.55}.player-row .promote:hover{opacity:1}#host-panel{position:absolute;left:18px;top:18px;width:250px;padding:16px;display:flex;flex-direction:column;gap:10px}#host-panel h3{font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#a08ca6}#host-panel select{font-family:inherit;font-weight:700;font-size:15px;color:var(--ink);padding:8px 10px;border-radius:12px;border:3px solid #e8d9e0;background:#fff}#host-panel label{font-weight:800;font-size:13px}#host-panel input[type=range]{width:100%;accent-color:var(--pink-deep)}#btn-start{margin-top:4px}#lobby-bottom{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}.hold-hint{font-size:11px;font-weight:800;color:#ffffffe6;text-shadow:0 1px 3px var(--shadow);text-align:center;letter-spacing:.5px}#host-panel .hold-hint{color:#a08ca6;text-shadow:none;margin-top:-4px}.hint{font-size:13px;font-weight:700;color:#fff;text-shadow:0 2px 4px var(--shadow);background:#4a3f4c59;padding:6px 14px;border-radius:999px}#hud-match{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#alive-box{position:absolute;top:16px;right:18px;font-size:24px;font-weight:900;color:#fff;text-shadow:0 3px 0 var(--pink-deep),0 5px 10px var(--shadow)}#zone-box{position:absolute;top:16px;left:50%;transform:translate(-50%);font-size:16px;font-weight:800;color:#fff;text-shadow:0 2px 6px var(--shadow);background:#f06292bf;border-radius:999px;padding:7px 18px}#zone-box.warn{background:#d9435fe6;animation:pulse .8s infinite}@keyframes pulse{50%{transform:translate(-50%) scale(1.06)}}#killfeed{position:absolute;top:60px;right:18px;display:flex;flex-direction:column;gap:5px;align-items:flex-end}.feed-item{font-size:13px;font-weight:800;color:#fff;background:#4a3f4c8c;padding:5px 12px;border-radius:999px;animation:feedin .25s ease}@keyframes feedin{0%{transform:translate(30px);opacity:0}}#hp-wrap{position:absolute;bottom:26px;left:24px;width:260px}#hp-bar{height:26px;background:#ffffff8c;border-radius:999px;overflow:hidden;box-shadow:0 3px 8px var(--shadow),inset 0 0 0 3px #ffffffb3}#hp-fill{height:100%;width:100%;background:linear-gradient(180deg,#ff9ec0,#f06292);border-radius:999px;transition:width .18s ease}#hp-text{font-size:13px;font-weight:900;color:#fff;text-shadow:0 2px 4px var(--shadow);margin-top:4px}#shield-bar{height:10px;margin-bottom:4px;background:#ffffff73;border-radius:999px;overflow:hidden;box-shadow:0 2px 6px var(--shadow),inset 0 0 0 2px #fff9}#shield-fill{height:100%;width:0%;background:linear-gradient(180deg,#b8ecff,#5fc0f0);border-radius:999px;transition:width .15s ease}#speedlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .25s ease}#speedlines:before,#speedlines:after{content:"";position:absolute;top:0;bottom:0;width:16%;background:repeating-linear-gradient(95deg,transparent 0 20px,rgba(255,255,255,.55) 20px 22px,transparent 22px 46px);animation:streak .28s linear infinite}#speedlines:before{left:0;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent);mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent)}#speedlines:after{right:0;transform:scaleX(-1);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent);mask-image:linear-gradient(90deg,rgba(0,0,0,.8),transparent)}#speedlines.on{opacity:.22}#chat-box{position:absolute;left:16px;bottom:122px;width:330px;pointer-events:none;z-index:40;display:flex;flex-direction:column;gap:4px}#chat-log{display:flex;flex-direction:column;gap:3px}.chat-line{background:#35282f8c;color:#fff;border-radius:10px;padding:3px 10px;font-size:13px;width:fit-content;max-width:100%;overflow-wrap:break-word;transition:opacity .85s ease}.chat-line b{color:#ffb7d0;margin-right:7px}.chat-line.team b{color:#a5ffb8}.chat-line.fade{opacity:0}.chat-line.sysmsg{background:#35282f52;color:#e3d5ee;font-style:italic;font-size:12px}#chat-entry{display:flex;gap:6px;align-items:center;pointer-events:auto}#chat-entry.hidden{display:none}#chat-scope{font-size:12px;font-weight:700;color:#fff;background:#35282f99;border-radius:8px;padding:4px 8px;white-space:nowrap}#chat-input{flex:1;border:none;border-radius:10px;padding:6px 10px;font:inherit;font-size:13px;background:#fffffff0;outline:2px solid #ff8fb1}#chat-hint{font-size:11px;color:#ffffffb3;text-shadow:0 1px 2px rgba(53,40,47,.6)}#chat-hint.hidden{display:none}.promote.kick{background:#f3d7dc}.promote.kick:hover{background:#e8a3ad}#public-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;max-height:min(180px,24vh);overflow-y:auto}#public-list.hidden{display:none}.public-row{display:flex;align-items:center;gap:8px;background:#fff5facc;border:2px solid #f3d7e3;border-radius:10px;padding:6px 10px;font-size:13px}.public-row .who{font-weight:700;color:#b3567a;white-space:nowrap}.public-row .meta{color:#a08ca6;font-size:12px;flex:1;text-align:right;margin-right:4px}.public-empty{color:#a08ca6;font-size:13px;text-align:center;padding:8px}.check-hint{font-weight:500;color:#a08ca6;font-size:12px}.team-box{border:2px solid #f3d7e3;border-radius:12px;padding:4px 8px 6px;margin:6px 0;background:#fff5fa8c}.team-head{display:flex;align-items:center;gap:8px;font-weight:700;color:#b3567a;font-size:13px;padding:2px 2px 4px}.team-head .seats{color:#a08ca6;font-weight:600}.team-head.loose{color:#a08ca6;margin-top:8px}.join-btn{margin-left:auto;border:none;border-radius:8px;padding:3px 12px;font-weight:700;cursor:pointer;background:#7fc8f8;color:#fff}.join-btn.leave{background:#e8b3c3}.join-btn:hover{filter:brightness(1.08)}#shield-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(ellipse at center,transparent 56%,rgba(143,216,255,.14) 78%,rgba(110,190,240,.34) 100%)}@keyframes streak{0%{background-position:0 0}to{background-position:-46px 0}}#slots{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;gap:8px}.slot{width:58px;height:58px;border-radius:16px;background:#fff8efbf;box-shadow:0 4px 10px var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;font-size:24px}.slot.active{outline:4px solid var(--pink-deep);background:#fff;transform:translateY(-6px)}.slot .key{position:absolute;top:-7px;left:-5px;background:var(--ink);color:#fff;font-size:10px;font-weight:900;width:18px;height:18px;border-radius:6px;display:flex;align-items:center;justify-content:center}.slot .ammo{font-size:10px;font-weight:900;color:var(--ink);line-height:1}.slot.empty{opacity:.45}.slot.reloading{animation:wiggle .5s infinite}@keyframes wiggle{25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}#crosshair.hidden{display:none}#crosshair{position:absolute;left:50%;top:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:#ffffffe6;box-shadow:0 0 4px #00000080}#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;font-weight:900;color:#ffe08a;text-shadow:0 2px 4px var(--shadow);opacity:0}#hitmarker.show{animation:hitpop .3s ease}@keyframes hitpop{0%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}#pickup-prompt{position:absolute;left:50%;bottom:120px;transform:translate(-50%);font-size:15px;font-weight:800;color:#fff;background:#4a3f4c99;border-radius:999px;padding:8px 18px}#pickup-prompt .key-badge{background:#fff;color:var(--ink);border-radius:6px;padding:1px 7px;font-weight:900;margin-right:6px}#vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;box-shadow:inset 0 0 120px #d9435f00;transition:box-shadow .25s ease}#vignette.hurt{box-shadow:inset 0 0 140px #d9435fbf}#vignette.zone{box-shadow:inset 0 0 160px #f0629299}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#4a3f4c59;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}#countdown-num{font-size:150px;font-weight:900;color:#fff;text-shadow:0 6px 0 var(--pink-deep),0 14px 30px var(--shadow);animation:countpop 1s ease infinite}@keyframes countpop{0%{transform:scale(1.35)}30%{transform:scale(1)}}.overlay h1{font-size:48px;font-weight:900;color:#fff;text-shadow:0 4px 0 var(--pink-deep),0 10px 24px var(--shadow);text-align:center}.overlay h2{font-size:22px;font-weight:800;color:#fff;text-shadow:0 2px 8px var(--shadow)}.overlay .btn-row{display:flex;gap:14px}.placements{width:min(400px,90vw);max-height:44vh;overflow-y:auto;padding:16px 20px}.place-row{display:flex;gap:10px;padding:6px 0;font-weight:800;font-size:16px;align-items:center}.place-row .place{width:44px;color:var(--pink-deep)}.place-row .who{flex:1}.place-row .kills{color:#a08ca6;font-size:13px}.place-row.me{background:#ffe9f1;border-radius:10px;padding-left:8px;padding-right:8px}#spectate-bar{position:absolute;bottom:108px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:12px 18px}#spectate-bar .who{font-weight:900;font-size:18px}#spectate-bar button{font-size:14px;padding:8px 14px}#overlay-menu .card{display:flex;flex-direction:column;gap:12px;width:min(340px,90vw)}#overlay-menu label{font-weight:800;font-size:13px}#overlay-menu input[type=range]{width:100%;accent-color:var(--pink-deep)}#open-bar{position:absolute;left:50%;top:55%;transform:translate(-50%);width:130px;height:10px;background:#ffffff59;border-radius:999px;overflow:hidden;box-shadow:0 2px 6px var(--shadow);pointer-events:none}#open-fill{height:100%;width:0%;background:linear-gradient(90deg,#ffd54a,#f06292);border-radius:999px}#equip-label{position:absolute;bottom:92px;left:50%;transform:translate(-50%);font-size:15px;font-weight:800;color:#fff;text-shadow:0 2px 6px var(--shadow);background:#4a3f4ca6;padding:7px 16px;border-radius:999px;animation:feedin .2s ease;pointer-events:none;white-space:nowrap}.guide-card{width:min(460px,92vw);max-height:86vh;overflow-y:auto}.guide-tip{font-size:13.5px;font-weight:600;background:#ffe9f1;border-radius:12px;padding:10px 14px;margin-bottom:6px;line-height:1.45}.guide-section{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1.5px;color:#a08ca6;margin:10px 2px 4px}.guide-row{display:flex;align-items:baseline;gap:8px;padding:3px 0}.guide-row .gi{font-size:18px;width:26px;text-align:center}.guide-row .gn{font-weight:900;font-size:14px;white-space:nowrap}.guide-row .gd{font-size:12.5px;color:#7a6f80;font-weight:600}#btn-guide{font-size:16px;padding:8px 13px}#scope{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at center,transparent 24%,rgba(38,28,35,.93) 25.5%)}#scope:before,#scope:after{content:"";position:absolute;left:50%;top:50%;background:#3a2b33a6}#scope:before{width:44%;height:2px;transform:translate(-50%,-50%)}#scope:after{width:2px;height:44%;transform:translate(-50%,-50%)}.slot-icon{width:30px;height:30px}.hud-icon{width:28px;height:28px;vertical-align:-5px}.cust-btn img{width:46px;height:46px;border-radius:12px;display:block}img.gi{width:26px;height:26px;align-self:center}#toast{position:absolute;top:84px;left:50%;transform:translate(-50%);font-size:15px;font-weight:800;color:#fff;background:#4a3f4cbf;padding:9px 20px;border-radius:999px;opacity:0;transition:opacity .25s ease;pointer-events:none}#toast.show{opacity:1}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#decfd8;border-radius:4px}#touch-ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#touch-ui>*{pointer-events:auto}#joy-base{position:fixed;width:110px;height:110px;border-radius:50%;background:#ffffff2e;border:2px solid rgba(255,255,255,.45);pointer-events:none}#joy-knob{position:absolute;left:31px;top:31px;width:48px;height:48px;border-radius:50%;background:#ffffff8c}#touch-btns{position:fixed;right:14px;bottom:16px;display:grid;grid-template-columns:repeat(2,60px);gap:10px;justify-items:center}.tb{width:58px;height:58px;border-radius:50%;font-size:22px;background:#f06292bf;box-shadow:0 3px 8px var(--shadow);color:#fff}.tb-big{width:76px;height:76px;font-size:30px;grid-column:span 2;background:#f06292e6}.tb.active{background:#ffd54af2;outline:3px solid #fff}#tb-menu{position:fixed;left:12px;top:10px;width:44px;height:44px;font-size:17px;background:#4a3f4c8c}#tb-chat{position:fixed;left:64px;top:10px;width:44px;height:44px;font-size:17px;background:#4a3f4c8c}#tb-chat.hidden{display:none}@media (max-height: 500px){.card{padding:12px;border-radius:18px}.logo img{height:70px}.home-card{gap:8px}.cust-btn{min-width:42px;height:42px;font-size:19px}.cust-btn img{width:36px;height:36px}.big{font-size:16px;padding:10px 18px}#player-panel{max-height:42vh}#host-panel{width:210px}#lobby-bottom{bottom:8px}.hint{display:none}.slot{width:50px;height:50px}#hp-wrap{width:180px;bottom:16px;left:16px}}.touch-mode #crosshair{width:10px;height:10px}#grade{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 30%,#fff0f880,#ffd0e46b 55%,#ffb2d280);mix-blend-mode:soft-light}.touch-mode #slots{pointer-events:auto}.touch-mode .slot{width:46px;height:46px}.panel-tab{display:none}.touch-mode .panel-tab{display:flex;align-items:center;justify-content:center;position:absolute;width:44px;height:44px;border:none;border-radius:12px;font-size:20px;background:#fffafce6;box-shadow:0 3px 8px #35282f40;cursor:pointer}.touch-mode .panel-tab.hidden{display:none}#tab-settings{left:12px;top:64px}#tab-mascots{right:12px;top:64px}.touch-mode #host-panel:not(.open){display:none}.touch-mode #player-panel:not(.open){display:none}.touch-mode #host-panel.open{top:116px;left:10px;max-height:66vh;overflow-y:auto;width:min(240px,60vw)}.touch-mode #player-panel.open{top:116px;right:10px;max-height:66vh;overflow-y:auto;width:min(260px,62vw)}.touch-mode #chat-box{left:10px;top:112px;bottom:auto;width:min(300px,46vw)}.check-row{display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.check-row input{width:18px;height:18px;accent-color:var(--pink-deep);cursor:pointer}.options-toggle{width:100%;border:2px solid #f3d7e3;border-radius:10px;background:#fff5fab3;color:#b3567a;font-weight:700;font-size:13px;padding:7px 10px;cursor:pointer;text-align:left}.options-toggle:hover{background:#ffebf4f2}#options-arrow{float:right}#host-options{display:flex;flex-direction:column;gap:6px}#host-options.hidden{display:none}.pick-card{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:min(580px,94vw)}.pick-card h3{font-size:22px;text-align:center}#pick-map-name{font-size:13px;font-weight:700;color:#a08ca6}#pick-wrap{position:relative;width:min(520px,76vmin);aspect-ratio:1}#pick-canvas{width:100%;height:100%;border-radius:14px;box-shadow:0 4px 14px var(--shadow)}#pick-dots{position:absolute;top:0;right:0;bottom:0;left:0}.pick-dot{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid #fff;background:var(--pink-deep, #e2669a);color:#fff;font-size:12px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 2px 6px var(--shadow);animation:dotpulse 1.4s ease-in-out infinite;transition:transform .12s ease,background .15s ease;padding:0}.pick-dot:hover{transform:scale(1.35);animation:none}.pick-dot.taken{background:#8d99ae;animation:none;cursor:not-allowed}.pick-dot.mine{background:#ffb43a;animation:none;transform:scale(1.45);z-index:2}@keyframes dotpulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}#pick-status{font-size:13px;font-weight:700;color:#7a6a80;text-align:center}#pick-timerbar{width:80%;height:10px;border-radius:6px;background:#4a3f4c26;overflow:hidden}#pick-timerfill{height:100%;width:100%;border-radius:6px;background:linear-gradient(90deg,#ffb43a,var(--pink-deep, #e2669a))}#pickup-prompt.deny{background:#e8863a;color:#fff;animation:denyshake .35s ease}@keyframes denyshake{0%,to{transform:translate(-50%)}25%{transform:translate(calc(-50% - 6px))}50%{transform:translate(calc(-50% + 6px))}75%{transform:translate(calc(-50% - 3px))}}