:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f0e6d2;--font-display:"Cinzel", Georgia, "Times New Roman", serif;--bg:#0e0c0a;--bg-elevated:#14110e;--surface:#1a1612;--surface-2:#221d17;--border:#4a3f2f;--border-subtle:#2f2820;--border-gold:#8b7340;--text:#f0e6d2;--text-muted:#a89878;--accent:#c9a227;--accent-bright:#e4c04a;--accent-soft:#c9a22729;--accent-glow:#c9a22759;--success:#6db87a;--danger:#c45c5c;--danger-soft:#c45c5c2e;--radius:4px;--radius-lg:8px;--shadow-inset:inset 0 1px 0 #ffebc80a;--shadow-panel:0 4px 24px #00000073;background-color:#0e0c0a;font-family:"Source Sans 3",Segoe UI,system-ui,sans-serif;font-size:16px;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{height:100%}body{background:radial-gradient(120% 80% at 50% -20%,#4a371c38,#0000 55%),radial-gradient(80% 50% at 100% 100%,#281c1259,#0000 50%),linear-gradient(#12100e 0%,#0a0908 100%);height:100%;min-height:100%;margin:0}#root{height:100%}button,input,textarea{font:inherit}button{cursor:pointer;border:1px solid var(--border);background:var(--surface-2);color:inherit;border-radius:var(--radius);padding:.4rem .75rem;font-size:.9375rem;transition:background .12s,border-color .12s}button:hover{border-color:var(--border-gold);background:#2c261e}button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-bright);box-shadow:inset 0 0 0 1px #c9a22740}button.danger{color:#f0b0b0;background:var(--danger-soft);border-color:#6a3838}.btn-compact{padding:.3rem .55rem;font-size:.8125rem}code{background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--accent-bright);border-radius:3px;padding:.1rem .35rem;font-size:.9em}.join-screen{place-items:center;height:100%;min-height:100dvh;padding:1.5rem;display:grid;overflow-y:auto}.join-card{background:linear-gradient(165deg, #ffebc808 0%, transparent 40%), var(--surface);border:1px solid var(--border);width:min(100%,420px);box-shadow:var(--shadow-panel), inset 0 0 0 1px #c9a22714;border-radius:4px;padding:1.75rem;position:relative}.join-card:before{content:"";pointer-events:none;border:1px solid #8b734040;border-radius:2px;position:absolute;inset:6px}.join-card h1{font-family:var(--font-display);letter-spacing:.06em;color:var(--accent-bright);margin:0 0 .25rem;font-weight:600}.subtitle,.hint,.muted{color:var(--text-muted)}.join-card form{gap:.85rem;margin-top:1rem;display:grid}.join-card label:not(.role-option):not(.slot-option){gap:.35rem;font-size:.9rem;display:grid}.join-card input{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:inherit;padding:.55rem .7rem}.role-picker{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--bg-elevated);padding:.75rem}.role-option{align-items:center;gap:.5rem;margin-top:.35rem;display:flex}.slot-picker{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--bg-elevated);margin:0;padding:.75rem}.slot-list{gap:.5rem;display:grid}.slot-option{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--bg);cursor:pointer;align-items:center;gap:.65rem;padding:.6rem .7rem;transition:border-color .12s,background .12s;display:flex}.slot-option:hover:not(.taken){border-color:var(--border-gold);background:var(--surface-2)}.slot-option.taken{opacity:.55;cursor:not-allowed}.slot-option .slot-name{flex:1;font-weight:600}.slot-option .slot-status{color:var(--text-muted);font-size:.85rem}.join-error{color:#f0b0b0;margin:0 0 .5rem}.app{flex-direction:column;height:100%;max-height:100dvh;display:flex;overflow:hidden}.app-header{border-bottom:1px solid var(--border-gold);background:linear-gradient(180deg, #ffebc808 0%, transparent 100%), var(--surface);flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .75rem;display:flex;box-shadow:0 2px 12px #00000059}.header-right{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.5rem .75rem;margin-left:auto;display:flex}.header-meta{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.meta-chip{background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-inset);border-radius:999px;align-items:center;gap:.35rem;padding:.25rem .6rem;font-size:.8125rem;display:inline-flex}.meta-chip:first-child{border-color:var(--border-gold);color:var(--accent-bright)}.meta-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}.view-tabs{border-radius:var(--radius);background:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--shadow-inset);gap:.15rem;padding:.2rem;display:inline-flex}.view-tabs button{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;background:0 0;border:1px solid #0000;border-radius:3px;padding:.35rem .75rem;font-size:.8125rem;font-weight:500}.view-tabs button:hover:not(.active){border-color:var(--border-subtle);background:#ffebc80a}.view-tabs button.active{background:var(--accent-soft);color:var(--accent-bright);border-color:var(--border-gold);box-shadow:inset 0 0 12px #c9a2271f}.meta-chip-status{text-transform:capitalize}.meta-chip-status.status-joined{color:var(--success)}.meta-chip-status.status-connecting,.meta-chip-status.status-connected{color:var(--accent-bright)}.meta-chip-status.status-disconnected{color:var(--text-muted)}.error-banner{color:#f0b0b0;background:#3a1e1e;border-bottom:1px solid #6a3838;flex-shrink:0;padding:.65rem 1rem}.loading{text-align:center;color:var(--text-muted);font-family:var(--font-display);letter-spacing:.04em;padding:2rem}.join-failed{text-align:center;justify-items:center;gap:1rem;padding:2rem;display:grid}.join-failed p{color:#f0b0b0;margin:0}.game-layout{flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.players-layout{padding:0}.players-layout .party-panel{flex:1;width:100%;min-width:0}.players-layout .side-panel-body{padding:.85rem 1rem}.players-layout .party-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:.75rem}.players-layout .party-card{min-width:0}.players-layout .party-card-meta{grid-template-columns:1fr auto;align-items:center;gap:.35rem .5rem;display:grid}.players-layout .party-card-meta .slot-name-input{grid-column:1/-1}.party-remove-confirm{grid-column:1/-1;justify-content:flex-end;gap:.35rem;display:flex}.players-layout .party-card-sheet .character-form textarea{resize:vertical;min-height:4.5rem}@media (width<=1100px){.players-layout .party-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.players-layout .party-grid{grid-template-columns:1fr}}.party-card-sheet{gap:.65rem}.party-card-sheet .character-form{border-top:1px solid var(--border-subtle);padding-top:.25rem}.party-sheet-empty{margin:0;font-size:.875rem}.resizable-split{flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.resizable-main{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.resize-handle{cursor:col-resize;background:0 0;flex-shrink:0;width:5px;position:relative}.resize-handle:after{content:"";background:var(--border);width:1px;transition:background .12s;position:absolute;inset:0 0 0 2px}.resize-handle:hover:after,body.resizing-sidebar .resize-handle:after{background:var(--accent);width:2px;left:1px}body.resizing-sidebar{cursor:col-resize;-webkit-user-select:none;user-select:none}.resizable-sidebar{border-left:1px solid var(--border);background:linear-gradient(90deg, #00000026 0%, transparent 12px), var(--surface);flex-direction:column;flex-shrink:0;min-width:0;min-height:0;display:flex;overflow:hidden;box-shadow:-4px 0 16px #0003}.side-panel{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.side-panel-header{border-bottom:1px solid var(--border-gold);background:linear-gradient(#ffebc80a 0%,#0000 100%);flex-shrink:0;justify-content:space-between;align-items:center;gap:.5rem;padding:.65rem .75rem;display:flex}.side-panel-header h2{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-bright);margin:0;font-size:.9rem;font-weight:600}.side-panel-body{flex:1;align-content:start;gap:.85rem;padding:.65rem .75rem;display:grid;overflow:hidden auto}.map-section{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.map-canvas{flex:1;min-height:0;position:relative;overflow:hidden}.map-canvas.player,.map-canvas.scene-edit{cursor:grab}.map-canvas.scene-edit:active{cursor:grabbing}.scene-name-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:inherit;min-width:120px;padding:.4rem .6rem}.map-scale-overlay{z-index:2;border-radius:var(--radius);border:1px solid var(--border-gold);box-shadow:var(--shadow-panel);pointer-events:none;background:#0e0c0ae0;flex-direction:column;align-items:center;gap:.3rem;padding:.4rem .5rem;display:flex;position:absolute;bottom:.75rem;left:.75rem}.map-scale-bar{border:1px solid var(--accent);background:#c9a22759;border-radius:1px;height:.45rem}.map-scale-caption{color:var(--text);white-space:nowrap;font-size:.75rem}.fog-badge.scene-edit-badge{border:1px solid var(--border-gold);background:#1e1810eb;top:.75rem}.dm-toolbar button:disabled{opacity:.45;cursor:not-allowed}.file-input-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.toolbar-error{color:#f0b0b0;width:100%;padding:0 .25rem .35rem;font-size:.9rem}.map-canvas.dm{cursor:grab}.fog-badge.fog-brush-badge{top:2.5rem}.fog-badge.xray-badge{background:#143220e6;border:1px solid #6db87a66}.map-canvas.fog-mode{cursor:crosshair}.player-badge,.fog-badge{border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;font-family:var(--font-display);letter-spacing:.03em;background:#0e0c0ae0;padding:.35rem .6rem;position:absolute;top:.75rem;left:.75rem}.fog-badge{border-color:var(--border-gold);color:var(--accent-bright);background:#28200ceb}.character-form{gap:.65rem;display:grid}.sheet-section{border-top:1px solid var(--border-subtle);gap:.55rem;padding-top:.55rem;display:grid}.sheet-section:first-child{border-top:none;padding-top:0}.sheet-section h3{font-family:var(--font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright);margin:0;font-size:.7rem}.sheet-field{gap:.3rem;font-size:.8125rem;display:grid}.sheet-field-label{color:var(--text-muted)}.sheet-field-optional{font-style:italic}.sheet-field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;display:grid}.character-form-compact .sheet-field-grid{grid-template-columns:1fr}.sheet-portrait{object-fit:cover;border:2px solid var(--border-gold);border-radius:999px;flex-shrink:0;width:4.5rem;height:4.5rem}.sheet-portrait-empty{color:var(--text-muted);background:var(--bg);place-items:center;font-size:.7rem;display:grid}.sheet-icon-row{align-items:flex-start;gap:.65rem;display:flex}.sheet-icon-actions{align-content:start;gap:.35rem;display:grid}.sheet-field-error{color:#f0b0b0;margin:0;font-size:.75rem}.character-form input,.character-form textarea,.side-panel-body input,.side-panel-body textarea{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:inherit;padding:.4rem .55rem;font-size:.8125rem}.hp-row{align-items:end;gap:.5rem;display:flex}.hp-row .sheet-field{flex:1}.party-list{gap:.5rem;display:grid}.party-card{background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);gap:.4rem;padding:.55rem;display:grid}.party-card-meta{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.party-stats{color:var(--text-muted);gap:.75rem;font-size:.75rem;display:flex}.slot-name-input{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);width:100%;color:inherit;padding:.4rem .55rem;font-size:.8125rem}.slot-connection{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem}.slot-connection.online{color:var(--success)}.party-card .notes{color:var(--text-muted);white-space:pre-wrap;margin:0;font-size:.75rem}.dm-toolbar{border-top:1px solid var(--border-gold);background:linear-gradient(0deg, #0003 0%, transparent 100%), var(--surface);z-index:3;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:.35rem .5rem;padding:.35rem .5rem;display:flex;position:relative;box-shadow:inset 0 1px #ffebc80a}.token-add-anchor{position:relative}.token-add-popover{border:1px solid var(--border-gold);border-radius:var(--radius-lg);background:var(--surface);width:min(20rem,100vw - 2rem);box-shadow:var(--shadow-panel);z-index:10;padding:.75rem;position:absolute;bottom:calc(100% + .45rem);left:0}.token-add-popover-header{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.65rem;display:flex}.token-add-popover-header h3{font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-bright);margin:0;font-size:.85rem}.token-add-form{gap:.65rem;display:grid}.token-kind-picker{border:1px solid var(--border-subtle);border-radius:var(--radius);gap:.75rem;margin:0;padding:.55rem .65rem;display:flex}.token-kind-picker legend{color:var(--text-muted);padding:0 .25rem;font-size:.75rem}.token-kind-option{align-items:center;gap:.4rem;font-size:.875rem;display:inline-flex}.token-add-field{gap:.3rem;font-size:.8125rem;display:grid}.token-add-field-label,.token-add-field>span:first-child{color:var(--text-muted)}.token-add-field input,.token-add-field select{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);color:inherit;padding:.4rem .55rem;font-size:.8125rem}.token-add-hint{margin:0;font-size:.8125rem}.token-add-image{gap:.4rem;display:grid}.token-add-preview{object-fit:cover;border:2px solid var(--border-gold);border-radius:999px;width:4.5rem;height:4.5rem}.token-add-preview-empty{color:var(--text-muted);background:var(--bg);place-items:center;font-size:.7rem;display:grid}.token-add-image-actions{flex-wrap:wrap;gap:.35rem;display:flex}.token-add-error{color:#f0b0b0;margin:0;font-size:.75rem}.token-add-actions{justify-content:flex-end;gap:.4rem;margin-top:.15rem;display:flex}.toolbar-hint{color:var(--text-muted);align-self:center;margin:0;font-size:.75rem}.toolbar-group{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.toolbar-label{color:var(--accent-bright);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;margin-right:.15rem;font-size:.75rem}.settings-section h3{font-family:var(--font-display);color:var(--accent-bright);text-transform:uppercase;letter-spacing:.08em;margin:0 0 .45rem;font-size:.75rem}.settings-field{gap:.3rem;margin-bottom:.5rem;font-size:.8125rem;display:grid}.settings-check{align-items:center;gap:.45rem;margin-bottom:.4rem;font-size:.8125rem;display:flex}.settings-hint{color:var(--text-muted);margin:0 0 .5rem;font-size:.875rem;line-height:1.45}.settings-error{color:#f0b0b0;margin:0 0 .4rem;font-size:.75rem}.settings-row{flex-wrap:wrap;gap:.35rem;display:flex}.color-presets{flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;display:flex}.color-swatch{border-radius:var(--radius);border:2px solid var(--border);cursor:pointer;width:2rem;height:2rem;padding:0}.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.color-input-row{align-items:center;gap:.5rem;display:flex}.color-picker{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;width:2.75rem;height:2.25rem;padding:.15rem}.color-hex{border-radius:var(--radius);border:1px solid var(--border);background:var(--bg);min-width:0;color:inherit;flex:1;padding:.5rem .65rem;font-family:inherit}.layer-list{gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.layer-list li{background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius);gap:.25rem;padding:.5rem;font-size:.8125rem;display:grid}@media (width<=900px){.app-header{flex-wrap:wrap}.header-right{order:1;width:100%}.view-tabs{order:2;justify-content:stretch;width:100%}.view-tabs button{flex:1}.resizable-split{flex-direction:column}.resize-handle{cursor:row-resize;width:100%;height:5px}.resize-handle:after{width:auto;height:1px;inset:2px 0 auto}.resizable-sidebar{border-left:none;border-top:1px solid var(--border-subtle);max-height:min(42vh,320px);width:100%!important}}.layer-meta{color:var(--text-muted);font-size:.8rem}.layer-list button{justify-self:start;margin-top:.25rem}.scene-hidden-overlay{background:var(--bg);color:var(--text-muted);text-align:center;place-items:center;padding:1rem;font-size:.875rem;display:grid;position:absolute;inset:0}.scene-access-list{gap:.35rem;margin:0;padding:0;list-style:none;display:grid}.scene-access-row{border:1px solid var(--border-subtle);border-radius:var(--radius);background:var(--bg);cursor:pointer;align-items:center;gap:.55rem;padding:.5rem .6rem;font-size:.9375rem;transition:border-color .12s,background .12s;display:flex}.scene-access-row:hover{border-color:var(--border-gold);background:var(--surface-2)}.scene-access-row input[type=checkbox]{width:.9rem;height:.9rem;accent-color:var(--accent);flex-shrink:0}.scene-access-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}