:root{--surface-sunken: #16171d;--surface-base: #1a1c24;--surface: #1f212b;--surface-raised: #23252f;--surface-hover: #2c2f3d;--border-subtle: #2a2d3a;--border: #33364a;--border-strong: #3d4156;--text: #e6e6e6;--text-muted: #b9bdd0;--text-subtle: #8b8fa3;--accent: #059669;--accent-light: #10b981;--accent-hover: #047857;--accent-text: #ffffff;--npc: #f59e0b;--success: #6ee7a8;--danger: #ff6b6b;--danger-surface: #33222a;--danger-border: #4a2b33;--danger-text: #f2a6b3;--brand-discord: #5865f2;--brand-discord-hover: #4752c4;--brand-github: #24292f;--brand-github-hover: #32383f;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .875rem;--text-lg: 1.25rem;--text-xl: 1.75rem;--font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;--topbar-height: 44px;--radius-sm: 4px;--radius: 6px;--radius-lg: 10px;--shadow-sm: 0 1px 2px rgb(0 0 0 / .3);--shadow: 0 4px 12px rgb(0 0 0 / .35);--shadow-lg: 0 12px 32px rgb(0 0 0 / .45);--duration-fast: .12s;--duration: .18s;--ease: cubic-bezier(.2, 0, .2, 1);--focus-ring: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--accent);--sidebar-width: 12.5rem;--sidebar-width-compact: 8.25rem}@media(prefers-reduced-motion:reduce){:root{--duration-fast: 0ms;--duration: 0ms}}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:var(--focus-ring)}:where(button,a,input,select,textarea,.sidebar-btn,.admin-btn){transition:background-color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease),color var(--duration-fast) var(--ease),box-shadow var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}:where(button,.sidebar-btn):not(:disabled):active{transform:translateY(1px)}@keyframes surface-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.auth-panel,.admin-panel{animation:surface-in var(--duration) var(--ease)}@media(prefers-reduced-motion:reduce){.auth-panel,.admin-panel{animation:none}}:root[data-theme=light]{--surface-sunken: #eef0f4;--surface-base: #f6f7f9;--surface: #ffffff;--surface-raised: #ffffff;--surface-hover: #eef0f4;--border-subtle: #e4e7ec;--border: #d3d8e0;--border-strong: #b6bdc9;--text: #1a1c24;--text-muted: #4a4f5e;--text-subtle: #6b7280;--accent: #047857;--accent-light: #059669;--accent-hover: #036148;--accent-text: #ffffff;--npc: #b45309;--success: #047857;--danger: #dc2626;--danger-surface: #fef2f2;--danger-border: #fecaca;--danger-text: #b91c1c;--shadow-sm: 0 1px 2px rgb(16 24 40 / .05);--shadow: 0 4px 12px rgb(16 24 40 / .08);--shadow-lg: 0 12px 32px rgb(16 24 40 / .12)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:2.25rem;padding:0 var(--space-4);border:1px solid transparent;border-radius:var(--radius);font:inherit;font-size:var(--text-base);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none}@media(pointer:coarse){.btn{min-height:2.75rem}}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm)}.btn-primary:not(:disabled):hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-secondary{background:var(--surface-raised);border-color:var(--border);color:var(--text)}.btn-secondary:not(:disabled):hover{background:var(--surface-hover);border-color:var(--border-strong)}.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted)}.btn-ghost:not(:disabled):hover{background:var(--surface-raised);color:var(--text)}.btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger-text)}.btn-danger:not(:disabled):hover{background:var(--danger-surface)}.btn-block{width:100%}.btn-sm{min-height:1.75rem;padding:0 var(--space-3);font-size:var(--text-sm)}.input{width:100%;box-sizing:border-box;min-height:2.25rem;padding:0 var(--space-3);background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:var(--text-base)}.input::placeholder{color:var(--text-subtle)}.input:hover{border-color:var(--border-strong)}.field-label{display:block;margin-bottom:var(--space-2);color:var(--text-subtle);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.scroll-area{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}.scroll-area::-webkit-scrollbar{width:8px;height:8px}.scroll-area::-webkit-scrollbar-track{background:transparent}.scroll-area::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px}.scroll-area::-webkit-scrollbar-thumb:hover{background:var(--text-subtle)}#app canvas{image-rendering:pixelated}.sidebar{order:-1;flex:0 0 var(--sidebar-width);height:100vh;box-sizing:border-box;display:flex;flex-direction:column;gap:18px;padding:var(--space-4) 14px;background:var(--surface-base);border-right:1px solid var(--border-subtle);font-family:var(--font-ui);color:var(--text)}.sidebar-presence{display:flex;align-items:baseline;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--border-subtle)}.sidebar-count{font-size:var(--text-lg);font-weight:700;color:var(--success)}.sidebar-presence-label{font-size:var(--text-sm);color:var(--text-subtle)}.sidebar-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--space-2)}.sidebar-zoom{display:flex;gap:6px}.sidebar-zoom-btn{flex:0 0 32px;padding:var(--space-2) 0}.sidebar-zoom-btn:nth-child(2){flex:1 1 auto}.sidebar-language{display:flex;gap:6px}.sidebar-language-btn{flex:1 1 0;padding:6px 0;font-size:var(--text-sm);letter-spacing:.04em}.sidebar-language-btn.selected{border-color:var(--success);color:var(--success)}@media(max-width:60rem){.sidebar{flex-basis:var(--sidebar-width-compact);padding:var(--space-3) var(--space-2);gap:var(--space-3)}}@media(max-width:40rem){body{flex-direction:column}#app{flex:1 1 auto;min-height:0}.sidebar{order:1;flex:0 0 auto;width:100%;height:auto;flex-direction:row;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-right:none;border-top:1px solid var(--border-subtle);overflow-x:auto}.sidebar-presence{flex:0 0 auto;padding-bottom:0;border-bottom:none}.sidebar-actions{margin-top:0;flex:1 1 auto;flex-direction:row;align-items:center;justify-content:flex-end}.sidebar-zoom-btn:nth-child(2){display:none}}.sidebar-hint{margin:0;color:var(--text-subtle);font-size:var(--text-xs);text-align:center}.chat-log{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;gap:var(--space-2)}.chat-log-label{margin:0;color:var(--text-subtle);font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.chat-log-empty{margin:0;color:var(--text-subtle);font-size:var(--text-sm)}.chat-log-list{flex:1 1 auto;min-height:0;margin:0;padding:0;list-style:none;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-2)}.chat-log-entry{font-size:var(--text-sm);line-height:1.35;overflow-wrap:anywhere}.chat-log-who{display:block;color:var(--text-subtle);font-size:var(--text-xs);font-weight:600}.chat-log-entry-own .chat-log-who{color:var(--success)}.chat-log-text{color:var(--text-muted)}@media(max-width:40rem){.chat-log{display:none}}.user-menu{position:relative;flex:0 0 auto;margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.user-menu-trigger{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;cursor:pointer;text-align:left}.user-menu-trigger:hover,.user-menu.open .user-menu-trigger{background:var(--surface-hover);border-color:var(--border-strong)}.user-menu-badge{flex:0 0 auto;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--radius-sm);background:var(--border);color:var(--text);font-size:var(--text-xs);font-weight:700}.user-menu-badge-discord{background:var(--brand-discord);color:#fff}.user-menu-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);font-weight:600}.user-menu-caret{flex:0 0 auto;color:var(--text-subtle);font-size:var(--text-sm);line-height:1;transition:transform var(--duration-fast) var(--ease)}.user-menu.open .user-menu-caret{transform:rotate(180deg)}.user-menu-list{position:absolute;bottom:calc(100% + var(--space-1));left:0;right:0;z-index:600;display:flex;flex-direction:column;padding:var(--space-1);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow)}.user-menu-list[hidden]{display:none}.user-menu-item{padding:var(--space-2);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);font:inherit;font-size:var(--text-sm);text-align:left;cursor:pointer}.user-menu-item:hover{background:var(--surface-hover);color:var(--text)}.user-menu-item-danger{margin-top:var(--space-1);border-top:1px solid var(--border-subtle);padding-top:var(--space-2);color:var(--danger-text)}.user-menu-item-danger:hover{background:var(--danger-surface);color:var(--danger-text)}.sidebar-admin-btn{border-color:var(--accent);color:var(--accent)}.sidebar-admin-btn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}.sidebar-character{flex:0 0 auto;display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle)}.sidebar-character-avatar{position:relative;flex:0 0 auto;width:32px;height:64px;overflow:hidden}.sidebar-character-layer{position:absolute;top:0;left:0;width:16px;height:32px;background-repeat:no-repeat;background-position:-48px 0;transform:scale(2);transform-origin:top left;image-rendering:pixelated}.sidebar-character-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);font-weight:700}.chat-log-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2)}.chat-log-occupancy{color:var(--success);font-size:var(--text-xs);font-weight:600;white-space:nowrap}.sidebar-select{width:100%;box-sizing:border-box;min-height:2.25rem;padding:0 var(--space-5) 0 var(--space-3);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--surface-raised);background-image:linear-gradient(45deg,transparent 50%,var(--text-subtle) 50%),linear-gradient(135deg,var(--text-subtle) 50%,transparent 50%);background-position:right var(--space-3) center,right calc(var(--space-3) - 5px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font:inherit;font-size:var(--text-sm);cursor:pointer}.sidebar-select:hover{background-color:var(--surface-hover);border-color:var(--border-strong)}.user-menu-photo{width:100%;height:100%;border-radius:inherit;object-fit:cover;display:block}.user-menu-admin{margin-top:0;padding-top:0;border-top:none}.user-menu-admin .user-menu-trigger{justify-content:space-between}.user-menu-admin .user-menu-name{font-size:var(--text-sm)}.user-menu-admin .user-menu-list{bottom:calc(100% + var(--space-1))}.user-menu-item{display:block;text-decoration:none}.joystick[hidden]{display:none}.joystick{position:fixed;left:max(var(--space-4),env(safe-area-inset-left));bottom:max(var(--space-6),env(safe-area-inset-bottom));width:7rem;height:7rem;border-radius:50%;background:#14141a73;border:1px solid var(--border-subtle);display:grid;place-items:center;z-index:20;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.joystick-knob{width:3rem;height:3rem;border-radius:50%;background:var(--surface-raised);border:1px solid var(--border-strong);pointer-events:none}.connection-overlay[hidden]{display:none}.connection-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--space-4)}.connection-panel{background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5);max-width:26rem;text-align:center}.connection-panel h2{margin:0 0 var(--space-2);font-size:var(--text-lg)}.connection-panel p{margin:0 0 var(--space-4);color:var(--text-subtle);line-height:1.5}.auth-screen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-4);box-sizing:border-box;font-family:var(--font-ui);color:var(--text)}.auth-panel{width:100%;max-width:360px;background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6) 28px;box-shadow:var(--shadow-lg)}.picker-screen .auth-panel{max-width:440px}.auth-title{font-size:var(--text-lg);font-weight:600;margin:0 0 var(--space-2)}.auth-subtitle{font-size:var(--text-base);color:var(--text-subtle);margin:0 0 20px}.auth-label{display:block;font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);margin:var(--space-4) 0 var(--space-2)}.auth-label:first-of-type{margin-top:0}.auth-input{width:100%;background:var(--surface-base);border:1px solid var(--border-strong);color:var(--text);padding:var(--space-2) 10px;border-radius:var(--radius-sm);font-size:var(--text-base)}.auth-input:focus-visible{border-color:var(--accent)}.auth-error{font-size:var(--text-sm);color:var(--danger);margin:var(--space-3) 0}.auth-buttons{display:flex;flex-direction:column;gap:10px;margin-top:8px}.auth-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-3);border-radius:var(--radius-sm);padding:10px var(--space-4);font-size:var(--text-base);font-weight:600;cursor:pointer;border:1px solid transparent}.auth-btn-google{background:#fff;color:#1f1f1f;border-color:#dadce0}.auth-btn-google:hover{background:#f5f6f7}.auth-btn-github{background:var(--brand-github);color:#fff;border-color:#444c56}.auth-btn-github:hover{background:var(--brand-github-hover)}.auth-btn-discord{background:var(--brand-discord);color:var(--text);border-color:var(--brand-discord)}.auth-btn-discord:hover{background:var(--brand-discord-hover)}.auth-btn-confirm{width:100%;margin-top:20px;background:var(--accent);border-color:var(--accent);color:#fff}.auth-btn-confirm:hover:not(:disabled){background:var(--accent-hover)}.auth-btn-confirm:disabled{opacity:.5;cursor:default}.character-tiles{--tile-scale: 4;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.character-tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--surface-hover);border:1px solid var(--border-strong);border-radius:var(--radius);padding:var(--space-2) var(--space-1);cursor:pointer}.character-tile:hover{border-color:var(--text-subtle)}.character-tile.selected{border-color:var(--accent);background:var(--border-strong)}.character-tile-sprite{width:calc(var(--frame-width) * var(--tile-scale));height:calc(var(--frame-height) * var(--tile-scale));overflow:hidden;image-rendering:pixelated}.character-tile-sprite img{display:block;width:calc(var(--frame-width) * var(--frame-count) * var(--tile-scale));height:calc(var(--frame-height) * var(--tile-scale));margin-left:calc(var(--frame-index) * var(--frame-width) * var(--tile-scale) * -1)}.character-tile-label{font-size:var(--text-xs);color:var(--text-muted)}.auth-hint{margin:0 0 var(--space-3);font-size:var(--text-sm);color:var(--text-subtle);min-height:1.2em}.provider-mark{display:inline-flex;flex:none;align-items:center;justify-content:center}.provider-mark svg{width:100%;height:100%;display:block}.provider-mark-idle{opacity:.45}