:root{
  --bg:#14101d; --panel:#1e1830; --panel2:#262040; --line:#3a3058;
  --txt:#e8e2f4; --muted:#9d93bd; --acc:#b48cff; --gold:#e8b34b;
  --dlg:#7fe3ff; --me:#b9a8e8; --sys:#8a7fb0;
  --input:#100c1a; --deep:#2c2547; --warn:#3a2b12; --faint:#ffffff10; --err:#ff7b7b;
  color-scheme:dark;
}
/* Dark mode: deeper, near-black surfaces. Regular mode is the :root default above. */
html[data-theme="dark"]{
  --bg:#07060c; --panel:#0e0c17; --panel2:#151222; --line:#272038;
  --txt:#ece7f7; --muted:#a094c2; --acc:#b48cff; --gold:#e8b34b;
  --dlg:#7fe3ff; --me:#c0b0ea; --sys:#8a7fb0;
  --input:#0a0812; --deep:#171225; --warn:#241a0c; --faint:#ffffff10; --err:#ff7b7b;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f1ede1; --panel:#fffdf7; --panel2:#e7dfc9; --line:#cfc4a6;
  --txt:#2b2540; --muted:#6e6484; --acc:#6a4fd0; --gold:#96690f;
  --dlg:#0a6e8e; --me:#5b3fb8; --sys:#6e6484;
  --input:#ffffff; --deep:#e0d7bc; --warn:#f0dfb8; --faint:#2b254014; --err:#b3261e;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,sans-serif;
  touch-action:manipulation} /* no double-tap zoom; pinch still works (iOS won't let sites disable it) */
.hidden{display:none!important}
.view{min-height:100vh}
.muted{color:var(--muted)} .small{font-size:.85em} .err{color:var(--err);min-height:1.2em}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
code{background:#0006;padding:1px 6px;border-radius:4px}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--txt);
  padding:8px 14px;border-radius:8px;font-size:14px}
