:root{--bg-floor:#ded8b4;--surface-bg:#faf7eef2;--surface-solid:#faf7ee;--surface-muted:#f0ead8;--border-color:#8c7b60;--border-strong:#5e4c36;--text-main:#2e2418;--text-muted:#6e5f49;--accent-amber:#f0c85a;--accent-coral:#d97838;--danger-color:#c94a38;--scrollbar-thumb:#b5a486;--scrollbar-track:#efe9d8;--radius-sm:4px;--radius-md:6px;--font-sans:system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;--font-mono:ui-monospace, "Cascadia Code", Consolas, monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-floor);width:100%;height:100%;font-family:var(--font-sans);color:var(--text-main);font-size:14px;overflow:hidden}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#canvas-container{z-index:1;cursor:grab;touch-action:none;width:100vw;height:100dvh;position:fixed;inset:0}#canvas-container.grabbing-dice{cursor:grabbing}#canvas-container.hovering-die{cursor:pointer}.lasso-indicator{z-index:5;pointer-events:none;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:#f0c85a33;position:fixed}.floating-labels{z-index:6;pointer-events:none;position:fixed;inset:0;overflow:hidden}.remote-cursor-tag{will-change:transform;position:absolute;top:0;left:0;transform:translate(-50%,-100%)}.cursor-bubble{background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-main);white-space:nowrap;align-items:center;gap:5px;padding:2px 7px;font-size:12px;font-weight:600;display:flex;box-shadow:0 1px 3px #0000001f}.hud-layer{z-index:10;pointer-events:none;grid-template:"top top"".side"1fr"bottom bottom"/1fr auto;gap:10px;padding:12px 14px;display:grid;position:fixed;inset:0}.surface-box{pointer-events:auto;background:var(--surface-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:0 2px 6px #2e24181a}.divider-v{background:var(--border-color);opacity:.45;flex-shrink:0;width:1px;height:18px}.top-bar{flex-wrap:wrap;grid-area:top;justify-content:space-between;align-items:center;gap:10px;display:flex}.bar-left,.bar-center,.bar-right{align-items:center;gap:8px;min-height:40px;padding:6px 12px;display:flex}.bar-right{gap:0;padding:4px 6px}.app-title{letter-spacing:.02em;color:var(--text-main);white-space:nowrap;font-size:15px;font-weight:700}.connection-badge{color:var(--text-muted);align-items:center;gap:6px;font-size:12.5px;font-weight:600;display:inline-flex}.connection-badge[data-state=connected]{color:#3b7c33}.connection-badge[data-state=connecting]{color:#a46d12}.connection-badge[hidden],.divider-v[hidden]{display:none!important}.bar-center:has(#dice-breakdown-chips:empty) .divider-v{display:none!important}.score-label{color:var(--text-muted);font-size:12.5px;font-weight:600}.score-total{font-family:var(--font-mono);text-align:center;min-width:24px;font-size:17px;font-weight:700}.dice-breakdown-chips{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.die-chip{appearance:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);min-width:24px;height:24px;font-family:var(--font-mono);color:var(--text-main);cursor:pointer;justify-content:center;align-items:center;padding:0 5px;font-size:12.5px;font-weight:700;transition:transform .1s,border-color .1s;display:inline-flex}.die-chip:hover{border-color:var(--text-main);transform:translateY(-1px)}.state-tag{border-radius:var(--radius-sm);background:var(--surface-muted);color:var(--text-muted);padding:2px 6px;font-size:11.5px;font-weight:600}.state-tag[data-rolling=true]{background:var(--accent-amber);color:var(--text-main)}.ui-btn{appearance:none;border:1px solid var(--border-color);color:var(--text-main);font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:#fff;padding:5px 11px;font-size:13px;font-weight:600;transition:background-color .12s,border-color .12s}.ui-btn:hover{background:var(--surface-muted);border-color:var(--border-strong)}.ui-btn:active{transform:translateY(1px)}.ui-btn.primary-btn{background:var(--accent-coral);color:#fff;border-color:#a8541f}.ui-btn.primary-btn:hover{background:#c86b2d}.ui-btn.accent-btn{background:var(--accent-amber);color:var(--text-main);border-color:#b58d28}.ui-btn.accent-btn:hover{background:#e5bc4c}.ui-btn.danger-btn{color:var(--danger-color);background:#f9e3df;border-color:#c97f74}.ui-btn.xs-btn{padding:3px 8px;font-size:12px}.ui-icon{vertical-align:middle;stroke:currentColor;flex-shrink:0;width:16px;height:16px;display:inline-block}.icon-btn{justify-content:center;align-items:center;gap:5px;display:inline-flex}.ghost-btn{appearance:none;color:var(--text-main);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;transition:background-color .12s,transform .1s}.ghost-btn:hover{background:#0000000f}.ghost-btn:active{transform:scale(.95)}#reset-camera-btn,#sound-toggle-btn,#lang-toggle-btn,#open-help-btn,#toggle-side-panel-btn{justify-content:center;align-items:center;width:28px;min-width:28px;height:28px;padding:0;display:inline-flex;position:relative}#lang-toggle-btn{letter-spacing:.5px;font-size:11px;font-weight:700;line-height:1}#open-help-btn{font-size:15px;font-weight:700;line-height:1}.chat-badge-dot{background:var(--danger-color);border:1.5px solid var(--surface-solid);pointer-events:none;border-radius:50%;width:8px;height:8px;position:absolute;top:4px;right:4px}.chat-badge-dot[hidden],#sound-toggle-btn[aria-pressed=true] .icon-sound-off,#sound-toggle-btn[aria-pressed=false] .icon-sound-on{display:none!important}#random-name-btn{justify-content:center;align-items:center;min-width:28px;height:28px;padding:0 5px;display:inline-flex}#send-chat-btn{justify-content:center;align-items:center;min-width:36px;height:30px;padding:0 8px;display:inline-flex}.text-btn{appearance:none;color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;padding:2px 6px;font-size:12.5px;font-weight:600}.text-btn:hover{color:var(--text-main);background:#0000000d}.ui-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);min-width:0;font-family:var(--font-sans);color:var(--text-main);-webkit-user-select:text;user-select:text;background:#fff;outline:none;flex:1;padding:5px 8px;font-size:13px}.ui-input:focus{border-color:var(--accent-coral)}.ui-input.code-input{text-transform:uppercase;font-family:var(--font-mono);letter-spacing:.05em}.ui-color-input{border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;background:#fff;flex-shrink:0;width:28px;height:28px;padding:1px}.ui-select{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-main);font-family:var(--font-sans);cursor:pointer;background:#fff;padding:5px 8px;font-size:13px;font-weight:600}.side-panel{flex-direction:column;grid-area:side;align-self:start;width:310px;max-height:100%;display:flex;overflow:hidden}.side-panel[hidden]{display:none!important}.panel-header{border-bottom:1px solid #8c7b6059;flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.panel-tabs{align-items:center;gap:4px;display:flex}.panel-tab{appearance:none;font-family:var(--font-sans);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:4px 10px;font-size:13.5px;font-weight:700;transition:background-color .12s,color .12s;display:inline-flex;position:relative}.panel-tab:hover{color:var(--text-main);background:#0000000d}.panel-tab.active,.panel-tab[aria-selected=true]{color:var(--text-main);background:var(--surface-muted)}.tab-badge-dot{background:var(--danger-color);border-radius:50%;flex-shrink:0;width:7px;height:7px;display:inline-block}.tab-badge-dot[hidden]{display:none!important}.panel-tab-content{flex-direction:column;flex:1;min-height:0;display:flex}.panel-tab-content[hidden]{display:none!important}.panel-room-tab{overflow-y:auto}.panel-title{font-size:13.5px;font-weight:700}.panel-section{border-bottom:1px solid #8c7b6059;flex-direction:column;gap:8px;padding:10px 12px;display:flex}.field-row{align-items:center;gap:5px;display:flex}.field-label-inline{color:var(--text-muted);white-space:nowrap;font-size:12px;font-weight:600}.room-controls-stack[hidden],.room-active-box[hidden]{display:none!important}.room-active-box{background:var(--surface-muted);border-radius:var(--radius-sm);border:1px solid #8c7b6066;padding:7px 9px}.active-room-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.active-room-label{font-size:12.5px}.active-room-label strong{font-family:var(--font-mono);letter-spacing:.05em;-webkit-user-select:text;user-select:text}.active-room-actions{align-items:center;gap:4px;display:flex}.room-feedback{color:var(--accent-coral);min-height:0;font-size:12px}.room-feedback:empty{display:none}.members-details{font-size:12.5px}.members-summary{cursor:pointer;color:var(--text-muted);padding:2px 0;font-weight:600}.player-list{flex-direction:column;gap:4px;max-height:92px;margin-top:5px;list-style:none;display:flex;overflow-y:auto}.player-item{border-radius:var(--radius-sm);background:#f0ead899;justify-content:space-between;align-items:center;padding:3px 7px;font-size:12px;display:flex}.player-ident{text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:6px;display:flex;overflow:hidden}.player-color-dot{border:1px solid var(--border-strong);border-radius:2px;flex-shrink:0;width:10px;height:10px}.player-role-tag{color:var(--text-muted);font-size:11px}.chat-section{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}*{scrollbar-width:thin;scrollbar-color:#8c7b6073 transparent}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#8c7b6073;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#8c7b60b3}.chat-messages{flex-direction:column;flex:1;gap:6px;min-height:50px;padding:8px 10px;display:flex;overflow-y:auto}.chat-item{flex-direction:column;gap:2px;font-size:12.5px;line-height:1.4;display:flex}.chat-meta{color:var(--text-muted);align-items:center;gap:5px;font-size:11px;display:flex}.chat-author-dot{border:1px solid var(--border-strong);border-radius:2px;width:7px;height:7px}.chat-bubble{border-radius:var(--radius-sm);color:var(--text-main);word-break:break-word;-webkit-user-select:text;user-select:text;background:#fff;border:1px solid #8c7b6073;padding:5px 8px}.chat-item.roll-event .chat-bubble{background:#fcf4d9;border-color:#bfa04e;font-weight:600}.chat-item.system-event .chat-bubble{color:var(--text-muted);text-align:center;background:0 0;border:none;padding:2px 4px;font-size:11.5px}.chat-form{background:var(--surface-muted);border-top:1px solid #8c7b6059;flex-shrink:0;align-items:center;gap:6px;padding:7px 10px;display:flex}#chat-input{resize:none;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-sans);color:var(--text-main);-webkit-user-select:text;user-select:text;background:#fff;outline:none;flex:1;max-height:56px;padding:5px 8px;font-size:13px}#chat-input:focus{border-color:var(--accent-coral)}.bottom-toolbox-wrap{grid-area:bottom;place-self:end center}.toolbox{align-items:center;gap:8px;padding:7px 12px;display:flex}.color-swatches{align-items:center;gap:5px;display:flex}.color-swatch{border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--swatch-bg);cursor:pointer;width:22px;height:22px;transition:transform .1s}.color-swatch:hover{transform:translateY(-1px)}.color-swatch.selected{outline:2px solid var(--text-main);outline-offset:1px}.color-swatch.swatch-random{background:conic-gradient(#f3cf68,#e68645,#f7c2cb,#a8dcf0,#c2df9f,#f3cf68)}.color-picker-dropdown{justify-content:center;align-items:center;height:30px;display:inline-flex}.color-picker-summary{appearance:none;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;height:30px;margin:0;padding:0;line-height:0;list-style:none;display:inline-flex}.color-picker-summary::-webkit-details-marker{display:none}.current-color-preview{border-radius:var(--radius-sm);border:1px solid var(--border-strong);cursor:pointer;flex-shrink:0;width:24px;height:24px;transition:transform .1s;display:block}.current-color-preview:hover{transform:translateY(-1px)}.current-color-preview.swatch-random{background:conic-gradient(#f3cf68,#e68645,#f7c2cb,#a8dcf0,#c2df9f,#f3cf68)}.color-popover.dropdown-popover{min-width:unset;z-index:30;flex-direction:row;align-items:center;gap:5px;padding:6px 8px;display:flex;position:absolute;bottom:calc(100% + 6px);left:0}.ui-btn.plus-btn{justify-content:center;align-items:center;min-width:32px;height:30px;padding:0 8px;font-size:18px;font-weight:700;line-height:1;display:inline-flex}.custom-dropdown{position:relative}.custom-dropdown>summary{list-style:none}.custom-dropdown>summary::-webkit-details-marker{display:none}.dropdown-summary{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:6px;display:inline-flex}.dropdown-chevron{width:13px;height:13px;transition:transform .16s}.custom-dropdown[open] .dropdown-chevron{transform:rotate(180deg)}.dropdown-popover{z-index:30;flex-direction:column;gap:2px;min-width:120px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 6px);left:0}.dropdown-item{appearance:none;text-align:left;font-family:var(--font-sans);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:6px 10px;font-size:13px;font-weight:600;transition:background-color .1s}.dropdown-item:hover{background:var(--surface-muted)}.dropdown-item.selected{background:var(--accent-amber);color:var(--text-main)}.context-menu{z-index:100;min-width:130px;padding:4px;position:fixed;box-shadow:0 4px 16px #00000029}.context-menu[hidden]{display:none!important}.context-menu-item{appearance:none;width:100%;font-family:var(--font-sans);border-radius:var(--radius-sm);cursor:pointer;text-align:left;white-space:nowrap;background:0 0;border:none;align-items:center;gap:6px;padding:6px 10px;font-size:13px;font-weight:600;transition:background-color .1s;display:flex}.context-menu-item:hover{background:#d9483b1a}.context-menu-item.danger-text{color:var(--danger-color)}.more-menu{position:relative}.more-menu>summary{list-style:none}.more-menu>summary::-webkit-details-marker{display:none}.more-menu-popover{z-index:25;flex-direction:column;gap:2px;min-width:110px;padding:4px;display:flex;position:absolute;bottom:calc(100% + 6px);right:0}.menu-item-btn{appearance:none;text-align:left;font-family:var(--font-sans);color:var(--text-main);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:6px 10px;font-size:13px;font-weight:600}.menu-item-btn:hover{background:var(--surface-muted)}.menu-item-btn.danger-text{color:var(--danger-color)}.ui-dialog{border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-solid);color:var(--text-main);width:min(520px,92vw);margin:auto;padding:0;box-shadow:0 8px 24px #0000002e}.ui-dialog::backdrop{background-color:#1e181066}.dialog-inner{flex-direction:column;gap:12px;padding:16px 20px;display:flex}.dialog-header{border-bottom:1px solid #8c7b6059;justify-content:space-between;align-items:center;padding-bottom:8px;display:flex}.dialog-header h2{font-size:15px;font-weight:700}.help-list{flex-direction:column;gap:10px;display:flex}.help-block{background:var(--surface-muted);border-radius:var(--radius-sm);border:1px solid #8c7b604d;padding:10px 14px}.help-block h3{margin-bottom:4px;font-size:13.5px}.help-block ul{padding-left:16px;font-size:12.5px;line-height:1.6}.toast-container{z-index:100;pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:fixed;top:62px;left:50%;transform:translate(-50%)}.toast-item{background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-main);padding:6px 14px;font-size:12.5px;font-weight:600;box-shadow:0 2px 6px #00000024}@media (width<=768px){.hud-layer{grid-template-columns:1fr;grid-template-areas:"top""side""bottom";padding:8px}.app-title{display:none}#connection-divider{display:none!important}.bar-left:not(:has(.connection-badge:not([hidden]))){display:none!important}.side-panel{justify-self:end;width:100%;max-width:320px}}