:root{
  --bg:#fff7fb; --bg2:#fdf0f6; --card:#ffffff; --ink:#3b2a3a; --ink2:#7a6178; --line:#f0d9e6;
  --rose:#e98bb6; --rose2:#c9648f; --lilac:#c9b8ff; --lilac2:#8f79d9; --mint:#bdeedd; --mint2:#3e9c7a; --butter:#ffe9a8; --butter2:#b98a1a; --sky:#cfe6ff; --sky2:#3b7fc4;
  --dm:#f4eeff; --dm-line:#dccdfd; --me:#ffe4f0; --other:#e6f6ff; --shadow:0 6px 18px rgba(201,100,143,.10);
  --r:18px; --font:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; --serif:"Cormorant Garamond",Georgia,serif;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#1f1622; --bg2:#271b2b; --card:#2e2133; --ink:#f3e6ee; --ink2:#c5aebd; --line:#4a3350;
  --dm:#2d2440; --dm-line:#5a4a86; --me:#4a2a3c; --other:#25354a; --shadow:0 6px 18px rgba(0,0,0,.35);
}}
*{box-sizing:border-box} html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--font);-webkit-text-size-adjust:100%}
a{color:var(--rose2)} button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:var(--card);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow);font-weight:700;transition:transform .08s}
button:active{transform:scale(.96)} button:disabled{opacity:.5;cursor:default}
button.pri{background:linear-gradient(135deg,var(--rose),var(--lilac2));color:#fff}
button.sm{padding:5px 10px;font-size:13px;box-shadow:none;border:1.5px solid var(--line)}
button.ghost{background:transparent;box-shadow:none;border:1.5px solid var(--line)}
button.danger{background:#ffdede;color:#a02020}
input,textarea,select{width:100%;border:1.5px solid var(--line);background:var(--card);border-radius:14px;padding:9px 12px;outline:0}
input:focus,textarea:focus,select:focus{border-color:var(--rose)}
label{display:block;font-size:12px;font-weight:800;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 4px}
h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0}
h1{font-size:34px;line-height:1.05} h2{font-size:24px} h3{font-size:18px}
.loading{padding:60px;text-align:center;color:var(--ink2)}
.wrap{max-width:820px;margin:0 auto;padding:14px 14px 40px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .grow{flex:1} .right{margin-left:auto}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;margin:12px 0;border:1px solid var(--line)}
.muted{color:var(--ink2);font-size:13px} .tiny{font-size:11px} .mono{font-family:ui-monospace,Menlo,monospace}
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.chip.pink{background:var(--me)} .chip.blue{background:var(--other)} .chip.gold{background:var(--butter);color:var(--butter2)} .chip.mint{background:var(--mint);color:var(--mint2)}
.topbar{position:sticky;top:0;z-index:5;background:linear-gradient(var(--bg) 80%,transparent);padding:10px 14px 6px}
.topbar .inner{max-width:820px;margin:0 auto;display:flex;align-items:center;gap:10px}
.brand{font-family:var(--serif);font-size:22px;font-weight:700;text-decoration:none;color:var(--ink)}
.pill{background:var(--card);border-radius:999px;padding:6px 12px;box-shadow:var(--shadow);font-size:13px;font-weight:700}
/* game list */
.game{display:block;text-decoration:none;color:inherit}
.game .t{font-family:var(--serif);font-size:22px;font-weight:700} .game .last{color:var(--ink2);font-size:13px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* journal */
.journal{padding-bottom:180px}
.entry{margin:10px 0;display:flex;flex-direction:column}
.entry .who{font-size:12px;font-weight:800;color:var(--ink2);margin:0 10px 3px}
.entry .body{max-width:92%;border-radius:var(--r);padding:11px 15px;background:var(--card);box-shadow:var(--shadow);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.entry.post.me{align-items:flex-end} .entry.post.me .body{background:var(--me);border-bottom-right-radius:6px}
.entry.post:not(.me) .body{background:var(--other);border-bottom-left-radius:6px}
.entry.dm .body{background:var(--dm);border-color:var(--dm-line);max-width:100%;white-space:normal}
.entry.dm .body p{margin:0 0 .7em} .entry.dm .body p:last-child{margin:0} .entry.dm .body ul{margin:.3em 0 .6em 1.2em;padding:0}
.entry.dm .who::before{content:"🔮 "}
.entry.roll .body,.entry.draw .body,.entry.oracle .body{background:var(--bg2);font-size:13.5px;padding:7px 12px;box-shadow:none}
.entry.roll .body::before{content:"🎲 "} .entry.draw .body::before{content:"🃏 "} .entry.oracle .body::before{content:"🔭 "}
.entry.system{align-items:center} .entry.system .body{background:transparent;border:0;box-shadow:none;color:var(--ink2);font-size:12px;padding:2px 10px;text-align:center}
.entry.note .body{background:var(--butter);border-color:#f3d77a;font-style:italic} .entry.note .who::after{content:" · private note"}
.entry.ooc .body{border-style:dashed} .entry.ooc .who::after{content:" · out of character"}
.entry .ts{font-size:10px;color:var(--ink2);margin:2px 12px 0;opacity:.8}
.big{font-size:20px;font-weight:800}
.cardface{display:inline-block;background:#fff;color:#222;border:1.5px solid #ccc;border-radius:8px;padding:2px 8px;margin:2px 4px 2px 0;font-weight:800;box-shadow:0 2px 4px rgba(0,0,0,.12)}
.cardface.red{color:#c8283c} .cardface.rev{transform:rotate(180deg)}
.thinking{display:flex;gap:8px;align-items:center;color:var(--lilac2);font-weight:700;margin:12px 10px}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lilac2);margin:0 2px;animation:b 1s infinite}
.dots span:nth-child(2){animation-delay:.2s} .dots span:nth-child(3){animation-delay:.4s} @keyframes b{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
/* dock */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:1px solid var(--line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(0,0,0,.06)}
.dock .inner{max-width:820px;margin:0 auto}
.composer{display:flex;gap:8px;align-items:flex-end}
.composer textarea{min-height:44px;max-height:160px;resize:none;border-radius:22px}
.composer .send{width:44px;height:44px;padding:0;border-radius:50%;font-size:18px;flex:none}
.tabs{display:flex;gap:6px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none}
.tabs button{white-space:nowrap;padding:6px 12px;font-size:13px;box-shadow:none;border:1.5px solid var(--line);background:var(--card)}
.tabs button.on{background:linear-gradient(135deg,var(--rose),var(--lilac2));color:#fff;border-color:transparent}
.drawer{max-height:46vh;overflow:auto;padding:4px 2px 10px}
.dice{display:flex;flex-wrap:wrap;gap:6px}
.dice button{padding:8px 12px;min-width:48px}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border-radius:0;box-shadow:none;background:transparent;padding:5px 12px;font-size:13px} .seg button.on{background:var(--me)}
.modal-bg{position:fixed;inset:0;background:rgba(40,20,40,.4);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.modal{background:var(--bg);width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:18px 18px 30px}
@media(min-width:700px){.modal-bg{align-items:center}.modal{border-radius:24px}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(120px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:999px;z-index:30;font-weight:700;box-shadow:var(--shadow)}
.reader{height:calc(100vh - 60px)} .reader iframe{width:100%;height:100%;border:0;border-radius:var(--r);background:#fff}
.digest{white-space:pre-wrap;font-size:14px}
.list-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)} .list-item:last-child{border:0}
.status-none{color:var(--ink2)} .status-ready{color:var(--mint2)} .status-working,.status-pending{color:var(--butter2)} .status-error{color:#c22}
.hero{padding:28px 0 8px} .hero p{color:var(--ink2);margin:6px 0 0}
kbd{background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:0 5px;font-size:12px}

/* ---- drawn cards (art scanned from the player's own decks) ---- */
.hand{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 2px}
.pcard{margin:0;width:88px;cursor:zoom-in;transition:transform .12s ease}
.pcard img{width:100%;display:block;border-radius:7px;box-shadow:0 3px 10px rgba(60,30,60,.24);background:#fff;aspect-ratio:5/8;object-fit:cover}
.pcard.rev img{transform:rotate(180deg)}
.pcard:hover{transform:translateY(-3px)}
.pcard figcaption{font-size:10.5px;font-weight:700;color:var(--ink2);text-align:center;margin-top:3px;line-height:1.25}
.pcard.rev figcaption{color:#a4548a}
.pcard .facetext{display:flex;align-items:center;justify-content:center;aspect-ratio:5/8;background:#fff;color:#222;border:1.5px solid #ccc;border-radius:7px;font-weight:800;font-size:19px;box-shadow:0 3px 10px rgba(60,30,60,.24)}
.pcard .facetext.red{color:#c8283c}
.zoom{position:fixed;inset:0;z-index:40;background:rgba(30,14,30,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;cursor:zoom-out}
.zoom img{max-width:min(78vw,380px);max-height:70vh;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.zoom.rev img{transform:rotate(180deg)}
.zoom .z-name{font-family:var(--serif);font-size:24px;color:#fff;text-align:center}
.zoom .z-keys{color:#f3d9ec;font-size:14px;text-align:center;max-width:420px}

/* ---- the shelf: games imported from the Obsidian vault ---- */
.shelfgame{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.shelfgame:last-child{border-bottom:0}
.shelfgame.shelved{opacity:.62}
.bookgroup{margin:6px 0}
.bookgroup .gname{text-transform:uppercase;letter-spacing:.06em;margin:8px 0 3px}
.bookpick{max-height:230px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;padding:8px}
.bookpick label{display:inline;margin:0;text-transform:none;letter-spacing:0;font-size:13px}
.chip.tiny{font-size:10px;padding:0 5px}

/* ---- the player's own oracle tables ---- */
.row.wrapped{flex-wrap:wrap;gap:6px}
.tablecats{max-height:44vh;overflow-y:auto;margin-top:8px}
.tablecats details{border-bottom:1px solid var(--line);padding:5px 0}
.tablecats summary{cursor:pointer}
.tablecats .row{margin-top:6px}

/* ---- character sheets ---- */
.sheet{border-bottom:1px solid var(--line);padding:6px 0}
.sheet summary{cursor:pointer}
.sheetform textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;margin-top:6px}

/* ---- long-form reading (markdown rulebooks, past journal entries) ---- */
.longread{max-height:none;line-height:1.62}
.longread p{margin:0 0 .8em}
.longread h1,.longread h2,.longread h3{font-family:var(--serif);margin:1.1em 0 .35em}
.beat{padding:6px 0;border-bottom:1px solid var(--line)}
.beat:last-child{border-bottom:0}
.pagelink{font-size:12px;color:var(--ink2)}

/* ---- top-level navigation: Play · Start a game · Library ---- */
.chrome{position:sticky;top:0;z-index:5;background:var(--bg)}
.chrome .topbar,.chrome .nav{position:static;background:none}
.nav{padding:0 14px 8px}
.nav .inner{max-width:820px;margin:0 auto;display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px}
.navitem{
  flex:1;text-align:center;text-decoration:none;color:var(--ink2);
  font-weight:800;font-size:13.5px;padding:7px 6px;border-radius:999px;white-space:nowrap;
}
.navitem.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.navitem:focus-visible{outline:2px solid var(--rose);outline-offset:1px}

/* ---- collapsed secondary actions, so a screen shows one thing at a time ---- */
details.fold:not(.card){border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
details.fold:not(.card):first-of-type{border-top:0}
details.fold > summary{
  cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-weight:800;
}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"▾";margin-left:auto;color:var(--ink2);font-size:12px;transition:transform .15s}
details.fold[open] > summary::after{transform:rotate(180deg)}
details.fold > summary h3{display:inline}
details.fold > summary:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:8px}

.empty{text-align:center;padding:26px 18px}
.empty p{max-width:38ch;margin-left:auto;margin-right:auto}

/* ---- the Guide's rules citations: a tap that opens the book at that page ---- */
.citelink{color:var(--lilac2);text-decoration:none;font-weight:700;border-bottom:1px dotted var(--dm-line);white-space:nowrap}
.citelink:hover{border-bottom-style:solid}
.pagelink{text-decoration:none}
#drawer .empty{padding:10px 12px;text-align:left}
#drawer .empty p{max-width:none;margin-left:0;margin-right:0}

/* ---- actions the Guide offers inside its own message ----
 * Being told "roll 2d6+3" and having to go hunt for the dice drawer was the
 * least obvious thing about playing. These are tappable where they're asked. */
.act{
  display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,var(--rose),var(--lilac2));color:#fff;
  border-radius:999px;padding:5px 13px;font-size:14px;font-weight:800;
  box-shadow:var(--shadow);margin:2px 2px 2px 0;vertical-align:baseline;
}
.act:hover{filter:brightness(1.06)}
.act.done{background:var(--bg2);color:var(--ink2);box-shadow:none;border:1px solid var(--line)}
.act.done::after{content:" ✓"}
.act:disabled{opacity:1;cursor:default}
.entry.dm .body p:has(> .act:only-child){margin-top:.5em}

/* ---- a rulebook page opened over the table, not instead of it ---- */
.modal.tall{max-height:94vh;display:flex;flex-direction:column}
.bookframe{flex:1;min-height:60vh;margin-top:10px}
.bookframe iframe{width:100%;height:100%;min-height:60vh;border:0;border-radius:var(--r);background:#fff}

/* ---- the composer is the point of the screen; give it room ---- */
.composer textarea{min-height:48px;font-size:16px;padding:11px 16px}
.dock .seg{flex:none}
/* The dock is a surface, not more page. Without its own tone it blends into
 * the journal above and reads as a dark band with things floating in it. */
.dock{background:var(--bg2)}
.drawer{border-bottom:1px solid var(--line);margin-bottom:8px}

/* ---- the Guide's questions, as cards you answer instead of prose you retype ---- */
.entry.choice .body{background:var(--card);border-color:var(--dm-line);max-width:100%;white-space:normal;padding:12px 13px}
.entry.choice .who::before{content:""}
.choicecard .q{font-weight:800;margin-bottom:9px}
.choicecard .opts{display:flex;flex-direction:column;gap:6px}
.choicecard .opt{
  display:block;width:100%;text-align:left;background:var(--bg2);border:1.5px solid var(--line);
  border-radius:14px;padding:9px 12px;box-shadow:none;font-weight:400;
}
button.opt{cursor:pointer}
button.opt:hover{border-color:var(--lilac2);background:var(--dm)}
button.opt:disabled{opacity:.55;cursor:default}
.choicecard .optlabel{font-weight:800;font-size:14.5px}
.choicecard .optdetail{color:var(--ink2);font-size:13px;margin-top:2px}
.choicecard .rng{
  display:inline-block;min-width:52px;margin-right:8px;color:var(--lilac2);
  font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:700;
}
.choicecard .opt.chosen{border-color:var(--lilac2);background:var(--dm);box-shadow:var(--shadow)}
.choicecard .chosenline{margin-top:9px;font-size:14px}

/* ---- a character sheet is for reading; editing is behind a button ---- */
.sheetview{font-size:14px;line-height:1.55}
.sheetview h3,.sheetview h4,.sheetview h5,.sheetview h6{
  font-family:var(--serif);font-weight:700;margin:.8em 0 .25em;line-height:1.2;
}
.sheetview h3{font-size:19px} .sheetview h4{font-size:17px}
.sheetview h5,.sheetview h6{font-size:15px;font-family:var(--font);color:var(--ink2);
  text-transform:uppercase;letter-spacing:.05em}
.sheetview h3:first-child,.sheetview h4:first-child{margin-top:0}
.sheetview p{margin:0 0 .5em}
.sheetview ul{margin:.2em 0 .6em 1.1em;padding:0}
.sheetview li{margin:.1em 0}
.sheetview hr{border:0;border-top:1px solid var(--line);margin:.8em 0}
.tablewrap{overflow-x:auto;margin:.4em 0 .7em}
.tablewrap table{border-collapse:collapse;font-size:13.5px;min-width:100%}
.tablewrap th,.tablewrap td{border:1px solid var(--line);padding:4px 9px;text-align:left;white-space:nowrap}
.tablewrap th{background:var(--bg2);font-weight:800}
/* The Guide's own messages get the same treatment for headings and tables. */
.entry.dm .body h3,.entry.dm .body h4,.entry.dm .body h5,.entry.dm .body h6{
  font-family:var(--serif);font-size:17px;font-weight:700;margin:.7em 0 .2em;
}
.entry.dm .body hr{border:0;border-top:1px solid var(--dm-line);margin:.7em 0}