/* Phones (Safari especially) enlarge long paragraphs on their own; keep every text at the size we set. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
:root{
  --bg:#e9ebe4; --surface:#f7f7f2; --surface2:#dfe2d8; --ink:#1b2230; --muted:#4f5664; --line:#b8bcae;
  --brass:#7e5a12; --brass-soft:#efe3c6; --horror:#2f6b4f; --horror-soft:#d5e8dc;
  --danger:#a3322a; --danger-soft:#f4dcd8; --ok:#2f6b4f; --warn:#8a5a00; --focus:#2d5bd1;
  --rust:#a8481a; --rust-soft:#f6e0d2; --mind:#6a4a9c; --mind-soft:#e7dff3;
  --display:'Bodoni Moda',Didot,'Times New Roman',serif; --body:'Libre Franklin','Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark; --bg:#11151c; --surface:#1a2029; --surface2:#242b36; --ink:#e8e5da; --muted:#a9adb5; --line:#3a4250;
  --brass:#d6ab52; --brass-soft:#3a3120; --horror:#63b98e; --horror-soft:#1f3a2e; --danger:#ef7c70; --danger-soft:#43221f; --ok:#63b98e; --warn:#e2b04a; --focus:#8fb0ff; --rust:#f0915a; --rust-soft:#46291a; --mind:#b9a0ee; --mind-soft:#2d2540;}}
:root[data-theme="dark"]{
  color-scheme:dark; --bg:#11151c; --surface:#1a2029; --surface2:#242b36; --ink:#e8e5da; --muted:#a9adb5; --line:#3a4250;
  --brass:#d6ab52; --brass-soft:#3a3120; --horror:#63b98e; --horror-soft:#1f3a2e; --danger:#ef7c70; --danger-soft:#43221f; --ok:#63b98e; --warn:#e2b04a; --focus:#8fb0ff; --rust:#f0915a; --rust-soft:#46291a; --mind:#b9a0ee; --mind-soft:#2d2540;}
*{box-sizing:border-box}
/* links everywhere: the text colour with a soft underline (no yellow) */
a{color:var(--ink);text-decoration-color:var(--muted);text-underline-offset:2px}
a:hover{text-decoration-color:var(--ink)}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{max-width:980px;margin:0 auto;padding:12px 16px 0;display:flex;flex-direction:column;gap:8px}
.brand{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand h1{font-family:var(--display);font-weight:700;font-size:24px;margin:0;letter-spacing:.3px}
.brand small{color:var(--muted);font-size:12px}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}

