:root{--ui: 1;--fs: calc(18px * var(--ui));--fs-s: calc(14px * var(--ui));--fs-l: calc(26px * var(--ui));--fs-xl: calc(40px * var(--ui));--text: #f4f2ec;--muted: #b9b6c4;--accent: #ffd44d;--good: #7cf06a;--bad: #ff6b5e;--panel: rgba(10, 9, 16, .9);--panel-solid: #1c1826;--edge: #0d0b12;--warn: #ff3030;--team0: #ff5a4f;--team1: #4f8bff;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#05060c;color:var(--text);font-family:PvPCraft Pixel,ui-monospace,Courier New,monospace;font-size:var(--fs);-webkit-font-smoothing:none;user-select:none}body.hc{--text: #ffffff;--muted: #e6e6e6;--panel: rgba(0, 0, 0, .95)}#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;image-rendering:pixelated;transition:filter .3s}#game.blur{filter:blur(4px) brightness(.8)}#hud,#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}.txt{text-shadow:2px 2px 0 rgba(0,0,0,.75)}button,.btn{font:inherit;color:var(--text);background:transparent;border:6px solid transparent;border-image:var(--btn-img) 3 fill / calc(6px * var(--ui)) / 0 stretch;image-rendering:pixelated;padding:calc(6px * var(--ui)) calc(14px * var(--ui));text-shadow:2px 2px 0 #2b2733;cursor:pointer;min-height:calc(40px * var(--ui))}button:hover:not(:disabled),button:focus-visible{border-image-source:var(--btn-hover-img);outline:none;color:#ffffa0}button:disabled{border-image-source:var(--btn-disabled-img);color:#8d8a96;cursor:default}button.big{width:calc(400px * var(--ui));font-size:var(--fs-l);min-height:calc(56px * var(--ui))}button.small{font-size:var(--fs-s);min-height:calc(32px * var(--ui));padding:calc(3px * var(--ui)) calc(10px * var(--ui))}button.sel{color:var(--accent);border-image-source:var(--btn-hover-img)}input[type=text],select{font:inherit;color:var(--text);background:#0d0b12;border:2px solid #8a8696;padding:calc(6px * var(--ui));outline:none}input[type=text]:focus,select:focus{border-color:#fff}input[type=range]{accent-color:#c9c4d8;width:calc(220px * var(--ui))}input[type=checkbox]{width:calc(20px * var(--ui));height:calc(20px * var(--ui));accent-color:#7cf06a}.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10px * var(--ui));background:#04040a9e;overflow:auto;padding:calc(16px * var(--ui))}.screen.clear{background:transparent}.panel{background:var(--panel);border:6px solid transparent;border-image:var(--panel-img) 3 fill / calc(6px * var(--ui)) / 0 stretch;padding:calc(16px * var(--ui));max-width:min(96vw,calc(980px * var(--ui)));max-height:90vh;overflow:auto}.panel h2{margin:0 0 calc(10px * var(--ui));font-size:var(--fs-l);font-weight:400;text-shadow:2px 2px 0 #000}.panel h3{margin:calc(10px * var(--ui)) 0 calc(6px * var(--ui));font-size:var(--fs);font-weight:400;color:var(--accent)}.row{display:flex;gap:calc(8px * var(--ui));align-items:center;flex-wrap:wrap}.col{display:flex;flex-direction:column;gap:calc(8px * var(--ui))}.grid2{display:grid;grid-template-columns:auto 1fr;gap:calc(8px * var(--ui)) calc(16px * var(--ui));align-items:center}.muted{color:var(--muted)}.small{font-size:var(--fs-s)}.good{color:var(--good)}.bad{color:var(--bad)}.accent{color:var(--accent)}.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:calc(10px * var(--ui))}.corner{position:fixed;padding:calc(10px * var(--ui));font-size:var(--fs-s);text-shadow:2px 2px 0 #000}.logo{image-rendering:pixelated;width:min(90vw,calc(720px * var(--ui)));margin-bottom:calc(20px * var(--ui));filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}.tagline{color:var(--accent);margin-top:calc(-24px * var(--ui));margin-bottom:calc(14px * var(--ui));transform:rotate(-4deg);text-shadow:2px 2px 0 #3a2e00;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{transform:rotate(-4deg) scale(1.06)}}.skins{display:grid;grid-template-columns:repeat(8,auto);gap:6px}.skins button{padding:2px;min-height:0}.skins img{width:calc(48px * var(--ui));image-rendering:pixelated;display:block}.swatch{width:calc(26px * var(--ui));height:calc(26px * var(--ui));border:2px solid #000;display:inline-block;cursor:pointer}.swatch.sel{outline:3px solid #fff}.locked{opacity:.35;cursor:not-allowed!important}table.score{border-collapse:collapse;min-width:calc(520px * var(--ui))}table.score td,table.score th{padding:calc(4px * var(--ui)) calc(10px * var(--ui));text-align:left;font-weight:400}table.score th{color:var(--muted);font-size:var(--fs-s)}table.score tr.me td{color:var(--accent)}.loading-bar{width:min(80vw,calc(500px * var(--ui)));height:calc(16px * var(--ui));border:2px solid #ddd;background:#222}.loading-bar>div{height:100%;background:#7cf06a;transition:width .15s}.hud-layer{position:fixed;inset:0;pointer-events:none}.crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}.hitmarker{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s}.dmg-dir{position:fixed;left:50%;top:50%;width:calc(180px * var(--ui));height:calc(180px * var(--ui));margin:calc(-90px * var(--ui)) 0 0 calc(-90px * var(--ui));opacity:0;transition:opacity .6s}.hotbar-wrap{position:fixed;left:50%;bottom:calc(6px * var(--ui));transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(4px * var(--ui))}.bars{display:flex;justify-content:space-between;width:100%;gap:calc(20px * var(--ui))}.icons{display:flex;gap:calc(1px * var(--ui))}.icons img{width:calc(18px * var(--ui));height:calc(18px * var(--ui));image-rendering:pixelated}.icons.flash{animation:flash .4s}@keyframes flash{30%{filter:brightness(2.5)}}.hotbar{display:flex;gap:0;background:#00000073;border:2px solid #0d0b12}.slot{position:relative;width:calc(48px * var(--ui));height:calc(48px * var(--ui));border:2px solid #5a5666;background:#4642508c}.slot.sel{border:3px solid #fff;box-shadow:0 0 0 2px #000;z-index:1}.slot img{position:absolute;inset:calc(5px * var(--ui));width:calc(100% - 10px * var(--ui));image-rendering:pixelated}.slot .count{position:absolute;right:2px;bottom:0;font-size:var(--fs-s);text-shadow:2px 2px 0 #000}.slot .dur{position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:#000}.slot .dur>div{height:100%}.slot .cd{position:absolute;inset:0;background:conic-gradient(rgba(255,255,255,.45) var(--p, 0%),transparent 0)}.slot .glint{position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(170,110,255,.45) 50%,transparent 70%);background-size:300% 300%;animation:glint 2.5s linear infinite}@keyframes glint{0%{background-position:100% 0}to{background-position:-100% 0}}.offhand{position:absolute;left:calc(-62px * var(--ui));bottom:0}.status{position:absolute;right:calc(-180px * var(--ui));bottom:0;display:flex;flex-direction:column;gap:2px;font-size:var(--fs-s);text-shadow:2px 2px 0 #000;width:calc(170px * var(--ui))}.killfeed{position:fixed;right:calc(12px * var(--ui));top:calc(12px * var(--ui));display:flex;flex-direction:column;align-items:flex-end;gap:4px}.killfeed>div{background:#00000080;padding:2px calc(8px * var(--ui));font-size:var(--fs-s);text-shadow:2px 2px 0 #000;transition:opacity .5s}.topcenter{position:fixed;left:50%;top:calc(10px * var(--ui));transform:translate(-50%);text-align:center;text-shadow:2px 2px 0 #000}.topcenter .timer{font-size:var(--fs-l)}.bottomleft{position:fixed;left:calc(10px * var(--ui));bottom:calc(10px * var(--ui));font-size:var(--fs-s);text-shadow:2px 2px 0 #000}.chat{position:fixed;left:calc(10px * var(--ui));bottom:calc(190px * var(--ui));width:min(46vw,calc(520px * var(--ui)));display:flex;flex-direction:column;gap:2px;font-size:var(--fs-s);transition:opacity .6s}.chat .line{background:#00000073;padding:2px 6px;text-shadow:2px 2px 0 #000;word-break:break-word}.chat .line.sys{color:#ffe08a}.chat input{pointer-events:auto;width:100%}.center-alert{position:fixed;left:50%;top:26%;transform:translate(-50%);font-size:var(--fs-xl);text-shadow:3px 3px 0 #000;text-align:center;white-space:nowrap;transition:opacity .4s}.edge-warning{position:fixed;inset:0;box-shadow:inset 0 0 calc(120px * var(--ui)) calc(30px * var(--ui)) var(--warn);opacity:0;animation:none}.edge-warning.on{animation:edgepulse .5s ease-in-out infinite alternate}.reduced .edge-warning.on{animation:none;opacity:.55}@keyframes edgepulse{0%{opacity:.25}to{opacity:.75}}.hurt-flash{position:fixed;inset:0;background:radial-gradient(transparent 50%,#c8000073);opacity:0;transition:opacity .35s}.dmgnum{position:fixed;font-size:var(--fs);text-shadow:2px 2px 0 #000;transform:translate(-50%,-50%);white-space:nowrap}.subtitles{position:fixed;right:calc(12px * var(--ui));bottom:calc(80px * var(--ui));display:flex;flex-direction:column;align-items:flex-end;gap:3px}.subtitles>div{background:#000000b3;padding:2px 8px;font-size:var(--fs-s)}.sidepanel{position:fixed;right:calc(10px * var(--ui));top:32%;width:calc(290px * var(--ui));background:#00000073;padding:calc(8px * var(--ui));font-size:var(--fs-s);text-shadow:2px 2px 0 #000}.progress{height:6px;background:#000;margin:2px 0 6px}.progress>div{height:100%;background:var(--good)}.perf{position:fixed;left:calc(8px * var(--ui));top:calc(8px * var(--ui));background:#0009;padding:6px 10px;font-size:var(--fs-s);white-space:pre}.tutorial{position:fixed;left:50%;top:14%;transform:translate(-50%);background:var(--panel);padding:calc(10px * var(--ui)) calc(18px * var(--ui));border:3px solid #e3b341;text-align:center}.toast{position:fixed;left:50%;bottom:calc(150px * var(--ui));transform:translate(-50%);background:#000000a6;padding:4px 12px;text-shadow:2px 2px 0 #000;transition:opacity .4s}.team-badge{display:inline-block;min-width:1.3em;text-align:center;margin-right:4px;color:#000;font-size:var(--fs-s)}.inv-grid{display:grid;grid-template-columns:repeat(9,calc(52px * var(--ui)));gap:4px}.inv-slot{width:calc(52px * var(--ui));height:calc(52px * var(--ui));border:2px solid #5a5666;background:#464250b3;position:relative;cursor:pointer}.inv-slot img{width:100%;image-rendering:pixelated}.inv-slot.sel{border-color:#ffd44d}.tooltip{position:fixed;background:#120f1a;border:2px solid #5a2bd6;padding:6px 10px;font-size:var(--fs-s);pointer-events:none;z-index:50;white-space:pre}.mobile-msg{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#1c1826;gap:16px}.grid2>select,.grid2>input[type=text]{justify-self:start;min-width:calc(150px * var(--ui))}table.score td>button.small:only-child{width:100%;min-width:calc(130px * var(--ui))}td.levels{display:grid;grid-template-columns:repeat(5,calc(96px * var(--ui)));gap:4px}td.levels button{width:100%}
