:root{--bg:#050914;--panel:#0c1427;--panel2:#121f39;--line:#30456d;--text:#f7f9ff;--muted:#94a7cc;--accent:#7c5cff;--yellow:#ffe36e;--green:#38d996;--cyan:#57e6ff;--red:#ff3d6e}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:16px;background:radial-gradient(circle at 50% -10%,#20315b 0,#091124 38%,#040711 75%);color:var(--text);font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}.app{width:min(1660px,100%);margin:auto;display:grid;grid-template-columns:minmax(0,1fr) 315px;gap:16px}.panel{background:rgba(12,20,39,.95);border:3px solid var(--line);box-shadow:9px 9px 0 rgba(0,0,0,.45)}.game-panel{padding:12px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.brand{font-weight:1000;font-size:20px;letter-spacing:1px}.brand span{color:#a68eff}.subbrand{font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:3px}.status{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.pill{background:#071022;border:2px solid #293d63;padding:6px 8px;font-size:10px;color:var(--muted)}.pill b{color:white;margin-left:4px}.connected{color:var(--green)!important}.disconnected{color:var(--red)!important}.arena{position:relative;aspect-ratio:16/9;min-height:620px;overflow:hidden;background:#07101d;border:3px solid #405980;box-shadow:inset 0 0 80px rgba(0,0,0,.6)}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#minimap{position:absolute;right:14px;top:76px;width:230px;height:145px;z-index:5;border:3px solid #405980;background:#07101d;box-shadow:5px 5px 0 #0008}#vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(circle,transparent 48%,rgba(0,0,0,.48) 100%)}#eventFlash{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;background:white}.overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:rgba(3,7,15,.9)}.hidden{display:none!important}.overlay h1{font-size:clamp(30px,5vw,58px);margin:0 0 10px;text-shadow:5px 5px 0 #000}.overlay p{max-width:650px;color:var(--muted);line-height:1.6}.join-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.join-row input{width:min(280px,72vw);padding:13px;background:#071126;border:3px solid var(--line);color:white;font:inherit;outline:none}.join-row input:focus{border-color:var(--accent)}button{padding:13px 20px;border:0;background:var(--accent);color:white;font:inherit;font-weight:1000;cursor:pointer;box-shadow:0 6px 0 #4933ae}button:active{transform:translateY(3px);box-shadow:0 3px 0 #4933ae}.error{min-height:20px;color:#ff9eb7;margin-top:10px}.phase-banner,.event-banner{position:absolute;left:50%;transform:translateX(-50%);z-index:6;text-align:center;background:#050b17e8;border:2px solid var(--line);box-shadow:4px 4px 0 #0008;padding:8px 14px;pointer-events:none}.phase-banner{top:12px;min-width:300px}.phase-banner strong{display:block;color:var(--yellow);font-size:14px}.phase-banner span{color:var(--muted);font-size:10px}.event-banner{top:74px;border-color:var(--accent)}.event-banner b{display:block;color:#fff}.event-banner span{font-size:10px;color:var(--muted)}.ability-hud{position:absolute;left:16px;bottom:16px;z-index:6;width:220px;padding:9px;background:#050b17eb;border:2px solid var(--line)}.ability-label{display:flex;justify-content:space-between;font-size:10px}.ability-label b{background:var(--yellow);color:#111;padding:3px 5px}.ability-track{height:9px;margin-top:6px;background:#081020;border:1px solid #425b85}.ability-track div{height:100%;background:var(--yellow)}.buffs{display:flex;gap:5px;margin-top:7px;min-height:17px}.buff{padding:2px 5px;border:1px solid;font-size:8px}.feed{position:absolute;left:16px;top:84px;z-index:6;width:290px;display:grid;gap:6px;pointer-events:none}.feed-item{padding:7px 9px;background:#050b17df;border-left:3px solid var(--accent);font-size:10px;animation:feedIn .2s ease}.feed-item.danger{border-color:var(--red)}.feed-item.good{border-color:var(--green)}@keyframes feedIn{from{opacity:0;transform:translateX(-12px)}}.spectator-hud{position:absolute;right:16px;bottom:16px;z-index:6;padding:8px;background:#050b17eb;border:2px solid var(--line);font-size:10px}.result-overlay{background:#050813d4}.result-overlay h1{color:var(--yellow)}.result-countdown{border:2px solid var(--line);padding:9px 13px;background:#071126}.sidebar{padding:17px;display:flex;flex-direction:column;gap:13px}.sidebar h2{margin:0}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.score-grid div{display:grid;text-align:center;padding:11px;background:#071126;border:2px solid var(--line)}.score-grid strong{font-size:27px}.score-grid div:first-child strong{color:var(--green)}.score-grid div:last-child strong{color:var(--red)}.score-grid span{font-size:9px;color:var(--muted)}.card{padding:12px;background:var(--panel2);border:2px solid var(--line)}.card h3{margin:0 0 7px;font-size:12px}.card p{font-size:11px;line-height:1.55;color:var(--muted)}.player-list{display:grid;gap:6px;max-height:285px;overflow:auto}.player-row{display:flex;align-items:center;gap:7px;padding:7px;background:#081326;border:1px solid #2a3e62;font-size:10px}.player-row.infected-row{border-color:#84304c}.swatch{width:12px;height:12px}.you-label,.role-label{margin-left:auto;font-size:8px;font-weight:900}.you-label{color:var(--yellow)}.role-infected{color:var(--red)}.role-survivor{color:var(--green)}.role-waiting{color:var(--muted)}.footer{margin-top:auto;color:#6d82aa;font-size:10px;line-height:1.5}@media(max-width:950px){.app{grid-template-columns:1fr}.sidebar{order:2}.arena{min-height:0}.topbar{align-items:flex-start;flex-direction:column}.status{justify-content:flex-start}}@media(max-width:650px){#minimap{width:135px;height:86px;top:105px;right:7px}.feed{width:220px;top:105px}.phase-banner{min-width:220px;max-width:65%}}

.infection-home-link{position:fixed;left:18px;top:14px;z-index:30;color:#efffe1;text-decoration:none;background:#0d2b18;border:3px solid #7ac943;padding:9px 12px;box-shadow:4px 4px 0 #000;font-weight:900}.account-welcome{margin:8px 0 14px;color:#b9c9e9;font-weight:700}.infection-profile-card{background:#0b1324;border:2px solid #344667;padding:12px;margin-bottom:14px}.infection-profile-card>div:first-child{display:flex;justify-content:space-between;align-items:center}.infection-profile-card span{font-size:11px;color:#95a7c9}.infection-profile-card strong{font-size:27px;color:#ffe36e}.xp-track{height:10px;background:#050914;border:1px solid #344667;margin:8px 0;overflow:hidden}.xp-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7c5cff,#38d996)}.infection-profile-card small{color:#8799ba}.skin-editor-button{width:100%;margin-top:10px;background:#7c5cff;color:white;border:0;padding:10px;font-weight:900;cursor:pointer}.skin-modal{position:fixed;inset:0;z-index:100;background:rgba(3,6,13,.88);display:grid;place-items:center;padding:20px}.skin-modal.hidden{display:none}.skin-modal-card{position:relative;width:min(620px,100%);background:#111a30;border:3px solid #7c5cff;box-shadow:10px 10px 0 #000;padding:22px;color:#f5f7ff}.skin-close{position:absolute;right:12px;top:10px;background:transparent;color:white;border:0;font-size:30px;cursor:pointer}.skin-modal canvas{display:block;width:192px;height:192px;margin:14px auto;background:#080d19;border:3px solid #344667;image-rendering:pixelated}.skin-parts,.skin-palette{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.skin-parts button,.skin-editor-actions button{background:#17233d;color:#fff;border:2px solid #344667;padding:8px 11px;font-weight:800;cursor:pointer}.skin-parts button.active{border-color:#ffe36e;color:#ffe36e}.skin-palette button{width:34px;height:34px;border:3px solid #fff3;cursor:pointer}.skin-palette button.locked{filter:grayscale(1);opacity:.3;cursor:not-allowed}.skin-palette button.selected{outline:3px solid #fff;outline-offset:2px}.skin-editor-actions{display:flex;justify-content:flex-end;gap:10px}.hidden{display:none!important}@media(max-width:800px){.infection-home-link{position:static;display:inline-block;margin:10px}.skin-modal-card{max-height:92vh;overflow:auto}}
.skin-modal canvas{width:min(384px,100%);height:auto;aspect-ratio:1;touch-action:none;cursor:crosshair}.skin-palette button.eraser{background:#111827;color:#fff;font-size:24px;display:grid;place-items:center}.skin-modal-card>p{color:#aebddd;line-height:1.5}.skin-parts:empty{display:none}

.mobile-controls{display:none;position:absolute;inset:0;z-index:8;pointer-events:none}.touch-stick{position:absolute;left:22px;bottom:22px;width:132px;height:132px;border-radius:50%;background:rgba(5,11,23,.62);border:3px solid rgba(148,167,204,.55);box-shadow:0 0 0 6px rgba(0,0,0,.16);pointer-events:auto;touch-action:none}.touch-stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:rgba(166,142,255,.92);border:3px solid white;box-shadow:0 5px 0 rgba(0,0,0,.35);transform:translate(0,0)}.touch-dash{position:absolute;right:24px;bottom:30px;width:104px;height:104px;border-radius:50%;padding:0;background:var(--yellow);color:#111;border:4px solid #fff;box-shadow:0 7px 0 #8d7a22;pointer-events:auto;touch-action:manipulation;font-size:15px}.touch-dash:active{transform:translateY(4px);box-shadow:0 3px 0 #8d7a22}.skin-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:8px;max-height:190px;overflow:auto;padding:4px}.skin-palette button{min-width:34px;height:34px;padding:0;border:2px solid rgba(255,255,255,.28);box-shadow:none}.skin-palette button.selected{outline:3px solid white;outline-offset:2px}.skin-palette button.locked{filter:grayscale(.8) brightness(.45);position:relative}.skin-palette button.locked:after{content:'🔒';position:absolute;inset:0;display:grid;place-items:center;font-size:13px}.skin-modal-card{max-height:94vh;overflow:auto}.skin-modal-card canvas{touch-action:none}
@media (pointer:coarse),(max-width:900px){body{padding:0;overflow:hidden;overscroll-behavior:none}.infection-home-link{position:fixed;top:8px;left:8px;z-index:30;font-size:10px;padding:7px 9px}.app{display:block;width:100%;height:100dvh}.game-panel{height:100dvh;padding:0;border:0;box-shadow:none}.topbar{position:absolute;top:6px;left:86px;right:6px;z-index:12;margin:0;padding:5px 7px;background:rgba(5,11,23,.83);border:1px solid #30456d}.brand{font-size:13px}.subbrand{display:none}.status{gap:3px}.pill{font-size:8px;padding:4px 5px}.pill:nth-child(2),.pill:nth-child(4){display:none}.arena{width:100%;height:100dvh;min-height:0;aspect-ratio:auto;border:0}.sidebar{display:none}.mobile-controls{display:block}.ability-hud{left:50%;transform:translateX(-50%);bottom:12px;width:190px;padding:7px}.ability-label b{display:none}.feed{left:8px;top:72px;width:min(260px,68vw)}.feed-item{font-size:8px;padding:5px 7px}.phase-banner{top:50px;min-width:210px;max-width:70vw;padding:6px 9px}.phase-banner strong{font-size:11px}.phase-banner span{font-size:8px}.event-banner{top:94px}.spectator-hud{right:8px;bottom:145px}.overlay{padding:20px 14px}.overlay h1{font-size:34px}.overlay p{font-size:12px}.join-row{width:min(420px,94vw);display:grid}.join-row input,.join-row button{width:100%}#minimap{width:142px;height:90px;right:8px;top:104px}.skin-modal{padding:0}.skin-modal-card{width:100%;height:100dvh;max-height:none;border-radius:0;padding:16px 12px}.skin-modal-card h2{font-size:19px}.skin-modal-card p{font-size:11px}.skin-modal-card #skinPreview{width:min(88vw,420px);height:auto;margin:auto}.skin-palette{grid-template-columns:repeat(8,1fr);max-height:150px}.skin-editor-actions{position:sticky;bottom:0;background:#0c1427;padding:10px 0}.skin-editor-actions button{padding:12px 8px}}
@media (max-width:540px){.status .pill:nth-child(1),.status .pill:nth-child(3){display:none}.topbar{left:78px}.touch-stick{width:118px;height:118px;left:14px;bottom:18px}.touch-dash{width:92px;height:92px;right:16px;bottom:24px}.ability-hud{bottom:8px;width:160px}.skin-palette{grid-template-columns:repeat(7,1fr)}}

@keyframes infectionXpPop{0%{filter:brightness(1)}45%{filter:brightness(1.9);transform:scaleY(1.35)}100%{filter:brightness(1);transform:scaleY(1)}}
#infectionXpFill.xp-pop{animation:infectionXpPop .45s ease-out;transform-origin:left center}