/* REVERIE — candlelit stage. All colour + the display font are CSS variables an
   atmosphere event can reassign live. Default sphere is "The Drowned Moon"-ish. */
:root {
  --stage:#131119; --panel:#1c1926; --panel-2:#242031; --candle:#e6dfd0;
  --veil:#a88bfa; --lantern:#d9a03f; --dim:#6f6884; --line:#2e2940;
  --danger:#d96459; --success:#7faE7a;
  --font-display:"IM Fell English", Georgia, serif;
  --vignette:0.35;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--stage); color:var(--candle);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:15px; line-height:1.55;
  transition:background-color .5s ease, color .5s ease; }
h1,h2,.playbill { font-family:var(--font-display); font-weight:400; letter-spacing:.02em; }
h1 { font-size:2.6rem; margin:0 0 .2rem; }
h2 { font-size:1.3rem; margin:0 0 .6rem; }
a { color:var(--veil); }

button { font:inherit; color:var(--candle); background:var(--panel-2); border:1px solid var(--line);
  border-radius:6px; padding:.45rem .9rem; cursor:pointer; transition:border-color .2s, background-color .2s; }
button:hover { border-color:var(--dim); }
button.primary { background:var(--lantern); color:#1a1408; border-color:var(--lantern); }
button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--lantern); outline-offset:1px; }
input[type=text],input[type=url],input[type=number],select { font:inherit; width:100%; color:var(--candle);
  background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.5rem .7rem; }

/* atmosphere overlays (sit above everything, ignore clicks) */
.vignette-overlay { position:fixed; inset:0; pointer-events:none; z-index:40;
  box-shadow: inset 0 0 24vw rgba(0,0,0,var(--vignette)); transition:box-shadow .6s ease; }
.transition-veil { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:45; }

/* landing */
.curtain { max-width:760px; margin:8vh auto; padding:0 1.2rem; text-align:center; }
.curtain .tagline { color:var(--dim); margin-bottom:2.5rem; }
.doors { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.door { flex:1 1 300px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:1.4rem; text-align:left; }
.door label { display:block; color:var(--dim); font-size:.8rem; margin:.8rem 0 .25rem; }
.door button { margin-top:1.1rem; width:100%; }
.error { color:var(--danger); min-height:1.4em; margin-top:.8rem; font-size:.85rem; }

/* three-column stage: presence | room | cueboard */
.stage-wrap { display:flex; height:100vh; max-width:1280px; margin:0 auto; transition:max-width .3s ease; }
/* focus mode — the side rails fold to slim strips so the narrative pane takes the room */
.stage-wrap.focused { max-width:1600px; }
.stage-wrap.focused .presence,
.stage-wrap.focused .party-rail,
.stage-wrap.focused .charwidget { width:0 !important; flex-basis:0 !important; padding:0 !important; overflow:hidden; border:none; opacity:0; pointer-events:none; transition:width .3s ease, opacity .2s ease, flex-basis .3s ease; }
.stage-wrap .presence, .stage-wrap .party-rail, .stage-wrap .charwidget { transition:width .3s ease, opacity .2s ease, flex-basis .3s ease; }
.focus-toggle { flex:0 0 auto; font-size:.95rem; padding:.18rem .5rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:6px; cursor:pointer; }
.focus-toggle:hover { color:var(--lantern); border-color:color-mix(in srgb, var(--lantern) 45%, var(--line)); }
.stage-wrap.focused .focus-toggle { color:var(--lantern); border-color:var(--lantern); }
.room { display:flex; flex-direction:column; flex:1; min-width:0; padding:.6rem .8rem; }
.room header { display:flex; align-items:center; gap:.9rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
.room header .code { color:var(--lantern); }
/* brand lockup */
.brand { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; flex:0 0 auto; }
.join-code { flex:0 0 auto; font-size:.78rem; color:var(--dim); letter-spacing:.04em; white-space:nowrap;
  border:1px solid var(--line); border-radius:8px; padding:.18rem .5rem; }
.join-code .jc-label { opacity:.6; text-transform:uppercase; font-size:.62rem; letter-spacing:.12em; margin-right:.15rem; }
.join-code #code { color:var(--lantern); font-weight:600; letter-spacing:.08em; }
.brand-mark { flex:0 0 auto; filter:drop-shadow(0 0 5px rgba(217,160,63,0.5)); }
.brand-word { font-family:var(--font-display); font-style:italic; font-size:1.35rem; color:var(--candle); letter-spacing:.02em; line-height:1; }
.table-name { flex:1 1 auto; min-width:0; font-size:1.15rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-left:1px solid var(--line); padding-left:.9rem; margin:0; }
.room header .at-table { flex:0 0 auto; }
.at-table { display:inline-flex; gap:.15rem; margin-right:.3rem; }
.at-table .seat { display:inline-flex; opacity:.4; filter:grayscale(0.6); transition:opacity .3s, filter .3s; }
.at-table .seat .avatar { width:22px; height:22px; }
.at-table .seat.online { opacity:1; filter:none; }
.at-table .seat.online .avatar { box-shadow:0 0 0 1px var(--success), 0 0 6px rgba(127,174,122,.6); border-color:var(--success); }
.streams { flex:1; min-height:0; display:flex; flex-direction:column; gap:.6rem; padding:.6rem 0; }

.vision { display:none; position:relative; text-align:center; padding:1.2rem 0; }
.vision::before { content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(ellipse 60% 70% at 50% 45%, rgba(217,160,63,.10), transparent 70%); pointer-events:none; }
.vision img { position:relative; z-index:1; max-width:88%; max-height:34vh; display:block; margin:0 auto;
  border-radius:10px;
  -webkit-mask-image:radial-gradient(ellipse 92% 92% at 50% 50%, #000 60%, transparent 100%);
          mask-image:radial-gradient(ellipse 92% 92% at 50% 50%, #000 60%, transparent 100%);
  box-shadow:0 0 60px 10px rgba(0,0,0,.5); }
.vision .caption { position:relative; z-index:1; color:var(--dim); font-size:.8rem; padding:.5rem; font-style:italic; }
.vision-clear { position:absolute; top:.4rem; right:.4rem; z-index:2; width:26px; height:26px; padding:0; border-radius:50%;
  background:rgba(0,0,0,.45); border:1px solid var(--line); color:var(--dim); font-size:1rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .2s; }
.vision:hover .vision-clear { opacity:1; }
.vision-clear:hover { color:var(--candle); border-color:var(--dim); }

.log { flex:1; min-height:0; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem; transition:background-color .5s ease; }
.log .ev { margin-bottom:.55rem; overflow-wrap:anywhere; }
.log .ev.text { display:flex; align-items:flex-start; gap:.5rem; }
.log .ev.narration .body { color:var(--candle); font-family:var(--font-display); font-size:1.05rem; }
.log .ev.table .body { color:var(--dim); }
.log .ev .name { color:var(--lantern); white-space:nowrap; }
.log .ev.text .name::after { content:" —"; color:var(--dim); }
.log .ev.emote { display:flex; align-items:flex-start; gap:.5rem; padding:.3rem .5rem; margin:.15rem 0;
  background:color-mix(in srgb, var(--veil) 8%, transparent); border-left:2px solid var(--veil); border-radius:0 7px 7px 0; }
.log .ev.emote .avatar { width:26px; height:26px; opacity:.92; }
.log .ev.emote .emote-body { color:var(--candle); font-style:italic; font-family:var(--font-display); font-size:1rem; line-height:1.4; }
.log .ev.emote .emote-name { font-style:normal; color:var(--veil); font-weight:600; }
.log .ev.roll .body { color:var(--lantern); }
.log .ev .succ { color:var(--success); font-weight:700; }
.log .ev .fail { color:var(--danger); font-weight:700; }
.log .ev .rollnote { color:var(--dim); font-style:italic; }
.log .ev.veiled { border-left:2px solid var(--veil); padding-left:.6rem; }
.log .ev .veiltag,.log .ev .chantag,.log .ev .voicetag { font-size:.7rem; border-radius:4px; padding:0 .35rem; margin-right:.4rem; }
.log .ev .veiltag { color:var(--veil); border:1px solid var(--veil); }
.log .ev .chantag { color:var(--dim); border:1px solid var(--line); }
.log .ev .voicetag { color:var(--lantern); border:1px solid var(--lantern); }

.avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line); background:var(--panel-2); display:inline-flex; align-items:center; justify-content:center; }
.avatar-blank { color:var(--dim); font-size:.8rem; font-family:var(--font-display); }
.avatar[data-portrait] { cursor:zoom-in; }
/* the floating enlarged portrait preview — lives on <body>, clipped by nothing */
.avatar-preview { position:fixed; z-index:200; width:180px; height:180px; border-radius:12px; object-fit:cover;
  border:1px solid var(--lantern); box-shadow:0 14px 40px rgba(0,0,0,.6); pointer-events:none;
  opacity:0; transform:scale(.9); transition:opacity .14s ease, transform .14s ease; background:var(--panel-2); }
.avatar-preview.show { opacity:1; transform:scale(1); }
.avatar-preview.squared { border-radius:10px; }

/* presence panel (left) — its title/shape/texture come from the atmosphere */
.presence { width:210px; flex:0 0 210px; padding:.9rem .8rem; overflow-y:auto; border-right:1px solid var(--line);
  background:var(--panel); transition:background-color .5s ease, border-color .5s ease; }
.presence .panel-title { font-size:1.05rem; color:var(--candle); margin-bottom:.8rem; }
.present-list { display:flex; flex-direction:column; gap:.6rem; }
.present { display:flex; align-items:center; gap:.5rem; }
.present .avatar { width:34px; height:34px; }
.present-name { font-size:.85rem; }
.panel-image img { width:100%; border-radius:6px; border:1px solid var(--line); }
/* shapes */
.presence.shape-rounded { border-radius:0 16px 16px 0; }
.presence.shape-sharp .avatar, .presence.shape-sharp .panel-image img { border-radius:0; }
.presence.shape-framed { box-shadow: inset 0 0 0 1px var(--line); }
.presence.shape-framed .present { border:1px solid var(--line); border-radius:6px; padding:.3rem; background:var(--panel-2); }
/* textures (pure CSS) */
.presence.tex-parchment { background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px), radial-gradient(circle at 30% 20%, rgba(217,160,63,.06), transparent 60%); }
.presence.tex-fog { background-image:radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 70%); }
.presence.tex-ink { background-image:radial-gradient(circle at 20% 80%, rgba(168,139,250,.07), transparent 55%), radial-gradient(circle at 80% 20%, rgba(0,0,0,.25), transparent 50%); }

