/* Game Table — dark mode. Dark backgrounds, light text everywhere. */
:root{
  --bg:#14110e; --bg2:#1c1814; --panel:#221e18; --panel2:#2a251e;
  --line:#4a3f2f; --gold:#c9a227; --gold-bright:#ffd977;
  --ink:#ece4d0; --muted:#a99e86; --ink-dim:#7d7462;
  --input-bg:#171410; --input-line:#6a5a3e;
  --btn-bg:#2e2820; --btn-line:#6a5a3e;
  --hp:#d05545; --mp:#4a90c9;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;font-family:Georgia,serif;color:#2b2118;
  background:repeating-linear-gradient(45deg,#e8dcc0 0 2px,#efe4c8 2px 8px),#efe4c8}
button{cursor:pointer;padding:6px 10px;border:1px solid var(--btn-line);background:var(--btn-bg);color:var(--ink);border-radius:6px}
button:hover{border-color:var(--gold)}
button:disabled{opacity:.45;cursor:not-allowed}
button.gold{background:linear-gradient(#5a4a12,#8a6d1f);color:#ffe9a0;font-weight:bold}
.gold-pill{background:linear-gradient(#5a4a12,#8a6d1f);color:#ffe9a0;border-radius:999px;font-weight:bold}
input,select,textarea{padding:6px;border:1px solid var(--input-line);border-radius:6px;background:var(--input-bg);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:1px}
#topbar{padding:6px 12px;border-bottom:3px solid var(--gold);background:#0f0d0b;color:var(--ink)}
#topbar a{color:var(--gold-bright)}
/* Minimized header: slightly smaller, tighter controls. */
#topbar button{padding:5px 8px;font-size:.92em}
.chip{background:var(--gold);color:#1a1408;padding:2px 8px;border-radius:999px}
/* Clickable suggestion chips below the "What do you do?" input. */
.chips-row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.chips-row .chip{padding:2px 8px;font-size:.8em}
.chips-row .chip:hover{filter:brightness(1.12)}
/* Item look-up links in the character box / sheet: gold, dotted underline. */
.item-link{color:var(--gold-bright);text-decoration:underline dotted;text-underline-offset:2px}
.item-link:hover{color:#fff;text-decoration:underline}
/* Header: one centered row of buttons — session info above, all top-line
   buttons (incl. login + GM Data) in line, centered, to keep the header small. */
.hdr-row{display:flex;flex-direction:column;align-items:center;gap:2px}
.session-line{font-size:.92em;line-height:1.7}
.hdr-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.soundctl,.afkctl{color:var(--ink)}
/* Resource navigation: a unified, prominent nav row — same gold-button look
   as the other header buttons, so all nav elements are in sync. */
#reslinks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:4px;padding-top:6px;border-top:1px solid var(--line)}
#reslinks a.nav-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--btn-line);border-radius:6px;background:linear-gradient(#5a4a12,#8a6d1f);color:#ffe9a0;font-weight:bold;font-size:1em;text-decoration:none}
#reslinks a.nav-btn:hover{border-color:var(--gold-bright);filter:brightness(1.15)}
.res-panel{margin-left:10px}
.cols{display:grid;grid-template-columns:250px 1fr 280px;gap:12px;padding:12px;align-items:start}
/* Middle row: Combat / Quick Skills / Foes & folk side by side under
   "What do you do?" — three equal boxes, wrapping to a stack on narrow screens. */
.mid-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.mid-row>.box{flex:1 1 220px;min-width:0;margin-bottom:12px}
.mid-row>.mid-col{flex:1 1 220px;min-width:0}
.box{background:rgba(34,30,24,.95);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
/* Every box wears the character-box effect: dark background + light font +
   class-color textured tint, following the active character's class
   (dark olive drab for Ranger, etc.). The tint class lives on <body>. */
body.tint-ranger .box{background:linear-gradient(rgba(85,107,47,.22),rgba(85,107,47,.22)),rgba(34,30,24,.95)}
body.tint-wizard .box{background:linear-gradient(rgba(110,100,200,.24),rgba(110,100,200,.24)),rgba(34,30,24,.95)}
body.tint-fighter .box{background:linear-gradient(rgba(200,80,80,.20),rgba(200,80,80,.20)),rgba(34,30,24,.95)}
body.tint-artificer .box{background:linear-gradient(rgba(200,140,40,.22),rgba(200,140,40,.22)),rgba(34,30,24,.95)}
body.tint-cleric .box{background:linear-gradient(rgba(220,200,80,.20),rgba(220,200,80,.20)),rgba(34,30,24,.95)}
body.tint-rogue .box{background:linear-gradient(rgba(120,120,150,.24),rgba(120,120,150,.24)),rgba(34,30,24,.95)}
.row{display:flex;gap:8px;align-items:center;margin:6px 0}.wrap{flex-wrap:wrap}
.portrait{font-size:64px;text-align:center;background:#171410;border:1px solid var(--line);border-radius:8px;min-height:96px;display:flex;align-items:center;justify-content:center;object-fit:contain}
.portrait img{max-width:100%;max-height:140px;object-fit:contain}
.scroll3{max-height:300px;overflow:auto}
/* Live Play shows more data — double height. */
#live-list{max-height:600px}
.entry{border-bottom:1px dashed var(--line);padding:6px 2px}
.entry .spk{font-weight:bold}.muted{color:var(--muted)}.small{font-size:.85em}
/* Dialogue speaker name — blue so it's easy to see who is talking. */
.spk-name{color:#6cb2ff;font-weight:bold}
.roll-prompt{color:#6cb2ff;font-weight:bold}
.gm-request{color:#6cb2ff;font-weight:bold}
.cond-icons{margin-left:4px;letter-spacing:2px}
/* Companions box: character names in the same blue so they stand out. */
#companions strong{color:#6cb2ff}
/* Scene picture — real illustrated art (inline SVG), full-bleed behind overlays. */
.scene-pic{position:relative;min-height:300px;border-radius:12px;border:2px solid #6a5a3e;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background-size:cover;background-position:center;background-color:#1a1512}
.scene-pic.dusk-barrens{background-image:url("art/dusk-barrens.jpg"),linear-gradient(180deg,#241a44,#c97a3a)}
.scene-pic.tavern{background-image:url("art/tavern.jpg"),linear-gradient(180deg,#2a1a0c,#1d1108)}
.scene-pic.forest{background-image:url("art/forest.jpg"),linear-gradient(180deg,#0e2a12,#1e4020)}
.scene-pic.dungeon{background-image:url("art/dungeon.jpg"),linear-gradient(180deg,#1a1a22,#0a0a10)}
.scene-pic.campfire{background-image:url("art/campfire.jpg"),linear-gradient(180deg,#0a1030,#1a2440)}
.scene-pic.road{background-image:url("art/road.jpg"),linear-gradient(180deg,#7a9ac0,#c0b090)}
#portrait-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-around;pointer-events:none}
.p-overlay{font-size:110px;text-shadow:0 0 12px #000;background:rgba(20,16,12,.55);border-radius:50%;width:150px;height:150px;display:flex;align-items:center;justify-content:center}
.p-overlay.speaker{box-shadow:0 0 0 5px gold}.p-overlay.flipped{transform:scaleX(-1)}
/* Per-scene life: one small, subtle animated detail tied to each picture.
   No separate flame overlay — each scene animates a little piece of itself. */
#scene-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#scene-fx::before,#scene-fx::after{content:"";position:absolute;opacity:0}
/* Dungeon — a wall torch breathing: warm glow + tiny flame core. */
.scene-pic.dungeon #scene-fx::before{left:16%;top:26%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,90,.55),rgba(255,140,40,.18) 55%,transparent 70%);animation:torch-glow 3.2s ease-in-out infinite alternate}
.scene-pic.dungeon #scene-fx::after{left:calc(16% + 12px);top:calc(26% + 10px);width:9px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse at 50% 70%,#fff3c4,#ffb347 55%,#ff7b24);animation:torch-core 1.1s ease-in-out infinite alternate}
/* Campfire — embers rising off the fire + a soft glow pulse. */
.scene-pic.campfire #scene-fx::before{left:46%;bottom:18%;width:5px;height:5px;border-radius:50%;background:#ffb347;box-shadow:0 0 6px 2px rgba(255,170,60,.7);animation:ember-rise 5s linear infinite}
.scene-pic.campfire #scene-fx::after{left:40%;bottom:10%;width:70px;height:34px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,160,60,.28),transparent 70%);animation:glow-pulse 2.6s ease-in-out infinite alternate}
/* Tavern — candlelight breathing on a table. */
.scene-pic.tavern #scene-fx::before{right:22%;top:38%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,rgba(255,210,120,.5),rgba(255,170,60,.15) 55%,transparent 70%);animation:torch-glow 4s ease-in-out infinite alternate}
.scene-pic.tavern #scene-fx::after{right:calc(22% + 9px);top:calc(38% + 8px);width:6px;height:9px;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#fff6d8,#ffcf7d 60%,#ff9d3c);animation:torch-core 1.4s ease-in-out infinite alternate}
/* Forest — a leaf drifting down through the trees. */
.scene-pic.forest #scene-fx::before{content:"🍂";left:-4%;top:12%;font-size:15px;animation:leaf-drift 16s linear infinite}
.scene-pic.forest #scene-fx::after{content:"🍂";left:-4%;top:38%;font-size:11px;animation:leaf-drift 22s linear 6s infinite}
/* Road — a leaf blowing along the open road. */
.scene-pic.road #scene-fx::before{content:"🍂";left:-4%;top:44%;font-size:14px;animation:leaf-drift 13s linear 2s infinite}
.scene-pic.road #scene-fx::after{content:"🍂";left:-4%;top:60%;font-size:10px;animation:leaf-drift 19s linear 9s infinite}
/* Dusk barrens — faint sparks of dust drifting on the wind. */
.scene-pic.dusk-barrens #scene-fx::before{left:-2%;top:30%;width:4px;height:4px;border-radius:50%;background:rgba(255,230,180,.8);box-shadow:0 0 5px 1px rgba(255,220,160,.5);animation:dust-drift 18s linear infinite}
.scene-pic.dusk-barrens #scene-fx::after{left:-2%;top:55%;width:3px;height:3px;border-radius:50%;background:rgba(255,230,180,.6);animation:dust-drift 24s linear 8s infinite}
@keyframes torch-glow{from{opacity:.55;transform:scale(.92)}to{opacity:.85;transform:scale(1.08)}}
@keyframes torch-core{from{transform:scale(1) translateY(0);opacity:.9}to{transform:scale(1.15) translateY(-1px);opacity:1}}
@keyframes ember-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(14px,-110px);opacity:0}}
@keyframes glow-pulse{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@keyframes leaf-drift{0%{left:-4%;transform:translateY(0) rotate(0deg);opacity:0}5%{opacity:.85}50%{transform:translateY(14px) rotate(160deg)}95%{opacity:.7}100%{left:104%;transform:translateY(-8px) rotate(300deg);opacity:0}}
@keyframes dust-drift{0%{left:-2%;transform:translateY(0);opacity:0}8%{opacity:.8}92%{opacity:.5}100%{left:104%;transform:translateY(-22px);opacity:0}}
@media (prefers-reduced-motion:reduce){#scene-fx::before,#scene-fx::after{animation:none!important;opacity:0!important}}
#dice-on-pic{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
.die{width:44px;height:44px;border-radius:8px;background:#241f19;color:var(--ink);border:2px solid #6a5a3e;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:20px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.die.rune{background:#241533;color:#c9f;border-style:dashed}
.hpbar,.mpbar{height:10px;background:#2a251e;border-radius:5px;overflow:hidden;margin:2px 0}.hpbar>div{background:var(--hp);height:100%}.mpbar>div{background:var(--mp);height:100%}
/* Dice roller, linear in the map strip next to "Move the party". */
.dice-linear #dice-results{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dice-linear #dice-results .entry{border-bottom:none;padding:0}
/* Dice roller: its own linear box, contents center-justified (dark box
   background keeps it readable off the olive-drab map strip). */
.dice-box{display:flex;justify-content:center}
.dice-box .dice-linear{justify-content:center}
.dice-preset-label{color:#6cb2ff;font-weight:bold}
.statbar-row{display:flex;align-items:center;gap:6px;margin:3px 0}
.statbar-row .stat-label{width:38px;font-weight:700;font-size:.9em;flex:none}
.statbar{flex:1;height:10px;background:#2a251e;border-radius:5px;overflow:hidden}
.statbar>span{display:block;height:100%}
.statbar.hp>span{background:var(--hp)}
.statbar.mp>span{background:var(--mp)}
.statbar.ac>span{background:var(--gold)}
.statbar-row .stat-num{min-width:46px;text-align:right;font-variant-numeric:tabular-nums;font-size:.9em;flex:none}
/* ---- Battle grid pieces: class-colored party pieces, foe + dead markers,
   legend, and the map strip under the scene stage. Class colors match the
   character-box tints: Ranger olive drab, Wizard purple, Fighter red,
   Artificer amber, Cleric gold, Rogue slate. */
.piece{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:15px;border:1px solid rgba(0,0,0,.45);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.piece-ranger{background:#556b2f}.piece-wizard{background:#6e64c8}.piece-fighter{background:#c85050}.piece-artificer{background:#c88c28}.piece-cleric{background:#c9b64a}.piece-rogue{background:#787896}
.piece-foe{background:#7a1f1f}.piece-dead{background:#2a2a2a;border-color:#888}
.cell.dead{opacity:.55}
/* ---- Grid map legend: compact scrollable side panel on the RIGHT of the
   grid, same height as the map, pushed to the right edge. Internal scroll
   when the content is taller than the map. Stacks below the grid on
   narrow screens (capped height, still scrollable). */
.battle-holder{display:flex;gap:14px;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;width:100%;position:relative;padding-right:204px}
.battle-main{flex:1 1 auto;min-width:0}
.battle-legend{display:flex;flex-direction:column;gap:8px;font-size:.82em;width:190px;min-width:0;max-width:190px;margin-left:0;position:absolute;right:0;top:0;bottom:0;overflow-y:auto;overflow-x:hidden;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:#f4ecd8}
.battle-legend .legend-title{font-weight:700;font-size:1.05em;color:#f4ecd8}
.battle-legend strong{color:#f4ecd8}
.legend-desc{color:#e8dcc0}
.cell-marker{font-size:13px;flex:none;line-height:1}
.legend-group{display:flex;flex-direction:column;gap:4px}
.legend-group-title{font-weight:700;color:var(--gold-bright,#e8c94a);font-size:.92em}
.legend-item{display:flex;gap:8px;align-items:center;line-height:1.35}
.legend-item .piece{flex:none}
.legend-desc{overflow-wrap:break-word}
.legend-chip{display:inline-block;padding:1px 7px;border-radius:8px;border:1px solid var(--line);flex:none}
.legend-chip.forest{background:#2f4a26}.legend-chip.mountain{background:#4a4a4a}
.map-strip{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;font-size:.92em;margin:8px 0}
.foe-dead{opacity:.6}.foe-dead .foe-name{text-decoration:line-through}
#battle-grid{display:grid;grid-template-columns:repeat(10,32px);gap:2px;margin:8px 0}
.cell{width:32px;height:32px;border:1px solid var(--line);background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
.cell.sel{outline:3px solid gold}.cell.forest{background:#2f4a26}.cell.mountain{background:#4a4a4a}
.dropzone{border:2px dashed var(--gold);padding:18px;text-align:center;margin:8px 0;background:var(--input-bg)}
dialog{max-width:720px;width:92%;border-radius:10px;background:var(--panel);color:var(--ink);border:1px solid var(--line)}
dialog::backdrop{background:rgba(0,0,0,.65)}
/* ---- Netlify Identity (login / own sheet) ---- */
#identity-status{white-space:nowrap}
#right-col #identity-status{white-space:normal}
#identity-dialog{max-width:560px;width:92%}
/* ---- Create character dialog ---- */
#create-dialog{max-width:640px;width:92%;max-height:88vh;overflow-y:auto}
#create-dialog .create-fields label{display:block;margin:8px 0 2px}
#create-dialog .create-fields input,#create-dialog .create-fields select,#create-dialog .create-fields textarea{width:100%;box-sizing:border-box}
/* ---- Latest GM narration box (single newest table-wide entry) ----
   Own solid box under the scene area, above "What do you do?".
   Sized for a paragraph of text; scrolls when the text exceeds the box.
   High-contrast readable text; narration in italics, dialogue as
   Name: "speech" (via entryTextHTML). */
.scene-overlay-box{background:#14100c;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 14px;box-shadow:0 2px 8px rgba(0,0,0,.55);font-size:1.2em;min-height:140px;max-height:280px;overflow-y:auto}
.scene-overlay-box .overlay-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.scene-overlay-box .overlay-head .spk{color:var(--mithril-bright)}
.scene-overlay-box .overlay-controls{margin-left:auto;display:flex;gap:4px}
.scene-overlay-box .overlay-controls button{padding:4px 8px}
.scene-overlay-box .overlay-text{line-height:1.6;overflow-wrap:break-word}
/* Latest-series rows inside the single box: thin separators, no extra box per entry. */
.scene-overlay-box .overlay-entry{padding:8px 0;border-bottom:1px solid var(--line)}
.scene-overlay-box .overlay-entry:first-child{padding-top:0}
.scene-overlay-box .overlay-entry:last-child{border-bottom:none;padding-bottom:0}
/* ---- Scene area: picture ↔ grid map toggle ---- */
#scene-map{display:none;min-height:300px;border-radius:12px;border:2px solid #6a5a3e;overflow:hidden;background:#1a1512;align-items:center;justify-content:center}
#scene-map.view-on{display:flex}

/* ---- Table Log page (own page: session directory + searchable history) ---- */
#tablelog-view{max-width:980px;margin:0 auto;padding:12px}
.session-dir{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
#tablelog-view #log-search{width:100%;margin-bottom:8px}
#tablelog-view #log-list{max-height:none;overflow:visible}
body.afk button.action-btn{opacity:.45}
/* ---- Character sheet layout ---- */
#sheet-view{max-width:980px;margin:0 auto;padding:12px}
.sheet-head{margin-bottom:12px;background:rgba(34,30,24,.95);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px}
.sheet-identity{display:flex;gap:16px;align-items:flex-start}
.sheet-identity .portrait{font-size:72px;min-height:120px;min-width:120px;flex:0 0 120px}
.sheet-vitals{font-size:1.05em;line-height:1.7}
.sheet-section{margin-bottom:12px}
/* Advisor (Forsythe) tips on the character sheet — hidden when off. */
.advisor-tip{background:rgba(48,40,26,.92);border:1px dashed var(--gold,#c9a227);border-left:4px solid var(--gold,#c9a227);border-radius:8px;padding:8px 10px;margin:8px 0;color:var(--ink);font-size:.95em;line-height:1.45}
.advisor-who{font-weight:700;color:var(--gold,#e8c94a)}
#sheet-view:not(.advisor-on) .advisor-tip{display:none}
.sheet-abilities{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ability-card{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
.ability-card .abil-name{font-weight:bold;letter-spacing:.05em}
.ability-card .abil-score{font-size:1.7em;font-weight:bold;color:var(--gold-bright)}
.ability-card .abil-mod{color:var(--muted)}
.sheet-gear-list{line-height:1.7}
.roll-set{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}
.roll-set-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.roll-set-stats{display:flex;flex-wrap:wrap;gap:8px}
.roll-stat{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--box-bg)}
.roll-stat s{color:var(--muted)}
.pool-counter{font-size:1.1em;margin:8px 0}
.adjust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.roll-stat-card{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
.roll-stat-name{font-weight:bold;letter-spacing:.05em}
.roll-stat-value{font-size:1.7em;font-weight:bold;color:var(--gold-bright)}
.roll-stat-mod{color:var(--muted)}
.roll-stat-btns{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.roll-stat-btns button{font-size:.85em;padding:3px 6px}
.sheet-notes textarea,.sheet-notes input{width:100%}
/* ---- Resources dialog ---- */
.res-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.res-tabbtn.active{background:var(--gold);color:#1a1408}
.res-entry{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}
.res-entry .res-title{font-weight:bold;font-size:1.05em}
.res-entry .res-cat{color:var(--gold-bright)}
.res-entry.unrevealed{opacity:.75;border-style:dashed}
.res-entry .res-body{white-space:pre-line}
/* Directory-style browsing: category chips + group headings. */
.res-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.res-chip{background:var(--input-bg);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:4px 10px;cursor:pointer;font-size:.9em}
.res-chip:hover{border-color:var(--gold-bright)}
.res-chip.active{background:var(--gold);color:#221e18;border-color:var(--gold);font-weight:bold}
.res-group{margin:14px 0 4px;color:var(--gold-bright);border-bottom:1px solid var(--line);padding-bottom:2px}
#res-count{margin:4px 0}

/* Campaign diary (sub-page under the character sheet) */
.diary-entry{background:var(--input-bg);border:1px solid var(--line);border-radius:8px;padding:10px;margin:8px 0}
.diary-entry-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.diary-entry-text{white-space:pre-wrap;margin:6px 0}
.diary-link{cursor:pointer}
.res-noncanon{font-size:.75em;font-weight:normal;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:middle}
.res-form{margin-top:12px}
.res-form textarea,.res-form input,.res-form select{width:100%;margin:4px 0}
@media(max-width:1000px){.cols{grid-template-columns:1fr}.sheet-abilities{grid-template-columns:repeat(2,1fr)}.adjust-grid{grid-template-columns:repeat(2,1fr)}.battle-holder{flex-wrap:wrap;padding-right:0}.battle-legend{position:static;flex:1 1 100%;width:auto;max-width:none;max-height:220px;margin-left:0}}

/* ---- Voices picker: roomy dialog, two-line rows, live value readouts ---- */
#voices-dialog{max-width:1020px;width:96%;max-height:88vh;overflow-y:auto}
#voices-note{margin:0 0 10px}
.voice-row{margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg)}
.voice-row-top{display:flex;gap:8px;align-items:center}
.voice-row-top label{min-width:90px;font-weight:bold}
.voice-row-top select{flex:1;min-width:0}
.voice-row-sliders{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px}
.voice-row-sliders span{display:inline-flex;gap:6px;align-items:center}
.voice-row-sliders input[type=range]{width:160px}
.voice-row-sliders output{min-width:34px}
:root{--mithril:#8fc9f0;--mithril-bright:#d6ecff;--mithril-dim:rgba(143,201,240,.35)}
body{line-height:1.5}
h2,h3{margin:0 0 8px}
p{margin:0 0 8px}
ul,ol{margin:6px 0;padding-left:22px}
li{margin:3px 0}
.box h3{border-bottom:1px solid var(--line);padding-bottom:6px}
.hdr-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.hdr-right{margin-top:0}
#hdr-clock{color:var(--mithril-bright)}
#reslinks a.nav-btn{color:#ffe9a0}
#reslinks a.nav-btn:hover{color:#fff}
.char-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ---- Header passphrase unlock (moved out of the character box) ---- */
.passctl{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.passctl #pass-input{width:160px}
#char-list{list-style:disc inside;margin:8px 0;padding-left:6px;line-height:1.6}
#char-list>li{margin:5px 0}
#char-list>li.statbar-li{list-style:none}
#char-list .char-sub{list-style:circle inside;margin:4px 0 2px;padding-left:16px;line-height:1.5}
#char-list .char-sub li{margin:2px 0}
#char-bio-link{margin:8px 0}
#char-bio-link a{color:var(--mithril);font-weight:bold}
#char-bio-link a:hover{color:var(--gold-bright)}
#bio-dialog{max-width:640px;width:92%}
#bio-dialog-text{white-space:pre-line;line-height:1.65;font-size:1.05em}
#combat-box,#quick-skills{display:flex;flex-wrap:wrap;gap:6px}
.row button{flex-shrink:0}
input,select,textarea{padding:8px 10px}
#scratch,#sheet-notes,#sheet-notes-2{display:block;width:100%}
#cond-input,#qs-input,#supply-input,#foe-input,#move-input,#gmdata-content{flex:1;min-width:0}
#dice-count{flex:0 0 56px}
#purse-gp{width:90px}
dialog{padding:18px 20px}
dialog h3{margin-top:0}
#conditions{list-style:none;padding:0;margin:0}
#conditions li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line)}
.cond-chip{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:#2a251e;color:var(--ink);cursor:pointer;font-size:.92em}
.cond-chip.on{background:linear-gradient(#5a4a12,#8a6d1f);border-color:var(--btn-line);color:#ffe9a0;font-weight:bold}
.entry{padding:8px 4px}
.entry .spk{color:var(--mithril-bright)}
.die{border-color:var(--mithril-dim)}
#scene-pic{box-shadow:0 0 24px rgba(143,201,240,.18);border-color:var(--mithril-dim)}
#battle-grid{overflow-x:auto;max-width:100%}
.ability-card{padding:12px}
.portrait{overflow:hidden}
.sheet-identity .portrait img{max-height:120px}
.tabbtn.active,.res-tabbtn.active{box-shadow:0 0 0 2px var(--mithril-dim)}
.soundctl,.afkctl{display:inline-flex;align-items:center;gap:5px}
button{padding:7px 12px}

/* ---- Ambience: YouTube embed (official player, compact) + per-scene URL ---- */
#yt-player-wrap{margin:8px 0}
#yt-player{width:100%;max-width:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#000}
#yt-player iframe{display:block;width:100%;height:150px;border:0}
#yt-status{margin:6px 0 2px}
.amb-url-label{font-size:.92em}
#ambience-url{flex:1;min-width:0}
   play/stop pinned to the right, text wraps sooner ---- */
.entry{display:flex;gap:10px;align-items:flex-start}
.entry-body{flex:1 1 auto;min-width:0;max-width:72ch;overflow-wrap:break-word}
.entry-controls{flex:0 0 auto;margin-left:auto;display:flex;gap:4px;align-self:flex-start}
.entry-controls button{padding:5px 9px}
.entry .ts{white-space:nowrap}

/* Bestiary: portraits + discoverable layers */
.res-img{width:100%;max-height:240px;object-fit:cover;border-radius:6px;border:1px solid #8a6d2f;margin:6px 0}
.res-layer{margin-top:8px;padding:8px 10px;background:rgba(0,0,0,.28);border-radius:6px}
.res-layer-hidden{opacity:.9}

/* "The GM is thinking…" indicator in the Latest GM Narration header,
   right-justified at the far right of the title bar. Title stays left;
   the indicator is pushed right via margin-left:auto. Slightly bigger
   than before (.8em) for readability, still smaller than the title,
   normal weight, so it reads as a live status tag rather than part of
   the heading. Hidden (display:none) when the GM has answered; the JS
   toggles it. */
#narration-latest h3{display:flex;align-items:center}
#narration-latest h3 .gm-thinking{color:var(--gold-bright);font-style:italic;font-weight:normal;font-size:.8em;margin-left:auto;white-space:nowrap}

/* Table Talk (OOC chat) — compact, clearly separate from the story.
   Messages area matches the Live Play box: 600px tall, scrollable. */
.tabletalk-list{max-height:600px;overflow:auto}
.tt-msg{padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.tt-msg:last-child{border-bottom:none}
.tt-text{overflow-wrap:break-word;white-space:pre-wrap}