:root { --background:#14131b; --surface:#1c1b25; --accent:#b39af7; --text:#eeedf4; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--background); font:16px/1.5 "Segoe UI",sans-serif; overflow:hidden; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
button:disabled { opacity:.3; cursor:default; }
button:focus-visible,input:focus-visible,label.upload:focus-within { outline:2px solid var(--accent); outline-offset:4px; }
button { -webkit-tap-highlight-color:transparent; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icons { position:absolute; width:0; height:0; overflow:hidden; }
[hidden] { display:none !important; }
#sidebar { position:fixed; inset:0 auto 0 0; z-index:100; width:310px; display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#494352 transparent; background:var(--surface); border-right:1px solid #ffffff0c; transition:transform .25s ease; }
.brand,.upload-section,.inspector,.sidebar-note { flex-shrink:0; }
.brand { display:flex; gap:13px; align-items:center; padding:29px 25px 26px; font-weight:750; letter-spacing:2.5px; }
.brand>span { color:var(--accent); font-size:35px; line-height:1; text-shadow:0 0 24px #b39af744; }
.brand small { display:block; font-size:13px; color:#93909f; font-weight:400; letter-spacing:0; margin-top:3px; }
.upload-section { padding:0 21px 25px; }
.upload-types { display:flex; gap:5px; padding:4px; margin-bottom:10px; border:1px solid #ffffff0b; border-radius:9px; background:#14131b80; }
.upload-types button { flex:1; padding:8px 4px; border:0; background:transparent; border-radius:6px; color:#a5a1b2; font-size:14px; }
.upload-types button[aria-pressed="true"] { color:var(--accent); background:#b39af71a; }
.upload { display:flex; flex-direction:column; align-items:center; padding:16px 10px 14px; border:1px dashed #b39af750; border-radius:12px; cursor:pointer; background:#b39af708; transition:background .2s,border-color .2s; }
.upload:hover { border-color:var(--accent); background:#b39af713; }
.upload svg { margin-bottom:7px; width:24px; height:24px; color:var(--accent); }
.upload strong { font-size:15px; font-weight:600; }
.upload span { font-size:14px; color:#a5a1b2; margin:2px 0 4px; }
.upload small { font-size:12px; color:#8b8799; text-align:center; }
.inspector { padding:0 22px 22px; border-bottom:1px solid #ffffff08; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h2 { margin:0; font-size:14px; font-weight:600; }
.section-title h2 { display:flex; gap:9px; align-items:center; }
.section-title svg { width:18px; height:18px; color:#a6a1b5; }
.section-title output { color:var(--accent); font-size:14px; font-variant-numeric:tabular-nums; }
.scale-controls { display:flex; align-items:center; gap:10px; margin-top:16px; }
.scale-controls button { background:#ffffff06; border:1px solid #ffffff0d; border-radius:7px; width:30px; height:30px; line-height:1; }
.scale-controls button:hover:enabled { background:#ffffff10; }
.scale-controls input { min-width:0; flex:1; accent-color:var(--accent); height:5px; cursor:pointer; }
.inspector p { margin:12px 0 0; font-size:13px; color:#8b8799; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#character-controls { margin-top:18px; padding-top:16px; border-top:1px solid #ffffff0b; }
#character-controls label { display:block; font-size:13px; color:#aca4ba; }
#character-controls input[type="text"],#character-controls input[type="number"] { width:100%; min-width:0; padding:8px 10px; margin-top:6px; border:1px solid #ffffff10; border-radius:7px; background:#14131b80; color:var(--text); font-size:14px; }
#character-controls input::placeholder { color:#756c85; }
.health-fields { display:flex; gap:10px; margin-top:12px; }
.health-fields label { flex:1; min-width:0; }
.health-controls { display:flex; gap:10px; align-items:center; margin-top:13px; }
.health-controls button { width:30px; height:30px; padding:0; border:1px solid #ffffff0d; border-radius:7px; background:#ffffff06; }
.health-controls input { flex:1; min-width:0; accent-color:#79cfa6; height:5px; }
#health-value { display:block; margin-top:6px; color:#79cfa6; font-size:13px; text-align:right; font-variant-numeric:tabular-nums; }
.layers { padding:21px 12px 0; flex:1 0 240px; min-height:240px; display:flex; flex-direction:column; }
.layers>.section-title { margin:0 10px; }
#layer-count { font-size:12px; background:#ffffff08; color:#a6a1b5; padding:1px 8px; border-radius:5px; }
.layer-hint { margin:8px 10px 15px; font-size:12px; color:#8b8799; }
#layer-list { overflow-y:auto; min-height:160px; max-height:45vh; padding:2px 1px 12px; scrollbar-width:thin; scrollbar-color:#494352 transparent; }
.layer { display:flex; gap:9px; align-items:center; position:relative; padding:10px 9px; margin-bottom:5px; border:1px solid transparent; border-radius:9px; background:#ffffff03; cursor:grab; }
.layer:hover { background:#ffffff07; }
.layer.selected { border-color:#b39af748; background:#b39af711; }
.layer.dragging { opacity:.35; }
.layer.drop-before::before,.layer.drop-after::after { content:""; position:absolute; height:2px; background:var(--accent); left:5px; right:5px; }
.layer.drop-before::before { top:-4px; }
.layer.drop-after::after { bottom:-4px; }
.layer>.grip { width:12px; height:18px; color:#746e84; }
.layer>img { width:34px; height:34px; object-fit:cover; border-radius:5px; background:#14131b; pointer-events:none; }
.layer-info { flex:1; min-width:0; border:0; background:none; text-align:left; padding:0; }
.layer-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; }
.layer-info small { display:block; font-size:12px; color:#8b8799; }
.layer-actions { display:grid; grid-template-columns:23px 23px; align-items:center; gap:2px; }
.layer-actions button { width:23px; height:23px; border:0; border-radius:4px; padding:3px; color:#a39cad; background:transparent; }
.layer-actions button svg { width:16px; height:16px; }
.layer-actions button:last-child { grid-column:2; grid-row:1 / 3; height:32px; }
.layer-actions button:hover:enabled { color:var(--text); background:#ffffff0c; }
.layer-actions button:last-child:hover { color:#ff9494; background:#ff949410; }
#no-layers { display:flex; flex-direction:column; align-items:center; gap:10px; padding:38px 0; color:#7f788f; font-size:14px; }
#no-layers svg { width:30px; height:30px; opacity:.65; }
.sidebar-note { margin:0; padding:17px 15px; font-size:12px; color:#8b8799; text-align:center; border-top:1px solid #ffffff08; }
#sidebar-toggle { position:fixed; z-index:110; left:294px; top:35px; display:grid; place-items:center; width:32px; height:32px; border:1px solid #403a50; border-radius:9px; color:#beb7cf; background:#282430; transition:left .25s; }
#sidebar-toggle svg { width:17px; height:17px; }
body.sidebar-closed #sidebar { transform:translateX(-100%); }
body.sidebar-closed #sidebar-toggle { left:20px; }
body.sidebar-closed #sidebar-toggle svg { transform:rotate(180deg); }
#workspace { position:relative; margin-left:310px; height:100vh; height:100dvh; background:radial-gradient(ellipse at 45% 45%,#25203166,transparent 70%),var(--background); transition:margin-left .25s; overflow:hidden; }
body.sidebar-closed #workspace { margin-left:0; }
#workspace>header { position:absolute; z-index:30; pointer-events:none; top:28px; left:35px; right:30px; display:flex; gap:20px; align-items:center; justify-content:space-between; }
body.sidebar-closed #workspace>header { left:75px; }
.eyebrow { font-size:11px; color:#8f839f; letter-spacing:2px; }
h1 { font-size:20px; margin:3px 0 0; font-weight:550; letter-spacing:-.4px; }
#scene-count { font-size:13px; color:#9992a7; border:1px solid #ffffff0c; border-radius:20px; padding:5px 13px; }
#stage { position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab; background-image:radial-gradient(#a59bb414 1px,transparent 1px); background-size:24px 24px; }
#stage.panning,#stage.panning .scene-image { cursor:grabbing; }
body.space-pan .scene-image { cursor:grab; }
#scene { position:absolute; z-index:2; inset:0; pointer-events:none; transform-origin:center; }
.scene-image { position:absolute; pointer-events:auto; touch-action:none; cursor:move; user-select:none; transform:translate(-50%,-50%); }
.scene-image>img { display:block; width:100%; height:100%; pointer-events:none; user-select:none; -webkit-user-drag:none; }
.scene-image.character { --card-unit:1px; filter:drop-shadow(0 calc(4 * var(--card-unit)) calc(6 * var(--card-unit)) #0007); }
.scene-image.character>img { border-radius:0; }
.scene-image.character::after { content:""; position:absolute; inset:0; pointer-events:none; border:calc(6 * var(--card-unit)) solid transparent; border-image:linear-gradient(135deg,#aea180,#36362b 18%,#817358 38%,#292b23 57%,#8e7e60 78%,#464033) 6; box-shadow:inset 0 0 0 calc(1 * var(--card-unit)) #24291f,inset 0 0 0 calc(2 * var(--card-unit)) #b4a681,inset 0 0 0 calc(3 * var(--card-unit)) #292b21,inset 0 0 0 calc(4 * var(--card-unit)) #746950,inset 0 0 0 calc(5 * var(--card-unit)) #171d18; }
.character-caption { position:absolute; top:100%; left:0; width:100%; min-width:0; padding:calc(4 * var(--card-unit)) calc(6 * var(--card-unit)) calc(5 * var(--card-unit)); border:calc(1 * var(--card-unit)) solid #1d221c; border-top:0; background:repeating-linear-gradient(115deg,#ffffff07 0 calc(1 * var(--card-unit)),transparent calc(1 * var(--card-unit)) calc(3 * var(--card-unit))),linear-gradient(90deg,#3b362b,#75664d 3%,#36382c 7%,#38392e 93%,#8b7a59 97%,#302d25); box-shadow:inset 0 0 0 calc(1 * var(--card-unit)) #b1a27c,inset 0 0 0 calc(3 * var(--card-unit)) #252a22,inset 0 0 0 calc(4 * var(--card-unit)) #8a7c5e; text-align:center; }
.character-caption::before,.character-caption::after { content:""; position:absolute; z-index:2; top:calc(-5 * var(--card-unit)); width:calc(10 * var(--card-unit)); height:calc(10 * var(--card-unit)); border:calc(1 * var(--card-unit)) solid #30382a; background:linear-gradient(135deg,#e7ddaf,#b0ac88 45%,#635f44 50%,#c8c394); box-shadow:inset 0 0 0 calc(1 * var(--card-unit)) #e7ddb070; transform:rotate(45deg); pointer-events:none; }
.character-caption::before { left:calc(1 * var(--card-unit)); }
.character-caption::after { right:calc(1 * var(--card-unit)); }
.character-caption strong { display:flex; align-items:center; justify-content:center; min-height:calc(43 * var(--card-unit)); padding:calc(5 * var(--card-unit)) calc(8 * var(--card-unit)); overflow-wrap:anywhere; color:#25271a; background:radial-gradient(ellipse at 12% 28%,#9c9a5a36,transparent 27%),radial-gradient(ellipse at 88% 75%,#9c865a38,transparent 31%),radial-gradient(ellipse at 55% 5%,#fffbd0a0,transparent 70%),#e6dfad; box-shadow:inset 0 0 calc(9 * var(--card-unit)) #625538aa,inset 0 0 0 calc(1 * var(--card-unit)) #b5a77b; font-family:Georgia,"Times New Roman",serif; font-size:calc(26 * var(--card-unit)); line-height:1.15; font-weight:700; text-shadow:0 calc(1 * var(--card-unit)) #ffffc430; }
.character-caption small { display:block; font-family:Georgia,serif; font-size:calc(10 * var(--card-unit)); line-height:1.2; margin-top:calc(3 * var(--card-unit)); color:#d4c6a2; font-variant-numeric:tabular-nums; }
.health-bar { height:calc(4 * var(--card-unit)); margin:calc(5 * var(--card-unit)) calc(2 * var(--card-unit)) 0; overflow:hidden; border-radius:calc(1 * var(--card-unit)); background:#171c16; box-shadow:0 0 0 calc(1 * var(--card-unit)) #a3936860; }
.health-bar span { display:block; height:100%; background:linear-gradient(#ffffff24,transparent),var(--health-color); border-radius:inherit; transition:width .15s ease,background .15s; }
.scene-image.selected::before { content:""; position:absolute; inset:-2px; border:1px solid var(--accent); pointer-events:none; }
.scene-image.character.selected::before { bottom:calc(-1 * var(--caption-height,0px) - 2px); }
.scene-image:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.resize-handle { display:none; position:absolute; width:13px; height:13px; padding:0; border:2px solid #211c2c; border-radius:3px; background:var(--accent); touch-action:none; z-index:1; }
.selected .resize-handle { display:block; }
.resize-handle[data-corner="nw"] { left:-7px; top:-7px; cursor:nwse-resize; }
.resize-handle[data-corner="ne"] { right:-7px; top:-7px; cursor:nesw-resize; }
.resize-handle[data-corner="sw"] { left:-7px; bottom:-7px; cursor:nesw-resize; }
.resize-handle[data-corner="se"] { right:-7px; bottom:-7px; cursor:nwse-resize; }
#empty-state { position:absolute; z-index:1; left:50%; top:47%; transform:translate(-50%,-50%); text-align:center; width:min(420px,80%); }
.empty-icon { display:grid; place-items:center; margin:0 auto 23px; width:76px; height:76px; border:1px solid #b39af726; border-radius:21px; background:linear-gradient(145deg,#b39af716,#b39af703); transform:rotate(-7deg); }
.empty-icon svg { width:32px; height:32px; color:#b39af7b3; transform:rotate(7deg); }
#empty-state h2 { font-size:28px; font-weight:550; letter-spacing:-1px; }
#empty-state p { color:#9f96af; font-size:15px; line-height:1.8; margin:11px 0 24px; }
#first-upload { display:inline-flex; gap:10px; align-items:center; background:#b39af7; color:#211a32; font-weight:600; border:0; border-radius:8px; padding:11px 18px; font-size:14px; box-shadow:0 5px 30px #b39af710; }
#first-upload:hover { background:#c6b2fd; }
#first-upload svg { width:18px; height:18px; }
#empty-state>small { display:block; color:#756c85; font-size:12px; margin-top:18px; }
#workspace>footer { position:absolute; z-index:30; pointer-events:none; bottom:23px; left:30px; right:310px; color:#777080; font-size:12px; }
#workspace>footer span { margin:0 7px; }
#view-controls { position:absolute; z-index:35; top:105px; right:30px; display:flex; align-items:center; gap:5px; padding:5px; border:1px solid #ffffff0c; border-radius:9px; background:#201c2aeb; }
#view-controls button { border:0; border-radius:5px; background:transparent; height:29px; min-width:28px; padding:0 6px; }
#view-controls button:hover:enabled { background:#ffffff09; }
#zoom-value { min-width:46px; font-size:13px; text-align:center; color:#c7bad9; font-variant-numeric:tabular-nums; }
#reset-view { margin-left:4px; border-left:1px solid #ffffff10 !important; border-radius:0 !important; font-size:12px; color:#a89bb7; }
#dice-panel { position:fixed; z-index:80; bottom:22px; right:22px; width:260px; padding:17px; border:1px solid #ffffff0e; border-radius:17px; background:#201c2aeb; backdrop-filter:blur(18px); box-shadow:0 16px 55px #0004; }
.dice-title { display:flex; justify-content:space-between; align-items:center; }
.dice-title h2 { font-size:14px; font-weight:500; color:#d8d0e5; }
#dice-name { color:var(--die-color,#b39af7); font-size:12px; font-weight:650; letter-spacing:1px; margin-left:6px; }
#bonus-toggle { display:flex; align-items:center; gap:7px; border:0; padding:2px 0 2px 6px; background:transparent; font-size:12px; color:#a89bb7; }
#bonus-toggle i { position:relative; width:32px; height:19px; border:1px solid #655875; border-radius:20px; background:#39303f; transition:background .2s; }
#bonus-toggle i::after { content:""; position:absolute; top:3px; left:3px; width:11px; height:11px; border-radius:50%; background:#a89bb7; transition:transform .2s; }
#bonus-toggle[aria-checked="true"] { color:var(--accent); }
#bonus-toggle[aria-checked="true"] i { background:#b39af73b; border-color:var(--accent); }
#bonus-toggle[aria-checked="true"] i::after { transform:translateX(13px); background:var(--accent); }
#roll-dice { width:100%; display:flex; flex-direction:column; align-items:center; padding:9px 0 0; border:0; background:transparent; perspective:600px; }
.dice-pair { display:flex; align-items:center; justify-content:center; gap:7px; height:112px; }
.dice-pair>span { width:114px; height:112px; display:block; transform-style:preserve-3d; filter:drop-shadow(0 6px 16px color-mix(in srgb,var(--die-color) 20%,transparent)); }
.bonus-mode .dice-pair>span { width:100px; height:100px; }
.dice-pair svg { display:block; width:100%; height:100%; stroke:var(--die-color); stroke-width:1.4; overflow:visible; }
.dice-pair .die-body { fill:color-mix(in srgb,var(--die-color) 12%,#201c2a); }
.dice-pair .die-lines { opacity:.55; stroke-width:.8; }
.dice-pair text { fill:#fff; stroke:none; font-size:31px; font-weight:650; font-family:"Segoe UI",sans-serif; text-anchor:middle; dominant-baseline:central; }
#roll-dice:hover:enabled .dice-pair>span { transform:translateY(-3px) rotate(-5deg); }
#roll-dice:disabled { opacity:1; }
.dice-instruction { font-size:12px; color:#93859f; padding-top:6px; }
#dice-result { margin:11px 0 14px; text-align:center; font-size:13px; color:#afa3ba; }
#dice-result strong { color:var(--die-color); margin-left:7px; font-size:15px; font-variant-numeric:tabular-nums; }
#dice-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) repeat(3,minmax(0,1.35fr)) minmax(0,1.85fr); gap:2px; padding-top:13px; border-top:1px solid #ffffff0b; }
#dice-options button { min-width:0; height:33px; border:1px solid transparent; background:transparent; border-radius:6px; color:var(--option-color); font-size:12px; font-weight:600; padding:0; }
#dice-options button:hover { background:#ffffff08; }
#dice-options button[aria-pressed="true"] { border-color:color-mix(in srgb,var(--option-color) 45%,transparent); background:color-mix(in srgb,var(--option-color) 12%,transparent); }
#dice-options button:disabled { opacity:.65; }
.rolling .dice-pair>span { animation:roll var(--roll-duration,.75s) cubic-bezier(.2,.7,.3,1) both; }
.rolling #bonus-dice-visual { animation-direction:reverse; }
@keyframes roll { 0% { transform:rotate3d(1,1,1,0deg) scale(1); } 30% { transform:translateY(-17px) rotate3d(1,1,.5,140deg) scale(.85); } 65% { transform:translateY(-5px) rotate3d(.5,1,1,295deg) scale(1.1); } 100% { transform:rotate3d(1,1,1,360deg) scale(1); } }
#drop-overlay { position:fixed; z-index:200; inset:13px; pointer-events:none; border:2px dashed var(--accent); border-radius:18px; background:#211a32ec; display:none; flex-direction:column; align-items:center; justify-content:center; gap:20px; color:var(--accent); }
#drop-overlay svg { width:48px; height:48px; }
body.file-dragging #drop-overlay { display:flex; }
#toast { position:fixed; z-index:220; left:50%; bottom:25px; transform:translateX(-50%); max-width:calc(100% - 30px); padding:12px 18px; border:1px solid #514663; border-radius:10px; background:#30273e; color:var(--text); font-size:14px; box-shadow:0 8px 30px #0006; }
@media (max-width:900px) { #workspace>footer { display:none; } #dice-panel { width:235px; padding:12px; } #empty-state { top:38%; } }
@media (max-width:680px) { #sidebar { width:min(310px,calc(100vw - 42px)); box-shadow:20px 0 60px #0006; } #sidebar-toggle { left:min(294px,calc(100vw - 58px)); } #workspace { margin-left:0; } #workspace>header { left:75px; right:17px; top:26px; } #scene-count { display:none; } #view-controls { top:98px; right:17px; } #dice-panel { right:12px; bottom:12px; width:235px; padding:12px; } .dice-pair { height:78px; } .dice-pair>span,.bonus-mode .dice-pair>span { width:80px; height:78px; } #dice-result { margin:7px 0 9px; } #dice-options { padding-top:9px; gap:2px; } .dice-instruction { display:none; } #empty-state { top:36%; } #empty-state h2 { font-size:25px; } .brand { padding-top:25px; padding-bottom:20px; } .upload-section { padding-bottom:18px; } .upload { padding-top:16px; padding-bottom:15px; } }
@media (max-height:650px) { .brand { padding-top:15px; padding-bottom:15px; } .upload { padding:12px 10px; } .upload svg,.upload span { display:none; } .upload small { margin-top:6px; } .upload-section { padding-bottom:16px; } .inspector { padding-bottom:15px; } .layers { padding-top:14px; } .sidebar-note { padding:10px; } #empty-state { top:42%; } .empty-icon { width:55px; height:55px; margin-bottom:12px; } #empty-state p { margin-bottom:15px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

#room-panel { padding:0 22px 22px; margin-bottom:20px; border-bottom:1px solid #ffffff0b; flex-shrink:0; }
#room-panel>strong { display:block; font-size:15px; margin-bottom:9px; overflow-wrap:anywhere; }
#room-panel>div { display:flex; justify-content:space-between; align-items:center; gap:8px; }
#room-code { color:var(--accent); letter-spacing:1px; font-size:13px; }
#room-panel button,#publish-layer { border:1px solid #b39af735; border-radius:6px; background:#b39af70d; padding:5px 9px; color:#cabcdf; font-size:12px; }
#connection-status { display:block; font-size:12px; color:#e9bb68; margin-top:10px; }
#connection-status.online { color:#79cfa6; }
#leave-room { margin-top:10px; }
#publish-layer { margin-top:12px; width:100%; padding:9px; color:var(--accent); }
#character-owner { width:100%; min-width:0; color:var(--text); background:#14131b; border:1px solid #ffffff14; border-radius:7px; padding:8px; margin:6px 0 0; font-size:14px; }
#character-controls label[for="character-owner"] { margin-top:12px; }
#members,#my-character,#roll-history { padding:0 22px 22px; flex-shrink:0; }
#member-list>div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; padding-top:12px; font-size:13px; }
#member-list i { width:6px; height:6px; border-radius:50%; background:#756c85; }
#member-list i.online { background:#79cfa6; }
#member-list span { flex:1; min-width:40px; overflow-wrap:anywhere; }
#member-list small { color:#9690a2; font-size:11px; }
#member-list button { border:0; background:none; color:#d69393; padding:0; font-size:11px; }
#my-character>img { width:52px; height:68px; object-fit:cover; float:left; margin:12px 10px 10px 0; border:1px solid #827451; }
#my-character>strong { display:block; margin-top:12px; font-size:14px; }
#my-character>span { display:block; font-size:13px; color:#79cfa6; }
#my-character>small { display:block; clear:both; font-size:12px; color:#a59bad; }
#roll-history { margin-top:16px; border-top:1px solid #ffffff0b; padding-top:17px; }
#roll-history>div>div { display:flex; justify-content:space-between; gap:9px; margin-top:9px; font-size:12px; }
#roll-history span { color:#a69cad; overflow-wrap:anywhere; }
#roll-history strong { color:var(--accent); font-weight:500; flex-shrink:0; }
.scene-image.draft { opacity:.4; }
.scene-image.draft.selected { opacity:.9; }
.scene-image.read-only { cursor:default; }
body:not(.is-dm) .resize-handle { display:none !important; }
body:not(.room-connected) .scene-image { cursor:default; }
.layer.unpublished .layer-info small { color:#bba782; }
.layer { flex-wrap:wrap; }
.layer-publication { width:100%; margin-left:24px; border:1px solid #b39af71e; border-radius:4px; background:#b39af709; color:#b7a4ce; font-size:11px; padding:3px; }
#room-lobby { width:min(760px,calc(100vw - 30px)); max-height:calc(100dvh - 30px); padding:30px; border:1px solid #b39af730; border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 25px 100px #0008; overflow:auto; }
#room-lobby::backdrop { background:#100d18eb; backdrop-filter:blur(5px); }
#room-lobby h2 { font-size:28px; margin-top:8px; font-weight:550; }
#room-lobby p { color:#aaa1b7; font-size:14px; }
.lobby-forms { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
.lobby-forms form { border:1px solid #ffffff0b; border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:13px; }
.lobby-forms h3 { font-size:16px; margin:0 0 5px; }
.lobby-forms label { color:#b2a8c0; font-size:13px; }
.lobby-forms input { display:block; width:100%; margin-top:6px; background:#14131b; border:1px solid #ffffff14; border-radius:7px; padding:10px; color:var(--text); font-size:14px; }
.lobby-forms button { margin-top:auto; border:0; border-radius:7px; padding:11px; background:var(--accent); color:#211a32; font-weight:600; font-size:14px; }
.lobby-forms summary { cursor:pointer; font-size:12px; color:#9e94af; }
.lobby-forms details label { display:block; margin-top:8px; }
#lobby-error { color:#f18b79 !important; margin-bottom:0; }
@media (max-width:620px) { .lobby-forms { grid-template-columns:1fr; gap:12px; } #room-lobby { padding:22px; } .lobby-forms form { padding:15px; } }

body:not(.is-dm) .layers { display:none; }
.table-tools { display:flex; align-items:center; gap:12px; }
#open-notes { display:flex; align-items:center; gap:7px; pointer-events:auto; border:1px solid #b39af72c; border-radius:8px; padding:7px 12px; background:#241f30; color:#d4c4ee; font-size:13px; }
#open-notes svg { width:17px; height:17px; }
#open-notes:hover:enabled { background:#342b46; }
#dice-control-hint { display:block; margin-top:10px; color:#93859f; font-size:11px; text-align:center; }
.dice-changing .dice-pair>span { animation:change-die .28s ease; }
@keyframes change-die { from { transform:rotateY(45deg) scale(.85); opacity:.45; } to { transform:rotateY(0) scale(1); opacity:1; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#notes-dialog { width:min(560px,calc(100vw - 28px)); max-height:90dvh; padding:25px; border:1px solid #a58a57; border-radius:12px; color:#493824; background:radial-gradient(ellipse at top left,#fff4d140,transparent 60%),#eee2c4; box-shadow:0 20px 90px #0007,inset 0 0 35px #b89a6628; }
#notes-dialog::backdrop { background:#0b09155c; backdrop-filter:blur(2px); }
.notes-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.notes-heading span { font-size:10px; letter-spacing:2px; color:#8c704c; }
#notes-title { font:700 24px/1.3 Georgia,serif; margin-top:3px; }
#close-notes { border:0; border-radius:6px; padding:0; width:32px; height:32px; background:#9a784912; color:#765d3c; font-size:25px; line-height:1; }
#notes-dialog>p { margin:12px 0 18px; font-size:13px; color:#8a7151; }
#notes-text { display:block; width:100%; height:330px; max-height:50dvh; min-height:140px; resize:vertical; padding:7px 12px; border:1px solid #a88d5b45; border-radius:5px; outline-color:#8d7050; color:#493824; font:15px/28px "Segoe UI",sans-serif; background:repeating-linear-gradient(transparent 0 27px,#9b815b20 27px 28px),#fff8e633; background-position:0 7px; scrollbar-width:thin; scrollbar-color:#af956e transparent; }
#notes-text::placeholder { color:#ab916d; }
.notes-footer { display:flex; align-items:start; justify-content:space-between; gap:12px; margin-top:10px; color:#8a7151; font-size:12px; }
#notes-count { flex-shrink:0; font-variant-numeric:tabular-nums; }
.notes-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.notes-actions button { border:1px solid #a48b6240; border-radius:7px; padding:8px 13px; background:transparent; color:#775c39; font-size:13px; }
#notes-save { background:#665035; color:#fff2d5; }
#notes-dialog button:focus-visible,#notes-text:focus-visible { outline:2px solid #957347; outline-offset:3px; }
@media (max-width:680px) { .table-tools { gap:0; } #open-notes { padding:7px 9px; } #notes-dialog { padding:20px; } #notes-title { font-size:21px; } }
@media (prefers-reduced-motion:reduce) { .dice-changing .dice-pair>span { animation:none; } }