:root {
  --bg: #120e0a;
  --bg2: #1b1510;
  --card: #221b14;
  --card2: #2b2219;
  --line: #3a2f23;
  --ink: #f1e6d2;
  --ink2: #c8b89c;
  --mute: #8d7c64;
  --gold: #d9a441;
  --gold2: #f3c766;
  --ember: #c9472f;
  --magic: #5cc0b3;
  --good: #7fbf6a;
  --r: 14px;
  --serif: 'Crimson Pro', Georgia, serif;
  --display: 'Cinzel', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; }
body { background: radial-gradient(120% 60% at 50% -10%, #2a1d10 0%, var(--bg) 60%) fixed; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--ink); }
a { color: var(--gold2); }
.hidden { display: none !important; }

/* ---------- shared bits ---------- */
.screen { min-height: 100%; display: flex; flex-direction: column; }
.pad { padding: 18px 16px; }
.wrap { max-width: 560px; width: 100%; margin: 0 auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; margin: 0; }
h1 { font-size: 30px; color: var(--gold2); line-height: 1.1; }
h2 { font-size: 20px; color: var(--gold2); }
h3 { font-size: 14px; color: var(--gold); text-transform: uppercase; letter-spacing: .12em; }
.sub { color: var(--ink2); line-height: 1.5; }
.mute { color: var(--mute); }
.small { font-size: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line);
  background: var(--card2); border-radius: 12px; padding: 13px 16px; font-weight: 600; min-height: 48px; }
.btn.primary { background: linear-gradient(180deg, var(--gold2), var(--gold)); color: #241707; border-color: #f6d27f; }
.btn.ghost { background: transparent; }
.btn.danger { border-color: #6b2a1d; color: #f0a593; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--mute); font-weight: 600; }
.field input, .field textarea, .field select { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  outline: none; width: 100%; }
.field input:focus, .field textarea:focus { border-color: var(--gold); }
.field textarea { min-height: 84px; resize: vertical; }
.seg { display: flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 10px; color: var(--ink2); font-weight: 600; }
.seg button.on { background: var(--card2); color: var(--gold2); box-shadow: inset 0 0 0 1px var(--line); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: var(--card2); border: 1px solid var(--line); color: var(--ink2); white-space: nowrap; }
.chip.gold { color: var(--gold2); border-color: #6b5222; }
.chip.red { color: #f0a593; border-color: #6b2a1d; }
.chip.teal { color: var(--magic); border-color: #24544e; }
.err { color: #f0a593; min-height: 20px; font-size: 14px; margin: 6px 0; }
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); background: #3a2c1c;
  border: 1px solid #6b5222; color: var(--ink); padding: 10px 14px; border-radius: 12px; z-index: 90; max-width: 90vw;
  font-size: 14px; box-shadow: 0 10px 30px #0009; }

/* ---------- home ---------- */
.home { justify-content: center; text-align: center; gap: 22px; position: relative; isolation: isolate; }
/* home background art (Andrew, 19 Oct): castle + dragon, darkened so the buttons and words stay easy to read */
.home::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,10,6,.10) 0%, rgba(14,10,6,.30) 40%, rgba(14,10,6,.45) 70%, rgba(14,10,6,.60) 100%),
    url("home_bg.jpg?v=3") center top / cover no-repeat, var(--bg); }
/* wide screens (tablet sideways, computer): show the whole picture, never a zoomed-in slice of it */
@media (min-aspect-ratio: 4/5) { .home::before { background-size: 100% 100%, auto 100%; background-position: 0 0, center top; } }
.home { text-shadow: 0 1px 3px #000, 0 0 14px #000, 0 0 28px #000a; }
/* let the picture show: the dragon and castle up top, the menu sits low over the forest */
.home { justify-content: flex-end; min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-bottom: calc(28px + var(--safe-b, 0px)); }
.hometables { max-width: 372px; margin: 0 auto 18px; text-shadow: 0 1px 3px #000, 0 0 14px #000; }
.home .hero-logo { width: 96px; height: 96px; border-radius: 22px; }
.sigil { width: 84px; height: 84px; margin: 0 auto; }
.hero-logo { display: block; width: 148px; height: 148px; margin: 0 auto; border-radius: 32px; object-fit: cover;
  border: 2px solid #6b5222; box-shadow: 0 10px 40px #0009, 0 0 0 6px #d9a44114; }
.home .tag { font-family: var(--serif); font-size: 19px; color: var(--ink2); line-height: 1.4; max-width: 330px; margin: 0 auto; }
.home .actions { display: flex; flex-direction: column; gap: 10px; max-width: 340px; margin: 0 auto; width: 100%; }
.footer { color: var(--mute); font-size: 12px; text-align: center; padding: 18px; }
.music-btn { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 50; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--line, #5a4630); background: rgba(20, 14, 8, .78); color: inherit; font-size: 19px;
  line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.music-btn[hidden] { display: none; }

/* ---------- builder ---------- */
.steps { display: flex; gap: 6px; margin: 4px 0 18px; }
.steps i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps i.on { background: var(--gold); }
.choices { display: grid; gap: 10px; }
.choice { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--r); padding: 14px; }
.choice.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: #2b2215; }
.choice .t { font-family: var(--display); font-size: 17px; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.choice .d { color: var(--ink2); font-size: 14px; margin-top: 4px; line-height: 1.4; }
.choice .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.stickybar { position: sticky; bottom: 0; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(180deg, #120e0a00, var(--bg) 35%);
  display: flex; gap: 10px; }
.stickybar .btn { flex: 1; }
.abil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.abil { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.abil .n { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); font-weight: 700; }
.abil select { width: 100%; margin-top: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 9px; }
.abil .res { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.abil .res b { font-size: 24px; font-family: var(--display); }
.abil .res span { color: var(--gold2); font-weight: 700; }
.abil .res em { color: var(--magic); font-style: normal; font-size: 12px; }
.rolled { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.rolled .r { background: var(--card); border: 1px solid #6b5222; border-radius: 10px; padding: 8px 12px; text-align: center; min-width: 48px; }
.rolled .r b { display: block; font-family: var(--display); font-size: 22px; color: var(--gold2); }
.rolled .r small { color: var(--mute); font-size: 11px; }
.pick { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  text-align: left; width: 100%; }
.pick.on { border-color: var(--gold); background: #2b2215; }
.pick .box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--mute); flex: none; margin-top: 1px; display: grid; place-items: center; }
.pick.on .box { border-color: var(--gold); background: var(--gold); color: #241707; }
.pick .pt { font-weight: 600; }
.pick .pd { color: var(--ink2); font-size: 13px; line-height: 1.4; margin-top: 3px; }
.picklist { display: grid; gap: 8px; }
.counter { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 8px 0; color: var(--gold2); font-weight: 700; font-size: 14px; }

/* ---------- game ---------- */
.game { height: 100%; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #140f0bee;
  backdrop-filter: blur(8px); position: relative; z-index: 5; }
.topbar .title { flex: 1; min-width: 0; }
.topbar .title b { font-family: var(--display); color: var(--gold2); font-size: 16px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title span { font-size: 12px; color: var(--mute); }
.iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; flex: none; }
.iconbtn svg { width: 20px; height: 20px; }
.combatbar { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #1d120c; scrollbar-width: none; }
.combatbar::-webkit-scrollbar { display: none; }
.combatbar .ini { flex: none; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 12px; line-height: 1.25; }
.combatbar .ini.mon { border-color: #5a261b; }
.combatbar .ini.cur { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.combatbar .ini.down { opacity: .4; text-decoration: line-through; }
.combatbar .ini b { display: block; font-weight: 700; color: var(--ink); }
.combatbar .rnd { flex: none; align-self: center; color: var(--ember); font-family: var(--display); font-size: 12px; padding: 0 4px; }

.panes { flex: 1; min-height: 0; position: relative; }
.pane { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.jumpdown { position: absolute; right: 14px; bottom: 14px; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #6b5222; background: #1f1810f0; color: var(--gold2); font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 6px 20px #000a; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .2s, transform .2s; }
.jumpdown.on { opacity: 1; transform: none; pointer-events: auto; }
.jumpdown.new::after { content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: #e05a3a; box-shadow: 0 0 0 2px #1f1810; }
.panes:has(#pStory.hidden) .jumpdown { display: none; }
.feed { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.e-dm { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink); border-left: 2px solid #6b5222; padding: 2px 0 2px 14px; }
.e-dm p { margin: 0 0 10px; }
.e-dm { position: relative; }
.e-dm .say { float: right; margin: 2px 0 4px 8px; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--gold2); display: grid; place-items: center; padding: 0; opacity: .8; }
.e-dm p:last-child { margin: 0; }
.e-act { align-self: flex-end; max-width: 86%; background: #2c2318; border: 1px solid var(--line); border-radius: 16px 16px 4px 16px; padding: 9px 13px; }
.e-act .who { font-size: 11px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.e-act.mine { background: #33270f; border-color: #6b5222; }
.e-dm.priv { border: 1px dashed #6b5a8a; background: #1d1826; border-radius: 14px; padding: 10px 12px; }
.privtag { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #c7b2ff; margin-bottom: 4px; }
.e-act.priv { border-style: dashed; }
.e-ooc { align-self: flex-start; max-width: 90%; background: #14212a; border: 1px solid #2f4b5e; border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 14px; }
.e-ooc.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: #1a2a20; border-color: #355a41; }
.e-ooc .who { font-size: 11px; color: #9cc3dc; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.e-ooc.mine .who { color: #a5d6b3; }
.e-ooc p { margin: 0 0 6px; } .e-ooc p:last-child { margin: 0; }
.askthread { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; margin-top: 10px; }
.askthread:empty { display: none; }
.bhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bhead .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.askbtn { min-height: 34px; padding: 6px 10px; font-size: 13px; white-space: nowrap; flex: none; }
.choice.tryrow { padding: 8px 10px; margin-bottom: 8px; }
.choice.tryrow .rolled { margin: 6px 0 0; }
.dthemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.dtheme { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink2); border-radius: 10px; padding: 6px 8px; font-size: 12px; font-weight: 600; text-align: left; min-width: 0; }
.dtheme i { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px #0006; }
.dtheme span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtheme.on { border-color: var(--gold); color: var(--gold2); background: #2b2215; }
#cTo button { padding: 6px 2px; font-size: 12.5px; white-space: nowrap; }
.trow { display: flex; gap: 6px; align-items: stretch; }
.trow .choice { flex: 1; min-width: 0; }
.tdel { flex: none; width: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--ink2); font-size: 16px; margin-bottom: 8px; }
.btn.danger { border-color: #6b2a22; color: #f0a597; }
#nLevel button { padding: 10px 2px; font-size: 13px; }
.e-chat { align-self: flex-start; max-width: 86%; background: #18222b; border: 1px dashed #3d5468; border-radius: 16px 16px 16px 4px; padding: 8px 12px; font-size: 14px; }
.e-chat.mine { align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.e-chat .who { font-size: 11px; color: #8fb3cf; font-weight: 700; letter-spacing: .04em; margin-bottom: 2px; }
.seg.mini { margin-bottom: 8px; padding: 3px; }
.seg.mini button { padding: 6px; font-size: 13px; }
.chip.pickstart { cursor: pointer; font-size: 13px; padding: 7px 11px; }
.chip.pickstart.on { background: var(--gold); color: #241707; border-color: var(--gold2); }
#nStart { flex-wrap: wrap; gap: 6px; }
.e-sys { text-align: center; color: var(--mute); font-size: 13px; padding: 0 10px; }
.e-combat { text-align: center; color: #f0a593; font-family: var(--display); font-size: 13px; padding: 6px 10px; border-top: 1px solid #5a261b; border-bottom: 1px solid #5a261b; }
.e-turn { text-align: center; color: var(--gold2); font-family: var(--display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.e-ledger { font-size: 12.5px; color: var(--ink2); display: flex; gap: 6px; align-items: flex-start; padding: 0 4px; }
.e-ledger svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--gold); }
.e-roll { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.e-roll.enemy { border-color: #4a2017; background: #1f1410; }
.e-roll .face { flex: none; width: 42px; height: 42px; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 17px;
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); background: var(--gold); color: #241707; }
.e-roll .face.bad { background: #8a3423; color: #fde3da; }
.e-roll .face.crit { background: radial-gradient(circle, #fff3c4, var(--gold2)); }
.e-roll .face.dmg { background: var(--ember); color: #fff; }
.e-roll .face.heal { background: var(--good); color: #10200b; }
.e-roll .rt { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.e-roll .rt small { display: block; color: var(--mute); font-size: 12px; }
.e-roll .replay { flex: none; border: 0; background: transparent; color: var(--mute); padding: 6px; }
.e-img img { width: 100%; border-radius: 14px; border: 1px solid var(--line); display: block; }
.e-img figcaption { color: var(--mute); font-size: 12px; margin-top: 6px; font-style: italic; }
.painting { display: flex; align-items: center; justify-content: center; gap: 8px; }
.dots i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--gold); border-radius: 50%; animation: bob 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

.composer { border-top: 1px solid var(--line); background: #140f0bf2; padding: 10px 12px calc(10px + var(--safe-b)); }
.composer .status { font-size: 13px; color: var(--ink2); margin: 0 2px 8px; display: flex; align-items: center; gap: 8px; min-height: 18px; }
.composer .row { display: flex; gap: 8px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; max-height: 120px;
  min-height: 48px; outline: none; font-size: 16px; line-height: 1.35; }
.composer textarea:focus { border-color: var(--gold); }
.send { width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--gold); color: #241707; display: grid; place-items: center; flex: none; }
.send:disabled { background: var(--card2); color: var(--mute); }
.paint { width: 54px; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; flex: none; color: var(--gold2); padding: 0; }
.paint svg { width: 20px; height: 20px; }
.paint span { font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 1; }
.rollbtn { width: 100%; min-height: 64px; border-radius: 16px; border: 1px solid #f6d27f; background: linear-gradient(180deg, var(--gold2), var(--gold));
  color: #241707; font-weight: 800; font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 0 0 #f3c76688; animation: pulse 1.6s infinite; }
.rollbtn small { font-weight: 600; font-size: 12px; opacity: .8; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #f3c76677; } 70% { box-shadow: 0 0 0 14px #f3c76600; } 100% { box-shadow: 0 0 0 0 #f3c76600; } }
.begin { margin: 30px auto; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 12px; }

.tabs { display: flex; border-top: 1px solid var(--line); background: #110d09; padding-bottom: var(--safe-b); }
.tabs button { flex: 1; border: 0; background: transparent; padding: 9px 0 10px; color: var(--mute); font-size: 11px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.tabs button svg { width: 22px; height: 22px; }
.tabs button.on { color: var(--gold2); }
.tabs button { position: relative; }
.tabs button.pickdot::after { content: ""; position: absolute; top: 7px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--gold2); box-shadow: 0 0 0 2px #110d09; }
.tabs .dot { position: absolute; top: 6px; left: 56%; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); }

/* sheet */
.sheet { padding: 16px 14px 30px; max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.hero { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.hero .nm { font-family: var(--display); font-size: 22px; color: var(--gold2); }
.hero .rc { color: var(--ink2); font-size: 14px; margin-top: 2px; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; text-align: center; }
.stat b { display: block; font-family: var(--display); font-size: 20px; }
.stat span { font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; }
.bar { height: 8px; background: var(--bg2); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a2a1b, var(--ember)); }
.bar.hp i { background: linear-gradient(90deg, #4f8a3e, var(--good)); }
.bar.hp.low i { background: linear-gradient(90deg, #7a2a1b, var(--ember)); }
.bar.xp i { background: linear-gradient(90deg, #7a5a1b, var(--gold)); }
.abils6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; text-align: center; }
.ab .k { font-size: 11px; color: var(--mute); font-weight: 700; letter-spacing: .1em; }
.ab .m { font-family: var(--display); font-size: 22px; color: var(--gold2); }
.ab .s { font-size: 12px; color: var(--ink2); }
.rows { display: flex; flex-direction: column; }
.rowi { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2c241b; font-size: 14px; }
.rowi:last-child { border-bottom: 0; }
.rowi.feat, .chip.feat { cursor: pointer; }
.infobtn { display: inline-block; padding: 4px 7px; margin: -4px -4px -4px 2px; color: var(--gold2); font-size: 15px; cursor: pointer; }
.infolink { color: var(--gold2); cursor: pointer; white-space: nowrap; }
.choice.dim { opacity: .5; }
.ordbtns { display: inline-flex; flex-direction: column; gap: 2px; }
.fcode { font-family: var(--display); font-size: 34px; letter-spacing: .12em; color: var(--gold2); margin: 6px 0 10px; }
.odot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6b5d4a; margin-right: 8px; vertical-align: middle; }
.odot.on { background: #5fd17a; box-shadow: 0 0 6px #5fd17a; }
.fbadge { display: inline-block; min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--gold2); color: #1a1208; font-size: 12px; font-weight: 700; margin-left: 6px; }
.fbadge.hidden { display: none; }
.aligngrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.aligngrid button { background: var(--card2, rgba(255,255,255,.04)); border: 1px solid var(--line); color: inherit; border-radius: 10px; padding: 8px 4px; font-size: 12px; line-height: 1.25; cursor: pointer; }
.aligngrid button.on { border-color: var(--gold2); color: var(--gold2); background: rgba(212,175,55,.12); }
.meter { height: 6px; background: var(--line); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; background: var(--gold2); transition: width .08s; }
.ordbtn { background: none; border: 1px solid var(--line); color: var(--gold2); border-radius: 6px; font-size: 10px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.ordbtn[disabled] { opacity: .25; cursor: default; }
#bDeity { width: 100%; background: var(--bg2); color: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 11px 10px; font: inherit; font-size: 15px; }
.lvgrid { overflow-x: auto; margin: 0 -4px; }
.lvgrid table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lvgrid th { text-align: left; color: var(--mute); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg2); }
.lvgrid td { padding: 6px 4px; border-bottom: 1px solid #2c241b; vertical-align: top; }
.lvgrid td.lv { font-family: var(--display); color: var(--gold2); font-size: 15px; }
.lvgrid .chip { margin: 0 3px 3px 0; }
.rowi.feat .r { color: var(--gold2); opacity: .7; }
.rowi.feat:active, .chip.feat:active { opacity: .7; }
.feat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rowi .l { color: var(--ink); min-width: 0; }
.rowi .l small { display: block; color: var(--mute); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.rowi .r { color: var(--gold2); font-weight: 700; flex: none; text-align: right; }
.rowi.prof .l::before { content: '●'; color: var(--gold); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.rowi.np .l::before { content: '○'; color: var(--mute); font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.pips { display: inline-flex; gap: 4px; }
.pips i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--magic); }
.pips i.full { background: var(--magic); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.gold-amt { font-family: var(--display); color: var(--gold2); font-size: 20px; }

/* party */
.pm { display: flex; gap: 12px; align-items: center; }
.pm .av { width: 44px; height: 44px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); display: grid; place-items: center;
  font-family: var(--display); color: var(--gold2); font-size: 18px; flex: none; }
.pm .info { flex: 1; min-width: 0; }
.pm .info b { font-family: var(--display); }
.pm .info small { display: block; color: var(--ink2); }
.adjust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.adjust select, .adjust input { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; width: 100%; }
.adjust .wide { grid-column: span 2; }

/* ledger */
.lg { font-size: 13.5px; }
.lg .rowi .l b { color: var(--gold2); font-weight: 600; }
.lg .rowi .r { color: var(--ink2); font-weight: 500; font-size: 12px; }
.by { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--mute); margin-left: 6px; }
.by.host { color: #f0a593; border-color: #6b2a1d; }

/* dice overlay */
#diceOverlay { position: fixed; inset: 0; z-index: 100; background: radial-gradient(circle at 50% 42%, #2f2213fa, #0c0806fc 70%);
  display: none; }
#diceOverlay.on { display: block; }
#diceOverlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#diceOverlay .dice-banner { position: absolute; left: 0; right: 0; bottom: calc(10% + var(--safe-b)); text-align: center; padding: 0 20px; pointer-events: none; }
.db-title { font-family: var(--display); color: var(--ink2); font-size: 15px; letter-spacing: .06em; }
.db-total { font-family: var(--display); font-size: 64px; color: var(--gold2); line-height: 1.05; text-shadow: 0 0 30px #d9a44166; animation: pop .35s ease-out; }
.db-detail { color: var(--ink2); font-size: 15px; margin-top: 2px; }
.db-out { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; font-weight: 800; letter-spacing: .12em; font-size: 15px;
  background: var(--card2); border: 1px solid var(--line); animation: pop .35s ease-out; }
.db-out.good { color: #10200b; background: var(--good); border-color: #a7dd94; }
.db-out.bad { color: #fde3da; background: #8a3423; border-color: #c9472f; }
#diceOverlay.crit { background: radial-gradient(circle at 50% 42%, #6b4a12f2, #0c0806f5 70%); }
#diceOverlay.crit .db-total { color: #fff3c4; text-shadow: 0 0 40px #f3c766; }
#diceOverlay.fumble { background: radial-gradient(circle at 50% 42%, #4a150cf2, #0c0806f5 70%); }
#diceOverlay .tapnote { position: absolute; bottom: calc(3% + var(--safe-b)); left: 0; right: 0; text-align: center; color: var(--mute); font-size: 12px; opacity: 0; }
#diceOverlay.done .tapnote { opacity: 1; transition: opacity .4s .3s; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal { position: fixed; inset: 0; background: #000a; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.modal > .box { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); width: 100%; max-width: 560px;
  max-height: 88vh; overflow-y: auto; }
.modal > .box h2 { margin-bottom: 10px; }
.lightbox { position: fixed; inset: 0; background: #000e; z-index: 95; display: grid; place-items: center; padding: 10px; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; }
@media (min-width: 700px) { .e-dm { font-size: 20px; } }
@supports (height: 100dvh) { .game { height: 100dvh; } }

/* class theme: faint weapon shadow + colour wash, set from the player's class */
.screen.game { position: relative; isolation: isolate; }
.clsbg { position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--cls, transparent) 26%, transparent), transparent 70%),
              radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--cls, transparent) 16%, transparent), transparent 70%); }
.clsbg::after { content: ""; position: absolute; right: -14vmin; bottom: 14vh; width: 88vmin; height: 88vmin; max-width: 640px; max-height: 640px;
  background: var(--cls, transparent); opacity: .13; transform: rotate(-24deg);
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.screen.game .e-dm { border-left-color: color-mix(in srgb, var(--cls, #6b5222) 65%, #6b5222); }

.screen.game[data-cls="fighter"] { --cls: #6f93bd; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L56 14 L56 66 L44 66 L44 14 Z'/%3E%3Crect x='30' y='66' width='40' height='6' rx='3'/%3E%3Crect x='47' y='72' width='6' height='16'/%3E%3Ccircle cx='50' cy='92' r='5'/%3E%3C/svg%3E"); }
.screen.game[data-cls="paladin"] { --cls: #e2bb5c; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6 L86 18 L86 46 C86 70 70 86 50 96 C30 86 14 70 14 46 L14 18 Z'/%3E%3C/svg%3E"); }
.screen.game[data-cls="ranger"] { --cls: #5f9c54; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 6 Q80 50 32 94' fill='none' stroke='%23000' stroke-width='5'/%3E%3Cpath d='M32 6 L32 94' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 50 L82 50' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M90 50 L76 43 L79 50 L76 57 Z'/%3E%3Cpath d='M12 50 L5 44 M12 50 L5 56' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E"); }
.screen.game[data-cls="scout"] { --cls: #93a64a; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M32 6 Q80 50 32 94' fill='none' stroke='%23000' stroke-width='5'/%3E%3Cpath d='M32 6 L32 94' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M12 50 L82 50' stroke='%23000' stroke-width='2.5'/%3E%3Cpath d='M90 50 L76 43 L79 50 L76 57 Z'/%3E%3Cpath d='M12 50 L5 44 M12 50 L5 56' stroke='%23000' stroke-width='2.5'/%3E%3C/svg%3E"); }
.screen.game[data-cls="barbarian"] { --cls: #c0533b; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='47' y='6' width='6' height='90' rx='3'/%3E%3Cpath d='M53 12 C78 10 92 24 92 42 C80 36 66 36 53 40 Z'/%3E%3Cpath d='M47 12 C22 10 8 24 8 42 C20 36 34 36 47 40 Z'/%3E%3C/svg%3E"); }
.screen.game[data-cls="rogue"] { --cls: #4f9a95; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 14 L55 24 L55 60 L45 60 L45 24 Z'/%3E%3Crect x='37' y='60' width='26' height='5' rx='2.5'/%3E%3Crect x='47' y='65' width='6' height='16'/%3E%3Ccircle cx='50' cy='85' r='4'/%3E%3C/svg%3E"); }
.screen.game[data-cls="ninja"] { --cls: #b23a4c; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L58 42 L96 50 L58 58 L50 96 L42 58 L4 50 L42 42 Z'/%3E%3C/svg%3E"); }
.screen.game[data-cls="wizard"] { --cls: #5b74d6; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='47' y='24' width='6' height='74' rx='3'/%3E%3Ccircle cx='50' cy='14' r='11'/%3E%3Cpath d='M36 26 Q50 33 64 26' fill='none' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E"); }
.screen.game[data-cls="sorcerer"] { --cls: #d4497f; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 C62 24 78 34 74 60 C71 82 56 94 50 94 C40 94 26 84 26 64 C26 48 36 40 40 28 C44 40 48 44 52 46 C54 34 52 18 50 4 Z'/%3E%3C/svg%3E"); }
.screen.game[data-cls="warlock"] { --cls: #8e5ad0; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill-rule='evenodd' d='M4 50 Q50 8 96 50 Q50 92 4 50 Z M50 33 A17 17 0 1 0 50.01 33 Z'/%3E%3Ccircle cx='50' cy='50' r='8'/%3E%3C/svg%3E"); }
.screen.game[data-cls="cleric"] { --cls: #ecd69a; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='17'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(0 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(45 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(90 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(135 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(180 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(225 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(270 50 50)'/%3E%3Crect x='47' y='6' width='6' height='22' rx='3' transform='rotate(315 50 50)'/%3E%3C/svg%3E"); }
.screen.game[data-cls="druid"] { --cls: #6f9a3a; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 96 C46 70 16 60 18 30 C20 14 40 6 50 4 C60 6 80 14 82 30 C84 60 54 70 50 96 Z'/%3E%3C/svg%3E"); }
.screen.game[data-cls="bard"] { --cls: #cf5cbc; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='46' y='4' width='8' height='46' rx='3'/%3E%3Crect x='40' y='4' width='20' height='7' rx='3'/%3E%3Cellipse cx='50' cy='70' rx='24' ry='26'/%3E%3C/svg%3E"); }
.screen.game[data-cls="monk"] { --cls: #e08a36; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M70 16 A36 36 0 1 0 86 46' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.screen.game[data-cls="spellthief"] { --cls: #36a9b6; --art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 14 L55 24 L55 60 L45 60 L45 24 Z'/%3E%3Crect x='37' y='60' width='26' height='5' rx='2.5'/%3E%3Crect x='47' y='65' width='6' height='16'/%3E%3Ccircle cx='50' cy='85' r='4'/%3E%3Cpath d='M78 8 L81 18 L91 21 L81 24 L78 34 L75 24 L65 21 L75 18 Z'/%3E%3C/svg%3E"); }
/* energy meter (off until ENERGY_ON) */
.energy { font-style: normal; }
.energy.low { color: #f0a593; }
.fakecount { font-size: 54px; font-family: var(--serif); color: var(--gold2); margin: 10px 0; }
.edition { display: inline-block; margin-top: 4px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #241707; background: var(--gold2); border-radius: 999px; padding: 5px 10px; text-shadow: none; }