:root{--ink:#3a2c30;--ink-soft:#85747a;--paper:#fffaf2f7;--paper-edge:#eadfce;--chip:#f1e6d6;--chip-hover:#e8d9c4;--accent:#d9825b;--accent-hover:#c9724c;--danger:#c2413b;--shadow:0 14px 34px #1e14184d;--page:#14131c;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Nunito,system-ui,Segoe UI,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--page);overflow:hidden}.game-viewport{place-items:center;display:grid;position:fixed;inset:0}.game-box{position:relative}.game-frame{transform-origin:0 0;background:#1a1a2e;font-size:20px;line-height:1.35;position:absolute;top:0;left:0;overflow:hidden}.game-canvas{position:absolute;inset:0}.game-canvas canvas{display:block}.card{background:var(--paper);border:2px solid var(--paper-edge);box-shadow:var(--shadow);border-radius:20px}.panel{width:600px;max-height:calc(100% - 116px);padding:20px 26px 24px;position:absolute;top:96px;right:20px;overflow:auto}.panel-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px;display:flex}h1,h2,h3{margin:0;font-weight:800}.panel h2{font-size:28px}.panel h3{margin:20px 0 8px;font-size:20px}p{margin:6px 0}.muted{color:var(--ink-soft);font-size:17px}.message.error,.error{color:var(--danger)}.center-card{text-align:center;width:560px;padding:30px 36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.auth-card h1{letter-spacing:-1px;font-size:64px}.auth-card label{text-align:left}.toast{align-items:center;gap:14px;max-width:760px;padding:12px 18px;display:flex;position:absolute;top:96px;left:50%;transform:translate(-50%)}.toast.bottom{top:auto;bottom:24px}.hud-top{justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;top:20px;left:20px;right:20px}.hud-group{background:var(--paper);border:2px solid var(--paper-edge);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:6px;padding:6px;display:flex}.room-picker{border-radius:999px;max-width:380px;font-weight:700}button,input,select{font:inherit;color:var(--ink)}button{background:var(--chip);cursor:pointer;white-space:nowrap;border:0;border-radius:999px;align-items:center;gap:6px;padding:8px 16px;font-weight:700;display:inline-flex}button:hover:not(:disabled){background:var(--chip-hover)}button.primary,button.active{background:var(--accent);color:#fff}button.primary:hover:not(:disabled),button.active:hover:not(:disabled){background:var(--accent-hover)}button.danger{color:var(--danger)}button.icon{padding:6px 12px}button:disabled{opacity:.45;cursor:default}input,select{border:2px solid var(--paper-edge);background:#fff;border-radius:12px;min-width:0;padding:8px 12px}input:focus,select:focus,button:focus-visible{outline-offset:1px;outline:3px solid #d9825b73}input[type=color]{flex:none;width:64px;height:42px;padding:2px}label{flex-direction:column;gap:4px;margin:10px 0;font-weight:700;display:flex}label.row{flex-direction:row;align-items:center;gap:12px}.row{flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0;display:flex}.row.center{justify-content:center}.row input{flex:1}.row input[type=color]{flex:none}.dot{vertical-align:middle;border:2px solid #0000001f;border-radius:50%;width:14px;height:14px;margin-right:6px;display:inline-block}code{background:var(--chip);border-radius:8px;padding:2px 8px;font-family:ui-monospace,Menlo,monospace}.list{margin:8px 0;padding:0;list-style:none}.list li{border-bottom:2px dashed var(--paper-edge);justify-content:space-between;align-items:center;gap:10px;padding:8px 0;display:flex}.list li .row{flex-wrap:nowrap;margin:0}table{border-collapse:collapse;width:100%;margin-top:8px}th{text-align:left;color:var(--ink-soft);padding:4px;font-size:16px}td{border-top:2px dashed var(--paper-edge);vertical-align:middle;padding:8px 4px}td .muted{font-size:15px}td.actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}td.actions button{padding:6px 12px;font-size:16px}td select{width:128px;padding:6px 8px;font-size:17px}.nowrap{white-space:nowrap}.avatar-preview{background:radial-gradient(#f3e8d8 0%,#f3e8d800 70%);border-radius:16px;justify-content:center;margin:4px 0 8px;display:flex}.picker{margin:10px 0}.picker-label{margin-bottom:6px;font-weight:700;display:block}.swatches,.chips{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch-slot{align-items:center;display:inline-flex}.swatch-gap{width:12px}button.swatch{border:2px solid #00000026;border-radius:50%;width:32px;height:32px;padding:0}button.swatch:hover:not(:disabled){filter:brightness(1.05)}button.swatch.selected{outline:3px solid var(--accent);outline-offset:2px}.chips button{padding:6px 14px;font-size:17px}