.brand .links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.brand .links a.btn{text-decoration:none;color:inherit}
.tab{border:0;background:none;padding:10px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;color:var(--muted);font-weight:600}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brass)}
main{max-width:980px;margin:0 auto;padding-block:18px 60px;padding-inline:16px;display:flex;flex-direction:column;gap:16px}
.sec{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px}
.sec h2{font-family:var(--display);font-size:20px;margin:0;font-weight:700;text-wrap:balance}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lbl{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:4px;padding:8px 12px;min-height:40px;cursor:pointer;font-weight:600;font-size:14px}
.btn:hover{background:var(--surface2)}
.btn.pri{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.btn.dng{color:var(--danger);border-color:var(--danger)}
.btn.hor{color:var(--horror);border-color:var(--horror)}
.btn.sm{min-height:32px;padding:4px 9px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
/* Dropdowns, checkboxes and radio buttons you can't use (say, on someone else's sheet) look it, like buttons do. */
select:disabled,input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:not-allowed}
.icon{width:32px;min-height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}
input.f,select.f,textarea.f{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:6px 2px;border-radius:0}
input.f[type=datetime-local],input.f[type=date],input.f[type=time]{-webkit-appearance:none;appearance:none;text-align:left;min-height:2.3em;color:var(--ink)}
input.f::-webkit-date-and-time-value{text-align:left;margin:0}
input.f::-webkit-datetime-edit{padding:0}
.avatar{flex:none;border-radius:50%;object-fit:cover;background:var(--surface2);border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--display);font-weight:700;overflow:hidden}
.avatar.lg{width:88px;height:88px;font-size:34px}.avatar.sm{width:48px;height:48px;font-size:20px}
.crop-bg{position:fixed;inset:0;z-index:20;background:rgba(10,12,16,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.crop{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;gap:14px;align-items:center;width:min(340px,100%)}
.crop h2{margin:0;font-family:var(--display);font-size:20px}
.crop canvas{width:260px;height:260px;max-width:100%;border-radius:50%;touch-action:none;cursor:grab;background:var(--surface2);box-shadow:0 0 0 2px var(--ink)}
.crop.wide{width:min(620px,100%)}
.crop canvas.rect{width:320px;height:180px;border-radius:8px}
.crop canvas.sq{border-radius:8px}
/* Square pictures for enemies and people met. */
.sqpic{flex:none;width:56px;height:56px;border-radius:6px;object-fit:cover;border:1px solid var(--line);background:var(--surface2);cursor:zoom-in}
.crop canvas:active{cursor:grabbing}
.crop input[type=range]{width:100%;accent-color:var(--ink)}
.pic-btns{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
/* sheet header: picture on the left (its buttons under it when you can edit), name and status beside it; the same whether or not you can edit */
.sheethead{display:flex;gap:14px;align-items:flex-start}
.shpic{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px}
.shname{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:6px}
.shname .chips{justify-content:flex-start}
.namein:disabled{color:var(--ink);-webkit-text-fill-color:var(--ink);opacity:1}
select{background-color:var(--surface);color:var(--ink)}
select option,select optgroup{background-color:var(--surface);color:var(--ink)}
select optgroup{font-weight:700;color:var(--muted)}
select.f{appearance:none;-webkit-appearance:none;padding-right:26px;background-color:var(--surface);background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
textarea.f{border:1px solid var(--line);border-radius:4px;padding:8px;min-height:60px;resize:vertical}
input.f:focus,select.f:focus,textarea.f:focus{border-color:var(--brass);outline:none}
.field{display:flex;flex-direction:column;gap:2px;min-width:0}
.namein{font-family:var(--display);font-size:30px;font-weight:700;border:0;border-bottom:1px solid transparent;background:transparent;width:100%;padding:0}
.namein:focus{border-bottom-color:var(--brass);outline:none}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.chip.ok{background:var(--horror-soft);color:var(--ok)}
.chip.bad{background:var(--danger-soft);color:var(--danger)}
.chip.warn{background:var(--brass-soft);color:var(--warn)}
.chip.inj{background:var(--rust-soft);color:var(--rust)}
.chip.mind{background:var(--mind-soft);color:var(--mind)}
.chips{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;flex:none}
/* dice pool */
.pool{display:flex;gap:6px;flex-wrap:wrap}
.die{width:40px;height:40px;border-radius:7px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;background:var(--surface)}
.die.reg::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
.die.hor{background:var(--horror);border-color:var(--horror)}
.die.hor::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--surface)}
.die.empty{border-style:dashed;border-color:var(--line)}
.die.pend{border-color:var(--horror);border-style:solid;box-shadow:0 0 0 3px var(--horror-soft)}
.die.lost{border:2px solid var(--danger-soft);background:repeating-linear-gradient(45deg,var(--danger-soft) 0 4px,transparent 4px 8px)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface2);border-radius:4px;min-width:110px}
.stat b{font-family:var(--mono);font-size:20px}
.stepper{display:inline-flex;align-items:center;gap:6px}
/* skills */
.skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.skill{display:flex;align-items:center;gap:8px;min-height:52px;border-bottom:1px dotted var(--line)}
.skill .nm{flex:1;font-weight:600}
.skill .btn.sm{min-width:76px;justify-content:center;text-align:center;flex-shrink:0}
.rate{flex-shrink:0;width:42px;height:42px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:15px}
.maxsel{width:58px;border:1px solid var(--line);border-radius:4px;background:var(--surface);padding:4px}
/* the small boxed dropdowns get the same arrow as the others */
select.maxsel{appearance:none;-webkit-appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}
.skill select.maxsel{width:62px;flex-shrink:0;padding:4px 20px 4px 10px;text-align:center;text-align-last:center;font-family:var(--mono);font-variant-numeric:tabular-nums}
/* lists */
.list{display:flex;flex-direction:column}
.item{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.tier{font-family:var(--mono);font-size:12px;border:1px solid var(--brass);color:var(--brass);border-radius:3px;padding:2px 6px;white-space:nowrap}
.effect{font-size:13px;color:var(--muted)}
.wgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ammo{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pip{width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);background:var(--ink);cursor:pointer;padding:0}
.pip.spent{background:transparent;border-color:var(--line)}
.note{font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:6px;font-size:14px;max-width:calc(100% - 32px);z-index:9}
.roll{border:1px solid var(--brass);background:var(--brass-soft);border-radius:4px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
details.sec>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::after{content:"+";font-family:var(--mono);font-size:20px;color:var(--muted)}
details.sec[open]>summary::after{content:"–"}
/* party */
.party{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer}
.pcard:hover{border-color:var(--brass)}
.pcard h3{margin:0;font-family:var(--display);font-size:21px}
.pcard>.row:first-child{flex-wrap:nowrap;align-items:flex-start}
.pcard>.row:first-child>.row{flex:1;min-width:0;align-items:center}
.pcard>.row:first-child>.row>div:last-child{min-width:0}
.pcard>.row:first-child>.row>:first-child{flex:none}
.pcard h3{overflow-wrap:break-word;hyphens:auto}
.pcard .chips{max-width:45%;padding-top:4px}
.mini .die{width:24px;height:24px;border-radius:5px;border-width:2px}
.mini .die::after{width:5px!important;height:5px!important}
.kv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.kv div{display:flex;flex-direction:column;background:var(--surface2);border-radius:4px;padding:6px 8px}
.kv b{font-family:var(--mono);font-size:15px}
.log{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.chip:not(.ok):not(.bad):not(.warn):not(.inj):not(.mind){background:var(--surface2);color:var(--muted)}
.turnbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--horror);background:var(--horror-soft);border-radius:6px;padding:10px 14px}
.turnbar.adv{border-color:var(--danger);background:var(--danger-soft)}
.turnbar .ph{font-weight:700;font-family:var(--display);font-size:18px}
.enemy{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.npcp{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.skgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.skgrid span{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:4px;padding:3px 2px}
.skgrid small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.linkish{align-self:flex-start}
.clues{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.clue{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--surface);display:flex;flex-direction:column;gap:4px}
.clue.draft{border-style:dashed}
.clue h3{margin:4px 0 0;font-family:var(--display);font-size:18px}
.handout{width:100%;border-radius:4px;margin-top:6px}
.rollout{display:flex;gap:6px;flex-wrap:wrap}
.rd{width:36px;height:36px;border-radius:7px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-weight:700;opacity:.55}
.rd.s{opacity:1;box-shadow:0 0 0 3px var(--brass-soft)}
.rd.h{background:var(--horror);border-color:var(--horror);color:var(--surface)}
ul.recap{margin:4px 0 0;padding-left:18px}
@media (max-width:560px){.skgrid{grid-template-columns:repeat(5,minmax(0,1fr))}.skgrid small{font-size:9px}}
.banner{border:1px solid var(--line);background:var(--surface2);border-radius:6px;padding:12px 14px;font-size:14px}
.costs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:13px}
.costs span:nth-child(even){text-align:right;font-family:var(--mono)}
@media (max-width:640px){
  .skills,.party,.grid2{grid-template-columns:minmax(0,1fr)}
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .namein{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Site footer; the reCAPTCHA badge is hidden because the footer carries its notice. */
.foot{max-width:980px;margin:0 auto;padding:8px 16px 28px;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0}
.foot>*{opacity:.8}.foot>*+*::before{content:'\00b7';margin:0 8px;opacity:.7;display:inline-block;text-decoration:none}
.foot a{color:var(--muted);text-decoration:none;opacity:.8}.foot a:hover{opacity:1;text-decoration:underline}
/* the language picker in the footer */
.foot .langpick{opacity:1}
.langpick select{font:inherit;font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:6px;padding:1px 4px;cursor:pointer}
.langpick select:hover{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grecaptcha-badge{visibility:hidden!important}

/* Top bar navigation: quiet text links, an account chip and a live dot. */
.tabs{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:thin}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap;font-size:13px}
.nav-l{font:inherit;font-weight:600;color:var(--muted);background:none;border:0;padding:6px 10px;border-radius:999px;text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-l:hover,.nav-l:focus-visible{color:var(--ink);background:var(--surface2)}
.acct{display:inline-flex;align-items:center;gap:6px;padding:2px 2px 2px 4px;margin-left:6px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.acct b{font-weight:600;color:var(--ink)}
.acct .nav-l{padding:4px 10px}
.av{object-fit:cover;width:22px;height:22px;border-radius:50%;background:#56606f;color:#fff;display:inline-grid;place-items:center;font-size:12px;font-weight:700;line-height:1}
.live{display:inline-flex;align-items:center;gap:5px;margin-right:6px;color:var(--muted);font-weight:600}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--horror-soft)}
#ver{font-size:11px;opacity:.7}
@media (max-width:600px){.wide-only{display:none}.nav{gap:0}.acct{margin-left:2px}.nav-l{padding:6px 8px}.brand>.row{flex-wrap:nowrap!important;gap:6px!important}}
.narrow-only{display:none}@media (max-width:600px){.narrow-only{display:inline}}
.brand>.row{margin-left:auto;justify-content:flex-end}
@media (max-width:600px){.brand>.row{width:100%}#sync{flex:1}#sync .nav{width:100%}#sync .acct{margin-left:auto}}
.quota{background:var(--danger-soft);color:var(--ink);border-bottom:2px solid var(--danger);padding:10px 16px;font-size:14px;line-height:1.45;text-align:center}
@media (max-width:600px){.foot>:first-child{display:none}.foot>:nth-child(2){flex-basis:100%;text-align:center}.foot>:nth-child(2)::before,.foot>:nth-child(3)::before{content:none}}
.brandimg{width:48px;height:48px;border-radius:8px;object-fit:cover;vertical-align:-11px;margin-right:12px;border:1px solid var(--line)}
@media (max-width:600px){.brandimg{width:38px;height:38px;vertical-align:-9px;margin-right:9px}}
.recap-sum{margin:0;padding:10px 14px;border-left:3px solid var(--brass);background:var(--brass-soft);border-radius:0 6px 6px 0;line-height:1.55;white-space:pre-wrap}
.sec>.item:last-child{border-bottom:0;padding-bottom:0!important}
@media (max-width:600px){.top-in{position:relative}.acct b{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#sync .nav{flex-wrap:nowrap}}
.acct-me{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.acct-me:hover b{text-decoration:underline}
.titlewrap{display:flex;flex-direction:column;gap:2px;min-width:0}
.crumb{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;align-self:flex-start}
.crumb:hover{color:var(--ink);text-decoration:underline}
.brand{align-items:flex-end}
/* Ledger: version and the live dot sit quietly in the top-right corner, level with the breadcrumb */
.top-in{position:relative}
.brand .meta{position:absolute;top:12px;right:16px;display:flex;align-items:center;gap:10px;font-size:12px}
.brand .meta .live{margin:0;font-size:12px}
.brand .meta #ver{position:static}
@media (max-width:600px){#sync .acct{margin-left:6px}#sync .nav{justify-content:flex-end}}

/* account menu */
.acctwrap{position:relative;display:inline-flex}
.acctbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;border-radius:999px;padding:3px 8px 3px 3px;font:inherit;color:var(--ink);cursor:pointer}
.acctbtn:hover,.acctbtn[aria-expanded="true"]{background:var(--surface2);border-color:var(--line)}
.acctbtn .av{width:28px;height:28px;font-size:13px}
.acctbtn b{font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctbtn .caret{font-size:10px;color:var(--muted)}
.acctmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:6px;display:flex;flex-direction:column;font-size:14px}
.acctmenu[hidden]{display:none}
.acctmenu-head{display:flex;gap:10px;align-items:center;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.acctmenu-head .av{width:34px;height:34px;font-size:15px;flex:none}
.acctmenu-head>span:not(.av){display:flex;flex-direction:column;min-width:0}
.acctmenu-head .note{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctmenu a,.acctmenu button{display:block;text-align:left;padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer}
.acctmenu a:hover,.acctmenu button:hover,.acctmenu a:focus-visible,.acctmenu button:focus-visible{background:var(--surface2)}
@media (max-width:600px){.acctbtn .acctname,.acctbtn .caret{display:none}.acctbtn{padding:2px}}
@media (max-width:600px){.brand:has(#who){flex-wrap:nowrap;align-items:center}.brand:has(#who)>.row{width:auto}}
@media (max-width:600px){.brand:has(#who) #ver{position:static}}
.netwarn{display:inline-block;font-size:12px;font-weight:600;color:var(--warn);background:var(--danger-soft);border:1px solid var(--warn);border-radius:999px;padding:2px 10px}
.acctver{display:block;padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
@media (max-width:600px){.brand{flex-wrap:nowrap;align-items:flex-end}.brand>.row{width:auto!important;flex:none}.titlewrap h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.titlewrap h1{min-width:0}
.crumbrow{display:flex;align-items:center;gap:8px}
.crumbrow .beta,.brand .beta{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px;vertical-align:middle}
.crumbrow .beta{margin:0}
.fbform{width:min(480px,100%);align-items:stretch;gap:14px}
.fbhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fbhead h2{margin:0 0 4px}
.fbhead .note{margin:0}
.fbx{all:unset;cursor:pointer;font-size:24px;line-height:1;color:var(--muted);padding:2px 6px;border-radius:6px}
.fbx:hover{color:var(--ink);background:var(--surface2)}
.fbx:focus-visible{outline:2px solid var(--muted)}
.fbkinds{display:flex;gap:6px;padding:4px;background:var(--surface2);border:1px solid var(--line);border-radius:10px}
.fbkinds .fbkind{flex:1 1 0;min-width:0;display:block;position:relative;cursor:pointer}
.fbkind input{position:absolute;opacity:0;pointer-events:none}
.fbkind span{display:block;text-align:center;white-space:nowrap;padding:8px 6px;border-radius:7px;font-size:14px;font-weight:600;color:var(--muted);transition:background .15s,color .15s}
.fbkind:hover span{color:var(--ink)}
.fbkind input:checked+span{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 1px var(--line)}
.fbkind input:focus-visible+span{outline:2px solid var(--muted);outline-offset:1px}
.fbbox{position:relative}
.fbbox textarea{display:block;width:100%;box-sizing:border-box;min-height:140px;resize:vertical;padding:12px 12px 26px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);color:var(--ink);font:inherit;font-size:15px;line-height:1.5}
.fbbox textarea:focus{outline:none;border-color:var(--muted)}
.fbbox textarea::placeholder{color:var(--muted)}
.fbcount{position:absolute;right:12px;bottom:8px;font-size:11px;color:var(--muted);pointer-events:none}
.fbfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.fbfoot .note{margin:0;font-size:12px;flex:1;min-width:180px}
.fbfoot .row{margin-left:auto}
.fbkinds label{display:inline-flex;gap:6px;align-items:center;cursor:pointer}
.fbform .err{color:var(--danger);font-size:13px;margin:0}
.nextsess{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.nextsess .grow{display:flex;flex-direction:column;gap:2px;min-width:180px;flex:1}
.nextsess .grow .lbl{margin:0}
a.btn{text-decoration:none;color:inherit}
.cdtext{font-size:13px;font-weight:700;color:var(--muted)}
/* hover on cards: a brighter neutral border and a slight lift instead of yellow */
.camp,.pcard{transition:border-color .15s,box-shadow .15s,transform .15s}
.camp:hover,.pcard:hover,.camp.newtile:hover,.camp.newtile:focus-visible{border-color:var(--muted)!important;box-shadow:0 6px 18px rgba(0,0,0,.18);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.camp:hover,.pcard:hover{transform:none}}
.placebox{position:absolute;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:4px;font-size:14px}
.placeopt{padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--ink)}
.placeopt b{font-weight:600}
.placesub{color:var(--muted)}
.placeopt:hover,.placeopt.on{background:var(--surface2)}
.placeattr{font-size:11px;color:var(--muted);padding:4px 10px 2px;border-top:1px solid var(--line);margin-top:4px;text-align:right}
/* Tappable session address with a small Directions / Food nearby menu. */
.placewrap{position:relative;display:inline-block}
.placelink{all:unset;cursor:pointer;color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;border-radius:3px}
.placelink:hover{color:var(--ink);text-decoration-color:var(--muted)}
.placelink:focus-visible{outline:2px solid var(--muted);outline-offset:2px}
.placecaret{font-size:11px;margin-left:4px;text-decoration:none;display:inline-block}
.placemenu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;display:flex;flex-direction:column;min-width:160px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.placemenu[hidden]{display:none}
.placemenu a{padding:8px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:14px;white-space:nowrap}
.placemenu a:hover,.placemenu a:focus-visible{background:var(--surface2)}
.placemenu.right{left:auto;right:0}
.placemenu label,.placemenu button{padding:8px 10px;border-radius:6px;color:var(--ink);font:inherit;font-size:14px;white-space:nowrap;cursor:pointer;border:0;background:none;text-align:left}
.placemenu label:hover,.placemenu label:focus-visible,.placemenu button:hover,.placemenu button:focus-visible{background:var(--surface2)}
.placemenu button.dng{color:var(--danger)}
/* the picture's Edit / Add picture button, just under the portrait */
.picedit>.btn,label.picedit{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.inststeps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;line-height:1.5}
@media (max-width:440px){.brand h1{font-size:19px;letter-spacing:0}.brand h1 .beta{font-size:9px}}
@keyframes clueflash{0%,30%{box-shadow:0 0 0 2px var(--ink);background:var(--surface2)}100%{box-shadow:0 0 0 0 transparent}}
.clue.flash{animation:clueflash 2.6s ease-out}
/* the sample party inside the welcome page (play.html?c=samplecampaign&embed=1) */
.embed .brand,.embed .foot{display:none}
.embed .top{top:0}
.embed main{padding-bottom:24px}
.ctrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width:520px){.ctrow{grid-template-columns:1fr}}
.fbform select.f{width:100%}
/* full-size picture viewer */
img[data-zoom]{cursor:zoom-in}
.lb-bg{position:fixed;inset:0;z-index:200;background:rgba(8,10,14,.94);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));cursor:zoom-out}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lb-fig img{max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-cap{color:#eee;font-size:15px;text-align:center;max-width:640px;line-height:1.4}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:10px;background:rgba(255,255,255,.12);color:#fff;font-size:40px;line-height:1;cursor:pointer}
.lb-nav:hover,.lb-nav:focus-visible{background:rgba(255,255,255,.26)}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-count{position:absolute;top:max(22px,env(safe-area-inset-top));left:16px;color:#ccc;font-size:14px}
@media (max-width:600px){.lb-nav{width:40px;height:52px;font-size:32px;background:rgba(255,255,255,.08)}}
.lb-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-x:hover,.lb-x:focus-visible{background:rgba(255,255,255,.28)}
/* campaign gallery (Journal) */
.galgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.galitem{position:relative;margin:0;display:flex;flex-direction:column;gap:4px;min-width:0}
.galitem img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line);background:var(--surface2);cursor:zoom-in;display:block}
.galitem figcaption{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.galitem .galby{font-size:11px;color:var(--muted)}
.galitem .galby{display:flex;justify-content:space-between;align-items:center;gap:8px}
.galdel{all:unset;cursor:pointer;font-size:12px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.galdel:hover,.galdel:focus-visible{color:var(--danger)}
.galask{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px}
.galpend{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.galpend img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
/* Party tab header: the campaign picture (16:9, tap for full size) beside the next session and the tip */
.partyhead{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:14px;align-items:start}
.partyside{display:flex;flex-direction:column;gap:12px;min-width:0}
.partyside>*{margin:0}
.partybanner{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--surface2)}
@media (max-width:760px){.partyhead{grid-template-columns:1fr}.partybanner{width:min(100%,340px);margin:0 auto}}
/* a knack's effect shown as its definition (not a help note) */
.kdef{color:var(--ink);background:var(--surface2);border-left:3px solid var(--muted);border-radius:0 6px 6px 0;padding:10px 14px;line-height:1.5;font-size:15px}
.pickdesc{margin:-2px 0 0;padding-left:10px;border-left:2px solid var(--line)}
/* A quiet button that reads as a text link (rarely-needed actions). */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.linkbtn:hover,.linkbtn:focus-visible{color:var(--ink);text-decoration-color:currentColor}
.log .by{color:var(--brass);font-style:italic;white-space:nowrap}
.fullhist{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow:auto;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface2)}
.banner.done{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;justify-content:space-between;margin-bottom:16px}