/* composer */
.composer { border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:.6rem; transition:border-color .25s,box-shadow .25s; }
.composer.veiled { border-color:var(--veil); box-shadow:0 0 14px rgba(168,139,250,.35); }
.composer.voicing .sendrow input#text { border-color:var(--lantern); }
.composer .veilbanner { display:none; color:var(--veil); font-size:.8rem; margin-bottom:.4rem; }
.composer.veiled .veilbanner { display:block; }
.chiprow { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; }
.chip { font-size:.8rem; padding:.2rem .7rem; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer; color:var(--dim); }
.chip.on { color:var(--candle); border-color:var(--candle); }
.chip.target.on { color:var(--veil); border-color:var(--veil); background:rgba(168,139,250,.1); }
.voicerow { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.voicerow label { color:var(--dim); font-size:.8rem; }
.voicerow select { width:auto; flex:1; }
.sendrow { display:flex; gap:.5rem; }
.sendrow input { flex:1; }
.hint { color:var(--dim); font-size:.75rem; margin-top:.4rem; }

/* cue board — a strip tucked into the composer */
.cue-mount { margin-bottom:.6rem; padding-bottom:.5rem; border-bottom:1px dashed var(--line); }
.cue-strip { display:flex; gap:.45rem; overflow-x:auto; padding-bottom:.4rem; }
.cue-tile { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.25rem; width:62px; padding:.35rem .25rem; }
.cue-swatch { display:inline-flex; gap:2px; align-items:center; width:38px; height:24px; border-radius:5px; border:1px solid; padding:2px; }
.cue-swatch i { flex:1; height:100%; border-radius:2px; }
.cue-name { font-size:.62rem; color:var(--dim); text-align:center; line-height:1.1; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cue-row { display:flex; align-items:center; gap:.6rem; margin-top:.3rem; }
.cue-to-label { font-size:.75rem; color:var(--dim); display:flex; align-items:center; gap:.3rem; }
.cue-to-label select { width:auto; }
.cb-new { margin-left:auto; }
.cb-editor { margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--line); }
.cb-form { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .6rem; }
.cb-f { display:flex; align-items:center; justify-content:space-between; gap:.4rem; font-size:.72rem; color:var(--dim); }
.cb-f input[type=color] { width:40px; height:24px; padding:0; flex:0 0 auto; }
.cb-f input:not([type=color]), .cb-f select { width:55%; padding:.25rem .4rem; font-size:.75rem; }
.cb-form .primary { grid-column:1 / -1; margin-top:.3rem; }

/* broadcast composer + item cards in the presence panel */
.panel-broadcast { margin-top:1rem; padding-top:.7rem; border-top:1px solid var(--line); }
.panel-broadcast .bc-input { font:inherit; font-size:.82rem; width:100%; box-sizing:border-box; padding:.45rem .55rem; margin-bottom:.4rem;
  color:var(--candle); background:var(--panel); border:1px solid var(--line); border-radius:6px; resize:vertical; line-height:1.45; min-height:3.2rem; }
.bc-row { display:flex; gap:.4rem; }
.bc-row .chip { flex:1; text-align:center; }
.present { position:relative; }
.pres-rm { position:absolute; top:-.2rem; right:-.2rem; font-size:.9rem; line-height:1; z-index:2; }
.pres-image { flex-direction:column; align-items:stretch; }
.pres-image img { width:100%; border-radius:6px; border:1px solid var(--line); display:block; }
.pres-image .present-name { display:block; margin-top:.3rem; font-size:.78rem; color:var(--dim); font-style:italic; text-align:center; }
.pres-note { display:block; font-family:var(--font-display); color:var(--candle);
  background:var(--panel-2); border-left:2px solid var(--lantern); border-radius:0 6px 6px 0; padding:.4rem .6rem; }
.pres-note .note-text { font-size:.95rem; line-height:1.5; }
.pres-note .note-text p { margin:.2rem 0; }
.pres-note .note-text p:first-child { margin-top:0; }
.pres-note .note-text p:last-child { margin-bottom:0; }
.pres-note .note-text strong { color:var(--lantern); font-weight:600; }
.pres-note .note-text em { font-style:italic; color:var(--dim); }
.pres-note .note-text h1, .pres-note .note-text h2, .pres-note .note-text h3 { font-size:1rem; margin:.2rem 0; color:var(--candle); }
.pres-note .note-text ul, .pres-note .note-text ol { margin:.2rem 0; padding-left:1.1rem; }
.pres-note .note-text li { margin:.1rem 0; }
.pres-note .note-text blockquote { border-left:2px solid var(--veil); margin:.2rem 0; padding-left:.5rem; color:var(--dim); }

/* drawer (Characters) — overlay */
.drawer { position:fixed; top:0; right:0; height:100vh; width:380px; max-width:92vw; background:var(--panel-2);
  border-left:1px solid var(--line); transform:translateX(100%); transition:transform .25s; overflow-y:auto; z-index:50; padding:0 1rem 1rem; }
.drawer.open { transform:translateX(0); box-shadow:-12px 0 40px rgba(0,0,0,.4); }
.drawer-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  margin:0 -1rem .8rem; padding:.85rem 1rem; background:var(--panel-2);
  border-bottom:1px solid var(--line); box-shadow:0 6px 18px -8px rgba(0,0,0,.5); }
