/* wingeye css v2.55.10 */
:root{--bg:#14123a;--panel:#1f1b4a;--ink:#f1ecff;--mute:#a79fcf;--accent:#ffb347;--ok:#58c28a;--err:#ff6b6b;--line:#35306b}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--accent)}
h1,h2,h3{line-height:1.2}
.hint,.by{color:var(--mute);font-size:.92rem}
.tag{display:inline-block;font-size:.72rem;padding:.05rem .5rem;border-radius:999px;background:var(--line);color:var(--ink);vertical-align:middle}
.badge{background:var(--accent);color:#1a1200;border-radius:999px;padding:0 .45rem;font-size:.75rem;font-weight:700}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#0d0b28;border-bottom:1px solid var(--line)}
.topbar nav{display:flex;gap:1rem;align-items:center}
.topbar a{text-decoration:none;color:var(--ink)}
.brand{font-weight:700;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.5rem}
.brand img{height:26px;width:auto;display:block}
form.inline{display:inline;margin:0}
button.linklike{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0;text-decoration:underline}

.flash{padding:.6rem 1rem;margin:0}
.flash.ok{background:#12382a;color:var(--ok)}.flash.err{background:#401c24;color:var(--err)}

/* front scene: one painting that fills the window, cropped to the middle (see views/front.php and scene.js) */
body.front{overflow:hidden;background:#050a14}
body.front #wg-dice{display:none}
.hero{position:fixed;inset:0;overflow:hidden;background:#050a14}
.hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.spot{cursor:pointer;outline:none}
.spot-shape{fill:transparent;stroke:transparent;stroke-width:6;stroke-linejoin:round;transition:fill .2s,stroke .2s}
.board-hover{opacity:0;transition:opacity .18s}
.board:hover .board-hover,.board:focus-visible .board-hover,.board:active .board-hover{opacity:1}
.board .spot-shape{stroke:transparent}
.spot:focus-visible .spot-shape{fill:rgba(255,190,100,.14);stroke:rgba(255,205,130,.85)}
.hero-top{position:absolute;top:0;left:0;right:0;padding:1rem 0 3rem;pointer-events:none;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8);background:linear-gradient(180deg,rgba(5,6,14,.55),rgba(5,6,14,0))}
.hero-logo{display:block;margin:0 auto;width:clamp(96px,9vw,150px);height:auto;filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.bubble{position:fixed;z-index:5;max-width:min(22rem,86vw);background:#fbf6e8;color:#2a1c10;padding:.7rem .95rem;border-radius:14px;font:500 .98rem/1.35 Georgia,serif;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto;opacity:1;transition:opacity .35s,transform .35s;--tail:50%}
.bubble.out{opacity:0;transform:translateY(4px)}
.bubble::after{content:"";position:absolute;left:var(--tail);bottom:-9px;margin-left:-9px;border:9px solid transparent;border-bottom:0;border-top-color:#fbf6e8}
.bubble.flip::after{bottom:auto;top:-9px;border-top:0;border-bottom:9px solid #fbf6e8}
.hero-cta{position:absolute;left:50%;bottom:clamp(1rem,4vh,2.4rem);transform:translateX(-50%);display:flex;gap:.8rem;padding:.7rem .8rem;border-radius:999px;background:rgba(10,7,18,.58);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 24px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.12)}
.cta{padding:.7rem 1.8rem;border-radius:999px;border:0;background:var(--accent);color:#1a1200;font-weight:700;font-size:1.05rem;cursor:pointer}
.cta.alt{background:rgba(251,246,232,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
.cta:hover{filter:brightness(1.08)}
.calib{position:fixed;z-index:20;right:1rem;bottom:1rem;width:min(24rem,92vw);background:rgba(10,8,30,.92);color:#fff;border:1px solid #6a5acd;border-radius:10px;padding:.7rem;font-size:.85rem}
.calib textarea{width:100%;font-family:monospace;font-size:.75rem}
.calib button{margin:.3rem .3rem 0 0;padding:.25rem .6rem}
.calibrating{cursor:crosshair}
.calibrating .spot-shape{fill:rgba(120,200,255,.15);stroke:rgba(120,200,255,.9)}
.calibrating .calib-poly{fill:rgba(255,120,120,.25);stroke:#ff7a7a;stroke-width:6}
.calib-dot{fill:#ff7a7a}
@media (prefers-reduced-motion:reduce){.bubble{transition:none}.spot-shape,.board-hover{transition:none}}
/* phones and small windows: the painting is a backdrop; name and bubble on top, two buttons below */
@media (max-width:820px){
  .spot,.board{pointer-events:none}
    .hero-top{left:0;right:0;top:0;height:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem 1.2rem;background:linear-gradient(180deg,rgba(5,10,20,.72),rgba(5,10,20,0))}
  .hero-logo{width:min(220px,52vw);margin:0 auto}
  .bubble{position:relative;left:auto!important;top:auto!important;margin-top:1.2rem;max-width:min(24rem,90vw)}
  .bubble::after{left:50%;margin-left:-9px}
  .hero-cta{left:0;right:0;bottom:0;transform:none;height:34%;flex-direction:column;justify-content:center;gap:.8rem;padding:0 1.6rem 1.4rem;border-radius:0;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(0deg,rgba(5,10,20,.85),rgba(5,10,20,0))}
  .cta{width:100%;padding:.95rem 1rem;border-radius:12px;border:0;background:var(--accent);color:#1a1200;font-weight:700;font-size:1.1rem;cursor:pointer}
  .cta.alt{background:rgba(251,246,232,.14);color:#fff;border:1px solid rgba(255,255,255,.4)}
}

/* modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}
.modal-backdrop{position:absolute;inset:0;background:rgba(5,4,20,.72)}
.modal-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;width:min(30rem,92vw);max-height:90vh;overflow:auto;padding:1.4rem 1.4rem 1.2rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal[data-sec=characters] .modal-box,.modal[data-sec=stories] .modal-box{width:min(44rem,94vw)}
.modal[data-sec=login] .modal-box,.modal[data-sec=forgot] .modal-box,.modal[data-sec=contact] .modal-box{width:min(24rem,92vw)}
.modal-x{position:absolute;top:.4rem;right:.7rem;background:none;border:0;color:var(--mute);font-size:1.8rem;line-height:1;cursor:pointer}
.modal h2{margin-top:0}

/* mobile: pop-ups take the whole screen */
@media (max-width:640px){
  .modal-box,.modal[data-sec] .modal-box{width:100vw;height:100vh;max-height:none;border-radius:0;border:0;padding-top:3rem}
}

/* forms */
label{display:block;margin:.7rem 0;color:var(--mute);font-size:.9rem}
input,textarea,select{display:block;width:100%;margin-top:.25rem;padding:.55rem .65rem;background:#120f33;color:var(--ink);border:1px solid var(--line);border-radius:8px;font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px}
button{font:inherit}
form button[type=submit],.actions button,.panel button:not(.linklike){background:var(--accent);color:#1a1200;border:0;padding:.55rem 1.1rem;border-radius:8px;font-weight:600;cursor:pointer;margin-top:.6rem}
button.danger{background:#6b2430!important;color:#ffd6d6!important}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.msg{min-height:1.4em;margin:.5rem 0 0}
.msg.ok{color:var(--ok)}.msg.err{color:var(--err)}
.filter select{max-width:14rem}
.cards{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.7rem}
.cards li{background:#120f33;border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}

/* back side */
.dash{display:grid;grid-template-columns:20rem 1fr;gap:1rem;max-width:80rem;margin:1rem auto;padding:0 1rem}
@media (max-width:800px){.dash{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem;margin-bottom:1rem}
.panel h2,.panel h3{margin-top:0}
.profile{text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:2.2rem;margin:0 auto .5rem}
.charlist{list-style:none;margin:0;padding:0}
.charlist li{display:flex;gap:.5rem;align-items:center;padding:.3rem 0}
.mini{width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:.8rem;flex:none}
.narrow{max-width:44rem;margin:1.5rem auto;padding:0 1rem}
.approval blockquote{margin:.6rem 0;padding:.5rem .8rem;border-left:3px solid var(--accent);background:#120f33;border-radius:0 8px 8px 0}
.actions{display:flex;gap:.6rem}

/* ---------- shared bits ---------- */
a.plain{text-decoration:none;color:inherit}
.btn,a.btn{display:inline-block;background:var(--accent);color:#1a1200;border:0;padding:.55rem 1.1rem;border-radius:8px;font-weight:600;cursor:pointer;text-decoration:none;margin:.4rem .4rem .4rem 0}
.btn.ghost,a.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.wide{max-width:80rem;margin:1.2rem auto;padding:0 1rem}
.wideish{max-width:54rem}
.step{color:var(--mute);font-size:.9rem;margin-bottom:0}
.lead{font-size:1.1rem;margin:.2rem 0}
.check{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-size:.92rem}
.check input{width:auto;margin:0}
.check.del{color:#ff9d9d}
.plus{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--accent);color:#1a1200;text-decoration:none;font-weight:700;margin-left:.3rem;vertical-align:middle}
.danger-zone{margin:2rem 0 3rem}

/* member / profile */
.avatar{width:84px;height:84px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:2.2rem;margin:0 auto .5rem;overflow:hidden}
.avatar.big{width:120px;height:120px;font-size:3rem}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-edit{display:flex;gap:1rem;align-items:center}
.avatar-edit .avatar{margin:0;flex:none}
.facts{margin:0;display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:.5rem 1rem}
.facts dt{color:var(--mute)}.facts dd{margin:0}
@media (max-width:560px){.facts{grid-template-columns:1fr}.facts dd{margin-bottom:.5rem}}
.field-row{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:end}
.field-row .check{padding-bottom:.6rem}
.mini{width:28px;height:28px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:.8rem;flex:none;object-fit:cover}
.charlist li .row{display:flex;gap:.5rem;align-items:center}

/* character cards */
.cards{list-style:none;padding:0;margin:1rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.8rem}
a.card{display:flex;flex-direction:column;gap:.25rem;background:#120f33;border:1px solid var(--line);border-radius:10px;padding:.6rem;text-decoration:none;color:var(--ink)}
a.card:hover{border-color:var(--accent)}
.card .thumb{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--line);display:grid;place-items:center;font-size:2.4rem;margin-bottom:.3rem}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.plus-card{align-items:center;justify-content:center;min-height:10rem;border-style:dashed}
.plus-card span{font-size:3.2rem;line-height:1;color:var(--accent)}
.rpg-pick a.card{min-height:5rem;align-items:center;justify-content:center;text-align:center}
.tag.pub{background:#12382a;color:var(--ok)}
.filter-row{margin-bottom:.5rem}
.filter-row select{max-width:14rem}

/* character page */
.char-view{display:grid;grid-template-columns:minmax(14rem,24rem) 1fr;gap:1.5rem;align-items:start}
@media (max-width:760px){.char-view{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--line);display:grid;place-items:center;border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.portrait .noimg{font-size:5rem;color:var(--mute)}
.portrait.small{width:100%}
.thumbs{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}
.thumb-btn{width:56px;height:70px;padding:0;border:2px solid var(--line);border-radius:8px;overflow:hidden;background:none;cursor:pointer}
.thumb-btn.on{border-color:var(--accent)}
.thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}
.sheet-grid{display:grid;grid-template-columns:repeat(var(--cols,1),1fr);gap:.6rem 1rem}
@media (max-width:640px){.sheet-grid{grid-template-columns:repeat(min(var(--cols,1),2),1fr)}}
.sheet-sec h3{margin-bottom:.6rem}
.stat{display:flex;flex-direction:column}
.stat.long{grid-column:1/-1}
.stat .k{color:var(--mute);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.stat .v{font-size:1.05rem}
table.gear{width:100%;border-collapse:collapse}
table.gear td{padding:.3rem .4rem;border-bottom:1px solid var(--line)}
td.qty{white-space:nowrap;color:var(--mute);width:3rem}

/* character edit */
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.8rem;margin-bottom:.6rem}
.img-item{display:flex;flex-direction:column;gap:.3rem}
.gear-edit{width:100%;border-collapse:collapse}
.gear-edit th{text-align:left;color:var(--mute);font-size:.8rem;font-weight:500}
.gear-edit td{padding:.2rem .3rem .2rem 0}
.gear-edit input{margin:0}
.gear-edit td:nth-child(2){width:5rem}

/* print: a clean sheet, no chrome */
@media print{
  body{background:#fff;color:#000}
  .topbar,.noprint,.flash,.modal,.thumbs{display:none!important}
  .panel,.portrait{background:#fff;border:1px solid #bbb;box-shadow:none}
  .tag{background:#eee;color:#000}
  .stat .k,.by,.hint{color:#444}
  a{color:#000;text-decoration:none}
  .char-view{display:block}
  .portrait{max-width:16rem;margin-bottom:1rem}
  .panel{break-inside:avoid}
}

/* belt and braces: checkboxes and radios are never full-width blocks, whatever else changes */
input[type=checkbox],input[type=radio]{display:inline-block;width:auto;margin:0;flex:none}
.check{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.check span{white-space:normal}
.field-row .check{padding-bottom:.6rem;white-space:normal}
.hint.tight{margin:-.3rem 0 .6rem}
.avatar img{max-width:100%;max-height:100%}

/* ---------- profile page: big avatar, slightly larger text (desktop) ---------- */
.profile-page{max-width:96rem;margin:1.2rem auto;padding:0 1rem}
.profile-head{text-align:center}
.profile-head .avatar.big{width:160px;height:160px;font-size:4rem}
.profile-head h1{margin:.3rem 0}
.profile-body .facts{grid-template-columns:minmax(6em,14em) 1fr}

@media (min-width:900px){
  .profile-page{display:grid;grid-template-columns:minmax(22rem,26rem) 1fr;gap:1.5rem;align-items:start;font-size:1.2rem;line-height:1.5}   /* <- the profile text size. 1rem = normal 16px */
  .profile-head{position:sticky;top:1rem}
  .profile-head .avatar.big{width:360px;height:360px;font-size:9rem;max-width:100%}
  .profile-head h1{font-size:1.7em}               /* name stays about 32px */
  .profile-page .tag{font-size:.72em}             /* tag was rem-based; keep it in proportion */
  .profile-page .hint,.profile-page .by{font-size:.92em}
  .profile-page .btn{font-size:.9em}
  .profile-page .panel h3{font-size:1.1em}
  .profile-page .facts{gap:.7em 1.2em}
  .profile-page .charlist li{padding:.25em 0}
}
/* very wide screens: don't let the name wrap awkwardly beside the big portrait */
@media (min-width:900px) and (max-width:1300px){
  .profile-head .avatar.big{width:300px;height:300px;font-size:7.5rem}
}

/* dashboard avatar: 2x */
.dash .avatar{width:168px;height:168px;font-size:4.4rem;max-width:100%}

/* ---------- compact public character rows ---------- */
.char-rows{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.char-rows a{display:flex;align-items:center;gap:.8rem;padding:.5rem .7rem;background:#120f33;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
.char-rows a:hover{border-color:var(--accent)}
.rowthumb{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--line);display:grid;place-items:center;flex:none;font-size:1.2rem}
.rowthumb img{width:100%;height:100%;object-fit:cover}
.rowtext{display:flex;flex-direction:column;min-width:0}
.rowline{color:var(--mute);font-size:.9rem}

/* zodiac title: sits under the role, a touch smaller, in its own colour */
.zodiac{color:#8fd3c8;font-size:.85rem;letter-spacing:.06em;margin:.45rem 0 .2rem}
@media (min-width:900px){.profile-page .zodiac{font-size:.85em}}

/* ---- v2.9: square character cards, crop-focus picker, members ---- */
.cards.sq{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem}
.cards.sq a.card{padding:.4rem;gap:.15rem;font-size:.85rem}
.cards.sq .card .thumb{aspect-ratio:1/1;font-size:2rem;margin-bottom:.2rem}
.cards.sq .card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cards.sq .card .tag{font-size:.66rem;align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cards.sq .card .by{font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cards.sq .plus-card{aspect-ratio:auto;min-height:0;justify-content:center;align-items:center;text-align:center}
.cards.sq .plus-card span{font-size:2.4rem;line-height:1}
.pager{display:flex;gap:.5rem;margin-top:1rem}
.filter-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end}
.filter-row label{margin:0}
.filter-row input[type=search]{max-width:16rem}
.filter-row .btn{margin:0 0 .15rem}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.focus-picker{display:grid;grid-template-columns:repeat(3,1.6rem);gap:.25rem;margin:.3rem 0}
.fp-cell{position:relative;display:block;width:1.6rem;height:1.6rem;margin:0;cursor:pointer}
.fp-cell input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.fp-cell>span{display:block;width:100%;height:100%;border:1px solid var(--line);border-radius:6px;background:#120f33}
.fp-cell:hover>span{border-color:var(--accent)}
.fp-cell input:checked+span{background:var(--accent);border-color:var(--accent)}
.fp-cell input:focus-visible+span{outline:2px solid var(--ink);outline-offset:1px}
.previews{display:grid;grid-template-columns:1fr 38%;gap:.4rem;align-items:end}
.sq-prev{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.sq-prev img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-focus{margin-top:.4rem;text-align:center}
.avatar-focus .focus-picker{justify-content:center}

.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.8rem;margin-top:.6rem}
.member-card{text-align:center;margin:0;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.member-card .mc-top{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink)}
.member-card .avatar{width:96px;height:96px;font-size:2.6rem;margin:0 auto .4rem}
.member-card.off{opacity:.72}
.tag.off{background:#5a2330;color:#ffd6d6}
.manage{width:100%;margin-top:.4rem;text-align:left}
.manage summary{cursor:pointer;color:var(--accent);font-size:.9rem;text-align:center}
.mg-row{display:flex;gap:.4rem;align-items:center;margin-top:.5rem}
.mg-row select{flex:1;min-width:0}
.mg-row button{margin-top:0!important;padding:.4rem .8rem!important}

/* ---- v2.9.1: mobile menu, member password field ---- */
.nav-toggle{display:none}
@media (max-width:720px){
  .topbar{flex-wrap:wrap}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:1px solid var(--line);border-radius:8px;padding:.55rem .6rem;cursor:pointer}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
  .topbar nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding-top:.5rem}
  .topbar.open nav{display:flex}
  .topbar nav>a,.topbar nav form.inline,.topbar nav form.inline button{display:block;width:100%;text-align:left}
  .topbar nav>a,.topbar nav form.inline{padding:.75rem .2rem;border-top:1px solid var(--line)}
  .topbar nav form.inline button{padding:0}
}
.mg-row{flex-wrap:wrap}
.mg-row input[type=password]{flex:1 1 100%;min-width:0}

/* ---- v2.9.4: tall pictures must fill their frame so alignment can move them up/down.
   A grid frame sizes its row to the picture's own height (a tall picture grew the row past the frame
   and object-position had nothing to move). Pin the track to the frame instead. ---- */
.avatar,.portrait,.card .thumb,.rowthumb{grid-template:minmax(0,1fr) / minmax(0,1fr)}
.avatar img,.portrait img,.card .thumb img,.rowthumb img{min-width:0;min-height:0}

/* ---- v2.10: personal motto ---- */
.motto{margin:.3rem 0 0;font-style:italic;color:var(--mute);font-size:.88em;line-height:1.35;overflow-wrap:anywhere}
.member-card .motto{font-size:.85rem}

/* ---- v2.11: campaigns and the book ---- */
.err-text{color:var(--err)}
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.8rem}
.camp-card{display:flex;flex-direction:column;gap:.35rem;padding:.8rem;background:#120f33;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
.camp-card:hover{border-color:var(--accent)}
.camp-list{list-style:none;margin:.4rem 0;padding:0;display:grid;gap:.4rem}
.camp-cols{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:860px){.camp-cols{grid-template-columns:1.75fr 1fr}}
.book-toc{margin:.2rem 0 0;padding-left:1.3rem;display:grid;gap:.5rem}
.book-toc .mv{margin-left:.4rem;white-space:nowrap}
.book-toc .mv button{font-size:1.1rem;padding:0 .2rem}
.roster li{display:flex;align-items:center;gap:.6rem}
.roster li>a{flex:1;min-width:0}
.roster-add{margin-top:1rem;display:flex;gap:.6rem;align-items:flex-end;flex-wrap:wrap}
.roster-add label{flex:1 1 12rem;margin:0}
.roster-add button{margin:0 0 .1rem!important}

.book-cols{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:860px){.book-cols{grid-template-columns:15rem 1fr;align-items:start}}
.book-nav ol{margin:0;padding-left:1.2rem;display:grid;gap:.4rem}
.book-nav li.on a{font-weight:700;color:var(--ink);text-decoration:none}
.book-page h1{margin-top:0}
.book-body{font-size:1.05rem;line-height:1.65;overflow-wrap:anywhere}
.book-body h2{font-size:1.45rem;margin:1.4rem 0 .4rem}
.book-body h3{font-size:1.2rem;margin:1.2rem 0 .3rem}
.book-body h4{font-size:1.05rem}
.book-body p{margin:.7rem 0}
.book-body ul,.book-body ol{padding-left:1.4rem;margin:.7rem 0}
.book-body blockquote{margin:.9rem 0;padding:.6rem 1rem;border-left:4px solid var(--accent);background:#120f33;border-radius:0 8px 8px 0;font-style:italic}
.book-body hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}
.book-body img.book-img{display:block;max-width:100%;height:auto;border-radius:10px;margin:1rem auto}
.book-body .table-wrap{overflow-x:auto;margin:1rem 0}
.book-body table{border-collapse:collapse;min-width:50%}
.book-body th,.book-body td{border:1px solid var(--line);padding:.4rem .7rem;text-align:left;vertical-align:top}
.book-body th{background:#120f33}
.secret{margin:1rem 0;padding:.7rem 1rem;border:1px dashed #b98cff;border-radius:10px;background:#241a45}
.secret-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:#c9a8ff;margin-bottom:.2rem}
.secret>:first-of-type+*{margin-top:.4rem}

.title-row{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:700px){.title-row{grid-template-columns:1fr 9rem 16rem}}
.toolbar{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin-bottom:.8rem;position:sticky;top:0;z-index:5;background:var(--panel);padding:.3rem 0}
.toolbar button{background:#120f33!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:8px;padding:.4rem .7rem!important;margin:0!important;font-weight:500!important;cursor:pointer}
.toolbar button:hover{border-color:var(--accent)!important}
.toolbar .sep{width:1px;align-self:stretch;background:var(--line);margin:0 .2rem}
.ed-box textarea{min-height:30rem;resize:vertical;line-height:1.5}
.preview{min-height:22rem;padding:.8rem 1.2rem;background:#17133f;border:1px solid var(--line);border-radius:8px}
.preview-label{font-size:.95rem;margin-bottom:.25rem}
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;max-width:min(36rem,94vw);width:100%}
dialog::backdrop{background:rgba(5,4,20,.7)}
.dlg h3{margin-top:0}
.dlg-row{display:flex;gap:.8rem}
.dlg-row label{flex:1}
.dlg-actions{display:flex;gap:.5rem;margin-top:1rem}
.dlg-actions .btn{margin:0}
.tbl-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:.3rem;max-height:45vh;overflow:auto;margin-top:.4rem}
.tbl-grid input{margin:0;padding:.35rem .45rem}
.tbl-grid input.head{background:#2a2560;font-weight:600}
[hidden]{display:none!important}

/* ---- lore, mentions (2.12) ---- */
a.mention{text-decoration:none;border-bottom:1px dotted var(--accent);color:var(--accent);font-weight:600}
a.mention:hover,a.mention:focus{background:rgba(255,179,71,.14);outline:0}
a.mention.mention-hidden{border-bottom-style:dashed;color:#c9a8ff;border-bottom-color:#c9a8ff}
.mention-card{position:absolute;z-index:60;width:min(18rem,calc(100vw - 16px));display:flex;gap:.7rem;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem;box-shadow:0 12px 36px rgba(0,0,0,.5);font-size:.92rem;line-height:1.4}
.mention-card .mc-pic{flex:0 0 4.2rem;height:4.2rem;border-radius:10px;overflow:hidden;background:#120f33}
.mention-card .mc-pic img{width:100%;height:100%;object-fit:cover;display:block}
.mention-card .mc-body{min-width:0;flex:1}
.mention-card .mc-name{display:block;margin-top:.15rem}
.mention-card .mc-blurb{margin:.3rem 0 0;color:var(--mute)}
.mention-card .mc-note{margin:.3rem 0 0;color:#c9a8ff;font-size:.8rem}
.mention-card .mc-more{display:inline-block;margin-top:.4rem;font-weight:600}
.mention-list{position:absolute;z-index:30;max-height:15rem;overflow:auto;background:var(--panel);border:1px solid var(--accent);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5)}
.mention-list button{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none!important;color:var(--ink)!important;border:0!important;border-radius:0!important;padding:.45rem .7rem!important;margin:0!important;cursor:pointer;font:inherit}
.mention-list button.on,.mention-list button:hover{background:#2a2560!important}
.mention-list .mi-kind{font-size:.75rem;color:var(--mute)}
.ed-box{position:relative}
.lore-filters{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0 1rem}
.lore-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.lore-card{display:flex;gap:.7rem;align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.7rem}
.lore-card:hover{border-color:var(--accent)}
.lore-thumb{flex:0 0 3.6rem;width:3.6rem;height:3.6rem;border-radius:10px;overflow:hidden;background:#120f33;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.lore-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lore-text{min-width:0;flex:1}
.lore-text p{margin:.2rem 0 0;color:var(--mute);font-size:.88rem}
.lore-head{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:.6rem}
.lore-pic{width:9rem;height:9rem;border-radius:14px;overflow:hidden;background:#120f33;flex:0 0 auto}
.lore-pic img{width:100%;height:100%;object-fit:cover;display:block}
.check.share{margin-top:.6rem}
/* 2.12.1: tidier lore cards */
.lore-text{display:flex;flex-direction:column;gap:.15rem}
.lore-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lore-text>span:nth-child(2){display:flex;gap:.3rem;overflow:hidden;white-space:nowrap}
.lore-text .hint{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.82rem;line-height:1.3;margin:0}
.lore-card{align-items:center}
/* 2.12.2: roomy picture section on the entry editor */
.lore-pic-edit{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start}
@media (min-width:700px){.lore-pic-edit{grid-template-columns:minmax(14rem,20rem) 1fr}}
.lore-pic-edit .previews{grid-template-columns:1fr 7rem}
.lore-pic-edit .portrait.small{aspect-ratio:1/1}
.lore-pic-edit .pic-controls{display:flex;flex-direction:column;gap:.7rem}
.lore-pic-edit .focus-picker{grid-template-columns:repeat(3,2.4rem);gap:.35rem}
.lore-pic-edit .focus-picker *{min-height:2.4rem}
/* 2.12.3: compact roster rows */
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rowtext strong.clip,.rowtext .rowline.clip{display:block}
.traits{display:flex;gap:.5rem;font-size:.85rem;color:var(--ink);min-width:0}
.traits>span{flex:0 1 auto;max-width:50%}
.traits>span+span::before{content:'\00b7';margin-right:.5rem;color:var(--mute)}
.roster li>a{min-width:0}
/* 2.12.4: read-only account view */
.inspect{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:.45rem 1rem;margin:0}
.inspect dt{color:var(--mute)}
.inspect dd{margin:0;overflow-wrap:anywhere}
@media (max-width:600px){.inspect{grid-template-columns:1fr}.inspect dd{margin-bottom:.4rem}}
/* ---- 2.13: stat blocks ---- */
.statform .stat-row{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.abil-row{display:grid;gap:.5rem;grid-template-columns:repeat(6,minmax(0,1fr));margin:.6rem 0}
@media (max-width:560px){.abil-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
.abil-row input{text-align:center}
.xp-badge{display:inline-block;font-size:.7rem;padding:.02rem .45rem;border-radius:999px;background:var(--line);color:var(--ink);margin-left:.3rem;text-transform:uppercase;letter-spacing:.05em}
.xp-badge.on{background:var(--accent);color:#1a1200;font-weight:700}
.statform h3{margin:1.2rem 0 .4rem}
.statblock{border-left:4px solid #b98cff}
.statblock h3{margin-top:0}
.stat-head{font-style:italic;margin:.2rem 0 .6rem;color:var(--mute)}
.stat-core{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:.4rem 0 .8rem}
.stat-core>div{display:flex;gap:.4rem;align-items:baseline}
.stat-core dt{color:var(--mute);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.stat-core dd{margin:0;font-weight:700}
.abil-view{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4rem;margin:.6rem 0}
@media (max-width:560px){.abil-view{grid-template-columns:repeat(3,minmax(0,1fr))}}
.abil-view>div{display:flex;flex-direction:column;align-items:center;background:#120f33;border:1px solid var(--line);border-radius:10px;padding:.3rem}
.abil-view strong{font-size:.72rem;color:var(--mute)}
.abil-view span{font-size:1.2rem;font-weight:700}
.abil-view em{font-size:.85rem;font-style:normal;color:var(--accent)}
.stat-table{border-collapse:collapse;width:100%}
.stat-table th,.stat-table td{border:1px solid var(--line);padding:.3rem .6rem;text-align:left}
.stat-table th{background:#120f33}
.stat-gear{margin:.3rem 0;padding-left:1.2rem}
/* ---- 2.14: items ---- */
.gear-pick{position:relative}
.itemcard{border-left:4px solid var(--accent)}
.itemcard p{margin:.4rem 0 0}
/* ---- 2.15: tabbed editor, full width ---- */
.book-edit{max-width:84rem}
.ed-tabs{display:flex;gap:.3rem;align-items:center;border-bottom:1px solid var(--line);margin-bottom:.8rem}
.ed-tabs [data-tab]{background:none!important;border:1px solid transparent!important;border-bottom:0!important;border-radius:8px 8px 0 0;color:var(--mute)!important;padding:.5rem 1.1rem!important;margin:0 0 -1px!important;font-weight:600!important;cursor:pointer}
.ed-tabs [data-tab][aria-selected=true]{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
.ed-tabs .hint{margin-left:auto}
/* ---- 2.15: loot ---- */
.lootroll{display:flex;flex-direction:column;gap:.5rem;margin-top:.8rem}
.lootroll .btn{align-self:flex-start;margin:0}
.roll-out{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.roll-out li{padding:.35rem .6rem;background:#120f33;border:1px solid var(--line);border-radius:8px}
.roll-out li:first-child{border-color:var(--accent)}
.lootcard{border-left:4px solid var(--ok)}
.warn{color:#ffb3b3}
.lootlink{margin:.4rem 0}
/* ---- 2.16: contents list, dice ---- */
.preview-wrap{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:900px){.preview-wrap{grid-template-columns:15rem minmax(0,1fr);align-items:start}.preview-wrap .toc{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}}
.toc{background:#120f33;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.toc.panel{background:var(--panel)}
.toc summary{cursor:pointer;font-weight:700;margin:-.1rem 0 .3rem}
.toc-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.toc-list a{display:block;text-decoration:none;color:var(--ink);padding:.15rem .3rem;border-radius:6px;line-height:1.3;font-size:.92rem}
.toc-list a:hover{background:#2a2560}
.toc-list a.on{color:var(--accent);font-weight:700}
.toc-num{display:inline-block;min-width:2.2em;color:var(--mute);font-variant-numeric:tabular-nums}
.toc-list a.on .toc-num{color:var(--accent)}
.toc-l2{padding-left:.9rem}.toc-l3{padding-left:1.8rem}
.toc-l1>a{font-weight:600}
.toc-empty{margin:.2rem 0 0}
.book-side{display:grid;gap:1rem;align-content:start}
@media (min-width:860px){.book-side{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}}
.book-body h2,.book-body h3,.book-body h4{scroll-margin-top:1rem}

.wg-dice{position:fixed;z-index:80;display:flex;align-items:center;gap:.25rem;width:max-content;max-width:calc(100vw - 8px);padding:.25rem;background:rgba(13,11,40,.94);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.45);user-select:none;-webkit-user-select:none}
.wg-dice.armed{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,179,71,.35),0 8px 24px rgba(0,0,0,.45)}
.wg-grip{flex:0 0 auto;width:1.7rem;height:2.1rem;padding:0!important;margin:0!important;background:none!important;border:0!important;color:var(--mute)!important;font-size:1.1rem;cursor:grab;touch-action:none;border-radius:8px}
.wg-grip:active{cursor:grabbing}
.wg-body{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
.wg-die{position:relative;margin:0!important;padding:.35rem .5rem!important;min-width:2.3rem;background:#1f1b4a!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:8px;font:600 .8rem/1 system-ui,sans-serif!important;cursor:pointer}
.wg-die:hover,.wg-die.has{border-color:var(--accent)!important}
.wg-badge{position:absolute;top:-.45rem;right:-.35rem;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:999px;background:var(--accent);color:#1a1200;font-size:.7rem;font-weight:800;line-height:1.15rem;text-align:center}
.wg-act{display:flex;align-items:center;gap:.3rem}
.wg-roll,.wg-clear{margin:0!important;padding:.35rem .6rem!important;border-radius:8px;font:700 .8rem/1 system-ui,sans-serif!important;cursor:pointer}
.wg-roll{background:var(--accent)!important;color:#1a1200!important;border:0!important}
.wg-clear{background:none!important;color:var(--mute)!important;border:1px solid var(--line)!important}
.wg-hint{font-size:.72rem;color:var(--accent)}
.wg-result{position:fixed;inset:0;z-index:90;display:grid;place-items:center;pointer-events:none;background:rgba(5,4,20,.45)}
.wg-card{max-width:min(92vw,34rem);padding:1.2rem 1.6rem;background:var(--panel);border:2px solid var(--accent);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.6);text-align:center}
.wg-card:not(.final){opacity:.85}
.wg-row{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline;justify-content:center;margin:.35rem 0}
.wg-what{color:var(--mute);font-size:.9rem}
.wg-vals{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center}
.wg-face{display:inline-block;min-width:2.6rem;padding:.25rem .5rem;border-radius:10px;background:#120f33;border:1px solid var(--line);font-size:1.8rem;line-height:1.2}
.wg-face.coin{font-size:1.2rem;min-width:4.5rem}
.wg-sub{color:var(--mute);font-size:.95rem}
.wg-total{display:flex;gap:.8rem;align-items:baseline;justify-content:center;margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line);color:var(--mute)}
.wg-total b{font-size:2.6rem;color:var(--accent);line-height:1}
.wg-note{margin-top:.8rem;font-size:.75rem;color:var(--mute)}
@media print{.wg-dice,.wg-result{display:none!important}}
/* ---- 2.17: what I see / what others see ---- */
#profile-page[data-view=me] [data-only=others]{display:none}
#profile-page[data-view=others] [data-only=me]{display:none}
.profile-tabs{margin-bottom:.8rem}
.others-note{margin:.2rem 0 .8rem}

/* ---- 2.18: DM-private content shown to Architects as spoilers ---- */
.spoiler{cursor:pointer;border-radius:8px}
.spoiler:not(.open){background:#000;color:transparent;text-shadow:none;user-select:none;position:relative;outline:1px solid #2a2a35}
.spoiler:not(.open) *{visibility:hidden}
div.spoiler:not(.open)::after{content:"DM only \00b7  click to reveal";visibility:visible;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a8aa0;font-size:.85rem;letter-spacing:.05em;min-height:2.2rem}
div.spoiler:not(.open){min-height:2.6rem}
.spoiler:focus-visible{outline:2px solid #b98cff}

/* ---- 2.19: activity log ---- */
.activity-filter{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.8rem 0}
.activity-filter input[type=search]{min-width:12rem}
table.activity{width:100%;border-collapse:collapse;font-size:.92rem}
table.activity th,table.activity td{text-align:left;padding:.4rem .6rem;border-bottom:1px solid #2a2a35;vertical-align:top}
table.activity th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#9a9ab0}
table.activity td.when{white-space:nowrap;color:#9a9ab0}
@media (max-width:640px){table.activity th:last-child,table.activity td:last-child{display:none}}

/* ---- 2.20: maps ---- */
.map-cols{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1rem;align-items:start}
@media (max-width:900px){.map-cols{grid-template-columns:1fr}}
.map-stage{position:relative;display:inline-block;max-width:100%;line-height:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0c0c12}
.map-stage img{display:block;max-width:100%;height:auto;user-select:none}
.map-stage.placing{cursor:crosshair}
.map-pin{position:absolute;width:1.15rem;height:1.15rem;margin:0;padding:0;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;background:var(--accent);box-shadow:0 0 0 2px rgba(0,0,0,.6);cursor:pointer}
.map-pin.k-map{border-radius:3px;background:#7ad0ff}
.map-pin.k-note{background:#c9a8ff}
.map-pin.pin-off{opacity:.45;border-style:dashed}
.map-pin.on{outline:3px solid #fff;z-index:2}
.map-ghost{position:absolute;width:1.15rem;height:1.15rem;transform:translate(-50%,-50%);border-radius:50%;border:2px dashed #fff;background:rgba(255,255,255,.25);pointer-events:none}
.pin-list{list-style:none;margin:0;padding:0}
.pin-list li{padding:.55rem .4rem;border-bottom:1px solid var(--line)}
.pin-list li.on{background:rgba(255,255,255,.06)}
.pin-list li.pin-off strong{opacity:.7}
.pin-actions{display:flex;gap:.8rem;margin-top:.3rem;font-size:.85rem}
.dm-note{margin-top:.4rem;padding:.4rem .6rem;border-left:3px solid #b98cff;background:#241a45;border-radius:4px;font-size:.9rem}
.map-tree{list-style:none;margin:0;padding:0}
.map-tree li{padding:.3rem 0}
.pin-form label{display:block;margin-top:.5rem}
[hidden]{display:none!important}

/* ---- 2.21: map shelf ---- */
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.9rem}
.map-card{display:flex;flex-direction:column;gap:.3rem;padding:.55rem;background:#120f33;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);min-width:0}
.map-card:hover{border-color:var(--accent)}
.map-card.is-hidden{opacity:.8;border-style:dashed}
.map-card .thumb{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#0c0c12}
.map-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:2.2rem;color:#6a6a85;background:linear-gradient(135deg,#1b1745,#0c0c12)}
.map-card .clip{display:block}
.clip2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.map-tree li.kid{display:flex;gap:.6rem;align-items:center}
.kid-thumb{flex:0 0 4.2rem;height:3.1rem;border-radius:6px;overflow:hidden;background:#0c0c12;display:block}
.kid-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.kid-thumb .ph{font-size:1.2rem}
.actions.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}.actions.row form{margin:0}.actions.row .btn,.actions.row button{margin-top:0}

/* ---- 2.27: campaign hub ---- */
.hub-banner{position:relative;border-radius:14px;overflow:hidden;margin:.4rem 0 1rem;min-height:9rem;background:#0b0c1f;border:1px solid var(--line)}
.hub-banner img{display:block;width:100%;height:11rem;object-fit:cover;object-position:center}
.hub-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,6,20,.05) 25%,rgba(5,6,20,.82));pointer-events:none}
.hub-banner-text{position:absolute;z-index:1;left:1.2rem;right:1.2rem;bottom:.8rem}
.hub-banner h1{margin:0;font-size:clamp(1.5rem,4vw,2.3rem);text-shadow:0 2px 14px rgba(0,0,0,.85)}
.hub-sub{margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;font-size:.92rem;text-shadow:0 1px 8px rgba(0,0,0,.9)}
.hub-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin:1rem 0}
.hub-tile{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b0c1f;color:#fff;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.hub-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hub-tile .cap{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .8rem .7rem;background:linear-gradient(180deg,rgba(5,6,20,0),rgba(5,6,20,.88) 55%);display:flex;flex-direction:column;gap:.1rem}
.hub-tile .cap strong{font-size:1.15rem;letter-spacing:.02em}
.hub-tile .line{font-size:.82rem;color:#d9d3ec;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hub-tile:hover,.hub-tile:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.hub-prev{margin:1rem 0}
.hub-prev .eyebrow{margin:0 0 .3rem;color:var(--accent);font:italic 600 1rem Georgia,serif;letter-spacing:.02em}
.hub-prev h2{margin:.1rem 0}
.hub-prev .excerpt{margin:.5rem 0;color:var(--ink);max-width:60ch;line-height:1.5}
.hub-recent h3 .more,.panel h3 .more{float:right;font-size:.85rem;font-weight:400}
.doc-rows{list-style:none;margin:0;padding:0}
.doc-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .2rem;border-bottom:1px solid var(--line)}
.doc-row:last-child{border-bottom:0}
.doc-ic{color:var(--mute);display:inline-flex}
.doc-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-when{white-space:nowrap}
.doc-state{display:inline-flex}
.doc-state.is-open{color:var(--accent)}
.doc-state.is-locked{color:var(--mute)}
.doc-search{display:flex;gap:.5rem;margin:.6rem 0}
.doc-search input[type=search]{flex:1;min-width:0}
.doc-tabs{flex-wrap:wrap;margin-bottom:.8rem}
.doc-tabs a{padding:.45rem 1rem;color:var(--mute);text-decoration:none;font-weight:600;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;margin-bottom:-1px}
.doc-tabs a[aria-selected=true]{background:var(--panel);color:var(--ink);border-color:var(--line)}
.doc-tabs .count{font-weight:400;font-size:.8rem;opacity:.7}
.doc-order{margin-top:.8rem}
.doc-order summary{cursor:pointer;color:var(--mute)}
.plain-list{list-style:none;margin:0;padding:0}
.plain-list li{padding:.3rem 0;border-bottom:1px solid var(--line)}
@media (max-width:900px){.hub-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hub-banner img{height:9rem}.doc-when{display:none}.hub-tile .cap strong{font-size:1rem}.hub-tile .line{font-size:.75rem}}
@media (prefers-reduced-motion:reduce){.hub-tile{transition:none}.hub-tile:hover,.hub-tile:focus-visible{transform:none}}

/* DM-private text for Architects and the Sovereign: ink-stained parchment instead of a black bar */
.spoiler:not(.open){background:radial-gradient(ellipse at 16% 50%,rgba(16,10,22,.82) 0 14%,transparent 46%),radial-gradient(ellipse at 52% 40%,rgba(16,10,22,.78) 0 16%,transparent 50%),radial-gradient(ellipse at 86% 60%,rgba(16,10,22,.82) 0 13%,transparent 44%),linear-gradient(rgba(90,62,30,.42),rgba(90,62,30,.42)),url(hub/parchment.webp) center/200px;outline:1px solid #5a4630}
div.spoiler:not(.open)::after{color:#f6ead0;font-weight:600;text-shadow:0 0 5px #120a18,0 0 2px #120a18}
label.inline{display:inline-flex;align-items:center;gap:.4rem;margin-right:.6rem}label.inline select{width:auto}
.lootroll{flex-direction:row;flex-wrap:wrap;align-items:center}.lootroll .roll-out{flex-basis:100%}
/* tavern (2.29) */
.room-list{padding:.4rem}
.room-row{display:flex;gap:1rem;align-items:center;padding:.8rem .9rem;border-radius:.6rem;text-decoration:none;color:inherit}
.room-row:hover,.room-row:focus-visible{background:rgba(255,255,255,.05)}
.room-row+.room-row{border-top:1px solid var(--line)}
.room-ico{font-size:1.6rem;width:2.2rem;text-align:center}
.room-main{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.room-meta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.room-camp{margin:1.6rem 0 .4rem;font-size:1.05rem}
.room-head h1{margin-bottom:.2rem}
.thread-rows{list-style:none;margin:0;padding:0}
.thread-rows li{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .2rem;border-top:1px solid var(--line)}
.thread-rows li:first-child{border-top:0}
.posts{padding:.3rem 1rem}
.tpost{display:flex;gap:.9rem;padding:.9rem 0;border-top:1px solid var(--line)}
.tpost:first-of-type{border-top:0}
.tpost.gone{opacity:.7}
.tface{flex:0 0 3rem;width:3rem;height:3rem;border-radius:50%;overflow:hidden;background:var(--line);display:grid;place-items:center;font-weight:700}
.tface img{width:100%;height:100%;object-fit:cover}
.tbody{flex:1;min-width:0}
.tbody header{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.tbody .book-body{margin-top:.25rem;overflow-wrap:anywhere}
.tbody .book-body>:first-child{margin-top:0}
.tpost .tools{margin:.2rem 0 0;font-size:.82rem;display:flex;gap:.8rem;align-items:center}
.tpost .tools form{display:inline}
.tavern-compose{display:flex;flex-direction:column;gap:.7rem}
.tavern-compose textarea{width:100%}
@media (max-width:640px){.room-row{flex-wrap:wrap}.room-meta{justify-content:flex-start;width:100%}.tface{flex-basis:2.4rem;width:2.4rem;height:2.4rem}}
.room-main .badge{align-self:flex-start}
/* town dashboard (2.30) */
.town-dash{max-width:none;margin:0 auto;padding:0 1rem 2rem}
.town{position:relative;width:min(100%,max(calc((100vh - 6rem) * 2.21),60rem));margin:.8rem auto 1rem;border-radius:.9rem;overflow:hidden;background:#0d0a1c;box-shadow:0 8px 30px rgba(0,0,0,.45)}
.town svg{display:block;width:100%;height:auto}
.town .place .h{opacity:0;transition:opacity .22s ease}
.town .place.on .h{opacity:1}
.town .hit path{fill:transparent;stroke:none;cursor:pointer}
.town .hit.soon path{cursor:default}
.town .hit:focus{outline:none}
.town .hit:focus-visible path{stroke:#ffd27a;stroke-width:12;fill:rgba(255,210,122,.12)}
.town-places h3{margin:1.4rem 0 .6rem}
.place-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem}
.place-card{display:flex;flex-direction:column;gap:.2rem;padding:.8rem .9rem;border-radius:.7rem;background:var(--panel,rgba(255,255,255,.05));border:1px solid var(--line);text-decoration:none;color:inherit;height:100%}
a.place-card:hover,a.place-card:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.07)}
.place-card.soon{opacity:.7}
.wing-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.wing{display:flex;flex-direction:column;gap:.4rem;padding:1.6rem;border-radius:.9rem;border:1px solid var(--line);background:rgba(255,255,255,.04);text-decoration:none;color:inherit;min-height:12rem}
.wing:hover,.wing:focus-visible{border-color:var(--accent);background:rgba(255,255,255,.07)}
.wing h2{margin:0}
.stat-row{list-style:none;margin:0;padding:0;display:flex;gap:2rem;flex-wrap:wrap}
.stat-row li{display:flex;flex-direction:column}.stat-row strong{font-size:1.8rem}.stat-row span{opacity:.7}
@media (max-width:900px){.wing-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.town .place .h,.town-tip{transition:none}}

/* town dashboard, version with the panels on the painting (2.31) */
.town{container-type:inline-size}
.town-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity .15s;background:rgba(14,10,28,.94);color:#fff;padding:.55rem .85rem;border-radius:.6rem;border:1px solid var(--accent);width:max-content;max-width:min(18em,60%);font-size:clamp(1rem,1.1cqw,2.4rem);display:flex;flex-direction:column;gap:.15rem;box-shadow:0 6px 18px rgba(0,0,0,.55);z-index:3}
.town-tip.on{opacity:1}
.town-tip.below{transform:translate(-50%,0)}
.town-tip.tap{pointer-events:auto}
.town-tip strong{font-size:1em}
.town-tip .tb{font-size:.84em;opacity:.85}
.town-tip .td{font-size:.82em;color:var(--accent);font-weight:600}
.town-tip small{opacity:.7;font-size:.74em}
.town-tip .enter{margin-top:.3rem;align-self:flex-start;background:var(--accent);color:#1a1200;padding:.25em .8em;border-radius:999px;font-weight:700;text-decoration:none}
.tpanel{position:relative;z-index:2;background:rgba(16,12,34,.84);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.14);border-radius:.65rem;box-shadow:0 6px 20px rgba(0,0,0,.45);padding:.55rem .75rem;font-size:clamp(.7rem,1.05cqw,2.4rem);line-height:1.25;overflow:hidden}
.t-profile{position:absolute;right:1.5%;top:2.5%;width:12.5%;min-width:9.5rem}
.t-profile .who{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.t-profile .avatar.sm{width:3.4em;height:3.4em;font-size:1.3em;flex:none}
.t-profile .who-txt{display:flex;flex-direction:column;gap:.3rem;min-width:0;text-align:left}
.t-profile .who-txt strong{font-size:1.15em;font-weight:700;line-height:1.15}
.t-profile .role{font-size:.8em;font-weight:400;opacity:.7;margin-top:-.15rem}
.t-profile .motto{font-style:italic;opacity:.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.t-profile:hover{border-color:rgba(255,200,90,.5)}
.t-profile .adm{margin:.35rem 0 0;font-size:.85em}
.t-lists{position:absolute;left:1.2%;bottom:2.5%;width:18.5%;min-width:13rem;display:flex;gap:.6rem;align-items:flex-end;z-index:2}
.t-lists .tbox{flex:1 1 0;min-width:0}
.t-lists h4{margin:0 0 .35rem;padding-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.16);font-size:.78em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent,#f0b64a);display:flex;align-items:center;gap:.4rem}
.t-lists .plus{width:1.4em;height:1.4em;font-size:.9em;margin:0}
.t-lists ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.t-lists .row{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.t-lists .mini{width:1.7em;height:1.7em;flex:none;font-size:1em}
.t-lists .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-lists .camp-list strong{font-weight:500}
.t-lists .camp-list li{display:flex;align-items:center;gap:.1rem .4rem;flex-wrap:wrap}
.t-lists .hint{margin:0}
.t-lists .more{margin:.1rem 0 0;font-size:.9em}
.town-places{display:none}
.place-card .detail{color:var(--accent);font-size:.85rem;font-weight:600}
@media (max-width:820px){
  .town-dash{display:flex;flex-direction:column;gap:1rem;padding-top:1rem}
  .town{display:contents}
  .town svg,.town-tip{display:none}
  .t-profile,.t-lists{position:static;width:auto;min-width:0}
  .t-lists{display:block}.t-lists .tbox+.tbox{margin-top:.6rem}
  .tpanel{position:static;width:auto;min-width:0;font-size:1rem;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--panel,rgba(255,255,255,.05))}
  .t-profile{order:0}.town-places{order:1;display:block}.t-lists{order:2}
  .t-lists .camp-list strong{font-weight:500}
.t-lists .camp-list li{white-space:normal;flex-wrap:wrap}
  .town-places h3{margin:0 0 .6rem}
}
.town.no-art .t-profile,.town.no-art .t-lists{position:static;width:auto;margin:.5rem 0}

/* top menu dropdowns (2.32) */
.topbar nav{gap:.3rem}
.topbar nav>a,.dd-btn{padding:.45rem .7rem;border-radius:.5rem;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.topbar nav>a:hover,.dd-btn:hover,.dd.open>.dd-btn{background:rgba(255,255,255,.08)}
.dd{position:relative}
.dd-btn i{width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-.1em);opacity:.7}
.dd-menu{display:none;position:absolute;left:0;top:100%;margin-top:.25rem;min-width:11rem;background:#15123a;border:1px solid var(--line);border-radius:.6rem;box-shadow:0 10px 28px rgba(0,0,0,.5);padding:.3rem;z-index:50}
.dd-end{margin-left:.6rem}.dd-end .dd-menu{left:auto;right:0}
.dd.open>.dd-menu{display:block}
.dd-menu a,.dd-menu form.inline button{display:flex;align-items:center;justify-content:space-between;gap:.6rem;width:100%;padding:.5rem .7rem;border-radius:.4rem;color:var(--ink);text-decoration:none;text-align:left;font:inherit}
.dd-menu a:hover,.dd-menu form.inline button:hover{background:rgba(255,255,255,.09)}
@media (hover:hover) and (min-width:821px){.dd:hover>.dd-menu{display:block}}
@media (max-width:820px){
  .topbar nav>a,.dd-btn{width:100%;padding:.75rem .2rem;border-radius:0;border-top:1px solid var(--line);justify-content:space-between}
  .dd{width:100%}.dd-end{margin-left:0}
  .dd-menu,.dd-end .dd-menu{position:static;min-width:0;box-shadow:none;border:0;background:rgba(255,255,255,.04);border-radius:.5rem;margin:0 0 .4rem;padding:.2rem}
  .dd-menu a,.dd-menu form.inline button{padding:.7rem .8rem}
  .topbar nav .dd-menu form.inline{border:0;padding:0}
}

.dd-menu::before{content:'';position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
@media (max-width:820px){.dd-menu::before{display:none}.dd-menu,.dd-end .dd-menu{margin-top:0}}

/* rumour board (2.33) */
.rtags{display:inline-flex;gap:.3rem;flex-wrap:wrap;margin:0 .4rem}
.tag.truth-true{background:rgba(70,170,110,.25);color:#9fe3b8}
.tag.truth-false{background:rgba(200,80,80,.25);color:#f0a8a8}
.tag.truth-half{background:rgba(220,170,60,.25);color:#f0d38a}
.tag.truth-unknown{background:rgba(150,150,190,.2);color:#c8c8e6}
.rumour-meta p{margin:.2rem 0}
.rumour-judge{display:flex;gap:1rem;flex-wrap:wrap;align-items:end;margin-top:.5rem;padding-top:.6rem;border-top:1px solid var(--line)}
.rumour-judge label{margin:0}.rumour-judge .check{display:flex;align-items:center;gap:.4rem}
.tavern-compose .pick-filter{margin-bottom:.3rem}
.tavern-compose select[multiple]{width:100%}

/* Evergreen Rest (2.34) */
.plaques{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem;margin:1rem 0 1.5rem}
.plaque{--rb:#5fae7a;position:relative;padding:1.3rem 1rem 1rem;text-align:center;border-radius:.7rem;background:linear-gradient(180deg,#26223f,#1b1834);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.plaque .ribbon{position:absolute;top:-.1rem;left:50%;width:1.1rem;height:2.1rem;transform:translateX(-50%);background:var(--rb);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);border-radius:2px 2px 0 0}
.plaque h2{margin:.9rem 0 .2rem;font-size:1.25rem}
.plaque .dates{margin:0 0 .5rem;white-space:nowrap;font-size:.92rem;color:var(--rb);font-variant-numeric:tabular-nums}
.plaque .words{margin:.3rem 0;font-style:italic}
.plaque .by{margin:.6rem 0 0;font-size:.8rem}
.plaque .tools{margin:.4rem 0 0;display:flex;gap:.8rem;justify-content:center;font-size:.85rem}
.plaque.gone{opacity:.5}
.rb-green{--rb:#5fae7a}.rb-gold{--rb:#e0b24a}.rb-blue{--rb:#6aa3e0}.rb-rose{--rb:#e07a9a}.rb-violet{--rb:#a98be0}.rb-white{--rb:#e8e8f2}
.garden-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ribbon-pick{border:0;padding:0;margin:.8rem 0;display:flex;gap:.5rem;flex-wrap:wrap}
.ribbon-pick legend{padding:0;margin-bottom:.3rem;color:var(--mute)}
.ribbon-pick .rb{display:inline-flex;align-items:center;gap:.35rem;margin:0;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line);cursor:pointer}
.ribbon-pick .rb span:before{content:'';display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:var(--rb);margin-right:.35rem;vertical-align:-.05rem}
.ribbon-pick .rb:has(input:checked){border-color:var(--rb);background:rgba(255,255,255,.07)}
.ribbon-pick input{position:absolute;opacity:0;pointer-events:none}

/* page banners (2.35) */
.banner{position:relative;margin:0 0 1.2rem;border-radius:.8rem;overflow:hidden;border:1px solid var(--line);background:#14112f;max-height:19rem}
.banner img{display:block;width:100%;height:auto;aspect-ratio:3/1;max-height:19rem;object-fit:cover;object-position:center 40%}
.banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,28,.6) 0%,rgba(10,8,28,.32) 18%,rgba(10,8,28,0) 42%),linear-gradient(0deg,rgba(10,8,28,.45),rgba(10,8,28,0) 40%);pointer-events:none}
.banner-txt{position:absolute;z-index:1;left:clamp(1rem,3vw,2.2rem);bottom:clamp(.8rem,2.5vw,1.6rem);max-width:min(34rem,70%);text-shadow:0 2px 8px rgba(0,0,0,.7)}
.banner-txt h1{margin:0;font-size:clamp(1.5rem,4vw,2.6rem);line-height:1.1}
.banner-txt p{margin:.35rem 0 0;font-size:clamp(.85rem,1.6vw,1.05rem);opacity:.92}
.banner-txt .plus{text-shadow:none;vertical-align:middle}
@media (max-width:820px){.banner{border-radius:.6rem;max-height:11rem}.banner img{max-height:11rem}.banner-txt{max-width:85%}.banner-txt p{display:none}}

/* places with no banner picture yet (2.37) */
.banner-plain{max-height:none;min-height:6.5rem;background:linear-gradient(120deg,#1d1745,#2a1f52 55%,#14112f)}
.banner-plain .banner-txt{position:static;max-width:none;padding:1.4rem clamp(1rem,3vw,2.2rem)}
.banner-plain:after{display:none}
.town .hit.quiet path{cursor:default}

/* breadcrumbs: [parent] > [current] (2.38) */
.crumb{margin:.2rem 0 .9rem}
.crumb .sep{opacity:.6;margin:0 .15rem}
.crumb [aria-current]{opacity:.85}
.char-view>.crumb{grid-column:1/-1;margin:0}
.cottage-h{margin:1.6rem 0 .2rem}
.wing-one{grid-template-columns:1fr}
.profile-page>.crumb{grid-column:1/-1;margin:0}
/* 2.39: lobbies are a live strip plus picture tiles */
.strip-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}
.strip{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:.9rem;padding:.9rem 1rem}
.strip-h{margin:0 0 .6rem;color:var(--accent);font:italic 600 1.05rem Georgia,serif;letter-spacing:.02em}
.loiter,.pinned{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.loiter a{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.loiter a:hover strong,.pinned a:hover strong{color:var(--accent)}
.pinned li{display:flex;flex-direction:column;gap:.1rem}
.pinned a{text-decoration:none;color:var(--ink)}
.hub-tiles.n1{grid-template-columns:minmax(0,28rem)}
.hub-tiles.n2{grid-template-columns:repeat(2,1fr)}
.hub-tiles.n3{grid-template-columns:repeat(3,1fr)}
.hub-tiles.n2 .hub-tile,.hub-tiles.n3 .hub-tile{aspect-ratio:16/10}
.hub-tile.noimg{background:linear-gradient(135deg,#27226b,#0b0c1f)}
.hub-tile .tile-badge{position:absolute;top:.6rem;right:.6rem;z-index:2}
.hub-tile .tile-tag{margin-top:.2rem;font-size:.72rem;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}
@media (max-width:900px){.strip-pair{grid-template-columns:1fr}.hub-tiles.n3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hub-tiles.n2,.hub-tiles.n3{grid-template-columns:1fr}.hub-tiles.n2 .hub-tile,.hub-tiles.n3 .hub-tile{aspect-ratio:16/9}}
.hub-tiles.n5{grid-template-columns:repeat(5,1fr)}
@media (max-width:900px){.hub-tiles.n5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.hub-tiles.n4,.hub-tiles.n5{grid-template-columns:1fr}.hub-tiles.n4 .hub-tile,.hub-tiles.n5 .hub-tile{aspect-ratio:16/9}}
/* 2.40.3: staff pages use the width */
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;align-items:start;margin-top:1rem}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:0 1rem;align-items:start;margin-top:1rem}
@media (max-width:900px){.cols2{grid-template-columns:1fr}}
.panel code{overflow-wrap:anywhere;word-break:break-all}
.bk-bar{height:.7rem;border-radius:.4rem;background:rgba(255,255,255,.1);overflow:hidden;margin:.8rem 0 .3rem}
.bk-bar span{display:block;height:100%;width:0;background:var(--accent,#f6b73c);transition:width .3s}
/* 2.42: the Library room */
.lib-search{display:flex;gap:.5rem;max-width:34rem;margin-top:.6rem}
.lib-search input{flex:1;min-width:0}
.lib-room{position:relative;border-radius:.9rem;overflow:hidden;border:1px solid var(--line);background:#120f1f;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.lib-base{display:block;width:100%;height:auto;transition:filter .3s ease}
.lib-room.lit .lib-base{filter:blur(2.5px) brightness(.66) saturate(.92)}
.lib-spot{position:absolute;display:block;border-radius:.9rem;outline:none}
.lib-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--room-img);background-repeat:no-repeat;background-size:var(--bs) auto;background-position:var(--bx) var(--by);opacity:0;transition:opacity .25s ease,box-shadow .25s ease;filter:brightness(1.1) saturate(1.08);box-shadow:0 0 0 2px rgba(255,215,140,.95),0 0 34px 6px rgba(255,185,90,.55)}
.lib-spot:hover::before,.lib-spot:focus-visible::before{opacity:1}
.lib-pill{position:absolute;z-index:1;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.32rem .75rem;border-radius:1.2rem;background:rgba(20,16,38,.84);color:#fff;border:1px solid rgba(255,215,140,.6);font-size:.9rem;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 14px rgba(255,190,90,.3);pointer-events:none;transition:background .2s,transform .2s,box-shadow .2s;animation:lib-breathe 4.5s ease-in-out infinite}
.lib-pill-top{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.lib-pill small{opacity:.75;font-weight:500}
.lib-line{display:none;max-width:13rem;text-align:center;font-size:.78rem;font-weight:500;line-height:1.25;color:#ffe9c4;white-space:normal}
.lib-spot:hover .lib-pill,.lib-spot:focus-visible .lib-pill{background:rgba(40,28,70,.96);transform:translate(-50%,-50%);box-shadow:0 4px 16px rgba(0,0,0,.6),0 0 22px rgba(255,200,110,.6);animation:none}
.lib-spot:hover .lib-line,.lib-spot:focus-visible .lib-line{display:block}
@keyframes lib-breathe{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 10px rgba(255,190,90,.22)}50%{box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 20px rgba(255,200,110,.5)}}
@media (prefers-reduced-motion:reduce){.lib-pill{animation:none}.lib-base,.lib-spot::before,.lib-pill{transition:none}}
.lib-ico{flex:none;color:var(--accent,#f6b73c)}
.lib-buttons{display:none;list-style:none;margin:0;padding:0;gap:.6rem}
.lib-btn{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:.7rem;background:var(--panel,rgba(255,255,255,.05));border:1px solid var(--line);text-decoration:none;color:inherit}
.lib-btn span{display:flex;flex-direction:column;flex:1;min-width:0}
.lib-btn small{color:var(--muted,#9aa);font-size:.8rem}
.lib-btn em{font-style:normal;opacity:.7}
.lib-btn:hover,.lib-btn:focus-visible{border-color:var(--accent)}
@media (max-width:820px){.lib-room{display:none}.lib-buttons{display:grid;grid-template-columns:1fr 1fr}}
@media (max-width:520px){.lib-buttons{grid-template-columns:1fr}}
.shelf-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem}
.shelf-chips .chip{padding:.3rem .7rem;border-radius:2rem;border:1px solid var(--line);text-decoration:none;color:inherit;font-size:.88rem}
.shelf-chips .chip.on{background:var(--accent,#f6b73c);color:#1a1326;border-color:transparent;font-weight:600}
.ab-methods{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.ab-methods .btn.on{background:var(--accent,#f6b73c);color:#1a1326;border-color:transparent}
.ab-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin:.4rem 0}
.ab-tray{display:flex;flex-wrap:wrap;gap:.5rem;min-height:2.6rem;padding:.5rem;border:1px dashed var(--line);border-radius:.6rem;margin:.4rem 0}
.ab-chip{min-width:2.6rem;padding:.35rem .6rem;border-radius:.6rem;border:1px solid var(--line);background:var(--panel,rgba(255,255,255,.07));color:inherit;font-weight:700;font-size:1.05rem;cursor:grab}
.ab-chip.sel{outline:2px solid var(--accent,#f6b73c)}
.ab-wrap{overflow-x:auto}
.ab-table{width:100%;border-collapse:collapse}
.ab-table th,.ab-table td{padding:.3rem .35rem;text-align:center;border-bottom:1px solid var(--line)}
.ab-table th[scope=row]{text-align:left}
.ab-table input{width:3.6rem;text-align:center}
.ab-slot{white-space:nowrap}
.ab-slot .ab-chip{margin-right:.3rem;padding:.15rem .45rem}
.ab-slot.over{background:rgba(246,183,60,.2)}
.ab-slot.ab-target{background:rgba(246,183,60,.08)}
.ab-total{font-weight:700;font-size:1.1rem}
.ab-mod{color:var(--mute)}
.ab-log{margin-top:.8rem}
.ab-roll{padding:.3rem 0;border-bottom:1px solid var(--line)}
.ab-roll.aside{opacity:.6}
.ab-roll ul{margin:.2rem 0 0;padding-left:1.1rem;font-size:.88rem}
.pf-saves{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem;margin-bottom:.6rem}
.pf-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem 1.6rem}
.pf-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.6rem;align-items:start}
@media (max-width:700px){.pf-top{grid-template-columns:1fr}}
@media (max-width:460px){.pf-skills{grid-template-columns:1fr}}
.pf-skills label{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.d55-abs{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;margin-bottom:.8rem}
.d55-ab{display:flex;flex-direction:column;align-items:center;padding:.5rem .2rem;border:1px solid var(--line);border-radius:.7rem}
.d55-ab .k{font-size:.75rem;color:var(--mute);letter-spacing:.06em}
.d55-ab .m{font-size:1.5rem;font-weight:700}
.d55-ab .s{font-size:.85rem;color:var(--mute)}
.d55-line{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:.4rem 0 .8rem}
.d55-list{list-style:none;margin:0;padding:0;columns:1}
.d55-list li{padding:.1rem 0}
.d55-list li.p{font-weight:600}
.d55-list i{font-style:normal;color:var(--accent,#f6b73c);display:inline-block;width:1.1rem}
@media (max-width:640px){.d55-abs{grid-template-columns:repeat(3,1fr)}}
.ab-slot.has-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cls55{margin-top:1rem}
.cls-row{display:grid;grid-template-columns:1fr 1fr 4.5rem auto;gap:.5rem;margin:.3rem 0;align-items:center}
@media (max-width:640px){.cls-row{grid-template-columns:1fr 4.5rem auto}.cls-row input:nth-child(2){grid-column:1/-1;order:5}}
.d55-classes{font-size:1.1rem;font-weight:600;margin:0 0 .6rem}
.comp-filter{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.2rem 0 .8rem}
.comp-filter input[type=search]{flex:1;min-width:12rem}
.comp-table{width:100%;border-collapse:collapse}
.comp-table th,.comp-table td{padding:.4rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.comp-facts{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.2rem;margin:0}
.comp-facts dt{color:var(--mute)}.comp-facts dd{margin:0}
.shelf-chips .chip small{opacity:.7}
@media (max-width:640px){.comp-table th:nth-child(4),.comp-table td:nth-child(4){display:none}}
.wz-bar{display:flex;flex-wrap:wrap;gap:.3rem;list-style:none;margin:.6rem 0 1rem;padding:0;counter-reset:wz}
.wz-bar li{counter-increment:wz}
.wz-bar button{padding:.4rem .8rem;border-radius:2rem;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font-size:.9rem}
.wz-bar button::before{content:counter(wz) ". ";opacity:.6}
.wz-bar li.on button{background:var(--accent,#f6b73c);color:#1a1326;border-color:transparent;font-weight:600}
.wz-bar li.done button{border-color:var(--accent,#f6b73c)}
.wz-blurb{color:var(--mute);margin:.2rem 0 .8rem}
.wz-tools{margin:.4rem 0 1rem}
.wz-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.d55-hist{margin:.4rem 0 0;padding-left:1.1rem;font-size:.9rem}
.pf-skills label{margin:0;padding:.15rem 0;white-space:nowrap}
.pf-skills label>span{overflow:hidden;text-overflow:ellipsis}
.pf-skills select{width:7.8rem;flex:none;margin:0;padding:.25rem .4rem;font-size:.92rem}
@media (max-width:460px){.pf-skills select{width:8.5rem}}
.manage-list{display:flex;flex-wrap:wrap;gap:.4rem}
.manage-list .chip{padding:.25rem .65rem;border-radius:2rem;border:1px solid var(--line);text-decoration:none;color:inherit;font-size:.88rem}
.manage-list .chip small{opacity:.65}
.comp-table td.nowrap{white-space:nowrap}
.wz-unknown{color:var(--accent,#f6b73c)}
.nudge{border-color:var(--accent,#f6b73c)}.nudge p{margin:.3rem 0}
.bz-table td{vertical-align:top}.bz-table th a{color:inherit;text-decoration:none}
.gear-find{position:relative;margin:.6rem 0}
.gear-find input{width:100%}
.gear-hits{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel2,#1b1630);border:1px solid var(--line);border-radius:.6rem;box-shadow:0 8px 24px rgba(0,0,0,.45);overflow:hidden}
.gear-hits .mi{display:flex;justify-content:space-between;gap:1rem;width:100%;padding:.45rem .7rem;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer}
.gear-hits .mi.on,.gear-hits .mi:hover{background:rgba(246,183,60,.15)}
.gear-hits .mi-kind{color:var(--mute);font-size:.82rem}
.nt-board{padding:1.1rem;border-radius:.9rem;border:1px solid #4a3822;background:radial-gradient(circle at 20% 10%,#6b4d2c 0,#54391f 60%,#47301a 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.45);margin-bottom:1rem}
.nt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));gap:1.3rem 1.1rem}
.nt-card{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:1.1rem .9rem .8rem;border-radius:.3rem;background:#f3e6c4;color:#2a2012;text-decoration:none;transform:rotate(var(--tilt,0deg));box-shadow:0 4px 10px rgba(0,0,0,.4);transition:transform .15s}
.nt-card:hover,.nt-card:focus-visible{transform:rotate(0) translateY(-3px) scale(1.02);outline:none}
.nt-card strong{font-size:1.08rem;line-height:1.25}
.nt-card .nt-kind,.nt-paper .nt-kind{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#7a5a20}
.nt-card .nt-blurb{font-size:.9rem;color:#4a3a22}
.nt-card .nt-reward{font-size:.85rem;font-weight:600;color:#6b3f12}
.nt-card .nt-foot{margin-top:auto;padding-top:.4rem;font-size:.78rem;color:#6a5a3e;border-top:1px dashed #b9a577}
.nt-pin{position:absolute;top:-.45rem;left:50%;width:.9rem;height:.9rem;margin-left:-.45rem;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a8a,#b3261e 70%);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.nt-card.nt-job{background:#e4ecd1}.nt-card.nt-notice{background:#efe7d6}.nt-card.nt-event{background:#e5dcf0}
.nt-card.pinned{box-shadow:0 0 0 2px #f6b73c,0 4px 10px rgba(0,0,0,.4)}
.nt-card.done{opacity:.6;filter:saturate(.6)}
.nt-old{padding-top:.6rem}
.nt-paper{padding:1.2rem 1.4rem;border-radius:.4rem;background:#f3e6c4;color:#2a2012;margin:.6rem 0 1rem;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.nt-paper h1{margin:.2rem 0 .4rem;color:#2a2012}.nt-paper .lead{color:#4a3a22}.nt-paper .comp-facts dt{color:#7a5a20}.nt-paper a{color:#6b3f12}
.nt-paper.nt-job{background:#e4ecd1}.nt-paper.nt-event{background:#e5dcf0}.nt-paper.nt-notice{background:#efe7d6}
.nt-takers{margin:.2rem 0 .8rem;padding-left:1.1rem}
.nt-take{display:flex;flex-wrap:wrap;gap:.6rem;align-items:end;margin-top:.6rem}
@media (prefers-reduced-motion:reduce){.nt-card{transition:none}}
.gv-form{display:flex;gap:.4rem;align-items:center}.gv-form input{min-width:14rem}
.gv-details{margin:.4rem 0 .8rem;border:1px solid var(--line);border-radius:.6rem;padding:.4rem .8rem}
.gv-details summary{cursor:pointer;padding:.2rem 0}
.gv-box{max-height:13rem;overflow-y:auto;margin:.4rem 0;padding-right:.4rem}
.gv-row{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}
.gv-row input{flex:1;min-width:0}
/* the Tavern scene */
/* a screen where the picture is the interface: as wide as the window allows, never taller than the space under the menu, so it is never cropped.
   Set --ar to the picture's width / height and --chrome to the height of everything else on the screen. */
.pic-page{width:min(100%,max(calc((100vh - var(--chrome,9rem)) * var(--ar,2.286)),60rem));margin:.8rem auto 1.5rem}
.pic-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;margin:0 0 .6rem;min-height:2.4rem}
.pic-bar .crumb{margin:0}
.pic-tool{padding:.3rem .9rem}
.pic-bar .lib-search{margin:0;max-width:none}
.pic-bar .lib-search input{width:15rem;padding:.35rem .7rem}
.pic-bar .lib-search .btn{padding:.35rem .9rem}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tv-wrap{overflow-x:auto;border-radius:.9rem;border:1px solid var(--line);background:#0d0a14;-webkit-overflow-scrolling:touch}
.tv{position:relative;min-width:900px;line-height:0;container-type:inline-size}
.tv-img{display:block;width:100%;height:auto}
.tv-npc{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;border-radius:50%}
.tv-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,120,.34),rgba(255,206,120,0) 72%);animation:tv-glow 3.2s ease-in-out infinite;pointer-events:none}
.tv-npc:hover .tv-ring,.tv-npc.on .tv-ring,.tv-npc:focus-visible .tv-ring{background:radial-gradient(closest-side,rgba(255,214,140,.55),rgba(255,206,120,0) 74%);animation:none}
.tv-npc:focus-visible{outline:2px solid #f6b73c;outline-offset:2px}
@keyframes tv-glow{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.tv-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:.3rem;text-decoration:none;line-height:1.2;animation:tv-bob 2.4s ease-in-out infinite}
.tv-pin:hover,.tv-pin:focus-visible{animation-play-state:paused}
@keyframes tv-bob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 9px))}}
.tv-tag{display:inline-flex;gap:.4rem;align-items:center;padding:.3rem .8rem;border-radius:999px;background:rgba(20,14,30,.88);border:1px solid #f6b73c;color:#ffe9bf;font-size:.9rem;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.tv-tag b{background:#f6b73c;color:#2a1a05;border-radius:999px;padding:0 .45rem;font-size:.8rem}
.tv-pin:hover .tv-tag,.tv-pin:focus-visible .tv-tag{background:#f6b73c;color:#2a1a05}
.tv-arrows{display:flex;flex-direction:column;align-items:center;gap:0;height:46px;justify-content:center}
.tv-arrows i{display:block;width:18px;height:18px;border-left:5px solid #ffd27a;border-top:5px solid #ffd27a;transform:rotate(45deg);margin-top:-9px;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));animation:tv-up 1.6s ease-in-out infinite}
.tv-arrows i:nth-child(2){animation-delay:.25s}.tv-arrows i:nth-child(3){animation-delay:.5s}
@keyframes tv-up{0%{opacity:0;translate:0 10px}40%{opacity:1}100%{opacity:0;translate:0 -10px}}
.tv-pinicon{width:28px;height:38px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.tv-say{position:absolute;display:flex;gap:.6rem;align-items:flex-end;--fw:clamp(46px,4.2cqw,72px);width:clamp(230px,24cqw,380px);line-height:1.35;z-index:6;left:var(--x);top:var(--y);transition:opacity .45s ease}
.tv-say.gone{opacity:0;pointer-events:none}
.tv-say[hidden]{display:none}
.tv-say.pop{animation:tv-pop .28s ease-out}
@keyframes tv-pop{from{opacity:0;scale:.94}to{opacity:1;scale:1}}
.tv-say.at-bar{transform:translate(calc(var(--fw) / -2),-100%)}
.tv-say.at-hearth{transform:translate(calc(var(--fw) / -2),-100%)}
.tv-say.at-corner{transform:translate(calc(-100% + var(--fw) / 2),-100%);flex-direction:row-reverse;width:clamp(230px,24cqw,380px)}
.tv-face{flex:0 0 auto;width:var(--fw);height:var(--fw);border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#3b2a52;color:#ffe9bf;font-size:1.7rem;font-weight:700;border:2px solid #f6b73c;box-shadow:0 4px 14px rgba(0,0,0,.6)}
.tv-face img{width:100%;height:100%;object-fit:cover}
.tv-bubble{position:relative;flex:1 1 auto;padding:.6rem .8rem .5rem;border-radius:.9rem;background:var(--bub,rgba(250,240,220,.97));color:#2b1d0e;box-shadow:0 6px 20px rgba(0,0,0,.55);min-width:0}
.tv-bubble::before{content:"";position:absolute;bottom:calc(var(--fw) / 2 - 9px);left:-9px;border:9px solid transparent;border-left:0;border-right-color:var(--bub,rgba(250,240,220,.97))}
.at-corner .tv-bubble::before{left:auto;right:-9px;border:9px solid transparent;border-right:0;border-left-color:var(--bub,rgba(250,240,220,.97))}
.tv-who{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#7a4b12}
.tv-text{margin:.15rem 0 .35rem;font-size:clamp(.85rem,1.05cqw,1.02rem);font-style:italic}
.tv-mark{display:inline-block;font-size:.75rem;padding:.05rem .5rem;border-radius:999px;background:#2b1d0e;color:#ffe9bf;margin-bottom:.3rem}
.tv-mark.pv{background:#5a1d6b}
.tv-react{display:flex;flex-wrap:wrap;gap:.25rem}
.tv-em{background:rgba(43,29,14,.08);border:1px solid rgba(43,29,14,.25);border-radius:999px;padding:.05rem .5rem;font-size:.95rem;cursor:pointer;color:#2b1d0e;line-height:1.5}
.tv-em:hover{background:rgba(246,183,60,.35)}.tv-em.on{background:#f6b73c;border-color:#b57a10}
.tv-hint{display:none;margin:.4rem 0 0}
@media (hover:none),(max-width:900px){.tv-hint{display:block}.tv-say,.tv-say.at-corner{width:215px}.tv-say{gap:.45rem}.tv-text{font-size:.85rem}.tv-bubble{padding:.45rem .6rem .4rem}.tv-em{font-size:.85rem;padding:0 .4rem}.tv-say{--fw:48px}.tv-face{font-size:1.4rem}}
.tv-dm{margin:.7rem 0 0}
@media (prefers-reduced-motion:reduce){.tv-ring,.tv-pin,.tv-arrows i{animation:none}.tv-arrows i{opacity:1}.tv-say.pop{animation:none}}
.rm-row{display:grid;gap:.5rem;padding:.7rem 0;border-top:1px solid var(--line)}
.rm-row.off{opacity:.55}
.rm-opts{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center}
.rm-count{color:var(--mute);margin-left:auto}
.rm-opts select{width:auto;max-width:100%}

.tv-hit{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.tv-zone{fill:rgba(255,206,120,0);stroke:rgba(255,214,140,0);stroke-width:3;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .2s,stroke .2s}
.tv-hit a:hover .tv-zone,.tv-hit a:focus .tv-zone,.tv-hit a.hot .tv-zone{fill:rgba(255,206,120,.16);stroke:rgba(255,214,140,.9)}
.tv-hit a:focus{outline:none}
.tv-npc{z-index:3}.tv-pin{z-index:4}
.tv-pin.hot .tv-tag{background:#f6b73c;color:#2a1a05}

/* the Graffiti Wall */
.gf-wrap{overflow-x:auto;border-radius:.9rem;border:1px solid var(--line);background:#14100d;-webkit-overflow-scrolling:touch}
.gf{position:relative;min-width:900px;aspect-ratio:2.286;container-type:inline-size;overflow:hidden}
.gf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gf-bricks{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 25%,rgba(255,190,110,.2),transparent 62%),radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.6)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Crect width='120' height='60' fill='%23595047'/%3E%3Cg fill='%23665c52'%3E%3Crect x='2' y='2' width='56' height='26' rx='3'/%3E%3Crect x='62' y='2' width='56' height='26' rx='3'/%3E%3Crect x='-28' y='32' width='56' height='26' rx='3'/%3E%3Crect x='32' y='32' width='56' height='26' rx='3'/%3E%3Crect x='92' y='32' width='56' height='26' rx='3'/%3E%3C/g%3E%3C/svg%3E") 0 0/9cqw auto}
.gf-list{list-style:none;margin:0;padding:0}
.gf-s{position:absolute;max-width:12.8cqw;transform:rotate(var(--tilt,0deg));transform-origin:left top;line-height:1.15;font-size:clamp(.8rem,1.4cqw,1.3rem)}
.gf-line{display:inline}
.gf-ic{font-size:1.25em;margin-right:.25em;vertical-align:-.05em;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.gf-by{display:block;margin-top:.15em;font-size:.62em;opacity:.8;font-family:Georgia,serif;font-style:italic;letter-spacing:.02em}
.gf-spray{font-family:"Segoe Print","Bradley Hand","Marker Felt","Comic Sans MS",cursive;font-weight:700;color:hsl(var(--hue),92%,64%);text-shadow:0 0 1px rgba(0,0,0,.55),0 0 9px hsla(var(--hue),95%,60%,.55);letter-spacing:.02em}
.gf-chalk{font-family:"Chalkboard SE","Segoe Print","Comic Sans MS",cursive;color:#f4efe4;opacity:.93;text-shadow:0 0 3px rgba(255,255,255,.28)}
.gf-scratch{font-family:Georgia,"Times New Roman",serif;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#2a2520;text-shadow:0 1px 0 rgba(255,255,255,.22),0 -1px 0 rgba(0,0,0,.35)}
.gf-crayon{font-family:"Comic Sans MS","Chalkboard SE","Segoe Print",cursive;font-weight:700;color:hsl(var(--hue),78%,62%);text-shadow:1px 1px 0 rgba(0,0,0,.28)}
.gf-ink{font-family:"Brush Script MT","Segoe Script","Snell Roundhand",cursive;font-style:italic;font-size:1.15em;color:#0f0b1e;text-shadow:0 0 1px rgba(255,255,255,.2);background:rgba(240,228,200,.55);padding:.05em .4em;border-radius:3px}
.gf-wipe{position:absolute;top:-.8rem;right:-.8rem;margin:0;opacity:.35;transition:opacity .15s;transform:rotate(calc(var(--tilt,0deg) * -1))}
.gf-s:hover .gf-wipe,.gf-wipe:focus-within{opacity:1}
.gf-s .gf-wipe button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(20,14,30,.88);color:#fff;font:600 .95rem/1 system-ui,sans-serif;cursor:pointer;text-shadow:none}
.gf-s .gf-wipe button:hover,.gf-s .gf-wipe button:focus-visible{background:#7a1d17}
.gf-s .gf-wipe button:focus-visible{outline:2px solid #f6b73c}
.gf-empty{position:absolute;left:0;right:0;top:45%;text-align:center;margin:0;color:rgba(255,235,200,.55);font-style:italic;font-size:1.2rem}
.gf-dlg{max-width:min(34rem,94vw)}
.gf-icons{border:0;padding:0;margin:0 0 .8rem;display:flex;flex-wrap:wrap;gap:.3rem}
.gf-icons legend{padding:0;margin-bottom:.3rem}
.gf-ic-pick{position:relative;margin:0}
.gf-ic-pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.gf-ic-pick span{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.6rem;border:1px solid var(--line);font-size:1.4rem;cursor:pointer;background:rgba(255,255,255,.04)}
.gf-ic-pick input:checked+span{border-color:#f6b73c;background:rgba(246,183,60,.2);box-shadow:0 0 0 2px rgba(246,183,60,.4)}
.gf-ic-pick input:focus-visible+span{outline:2px solid #f6b73c;outline-offset:2px}

/* on the painted plaster wall the writing is darker, so it reads on the light surface */
.gf.has-art .gf-spray{text-shadow:0 0 1px #000,1px 1px 0 rgba(0,0,0,.65),-1px -1px 0 rgba(0,0,0,.45),0 0 10px hsla(var(--hue),95%,55%,.45);color:hsl(var(--hue),88%,52%)}
.gf.has-art .gf-chalk{color:#3d362e;opacity:1;text-shadow:0 0 2px rgba(255,255,255,.5)}
.gf.has-art .gf-scratch{color:#4a3f33;text-shadow:0 1px 0 rgba(255,255,255,.5),0 -1px 0 rgba(0,0,0,.3)}
.gf.has-art .gf-crayon{color:hsl(var(--hue),80%,45%);text-shadow:1px 1px 0 rgba(255,255,255,.35)}
.gf.has-art .gf-ink{background:none;color:#1d1730;text-shadow:none}
.gf.has-art .gf-by{color:#3d362e;opacity:.85}
.gf.has-art .gf-empty{color:rgba(60,45,30,.6)}

/* ---- Match-A-Doodle ---- */
.mt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.mt-head h2{margin:.2rem 0}
.mt-wrap{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1.4rem;align-items:start}
@media (max-width:900px){.mt-wrap{grid-template-columns:1fr}}
.mt-bar{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;margin-bottom:.7rem;color:var(--mute)}
.mt-bar b{color:var(--ink);font-variant-numeric:tabular-nums}
.mt-bar .btn{margin:0 0 0 auto}
.mt-board{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;max-width:44rem}
.mt-card{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;perspective:700px;display:block;border-radius:14px}
.mt-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mt-card .in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .28s}
.mt-card.up .in,.mt-card.done .in{transform:rotateY(180deg)}
.mt-card .bk,.mt-card .fr{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.mt-card .bk{display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:800;color:#f4d27a;background:repeating-linear-gradient(45deg,#3a2f8f 0 10px,#2f2680 10px 20px);border:3px solid #6a5ad6;box-shadow:inset 0 0 0 3px #1c1650}
.mt-card .fr{transform:rotateY(180deg);background:#fff;border:3px solid #f4d27a}
.mt-card .fr img{width:100%;height:100%;object-fit:cover;display:block}
.mt-card.done .fr{border-color:#6bd48a}
@media (prefers-reduced-motion:reduce){.mt-card .in{transition:none}}
.mt-scores h3{margin-top:0}
.mt-list{list-style:none;margin:0 0 .8rem;padding:0;max-height:34rem;overflow:auto}
.mt-list li{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;padding:.3rem .2rem;border-bottom:1px solid var(--line)}
.mt-list li.me{color:var(--accent)}
.mt-list .rk{color:var(--mute);text-align:right}
.mt-list .tm{font-variant-numeric:tabular-nums}
.mt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.8rem;margin-top:1rem}
.mt-cards figure{margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0c1f}
.mt-cards img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.mt-cards figcaption{display:flex;justify-content:space-between;align-items:center;gap:.4rem;padding:.35rem .5rem;font-size:.85rem}
.mt-cards form{margin:0}
.mt-x{all:unset;cursor:pointer;color:#ff9aa8;font-size:.8rem;text-decoration:underline}
.mt-up{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.hub-tile.is-soon{cursor:default;opacity:.8}
.hub-tile.is-soon .tile-tag{color:var(--mute)}
.hub-tile.is-soon:hover{transform:none;border-color:var(--line);box-shadow:none}

.site-foot{margin:2.5rem 0 1.2rem;padding:0 1rem;text-align:center;font-size:.75rem;color:#8fc4ee}
.site-foot a{color:#8fc4ee;text-decoration:underline}
.loiter-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.gf.has-art .gf-s{padding:.1em .3em;border-radius:.5em;background:rgba(246,232,204,.74);box-shadow:0 0 .45em .3em rgba(246,232,204,.74)}
.gf.has-art .gf-chalk{color:#2b251f}.gf.has-art .gf-scratch{color:#352c23}

/* each regular has a slightly different bubble: the barkeep warm parchment, the old-timer a rosy peach, the stranger a cool grey-lilac */
.tv-say.at-bar{--bub:#f8ebcd}
.tv-say.at-hearth{--bub:#f7dcd0}
.tv-say.at-corner{--bub:#dfe0f0}
/* the barkeep's bubble is wide enough for every reaction on one row */
.tv-say.at-bar{width:clamp(360px,32cqw,520px)}
.tv-react{flex-wrap:nowrap}
/* the old-timer's bubble sits above him, over the fireplace, with its tail pointing down at his chair, so it never reads as the stranger talking */
.tv-say.at-hearth{width:clamp(250px,20cqw,330px);flex-direction:column-reverse;align-items:flex-start;gap:.5rem;transform:translate(-60%,-100%)}
.tv-say.at-hearth .tv-face{margin-left:calc(60% - var(--fw) / 2)}
.tv-say.at-hearth .tv-bubble{align-self:stretch}
.tv-say.at-hearth .tv-bubble::before{bottom:-9px;left:calc(60% - 9px);border:9px solid transparent;border-bottom:0;border-top-color:var(--bub)}
@media (hover:none),(max-width:900px){.tv-say.at-bar,.tv-say.at-hearth{width:215px}.tv-react{flex-wrap:wrap}}

.loiter-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.loiter-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* keeper's guide */
.guide-head h1{margin:.1rem 0 .3rem}
.guide-list{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.55rem}
.guide-list li{display:grid;gap:.1rem}
.guide-list .line{color:var(--muted,#b8b4d6);font-size:.92rem}
.guide .book-body blockquote{font-style:normal}
.guide details.faq{border:1px solid var(--line,#2c2760);border-radius:10px;margin:.6rem 0;background:#120f33}
.guide details.faq>summary{cursor:pointer;padding:.65rem .9rem;font-weight:600}
.guide details.faq>div{padding:0 .9rem .5rem}
.guide-pn{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* eyrie: numbers and health side by side */
.eyrie-top{display:grid;gap:1rem;align-items:stretch}
.eyrie-top>.panel{margin:0}
@media (min-width:900px){.eyrie-top.two{grid-template-columns:3fr 2fr}.eyrie-top.two .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem 1.5rem}}
/* eyrie: the doors in three columns, ranks beside them */
.eyrie-mid{display:grid;gap:1rem;align-items:start;margin-top:1rem}
.eyrie-mid>.panel{margin:0}
.eyrie-mid .hub-tiles[class]{grid-template-columns:repeat(3,1fr);margin:0}
.eyrie-mid .hub-tiles[class] .hub-tile{aspect-ratio:4/3}
@media (min-width:900px){.eyrie-mid{grid-template-columns:3fr 2fr}}
@media (max-width:560px){.eyrie-mid .hub-tiles[class]{grid-template-columns:1fr}.eyrie-mid .hub-tiles[class] .hub-tile{aspect-ratio:16/9}}
@media (min-width:561px) and (max-width:900px){.eyrie-mid .hub-tiles[class]{grid-template-columns:repeat(2,1fr)}}
.guide-list .tag{justify-self:start}
.dd-menu a.dd-hub{font-weight:700}
/* dashboard: two random heroes in the bottom-left corner, scaling with the picture */
.t-lists{width:auto;min-width:0;left:1.2%;bottom:2.5%}
.t-lists .tbox.cp{flex:none;display:flex;gap:.7cqw;padding:.7cqw;overflow:visible}
.cp .cp-one{display:flex;flex-direction:column;align-items:center;gap:.3cqw;width:5.4cqw;text-decoration:none;color:inherit}
.cp .pt{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:.5cqw;object-fit:cover;background:rgba(255,255,255,.1);font-weight:700;font-size:2cqw;border:1px solid rgba(255,255,255,.2)}
.cp .plus-pt{color:var(--accent,#f0b64a)}
.cp .nm{max-width:100%;font-size:max(.5rem,.85cqw);line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp .cp-one:hover .pt{border-color:rgba(255,200,90,.7)}
@media (max-width:820px){.t-lists .tbox.cp{justify-content:flex-start;gap:.8rem;padding:.7rem}.cp .cp-one{width:5.5rem;gap:.3rem}.cp .nm{font-size:.85rem}.cp .pt{font-size:1.6rem;border-radius:.5rem}}