:root{--mist: #F3F4F4;--mist-dim: #d8dbdc;--mist-soft: rgba(243,244,244,.06);--mulberry: #853953;--mulberry-dim: #6e2f46;--mulberry-glow: rgba(133,57,83,.25);--plum: #612D53;--plum-dim: #4e2444;--plum-glow: rgba(97,45,83,.22);--charcoal: #2C2C2C;--charcoal-light: #3a3a3a;--charcoal-soft: #444;--text: #1e1e1e;--text-secondary: #5a5a5a;--surface: rgba(243,244,244,.92);--surface-soft: rgba(235,236,237,.88);--surface-strong: rgba(255,255,255,.96);--surface-muted: rgba(243,244,244,.55);--border: rgba(44,44,44,.12);--border-strong: rgba(44,44,44,.22);--primary: var(--mulberry);--primary-hover: #9a4464;--secondary: var(--plum);--secondary-hover: #7a3a6a;--danger: #c04040;--danger-hover: #d04848;--shadow: rgba(44,44,44,.12);--shadow-strong: rgba(44,44,44,.22);--error-bg: #fde8e8;--error-text: #8b2020;--alert-bg: rgba(133,57,83,.12);--meeting-bg: rgba(97,45,83,.08);--minimap-bg: rgba(243,244,244,.7);--bg: linear-gradient(165deg, #ecedef 0%, #e2dfe4 40%, #ddd8de 100%);--badge-ready: #3a8a5c;--badge-waiting: var(--text-secondary);--badge-host: var(--mulberry);--font-brand: "Outfit", sans-serif;--font-body: "Inter", sans-serif;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 22px;--ease: cubic-bezier(.4,0,.2,1);--speed-fast: .12s;--speed: .2s;--speed-slow: .32s}:root[data-theme=dark]{--text: #F3F4F4;--text-secondary: #a0a3a6;--surface: rgba(44,44,44,.94);--surface-soft: rgba(52,52,52,.92);--surface-strong: rgba(60,60,60,.96);--surface-muted: rgba(44,44,44,.7);--border: rgba(243,244,244,.08);--border-strong: rgba(243,244,244,.15);--primary-hover: #a04e6e;--secondary-hover: #8a4878;--danger: #d05050;--danger-hover: #e05858;--shadow: rgba(0,0,0,.3);--shadow-strong: rgba(0,0,0,.45);--error-bg: rgba(120,30,30,.8);--error-text: #ffc8c8;--alert-bg: rgba(133,57,83,.3);--meeting-bg: rgba(97,45,83,.25);--minimap-bg: rgba(60,60,60,.85);--bg: linear-gradient(165deg, #1a1a1a 0%, #222026 40%, #2a252e 100%);--badge-ready: #5cc080;--badge-waiting: var(--text-secondary);--badge-host: #c46a8a}*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:var(--font-brand);margin:0 0 .5rem;line-height:1.2}h1{font-size:1.75rem;font-weight:700;letter-spacing:-.02em}h2{font-size:1.15rem;font-weight:600}h3{font-size:1rem;font-weight:600}h4{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}p{margin:0 0 .5rem}button,input,select,textarea{font:inherit}button{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:var(--radius-md);padding:.6rem 1.1rem;font-family:var(--font-body);font-size:.82rem;font-weight:600;background:var(--primary);color:var(--mist);cursor:pointer;transition:background var(--speed) var(--ease),transform var(--speed-fast) var(--ease),box-shadow var(--speed) var(--ease);white-space:nowrap}button:hover{background:var(--primary-hover)}button:active{transform:scale(.97)}button:focus-visible{outline:2px solid var(--mulberry);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button.secondary{background:var(--surface-strong);color:var(--text);border:1px solid var(--border-strong)}button.secondary:hover{background:var(--surface-soft);border-color:var(--mulberry)}button.danger{background:var(--danger);color:var(--mist)}button.danger:hover{background:var(--danger-hover)}button.active-toggle{background:var(--mulberry);color:var(--mist);border-color:var(--mulberry)}button.icon-btn{padding:.45rem;min-width:36px;min-height:36px;border-radius:var(--radius-sm);background:var(--surface-strong);color:var(--text);border:1px solid var(--border);font-size:1.1rem}button.icon-btn:hover{background:var(--surface-soft);border-color:var(--mulberry)}input,select,textarea{width:100%;border-radius:var(--radius-md);border:1px solid var(--border);padding:.6rem .8rem;background:var(--surface-strong);color:var(--text);transition:border-color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mulberry);box-shadow:0 0 0 3px var(--mulberry-glow)}textarea{resize:vertical}.app-shell{min-height:100vh;padding:0;display:flex;flex-direction:column}.top-bar{display:flex;align-items:center;gap:.75rem;padding:.7rem 1.25rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.top-bar-brand{display:flex;align-items:baseline;gap:.5rem;margin-right:auto}.top-bar-brand h1{font-size:1.1rem;margin:0;color:var(--mulberry)}.top-bar-brand .tagline{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.top-bar-badges{display:flex;gap:.5rem;align-items:center}.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border-radius:20px;font-size:.7rem;font-weight:600;background:var(--surface-soft);border:1px solid var(--border);color:var(--text-secondary);white-space:nowrap}.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--badge-waiting);flex-shrink:0}.badge .dot.connected{background:var(--badge-ready)}.badge .dot.voice-on{background:var(--mulberry)}.content-area{flex:1;padding:1.25rem;max-width:1400px;width:100%;margin:0 auto}.layout-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:1.25rem;align-items:start}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem;box-shadow:0 2px 12px var(--shadow)}.panel.inset{background:var(--surface-soft);box-shadow:inset 0 1px 4px #0000000a}.profile-panel{align-self:start;position:sticky;top:72px}.profile-panel h2{display:flex;align-items:center;gap:.4rem;margin-bottom:.9rem;color:var(--mulberry)}.field{display:grid;gap:.3rem;margin-bottom:.75rem}.field>span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary)}.avatar-preview{display:flex;justify-content:center;padding:.8rem}.avatar-preview img{border-radius:var(--radius-lg);border:3px solid var(--mulberry-glow);background:var(--surface-soft);image-rendering:pixelated}.avatar-preview.compact{padding:0}.avatar-preview.compact img{width:64px;height:64px}.avatar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.75rem}.avatar-card{padding:.3rem;background:var(--surface-strong);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease)}.avatar-card:hover{border-color:var(--mulberry);background:var(--mulberry-glow)}.avatar-card img{display:block;width:100%;height:auto;image-rendering:pixelated}.swatch-grid{display:grid;gap:.65rem;margin-bottom:.75rem}.swatch-group{display:grid;gap:.25rem}.swatch-group>span{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary)}.swatch-chips{display:flex;gap:.35rem;flex-wrap:wrap}.swatch-chip{display:flex;align-items:center;gap:.35rem;padding:.28rem .55rem;border-radius:20px;border:2px solid var(--border);background:var(--surface-strong);cursor:pointer;font-size:.72rem;font-weight:500;color:var(--text);transition:border-color var(--speed) var(--ease),background var(--speed) var(--ease)}.swatch-chip:hover{border-color:var(--mulberry-dim)}.swatch-chip.active{border-color:var(--mulberry);background:var(--mulberry-glow)}.swatch-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.1);flex-shrink:0}.photo-upload-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:var(--radius-md);border:1px dashed var(--border-strong);background:var(--surface-soft);color:var(--text-secondary);cursor:pointer;font-size:.78rem;font-weight:500;transition:border-color var(--speed) var(--ease),color var(--speed) var(--ease);margin-bottom:.75rem;width:100%;justify-content:center}.photo-upload-btn:hover{border-color:var(--mulberry);color:var(--mulberry)}.photo-upload-btn input[type=file]{display:none}.saved-profile-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center}.saved-profile-card h2{margin-bottom:.2rem}.saved-profile-card .saved-name{font-family:var(--font-brand);font-weight:600;font-size:1rem}.saved-profile-card .saved-hint{font-size:.72rem;color:var(--text-secondary);margin-bottom:.3rem}.main-panel{min-width:0}.segmented-control{display:flex;background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:0}.segmented-control button{flex:1;border:0;border-radius:calc(var(--radius-md) - 2px);padding:.45rem .9rem;background:transparent;color:var(--text-secondary);font-size:.78rem;font-weight:600;transition:background var(--speed) var(--ease),color var(--speed) var(--ease),box-shadow var(--speed) var(--ease)}.segmented-control button:hover{color:var(--text)}.segmented-control button.active-toggle{background:var(--mulberry);color:var(--mist);box-shadow:0 1px 4px var(--mulberry-glow)}.actions-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}.actions-row.compact{margin-bottom:0;margin-top:.75rem}.join-form{display:flex;gap:.5rem;flex:1 1 280px}.join-form input{font-family:Outfit,monospace;font-size:1.1rem;font-weight:700;letter-spacing:.25em;text-align:center;max-width:180px;padding:.55rem .75rem;border:2px solid var(--border-strong);background:var(--surface-strong)}.join-form input:focus{border-color:var(--mulberry)}.join-form button{flex-shrink:0}.mode-toggle{display:contents}.error-box{border-radius:var(--radius-md);padding:.6rem .9rem;background:var(--error-bg);color:var(--error-text);font-size:.82rem;font-weight:500;margin-bottom:.75rem;border:1px solid rgba(192,64,64,.15)}.empty-state{text-align:center;padding:3rem 1.5rem;color:var(--text-secondary)}.empty-state h3{color:var(--text);margin-bottom:.6rem}.empty-state p{max-width:36rem;margin-left:auto;margin-right:auto;font-size:.85rem}.split-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.lobby-header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.5rem}.lobby-header h3{margin:0}.lobby-meta{font-size:.75rem;color:var(--text-secondary)}.ready-bar{height:4px;border-radius:2px;background:var(--surface-muted);margin-bottom:.75rem;overflow:hidden}.ready-bar-fill{height:100%;background:var(--badge-ready);border-radius:2px;transition:width var(--speed-slow) var(--ease)}.player-list{list-style:none;padding:0;margin:0 0 .5rem;display:grid;gap:.35rem}.player-list li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .6rem;border-radius:var(--radius-sm);background:var(--surface-strong);border:1px solid var(--border);font-size:.82rem;transition:background var(--speed) var(--ease)}.player-list li:hover{background:var(--surface-soft)}.player-name{font-weight:600;display:flex;align-items:center;gap:.35rem}.player-name .host-badge{font-size:.65rem;padding:.1rem .35rem;border-radius:10px;background:var(--mulberry-glow);color:var(--badge-host);font-weight:700;text-transform:uppercase;letter-spacing:.03em}.player-status{font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:.3rem}.player-status .ready-dot{width:7px;height:7px;border-radius:50%}.player-status .ready-dot.ready{background:var(--badge-ready)}.player-status .ready-dot.waiting{background:var(--badge-waiting)}.player-status .offline-tag{font-size:.65rem;color:var(--danger);font-style:italic}.lobby-info{font-size:.78rem;color:var(--text-secondary);margin-bottom:.5rem}.lobby-info span+span:before{content:"·";margin:0 .4rem;opacity:.5}.test-mode-note{font-size:.72rem;color:var(--plum);padding:.4rem .6rem;background:var(--plum-glow);border-radius:var(--radius-sm);margin-bottom:.5rem;border:1px solid var(--border)}.comms-panel h3{margin-bottom:.5rem}.comms-hint{font-size:.7rem;color:var(--text-secondary);margin-bottom:.5rem}.chat-log{max-height:220px;overflow-y:auto;scroll-behavior:smooth;background:var(--surface-muted);border-radius:var(--radius-md);padding:.6rem;margin-bottom:.65rem;display:flex;flex-direction:column;gap:.3rem}.chat-log::-webkit-scrollbar{width:4px}.chat-log::-webkit-scrollbar-track{background:transparent}.chat-log::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}.chat-msg{font-size:.8rem;line-height:1.4;padding:.35rem .55rem;border-radius:var(--radius-sm);background:var(--surface-strong)}.chat-msg strong{color:var(--mulberry);margin-right:.3rem}.chat-compose{display:flex;gap:.4rem;align-items:flex-end}.chat-compose textarea{flex:1;border-radius:var(--radius-md);min-height:38px;max-height:100px;padding:.5rem .7rem;font-size:.8rem;resize:none}.chat-compose button{flex-shrink:0;padding:.5rem .85rem}.settings-panel{margin-bottom:1rem}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem}.settings-grid{display:grid;gap:.7rem}.toggle-row{display:flex;align-items:center;gap:.65rem;font-size:.82rem}.toggle-row input[type=checkbox]{width:auto;accent-color:var(--mulberry)}.checkbox-row{display:flex;align-items:center;gap:.65rem;font-size:.82rem}.checkbox-row input{width:auto;accent-color:var(--mulberry)}.match-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem;align-items:start}.game-shell{min-height:520px;border-radius:var(--radius-lg);overflow:hidden;border:2px solid var(--border-strong);box-shadow:0 4px 20px var(--shadow-strong)}.game-shell canvas{display:block;border-radius:var(--radius-lg)}.hud-panel{display:grid;gap:.6rem}.hud-panel h3{color:var(--mulberry);padding-bottom:.4rem;border-bottom:1px solid var(--border);margin-bottom:0}.hud-card{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:.55rem .75rem;font-size:.8rem}.hud-card strong{color:var(--mulberry)}.hud-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);font-weight:600}.task-list h4{margin-bottom:.3rem}.task-list ul{list-style:none;padding:0;margin:0;display:grid;gap:.2rem}.task-list li{font-size:.78rem;padding:.3rem 0;display:flex;align-items:center;gap:.35rem}.task-list li .task-check{width:14px;height:14px;border-radius:3px;border:1.5px solid var(--border-strong);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.6rem}.task-list li .task-check.done{background:var(--badge-ready);border-color:var(--badge-ready);color:#fff}.alert-box{border-radius:var(--radius-md);padding:.6rem .8rem;background:var(--alert-bg);border:1px solid rgba(133,57,83,.2);font-size:.82rem}.alert-box strong{display:flex;align-items:center;gap:.3rem;color:var(--danger);margin-bottom:.15rem}.meeting-panel{border-radius:var(--radius-md);padding:.7rem .85rem;background:var(--meeting-bg);border:1px solid var(--border)}.meeting-panel h4{margin-bottom:.3rem;color:var(--mulberry)}.vote-grid{display:grid;gap:.35rem;margin-top:.5rem}.vote-grid button{width:100%;justify-content:center;font-size:.78rem;padding:.45rem .6rem}.minimap{background:var(--minimap-bg);border-radius:var(--radius-md);padding:.6rem .8rem;border:1px solid var(--border)}.minimap h4{margin-bottom:.35rem}.mini-grid{display:grid;gap:.3rem}.mini-node{display:flex;justify-content:space-between;gap:.5rem;font-size:.78rem;padding:.2rem 0}.actions-stack{display:grid;gap:.4rem}.actions-stack button{width:100%;justify-content:center}.theme-toggle{font-size:1.1rem}.hero-panel{display:none}@media(max-width:1100px){.layout-grid,.match-layout,.split-top{grid-template-columns:1fr}}@media(max-width:768px){.top-bar{padding:.5rem .75rem;gap:.5rem;flex-wrap:wrap}.top-bar-brand .tagline{display:none}.content-area{padding:.75rem}.join-form{flex:1 1 100%}.join-form input{max-width:none}}