button.primary{background:var(--acc);border-color:var(--acc);color:#17122b;font-weight:700}
button.ghost{background:transparent}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{background:var(--input);border:1px solid var(--line);color:var(--txt);
  padding:9px 12px;border-radius:8px;font-size:14px;width:100%}
@media (max-width:768px){
  /* iOS zooms in on focus for any input under 16px — keep fields at 16px on phones */
  input,select,textarea{font-size:16px}
}
input[type=color]{width:52px;height:34px;padding:2px;background:transparent;cursor:pointer}
textarea{min-height:70px;resize:vertical}

/* auth */
#view-auth{display:flex;align-items:center;justify-content:center}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:32px;width:min(400px,92vw);display:flex;flex-direction:column;gap:12px;text-align:center}
.tabs{display:flex;gap:8px}.tab{flex:1}.tab.active{background:var(--acc);color:#17122b;font-weight:700}

/* dashboard */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5;flex-wrap:wrap}
.dash{max-width:1000px;margin:0 auto;padding:24px 20px calc(96px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
/* v0.50: dashboard tab pages + fixed bottom tab bar (dashboard view only —
   the bar lives inside #view-dash, so rooms never show it). Content gets
   bottom room from .dash's padding so the last cards and the version
   footer clear the fixed bar. v0.51: the bar's own bottom padding adds
   12px on top of the safe area so the tappable row sits visibly above the
   iPhone home indicator (its background still reaches the screen edge). */
.tab-page{display:flex;flex-direction:column;gap:8px}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--panel);border-top:1px solid var(--line);
  padding-bottom:calc(env(safe-area-inset-bottom) + 12px)}
.tabbtn{flex:1;background:transparent;border:0;border-radius:0;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:7px 2px 6px;font-size:11px;position:relative;-webkit-tap-highlight-color:transparent}
.tabbtn-icon{font-size:20px;line-height:1.25}
.tabbtn.active{color:var(--gold)}
.tabbtn.active .tabbtn-icon{filter:drop-shadow(0 0 6px rgba(232,179,75,.45))}
.tab-badge{position:absolute;top:3px;left:calc(50% + 4px);min-width:19px;height:19px;
  padding:0 5px;border-radius:10px;background:linear-gradient(135deg,var(--gold),#d99a2b);
  color:#241a08;font-weight:800;font-size:11px;line-height:19px;text-align:center}
/* Dashboard hero banner: wide art, dark gradient, centered logo lockup. */
.hero{position:relative;border-radius:16px;overflow:hidden;margin:4px 0 12px;
  border:1px solid var(--line);height:300px}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;text-align:center;padding:22px 26px;
  background:linear-gradient(rgba(10,6,20,.55) 0%,rgba(10,6,20,.35) 45%,rgba(10,6,20,.88) 100%)}
.hero-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:112px;height:auto;mix-blend-mode:screen;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.hero-text{position:relative;z-index:1}
.hero-overlay h1{margin:0;font-family:'Cinzel',Georgia,'Times New Roman',serif;
  font-weight:600;font-size:2.1em;letter-spacing:2.5px;color:var(--gold);
  text-shadow:0 0 16px rgba(168,110,255,.55),0 2px 10px rgba(0,0,0,.85)}
.hero-overlay p{margin:4px 0 0;color:#efe9fb;font-size:1.05em;
  text-shadow:0 1px 8px rgba(0,0,0,.85)}
@media (max-width:768px){
  .hero{height:220px;border-radius:12px}
  .hero-overlay{padding:14px 16px}
  .hero-mark{width:72px}
  .hero-overlay h1{font-size:1.5em;letter-spacing:1.5px}
  .hero-overlay p{font-size:.92em}
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:8px 0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;
  display:flex;flex-direction:column;gap:8px;position:relative}
/* v0.46: unread-activity badge on dashboard room cards — gold pill, top-right. */
.unread-badge{position:absolute;top:10px;right:10px;min-width:24px;height:24px;
  padding:0 7px;border-radius:12px;background:linear-gradient(135deg,var(--gold),#d99a2b);
  color:#241a08;font-weight:800;font-size:13px;line-height:24px;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
/* v0.49 friends: header count pill (static variant of the card badge),
   presence dots, and spacing for dashboard invite/request cards. */
.count-badge{display:inline-block;min-width:24px;height:24px;padding:0 7px;border-radius:12px;
  background:linear-gradient(135deg,var(--gold),#d99a2b);color:#241a08;font-weight:800;
  font-size:13px;line-height:24px;text-align:center;vertical-align:middle}
.presence-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.presence-dot.on{background:#3ddc74;box-shadow:0 0 6px rgba(61,220,116,.8)}
#invites-list .card, #friend-reqs .card{margin:8px 0}
.card img.portrait{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:#000}
.card img.story-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000}
/* Freeform tile stands apart from story tiles in every theme: dashed gold border,
   subtle purple wash (both drawn from theme vars), gold title. */
.card.freeform{border:1px dashed var(--gold);position:relative;overflow:hidden}
.card.freeform::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background:linear-gradient(135deg,var(--acc),transparent 65%)}
.card.freeform>*{position:relative}
.card.freeform h4{color:var(--gold)}
.card h4{margin:0;padding-right:36px}/* v0.46: room for the unread badge */.card .row{display:flex;gap:6px;flex-wrap:wrap}
/* v0.43: story-card footer bottom-justified so uneven descriptions don't
   stagger the players/dropdown/button block across cards. */
.card-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.statline{font-size:.85em;color:var(--muted)}
/* v0.42 PWA install nudge — purple/gold card, dashboard only. */
.install-card{background:var(--panel);border:1px solid var(--gold);border-radius:12px;
  padding:14px 16px;margin:4px 0 16px;position:relative;overflow:hidden}
.install-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:linear-gradient(135deg,var(--acc),transparent 65%)}
.install-card>*{position:relative}
.install-title{font-weight:700;color:var(--gold);margin-bottom:4px}
.install-body p{margin:6px 0 10px}
.install-body .row{display:flex;gap:8px;flex-wrap:wrap}
.locked{opacity:.85;border-style:dashed}
/* v0.43: empty character-slot cards — dashed, centered +, replaces the old bar */
.card.slot-empty{border:2px dashed var(--line);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;text-align:center;min-height:180px;color:var(--muted)}
.card.slot-empty:hover{border-color:var(--gold);color:var(--gold)}
.card.slot-empty .slot-plus{font-size:3em;line-height:1}
.newchar{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:20px}
.newchar summary{cursor:pointer;font-weight:700}
.form-grid{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.stats label{display:flex;flex-direction:column;font-size:.75em;color:var(--muted);gap:4px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.skillgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;font-size:.85em}
.skillgrid label{display:flex;gap:6px;align-items:center;cursor:pointer}
.skillgrid input{width:auto}
.joinrow{display:flex;gap:10px;max-width:560px}
.joinrow input{max-width:180px}.joinrow select{max-width:200px}

/* room: unified chronological log (narrative + rolls + chat, one scroll) */
#view-room{display:flex;flex-direction:column;height:100dvh}
#view-room.hidden{display:none}
#view-room .topbar{flex:none}
.room{flex:1;min-height:0;display:flex;flex-direction:column}
.mode-strip{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 20px;background:var(--panel);border-bottom:1px solid var(--line);
  font-size:.85em;color:var(--muted)}
.mode-strip .mode-actions{display:flex;gap:8px;flex:none}
.mode-strip button{padding:4px 10px;font-size:12px}
.stakes-line{flex:none;font-size:.85em;color:var(--warn,#d8a);white-space:nowrap}
.end-entry.end-success{border:1px solid var(--gold,#c9a227)}
.end-entry.end-failure{border:1px solid #a33;background:rgba(120,20,20,.15)}
.log{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 28px;display:flex;
  flex-direction:column;gap:14px;width:100%;max-width:780px;margin:0 auto}
.composer{flex:none;background:var(--panel);border-top:1px solid var(--line)}
.turn-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 20px;background:var(--panel);border-top:1px solid var(--line);
  font-size:.85em;color:var(--muted)}
.turn-bar button{padding:4px 12px;font-size:12px}
.turn-bar.my-turn{box-shadow:inset 3px 0 0 var(--acc)}
.composer .dicebar{border-top:0}

/* scene entries in the log */
.scene{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.scene-title{margin:0 0 6px;font-size:1.05em}
.scene .node-text p{margin:.6em 0}
.scene.old{background:transparent;border:0;padding:0}
.scene-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:10px;text-align:left;background:var(--panel)}
.scene-body{margin-top:8px}
.choice-group{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.decided{margin-top:10px;padding:8px 12px;background:var(--faint);border-radius:8px;font-size:.92em}
.beat-pause{margin-top:10px;padding:12px 14px;background:var(--deep);border:1px solid var(--acc);
  border-radius:10px;display:flex;flex-direction:column;gap:10px}
.beat-pause.slim{flex-direction:row;align-items:center;justify-content:space-between;
  padding:8px 12px;font-size:.92em}
.vote-entry{background:var(--deep);border:1px solid var(--acc);border-radius:10px;padding:12px;
  display:flex;flex-direction:column;gap:8px}
.end-entry{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--deep);
  color:var(--muted);font-size:.9em;text-align:center}
.npc{margin:.5em 0;padding:8px 12px;background:var(--faint);border-left:3px solid var(--acc);border-radius:0 8px 8px 0}
.npc b{color:var(--acc)}
.choice{text-align:left;padding:10px 12px}
.choice .dc{color:var(--gold);font-size:.85em}
.story-actions{display:flex;gap:8px}
.msg{display:flex;gap:10px;align-items:flex-start}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:#000;border:1px solid var(--line)}
.avatar.none{display:flex;align-items:center;justify-content:center;color:var(--muted)}
.msg .body{flex:1;min-width:0}
.msg .who{font-weight:700;font-size:.9em}
.msg .who .kindtag{font-weight:400;font-size:.75em;color:var(--muted);margin-left:6px}
/* v0.48: edited-message tag + the tap-to-edit offer under your own message */
.msg .edited-tag{color:var(--muted);font-size:.78em;font-style:italic;white-space:nowrap}
#msg-edit-offer{flex:0 0 100%;margin:2px 0 2px 50px}
.msg{flex-wrap:wrap}
.msg.me .body{color:var(--me);font-style:italic}
.msg.yell .body strong{letter-spacing:.02em}
.msg .dlg{color:var(--dlg)}
.msg.roll .body{background:var(--faint);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;font-family:ui-monospace,monospace}
.msg.whisper .body{border:1px dashed var(--acc);border-radius:8px;padding:6px 10px}
.msg.ooc .body{color:var(--muted);font-size:.92em}
.msg.ooc .ooc-text{font-style:italic}
.premise-panel{margin:0 12px 8px;padding:8px 12px;background:var(--faint);
  border:1px solid var(--line);border-radius:8px;font-size:.9em}
.premise-panel .premise-text{white-space:pre-wrap;margin-bottom:6px}
/* v0.48: meet phase panel — the story's meet cue above the log while the
   party introduces themselves; host begins the adventure from here. */
.meet-panel{margin:0 12px 8px;padding:12px 14px;background:var(--faint);
  border:1px solid var(--gold);border-radius:8px}
.meet-panel h3{margin:0 0 6px;font-family:Georgia,'Times New Roman',serif;font-size:1.05em}
.meet-panel p{margin:0 0 10px;line-height:1.5;white-space:pre-wrap}
.meet-panel #meet-action{min-height:34px;display:flex;align-items:center}
.msg.system{justify-content:center;color:var(--sys);font-size:.9em;font-style:italic}
.msg.system .body{text-align:center;flex:none;max-width:90%}
/* Narrative roll outcome: a distinct story beat between the roll line and the
   next prompt — parchment-tinted panel with a gold edge, serif italic voice. */
.msg.story{justify-content:center}
.msg.story .body{flex:none;max-width:92%;background:var(--faint);border-left:3px solid var(--gold);
  border-radius:0 8px 8px 0;padding:8px 12px;font-family:Georgia,'Times New Roman',serif;
  font-style:italic;font-size:.95em;line-height:1.45}
.msg.story .story-mark{font-style:normal;margin-right:2px}
.dicebar{display:flex;gap:6px;padding:8px 12px;border-top:1px solid var(--line);
  background:var(--panel);flex-wrap:wrap;align-items:center}
.dicebar button{padding:6px 10px;font-size:13px}
.dicebar select{width:auto}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel);
  align-items:flex-end}
/* v0.47: static mode prefix inside the input + auto-growing textarea.
   The wrap carries the input chrome (border/bg); the textarea itself is
   borderless so the gold prefix token reads as part of the box. */
.chat-text-wrap{flex:1 1 auto;min-width:0;display:flex;align-items:flex-start;gap:7px;
  background:var(--input);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.chat-text-wrap:focus-within{border-color:var(--acc)}
.chat-prefix{color:var(--gold);opacity:.8;font-weight:600;white-space:nowrap;
  line-height:1.45;user-select:none;flex:none}
.chat-prefix.hidden{display:none}
.chat-input #chat-text{flex:1 1 auto;min-width:0;background:transparent;border:0;border-radius:0;
  padding:0;width:auto;min-height:23px;max-height:120px;resize:none;overflow-y:auto;
  line-height:1.45;font-family:inherit}
#btn-menu{font-size:20px;line-height:1;padding:6px 12px}
/* v0.44: icon-only mode button + context bar above the input */
.mode-btn{flex:0 0 44px;width:44px;height:44px;font-size:1.35em;line-height:1;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2,rgba(255,255,255,.04));
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.mode-btn.tint-gold{border-color:#c9a227;box-shadow:0 0 8px rgba(201,162,39,.35)}
.mode-btn.tint-gray{border-color:#8a8a96;box-shadow:0 0 8px rgba(138,138,150,.3)}
.mode-btn.tint-red{border-color:#e05252;box-shadow:0 0 8px rgba(224,82,82,.35)}
.mode-btn.tint-violet{border-color:#9a6ee8;box-shadow:0 0 8px rgba(154,110,232,.4)}
.chat-context{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 14px;font-size:.82em;color:var(--gold,#d8b45a);background:rgba(0,0,0,.28);
  border-top:1px solid var(--line);white-space:nowrap;overflow:hidden}
.chat-context.hidden{display:none}
.chat-context button{background:none;border:none;color:var(--muted,#999);font-size:1.05em;
  cursor:pointer;padding:0 2px;line-height:1}
.mode-sheet{display:flex;flex-direction:column;gap:6px}
.mode-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.mode-row.active{border-color:var(--acc)}
.mode-row-icon{font-size:1.5em;flex:0 0 auto}
.mode-row-text{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.mode-row-check{color:var(--acc);font-size:1.2em;flex:0 0 auto}
/* v0.45 emote example: gold name (automatic) + standard-color action (typed) */
.mode-row-example{display:block;margin-top:3px;font-size:.92em}
.mode-ex-name{color:var(--gold);font-weight:600}
.mode-ex-action{color:var(--txt)}
/* v0.43 toast */
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(10px);
  background:#222;color:#fff;border:1px solid var(--line);border-radius:10px;
  padding:8px 14px;font-size:.9em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* v0.43 invite: freeform premise shown prominently */
.premise-box{border:1px solid var(--gold);border-radius:10px;padding:10px 12px;margin:8px 0;background:rgba(0,0,0,.15)}
.premise-box p{margin:6px 0 2px}
/* tap-to-whisper: names + avatars in chat */
.msg .who[data-wuser],.msg .avatar[data-wuser]{cursor:pointer}
.msg .who[data-wuser]:hover{text-decoration:underline}
.players{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.player{display:flex;gap:6px;align-items:center;font-size:.85em;color:var(--muted)}
.player img{width:26px;height:26px;border-radius:50%;object-fit:cover}
.player[data-whisper]{cursor:pointer}
.player[data-whisper]:hover{color:var(--text)}
.party-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.party-row:last-child{border-bottom:0}
.party-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.party-row .who{flex:1;min-width:0}
.party-row .who strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.party-row .who span{font-size:.8em;color:var(--muted)}
.party-row[data-whisper]{cursor:pointer}
.reconnect-pill{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:999;
  background:var(--warn);color:var(--txt);border:1px solid var(--gold);border-radius:20px;
  padding:6px 16px;font-size:.85em;box-shadow:0 2px 12px #0008}
.timerbar{height:6px;background:var(--faint);border-radius:3px;margin:6px 0 2px;overflow:hidden}
.timerbar>div{height:100%;background:var(--gold);border-radius:3px;transition:width .5s linear}
.puzzle{background:var(--panel2);border:1px solid var(--gold);border-radius:10px;padding:10px 12px;margin:8px 0}
.puzzle.solved{border-color:var(--acc)}
.puzzle p{margin:6px 0}
.pz-steps{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.pz-steps button{font-size:1.4em;padding:6px 10px}
.hintline{margin:6px 0;color:var(--gold)}
@media (max-width:800px){.log{padding:12px 12px 24px}.mode-strip{padding:7px 12px}}

/* inventory / vendor / crafting */
.inv-box { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); }
.inv-box summary { cursor: pointer; font-weight: 600; }
.inv-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.inv-item { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; background: var(--panel2); font-size: 0.9em; }
.vendor { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--warn); }
.vendor em { color: #c9a86a; }
.stock { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.stock-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stock-row button { white-space: nowrap; }
.choice:disabled { opacity: 0.45; cursor: not-allowed; }

/* room header icon buttons */
.room-right{display:flex;align-items:center;gap:10px}
.iconbar{display:flex;align-items:center;gap:2px}
.icon-btn{background:transparent;border:0;font-size:20px;line-height:1;padding:8px;border-radius:8px;cursor:pointer}
.icon-btn:hover{background:var(--faint)}
.icon-btn:active{transform:scale(.94)}
.locked-stats{background:var(--faint);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.modal-ov{position:fixed;inset:0;background:#000a;display:flex;align-items:center;
  justify-content:center;z-index:100;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  max-width:540px;width:100%;max-height:88vh;overflow-y:auto;padding:18px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.codebig{font-size:2.2em;letter-spacing:.2em;text-align:center;background:#0006;
  border:1px dashed var(--line);border-radius:10px;padding:14px;margin:12px 0;
  font-family:ui-monospace,monospace}

/* point buy + proficiency chips */
.pb{display:flex;flex-direction:column;gap:6px}
.pb-row{display:grid;grid-template-columns:44px 34px 30px 34px 1fr;gap:6px;
  align-items:center;background:#ffffff06;border-radius:8px;padding:4px 8px}
.pb-name{font-weight:700;font-size:.8em;color:var(--muted)}
.pb-row button{padding:4px 0}
.pb-base{text-align:center;font-weight:700}
.pb-final{font-size:.88em;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border-radius:999px}
.chip.sel{background:var(--acc);border-color:var(--acc);color:#17122b;font-weight:700}
.portraitprev{width:72px;height:72px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.silrow{display:flex;gap:8px;margin-top:6px}
.silopt{width:64px;height:64px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent}
.silopt:hover{border-color:var(--line)}
.silopt.sel{border-color:var(--gold,#c9a227)}

/* Brand lockup: talking-die logo next to the Elsewhere RP wordmark */
.brand-logo{width:1.35em;height:1.35em;vertical-align:-0.28em;border-radius:7px}

/* v29 condition chips: sticky setbacks shown on party rows, roller ballot, sheets */
.cond-chip{display:inline-block;font-size:.72em;line-height:1.5;padding:1px 8px;margin:2px 2px 0 0;
  border:1px solid var(--warn,#a86b1e);border-radius:999px;color:var(--text);background:rgba(168,107,30,.14);
  white-space:nowrap;cursor:help}
.cond-row{display:block;margin-top:2px}

/* v32: BG3-style dice roll overlay. Centered tumbling d20(s), DC above, tap to skip. */
#dice-overlay{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;background:rgba(10,6,18,.78);cursor:pointer;
  animation:dice-ov-in .25s ease-out}
@keyframes dice-ov-in{from{opacity:0}to{opacity:1}}
#dice-overlay.fade{opacity:0;transition:opacity .3s}
.dice-title{font-size:1.05em;color:var(--txt);text-align:center;padding:0 24px}
.dice-dc{font-size:1.6em;font-weight:800;color:var(--gold);letter-spacing:.06em}
.dice-row{display:flex;gap:22px;align-items:center;justify-content:center;margin:6px 0}
.die-svg{width:104px;height:104px;overflow:visible}
.die-face{fill:#241a38;stroke:var(--gold);stroke-width:3}
.die-facet{fill:none;stroke:#7a5fa0;stroke-width:1.4;opacity:.55}
.die-num{fill:#f5eeda;font-size:34px;font-weight:800;text-anchor:middle}
.die-svg.tumbling{animation:die-tumble .55s linear infinite;transform-origin:60px 60px}
@keyframes die-tumble{
  0%{transform:rotate(0deg) translateY(0)}
  25%{transform:rotate(130deg) translateY(-12px)}
  50%{transform:rotate(250deg) translateY(0)}
  75%{transform:rotate(380deg) translateY(-12px)}
  100%{transform:rotate(500deg) translateY(0)}
}
.die-svg.kept .die-face{stroke:#ffe27a;filter:drop-shadow(0 0 14px rgba(232,179,75,.75))}
.die-svg.dropped{opacity:.32;filter:grayscale(.6)}
.dice-result{font-size:1.25em;font-weight:800;min-height:1.6em;text-align:center;padding:0 24px}
.dice-result.win{color:#7ee2a8}
.dice-result.lose{color:#ef8a8a}
.dice-hint{font-size:.75em;color:var(--muted)}
@media (prefers-reduced-motion: reduce){
  .die-svg.tumbling{animation:none}
  #dice-overlay{animation:none}
}

/* v32: dashboard version footer */
.version-footer{text-align:center;padding:18px 12px 26px;color:var(--muted);font-size:.8em}

/* v33: cinematic combat panel */
#combat-panel{border:2px solid #a33;border-radius:12px;padding:12px;margin:10px 0;background:rgba(120,20,20,.08)}
.combat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.combat-turn{font-size:.85em;color:var(--muted)}
.combat-order{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.turn-pip{font-size:1.1em;opacity:.35;filter:grayscale(.7)}
.turn-pip.now{opacity:1;filter:none;transform:scale(1.25)}
.combat-foes,.combat-party{display:grid;gap:6px;margin-bottom:8px}
.foe,.ally{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.25);border-radius:8px;padding:6px 8px}
.foe-icon{font-size:1.5em}
.foe-info,.ally{flex:1}
.foe.down,.ally.down{opacity:.55}
.ally.me{border:1px solid var(--accent)}
.hpbar{height:8px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:4px;overflow:hidden}
.hpfill{height:100%;border-radius:4px;transition:width .3s}
.hpfill.ok{background:#58c472}
.hpfill.low{background:#e8b34b}
.hpfill.crit{background:#e05252}
.combat-actions{margin-top:6px}
.combat-actions .row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.combat-actions button.sel{outline:2px solid var(--accent)}
#cact-sub{margin-top:6px}
#cact-sub select{background:var(--bg);color:var(--fg);border:1px solid var(--muted);border-radius:6px;padding:6px}
/* HP chips on the party sheet (v33) */
.party-hp{font-size:.8em;color:var(--muted);margin-top:2px}
.party-hp .hpbar{max-width:140px}