/* ===== Chosen Adventure — "Obsidian Atlas" ===== */
:root{
  --bg:#090b0e; --bg2:#0d1014; --card:#12151b; --card2:#171b22; --elev:#1c212a;
  --border:#262d38; --border2:#333c49;
  --ink:#eef2f6; --muted:#8c97a4; --faint:#5c6672;
  --accent:#e8a13a; --accent-ink:#1a1206; --accent-soft:rgba(232,161,58,.14); --glow:#c9701f;
  --good:#37c98b; --bad:#e0593f; --warn:#e0b24d;
  --glass:rgba(11,13,17,.72);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"Cascadia Code","Segoe UI Mono",Consolas,monospace;
  --rad:14px; --rad-sm:10px;
  --shadow:0 18px 44px rgba(0,0,0,.46);
  --maxw:1280px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
}
:root[data-theme="light"]{
  --bg:#ece5d8; --bg2:#f3ede1; --card:#ffffff; --card2:#f6f1e6; --elev:#fbf8f0;
  --border:#e0d8c6; --border2:#d3c9b2;
  --ink:#20242b; --muted:#6b7280; --faint:#9a8f78;
  --accent-soft:rgba(232,161,58,.16);
  --glass:rgba(243,237,225,.78);
  --shadow:0 16px 40px rgba(60,45,20,.14);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font-family:inherit;color:inherit;cursor:pointer}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-ink)}
.boot{padding:40vh 20px;text-align:center;color:var(--muted);font-size:14px;letter-spacing:.04em}

/* atmospheric ground */
/* Fixed app shell — the page itself never scrolls in any direction. */
.app{
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  background:
    radial-gradient(120% 80% at 82% -6%, color-mix(in srgb,var(--glow) 22%, transparent) 0%, transparent 46%),
    radial-gradient(90% 60% at 10% 108%, color-mix(in srgb,var(--accent) 9%, transparent) 0%, transparent 50%),
    var(--bg);
}

/* ---------- top bar (holds all view controls) ---------- */
.bar{flex:none;display:flex;align-items:center;gap:12px;z-index:40;
  padding:9px clamp(12px,3vw,22px);
  background:var(--glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:0}
.brand .mark{width:30px;height:30px;flex:none;border-radius:8px;
  background:radial-gradient(circle at 50% 40%, var(--accent), var(--glow) 60%, #14100c);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 14px color-mix(in srgb,var(--glow) 50%,transparent)}
.brand-txt{min-width:0}
.brand b{font-size:15px;font-weight:800;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.brand small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:-2px}
.bar .spacer{flex:1;min-width:8px}
.bar .actions{display:flex;align-items:center;gap:7px;min-width:0}
.bar-div{width:1px;height:22px;background:var(--border);margin:0 2px;flex:none}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);flex:none;
  background:var(--card);display:grid;place-items:center;font-size:16px;
  transition:border-color .15s,background .15s}
.iconbtn:hover{border-color:var(--accent);background:var(--card2)}
.iconbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.iconbtn .dots{width:15px;height:15px}
@media (max-width:560px){ .brand small{display:none} }
/* iPhone: the reader's action row (6+ icons, theme pill, settings) doesn't fit 375px wide —
   let it scroll horizontally in its OWN container (contained scroll, not the page) rather than
   silently clipping later buttons — Settings must always stay reachable. A right-edge fade
   signals there's more to swipe to. Icons shrink slightly first so less scrolling is needed. */
@media (max-width:600px){
  .bar{gap:8px}
  /* Cap how much width the action row can claim so the adventure name (.brand) always keeps
     enough room to actually show — otherwise a wide icon row squeezes "Dune" down to "D.". */
  .bar .actions{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:6px;
    max-width:62vw;flex:0 1 auto;
    padding-right:4px;mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent);
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 18px),transparent)}
  .bar .actions::-webkit-scrollbar{display:none}
  .iconbtn{width:34px;height:34px;font-size:14px}
  .themebtn{height:34px;padding:0 10px;font-size:11.5px}
  .brand{flex:1 1 auto}
  .brand-txt{min-width:0}
}

/* persistent theme button (bar) — full word + icon */
.themebtn{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:10px;flex:none;
  border:1px solid var(--border);background:var(--card);font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.themebtn:hover{border-color:var(--accent);background:var(--card2)}
.themebtn .ti{font-size:14px;line-height:1}
/* L/D/A segmented control (settings) — full words */
.lda{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--card);flex:none}
.lda button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;padding:8px 15px;height:34px;white-space:nowrap}
.lda button.on{background:var(--accent);color:var(--accent-ink)}

