:root{--panel:#f6ecd8;--panel-hi:#fffaf0;--panel-lo:#e3d4b4;--panel-edge:#2c2119;--panel-shadow:#1e140c66;--slot:#ece0c6;--slot-edge:#d3c29f;--ink:#2c2119;--ink-soft:#6e5a46;--hud-bg:#1c1612cc;--hud-bg-solid:#1f1813;--hud-edge:#0f0a07;--hud-hi:#ffecc81f;--hud-ink:#f3ead9;--hud-ink-soft:#b9aa94;--summer:#f2b845;--summer-deep:#b9801c;--winter:#8fd0f0;--winter-deep:#3f86b8;--veil:linear-gradient(90deg, var(--summer), #f6e7c0 50%, var(--winter));--gold:var(--summer);--frost:var(--winter);--frost-deep:var(--winter-deep);--ok:#4caf5a;--bad:#d4513f;--chat-bg:var(--hud-bg);--font-ui:"Pixelify Sans", "Nunito", sans-serif;--font-read:"Nunito", "Pixelify Sans", sans-serif;--text:1;--text-tight:calc(1 + (var(--text) - 1) / 3);--ease-out:cubic-bezier(.2, .8, .3, 1);--ease-spring:cubic-bezier(.34, 1.4, .64, 1);font-family:var(--font-ui)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}}.hud-panel{border:8px solid #0000;border-image:var(--px-panel) 10 fill / 20px stretch;image-rendering:pixelated;box-shadow:none;filter:drop-shadow(0 3px #0006);color:var(--hud-ink);pointer-events:auto;background:0 0;border-radius:0}.pp-panel{border:12px solid #0000;border-image:var(--px-window) 11 fill / 22px stretch;image-rendering:pixelated;filter:drop-shadow(0 4px #00000059);color:var(--ink);pointer-events:auto}.pp-button,.px-button{border:8px solid #0000;border-image:var(--px-button) 4 fill / 8px stretch;image-rendering:pixelated;box-shadow:none;color:var(--ink);font:600 calc(14px * var(--text)) var(--font-ui);cursor:pointer;pointer-events:auto;background:0 0;border-radius:0;justify-content:center;align-items:center;gap:8px;display:inline-flex}.pp-button:hover,.px-button:hover{filter:brightness(1.05)}.pp-button:active,.px-button:active{border-image-source:var(--px-buttonPressed);transform:translateY(2px)}.pp-button.active,.px-button.on{border-image-source:var(--px-buttonOn)}.pp-button:focus-visible,.px-button:focus-visible{outline:2px solid var(--winter-deep);outline-offset:2px}.pp-icon{image-rendering:pixelated;display:block}.px-hud-button{border:6px solid #0000;border-image:var(--px-hudTab) 4 fill / 8px stretch;image-rendering:pixelated;box-shadow:none;color:var(--hud-ink);cursor:pointer;background:0 0;border-radius:0}.px-hud-button:hover{filter:brightness(1.2)}.px-hud-button:active{transform:translateY(2px)}.px-hud-button.on{border-image-source:var(--px-hudTabOn);color:#fff6d0}.px-plate{box-sizing:border-box;border:4px solid #0000;border-image:var(--px-plate) 4 fill / 8px stretch;image-rendering:pixelated;color:#f6e3b4;font:700 calc(12px * var(--text-tight))/1 var(--font-ui);text-shadow:1px 1px #000;place-items:center;line-height:1;display:inline-grid}.px-bar{border:4px solid #0000;border-image:var(--px-bar) 2 fill / 4px stretch;image-rendering:pixelated;background:0 0;border-radius:0;position:relative;overflow:hidden}.px-bar>.fill{height:100%;box-shadow:inset 0 2px #ffffff4d,inset 0 -2px #00000040}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#3c28141f}::-webkit-scrollbar-thumb{background:#8a5a32;border:2px solid #3e2512}::-webkit-scrollbar-thumb:hover{background:#a8743f}.ui-slot{border:4px solid #0000;border-image:var(--px-slot) 4 fill / 8px stretch;image-rendering:pixelated;box-shadow:none;color:var(--ink);background:0 0;border-radius:0;place-items:center;padding:0;display:grid;position:relative}.ui-slot>img{width:32px;height:32px;image-rendering:pixelated;transition:transform 80ms steps(2,end),opacity .12s}.ui-slot.filled{cursor:pointer}.ui-slot.filled:hover{border-image-source:var(--px-slotHover)}.ui-slot.filled:hover>img{transform:translateY(-2px)}.ui-slot.filled:active>img{transform:translateY(0)}.ui-slot.locked{border-image-source:var(--px-slotLocked)}.ui-slot:focus-visible{outline:2px solid var(--winter-deep);outline-offset:0}.ui-qty{font:700 calc(12px * var(--text-tight))/1 var(--font-ui);color:#fff;text-shadow:1px 0 #1a0f08,-1px 0 #1a0f08,0 1px #1a0f08,0 -1px #1a0f08,1px 1px #1a0f08;pointer-events:none;line-height:1;position:absolute;bottom:-2px;right:-1px}.ui-tabs{grid-template-columns:repeat(var(--count,4), 1fr);gap:4px;display:grid}.ui-tabs>button{border:4px solid #0000;border-image:var(--px-tab) 4 fill / 8px stretch;min-width:0;image-rendering:pixelated;color:var(--ink-soft);font:500 calc(12px * var(--text-tight)) var(--font-ui);white-space:nowrap;cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:4px;padding:2px 2px 3px;line-height:1;display:flex}.ui-tabs>button>img{width:16px;height:16px;image-rendering:pixelated;margin:-2px 0}.ui-tabs>button:hover:not(.on){color:var(--ink);filter:brightness(1.04)}.ui-tabs>button:active:not(.on){transform:translateY(1px)}.ui-tabs>button.on{border-image-source:var(--px-tabOn);color:#fff6d0;text-shadow:1px 1px #1f2a0e}.ui-tabs>button:focus-visible{outline:2px solid var(--winter-deep);outline-offset:1px}.ui-footer{color:var(--ink-soft);font:500 calc(13px * var(--text)) var(--font-ui);border-top:2px solid #c9ad7c;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:6px 4px 0;display:flex}.ui-footer b{color:var(--ink);font-weight:700}.px-window{box-sizing:border-box;border:12px solid #0000;border-image:var(--px-window) 11 fill / 22px stretch;image-rendering:pixelated;color:var(--ink);font-family:var(--font-ui);pointer-events:auto;filter:drop-shadow(0 6px #0006)}.px-head{color:#3a2414;align-items:center;gap:8px;padding:4px 2px 2px 8px;display:flex}.px-head h2{font:700 calc(22px * var(--text)) var(--font-ui);letter-spacing:.5px;text-shadow:2px 2px #fffaebcc;flex:1;margin:0;line-height:1}.px-head .aside{font:600 calc(13px * var(--text)) var(--font-ui);color:var(--ink-soft)}.px-close{background:var(--px-close) center / 26px 24px no-repeat;width:26px;height:24px;image-rendering:pixelated;cursor:pointer;border:0;flex:none;align-self:flex-start;padding:0}.px-close:hover{background-image:var(--px-closeHover)}.px-close:active{transform:translateY(2px)}.px-close:focus-visible{outline:2px solid var(--winter-deep);outline-offset:1px}.px-rule{border:0 solid #0000;border-width:0 6px;border-image:var(--px-rule) 0 3 fill / 0 6px stretch;height:6px;image-rendering:pixelated;margin:2px 4px 0}.px-button.small{font:600 calc(12px * var(--text-tight)) var(--font-ui);border-width:6px;padding:0 4px;line-height:1}.px-input{box-sizing:border-box;border:4px solid #0000;border-image:var(--px-inset) 3 fill / 6px stretch;image-rendering:pixelated;color:var(--ink);font:600 calc(14px * var(--text)) var(--font-read);background:0 0;border-radius:0;outline:none;padding:2px 4px}.px-input:focus{border-image-source:var(--px-slotHover);border-image-slice:4 fill;border-image-width:8px}.px-recess{border:4px solid #0000;border-image:var(--px-recess) 3 fill / 6px stretch;image-rendering:pixelated}.ui-spread{grid-template-columns:1fr 12px 1fr;align-items:stretch;display:grid}.ui-page{border:4px solid #0000;border-image:var(--px-inset) 3 fill / 6px stretch;min-width:0;image-rendering:pixelated;flex-direction:column;gap:6px;padding:6px 8px 8px;display:flex}.ui-spine{background:linear-gradient(90deg,#b99a6a 0 2px,#6a4a2a 2px 4px,#3a2414 4px 8px,#6a4a2a 8px 10px,#b99a6a 10px 12px);margin:6px 0}@media (width<=600px){.ui-spread{grid-template-columns:1fr;gap:8px}.ui-spine{display:none}}.ui-h3{font:700 calc(14px * var(--text)) var(--font-ui);color:var(--ink);border-bottom:2px solid #d8c39a;align-items:baseline;gap:6px;margin:4px 0 0;padding-bottom:2px;display:flex}.ui-h3 .count{font:500 calc(12px * var(--text)) var(--font-ui);color:var(--ink-soft);margin-left:auto}.ui-tags{flex-wrap:wrap;gap:3px;display:flex}.ui-tag{font:500 calc(12px * var(--text-tight)) var(--font-ui);color:var(--ink-soft);white-space:nowrap;background:#f3e6c4;border:2px solid #b89c70;padding:0 4px 1px}.ui-role{font:600 calc(12px * var(--text-tight)) var(--font-ui);text-transform:uppercase;letter-spacing:.04em;color:#fff;border:2px solid #1a0f08;padding:0 4px 1px}.ui-role.tank{background:#3d6fb5}.ui-role.damage{background:#b8453a}.ui-role.support{background:#3f8a4a}.ui-stats{border:4px solid #0000;border-image:var(--px-slot) 4 fill / 8px stretch;image-rendering:pixelated;font:500 calc(12px * var(--text))/1.25 var(--font-ui);flex-direction:column;gap:3px;margin:0;padding:6px;list-style:none;display:flex}.ui-stats li{align-items:center;gap:6px;display:flex}.ui-stats li:not(:has(>img)):before{content:"";background:currentColor;flex:none;width:4px;height:4px}.ui-stats li>img{width:18px;height:18px;image-rendering:pixelated;flex:none}.ui-stats li>b{font:700 calc(13px * var(--text)) var(--font-ui);color:var(--ink);margin-left:auto}.ui-stats .good{color:#2f7a3a}.ui-stats .bad{color:#b8453a}.ui-stats .muted{color:var(--ink-soft)}.ui-stats .summer{color:#b8651c}.ui-stats .winter{color:var(--winter-deep)}.ui-hint{font:600 calc(12px * var(--text))/1.3 var(--font-read);color:var(--ink-soft);margin:2px 0 0}.ui-strip{font:500 calc(13px * var(--text)) var(--font-ui);color:var(--ink-soft);align-items:center;gap:8px;padding:0 4px;display:flex}.ui-strip b{color:var(--ink);font-weight:700}.ui-strip>*{white-space:nowrap}.ui-strip>.px-bar{flex:1;height:12px}.ui-detail-head{align-items:center;gap:8px;display:flex}.ui-detail-head .ui-slot{box-sizing:border-box;flex:none;width:62px;height:62px}.ui-detail-head .ui-slot>img{width:54px;height:54px}.ui-detail-head h2{font:700 calc(19px * var(--text))/1.05 var(--font-ui);color:#3a2414;margin:0 0 4px}input[type=range].px-range{appearance:none;cursor:pointer;background:0 0;width:100%;height:20px;margin:0}input[type=range].px-range::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--winter-deep) 0 var(--fill,50%), #5a4230 var(--fill,50%));border:2px solid #1a0f08;height:8px}input[type=range].px-range::-webkit-slider-thumb{-webkit-appearance:none;background:#a8743f;border:2px solid #1a0f08;width:14px;height:20px;margin-top:-8px;box-shadow:inset 2px 2px #d8a060,inset -2px -2px #5a3812}input[type=range].px-range::-moz-range-track{background:#5a4230;border:2px solid #1a0f08;height:8px}input[type=range].px-range::-moz-range-progress{background:var(--winter-deep);height:8px}input[type=range].px-range::-moz-range-thumb{background:#a8743f;border:2px solid #1a0f08;border-radius:0;width:12px;height:18px}input[type=range].px-range:focus-visible{outline:2px solid var(--winter-deep);outline-offset:2px}.px-switch{box-sizing:border-box;background:#5a4230;border:2px solid #1a0f08;flex:none;width:34px;height:18px;position:relative;box-shadow:inset 0 2px #00000059}.px-switch:after{content:"";background:#c8a878;border-right:2px solid #1a0f08;width:14px;height:14px;transition:left .1s steps(2,end);position:absolute;top:0;left:0;box-shadow:inset 2px 2px #f0d8a8,inset -2px -2px #8a6a44}input:checked+.px-switch{background:#4c9a3a}input:checked+.px-switch:after{border-left:2px solid #1a0f08;border-right:0;left:16px}input:focus-visible+.px-switch{outline:2px solid var(--winter-deep);outline-offset:2px}.drag-source>img{opacity:.35}.ui-slot.drop-ok{border-image-source:var(--px-slotOk)}.ui-slot.drop-hover{border-image-source:var(--px-slotTarget);z-index:1;transform:scale(1.08)}.drop-zone.drop-ok{background-color:#8fd0f029}.drop-zone.drop-hover{background-color:#f2b84533}body.is-dragging,body.is-dragging *{cursor:grabbing!important}.pp-kbd{font:800 calc(12px * var(--text-tight)) var(--font-ui);opacity:.55;border:2px solid;border-radius:5px;padding:1px 5px}.label-layer{pointer-events:none;position:absolute;inset:0}.nameplate{font:800 calc(12px * var(--text)) var(--font-ui);color:#fff;white-space:nowrap;text-shadow:0 1px #000;background:#1e242cb3;border-radius:6px;padding:1px 7px}.nameplate.local{color:var(--gold)}.chat-bubble{font:800 calc(13px * var(--text)) var(--font-ui);color:#ffe45c;text-shadow:1px 1px #000,-1px 1px #000,1px -1px #000,-1px -1px #000;white-space:nowrap;text-overflow:ellipsis;opacity:0;max-width:280px;transition:opacity .3s;overflow:hidden}.health-bar{opacity:0;background:#c8302c;border:1px solid #1e1410;border-radius:2px;width:40px;height:6px;transition:opacity .3s;overflow:hidden}.health-bar .fill{background:#4ed04a;height:100%;transition:width .25s;box-shadow:inset 0 1px #ffffff59}.dmg-number{font:700 calc(18px * var(--text)) "Silkscreen", monospace;color:#fff;white-space:nowrap;text-shadow:2px 0 #1e1410,-2px 0 #1e1410,0 2px #1e1410,0 -2px #1e1410,2px 2px #1e1410,-2px 2px #1e1410,2px -2px #1e1410,-2px -2px #1e1410,0 4px #00000059;pointer-events:none}.dmg-number.ability{font-size:calc(21px * var(--text))}.dmg-number.taken{color:#ff6a55}.dmg-number.frost{color:#8fd8ff}.dmg-number.fire{color:#ff9a3c}.dmg-number.nature{color:#8fe06a}.dmg-number.crit{font-size:calc(27px * var(--text));color:#ffd23f}.dmg-number.heal{color:#7ae06a}.dmg-number.miss{font-size:calc(13px * var(--text));color:#c9d6de}#game canvas{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.perf-stats{font:700 calc(12px * var(--text)) ui-monospace, monospace;color:#fff;pointer-events:none;z-index:20;background:#00000080;border-radius:4px;padding:2px 6px;position:absolute;top:4px;left:50%;transform:translate(-50%)}