.drawer-close { font-size:1.05rem !important; padding:.2rem .6rem !important; }
.new-npc { display:flex; gap:.4rem; margin-bottom:1rem; }
.sheet-list { display:flex; flex-direction:column; gap:.8rem; }
.sheet-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.8rem; }
.sheet-card.npc { border-color:rgba(168,139,250,.4); }
.sheet-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.sheet-head .avatar { width:40px; height:40px; }
.sheet-id { flex:1; min-width:0; }
.sheet-name { color:var(--lantern); }
.sheet-name-input,.sheet-port-input { margin-bottom:.25rem; font-size:.85rem; padding:.3rem .5rem; }
.kindtag { font-size:.65rem; padding:.05rem .4rem; border-radius:4px; border:1px solid var(--line); color:var(--dim); }
.kindtag.npc { color:var(--veil); border-color:var(--veil); }
.fields { display:flex; flex-direction:column; gap:.4rem; }
.field-row { display:flex; align-items:center; gap:.5rem; }
.field-row > label { flex:0 0 38%; color:var(--dim); font-size:.8rem; overflow-wrap:anywhere; text-transform:capitalize; }
.test-btn { font-size:.7rem; padding:.2rem .5rem; color:var(--lantern); border-color:var(--lantern); background:transparent; }
.test-btn:hover { background:rgba(217,160,63,.12); }
.field-row.section { flex-direction:column; align-items:stretch; }
.field-row.section > label { flex:none; color:var(--candle); }
.field-inner { padding-left:.8rem; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:.4rem; margin-top:.3rem; }
.stepper { display:flex; align-items:center; gap:.25rem; flex:1; }
.stepper input { width:4rem; text-align:center; padding:.3rem; }
.stepper button { padding:.2rem .55rem; }
.list { display:flex; flex-wrap:wrap; gap:.3rem; flex:1; }
.list-item { background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:.1rem .5rem; font-size:.8rem; }
.list-add { width:6rem !important; padding:.2rem .4rem !important; font-size:.8rem; }
.x { background:none; border:none; color:var(--dim); cursor:pointer; padding:0 .2rem; }
.x:hover { color:var(--danger); }
.add-field { display:flex; gap:.3rem; margin-top:.7rem; }
.add-field input { flex:1; padding:.3rem .5rem; font-size:.8rem; }
.add-field select { width:auto; padding:.3rem; font-size:.8rem; }
.roll-vis-row { margin-top:.7rem; }
.del-npc { margin-top:.6rem; font-size:.75rem; color:var(--danger); border-color:transparent; background:transparent; padding:.2rem .4rem; }
.del-npc:hover { border-color:var(--danger); }
.reveal-row { display:flex; gap:.4rem; margin-top:.5rem; flex-wrap:wrap; }
.reveal-row button { font-size:.75rem; padding:.3rem .6rem; }

.mobile-only { display:none; }

/* prep drawer + teleprompter */
.prep-drawer { width:420px; }
.prep-load { display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--line); }
.prep-load .prep-paste { font:inherit; min-height:3.5rem; resize:vertical; color:var(--candle); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.5rem; }
.prep-shelf { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.shelf-item { display:inline-flex; align-items:center; }
.prep-target { font-size:.78rem; color:var(--dim); margin-bottom:.7rem; display:flex; align-items:center; gap:.4rem; }
.prep-target select { width:auto; }
.prep-teleprompter { display:flex; flex-direction:column; gap:.5rem; }
.pb { display:flex; align-items:flex-start; gap:.5rem; padding:.5rem .6rem; border-radius:6px; border:1px solid transparent; }
.pb-text { flex:1; min-width:0; overflow-wrap:anywhere; font-size:.9rem; }
.pb-fire { flex:0 0 auto; font-size:.7rem; padding:.2rem .6rem; color:var(--lantern); border-color:var(--lantern); background:transparent; }
.pb-fire:hover { background:rgba(217,160,63,.14); }
.pb.fired { opacity:.4; }
.pb.fired .pb-fire { color:var(--dim); border-color:var(--line); }
.pb-prose { color:var(--dim); border:none; padding-left:0; font-family:var(--font-display); }
.pb-narration { background:var(--panel); border-color:var(--line); }
.pb-narration .pb-text { font-family:var(--font-display); color:var(--candle); }
.pb-npc { background:var(--panel); border-color:var(--line); }
.pb-npc .pb-text { color:var(--candle); }
.pb-atmo { border-color:rgba(168,139,250,.4); }
.pb-image, .pb-note, .pb-sound, .pb-roll { background:var(--panel-2); }
.pb-dim { color:var(--dim); }

/* export / import affordances */
.mini { font-size:.72rem; padding:.2rem .55rem; background:transparent; border-color:var(--line); color:var(--dim); }
.mini:hover { color:var(--candle); border-color:var(--dim); }
.export-row { display:flex; gap:.4rem; margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--line); }
.import-row { margin:.4rem 0 1rem; }
.import-btn { display:inline-block; cursor:pointer; }
.sphere-io { display:flex; gap:.4rem; margin-top:.6rem; }

/* the little choice menu */
.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; display:flex; align-items:center; justify-content:center; }
.menu-box { background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:1.2rem; min-width:280px; max-width:90vw; display:flex; flex-direction:column; gap:.5rem; }
.menu-box h2 { margin-bottom:.4rem; }
.menu-item { text-align:left; }
.menu-cancel { align-self:flex-end; margin-top:.3rem; }

/* prep editing + rendered prose */
.tele-bar { position:sticky; top:3.4rem; z-index:1; display:flex; align-items:center; gap:.4rem; padding:.4rem 0 .5rem; margin-bottom:.2rem; background:var(--panel-2); border-bottom:1px solid var(--line); }
.tele-hint { font-size:.66rem; color:var(--dim); opacity:.7; margin-left:auto; font-style:italic; }
.pb { position:relative; }
.pb-edit { flex:0 0 auto; font-size:.7rem; padding:.15rem .4rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:5px; cursor:pointer; opacity:0; transition:opacity .15s; }
.pb:hover .pb-edit { opacity:1; }
.pb-edit:hover { color:var(--candle); border-color:var(--dim); }
.pb.editing { border-color:var(--lantern); background:rgba(217,160,63,.05); flex-direction:column; align-items:stretch; gap:.4rem; }
.pb-inline-edit { font:inherit; width:100%; box-sizing:border-box; resize:vertical; color:var(--candle); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.5rem; line-height:1.45; font-size:.85rem; }
.pb-inline-btns { display:flex; gap:.4rem; }
.prep-edit { font:inherit; width:100%; min-height:40vh; resize:vertical; color:var(--candle); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:.6rem; margin-bottom:.5rem; line-height:1.5; }
.pb-prose h1,.pb-prose h2,.pb-prose h3 { font-family:var(--font-display); margin:.2rem 0; }
.pb-prose blockquote { border-left:2px solid var(--lantern); margin:.3rem 0; padding-left:.6rem; color:var(--dim); font-style:italic; }
.pb-prose ul,.pb-prose ol { margin:.2rem 0; padding-left:1.2rem; }
.pb-prose a { color:var(--veil); }

/* /story — the world's voice: a distinct, centered, author-light block */
.log .ev.story { text-align:center; margin:1.1rem auto; max-width:46ch; }
.log .ev.story .story-inner { font-family:var(--font-display); font-size:1.15rem; line-height:1.5; color:var(--candle); font-style:italic; }
.log .ev.story .story-inner::before { content:"❧ "; color:var(--lantern); font-style:normal; }
.log .ev.story .story-by { font-size:.7rem; color:var(--dim); margin-top:.3rem; }

/* prompt CTA (player) + sent notice (GM) */
.log .ev.prompt-card { background:var(--panel-2); border:1px solid var(--lantern); border-radius:8px; padding:.7rem .8rem; }
.log .ev.prompt-card.answered { opacity:.55; border-color:var(--line); }
.prompt-text { font-family:var(--font-display); font-size:1.05rem; margin-bottom:.5rem; }
.prompt-ctrl { display:flex; gap:.5rem; align-items:center; }
.prompt-ctrl select { width:auto; flex:1; }
.log .ev.prompt-sent { color:var(--dim); }
.log .ev.prompt-sent .prompt-tag { font-size:.7rem; border:1px solid var(--lantern); color:var(--lantern); border-radius:4px; padding:0 .35rem; margin-right:.4rem; }

