html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#120c08}.game-shell{position:relative;height:100%}.room-view{position:absolute;top:0;right:0;bottom:0;left:0;isolation:isolate;display:flex;align-items:center;justify-content:center}.room-view canvas{display:block}.room-bottom-stack{position:absolute;left:50%;bottom:1.5rem;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;width:max-content;max-width:calc(100vw - 2rem);pointer-events:none}.room-view-overlay{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.25rem;max-width:30rem;padding:.6rem 1rem;border:none;border-radius:8px;background:#0000008c;color:#f3e6d3;font:inherit;font-size:.95rem;text-align:center;cursor:pointer}.interaction-prompt{padding:.5rem 1rem;border-radius:8px;background:#0000008c;color:#f3e6d3;font-size:.95rem;text-align:center;pointer-events:none}.crosshair{position:absolute;top:50%;left:50%;width:6px;height:6px;transform:translate(-50%,-50%);border-radius:50%;background:#f3e6d3d9;pointer-events:none}.soundboard-assign-menu{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;width:18rem;padding:1rem;border-radius:10px;background:#140e0aeb;color:#f3e6d3;font-size:.9rem;text-align:center}.soundboard-assign-menu-title{margin:0;font-weight:600}.soundboard-assign-menu form,.soundboard-assign-menu>label{display:flex;flex-direction:column;gap:.35rem;width:100%}.drawing-toolbar{position:absolute;left:50%;top:1rem;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-radius:8px;background:#0000008c;color:#f3e6d3;font-size:.9rem}.drawing-toolbar button{padding:.3rem .7rem;border:1px solid transparent;border-radius:6px;background:#ffffff1a;color:inherit;font:inherit;cursor:pointer}.drawing-toolbar button.active{border-color:#f3e6d3;background:#ffffff40}.drawing-toolbar label{display:flex;align-items:center;gap:.35rem}.drawing-toolbar .view-toggle{margin-right:.25rem;border-color:#f0c46a8c;background:#f0c46a29;font-weight:600}.drawing-toolbar kbd{margin-left:.2rem;padding:0 .3rem;border:1px solid rgba(243,230,211,.4);border-radius:4px;font-family:inherit;font-size:.72rem}.session-overlay{position:absolute;top:.75rem;right:.75rem;width:17rem;padding:.85rem;border-radius:10px;background:#140e0ad1;color:#f3e6d3;font-size:.9rem;display:flex;flex-direction:column;gap:.6rem}.session-overlay-header{margin:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.invite-button{padding:.2rem .55rem;border:1px solid rgba(243,230,211,.35);border-radius:6px;background:#ffffff0f;color:inherit;font:inherit;font-size:.75rem;cursor:pointer}.invite-button:hover{background:#ffffff24}.color-picker{display:flex;gap:.45rem;justify-content:center}.color-swatch{position:relative;width:1.7rem;height:1.7rem;padding:0;border:2px solid rgba(255,255,255,.25);border-radius:50%;background:var(--swatch);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.color-swatch:hover:not(:disabled){transform:scale(1.1)}.color-swatch.selected{border-color:#fff8ec;box-shadow:0 0 0 3px #00000059,0 0 12px var(--swatch)}.color-swatch.taken{opacity:.28;cursor:not-allowed}.color-swatch.taken:after{content:"";position:absolute;inset:45% -8% auto;height:2px;background:#fff8ec;transform:rotate(-45deg)}.player-name{display:flex;align-items:center;gap:.4rem}.player-dot{flex:none;width:.65rem;height:.65rem;border-radius:50%;box-shadow:0 0 0 1px #0006}.profile-editor{display:flex;flex-direction:column;gap:.45rem;padding-bottom:.6rem;border-bottom:1px solid rgba(243,230,211,.15)}.tab-panel form.profile-name{flex-direction:row}.profile-name input{flex:1;min-width:0}.sound-name{display:flex;align-items:center;gap:.4rem;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sound-kind{flex:none;padding:.05rem .35rem;border-radius:4px;background:#ffffff1f;font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.sound-kind-youtube{background:#d63026cc}.icon-button{min-width:1.6rem;font-weight:700}.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}.slot-cell{height:2.1rem;padding:.15rem;overflow:hidden;border:1px solid rgba(243,230,211,.2);border-radius:5px;background:#ffffff0a;color:#f3e6d373;font:inherit;font-size:.62rem;line-height:1.1;cursor:pointer}.slot-cell.filled{background:#c9a15a38;color:#f3e6d3}.slot-cell.selected{border-color:#f3e6d3;box-shadow:0 0 0 1px #f3e6d3}.add-sound{display:flex;flex-direction:column;gap:.5rem}.add-sound-note{margin:0;text-align:center}.add-sound-error{margin:0;color:#ff9c8a;font-size:.82rem;text-align:center}.soundboard-assign-menu{width:21rem}.soundboard-assign-menu .assign-existing,.soundboard-assign-menu .add-sound,.soundboard-assign-menu .add-sound form,.soundboard-assign-menu label{display:flex;flex-direction:column;gap:.35rem;width:100%}.soundboard-assign-menu-divider{margin:0;color:#f3e6d399;font-size:.8rem}.assign-actions{display:flex;gap:.5rem}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0805038c;z-index:30}.map-crop-dialog{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.1rem 1.2rem;border-radius:12px;background:#18110cf7;color:#f3e6d3;box-shadow:0 18px 50px #00000080}.whiteboard-editor{display:flex;flex-direction:column;gap:.7rem;width:min(34rem,calc(100vw - 2rem));box-sizing:border-box;padding:1.1rem 1.2rem;border-radius:12px;background:#18110cf7;color:#f3e6d3;box-shadow:0 18px 50px #00000080}.whiteboard-lines{display:flex;flex-direction:column;margin:0;padding:.5rem .8rem;border:6px solid #b9c0c6;border-radius:6px;background:#f4f6f7;list-style:none}.whiteboard-lines li{display:flex;align-items:center;gap:.6rem;border-bottom:2px solid rgba(80,110,140,.14)}.whiteboard-lines li:last-child{border-bottom:none}.whiteboard-lines input{flex:1;min-width:0;padding:.35rem .1rem;border:none;background:transparent;color:#2b2f36;font-family:Segoe Print,Bradley Hand,Chalkboard SE,Marker Felt,Comic Sans MS,cursive,sans-serif;font-size:1.05rem;font-weight:600}.whiteboard-lines input:focus{outline:none;background:#506e8c14}.whiteboard-lines input::placeholder{color:#2b2f3659}.ink-dot{flex:none;width:.7rem;height:.7rem;border:1px solid rgba(43,47,54,.25);border-radius:50%}.modal-title{margin:0;font-size:1.05rem;font-weight:700}.modal-hint{margin:0;color:#f3e6d399;font-size:.8rem}.map-crop-canvas{border:6px solid #5a2f16;border-radius:4px;cursor:grab;touch-action:none}.map-crop-canvas:active{cursor:grabbing}.map-crop-zoom{display:flex;align-items:center;gap:.6rem;width:100%;font-size:.85rem}.map-crop-zoom input{flex:1}.map-crop-presets,.modal-actions{display:flex;gap:.5rem}.modal-actions{align-self:flex-end}button.primary{font-weight:700}.map-current{display:flex;justify-content:center}.map-thumb{width:9rem;height:9rem;object-fit:cover;border:4px solid #5a2f16;border-radius:4px}.map-thumb-empty{display:flex;align-items:center;justify-content:center;padding:.5rem;box-sizing:border-box;background:radial-gradient(ellipse at center,transparent 45%,rgba(104,64,28,.3)),#e6d4b0;color:#6b5a44;font-size:.75rem;text-align:center}.youtube-clip{position:absolute;left:1rem;top:1rem;width:356px;overflow:hidden;border-radius:10px;background:#140e0af2;color:#f3e6d3;box-shadow:0 10px 30px #00000073;z-index:15}.youtube-clip-header{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem .4rem .75rem;font-size:.8rem}.youtube-clip-title{flex:1;min-width:0;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}.youtube-clip-by{flex:none;color:#f3e6d399}.youtube-clip-close{flex:none;width:1.6rem;height:1.6rem;border:none;border-radius:50%;background:#ffffff1a;color:inherit;font-size:1.1rem;line-height:1;cursor:pointer}.youtube-embed{background:#000}.youtube-clip-tv{flex:none;padding:.15rem .5rem;border:1px solid rgba(243,230,211,.25);border-radius:6px;background:#ffffff14;color:inherit;font:inherit;font-size:.72rem;cursor:pointer}.tv-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none}.tv-screen{background:#000}.tv-now-playing{position:absolute;top:1rem;left:1rem;z-index:15;display:flex;align-items:center;gap:.55rem;max-width:min(26rem,calc(100vw - 20rem));padding:.45rem .55rem .45rem .75rem;border-radius:10px;background:#140e0ae0;color:#f3e6d3;font-size:.8rem;box-shadow:0 8px 24px #0006}.tv-now-text{display:flex;flex-direction:column;min-width:0}.tv-now-title{overflow:hidden;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.tv-now-by{color:#f3e6d399;font-size:.72rem}.tv-now-playing>button:not(.youtube-clip-close){flex:none;padding:.25rem .55rem;border:1px solid rgba(243,230,211,.25);border-radius:6px;background:#ffffff14;color:inherit;font:inherit;cursor:pointer}.toasts{position:fixed;left:50%;bottom:8.5rem;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:.4rem;z-index:20}.toast{max-width:26rem;padding:.55rem 1rem;border:none;border-radius:8px;background:#140e0aeb;color:#f3e6d3;font:inherit;font-size:.9rem;text-align:center;cursor:pointer;box-shadow:0 6px 20px #00000059;animation:toast-in .16s ease-out}.toast-error{background:#82221af2}@keyframes toast-in{0%{opacity:0;transform:translateY(6px)}}.pre-join{--ink: #f3e6d3;--ink-muted: rgba(243, 230, 211, .62);--panel: rgba(30, 21, 15, .86);--edge: rgba(243, 230, 211, .12);--field: rgba(10, 7, 5, .55);--gold: #d9a441;--gold-bright: #f0c46a;--ok: #9ad9a0;--warn: #f29a7e;position:relative;box-sizing:border-box;min-height:100%;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 30% 45%,rgba(214,140,70,.2),transparent 70%),radial-gradient(ellipse 50% 45% at 85% 100%,rgba(110,70,160,.16),transparent 70%),#120c08;color:var(--ink)}.pre-join:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(243,230,211,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(243,230,211,.045) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 65% 60% at 50% 50%,#000 30%,transparent 80%);pointer-events:none}.join-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);align-items:center;gap:2.5rem;width:100%;max-width:62rem}.join-hero{position:relative;display:flex;flex-direction:column;align-items:center}.join-hero:before{content:"";position:absolute;left:50%;top:48%;width:min(30rem,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 65%);opacity:.22;transform:translate(-50%,-50%);transition:background .4s ease;pointer-events:none}.character-preview{position:relative;width:100%;max-width:26rem;aspect-ratio:4 / 5;max-height:68vh}.character-preview canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}.character-preview canvas.dragging{cursor:grabbing}.character-preview.loading:after{content:"";position:absolute;left:50%;top:45%;width:2rem;height:2rem;margin:-1rem 0 0 -1rem;border:3px solid rgba(243,230,211,.15);border-top-color:var(--gold);border-radius:50%;opacity:0;animation:join-spin .9s linear infinite,join-fade-in .2s ease .25s forwards}.character-preview.unsupported{display:none}.character-caption{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:.25rem 0 0}.character-name{max-width:20rem;overflow:hidden;font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:1.6rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.character-title{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;filter:brightness(1.15)}.character-hint{position:relative;margin:.6rem 0 0;color:#f3e6d359;font-size:.72rem}.join-card{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:1rem;padding:1.6rem 1.6rem 1.1rem;border:1px solid var(--edge);border-radius:18px;background:var(--panel);box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:join-rise .42s cubic-bezier(.2,.8,.2,1)}.join-brand{display:flex;align-items:center;gap:.85rem}.join-brand h1{margin:0;font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:1.65rem;letter-spacing:.01em}.join-brand p{margin:.15rem 0 0;color:var(--ink-muted);font-size:.88rem}.brand-mark{flex:none;width:3rem;height:3rem;filter:drop-shadow(0 4px 10px rgba(217,164,65,.35))}.brand-mark-body{fill:#7a2e22;stroke:var(--gold-bright);stroke-width:2.5;stroke-linejoin:round}.brand-mark-edges{fill:none;stroke:var(--gold-bright);stroke-width:1.5;stroke-linejoin:round;opacity:.8}.brand-mark text{fill:var(--ink);font:700 11px Georgia,serif}.join-mode-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:.25rem;border:1px solid var(--edge);border-radius:12px;background:var(--field)}.join-mode-switch:before{content:"";position:absolute;top:.25rem;bottom:.25rem;left:.25rem;width:calc(50% - .25rem);border-radius:9px;background:linear-gradient(180deg,#f0c46a38,#d9a4411f);box-shadow:inset 0 0 0 1px #f0c46a73;transition:transform .22s cubic-bezier(.2,.8,.2,1)}.join-mode-switch[data-mode=join]:before{transform:translate(100%)}.join-mode-switch button{position:relative;padding:.55rem .5rem;border:none;border-radius:9px;background:transparent;color:var(--ink-muted);font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:color .15s ease}.join-mode-switch button.active{color:var(--ink)}.join-mode-switch button:hover:not(.active){color:#f3e6d3d9}.join-field{display:flex;flex-direction:column;gap:.45rem}.join-label{color:var(--ink-muted);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.join-card input{box-sizing:border-box;width:100%;min-width:0;padding:.7rem .85rem;border:1px solid var(--edge);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;font-size:1rem;transition:border-color .15s ease,box-shadow .15s ease}.join-card input::placeholder{color:#f3e6d34d}.join-card input:focus{outline:none;border-color:#f0c46ab3;box-shadow:0 0 0 3px #d9a44133}.join-card .color-picker{justify-content:flex-start;gap:.6rem}.join-card .color-swatch{width:2.1rem;height:2.1rem}.code-row{display:flex;gap:.5rem}.join-card .code-input{flex:1;font-family:ui-monospace,Cascadia Mono,Consolas,SF Mono,monospace;font-size:1.45rem;font-weight:700;letter-spacing:.32em;text-align:center;text-transform:uppercase}.code-reroll{flex:none;display:grid;place-items:center;width:3.2rem;border:1px solid var(--edge);border-radius:10px;background:var(--field);color:var(--ink);cursor:pointer;transition:background .15s ease,transform .15s ease}.code-reroll svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s ease}.code-reroll:hover{background:#f3e6d314}.code-reroll:active svg{transform:rotate(-180deg)}.join-status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;min-height:1.3rem;margin:-.35rem 0 0;color:var(--ink-muted);font-size:.85rem}.join-status.ok{color:var(--ok)}.join-status.warn,.join-error{color:var(--warn)}.join-error{margin:0;padding:.6rem .8rem;border:1px solid rgba(242,154,126,.35);border-radius:10px;background:#f29a7e14;font-size:.88rem}.join-present{display:inline-flex}.join-present span{width:.8rem;height:.8rem;margin-right:-.2rem;border:2px solid #1e150f;border-radius:50%}.link-button{padding:0;border:none;background:none;color:var(--gold-bright);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.join-submit{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:.2rem;padding:.85rem 1rem;border:none;border-radius:12px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#2a1a0c;font:inherit;font-size:1.05rem;font-weight:800;box-shadow:0 8px 24px #d9a4414d,inset 0 1px #fff6;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}.join-submit svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s ease}.join-submit:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 10px 30px #d9a4416b,inset 0 1px #fff6}.join-submit:hover:not(:disabled) svg{transform:translate(3px)}.join-submit:active:not(:disabled){transform:translateY(1px)}.join-submit:disabled{background:#f3e6d31a;color:#f3e6d359;box-shadow:none;cursor:not-allowed}.join-card button:focus-visible,.join-card .color-swatch:focus-visible,.rejoin-card button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}.join-footer{display:flex;justify-content:center;padding-top:.8rem;border-top:1px solid var(--edge)}.connection-pill{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink-muted);font-size:.76rem}.connection-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}.connection-pill.connecting .connection-dot{background:var(--gold-bright);box-shadow:0 0 8px var(--gold-bright);animation:join-pulse 1s ease-in-out infinite alternate}.connection-pill.disconnected .connection-dot{background:var(--warn);box-shadow:0 0 8px var(--warn)}.rejoin-card{align-items:center;width:min(24rem,100%);text-align:center}.rejoin-card .brand-mark{width:3.6rem;height:3.6rem;animation:join-bob 1.4s ease-in-out infinite alternate}.rejoin-title{margin:0;font-size:1.1rem}.rejoin-title strong{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.15em}.rejoin-detail{margin:-.5rem 0 0;color:var(--ink-muted);font-size:.85rem}.secondary-button{padding:.5rem 1.2rem;border:1px solid var(--edge);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;cursor:pointer}.secondary-button:hover{background:#f3e6d314}@keyframes join-rise{0%{opacity:0;transform:translateY(12px)}}@keyframes join-spin{to{transform:rotate(360deg)}}@keyframes join-fade-in{to{opacity:1}}@keyframes join-pulse{to{opacity:.35}}@keyframes join-bob{to{transform:translateY(-6px) rotate(8deg)}}@media (max-width: 860px){.pre-join{align-items:flex-start;padding:1rem 1rem 2rem}.join-layout{grid-template-columns:minmax(0,1fr);justify-items:center;gap:.75rem}.join-hero,.join-card{width:100%;max-width:30rem}.character-preview{max-width:none;aspect-ratio:auto;height:clamp(13rem,34vh,18rem)}.character-name{font-size:1.3rem}.character-hint{display:none}}@media (max-width: 400px){.join-card{padding:1.2rem 1rem 1rem}.join-brand h1{font-size:1.35rem}.join-card .color-picker{gap:.4rem}.join-card .code-input{font-size:1.2rem;letter-spacing:.22em}}@media (prefers-reduced-motion: reduce){.join-card,.rejoin-card .brand-mark,.connection-pill.connecting .connection-dot{animation:none}.join-mode-switch:before,.join-hero:before{transition:none}}.tab-bar{display:flex;justify-content:space-between;gap:.25rem}.tab-button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.4rem .2rem;border:1px solid transparent;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:.68rem;text-align:center;cursor:pointer}.tab-button span{white-space:nowrap}.tab-button:hover{background:#ffffff14}.tab-button.active{border-color:#f3e6d3;background:#ffffff26}.tab-panel{display:flex;flex-direction:column;gap:.6rem}.tab-panel form,.tab-panel>div{display:flex;flex-direction:column;gap:.5rem}.tab-panel label{display:flex;flex-direction:column;gap:.25rem;text-align:center}.tab-panel button[type=submit],.tab-panel>div>button{align-self:center}.tab-section-label{margin:.4rem 0 0;text-align:center;font-weight:600}.tab-empty-note{margin:0;text-align:center;color:#f3e6d3b3;font-style:italic}.player-list,.dice-list,.sound-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.35rem}.player-list li,.dice-list li,.sound-list li{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.connection-banner{position:absolute;top:.75rem;left:50%;transform:translate(-50%);padding:.5rem 1.1rem;border-radius:8px;background:#96281ee6;color:#fff4ea;font-size:.9rem;font-weight:600;pointer-events:none}.player-actions{display:flex;gap:.3rem}.player-away{opacity:.55;font-style:italic}.settings-tab{display:flex;flex-direction:column;gap:.75rem}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;text-align:left}.leave-button{align-self:center;margin-top:.2rem}.dice-section-title,.dice-hint,.dice-empty,.dice-total{margin:0;text-align:center;font-size:.8rem}.dice-section-title{font-weight:600}.dice-hint,.dice-empty{color:#f3e6d399}.dice-total strong{font-size:1rem}.die-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:.3rem}.die-picker button{display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.35rem .1rem;border:1px solid rgba(243,230,211,.18);border-radius:8px;background:#f3e6d30f;color:inherit;font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;transition:background .12s ease,transform .12s ease}.die-picker button:hover{background:#f3e6d324;transform:translateY(-1px)}.die-glyph{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}.dice-actions{display:flex;flex-direction:row;justify-content:center;gap:.4rem}.dice-list li{justify-content:flex-start}.dice-kind{display:inline-flex;align-items:center;gap:.2rem;width:3.2rem;font-weight:700}.dice-kind .die-glyph{width:1rem;height:1rem;stroke-width:2.2}.dice-owner{flex:1;min-width:0;overflow:hidden;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap;opacity:.8}.dice-result{min-width:1.8rem;font-size:1.05rem;font-weight:800;text-align:center}.dice-result.critical{color:#f3c55b;text-shadow:0 0 8px rgba(243,197,91,.6)}.dice-result.fumble{color:#f07a64}.chat-panel{position:absolute;left:1rem;bottom:1rem;z-index:14;display:flex;flex-direction:column;gap:.4rem;width:min(24rem,calc(100vw - 2rem));color:#f3e6d3;font-size:.88rem;line-height:1.35;pointer-events:none}.chat-panel.open{pointer-events:auto}.chat-log{display:flex;flex-direction:column;gap:.25rem;max-height:40vh;margin:0;padding:0;overflow-y:auto;list-style:none}.chat-panel.open .chat-log{padding:.6rem .7rem;border-radius:10px;background:#140e0ae6;box-shadow:0 10px 30px #00000073}.chat-line{overflow-wrap:anywhere;transition:opacity 3s ease;animation:chat-in .18s ease-out}.chat-panel:not(.open) .chat-line{align-self:flex-start;padding:.2rem .55rem;border-radius:7px;background:#140e0aa8}.chat-line.fading{opacity:0}.chat-name{font-weight:700;filter:brightness(1.25)}.chat-system{color:#f3e6d399;font-style:italic}.chat-breakdown{opacity:.7}.chat-total{font-size:1rem}.chat-total.critical,.chat-flavor{color:#f3c55b}.chat-total.fumble,.chat-flavor.fumble{color:#f07a64}.chat-input input{box-sizing:border-box;width:100%;padding:.55rem .75rem;border:1px solid rgba(243,230,211,.25);border-radius:10px;background:#140e0aeb;color:#f3e6d3;font:inherit}.chat-input input:focus{outline:none;border-color:#f0c46ab3}.chat-open{align-self:flex-start;padding:.3rem .6rem;border:1px solid rgba(243,230,211,.18);border-radius:8px;background:#140e0a8c;color:#f3e6d3bf;font:inherit;font-size:.75rem;cursor:pointer;pointer-events:auto}@media (max-width: 1100px){.chat-panel{bottom:7.5rem}}.chat-open kbd{margin-right:.25rem;padding:0 .3rem;border:1px solid rgba(243,230,211,.35);border-radius:4px;font-family:inherit;font-size:.7rem}@keyframes chat-in{0%{opacity:0;transform:translateY(4px)}}.room-view-keys{color:#f3e6d3b8;font-size:.78rem}.grid-picker{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.25rem}.grid-picker-label{margin-right:.3rem;font-size:.8rem;font-weight:600}.grid-picker button{min-width:2.2rem;padding:.2rem .35rem;border:1px solid rgba(243,230,211,.2);border-radius:6px;background:#f3e6d30f;color:inherit;font:inherit;font-size:.78rem;cursor:pointer}.grid-picker button.active{border-color:#f0c46acc;background:#f0c46a2e;font-weight:700}.room-vignette{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(ellipse 75% 70% at 50% 52%,#0000 55%,#0c060261);pointer-events:none}.room-loading{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:radial-gradient(ellipse 60% 50% at 50% 45%,rgba(214,140,70,.18),transparent 70%),#120c08;color:#f3e6d3}.room-loading .brand-mark{width:3.4rem;height:3.4rem;animation:join-bob 1.4s ease-in-out infinite alternate}.room-loading-title{margin:0;font-family:Georgia,Iowan Old Style,Palatino Linotype,serif;font-size:1.3rem}.room-loading-bar{width:min(18rem,70vw);height:6px;overflow:hidden;border-radius:3px;background:#f3e6d31f}.room-loading-bar span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#d9a441,#f0c46a);transition:width .2s ease}.room-loading-detail{margin:0;color:#f3e6d399;font-size:.85rem}:root{--ink: #f3e6d3;--ink-muted: rgba(243, 230, 211, .62);--edge: rgba(243, 230, 211, .14);--field: rgba(10, 7, 5, .55);--gold: #d9a441;--gold-bright: #f0c46a;--danger: #e2775f}.session-overlay{box-sizing:border-box;max-height:calc(100vh - 1.5rem);overflow-y:auto;border:1px solid var(--edge);border-radius:14px;background:#18110cdb;box-shadow:0 18px 50px #00000073,inset 0 1px #ffffff0a;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);scrollbar-width:thin;scrollbar-color:rgba(243,230,211,.2) transparent}.session-overlay.collapsed{width:auto;padding:.5rem .55rem .5rem .85rem}.session-code{white-space:nowrap}.invite-button{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}.invite-button svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.session-code strong{color:var(--gold-bright);letter-spacing:.06em}.session-header-actions{display:flex;align-items:center;gap:.35rem}.collapse-button{display:grid;place-items:center;width:1.7rem;height:1.7rem;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-muted);cursor:pointer;transition:background .12s ease,color .12s ease}.collapse-button:hover{background:#f3e6d31a;color:var(--ink)}.collapse-button svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}.session-overlay.collapsed .collapse-button svg{transform:rotate(180deg)}.tab-button.active{border-color:#f0c46a8c;background:#f0c46a24;color:var(--gold-bright)}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button){padding:.32rem .7rem;border:1px solid var(--edge);border-radius:7px;background:#f3e6d312;color:var(--ink);font:inherit;font-size:.8rem;cursor:pointer;transition:background .12s ease,border-color .12s ease,filter .12s ease}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button:hover:not(:disabled)){border-color:#f3e6d34d;background:#f3e6d324}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button:disabled){opacity:.4;cursor:not-allowed}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button:focus-visible){outline:2px solid var(--gold-bright);outline-offset:2px}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button.primary){border-color:transparent;background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#2a1a0c;font-weight:800;box-shadow:inset 0 1px #ffffff59}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(button.primary:hover:not(:disabled)){border-color:transparent;background:linear-gradient(180deg,var(--gold-bright),var(--gold));filter:brightness(1.08)}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input[type=text],input[type=url],input:not([type])){box-sizing:border-box;min-width:0;padding:.42rem .6rem;border:1px solid var(--edge);border-radius:7px;background:var(--field);color:var(--ink);font:inherit;font-size:.85rem;transition:border-color .15s ease,box-shadow .15s ease}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input)::placeholder{color:#f3e6d34d}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input[type=text],input[type=url],input:not([type])):focus{outline:none;border-color:#f0c46ab3;box-shadow:0 0 0 3px #d9a44133}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu,.drawing-toolbar) :where(input[type=range],input[type=checkbox]){accent-color:var(--gold)}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input[type=file]){max-width:100%;color:var(--ink-muted);font:inherit;font-size:.75rem}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input[type=file])::file-selector-button{margin-right:.5rem;padding:.32rem .7rem;border:1px solid var(--edge);border-radius:7px;background:#f3e6d312;color:var(--ink);font:inherit;font-size:.8rem;cursor:pointer}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(input[type=file])::file-selector-button:hover{background:#f3e6d324}.leave-button{color:var(--danger)}.session-overlay .leave-button:hover{border-color:#e2775f8c;background:#e2775f1f}.player-list li{padding:.3rem .35rem .3rem .45rem;border-radius:8px;background:#f3e6d30a}.player-actions button,.sound-list button,.dice-list button{padding:.2rem .5rem;font-size:.74rem}.icon-button{min-width:1.7rem;padding-inline:.3rem;color:var(--ink-muted)}.tab-panel .settings-row{flex-direction:row;text-align:left}.settings-volume{display:flex;align-items:center;gap:.5rem}.settings-volume input{width:7.5rem}.settings-volume output{min-width:2.4rem;color:var(--ink-muted);font-size:.78rem;font-variant-numeric:tabular-nums;text-align:right}.settings-hint{margin:-.35rem 0 0;color:var(--ink-muted);font-size:.75rem}.switch{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;flex:none;width:2.3rem;height:1.3rem;margin:0;border:1px solid var(--edge);border-radius:999px;background:#f3e6d31f;cursor:pointer;transition:background .16s ease,border-color .16s ease}.switch:after{content:"";position:absolute;top:50%;left:.15rem;width:.95rem;height:.95rem;border-radius:50%;background:var(--ink);transform:translateY(-50%);transition:left .16s ease}.switch:checked{border-color:transparent;background:linear-gradient(180deg,var(--gold-bright),var(--gold))}.switch:checked:after{left:calc(100% - 1.1rem);background:#2a1a0c}.switch:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}.drawing-toolbar{border:1px solid var(--edge);border-radius:12px;background:#18110cd1;box-shadow:0 10px 30px #00000059;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawing-toolbar button.active{border-color:#f0c46a99;background:#f0c46a2e;color:var(--gold-bright)}.drawing-toolbar input[type=color]{width:2rem;height:1.5rem;padding:0;border:1px solid var(--edge);border-radius:6px;background:none;cursor:pointer}.map-crop-dialog,.whiteboard-editor,.soundboard-assign-menu{border:1px solid var(--edge)}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(select){box-sizing:border-box;max-width:100%;padding:.4rem 1.8rem .4rem .6rem;border:1px solid var(--edge);border-radius:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3e6d3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .5rem center / .85rem,var(--field);color:var(--ink);font:inherit;font-size:.85rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(select):focus{outline:none;border-color:#f0c46ab3;box-shadow:0 0 0 3px #d9a44133}:where(.session-overlay,.modal-backdrop,.soundboard-assign-menu) :where(option){background:#1e150f;color:var(--ink)}.soundboard-assign-menu{border-radius:14px;background:#18110cf0;box-shadow:0 18px 50px #00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}