:root{--ink: #141019;--stone0: #2c2838;--stone1: #3d3a4f;--stone2: #565670;--bone: #d8d2bd;--gold: #e8b33a;--gold-dark: #8a6420;--str: #c0392b;--agi: #2ecc71;--int: #4f7cff;--danger: #ff6a1f;--px: "Silkscreen", ui-monospace, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--ink);color:var(--bone);overflow:hidden;font-family:var(--px)}#game{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}#game canvas{image-rendering:pixelated;image-rendering:crisp-edges}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.screen{pointer-events:auto;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:16px}.hidden{display:none!important}.panel{background:linear-gradient(180deg,#2c2838f0,#1c1824f5);border:4px solid var(--stone2);outline:2px solid var(--gold-dark);box-shadow:0 0 0 6px var(--ink),0 16px 48px #0009,inset 0 0 0 2px #e8b33a40;padding:20px 24px;max-width:100%;image-rendering:pixelated}.menu-panel{width:420px;display:flex;flex-direction:column;gap:12px;text-align:center}.logo{margin:0;font-size:40px;letter-spacing:2px;color:var(--gold);text-shadow:0 3px 0 var(--gold-dark),0 0 18px rgba(255,179,71,.55),0 6px 0 var(--ink)}.tag{margin:0 0 6px;color:#a39e8f;font-size:12px}.hint{margin:4px 0 0;color:#7a7f94;font-size:10px;line-height:1.6}.field{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:11px;color:#a39e8f}input{font:inherit;font-size:16px;padding:8px 10px;background:var(--ink);color:var(--bone);border:2px solid var(--stone2);outline:none}input:focus{border-color:var(--gold)}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;letter-spacing:4px;text-align:center;min-width:0}.btn{font:inherit;font-size:14px;padding:10px 14px;cursor:pointer;color:var(--bone);background:var(--stone1);border:2px solid var(--stone2);box-shadow:0 3px 0 var(--ink)}.btn:hover{border-color:var(--gold)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.btn.primary{background:#6b1d24;border-color:var(--str)}.btn.primary:hover{border-color:var(--gold)}.btn.ghost{background:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.lobby-panel{width:720px;display:flex;flex-direction:column;gap:12px}.plaque{align-self:center;padding:8px 18px;background:var(--stone0);border:2px solid var(--gold-dark);color:#a39e8f;font-size:12px;letter-spacing:2px}.plaque span{color:var(--gold);font-size:26px;letter-spacing:6px;margin-left:8px;vertical-align:middle}.lobby-panel .hint{text-align:center}.classes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.class-card{background:var(--stone0);border:2px solid var(--stone2);padding:10px;cursor:pointer;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}.class-card:hover{border-color:var(--bone)}.class-card.selected{border-color:var(--gold);box-shadow:inset 0 0 0 2px #e8b33a59}.class-card img.portrait{width:64px;height:64px;image-rendering:pixelated}.class-card h3{margin:0;font-size:16px}.class-card .attrs{font-size:11px;display:flex;gap:8px}.class-card .blurb{font-size:10px;color:#a39e8f;line-height:1.5;min-height:30px}.class-card .kit{font-size:9px;color:#7a7f94;line-height:1.6}.s{color:var(--str)}.a{color:var(--agi)}.i{color:var(--int)}.party{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.slot{background:var(--ink);border:2px dashed var(--stone1);padding:8px;min-height:92px;text-align:center;font-size:11px}.slot.filled{border-style:solid}.slot img{width:48px;height:48px;image-rendering:pixelated;display:block;margin:0 auto 4px}.slot .ready{color:var(--agi)}.slot .notready{color:#7a7f94}.lobby-actions{display:flex;gap:10px;justify-content:center}.over-panel{width:560px;text-align:center}.over-panel h2{margin:0 0 12px;font-size:32px}.over-panel h2.win{color:var(--gold);text-shadow:0 0 16px rgba(255,179,71,.6)}.over-panel h2.lose{color:var(--str)}.over-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0;text-align:left;font-size:11px}.over-player{background:var(--ink);border:2px solid var(--stone1);padding:8px}.over-player img.item{width:16px;height:16px;image-rendering:pixelated;margin-right:2px;vertical-align:middle}.toast{position:fixed;top:16px;left:50%;transform:translate(-50%);background:#6b1d24;border:2px solid var(--str);padding:8px 14px;font-size:12px;pointer-events:none}@media(max-width:760px){.classes{grid-template-columns:1fr}.party{grid-template-columns:repeat(2,1fr)}.logo{font-size:30px}}.invite-row{display:flex;gap:8px}.invite-row input{flex:1;min-width:0;font-size:12px;color:#a39e8f}.ctrl-icon{height:22px;width:auto;vertical-align:middle;image-rendering:pixelated;margin:0 1px}.ctrl-icon.mouse{height:24px}.controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px 10px;text-align:left;font-size:11px;line-height:1.4;color:#a39e8f;margin-top:4px}.controls>div{display:contents}.controls .keys{display:inline-flex;align-items:center;gap:2px}.class-card .kit{display:grid;justify-content:center;row-gap:3px}.kit div{display:flex;align-items:center;gap:6px}.kit .ctrl-icon{height:18px;width:28px;object-fit:contain}.kit .ctrl-icon.mouse{height:20px}#screen-pause{background:#0a080e8c}.pause-panel{width:440px;display:flex;flex-direction:column;gap:12px;text-align:center}.pause-panel h2{margin:0;font-size:30px;color:var(--gold);text-shadow:0 3px 0 var(--gold-dark)}.pause-actions{display:flex;flex-direction:column;gap:8px}.slider{display:grid;grid-template-columns:11em 1fr 3em;align-items:center;gap:10px;padding:2px 4px;font-size:14px;text-align:left}.slider input{width:100%;accent-color:var(--gold)}.slider output{text-align:right;font-variant-numeric:tabular-nums}.slider input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}#perf{position:fixed;top:6px;right:6px;z-index:50;padding:4px 6px;font:11px/1.35 ui-monospace,monospace;white-space:pre;color:#e8e0c8;background:#0e0a12cc;border:1px solid #3a2f40;pointer-events:none}.run-settings{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px;padding:8px 10px;border:1px solid #3a2f40;background:#140e1899}.heat-row{display:flex;align-items:center;gap:10px}.heat-info{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}.heat-info b{color:#ff9a3c}.btn.small{min-width:34px;padding:4px 8px}.toggle{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.over-panel .score{font-size:20px;margin:4px 0}.over-panel .score b{color:#f4c542}.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.badges span{padding:2px 6px;border:1px solid #f4c542;color:#f4c542;font-size:11px}.records-panel{max-width:640px;max-height:90vh;overflow-y:auto}.records-panel h3{margin:10px 0 4px;font-size:13px}.runs{width:100%;border-collapse:collapse;font-size:11px}.runs th,.runs td{padding:2px 4px;text-align:left}.runs tr.win td:first-child{color:#8fd36a}.runs tr.lose td:first-child{color:#c86a5a}.codex{display:flex;flex-wrap:wrap;gap:3px}.codex .item,.codex .unknown{width:24px;height:24px;image-rendering:pixelated}.codex .unknown{display:inline-flex;align-items:center;justify-content:center;color:#5a4d60;border:1px dashed #3a2f40;font-size:11px}