/* player character widget (right column) */
.charwidget { width:212px; flex:0 0 212px; border-left:1px solid var(--line); background:var(--panel); padding:.9rem .8rem; overflow-y:auto; transition:flex-basis .2s, width .2s, background-color .5s ease; }
.charwidget.expanded { width:340px; flex-basis:340px; }
.cw-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem; }
.cw-compact { display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.cw-compact .avatar { width:72px; height:72px; }
.cw-name { font-family:var(--font-display); font-size:1.1rem; color:var(--lantern); }
.cw-stats { display:flex; flex-direction:column; gap:.3rem; width:100%; margin:.3rem 0; }
.cw-stat { display:flex; justify-content:space-between; border:1px solid var(--line); border-radius:6px; padding:.25rem .55rem; background:var(--panel-2); }
.cw-stat span { color:var(--dim); text-transform:capitalize; }
.cw-toggle { margin-top:.3rem; }

/* editable panel title (GM) */
.panel-title-input { width:100%; background:transparent; border:1px solid transparent; color:var(--candle); font-size:1.05rem; padding:.2rem .3rem; margin-bottom:.7rem; border-radius:5px; }
.panel-title-input:hover { border-color:var(--line); }
.panel-title-input:focus { border-color:var(--lantern); background:var(--panel); outline:none; }

/* floating sphere widget */
.sphere-launcher { position:fixed; left:1rem; bottom:1rem; z-index:47; width:44px; height:44px; border-radius:50%; font-size:1.2rem; padding:0; background:var(--panel-2); border:1px solid var(--lantern); box-shadow:0 4px 16px rgba(0,0,0,.4); }
.sphere-pop { position:fixed; left:4.5rem; bottom:1rem; z-index:47; width:300px; max-width:calc(100vw - 6rem); max-height:74vh; overflow-y:auto; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:0 .9rem .9rem; box-shadow:0 12px 40px rgba(0,0,0,.5); transform:translateY(8px) scale(.98); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.sphere-pop.open { opacity:1; transform:none; pointer-events:auto; }
.sp-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; margin:0 -.9rem .5rem; padding:.7rem .9rem; background:var(--panel-2); border-bottom:1px solid var(--line); }
.sp-search { margin-bottom:.6rem; }
.sp-target { font-size:.75rem; color:var(--dim); margin-bottom:.6rem; }
.sp-target select { width:auto; }
.sp-tiles { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.cue-tile { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.cue-apply { width:100%; display:flex; flex-direction:column; align-items:center; gap:.4rem; text-align:center; padding:.6rem .4rem; background:transparent; border:none; }
.cue-swatch { display:inline-flex; gap:2px; align-items:center; width:46px; height:26px; border-radius:5px; border:1px solid; padding:2px; flex:0 0 auto; }
.cue-swatch i { flex:1; height:100%; border-radius:2px; }
.cue-name { font-size:.74rem; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cue-edit { position:absolute; top:.2rem; right:.2rem; padding:.1rem .3rem; font-size:.72rem; background:transparent; border-color:transparent; color:var(--dim); }
.cue-edit:hover { color:var(--lantern); border-color:var(--lantern); }
.cue-edit:hover { color:var(--lantern); border-color:var(--lantern); }
.sp-editor { margin-top:.8rem; border-top:1px solid var(--line); padding-top:.6rem; }
.sp-edit-summary { cursor:pointer; color:var(--lantern); font-size:.85rem; }
.sp-editor .cb-form { margin-top:.6rem; }

/* visual prep editor — full-screen pinup over a blurred stage */
.prep-editor-overlay { position:fixed; inset:0; z-index:70; background:rgba(8,8,12,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:2.5vh 2vw; }
.pe-box { background:var(--panel,#1c1926); border:1px solid var(--line,#2e2940); border-radius:14px; width:min(900px,96vw); height:95vh; display:flex; flex-direction:column; min-height:0; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.pe-head { display:flex; align-items:center; gap:.5rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--line,#2e2940); flex:0 0 auto; }
.pe-name { font-family:var(--font-display); font-size:1.2rem; color:var(--candle,#e6dfd0); background:transparent; border:1px solid transparent; border-radius:6px; padding:.25rem .4rem; flex:0 1 16rem; }
.pe-name:hover { border-color:var(--line); } .pe-name:focus { border-color:var(--lantern); background:var(--panel-2); outline:none; }
.pe-spacer { flex:1; }
.pe-blocks { flex:1 1 auto; min-height:0; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.6rem; }
.pe-add { display:flex; gap:.5rem; padding:.8rem 1.1rem; border-top:1px solid var(--line,#2e2940); flex:0 0 auto; }
.pe-add-type { flex:0 1 18rem; }
.pe-block { border:1px solid var(--line,#2e2940); border-left:3px solid var(--block-color,#6f6884); border-radius:9px; background:var(--panel-2,#242031); flex:0 0 auto; }
.pe-block.dragging { opacity:.4; }
.pe-block.drop-above { box-shadow:0 -3px 0 var(--lantern,#d9a03f); }
.pe-block-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .5rem .45rem .7rem; }
.pe-block.open > .pe-block-head { border-bottom:1px solid var(--line,#2e2940); }
.pe-title { display:flex; align-items:center; gap:.5rem; flex:1; min-width:0; background:transparent; border:none; text-align:left; padding:.15rem 0; cursor:pointer; }
.pe-caret { color:var(--dim,#9a93b0); font-size:.7rem; transition:transform .15s; flex:0 0 auto; }
.pe-block.collapsed .pe-caret { transform:rotate(-90deg); }
.pe-icon { font-size:.95rem; color:var(--block-color,#ccc); flex:0 0 auto; }
.pe-type { font-size:.78rem; color:var(--block-color,#d9a03f); text-transform:uppercase; letter-spacing:.05em; font-weight:700; flex:0 0 auto; }
.pe-preview { font-size:.78rem; color:var(--dim,#9a93b0); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-style:italic; }
.pe-tools { display:flex; gap:.25rem; align-items:center; flex:0 0 auto; }
.pe-tools .mini { padding:.1rem .45rem; }
.pe-grip { color:var(--dim,#6f6884); cursor:grab; padding:0 .2rem; font-size:.9rem; }
.pe-del:hover { color:var(--danger,#d96459); border-color:var(--danger,#d96459); }
.pe-body { display:flex !important; flex-direction:column; gap:.55rem; padding:.7rem; }
.pe-field { display:flex; flex-direction:column; gap:.25rem; }
.pe-field > span { font-size:.74rem; color:var(--dim,#9a93b0); }
.pe-f { font:inherit; width:100%; color:var(--candle,#e6dfd0); background:var(--panel,#1c1926); border:1px solid var(--line,#2e2940); border-radius:6px; padding:.45rem .55rem; box-sizing:border-box; }
textarea.pe-f { min-height:3.5rem; resize:vertical; line-height:1.5; }
textarea.pe-f.big { min-height:6.5rem; }
.pe-block select.pe-f, .pe-block select { color:var(--candle,#e6dfd0); background:var(--panel,#1c1926); }
.pe-hint { font-size:.7rem; color:var(--dim); font-style:italic; margin-top:.2rem; }
.pe-block .hint, .pe-blocks .hint { color:var(--dim,#9a93b0); }

@media (prefers-reduced-motion:reduce){ * { transition:none !important; } }
@media (max-width:860px){
  html,body{font-size:14px;}
  .mobile-only { display:inline-block; }
  /* side columns become off-canvas drawers */
  .presence { position:fixed; top:0; left:0; height:100vh; z-index:48; transform:translateX(-100%); transition:transform .25s; width:80vw; max-width:300px; }
  .presence.open { transform:translateX(0); box-shadow:12px 0 40px rgba(0,0,0,.4); }
  .charwidget { position:fixed; top:0; right:0; height:100vh; z-index:48; transform:translateX(100%); transition:transform .25s; width:80vw; max-width:300px; }
  .charwidget.expanded { width:90vw; max-width:340px; }
  .drawer { width:100vw; }
  .prep-drawer { width:100vw; }
}

/* @map — ASCII maps as a presence card + teleprompter preview */
/* @map teleprompter preview (side) */
.pb-map .map-ascii { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; font-size:.7rem; line-height:1.15; white-space:pre; overflow-x:auto; margin:.3rem 0 0; color:var(--candle); background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:.4rem .5rem; }

/* a map risen onto the main canvas (vision pane) — sphere-styled, glowing, feathered */
.vision-map { display:none; position:relative; z-index:1; max-width:90%; margin:0 auto; padding:1.4rem 1.6rem;
  border-radius:12px; text-align:center;
  background:radial-gradient(ellipse 90% 80% at 50% 45%, color-mix(in srgb, var(--lantern) 9%, transparent), transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 96% 96% at 50% 50%, #000 68%, transparent 100%);
          mask-image:radial-gradient(ellipse 96% 96% at 50% 50%, #000 68%, transparent 100%); }
.vmap-title { font-family:var(--font-display); font-style:italic; font-size:1.25rem; color:var(--candle);
  letter-spacing:.03em; margin-bottom:.7rem; text-shadow:0 0 14px color-mix(in srgb, var(--lantern) 45%, transparent); }
.vmap-grid { display:inline-block; text-align:left; font-family:ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size:.9rem; line-height:1.2; white-space:pre; color:var(--candle); margin:0;
  text-shadow:0 0 8px color-mix(in srgb, var(--lantern) 30%, transparent); }
.vmap-prose { text-align:left; max-width:54ch; margin:0 auto; color:var(--candle); font-family:var(--font-display);
  font-size:1.02rem; line-height:1.6; }
.vmap-prose h1, .vmap-prose h2, .vmap-prose h3 { font-family:var(--font-display); color:var(--candle); margin:.4rem 0 .3rem; }
.vmap-prose em { color:var(--dim); }
.vmap-prose strong { color:var(--lantern); font-weight:600; }
.vmap-prose ul, .vmap-prose ol { padding-left:1.2rem; margin:.3rem 0; }
.vmap-prose li { margin:.15rem 0; }

/* full-stage texture overlay — a wash painted OVER the stage (above content,
   below the vignette/transition layers), keyed to the sphere. No blend mode:
   it must be visible against a dark stage, so it paints directly. */
.stage-texture-overlay { position:fixed; inset:0; pointer-events:none; z-index:41; transition:opacity .6s ease; opacity:0; }
.stage-texture-overlay.tex-none { opacity:0; background-image:none; }
.stage-texture-overlay.tex-grain { opacity:.10;
  background-image:repeating-radial-gradient(circle at 17% 23%, rgba(255,255,255,.5) 0 1px, transparent 1px 3px),
                   repeating-radial-gradient(circle at 71% 61%, rgba(0,0,0,.6) 0 1px, transparent 1px 4px);
  background-size:5px 5px, 7px 7px; }
.stage-texture-overlay.tex-vellum { opacity:.10;
  background-image:repeating-linear-gradient(0deg, rgba(255,235,200,.35) 0 1px, transparent 1px 3px),
                   radial-gradient(ellipse at 30% 20%, rgba(217,160,63,.35), transparent 60%); }
.stage-texture-overlay.tex-fog { opacity:.55;
  background-image:radial-gradient(ellipse 90% 55% at 50% -5%, rgba(180,200,220,.16), transparent 70%),
                   radial-gradient(ellipse 80% 45% at 50% 105%, rgba(180,200,220,.10), transparent 70%); }
.stage-texture-overlay.tex-stars { opacity:.9;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent),
                   radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,.7), transparent),
                   radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.8), transparent),
                   radial-gradient(1px 1px at 40% 75%, rgba(255,255,255,.6), transparent),
                   radial-gradient(2px 2px at 90% 85%, rgba(255,255,255,.75), transparent),
                   radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,.55), transparent),
                   radial-gradient(1px 1px at 33% 50%, rgba(255,255,255,.6), transparent),
                   radial-gradient(1.5px 1.5px at 55% 90%, rgba(255,255,255,.7), transparent);
  background-repeat:no-repeat; }
.stage-texture-overlay.tex-ink { opacity:.5;
  background-image:radial-gradient(circle at 18% 82%, rgba(168,139,250,.22), transparent 50%),
                   radial-gradient(circle at 82% 18%, rgba(0,0,0,.45), transparent 55%); }
@media (prefers-reduced-motion:reduce){ .stage-texture-overlay { transition:none; } }

/* font picker live preview in the sphere editor */
.sp-font-preview { font-size:1.15rem; color:var(--candle); padding:.45rem .6rem; margin:.1rem 0 .3rem; border:1px solid var(--line); border-radius:6px; background:var(--panel); min-height:1.6em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* resume-from-file link on the landing page */
.resume-line { margin:.5rem 0 0; font-size:.85rem; }
.linkish { background:none; border:none; color:var(--veil); cursor:pointer; font:inherit; text-decoration:underline; padding:0; }
.linkish:hover { color:var(--candle); }
/* secondary actions — same shape as the primary, but quiet */
button.secondary { display:block; width:100%; margin-top:.5rem; background:transparent; color:var(--dim); border:1px solid var(--line); text-align:center; }
button.secondary:hover { color:var(--candle); border-color:var(--dim); background:var(--panel-2); }
#btn-demo.secondary { color:var(--lantern); border-color:color-mix(in srgb, var(--lantern) 45%, var(--line)); }
#btn-demo.secondary:hover { color:#1a1408; background:var(--lantern); border-color:var(--lantern); }

/* ── log scroll: hover-reveal scrollbar + edge fade ─────────────────────────
   The default OS scrollbar reads as "browser chrome" and breaks immersion.
   Here the bar is invisible until the pointer is over the log, and the top and
   bottom of the log feather into the dark so text dissolves rather than hitting
   a hard edge. Colours come from the sphere tokens, so it shifts per-sphere. */
.log {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: transparent transparent;    /* hidden until hover (FF) */
  transition: background-color .5s ease, scrollbar-color .3s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%);
}
.log:hover { scrollbar-color: var(--line) transparent; }     /* FF: reveal on hover */
.log::-webkit-scrollbar { width: 9px; }
.log::-webkit-scrollbar-track { background: transparent; }
.log::-webkit-scrollbar-thumb {
  background: transparent; border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
  transition: background-color .3s ease;
}
.log:hover::-webkit-scrollbar-thumb { background: var(--line); background-clip: content-box; }
.log:hover::-webkit-scrollbar-thumb:hover { background: var(--dim); background-clip: content-box; }

/* ── NOTES pad — the sphere-launcher pattern, mirrored to the right edge ───── */
.notes-launcher { position:fixed; right:1rem; bottom:1rem; z-index:47; width:44px; height:44px; border-radius:50%; font-size:1.2rem; padding:0; background:var(--panel-2); border:1px solid var(--veil); color:var(--candle); box-shadow:0 4px 16px rgba(0,0,0,.4); cursor:pointer; }
.notes-launcher:hover { border-color:var(--candle); }
.notes-pop { position:fixed; right:4.5rem; bottom:1rem; z-index:47; width:300px; max-width:calc(100vw - 6rem); max-height:74vh; overflow-y:auto; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:.9rem; box-shadow:0 12px 40px rgba(0,0,0,.5); transform:translateY(8px) scale(.98); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; }
.notes-pop.open { opacity:1; transform:none; pointer-events:auto; }
.np-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.2rem; }
.np-hint { font-size:.72rem; margin:.1rem 0 .6rem; }
.np-list { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.6rem; }
.np-empty { font-size:.8rem; text-align:center; padding:.5rem; }
.np-note { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; }
.np-note.shared { border-color:var(--veil); box-shadow:0 0 10px rgba(168,139,250,.2); }
.np-text { color:var(--candle); font-size:.9rem; white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:.4rem; }
.np-row { display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.np-state { font-size:.68rem; }
.np-btns { display:flex; gap:.3rem; }
.np-new { width:100%; box-sizing:border-box; background:var(--panel); color:var(--candle); border:1px solid var(--line); border-radius:8px; padding:.45rem .55rem; font:inherit; font-size:.88rem; resize:vertical; }
.np-actions { display:flex; gap:.4rem; margin-top:.5rem; }
/* a shared note from someone else, shown quietly in the log */
.log .ev.note-shared { color:var(--dim); font-size:.92rem; }
.log .ev.note-shared .note-tag { font-size:.7rem; border:1px solid var(--veil); color:var(--veil); border-radius:4px; padding:0 .35rem; margin-right:.4rem; }
.np-err { color:var(--danger); font-size:.72rem; margin:.4rem 0 0; min-height:1em; }

/* ── character as presence — visibility pills, epithet, prompt dice ───────── */
.vis-pill { font-size:.62rem; padding:.05rem .4rem; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; white-space:nowrap; }
.vis-pill[data-v="table"] { border-color:var(--lantern); color:var(--lantern); }
.vis-pill[data-v="private"] { border-color:var(--line); color:var(--dim); }
.sheet-epithet { font-size:.82rem; font-style:italic; color:var(--dim); margin-top:.1rem; }
.sheet-epithet-input { width:100%; box-sizing:border-box; margin-top:.25rem; background:var(--panel); color:var(--candle); border:1px solid var(--line); border-radius:6px; padding:.3rem .45rem; font:inherit; font-size:.82rem; font-style:italic; }
.cw-epithet { font-size:.74rem; font-style:italic; color:var(--dim); margin:.1rem 0 .3rem; }
.prompt-dice { font-size:.8rem; margin-right:.5rem; letter-spacing:.04em; }

/* ── the party rail — the people of the table, as presences ───────────────── */
.party-rail { display:flex; flex-direction:column; gap:.55rem; margin-top:1rem; padding:0 .8rem; box-sizing:border-box; }
.gm-rail { width:230px; flex:0 0 230px; padding:.9rem .7rem; margin-top:0; overflow-y:auto; border-left:1px solid var(--line); }
.rail-title { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; opacity:.65; margin:.4rem 0 .15rem; padding-left:.15rem; }
.rail-title.pc { color:var(--lantern); }
.rail-title.npc { color:var(--veil); }
.rail-title:first-child { margin-top:0; }

.rail-card { position:relative; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; overflow:hidden; cursor:pointer;
  transition:border-color .25s, box-shadow .25s, transform .15s, opacity .25s; }
.rail-card:hover { transform:translateY(-1px); }
/* PC: lantern-warm, a left accent stripe */
.rail-card.pc { border-left:3px solid var(--lantern); }
.rail-card.pc:hover { border-color:var(--lantern); box-shadow:0 5px 20px rgba(0,0,0,.35); }
.rail-card.pc.open { border-color:var(--lantern); box-shadow:0 0 24px rgba(217,160,63,.20); }
/* NPC: veil-violet, a distinct dashed-feel stripe + tinted ground */
.rail-card.npc { border-left:3px solid var(--veil); background:var(--panel-2); background:linear-gradient(180deg, color-mix(in srgb, var(--veil) 7%, var(--panel-2)), var(--panel-2)); }
.rail-card.npc:hover { border-color:var(--veil); box-shadow:0 5px 20px rgba(0,0,0,.35); }
.rail-card.npc.open { border-color:var(--veil); box-shadow:0 0 24px rgba(168,139,250,.22); }
.rail-card.dim-card { opacity:.5; } /* GM: an unrevealed NPC, faded */
.rail-card.dim-card:hover { opacity:.85; }

.rail-top { display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem; }
.rail-top .avatar { width:42px; height:42px; flex:0 0 42px; border-radius:50%; box-shadow:0 0 0 1px var(--line); overflow:hidden; }
.rail-top .avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.rail-card.npc .rail-top .avatar { border-radius:8px; box-shadow:0 0 0 1px var(--veil); } /* NPCs squared, PCs round — instant distinction */
.rail-id { min-width:0; flex:1; }
.rail-name { font-size:.95rem; color:var(--candle); font-family:var(--font-display); line-height:1.15; display:flex; align-items:center; gap:.35rem; }
.rail-epithet { font-size:.72rem; font-style:italic; color:var(--dim); margin-top:.12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rail-scene { color:var(--lantern); font-size:.6rem; line-height:1; }   /* ● in-scene dot */
.rail-kind { font-size:.56rem; letter-spacing:.1em; padding:.1rem .3rem; border-radius:4px; flex:0 0 auto; align-self:flex-start; }
.rail-kind.pc { color:var(--lantern); border:1px solid var(--lantern); }
.rail-kind.npc { color:var(--veil); border:1px solid var(--veil); }

.rail-body { padding:.1rem .65rem .6rem; display:flex; flex-direction:column; gap:.22rem; animation:railIn .25s ease; }
.rail-body.hint { font-style:italic; }
@keyframes railIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.rail-field { display:flex; justify-content:space-between; gap:.6rem; font-size:.8rem; border-top:1px solid var(--line); padding-top:.22rem; }
.rail-k { color:var(--dim); }
.rail-v { color:var(--candle); text-align:right; overflow-wrap:anywhere; }
@media (prefers-reduced-motion:reduce){ .rail-card, .rail-body { transition:none; animation:none; } }

/* ── GM voice — a quiet mark so players know when the GM is speaking (as self) ─ */
.ev.gm-voice { border-left:2px solid var(--lantern); padding-left:.6rem; margin-left:-.2rem;
  background:linear-gradient(90deg, color-mix(in srgb, var(--lantern) 6%, transparent), transparent 60%); }
.ev.gm-voice .name { color:var(--lantern); }
.gmtag { font-size:.56rem; letter-spacing:.12em; color:var(--lantern); border:1px solid var(--lantern);
  border-radius:4px; padding:.02rem .28rem; margin-right:.4rem; vertical-align:middle; opacity:.85; }

/* ── header ⋯ menu — everything secondary tucked behind one button ────────── */
.menu-wrap { position:relative; flex:0 0 auto; }
.menu-btn { font-size:1.1rem; line-height:1; padding:.25rem .6rem; }
.menu-pop { position:absolute; top:calc(100% + .5rem); right:0; z-index:60; min-width:210px;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:.5rem;
  display:flex; flex-direction:column; gap:.15rem; box-shadow:0 12px 40px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; transition:opacity .16s, transform .16s; }
.menu-pop.open { opacity:1; transform:none; pointer-events:auto; }
.menu-code, .menu-who { font-size:.72rem; color:var(--dim); padding:.3rem .55rem; }
.menu-code span { color:var(--lantern); letter-spacing:.05em; }
.menu-who { border-bottom:1px solid var(--line); margin-bottom:.2rem; padding-bottom:.45rem; }
.menu-item { text-align:left; background:transparent; border:none; color:var(--candle); font:inherit; font-size:.9rem;
  padding:.45rem .55rem; border-radius:7px; cursor:pointer; transition:background-color .15s; }
.menu-item:hover { background:var(--panel); }
.menu-item.danger { color:#e0786b; margin-top:.2rem; border-top:1px solid var(--line); padding-top:.5rem; border-radius:0 0 7px 7px; }
.menu-item.danger:hover { background:rgba(224,120,107,.12); }

/* ── block-based character sheet (v2) ─────────────────────────────────────── */
.sheet-blocks { display:flex; flex-direction:column; gap:.15rem; margin:.6rem 0; }
.sblock { position:relative; display:flex; align-items:flex-start; gap:.4rem; padding:.25rem .3rem; border-radius:6px; border:1px solid transparent; }
.sblock:hover { background:var(--panel); }
.sblock.dragging { opacity:.5; }
.sblock.drop-target { border-top:2px solid var(--lantern); }
.sb-content { flex:1; min-width:0; }
/* per-block hover controls */
.sb-ctrls { display:flex; align-items:center; gap:.1rem; opacity:0; transition:opacity .12s; flex:0 0 auto; }
.sblock:hover .sb-ctrls { opacity:1; }
.sb-ctrl { font-size:.72rem; padding:.05rem .3rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:4px; cursor:pointer; line-height:1.3; }
.sb-ctrl:hover { color:var(--candle); border-color:var(--dim); }
.sb-vis { border:none; font-size:.8rem; }
.sb-drag { cursor:grab; border:none; color:var(--dim); }
.sb-del:hover { color:#e0786b; border-color:#e0786b; }
/* private vs table marker — a faint left edge */
.sblock.is-table { box-shadow:inset 2px 0 0 color-mix(in srgb, var(--lantern) 55%, transparent); }
.sblock.is-private { box-shadow:inset 2px 0 0 var(--line); }

/* field block */
.sb-frow { display:flex; align-items:baseline; gap:.5rem; }
.sb-flabel { flex:0 0 38%; color:var(--dim); font-size:.85rem; }
.sb-flabel-input { width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px dotted var(--line); color:var(--dim); font:inherit; font-size:.85rem; padding:.1rem 0; }
.sb-fval, .sb-num-input { flex:1; background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--candle); font:inherit; font-size:.92rem; padding:.1rem 0; }
.sb-fval-ro { flex:1; color:var(--candle); font-size:.92rem; }
.sb-fval:focus, .sb-num-input:focus, .sb-flabel-input:focus, .sb-header-input:focus, .sb-note-input:focus, .sb-fval-long:focus { outline:none; border-bottom-color:var(--lantern); }
.sb-fval-long { flex:1; width:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--line); border-radius:5px; color:var(--candle); font:inherit; font-size:.9rem; padding:.35rem .45rem; resize:vertical; line-height:1.45; }
.sb-fval-long-ro { flex:1; color:var(--candle); font-size:.9rem; line-height:1.45; }
.sb-fval-long-ro strong, .sb-note-text strong { color:var(--lantern); }
.sb-fval-num { display:inline-flex; align-items:center; gap:.25rem; flex:1; }
.sb-num-input { width:3.5rem; flex:0 0 auto; text-align:center; }
.sb-step, .sb-pip-adj { width:1.3rem; height:1.3rem; padding:0; line-height:1; font-size:.85rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:4px; cursor:pointer; }
.sb-step:hover, .sb-pip-adj:hover { color:var(--candle); border-color:var(--dim); }
.sb-fval-toggle { width:1.6rem; height:1.6rem; padding:0; border:1px solid var(--line); background:transparent; color:var(--dim); border-radius:5px; cursor:pointer; font-size:.9rem; }
.sb-fval-toggle.on { color:var(--lantern); border-color:var(--lantern); }

/* header / rule / note blocks */
.sb-header-text, .sb-header-input { font-family:var(--font-display); font-size:1.02rem; color:var(--candle); letter-spacing:.03em; }
.sb-header-input { width:100%; box-sizing:border-box; background:transparent; border:none; border-bottom:1px solid var(--line); padding:.15rem 0; }
.sb-header-text { border-bottom:1px solid var(--line); padding-bottom:.15rem; margin-top:.2rem; }
.sb-rule { border:none; border-top:1px solid var(--line); margin:.4rem 0; }
.sb-note-input { width:100%; box-sizing:border-box; background:var(--panel); border:1px solid var(--line); border-radius:5px; color:var(--candle); font:inherit; font-size:.88rem; padding:.35rem .45rem; resize:vertical; line-height:1.45; }
.sb-note-text { color:var(--candle); font-size:.9rem; line-height:1.5; font-family:var(--font-display); }
.sb-note-text em { color:var(--dim); }

/* pips */
.sb-pips-row { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.sb-pips-label { color:var(--dim); font-size:.85rem; }
.sb-pips-labinput { background:transparent; border:none; border-bottom:1px dotted var(--line); color:var(--dim); font:inherit; font-size:.85rem; width:5rem; }
.sb-pips { display:inline-flex; gap:.22rem; align-items:center; }
.pip { width:.85rem; height:.85rem; padding:0; border-radius:50%; border:1px solid var(--dim); background:transparent; cursor:pointer; transition:background-color .1s; }
.pip.on { background:var(--lantern); border-color:var(--lantern); }
.pip:hover { border-color:var(--lantern); }

/* add-block palette */
.sb-palette { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.5rem; padding-top:.5rem; border-top:1px dashed var(--line); }
.sb-add { font-size:.72rem; padding:.2rem .5rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:5px; cursor:pointer; }
.sb-add:hover { color:var(--lantern); border-color:color-mix(in srgb, var(--lantern) 45%, var(--line)); }

/* show-on-card toggle + rail card summary */
.sb-card { border:none; font-size:.8rem; filter:grayscale(1) opacity(.45); }
.sb-card.on { filter:none; }
.rail-summary { display:flex; flex-wrap:wrap; gap:.3rem; padding:.3rem .6rem .1rem; }
.rail-chip { font-size:.72rem; color:var(--candle); background:color-mix(in srgb, var(--lantern) 10%, transparent); border:1px solid color-mix(in srgb, var(--lantern) 30%, var(--line)); border-radius:5px; padding:.08rem .35rem; }
.rail-chip-k { color:var(--dim); }
.rail-chip-v { color:var(--lantern); font-weight:600; }
.rail-section { font-family:var(--font-display); font-size:.8rem; color:var(--dim); margin:.3rem 0 .1rem; border-bottom:1px solid var(--line); }
.rail-note { font-size:.78rem; color:var(--dim); font-style:italic; margin:.15rem 0; }

/* ── the full-screen paper sheet (conjure & fold) ─────────────────────────── */
.sheet-conjure { flex:0 0 auto; font-size:1rem; padding:.1rem .4rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:5px; cursor:pointer; }
.sheet-conjure:hover { color:var(--lantern); border-color:color-mix(in srgb, var(--lantern) 45%, var(--line)); }
.paper-overlay { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center;
  padding:4vh 2vw; overflow-y:auto; background:rgba(6,5,9,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s ease; }
.paper-overlay.open { opacity:1; }
.paper-sheet { width:min(760px, 96vw); margin:auto 0; background:var(--panel-2);
  border:1px solid color-mix(in srgb, var(--lantern) 22%, var(--line)); border-radius:6px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px color-mix(in srgb, var(--candle) 5%, transparent);
  padding:1.4rem 1.6rem 1.8rem; position:relative;
  transform:translateY(14px) scale(.985) rotateX(3deg); transform-origin:top center; opacity:.4; transition:transform .26s ease, opacity .26s ease; }
.paper-overlay.open .paper-sheet { transform:none; opacity:1; }
/* a faint paper grain + a warm edge, tinted by the sphere */
.paper-sheet::before { content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--lantern) 7%, transparent), transparent 60%);
  mix-blend-mode:screen; }
.paper-bar { display:flex; justify-content:flex-end; margin-bottom:.6rem; }
.paper-close { font-size:.78rem; }
/* inside the paper, the sheet-card sheds its own chrome and breathes */
.paper-inner .sheet-card { background:transparent; border:none; padding:0; box-shadow:none; max-width:none; }
.paper-inner .sheet-head { margin-bottom:1rem; }
.paper-inner .sheet-blocks { gap:.25rem; }
.paper-inner .sb-frow { font-size:1rem; }
.paper-inner .sb-header-text, .paper-inner .sb-header-input { font-size:1.2rem; }
.paper-inner .sheet-name-input, .paper-inner .sheet-name { font-size:1.3rem; }

/* open-full-sheet affordance on rail cards */
.rail-open { flex:0 0 auto; font-size:.85rem; padding:.05rem .35rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:4px; cursor:pointer; opacity:0; transition:opacity .12s; }
.rail-card:hover .rail-open { opacity:1; }
.rail-open:hover { color:var(--lantern); border-color:color-mix(in srgb, var(--lantern) 45%, var(--line)); }

/* template picker */
.tpl-picker { margin:.6rem 0; }
.tpl-row { display:flex; gap:.4rem; }
.tpl-select { flex:1; font:inherit; font-size:.82rem; padding:.3rem .4rem; background:var(--panel); color:var(--candle); border:1px solid var(--line); border-radius:6px; }
.tpl-blurb { font-size:.74rem; margin-top:.3rem; line-height:1.4; }

/* ── out-of-character: a small circle (stacked above the sphere), expands up ── */
.ooc-dock { position:fixed; left:1rem; bottom:4.2rem; z-index:48; }
.ooc-launcher { position:relative; width:44px; height:44px; border-radius:50%; padding:0; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:0 4px 16px rgba(0,0,0,.4);
  cursor:pointer; transition:border-color .15s, box-shadow .2s; }
.ooc-launcher:hover { border-color:var(--veil); }
.ooc-ico { filter:grayscale(.2); }
.ooc-badge { position:absolute; top:-4px; right:-4px; background:var(--lantern); color:#1a1408; font-size:.6rem; font-weight:700;
  border-radius:999px; padding:.05rem .32rem; min-width:.9rem; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.ooc-dock.has-unread .ooc-launcher { border-color:color-mix(in srgb, var(--veil) 70%, var(--line)); }
@keyframes ooc-pulse { 0%,100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--veil) 35%, transparent), 0 0 14px -4px var(--veil);} 50%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--veil) 55%, transparent), 0 0 22px -2px var(--veil);} }
.ooc-dock.has-unread .ooc-launcher { animation:ooc-pulse 2.4s ease-in-out infinite; }

.ooc-pop { position:absolute; left:0; bottom:54px; width:300px; max-width:calc(100vw - 2rem);
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 14px 44px rgba(0,0,0,.5); display:flex; flex-direction:column;
  transform:translateY(8px) scale(.97); transform-origin:bottom left; opacity:0; pointer-events:none; transition:opacity .16s, transform .16s; }
.ooc-pop.open { opacity:1; transform:none; pointer-events:auto; }
.ooc-pop-head { display:flex; align-items:center; justify-content:space-between; padding:.5rem .7rem; border-bottom:1px solid var(--line); }
.ooc-pop-title { font-family:var(--font-display); font-size:.8rem; letter-spacing:.04em; color:var(--candle); }
.ooc-pop-close { font-size:.74rem; }
.ooc-log { max-height:44vh; overflow-y:auto; padding:.5rem .65rem; display:flex; flex-direction:column; gap:.3rem; font-size:.85rem; }
.ooc-log:empty::after { content:"Nothing said yet."; color:var(--dim); font-size:.78rem; font-style:italic; }
.ooc-line { line-height:1.4; }
.ooc-who { color:var(--veil); font-weight:600; margin-right:.4rem; }
.ooc-said { color:var(--candle); }
.ooc-compose { display:flex; gap:.35rem; padding:.5rem .65rem; border-top:1px solid var(--line); }
.ooc-input { flex:1; font:inherit; font-size:.82rem; background:var(--panel); border:1px solid var(--line); border-radius:6px; color:var(--candle); padding:.3rem .45rem; }
.ooc-input:focus { outline:none; border-color:var(--veil); }
.ooc-send { flex:0 0 auto; }
@media (max-width:720px){ .ooc-pop { width:calc(100vw - 2rem); } }

/* ── callout cards — special, emphasised beats (chapter, warning, etc.) ────── */
.ev.callout-line { display:block; margin:.7rem 0; }
.callout-card { display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1.05rem; border-radius:10px;
  border:1px solid var(--line); background:var(--panel-2); position:relative; overflow:hidden;
  animation:callout-in .5s cubic-bezier(.2,.8,.2,1) both; }
.callout-ico { font-size:1.4rem; line-height:1.3; flex:0 0 auto; }
.callout-text { flex:1; min-width:0; }
.callout-title { font-family:var(--font-display); font-size:1.18rem; letter-spacing:.02em; color:var(--candle); line-height:1.25; }
.callout-body { font-size:.92rem; color:var(--dim); margin-top:.2rem; line-height:1.5; }
.callout-body strong { color:var(--candle); }
@keyframes callout-in { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }

/* tones */
.callout-card.tone-chapter { border-color:color-mix(in srgb, var(--candle) 18%, var(--line)); background:linear-gradient(180deg, color-mix(in srgb, var(--candle) 5%, var(--panel-2)), var(--panel-2)); text-align:center; }
.callout-card.tone-chapter { flex-direction:column; align-items:center; gap:.3rem; padding:1.2rem 1rem; }
.callout-card.tone-chapter .callout-ico { color:var(--lantern); opacity:.8; }
.callout-card.tone-chapter .callout-title { font-size:1.45rem; letter-spacing:.06em; }

.callout-card.tone-warning { border-color:color-mix(in srgb, #e0632f 55%, var(--line)); }
.callout-card.tone-warning .callout-ico, .callout-card.tone-warning .callout-title { color:#f0884f; }
.callout-card.tone-warning::before { content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  box-shadow:inset 0 0 24px -6px #e0632f; animation:callout-pulse 2s ease-in-out infinite; }
@keyframes callout-pulse { 0%,100%{ opacity:.35; } 50%{ opacity:.75; } }

.callout-card.tone-triumph { border-color:color-mix(in srgb, var(--lantern) 60%, var(--line)); background:linear-gradient(180deg, color-mix(in srgb, var(--lantern) 9%, var(--panel-2)), var(--panel-2)); }
.callout-card.tone-triumph .callout-ico, .callout-card.tone-triumph .callout-title { color:var(--lantern); }
.callout-card.tone-triumph::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--lantern) 16%, transparent), transparent 70%);
  animation:callout-shimmer 2.6s ease-in-out infinite; }
@keyframes callout-shimmer { 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.callout-card.tone-grief { border-color:color-mix(in srgb, var(--veil) 30%, var(--line)); filter:saturate(.7); }
.callout-card.tone-grief .callout-ico { color:var(--veil); opacity:.7; }
.callout-card.tone-grief .callout-title { color:color-mix(in srgb, var(--candle) 80%, var(--veil)); font-style:italic; }
.callout-card.tone-grief { animation:callout-in 1.1s ease both; }

.callout-card.tone-revelation { border-color:color-mix(in srgb, var(--veil) 55%, var(--line)); }
.callout-card.tone-revelation .callout-ico, .callout-card.tone-revelation .callout-title { color:var(--veil); }
.callout-card.tone-revelation::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:10px;
  background:radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--veil) 14%, transparent), transparent 70%); }

.callout-card.tone-info { border-color:color-mix(in srgb, var(--lantern) 30%, var(--line)); }
.callout-card.tone-info .callout-ico { color:var(--lantern); opacity:.8; }

/* teleprompter preview chip for callouts */
.pb-callout { color:var(--lantern); }

/* new blank prep button row */
.prep-load-btns { display:flex; gap:.4rem; align-items:center; }
.prep-load-btns .prep-add { flex:0 0 auto; }
.prep-new { flex:0 0 auto; cursor:pointer; }

/* ── redesigned composer: voice + audience + beat-action verbs ────────────── */
.comp-top { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.5rem; }
.comp-top .voicerow { margin:0; display:flex; align-items:center; gap:.5rem; }
.comp-top #targets { margin:0; }
.beatrow { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin-bottom:.5rem; padding-top:.5rem; border-top:1px solid var(--line); }
.beatrow-label { font-family:var(--font-display); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-right:.3rem; }
.beat { font-size:.78rem; padding:.28rem .6rem; background:transparent; border:1px solid var(--line); color:var(--dim); border-radius:7px; cursor:pointer; transition:color .15s, border-color .15s, background-color .15s; }
.beat:hover { color:var(--candle); border-color:var(--dim); }
.beat.on { color:var(--lantern); border-color:var(--lantern); background:color-mix(in srgb, var(--lantern) 10%, transparent); }
.beat-extra { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem; }
.be-label { font-size:.72rem; color:var(--dim); font-family:var(--mono, monospace); }
.be-select, .be-input { font:inherit; font-size:.84rem; background:var(--panel); color:var(--candle); border:1px solid var(--line); border-radius:6px; padding:.3rem .45rem; }
.be-input { width:6rem; }
.be-textarea { width:100%; box-sizing:border-box; font:inherit; font-size:.86rem; background:var(--panel); color:var(--candle); border:1px solid var(--line); border-radius:6px; padding:.5rem; resize:vertical; line-height:1.4; font-family:var(--mono, monospace); }
.beat-cancel { flex:0 0 auto; }

/* ── Markdown-in-Reverie reference (overlay) ───────────────────────── */
.mdref,.mdref p,.mdref li{font-family:"EB Garamond",Georgia,serif}
.mdref h3{margin:1.5em 0 .2em}
.mdref .row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin:.4em 0 0}
@media(max-width:540px){.mdref .row{grid-template-columns:1fr}}
.mdref .lbl{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#8a6d33;margin:0 0 6px}
.mdref .type{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.75;color:#b9b1cf;background:rgba(0,0,0,.28);border:1px solid rgba(217,164,65,.16);border-radius:7px;padding:10px 13px}
.mdref .out{background:rgba(0,0,0,.28);border:1px solid rgba(217,164,65,.16);border-radius:7px;padding:10px 13px}
.mdref .out>*{margin:0}
.mdref .out>*+*{margin-top:.4em}
.mdref .out blockquote{border-left:2px solid #7d6231;margin:0;padding-left:12px;color:#9a917f;font-style:italic}
.mdref .out ul,.mdref .out ol{padding-left:20px;margin:0}
.mdref .out a{color:#a691d4;text-underline-offset:3px}
.mdref .out h4{font-family:"IM Fell English",serif;font-weight:400;color:#e7c277;font-size:20px;margin:0;line-height:1.2}
.mdref .gloss{color:#a691d4;font-style:italic;margin:.5em 0 0;font-size:.95em}
.mdref .gloss::before{content:"\263E  ";color:#7d6231;font-style:normal}
.mdref .unspoken li{margin:.5em 0}
.mdref hr{border:0;height:1px;margin:1.6em 0;background:linear-gradient(90deg,transparent,rgba(217,164,65,.35),transparent)}