/* ---------- view container (fills the remaining height) ---------- */
.screen{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.screen.scroll{overflow-y:auto;overflow-x:hidden}
.wrap{flex:1;min-height:0;overflow-y:auto;width:100%}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:800;margin:0 0 6px}
h1.big{font-size:clamp(20px,3.4vw,32px);line-height:1.05;margin:0;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.lead{color:var(--muted);font-size:14px;margin:0;max-width:60ch}

/* ---------- home (fixed; shelf fills, sagas alongside) ---------- */
.home{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  padding:clamp(12px,2.4vw,22px) clamp(14px,3vw,26px)}
.home-head{flex:none}
.home-main{flex:1;min-height:0;display:flex;gap:14px;overflow:hidden}
/* grid-auto-rows was 1fr, dividing whatever height is left EQUALLY across however many rows
   the current campaign count needs — with 18+ adventures that shrank every card to ~34px,
   too short to show its own name. A card needs a sane minimum to stay legible regardless of
   library size, so once more rows exist than comfortably fit, the shelf scrolls in its own
   container (the header and "Your sagas" panel beside it stay put) rather than keep shrinking. */
.shelf{flex:1;min-height:0;display:grid;gap:10px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-auto-rows:minmax(148px,auto);align-content:start}
.sagas{width:clamp(210px,24vw,300px);flex:none;display:flex;flex-direction:column;min-height:0}
.sagas-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 8px;flex:none}
.sagas .runs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}
@media (max-width:820px){ .home-main{flex-direction:column} .sagas{width:auto;max-height:34%} }

.cover{position:relative;border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;
  background:var(--card);text-align:left;display:flex;flex-direction:column;min-height:0;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.cover:hover{border-color:var(--caccent,var(--accent));box-shadow:var(--shadow)}
.cover .art{flex:1;min-height:44px;position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 78% 8%, var(--caccent,#e8a13a) 0%, var(--cglow,#c9701f) 26%, #1b130c 62%, #0b0d10 100%)}
.cover .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55))}
.cover .body{flex:none;padding:8px 11px 10px;display:flex;flex-direction:column;gap:3px}
.cover h3{margin:0;font-size:clamp(14px,1.5vw,16px);font-weight:800;line-height:1.15}
.cover p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:560px){ .cover p{-webkit-line-clamp:2} }
@media (max-height:640px){ .cover p{-webkit-line-clamp:3} }
.cover.locked{opacity:.72}
.cover .tag{position:absolute;top:8px;left:9px;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(0,0,0,.5);color:#fff;padding:3px 8px;border-radius:999px;backdrop-filter:blur(3px)}
.cover{cursor:pointer}
.cover-del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;z-index:3;padding:0;
  background:rgba(0,0,0,.5);color:#fff;font-size:16px;line-height:1;display:grid;place-items:center;backdrop-filter:blur(3px);opacity:.85}
.cover-del:hover{background:var(--bad);opacity:1}
.cover-new{border-style:dashed;cursor:pointer;text-align:left}
.cover-new .art.new{display:grid;place-items:center;background:var(--card2)}
.cover-new .art.new::after{content:none}
.cover-new .plus{font-size:38px;color:var(--muted);font-weight:300;line-height:1}
.setup-input{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;
  color:var(--ink);font-family:inherit;font-size:14px}
.setup-input:focus{outline:2px solid var(--accent);border-color:var(--accent)}

/* ---------- epilogue (ended saga) ---------- */
.epilogue-view{max-width:720px;margin:0 auto;padding:clamp(14px,2.4vw,26px) clamp(14px,3vw,26px) calc(32px + var(--safe-b))}
.epi-art{border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;margin-bottom:14px;background:var(--bg2)}
.epi-art img{width:100%;max-height:40vh;object-fit:cover;display:block}
.epi-last{max-width:none;color:var(--muted);font-size:15px;margin:0 0 16px}
.epi-fate{font-family:Georgia,"Iowan Old Style",serif;font-size:20px;font-style:italic;color:var(--ink);margin:0 0 12px;line-height:1.4;text-wrap:balance}
.epi-text{font-size:15px;line-height:1.66;color:var(--ink)}
.epi-text p{margin:0 0 12px}
.epi-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.epi-recap{margin-top:8px}
.epi-beat{padding:8px 0;border-top:1px solid var(--border)}
.epi-beat b{font-size:14px;display:block}
.epi-beat span{font-size:12.5px;color:var(--muted)}

/* continue cards */
.run{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--rad-sm);background:var(--card);transition:border-color .15s;flex:none}
.run:hover{border-color:var(--accent)}
.run .swatch{width:34px;height:34px;border-radius:8px;flex:none;border:0;
  background:radial-gradient(circle at 60% 30%,var(--caccent,#e8a13a),var(--cglow,#c9701f) 70%,#14100c)}
.run .meta{flex:1;min-width:0;background:none;border:0;text-align:left}
.run .meta b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run .meta span{font-size:11px;color:var(--muted)}
.run .del{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:13px;flex:none}
.run .del:hover{border-color:var(--bad);color:var(--bad)}
.pill-status{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent);flex:none}
.pill-status.ended{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.empty{color:var(--faint);font-size:13px;font-style:italic}

/* ---------- reader (fixed; two columns on wide, stacked on narrow) ---------- */
.reader{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  padding:clamp(12px,2vw,20px) clamp(14px,3vw,24px)}
@media (min-width:820px){ .reader{flex-direction:row} }
.reader-media{display:flex;flex-direction:column;gap:10px;min-height:0;flex:none}
@media (min-width:820px){ .reader-media{flex:1 1 46%;max-width:560px} }
.reader .art{position:relative;border:1px solid var(--border);border-radius:var(--rad);overflow:hidden;background:var(--bg2)}
.reader-media .art{flex:1;min-height:120px}
@media (max-width:819px){ .reader-media .art{flex:none;height:min(20vh,170px)} }
.reader .art img{width:100%;height:100%;object-fit:cover;display:block}
.reader .art .cap{position:absolute;left:10px;bottom:9px;font-size:10px;letter-spacing:.04em;
  background:rgba(0,0,0,.46);color:#fff;padding:3px 9px;border-radius:999px;backdrop-filter:blur(3px)}
.shimmer{position:absolute;inset:0;
  background:linear-gradient(110deg,var(--bg2) 30%,color-mix(in srgb,var(--accent) 10%,var(--card2)) 50%,var(--bg2) 70%);
  background-size:220% 100%;animation:sh 1.5s linear infinite;display:grid;place-items:center;color:var(--muted);font-size:12px;text-align:center;padding:16px}
@keyframes sh{to{background-position:-220% 0}}

.statstrip{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%;text-align:left;
  padding:11px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card2);transition:border-color .15s}
.statstrip:hover{border-color:var(--accent)}
/* Mobile: one compact scrollable row instead of wrapping to 2-3 rows and crowding out the story. */
@media (max-width:819px){
  .statstrip{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 10px;-webkit-overflow-scrolling:touch}
  .statstrip .chip{padding:4px 9px;font-size:12px;flex:none}
}
.hpbar{width:56px;height:7px;border-radius:5px;background:var(--border);overflow:hidden}
.hpbar i{display:block;height:100%;background:linear-gradient(90deg,var(--bad),var(--accent));transition:width .5s}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;letter-spacing:.01em;color:var(--ink);
  background:var(--card);border:1px solid var(--border);padding:5px 11px;border-radius:8px}
.chip span{color:var(--muted);font-weight:600}
.chip.res{color:var(--accent)}
.chip.hp{color:var(--ink)}
.chip{cursor:pointer;transition:border-color .12s,background .12s}
.statstrip .chip:hover{border-color:var(--accent);background:var(--card2)}

.reader-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
.reader-scroll{flex:1;min-height:0;overflow:hidden}
.scene-title{margin:0 0 8px}
.roll{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 6px;max-width:100%;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.5;
  padding:8px 13px;border-radius:12px;margin-bottom:12px;border:1px solid var(--border);color:var(--ink);background:var(--card)}
.roll b{font-family:var(--mono);color:var(--ink)}
.roll .roll-word{font-family:var(--sans);font-weight:800}
.roll.success{border-color:color-mix(in srgb,var(--good) 55%,var(--border));background:color-mix(in srgb,var(--good) 12%,var(--card))}
.roll.failure{border-color:color-mix(in srgb,var(--bad) 55%,var(--border));background:color-mix(in srgb,var(--bad) 12%,var(--card))}
.roll.partial{border-color:color-mix(in srgb,var(--warn) 55%,var(--border));background:color-mix(in srgb,var(--warn) 12%,var(--card))}
.roll.success .roll-word{color:var(--good)}
.roll.failure .roll-word{color:var(--bad)}
.roll.partial .roll-word{color:var(--warn)}
.prose{font-size:clamp(15px,1.5vw,17px);line-height:1.62;color:var(--ink);margin:0;white-space:pre-wrap;max-width:66ch}
.prose::first-letter{font-size:2.8em;line-height:.8;float:left;padding:5px 9px 0 0;color:var(--accent);font-weight:800}

.choices-wrap{flex:none}
.choices{display:flex;flex-direction:column;gap:7px}
.choice{display:flex;align-items:center;gap:11px;text-align:left;font-size:14px;color:var(--ink);
  background:var(--card2);border:1px solid var(--border);padding:10px 13px;border-radius:10px;
  transition:transform .12s,border-color .12s,background .12s;width:100%}
.choice::before{content:attr(data-k);font-family:var(--mono);font-size:11px;font-weight:800;flex:none;
  width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.choice:hover:not(:disabled){border-color:var(--accent);transform:translateX(3px);background:var(--accent-soft)}
.choice:disabled{opacity:.5;cursor:default}
.askrow{display:flex;gap:8px;margin-top:8px}
.askrow input{flex:1;min-width:0;background:var(--card2);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;color:var(--ink);font-size:14px;font-family:inherit}
.askrow input::placeholder{color:var(--faint);font-style:italic}
.askrow input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.act{flex:none;padding:0 16px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-ink);
  font-weight:800;letter-spacing:.04em;font-size:13px}
.act:disabled{opacity:.55}

.thinking{border:1px dashed var(--border);border-radius:10px;padding:12px;color:var(--muted);
  font-size:13px;display:flex;align-items:center;gap:10px;margin-top:10px}
.dots{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.ended-note{color:var(--muted);font-size:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--card)}

/* ---------- character setup ---------- */
.setup{max-width:720px;margin:0 auto;padding:clamp(14px,2.4vw,26px) clamp(14px,3vw,26px) calc(28px + var(--safe-b));display:flex;flex-direction:column;gap:14px}
.setup-head{margin-bottom:2px}
.setq{display:flex;flex-direction:column;gap:8px}
.setq-l{font-size:14px;font-weight:700;color:var(--ink)}
.setq-l .opt{color:var(--muted);font-weight:500}
.setq-opts{display:flex;flex-wrap:wrap;gap:8px}
.pill{font-size:13.5px;font-weight:700;border:1px solid var(--border);background:var(--card);
  color:var(--ink);padding:9px 15px;border-radius:999px;transition:border-color .12s,background .12s,color .12s}
.pill:hover{border-color:var(--accent)}
.pill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.setup-notes{background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;
  color:var(--ink);font-family:inherit;font-size:14px;resize:vertical;min-height:52px}
.setup-notes:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.begin-btn{align-self:flex-start;margin-top:6px;font-size:14px;padding:12px 22px}
@media (min-width:720px){
  .setup{max-width:880px;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-content:start}
  .setup-head,.setq-notes,.begin-btn{grid-column:1/-1}
}

/* ---------- settings ---------- */
.settings{padding:clamp(14px,2.4vw,24px) clamp(14px,3vw,26px) calc(24px + var(--safe-b))}
.settings-head{margin-bottom:14px}
.settings-cols{columns:320px 2;column-gap:14px}
.settings-cols .card{break-inside:avoid}

/* ---------- drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}

/* score-explainer popup */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;pointer-events:none}
.modal.open{pointer-events:auto}
.modal-card{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;box-shadow:var(--shadow);
  width:min(440px,94vw);max-height:86vh;overflow:auto;padding-top:var(--safe-t);animation:pop .16s ease}
.modal-card header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.modal-card header h2{flex:1;margin:0;font-size:17px;font-weight:800;letter-spacing:.01em}
.modal-body{padding:14px 16px 18px}
.score-val{font-size:30px;font-weight:800;color:var(--accent);margin-bottom:12px;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.score-line{margin:0 0 12px;font-size:14px;line-height:1.5;color:var(--ink)}
.score-line b{display:block;color:var(--muted);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
/* action toolbelt */
.belt-btn{padding:0 13px;font-size:16px;background:var(--card2);color:var(--accent);border:1px solid var(--border)}
.belt-btn:hover{border-color:var(--accent);background:var(--accent-soft)}
.belt-sec{margin-bottom:14px}
.belt-sec:last-child{margin-bottom:0}
.belt-sec h3{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:0 0 7px}
.belt-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--border);border-radius:11px;background:var(--card);padding:10px 12px;margin-bottom:7px;transition:border-color .12s,background .12s}
.belt-row:last-child{margin-bottom:0}
.belt-row:hover{border-color:var(--accent);background:var(--accent-soft)}
.belt-ic{font-size:19px;width:26px;text-align:center;flex:none}
.belt-tx{min-width:0}
.belt-tx b{display:block;font-size:14px;color:var(--ink);font-weight:700}
.belt-tx i{display:block;font-style:normal;font-size:12px;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.belt-note{width:100%;box-sizing:border-box;margin-bottom:14px}
.belt-actions{display:flex;gap:8px;justify-content:flex-end}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(420px,92vw);z-index:70;
  background:var(--bg2);border-left:1px solid var(--border);box-shadow:var(--shadow);
  transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column;
  padding-top:var(--safe-t)}
.drawer.open{transform:none}
.drawer header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer header h2{font-size:15px;font-weight:800;margin:0;flex:1;letter-spacing:.02em}
.drawer .content{overflow:auto;padding:16px 18px calc(24px + var(--safe-b))}

.sheet-hp{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--card);margin-bottom:14px}
.sheet-hp .row{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:var(--muted);font-weight:700}
.sheet-hp .big{font-size:26px;font-weight:800;color:var(--ink)}
.bar-lg{height:10px;border-radius:6px;background:var(--border);overflow:hidden;margin-top:8px}
.bar-lg i{display:block;height:100%}
.bar-lg.hp i{background:linear-gradient(90deg,var(--bad),var(--accent))}
.bar-lg.xp i{background:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.stat-card{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card);text-align:left;width:100%;cursor:pointer;transition:border-color .12s}
.stat-card:hover{border-color:var(--accent)}
.stat-card b{font-size:20px;font-weight:800}
.stat-card small{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.stat-card em{font-style:normal;color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:700}
.sub-h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800;margin:16px 0 8px}
.item{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.item .ic{font-size:20px;width:28px;text-align:center;flex:none}
.item b{font-size:14px;display:block}
.item p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.status-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;margin:0 6px 6px 0}
.status-chip.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--border))}
.status-chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--border))}
.empty{color:var(--faint);font-size:13px;font-style:italic}
/* story-control dials (character sheet) */
.ctrl-row{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin-bottom:9px}
.ctrl-l{font-size:13px;color:var(--muted);font-weight:700;flex:none}
.seg{display:inline-flex;flex:1 1 auto;border:1px solid var(--border);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{flex:1;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;padding:7px 10px;white-space:nowrap;cursor:pointer;transition:background .12s,color .12s}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.ctrl-note{font-size:11.5px;color:var(--faint);line-height:1.45;margin:8px 0 0}

/* timeline */
.tl{display:flex;flex-direction:column;gap:0}
.tl .node{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.tl .dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);flex:none;margin-top:4px}
.tl .node.head .dot{background:var(--accent)}
.tl .node .t{flex:1;min-width:0}
.tl .node b{font-size:13.5px}
.tl .node p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.tl .node .rw{align-self:center;font-size:11px;font-weight:800;border:1px solid var(--border);
  background:var(--card);padding:6px 11px;border-radius:8px;color:var(--muted)}
.tl .node .rw:hover{border-color:var(--accent);color:var(--accent)}

/* settings */
.card{border:1px solid var(--border);border-radius:12px;background:var(--card);padding:16px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:800}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
.field:first-of-type{border-top:0}
.field label{font-size:13.5px;color:var(--ink)}
.pron-count{color:var(--muted);font-weight:400;font-size:12px}
.pron-done{opacity:.6;color:var(--good)}
.grind-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.field input,.field select{background:var(--card2);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;color:var(--ink);font-family:inherit;font-size:13px}
.kv{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-top:1px solid var(--border)}
.kv:first-child{border-top:0}
.kv span{color:var(--muted)}
.logrow{font-size:11.5px;font-family:var(--mono);padding:6px 0;border-top:1px solid var(--border);color:var(--muted);display:flex;gap:8px}
.logrow .ok{color:var(--good)}.logrow .no{color:var(--bad)}
.api{padding:10px 0;border-top:1px solid var(--border)}
.api b{font-size:13.5px}.api p{margin:2px 0;font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card2);
  padding:9px 15px;border-radius:9px;font-size:13px;font-weight:700}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,var(--border))}
.btn:hover{border-color:var(--accent)}

/* login */
.login{max-width:360px;margin:0 auto;padding:clamp(8px,5vh,14vh) 0 0;text-align:center}
.login .mark-lg{width:64px;height:64px;border-radius:16px;margin:0 auto clamp(8px,2vh,20px);
  background:radial-gradient(circle at 50% 38%,var(--accent),var(--glow) 62%,#14100c);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 10px 30px color-mix(in srgb,var(--glow) 55%,transparent)}
.login h1{font-size:24px;margin:0 0 6px;font-weight:800}
.login p{color:var(--muted);font-size:13.5px;margin:0 0 clamp(10px,2.5vh,22px)}
.pin-gate{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.8vh,18px);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pin-dots{display:flex;gap:10px}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.pin-dots span.on{background:var(--ink)}
.pin-gate.busy .pin-dots span.on{animation:pinpulse .9s ease-in-out infinite}
@keyframes pinpulse{50%{opacity:.35}}
.pin-gate.bad .pin-dots{animation:pinshake .35s}
@keyframes pinshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-msg{min-height:1.3em;font-size:16px;color:var(--muted);text-align:center}
.pin-pad{--k:clamp(56px,min(22vw,9vh),84px);display:grid;grid-template-columns:repeat(3,var(--k));gap:clamp(8px,1.5vh,16px)}
.pin-pad button{height:var(--k);border-radius:50%;border:1px solid var(--border2);background:var(--card);color:var(--ink);
  font:600 clamp(26px,4vh,32px)/1 var(--sans);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:0}
.pin-pad button:active{background:var(--accent);color:var(--accent-ink)}
.pin-pad button:disabled{opacity:.5}
.pin-pad .pin-del{border:none;background:transparent;font-size:24px}

/* toast */
.toasts{position:fixed;left:0;right:0;bottom:calc(16px + var(--safe-b));z-index:90;display:flex;flex-direction:column;
  align-items:center;gap:8px;pointer-events:none;padding:0 14px}
.toast{background:var(--elev);border:1px solid var(--border2);border-radius:11px;padding:11px 16px;
  font-size:13.5px;box-shadow:var(--shadow);max-width:520px;animation:pop .2s ease}
.toast.err{border-color:color-mix(in srgb,var(--bad) 50%,var(--border))}
@keyframes pop{from{transform:translateY(8px);opacity:0}}

@media (max-width:520px){
  .brand small{display:none}
  /* Long scenes on a phone often need the internal-scroll fallback (fitProse), and a floated
     oversized first letter can visually detach from its paragraph once that box is scrolled —
     the flourish isn't worth that glitch at this size, so skip it on mobile. */
  .prose::first-letter{font-size:inherit;line-height:inherit;float:none;padding:0;color:inherit;font-weight:inherit}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .choice:hover:not(:disabled){transform:none}
}

/* ---------- version badge (filled by index.html from version.js) ----------
   Top-left, inside the bar's 9px top padding above the brand mark, so it covers no control
   (the bar's buttons and theme toggle are all on the right). z-index 50: above the bar (40) and
   the login/boot views (in-flow), below the drawer scrim (60) so an open sheet/modal covers it.
   Measured contrast: dark --muted #8c97a4 on the glass bar #0a0c10 6.58:1, on --bg 6.64:1,
   on the drawer #0d1014 6.43:1. Light --muted would be only 3.86:1 on #ece5d8, so light uses
   #545b66: 5.47:1 on --bg, 5.77:1 on the glass bar #f1ebdf, 5.88:1 on the drawer #f3ede1.
   Fail: dark --bad #e0593f 5.32:1 on --bg; light #a3301c 5.59:1 on --bg. */
.app-version{
  position:fixed; z-index:50; pointer-events:none;
  top:var(--safe-t); left:calc(var(--safe-l) + clamp(12px,3vw,22px));
  font:500 9px/9px var(--mono); letter-spacing:.2px; color:var(--muted); white-space:nowrap;
}
:root[data-theme="light"] .app-version{color:#545b66}
.app-version.fail{color:var(--bad); font-weight:700}
:root[data-theme="light"] .app-version.fail{color:#a3301c}