/* ---------------------------------------------------------------------------
   Colossari
   A single dark world, deliberately: this is a game client that also happens
   to keep books. Ember for the colossus, gold for money, verdigris for the
   player. Every colour is painted explicitly so the page never borrows a
   host background.
   --------------------------------------------------------------------------- */

:root{
  --bg:#0B0D13; --surface:#141824; --surface2:#1D2231; --surface3:#252B3C;
  --line:#2A3145; --line-soft:#1F2534;
  --ink:#E7EAF3; --ink2:#98A1B9; --ink3:#626B84;
  --ember:#DD6B3A; --ember-hot:#FF8A50; --gold:#C9A45C; --verd:#4FB3A0;
  --good:#57B87A; --bad:#D2544F; --warn:#D9A441;
  --r:3px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:"Eczar",Georgia,serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  background-image:
    radial-gradient(1100px 520px at 78% -12%, rgba(221,107,58,.10), transparent 62%),
    radial-gradient(760px 420px at 4% 104%, rgba(79,179,160,.07), transparent 60%);
  background-attachment:fixed;
}
body[data-console]{
  background-image:
    radial-gradient(1000px 460px at 82% -14%, rgba(201,164,92,.09), transparent 62%),
    radial-gradient(700px 400px at 2% 104%, rgba(79,179,160,.05), transparent 60%);
}

h1,h2,h3{font-family:var(--disp); font-weight:600; margin:0; text-wrap:balance}
a{color:var(--verd); text-underline-offset:3px}
a:hover{color:var(--ink)}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
:focus-visible{outline:2px solid var(--verd); outline-offset:2px}

.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em}

.wrap{max-width:1240px; margin:0 auto; padding:0 20px}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  /* Solid, not translucent: backdrop-filter on a sticky element causes
     repaint artifacts while scrolling in several engines, and at 93% opacity
     the blur was doing nothing anyway. */
  background:#0B0D13;
  border-bottom:1px solid var(--line);
}
body[data-console] .topbar{border-bottom-color:rgba(201,164,92,.35)}
.topbar .wrap{display:flex; align-items:center; gap:18px; min-height:72px}

.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; text-decoration:none; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:26px; height:26px; display:block}
.brand-logo{height:40px; width:auto; display:block; flex:0 0 auto}
.brand b{font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.10em; text-transform:uppercase}
.brand .adm{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,164,92,.4); padding:2px 7px; border-radius:99px;
}

.worldstate{
  flex:1; display:flex; align-items:center; gap:14px; min-width:0;
  padding-left:20px; border-left:1px solid var(--line);
  text-decoration:none; color:var(--ink);
}
.worldstate:hover{color:var(--ink)}
.ws-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3); white-space:nowrap}
.ws-name{font-family:var(--disp); font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ws-bar{flex:1; min-width:70px; height:6px; background:var(--surface2); border-radius:99px; overflow:hidden; border:1px solid var(--line-soft)}
.ws-fill{display:block; height:100%; background:linear-gradient(90deg,var(--ember),var(--ember-hot))}
.ws-pct{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ember-hot); min-width:54px; text-align:right}
.spacer{flex:1}

.who-chip{display:flex; align-items:center; gap:9px; padding-left:16px; border-left:1px solid var(--line)}
.avatar{
  width:26px; height:26px; border-radius:99px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--verd),#2C6F63);
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#08110F;
  position:relative; overflow:hidden;
}
/* The picture is a BACKGROUND on a layer above the initial, not an <img>.
   A background that fails to load paints nothing - it cannot render a
   broken-image icon, and the letter behind it simply shows through. That
   is the fallback, and it needs no script, which matters because this
   site sends script-src 'self' and an inline onerror never runs. */
.avatar .avatar-img{
  position:absolute; inset:0; border-radius:inherit;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
body[data-console] .avatar{background:linear-gradient(140deg,var(--gold),#8A6E33); color:#171205}
.who-chip .n{font-size:13px; font-weight:600; line-height:1.15; color:var(--ink); text-decoration:none}
.who-chip .r{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}

/* ----------------------------------------------------------------- buttons */
.btn{
  border:1px solid var(--line); background:var(--surface2); padding:7px 14px;
  border-radius:var(--r); font-size:13px; font-weight:600; transition:.15s;
  white-space:nowrap; display:inline-block; text-align:center;
  text-decoration:none; color:var(--ink); cursor:pointer;
}
.btn:hover{border-color:var(--ink3); background:var(--surface3); color:var(--ink)}
.btn-p{background:var(--ember); border-color:var(--ember); color:#170B04}
.btn-p:hover{background:var(--ember-hot); border-color:var(--ember-hot); color:#170B04}
.btn-g{background:var(--gold); border-color:var(--gold); color:#171205}
.btn-g:hover{filter:brightness(1.1); color:#171205}
.btn-sm{padding:4px 10px; font-size:12px}
.btn-w{width:100%}
.btn-danger{color:var(--bad); border-color:rgba(210,84,79,.35)}
.btn-danger:hover{background:rgba(210,84,79,.12); border-color:var(--bad); color:var(--bad)}
.btn[disabled],.btn.is-off{opacity:.4; pointer-events:none}

/* ------------------------------------------------------------ layout + rail */
.layout{display:grid; grid-template-columns:200px 1fr; gap:34px; padding:30px 0 100px}
.barewrap{padding:56px 0 90px}

nav.rail{position:sticky; top:82px; align-self:start; display:flex; flex-direction:column; gap:1px}
nav.rail a{
  text-align:left; padding:7px 12px; border-radius:var(--r); color:var(--ink2);
  font-size:13.5px; font-weight:500; display:block; transition:.13s;
  border-left:2px solid transparent; text-decoration:none;
}
nav.rail a:hover{background:var(--surface); color:var(--ink)}
nav.rail a[aria-current="page"]{background:var(--surface2); color:var(--ink); border-left-color:var(--ember)}
body[data-console] nav.rail a[aria-current="page"]{border-left-color:var(--gold)}
/* Four groups now rather than two, so each heading has to cost less vertical
   space than it did - otherwise regrouping makes the rail longer, not shorter. */
.rail-h{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); padding:11px 12px 5px; margin-top:5px; border-top:1px solid var(--line-soft);
}
.rail-h.first{margin-top:0; border-top:none; padding-top:2px}

/* -------------------------------------------------------------- primitives */
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.pad{padding:20px}
.stack{display:flex; flex-direction:column}
.g8{gap:8px} .g10{gap:10px} .g12{gap:12px} .g14{gap:14px} .g20{gap:20px} .g28{gap:28px}
.row{display:flex; align-items:center; gap:12px}
.between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.wrapflex{flex-wrap:wrap}
.top{align-items:flex-start}
.muted{color:var(--ink2)} .dim{color:var(--ink3)}
.small{font-size:13px} .tiny{font-size:12px}
.right{text-align:right}
h2.sec{font-size:15px; font-weight:600}
h1.page{font-size:30px; font-weight:800}
.rule{height:1px; background:var(--line-soft)}
.cols2{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
.cols2w{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
.lede{margin:0; max-width:66ch; color:var(--ink2)}
.mt20{margin-top:20px} .mb20{margin-bottom:20px} .mb6{margin-bottom:6px}

/* Explainer guides (/guide/*): the article is one HTML block, so its own
   headings and paragraphs carry the vertical rhythm the .stack gap can't. */
.guide-body p{margin:10px 0 0; color:var(--ink2); line-height:1.7; max-width:68ch}
.guide-body p:first-child{margin-top:0}
.guide-body h2.sec{margin:22px 0 2px}
.guide-body strong{color:var(--ink)}
/* Two-column marketing rows stack on a phone rather than overflowing. */
@media (max-width:620px){ .cols2, .cols2w{grid-template-columns:1fr} }

.pill{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px; border:1px solid var(--line); color:var(--ink2);
}
.pill.live{color:var(--ember-hot); border-color:rgba(221,107,58,.45); background:rgba(221,107,58,.10)}
.pill.gold{color:var(--gold); border-color:rgba(201,164,92,.4); background:rgba(201,164,92,.08)}
.pill.verd{color:var(--verd); border-color:rgba(79,179,160,.4); background:rgba(79,179,160,.08)}
.pill.warn{color:var(--warn); border-color:rgba(217,164,65,.4); background:rgba(217,164,65,.08)}
.pill.bad{color:var(--bad); border-color:rgba(210,84,79,.4); background:rgba(210,84,79,.08)}
.pill.dead{color:var(--ink3)}
.dot{width:5px; height:5px; border-radius:99px; background:currentColor}
.pill.live .dot{animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.25}}

.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.statgrid.s3{grid-template-columns:repeat(3,1fr)}
.statgrid.s2{grid-template-columns:repeat(2,1fr)}
.stat{background:var(--surface); padding:13px 14px}
.stat .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.stat .v{font-family:var(--mono); font-size:18px; font-variant-numeric:tabular-nums; margin-top:5px; letter-spacing:-.02em}

.kv{display:grid; grid-template-columns:1fr auto; gap:9px 16px; font-size:13.5px; margin:0}
.kv dt{color:var(--ink2)}
.kv dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums}

table{width:100%; border-collapse:collapse; font-size:13.5px}
th{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); text-align:left; font-weight:500; padding:9px 14px; border-bottom:1px solid var(--line)}
td{padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.rank{font-family:var(--mono); color:var(--ink3); width:34px}
tr.me{background:rgba(79,179,160,.06)}
tr.me .rank{color:var(--verd)}
.tscroll{overflow-x:auto}
.empty{padding:26px 14px; text-align:center; color:var(--ink3); font-size:13.5px}

.code{font-family:var(--mono); font-size:12.5px; background:#090B10; border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; overflow-x:auto; color:var(--ink2); line-height:1.7; white-space:pre-wrap; word-break:break-all}
.note{border-left:2px solid var(--gold); padding:2px 0 2px 14px; font-size:13.5px; color:var(--ink2)}
.note strong{color:var(--ink)}
.note.verd{border-color:var(--verd)}
.note.bad{border-color:var(--bad)}

/* ------------------------------------------------------------------- forms */
input,select,textarea{
  width:100%; background:var(--surface2); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r); padding:9px 11px; font:inherit; font-size:14px;
}
input::placeholder{color:var(--ink3)}
input:focus,select:focus,textarea:focus{border-color:var(--verd); outline:none}
/* Radios and checkboxes are not text fields - the width:100% above stretches
   them full-width (squashing any label beside them), so reset to native size. */
input[type=radio],input[type=checkbox]{
  width:auto; background:none; border:0; padding:0; margin:0; accent-color:var(--verd);
}
select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px;
}
label.f{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink2)}
label.f .hint{font-size:11.5px; color:var(--ink3); font-family:var(--mono)}
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.suffix{display:flex; align-items:center; gap:8px}
.suffix .u{font-family:var(--mono); font-size:12px; color:var(--ink3)}
.chk{display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--ink2); cursor:pointer}
.chk input{width:16px; height:16px; flex:0 0 auto; margin-top:2px; accent-color:var(--verd)}

.setrow{display:grid; grid-template-columns:1fr 200px; gap:16px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.setrow:last-child{border-bottom:none}
.setrow .lab{font-size:14px; font-weight:600}
.setrow .desc{font-size:12.5px; color:var(--ink3); margin-top:3px; max-width:60ch}
.setrow.locked{opacity:.9}

/* the margin ladder on the settings page */
.marg{width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums}
.marg th{text-align:right; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); font-weight:500; padding:0 0 7px; border-bottom:1px solid var(--line)}
.marg th:first-child, .marg td:first-child{text-align:left}
.marg td{text-align:right; padding:7px 0; border-bottom:1px solid var(--line-soft); color:var(--ink2)}
.marg tr:last-child td{border-bottom:none}
.marg tr.on td{color:var(--ink); background:rgba(201,164,92,.07)}
.marg tr.on td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
.marg tr.on td strong{color:var(--gold)}
.marg td:first-child{padding-left:9px}

/* --------------------------------------------------------------------- shop */
/* Ichor gets its own colour so it never reads as money. Gold is cash on this
   site; ichor is the green of something that came out of a colossus. */
:root{ --ichor:#6FCF97; --ichor-dim:rgba(111,207,151,.14) }

.ichor-purse{font-size:34px; color:var(--ichor); font-variant-numeric:tabular-nums}

.shoplist{display:flex; flex-direction:column}
.shopitem{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:14px 20px; border-top:1px solid var(--line-soft)}
.shopitem:first-child{border-top:none}
.shopitem.off{opacity:.52}

.si-main{min-width:0}
.si-name{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.si-blurb{font-size:12.5px; color:var(--ink3); margin-top:4px; max-width:52ch}
.si-dmg{font-family:var(--mono); font-size:15px; color:var(--ink); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.si-dmg .u{font-size:10px; color:var(--ink3); margin-left:3px; text-transform:uppercase; letter-spacing:.1em}

.si-buy{display:flex; flex-direction:column; align-items:flex-end; gap:7px; white-space:nowrap}
.si-price{font-family:var(--mono); font-size:13.5px; color:var(--ichor);
  font-variant-numeric:tabular-nums}
.si-price.short{color:var(--ink3)}
.si-price .u{font-size:10px; color:var(--ink3); margin-left:4px; text-transform:uppercase; letter-spacing:.1em}

/* rarity, quietly - the item name carries the weight, not a rainbow */
.rar{font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:2px 6px; border-radius:99px; border:1px solid var(--line); color:var(--ink3)}
.rar.r-rare{color:#7FA9E8; border-color:rgba(127,169,232,.4)}
.rar.r-epic{color:#B98CE0; border-color:rgba(185,140,224,.4)}
.rar.r-mythic{color:var(--ember-hot); border-color:rgba(255,138,80,.45)}

.btn-quiet{background:transparent; border-color:var(--line); color:var(--ink3)}
.btn-quiet:hover{color:var(--ink); border-color:var(--ink3)}

.ledger{width:100%; border-collapse:collapse; font-size:12.5px}
.ledger td{padding:8px 20px; border-top:1px solid var(--line-soft)}
.ledger tr:first-child td{border-top:none}
.l-when{font-family:var(--mono); font-size:11px; color:var(--ink3); white-space:nowrap}
.l-why{color:var(--ink2)}
.l-amt{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.l-amt.up{color:var(--ichor)}
.l-amt.down{color:var(--ink3)}

@media (max-width:620px){
  .shopitem{grid-template-columns:1fr; gap:10px}
  .si-buy{align-items:flex-start; flex-direction:row; align-items:center; gap:12px}
}

/* ------------------------------------------------------------------ honours */
/* What a hunt pays when nobody funded it. Permanent, visible to other people,
   and free to mint - which is exactly why it can be given away generously. */
.honour{display:flex; align-items:flex-start; gap:11px}
.h-mark{flex:0 0 auto; width:9px; height:9px; margin-top:5px; border-radius:2px;
  transform:rotate(45deg); background:var(--ink3)}
.h-killer{background:var(--ember-hot); box-shadow:0 0 8px rgba(255,138,80,.5)}
.h-slayer{background:var(--gold)}
.h-first_blood{background:var(--verd)}
.h-port{background:var(--gold)}
.h-persistence{background:var(--ink3)}
.h-title{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35}
.h-detail{font-size:12px; color:var(--ink3); margin-top:2px}

/* -------------------------------------------------------------------- inbox */
.note-row{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:flex-start;
  padding:14px 20px; border-top:1px solid var(--line-soft)}
.note-row:first-child{border-top:none}
.note-row.fresh{background:rgba(201,164,92,.05)}
.n-mark{width:7px; height:7px; margin-top:6px; border-radius:99px; background:var(--ink3)}
.n-money{background:var(--gold); box-shadow:0 0 7px rgba(201,164,92,.55)}
.n-good{background:var(--verd)}
.n-info{background:var(--ink3)}
.n-title{font-size:13.5px; font-weight:600; color:var(--ink); line-height:1.35}
.n-title a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.n-title a:hover{border-color:var(--gold)}
.n-detail{font-size:12.5px; color:var(--ink3); margin-top:3px; max-width:60ch}
.n-when{font-family:var(--mono); font-size:10.5px; color:var(--ink3); white-space:nowrap; padding-top:2px}

/* the unread count in the rail */
.rail .unread{display:inline-block; min-width:17px; padding:1px 5px; margin-left:6px;
  border-radius:99px; background:var(--gold); color:#14161C;
  font:600 10.5px/1.5 var(--mono); text-align:center; vertical-align:middle}

@media (max-width:620px){
  .note-row{grid-template-columns:auto 1fr; gap:10px}
  .n-when{grid-column:2; padding-top:4px}
}

/* ----------------------------------------------------------------- footer */
.sitefoot{margin-top:48px; border-top:1px solid var(--line); padding:30px 0 38px}
.sitefoot a{color:var(--ink3); text-decoration:none}
.sitefoot a:hover{color:var(--ink)}

/* Four groups, laid out by the grid rather than by counting. auto-fit with a
   floor means they reflow to two columns and then one without a breakpoint
   per step, and the labels keep their meaning at every width. */
.foot-cols{display:grid; gap:22px 30px;
  grid-template-columns:repeat(auto-fit, minmax(155px, 1fr))}
.foot-col{display:flex; flex-direction:column; align-items:flex-start; gap:7px}
.foot-h{margin:0 0 2px; font-size:11px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink3); opacity:.75}
.foot-col a{font-size:13px; line-height:1.35}

/* The two statements are not links, and stopped sitting among them. */
.foot-base{display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;
  margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink3)}
.foot-claim{color:var(--ink); font-weight:600}
.foot-entity{margin-left:auto}
@media (max-width:620px){ .foot-entity{margin-left:0} }

/* ---------------------------------------------------------- quests + season */
.questrow{padding:14px 20px; border-top:1px solid var(--line-soft)}
.questrow:first-of-type{border-top:none}
.questrow.done{opacity:.6}
.questrow.done .q-title{text-decoration:line-through; text-decoration-color:var(--ink3)}
.q-title{font-size:13.5px; font-weight:600; color:var(--ink)}
.q-detail{font-size:12px; color:var(--ink3); margin-top:2px}
.q-count{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; white-space:nowrap}

.tierrow{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:12px 20px; border-top:1px solid var(--line-soft)}
.tierrow:first-of-type{border-top:none}
.t-num{width:26px; height:26px; border-radius:99px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font:600 12px var(--mono); color:var(--ink3)}
.tierrow.hit .t-num{border-color:var(--gold); color:var(--gold)}
.t-need{font-size:12.5px; font-weight:600; color:var(--ink)}
.t-gets{font-size:12px; color:var(--ink3); margin-top:2px}
.t-state{text-align:right; white-space:nowrap}

@media (max-width:620px){
  .tierrow{grid-template-columns:auto 1fr; gap:10px}
  .t-state{grid-column:2}
}

/* ------------------------------------------------------------------ flashes */
.flashes{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.flash{padding:11px 15px; border-radius:var(--r); font-size:13.5px; border:1px solid var(--line); background:var(--surface)}
.flash.good{border-color:rgba(87,184,122,.4); background:rgba(87,184,122,.08); color:var(--ink)}
.flash.bad{border-color:rgba(210,84,79,.4); background:rgba(210,84,79,.08); color:var(--ink)}

/* -------------------------------------------------------------------- boss */
.boss{position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--surface)}
.boss-art{height:196px; position:relative; border-bottom:1px solid var(--line);
  background:radial-gradient(520px 200px at 50% 130%, rgba(221,107,58,.42), transparent 70%), linear-gradient(160deg,#1A1420,#0C0E15 70%)}
.boss-art canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.boss-art .tag{position:absolute; left:20px; top:18px; z-index:2}

/* The art is the control now - it is the biggest thing on the page and it
   was inert. Taller than it was, because there is something in it worth
   looking at. */
.boss-art{cursor:pointer; user-select:none; height:236px}
@media (max-width:640px){ .boss-art{height:190px} }
.boss-art:focus-visible{outline:2px solid var(--verd); outline-offset:-2px}
.art-hint{
  position:absolute; right:16px; bottom:12px; z-index:2;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); opacity:0; transition:opacity .18s;
}
.boss-art:hover .art-hint,
.boss-art:focus-visible .art-hint{opacity:1}

.boss-card{padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface2)}

/* The weak point. It has existed in the code since Moments was written and
   has never been drawn once, so this is the first time the moment the whole
   network shares is visible on the site it happens on. Loud on purpose. */
.weakpoint{
  display:flex; align-items:center; gap:12px;
  padding:12px 20px; border-bottom:1px solid rgba(255,214,150,.30);
  background:linear-gradient(90deg, rgba(255,180,110,.16), rgba(221,107,58,.06));
  font-size:13.5px; color:var(--ink);
}
.weakpoint strong{color:#FFD9A8}
.weakpoint .wp-dot{
  width:9px; height:9px; border-radius:99px; background:#FFD9A8; flex:none;
  box-shadow:0 0 0 0 rgba(255,217,168,.7);
}
@media (prefers-reduced-motion:no-preference){
  .weakpoint .wp-dot{animation:wpPulse 1.5s ease-out infinite}
  @keyframes wpPulse{
    to{box-shadow:0 0 0 11px rgba(255,217,168,0)}
  }
}
.weakpoint .wp-left{margin-left:auto; color:#FFD9A8; font-size:15px; white-space:nowrap}

.boss-body{padding:20px}
.boss-name{font-size:34px; font-weight:800; line-height:1.05}
.boss-epithet{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:6px}

.hpwrap{margin-top:20px}
.hpbar{position:relative; height:26px; background:var(--surface2); border:1px solid var(--line); border-radius:2px; overflow:hidden}
.hpfill{height:100%; background:linear-gradient(90deg,#8E3A18,var(--ember) 55%,var(--ember-hot)); box-shadow:0 0 22px rgba(221,107,58,.34)}
.phasemark{position:absolute; top:0; bottom:0; width:1px; background:rgba(11,13,19,.85); z-index:2}
.phasemark span{position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; color:var(--ink3); white-space:nowrap}
.hpnums{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.hpnums .big{font-family:var(--mono); font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.03em}

.feed{max-height:396px; overflow-y:auto; scrollbar-width:thin}
.feed-item{display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:13px}
.feed-item .who{font-weight:600}
.feed-item .dmg{font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ember-hot)}
.feed-item .via{grid-column:1/-1; font-size:11.5px; color:var(--ink3); font-family:var(--mono)}
.feed-item.you{background:rgba(79,179,160,.06)}
.feed-item.you .who{color:var(--verd)}
.feed-item.crit .dmg{color:var(--gold); font-weight:600}

/* ---------------------------------------------------------------- bestiary */
.bestiary{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:14px}
.beast{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; display:flex; flex-direction:column}
.beast .art{height:172px; position:relative; border-bottom:1px solid var(--line); display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.beast .art .colossus{max-width:100%}
.beast .art .pill{position:absolute; left:12px; top:12px}
.beast .b{padding:14px}
.beast h3{font-size:18px}
.beast .ep{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-top:4px}
.beast .meta{display:flex; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid var(--line-soft); font-size:12px}

/* ------------------------------------------------------------------ armory */
.armory{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px}
.item{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:14px; text-align:left; transition:.14s; display:flex; flex-direction:column; gap:9px; width:100%}
.item:hover{border-color:var(--ink3)}
.item.on{border-color:var(--verd); background:rgba(79,179,160,.07)}
.item .nm{font-weight:600; font-size:14px; line-height:1.25}
.item .rr{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase}
.rr.common{color:var(--ink3)} .rr.rare{color:var(--verd)} .rr.epic{color:var(--gold)} .rr.mythic{color:var(--ember-hot)}
.item .eff{font-family:var(--mono); font-size:12.5px; color:var(--ink2)}
.item .state{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-top:auto}
.item.on .state{color:var(--verd)}

/* One owned COPY, with the rolls that make it different from every other
   copy of the same item. The card is the object; the button inside it is
   only the equip toggle, because reforging needs a second control and a
   card that is entirely one button has nowhere to put it. */
.item-card{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  display:flex; flex-direction:column; transition:border-color .14s;
}
.item-card:hover{border-color:var(--ink3)}
.item-card.on{border-color:var(--verd); background:rgba(79,179,160,.07)}
.item-hit{
  display:flex; flex-direction:column; gap:9px; width:100%;
  padding:14px 14px 10px; text-align:left;
}
.item-card .nm{font-weight:600; font-size:14px; line-height:1.25}
.item-card .rr{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase}
.item-card .eff{font-family:var(--mono); font-size:12.5px; color:var(--ink2)}
.item-card .state{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.item-card.on .state{color:var(--verd)}

.rolls{display:flex; flex-wrap:wrap; gap:4px; padding:0 14px 10px}
.rolls .chip{
  font-family:var(--mono); font-size:10.5px; padding:2px 6px; border-radius:2px;
  background:var(--surface2); color:var(--ink2); border:1px solid var(--line-soft);
  cursor:help;
}
/* Quality reads at a glance: gold for a fine roll, grey for a poor one, and
   nothing at all for the ordinary middle - a colour on every chip is a
   colour that says nothing. */
.rolls .chip.q-hi{color:var(--gold); border-color:rgba(201,164,92,.35)}
.rolls .chip.q-lo{color:var(--ink3)}
.rolls .chip.aff{color:var(--verd); border-color:rgba(79,179,160,.3); background:rgba(79,179,160,.07)}
.rolls .chip.aff.crit{color:var(--ember-hot); border-color:rgba(221,107,58,.3); background:rgba(221,107,58,.07)}
.rolls .chip.aff.util{color:var(--gold); border-color:rgba(201,164,92,.3); background:rgba(201,164,92,.07)}
.reforge{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px 14px; border-top:1px solid var(--line-soft);
}

.xpbar{height:8px; background:var(--surface2); border:1px solid var(--line-soft); border-radius:99px; overflow:hidden}
.xpfill{display:block; height:100%; background:linear-gradient(90deg,#2F7A6C,var(--verd))}

/* ------------------------------------------------------------------ events */
.dayhead{display:flex; align-items:baseline; gap:12px; padding:16px 0 10px}
.dayhead .d{font-family:var(--disp); font-size:17px; font-weight:600}
.dayhead .w{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink3)}
.event{display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin-bottom:8px}
.event:hover{border-color:var(--ink3)}
.event .time{font-family:var(--mono); font-size:13px; color:var(--ink2); font-variant-numeric:tabular-nums; line-height:1.35}
.event .time small{display:block; font-size:10px; color:var(--ink3); letter-spacing:.12em}
.event .nm{font-family:var(--disp); font-size:17px; font-weight:600; line-height:1.2}
.event .sub{font-size:12.5px; color:var(--ink3); margin-top:4px}
.event .sub b{color:var(--ink2); font-weight:600}
.event .pool{text-align:right}
.event .pool .amt{font-family:var(--mono); font-size:19px; color:var(--gold); font-variant-numeric:tabular-nums}
.event .pool .cap{font-family:var(--mono); font-size:10.5px; color:var(--ink3); margin-top:2px}
.event.mine{border-color:rgba(79,179,160,.4); background:rgba(79,179,160,.05)}
.event.forsale{border-style:dashed; background:transparent}
.event.forsale .nm{color:var(--ink3)}

/* ------------------------------------------------------------- the ceiling */
.meter{height:30px; display:flex; border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--surface2)}
.meter i{display:block; height:100%}
.meter .paid{background:linear-gradient(90deg,#2F7A6C,var(--verd))}
.meter .comm{background:linear-gradient(90deg,#8A6E33,var(--gold))}
.meter .free{background:var(--surface3)}
.mkey{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:12.5px}
.mkey span{display:flex; align-items:center; gap:7px; color:var(--ink2)}
.mkey i{width:9px; height:9px; border-radius:2px; display:block}
.guard{display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border:1px solid rgba(87,184,122,.35); background:rgba(87,184,122,.07); border-radius:var(--r)}
.guard.broken{border-color:rgba(210,84,79,.45); background:rgba(210,84,79,.09)}
.guard .ic{width:26px; height:26px; flex:0 0 auto; border-radius:99px; background:rgba(87,184,122,.18); display:grid; place-items:center; color:var(--good); font-size:13px}
.guard.broken .ic{background:rgba(210,84,79,.18); color:var(--bad)}
.guard .t{display:block; font-size:13.5px; font-weight:600}
.guard .s{display:block; font-size:12px; color:var(--ink2); margin-top:2px}

/* -------------------------------------------------------------- calculator */
.calc{border:1px solid var(--line); border-radius:var(--r); background:#0F121A; padding:18px}
.calcrow{display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; font-size:13.5px}
.calcrow .k{color:var(--ink2)}
.calcrow .v{font-family:var(--mono); font-variant-numeric:tabular-nums}
.calcrow.tot{border-top:1px solid var(--line); margin-top:6px; padding-top:13px}
.calcrow.tot .k{font-weight:600; color:var(--ink)}
.calcrow.tot .v{font-size:22px; color:var(--gold)}
.calcrow.cut .v{color:var(--verd)}

/* ------------------------------------------------------------------- perks */
.perks{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px}
.perk{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:18px; display:flex; flex-direction:column; gap:11px; text-align:left; color:var(--ink)}
.perk.on{border-color:rgba(201,164,92,.55); background:rgba(201,164,92,.05)}
.perk .price{font-family:var(--mono); font-size:25px}
.perk .price small{font-size:12px; color:var(--ink3)}
.perk ul{margin:0; padding-left:17px; font-size:13px; color:var(--ink2); line-height:1.75}
.perk .pick{margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.perk.on .pick{color:var(--gold)}

/* -------------------------------------------------------------------- auth */
.auth{display:grid; grid-template-columns:1fr 400px; gap:56px; align-items:center; max-width:960px; margin:0 auto}
.auth-pitch h1{font-size:38px; font-weight:800; line-height:1.08}
.auth-pitch p{color:var(--ink2); max-width:40ch}
.auth-pitch .marks{display:flex; flex-direction:column; gap:11px; margin-top:26px}
.auth-pitch .marks div{display:flex; gap:11px; font-size:13.5px; color:var(--ink2)}
.auth-pitch .marks b{color:var(--ink); font-weight:600}
.authcard{border:1px solid var(--line); border-radius:4px; background:var(--surface); overflow:hidden}
.authcard.staff{border-color:rgba(201,164,92,.4)}
.authcard .hdr{padding:20px 22px; border-bottom:1px solid var(--line); background:#12141C; display:flex; justify-content:space-between; align-items:flex-start}
.tabs{display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line)}
.tabs a{padding:13px 10px; font-size:13.5px; font-weight:600; color:var(--ink3); border-bottom:2px solid transparent; text-align:center; text-decoration:none}
.tabs a.on{color:var(--ink); border-bottom-color:var(--ember); background:var(--surface2)}
.authbody{padding:22px; display:flex; flex-direction:column; gap:14px}
.authfoot{padding:14px 22px; border-top:1px solid var(--line-soft); background:#0F121A; font-size:12.5px; color:var(--ink3); text-align:center}
.narrow{max-width:400px; margin:0 auto}

/* ----------------------------------------------------------------- members
   A list of people, not a spreadsheet with forms in it. The old page was a
   ten-column table carrying a plan dropdown, three status buttons, a sign-out
   and a two-field money adjuster inside its cells, on every row: nothing was
   scannable because the columns fought the controls for width, and Ban ended
   up a few pixels from Hold on a row whose name had been squeezed to nothing.

   The summary is read-only and the controls live in a <details> drawer, so
   only one member's buttons are ever on screen. */
.ftabs{display:flex; gap:2px; flex-wrap:wrap}
.ftab{
  padding:8px 14px; font-size:13px; font-weight:600; color:var(--ink3);
  border:1px solid transparent; border-bottom:2px solid transparent;
  text-decoration:none; border-radius:var(--r) var(--r) 0 0; white-space:nowrap;
}
.ftab:hover{color:var(--ink2)}
.ftab.on{color:var(--ink); border-bottom-color:var(--ember); background:var(--surface2)}

.chipl{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  padding:3px 9px; border-radius:99px; border:1px solid var(--line);
  color:var(--ink3); text-decoration:none;
}
.chipl:hover{color:var(--ink2); border-color:var(--ink3)}
.chipl.on{color:var(--gold); border-color:rgba(201,164,92,.45); background:rgba(201,164,92,.08)}

.mlist{border-top:1px solid var(--line); margin-top:16px}
.mrow{border-bottom:1px solid var(--line-soft)}
.mrow[open]{background:var(--surface2)}
.mrow.flagged > summary{box-shadow:inset 3px 0 0 var(--bad)}
.mrow > summary{
  display:flex; align-items:center; gap:16px; padding:13px 20px;
  cursor:pointer; list-style:none;
}
.mrow > summary::-webkit-details-marker{display:none}
.mrow > summary:hover{background:var(--surface2)}
.mrow > summary:focus-visible{outline:2px solid var(--verd); outline-offset:-2px}

.mrow .who{min-width:0; flex:1 1 auto}
.mrow .nm{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-weight:600; font-size:14.5px; line-height:1.3}
.mrow .sub{font-size:12px; color:var(--ink3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Right-aligned figures on one line, in the mono face so they stack into
   readable columns down the list without being an actual table. */
.mrow .figs{
  display:flex; align-items:center; gap:16px; flex:none;
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px;
}
.mrow .figs .k{color:var(--ink3); font-size:10px; letter-spacing:.1em; text-transform:uppercase}
.mrow .chev{
  flex:none; width:7px; height:7px; border-right:1.5px solid var(--ink3);
  border-bottom:1.5px solid var(--ink3); transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s;
}
.mrow[open] .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.mdrawer{padding:4px 20px 20px; display:flex; flex-direction:column; gap:16px}
.mdrawer .grp{display:flex; flex-direction:column; gap:9px}
.mdrawer .grp h3{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink3); font-weight:600; margin:0;
}
.mdrawer .grp.danger{border-top:1px solid var(--line-soft); padding-top:14px}
.mdrawer .grp.danger h3{color:var(--bad)}
.mdrawer .inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.mdrawer .inline label{flex:none; min-width:40px}

@media (max-width:760px){
  .mrow > summary{flex-wrap:wrap; gap:10px}
  .mrow .figs{width:100%; gap:14px; flex-wrap:wrap}
  .mrow .chev{display:none}
}

/* ------------------------------------------------------------------ funnel
   Seen / linked / striking, on the owner dashboard. Bars rather than three
   numbers in a row, because the whole value is in the GAPS between them and
   a gap is a shape, not a subtraction the reader has to do. */
.funnel{display:flex; flex-direction:column; gap:12px}
.fstep{display:flex; flex-direction:column; gap:5px}
.fbar{height:6px; background:var(--surface3); border-radius:99px; overflow:hidden}
.fbar i{display:block; height:100%; border-radius:99px; transition:width .3s}

/* -------------------------------------------------------------- reduced UI */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}
@media (max-width:1020px){
  .cols2,.cols2w{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr; gap:20px}
  nav.rail{position:static; flex-direction:row; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); padding-bottom:12px}
  .rail-h{display:none}
  nav.rail a{border-left:none; border-bottom:2px solid transparent; padding:7px 11px}
  nav.rail a[aria-current="page"]{border-left-color:transparent; border-bottom-color:var(--ember)}
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .worldstate{display:none}
  .auth{grid-template-columns:1fr; gap:32px}
  .fgrid,.setrow{grid-template-columns:1fr}
  .event{grid-template-columns:1fr; gap:8px}
  .event .pool{text-align:left}
  .topbar .wrap{flex-wrap:wrap; padding-top:10px; padding-bottom:10px}
}

/* ------------------------------------------------- header bell and menu */

/* The inbox, as a glance rather than a destination. */
.bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-right:6px; border-radius:var(--r);
  color:var(--ink3); text-decoration:none;
}
.bell:hover{color:var(--ink); background:var(--surface2)}
.bell.has{color:var(--gold)}
.bell .unread{
  position:absolute; top:1px; right:0; min-width:15px; padding:0 4px;
  border-radius:99px; background:var(--gold); color:#14161C;
  font:600 9.5px/1.6 var(--mono); text-align:center;
}

/* A real menu under your own name.
   Account lived only behind clicking the username, which is precisely why a
   member reported being unable to find it - a clickable name announces
   nothing. <details> so it needs no JavaScript and closes on Escape. */
.usermenu{position:relative}
.usermenu > summary{
  display:flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  padding:5px 9px; border-radius:var(--r); border:1px solid transparent;
}
.usermenu > summary::-webkit-details-marker{display:none}
.usermenu > summary:hover{background:var(--surface2); border-color:var(--line)}
.usermenu[open] > summary{background:var(--surface2); border-color:var(--line)}
.usermenu .who{line-height:1.25; text-align:left}
.usermenu .who .n{font-size:13.5px; color:var(--ink); font-weight:600}
.usermenu .who .r{font-size:11px; color:var(--ink3)}
.usermenu .chev{color:var(--ink3); font-size:11px}
.usermenu[open] .chev{color:var(--ink)}

.usermenu .menu{
  position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:190px;
  display:flex; flex-direction:column; gap:1px; padding:6px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.usermenu .menu a,
.usermenu .menu button{
  text-align:left; padding:7px 10px; border-radius:var(--r); font-size:13.5px;
  color:var(--ink2); text-decoration:none; background:none; border:0;
  width:100%; cursor:pointer; font-family:inherit;
}
.usermenu .menu a:hover,
.usermenu .menu button:hover{background:var(--surface2); color:var(--ink)}
.usermenu .menu form{margin:0; border-top:1px solid var(--line-soft); margin-top:4px; padding-top:4px}

@media (max-width:620px){
  .usermenu .who{display:none}
}

/* --------------------------------------------------------------- subtabs */

/* The pages that came off the rail.
   Same links, one level down, and only visible once you are somewhere they
   make sense. A rail entry stays highlighted while you are on one of its
   tabs, so opening Bestiary does not look like leaving The Hunt. */
.subtabs{
  display:flex; gap:3px; flex-wrap:wrap; align-items:center;
  border-bottom:1px solid var(--line); padding-bottom:9px; margin-bottom:18px;
}
.subtabs a{
  padding:6px 12px; border-radius:var(--r) var(--r) 0 0; font-size:13.5px;
  color:var(--ink3); text-decoration:none; position:relative; top:1px;
}
.subtabs a:hover{color:var(--ink); background:var(--surface2)}
.subtabs a[aria-current="page"]{
  color:var(--ink); background:var(--surface2);
  box-shadow:inset 0 -2px 0 var(--gold);
}

/* ------------------------------------------------------------- the mailer */
.mailgrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start}
@media (max-width: 980px){ .mailgrid{grid-template-columns:1fr} }

/* One audience, and how many people are in it. */
.seg{
  display:flex; gap:10px; align-items:flex-start; padding:11px 12px;
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  background:var(--surface2);
}
.seg:hover{border-color:var(--gold)}
.seg.on{border-color:var(--gold); background:rgba(198,160,74,.07)}
.seg input{width:auto; margin:3px 0 0}
.seg .n{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--ink)}
.seg .lbl{font-weight:600; font-size:13.5px}
.seg .sub{font-size:12px; color:var(--ink3); line-height:1.45}

/* The message as it will actually be read. Monospace and unstyled on
   purpose: this is plain-text mail, and a preview that looks nicer than the
   thing it previews is worse than no preview. */
.mailprev{
  background:#0B0D13; border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; font-family:var(--mono); font-size:12.5px; line-height:1.75;
  color:var(--ink2); white-space:pre-wrap; word-break:break-word;
  max-height:460px; overflow-y:auto;
}
.mailprev .sub{
  display:block; margin-bottom:10px; padding-bottom:8px; font-family:inherit;
  color:var(--ink); font-weight:600; border-bottom:1px solid var(--line);
}

/* A merge token you can click into the message. */
.tok{
  display:inline-block; width:auto; font-family:var(--mono); font-size:11.5px;
  padding:2px 6px; border:1px solid var(--line); border-radius:4px;
  color:var(--gold); background:var(--surface2); cursor:pointer;
}
.tok:hover{border-color:var(--gold)}

/* A control waiting for its second, confirming click. */
.btn.armed{background:var(--bad); border-color:var(--bad); color:#fff}
.btn.armed:hover{background:var(--bad); border-color:var(--bad); color:#fff}

/* What that second click will actually do. Sits under the control while it
   is armed, in flow, so a full sentence cannot widen a button in a table
   cell. Left-aligned even inside a right-aligned actions column - a warning
   ragged down the right edge is markedly harder to read. */
.confirm-note{
  margin:6px 0 0; padding:7px 9px; max-width:44ch;
  border:1px solid var(--bad); border-left-width:3px; border-radius:6px;
  background:color-mix(in srgb, var(--bad) 12%, transparent);
  color:var(--ink); font-size:12px; line-height:1.45; text-align:left;
}

/* Numbered steps in the owner's install card. */
.stepnum{
  flex:0 0 22px; height:22px; border-radius:99px;
  background:var(--surface3); border:1px solid var(--line);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:11px; color:var(--ink2);
}

/* The live pill when the feed has actually stopped arriving. */
.pill.live.stale{color:var(--warn); border-color:rgba(217,164,65,.45); background:rgba(217,164,65,.10)}
.pill.live.stale .dot{animation:none}

/* ---------------------------------------------------------------- packs
   Buying a size instead of typing a budget. Each card states its own price
   and what surfers get out of it, so nothing on the page needs subtracting
   to be understood. */
.packs{ display:grid; gap:10px }
.pk{ display:block; cursor:pointer; position:relative }
.pk input{ position:absolute; opacity:0; width:0; height:0 }
.pk-in{
  display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:baseline;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface2); padding:13px 15px; transition:border-color .12s, background .12s;
}
.pk:hover .pk-in{ border-color:var(--line); background:var(--surface3) }
.pk.on .pk-in{ border-color:var(--ember); background:var(--surface3) }
.pk input:focus-visible + .pk-in{ outline:2px solid var(--ember); outline-offset:2px }
.pk-top{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap }
.pk-label{ font-weight:600; color:var(--ink) }
.pk-note{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,164,92,.35);
  border-radius:2px; padding:1px 5px;
}
.pk-price{
  font-family:var(--disp); font-size:20px; color:var(--ink);
  grid-column:2; grid-row:1 / span 2; align-self:center;
  font-variant-numeric:tabular-nums;
}
.pk-pool{ grid-column:1; font-size:12.5px; color:var(--ink2) }
.pk-pool strong{ color:var(--verd); font-weight:600 }
.pk-pool.dim{ color:var(--ink3) }

/* An exclusive type says so on its chooser card - it is the reason for the
   price, so it belongs next to the price. */
.perk .excl{
  display:inline-block; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,164,92,.35);
  border-radius:2px; padding:2px 6px; margin-bottom:2px;
}

/* ------------------------------------------------------------ hour diary
   Which hours are still on the market. Being told an hour is taken AFTER
   filling in the form is a bad way to find out. */
.hours{ display:grid; grid-template-columns:repeat(12,1fr); gap:5px }
@media (max-width:720px){ .hours{ grid-template-columns:repeat(6,1fr) } }
.hr{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 2px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface2); color:var(--ink2); cursor:pointer;
  font:inherit; transition:border-color .12s, background .12s, color .12s;
}
.hr .t{ font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums }
.hr .s{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3) }
.hr:hover:not(:disabled){ border-color:var(--ember); color:var(--ink) }
.hr.on{ border-color:var(--ember); background:rgba(221,107,58,.13); color:var(--ink) }
.hr.on .s{ color:var(--ember-hot) }
.hr.off,.hr:disabled{
  cursor:not-allowed; opacity:.4; background:var(--surface);
  border-style:dashed; border-color:var(--line-soft);
}
.hr:focus-visible{ outline:2px solid var(--ember); outline-offset:2px }

/* "from" sits after the price, not welded to it. */
.perk .price small{
  margin-left:5px; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); font-family:var(--body); vertical-align:baseline;
}

/* ------------------------------------------------------- network reach
   How big the network is, said before anything is priced. While it is
   small this is the honest disclosure; as it grows it becomes the pitch. */
.reachbar{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  border:1px solid var(--line); border-left:3px solid var(--verd);
  border-radius:var(--r); background:var(--surface2); padding:14px 18px;
}
.rb-n{ display:flex; flex-direction:column; gap:1px; flex:0 0 auto }
.rb-big{
  font-family:var(--disp); font-size:26px; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.rb-lab{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3) }
.rb-say{ margin:0; flex:1 1 260px; font-size:12.5px; line-height:1.6; color:var(--ink2) }
.rb-say strong{ color:var(--verd); font-weight:600 }

/* What it will cost once the network is the size the list assumes. */
.waslist{ display:block; font-size:10.5px; color:var(--ink3); margin:-2px 0 2px }
.waslist s{ color:var(--ink3) }
.pk-was{ display:block; font-size:11px; color:var(--ink3); font-family:var(--body); margin-top:1px }

/* The pack and the hour are radio buttons, so the checked state is styled
   from the input itself. No script decides what looks selected - which
   matters, because a stale cached app.js once made this whole page inert. */
.pk input:checked + .pk-in{ border-color:var(--ember); background:var(--surface3) }
.hr input{ position:absolute; opacity:0; width:0; height:0 }
.hr:has(input:checked){ border-color:var(--ember); background:rgba(221,107,58,.13); color:var(--ink) }
.hr:has(input:checked) .s{ color:var(--ember-hot) }
.hr:has(input:disabled){
  cursor:not-allowed; opacity:.4; background:var(--surface);
  border-style:dashed; border-color:var(--line-soft);
}
.hr:has(input:focus-visible){ outline:2px solid var(--ember); outline-offset:2px }

/* A type card is a link now, not a div. */
a.perk{ text-decoration:none; color:inherit; display:flex }
a.perk:hover{ border-color:var(--ember) }

.datepick{ display:flex; gap:8px; align-items:stretch }
.datepick input{ flex:1 1 auto; min-width:0 }

/* --------------------------------------------------------- activity bars
   Strikes per day on one port. Measured, unlike the "lift against the
   baseline you typed in yourself" this replaced. */
.spark{
  display:flex; align-items:flex-end; gap:3px; height:64px;
  padding:6px 0 0; border-bottom:1px solid var(--line-soft);
}
.spark .sp{
  flex:1 1 0; min-width:0; border-radius:1px 1px 0 0;
  background:var(--line); transition:background .12s;
}
.spark .sp.recent{ background:var(--verd) }
.spark .sp:hover{ background:var(--ember) }

/* ------------------------------------------------------- the doctor's run
   The console renders the same lines the terminal prints, because it runs
   the same script - so it is set like terminal output. */
.docrun{
  font-family:var(--mono); font-size:12px; line-height:1.75;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:var(--bg); padding:12px 14px; overflow-x:auto;
}
.docrun .dl{ display:flex; gap:10px; align-items:baseline; white-space:pre-wrap }
.docrun .dl.head{
  color:var(--ink); margin:14px 0 6px; padding-bottom:5px;
  border-bottom:1px solid var(--line-soft); letter-spacing:.04em;
}
.docrun .dl.head:first-child{ margin-top:0 }
.docrun .tag{ flex:0 0 34px; text-align:right; font-size:10px; letter-spacing:.06em }
.docrun .txt{ flex:1 1 auto; min-width:0; color:var(--ink2) }
.docrun .ok   .tag{ color:var(--good) }
.docrun .note .tag{ color:var(--warn) }
.docrun .bad  .tag{ color:var(--bad) }
.docrun .bad  .txt{ color:var(--ink) }

/* ---------------------------------------------------------- prize ladder
   What each place wins. A flat split would give nobody a reason to be first
   rather than fifth, so the shape is worth showing before anyone pays. */
.ladder{ list-style:none; margin:0; padding:0; display:grid; gap:5px }
.ladder li{ display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center }
.ladder .pl{
  font-family:var(--mono); font-size:12px; color:var(--ink3);
  font-variant-numeric:tabular-nums; text-align:right;
}
.ladder .pl sup{ font-size:8px }
.ladder li:first-child .pl{ color:var(--gold) }
.ladder .bar{
  height:8px; border-radius:1px; background:var(--surface3); overflow:hidden; min-width:0;
}
.ladder .bar i{ display:block; height:100%; background:var(--verd) }
.ladder li:first-child .bar i{ background:var(--gold) }
.ladder .amt{
  font-family:var(--mono); font-size:12px; color:var(--ink);
  font-variant-numeric:tabular-nums;
}

/* The banner for a member whose account is not connected to any exchange.
   Loud, because they are surfing and landing nothing and every other page
   looks completely normal to them. */
.nolink{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 18px; padding:13px 16px; border-radius:var(--r);
  border:1px solid rgba(217,164,65,.35);
  background:linear-gradient(90deg, rgba(217,164,65,.13), rgba(217,164,65,.04));
  font-size:13.5px;
}
.nolink strong{color:var(--warn)}
.nolink > a{margin-left:auto; flex:none}

/* The tail of the error log, on the health page. Until this existed a fatal
   went to a file the web cannot reach - correctly - and therefore to nobody. */
.loglist{display:flex; flex-direction:column; gap:1px; max-height:340px; overflow-y:auto}
.logline{
  display:flex; gap:12px; padding:5px 9px; border-radius:2px;
  font-family:var(--mono); font-size:11.5px; line-height:1.5; color:var(--ink2);
}
.logline:nth-child(odd){background:var(--surface2)}
.logline .w{flex:none; color:var(--ink3)}
.logline .t{min-width:0; word-break:break-word}
.logline.bad{background:rgba(210,84,79,.10)}
.logline.bad .t{color:var(--bad)}

/* --------------------------------------------------------------- the tour
   A guided walk round the navigation on somebody's first visit.

   The dim is a full-screen veil and the highlight is a SEPARATE element with
   an enormous outward shadow, rather than a hole punched in the veil. Two
   reasons: a box-shadow spread needs no clip-path or SVG mask, so it behaves
   the same everywhere; and the highlighted element keeps its own stacking
   context, so a rail link still looks like a rail link instead of being
   re-rendered on top of the overlay. */
.tour-veil{
  position:fixed; inset:0; z-index:9000;
  background:rgba(6,8,13,.72);
  backdrop-filter:blur(1.5px);
}

.tour-spot{
  position:fixed; z-index:9001; pointer-events:none;
  border-radius:8px;
  border:1px solid var(--ember-hot);
  box-shadow:0 0 0 9999px rgba(6,8,13,.72), 0 0 22px rgba(255,138,80,.55);
  transition:left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}

/* The spot paints its own dim through that 9999px spread, so on a step that
   has a target the veil would double it and end up almost black. The veil
   stays - it is the click-to-dismiss surface - and goes transparent.

   Toggled from the script rather than by a sibling selector: the veil is
   added to the DOM BEFORE the spot, so no ~ or :has() combinator can reach
   backwards to it, and a selector that silently matches nothing would leave
   the whole thing looking like a bug in the colour scheme. */
.tour-veil.clear{ background:transparent; backdrop-filter:none }

.tour-card{
  position:fixed; z-index:9002; width:320px;
  background:var(--surface2); color:var(--ink);
  border:1px solid var(--line); border-radius:10px;
  padding:16px 16px 13px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  transition:left .22s ease, top .22s ease;
}
.tour-card h3{
  margin:2px 0 7px; font-size:16px; line-height:1.25;
  font-family:Eczar, Georgia, serif; font-weight:600;
}
.tour-card p{ margin:0 0 13px; font-size:13.5px; line-height:1.5; color:var(--ink2) }

.tour-step{
  font:600 10px "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
}

.tour-bts{ display:flex; align-items:center; gap:8px }
.tour-grow{ flex:1 }

.tour-bts button{
  font:inherit; font-size:12.5px; cursor:pointer;
  padding:6px 12px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface3); color:var(--ink2);
}
.tour-bts button:hover{ color:var(--ink); border-color:var(--ink3) }

.tour-next{
  background:var(--ember) !important; border-color:var(--ember) !important;
  color:#fff !important; font-weight:600;
}
.tour-next:hover{ background:var(--ember-hot) !important; border-color:var(--ember-hot) !important }

.tour-skip{ background:transparent !important; border-color:transparent !important; padding-left:0 !important }

/* Narrow screens: the card goes full width at the bottom rather than trying
   to sit beside a rail that is no longer there. Positioned by the script, so
   this only overrides the width and the horizontal placement. */
@media (max-width:640px){
  .tour-card{
    width:auto; left:10px !important; right:10px !important;
    top:auto !important; bottom:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  .tour-spot, .tour-card{ transition:none }
}

/* ===========================================================================
   THEMES — each is a full skin, not a recolour. The token layer flips every
   colour, radius and display face site-wide; the material layer below gives
   the body, topbar and health bars a distinct texture per world. Default
   (:root, or data-theme="forge") is Ember Forge. Chosen in the footer picker,
   stored in the colo_theme cookie and rendered server-side (no flash).
   =========================================================================== */

/* ---- 2 · Sea Chart (light: torn parchment) ---- */
:root[data-theme="chart"]{
  --bg:#ECE3CC; --surface:#F6EFDD; --surface2:#E7DCC0; --surface3:#DED0AC;
  --line:#CDBE9A; --line-soft:#DBCDA8;
  --ink:#2E2416; --ink2:#6E5F45; --ink3:#8A7B5C;
  --ember:#9C3B22; --ember-hot:#C1502F; --gold:#8A6B22; --verd:#3E7A4E;
  --good:#3E7A4E; --bad:#A2311F; --warn:#8A6B22;
  --r:3px; --disp:"IM Fell English",Georgia,serif;
}
:root[data-theme="chart"] body{ background:#ECE3CC;
  background-image:radial-gradient(120% 90% at 12% 6%, #F7EED6, transparent 45%),
                   radial-gradient(100% 90% at 92% 100%, #E1D0A2, transparent 55%); }
:root[data-theme="chart"] .topbar{ background:linear-gradient(180deg,#F6EFDD,#E9DCBF); border-bottom:1.5px dashed #B49A63 }
:root[data-theme="chart"] .btn-p{ color:#F5EBD2 }
:root[data-theme="chart"] .hpfill{ background:repeating-linear-gradient(45deg,#9C3B22,#9C3B22 7px,#B04E30 7px,#B04E30 14px); box-shadow:none }
:root[data-theme="chart"] .ws-fill{ background:#9C3B22 }

/* ---- 3 · Abyssal Deep (frosted glass, bioluminescent) ---- */
:root[data-theme="abyss"]{
  --bg:#06121A; --surface:#0E2130; --surface2:#16344A; --surface3:#1E4258;
  --line:#1F4157; --line-soft:#143042;
  --ink:#DCEFF6; --ink2:#86AEC0; --ink3:#5A8298;
  --ember:#2AA5C7; --ember-hot:#57D8F2; --gold:#8CD0C4; --verd:#57D8F2;
  --good:#4FBFA0; --bad:#E2686E; --warn:#E7B25A;
  --r:11px; --disp:"Rajdhani",system-ui,sans-serif;
}
:root[data-theme="abyss"] body{ background:#06121A;
  background-image:radial-gradient(3px 3px at 20% 30%, rgba(87,216,242,.5), transparent),
                   radial-gradient(2px 2px at 72% 62%, rgba(87,216,242,.45), transparent),
                   radial-gradient(2px 2px at 45% 84%, rgba(87,216,242,.4), transparent),
                   radial-gradient(820px 380px at 62% -10%, #0E3A4D, transparent 70%); }
:root[data-theme="abyss"] .topbar{ background:linear-gradient(180deg, rgba(14,42,58,.78), rgba(6,18,26,.62));
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border-bottom:1px solid rgba(42,165,199,.35) }
:root[data-theme="abyss"] .btn-p{ color:#04222C }
:root[data-theme="abyss"] .hpfill{ background:linear-gradient(90deg,#1F7F9C,#57D8F2); box-shadow:0 0 18px rgba(87,216,242,.5) }
:root[data-theme="abyss"] .ws-fill{ background:linear-gradient(90deg,#2AA5C7,#57D8F2) }

/* ---- 4 · Runestone (carved obsidian) ---- */
:root[data-theme="stone"]{
  --bg:#0D0F12; --surface:#1A1C21; --surface2:#23262D; --surface3:#2C3037;
  --line:#363B45; --line-soft:#23262D;
  --ink:#E6E1D6; --ink2:#9B968C; --ink3:#6E6A61;
  --ember:#E0603A; --ember-hot:#FFB27A; --gold:#C9A45C; --verd:#6FBF9E;
  --good:#6FBF9E; --bad:#D2544F; --warn:#D9A441;
  --r:2px; --disp:"Cinzel",Georgia,serif;
}
:root[data-theme="stone"] body{ background:#0D0F12;
  background-image:radial-gradient(820px 400px at 50% -10%, #2A2F37, transparent 65%); }
:root[data-theme="stone"] .topbar{ background:linear-gradient(180deg,#23262D,#141519); border-bottom:1px solid #000; box-shadow:inset 0 1px 0 #454B55 }
:root[data-theme="stone"] .hpfill{ background:linear-gradient(90deg,#6E2410,#E0603A 70%,#FFB27A); box-shadow:0 0 16px rgba(224,96,58,.4) }
:root[data-theme="stone"] .ws-fill{ background:linear-gradient(90deg,#E0603A,#FFB27A) }

/* ---- 5 · Grimoire (gilded tome, crimson) ---- */
:root[data-theme="grim"]{
  --bg:#0C0709; --surface:#1B0F12; --surface2:#241417; --surface3:#2E1A1E;
  --line:#6E5426; --line-soft:#3A2A18;
  --ink:#E9D9C4; --ink2:#B39A80; --ink3:#9A7F6A;
  --ember:#C6303B; --ember-hot:#E0555C; --gold:#C8A24E; --verd:#C8A24E;
  --good:#6FBF7A; --bad:#E0555C; --warn:#C8A24E;
  --r:5px; --disp:"EB Garamond",Georgia,serif;
}
:root[data-theme="grim"] body{ background:#0C0709;
  background-image:radial-gradient(760px 380px at 50% -10%, #2A0F14, transparent 65%); }
:root[data-theme="grim"] .topbar{ background:linear-gradient(180deg,#241417,#120809); border-bottom:1px solid #6E5426; box-shadow:inset 0 1px 0 rgba(169,131,47,.34) }
:root[data-theme="grim"] .hpfill{ background:linear-gradient(90deg,#7A1F24,#E0555C); box-shadow:0 0 16px rgba(224,85,92,.4) }
:root[data-theme="grim"] .ws-fill{ background:linear-gradient(90deg,#C6303B,#E0555C) }

/* ---- the footer theme picker ---- */
.theme-pick{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; color:var(--ink3) }
.theme-pick select{ font-family:var(--mono); font-size:12px; color:var(--ink2); background:var(--surface2);
  border:1px solid var(--line); border-radius:var(--r); padding:5px 9px; cursor:pointer }
.theme-pick select:hover{ border-color:var(--ink3); color:var(--ink) }

/* ===========================================================================
   MATERIAL LAYER — the part that makes a theme a different SUBSTANCE, not a
   recolour. Applied to the containers that tile every page: cards, the stat
   tile grids, and buttons. Bevels/frames/glass are done with border, shadow
   and background only (no pseudo-elements) so no card's own layout is touched.
   =========================================================================== */

/* 1 · FORGE — beveled iron plate */
:root[data-theme="forge"] .card,
:root[data-theme="forge"] .stat{ background:linear-gradient(180deg,#191D28,#12151D);
  box-shadow:inset 0 1px 0 #363D4C, inset 0 -2px 7px rgba(0,0,0,.55) }
:root[data-theme="forge"] .card{ border-color:#080A0F }
:root[data-theme="forge"] .statgrid{ border-color:#080A0F; background:#080A0F }
:root[data-theme="forge"] .btn-p{ background:linear-gradient(180deg,#FF9A5C,#DD6B3A);
  box-shadow:inset 0 1px 0 #FFD0A8, 0 3px 12px -4px rgba(221,107,58,.6) }

/* 2 · CHART — printed parchment with a matted double frame */
:root[data-theme="chart"] .card,
:root[data-theme="chart"] .stat{ background:
    radial-gradient(120% 120% at 12% 8%, #FBF4E0, transparent 46%),
    radial-gradient(120% 120% at 92% 100%, #E6D6AC, transparent 52%), #F4ECD3 }
:root[data-theme="chart"] .card{ border:1px solid #C0AC77;
  box-shadow:inset 0 0 0 3px #EFE4C6, inset 0 0 0 4px rgba(176,150,90,.55) }
:root[data-theme="chart"] .statgrid{ border-color:#C0AC77; background:#C0AC77 }
:root[data-theme="chart"] .btn-p{ background:#7A3A20; color:#F5EBD2;
  box-shadow:0 2px 0 #4A2210, inset 0 1px 0 #B4653F }
:root[data-theme="chart"] .btn-g{ color:#221704 }

/* 3 · ABYSS — frosted glass with a bioluminescent rim */
:root[data-theme="abyss"] .card,
:root[data-theme="abyss"] .stat{ background:rgba(14,42,58,.46);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px) }
:root[data-theme="abyss"] .card{ border:1px solid rgba(87,216,242,.24); border-radius:14px;
  box-shadow:0 0 0 1px rgba(87,216,242,.07), inset 0 1px 0 rgba(255,255,255,.10) }
:root[data-theme="abyss"] .statgrid{ border:1px solid rgba(87,216,242,.24); border-radius:14px; background:rgba(87,216,242,.10) }
:root[data-theme="abyss"] .btn{ border-radius:99px }
:root[data-theme="abyss"] .btn-p{ background:linear-gradient(180deg,#7FE6FA,#2FA7C9);
  box-shadow:0 0 22px -4px #57D8F2 }

/* 4 · STONE — carved obsidian, engraved lettering */
:root[data-theme="stone"] .card,
:root[data-theme="stone"] .stat{ background:linear-gradient(160deg,#20232A,#15171C 60%,#111318);
  box-shadow:inset 0 1px 0 #3D424B, inset 0 -3px 9px rgba(0,0,0,.6) }
:root[data-theme="stone"] .card{ border:1px solid #000; border-radius:2px }
:root[data-theme="stone"] .statgrid{ border-color:#000; background:#000; border-radius:2px }
:root[data-theme="stone"] h1,:root[data-theme="stone"] h2,:root[data-theme="stone"] h3,
:root[data-theme="stone"] .boss-name{ text-shadow:0 1px 0 #000, 0 -1px 0 rgba(74,79,89,.55) }
:root[data-theme="stone"] .btn-p{ background:linear-gradient(180deg,#D8B98C,#A9814E); color:#1C120B;
  box-shadow:inset 0 1px 0 #F0DCC0, 0 3px 0 #5C421F }

/* 5 · GRIM — leather tome in a gold-filigree frame, gilded headings */
:root[data-theme="grim"] .card,
:root[data-theme="grim"] .stat{ background:linear-gradient(160deg,#1F1216,#160C0E 60%,#120809) }
:root[data-theme="grim"] .card{ border:1px solid #6E5426;
  box-shadow:inset 0 0 0 3px rgba(18,8,9,.6), inset 0 0 0 4px rgba(169,131,47,.42) }
:root[data-theme="grim"] .statgrid{ border-color:#6E5426; background:#3A2A18 }
:root[data-theme="grim"] h1,:root[data-theme="grim"] h2,:root[data-theme="grim"] h3,
:root[data-theme="grim"] .boss-name{ color:#F0D99A }
:root[data-theme="grim"] .btn-p{ background:linear-gradient(180deg,#E6C878,#C8A24E); color:#1C120B;
  box-shadow:inset 0 1px 0 #F6E6B8, 0 2px 0 #6E5426 }

/* ============================================================================
   Guest home / landing (views/pages/home.php)
   Chrome (surfaces, text, borders, HP tracks) rides the theme tokens so the
   layout is identical in all five skins; the bestiary creatures keep their own
   element palettes (fire/tide/storm) because a kraken is blue in every skin.
   ========================================================================== */
.home-hero{display:grid; grid-template-columns:1.12fr .88fr; gap:34px; align-items:center; padding:22px 0 6px}
.home-hero__eye{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ember-hot)}
.home-hero__title{font-family:var(--disp); font-weight:800; font-size:clamp(34px,4.6vw,60px); line-height:1.02; letter-spacing:-.015em; margin:14px 0 0}
.home-hero__title .hot{color:var(--ember-hot)}
.home-hero__lede{margin:18px 0 0; max-width:46ch; font-size:17px; line-height:1.6; color:var(--ink2)}
.home-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.home-proof{display:flex; gap:28px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--line-soft)}
.home-proof .v{font-family:var(--mono); font-size:24px; font-weight:600; letter-spacing:-.02em}
.home-proof .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); margin-top:4px}

.home-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px; align-items:start;
  padding:18px 20px; margin:26px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.home-strip .item{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink2); line-height:1.42}
.home-strip .item svg{flex:0 0 auto; margin-top:1px}
.home-strip .item b{color:var(--ink)}

.home-sec{padding:44px 0}
.home-sec__head{text-align:center; max-width:640px; margin:0 auto 34px}
.home-sec__head h2{font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.4vw,42px); margin:12px 0 0}
.home-sec__head p{margin:14px 0 0; color:var(--ink2); line-height:1.6}

.home-steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.home-step{padding:26px}
.home-step .ic{width:48px; height:48px; border-radius:var(--r); background:var(--surface2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ember-hot)}
.home-step h3{font-family:var(--disp); font-size:21px; margin:8px 0 0}
.home-step p{margin:9px 0 0; font-size:14.5px; color:var(--ink2); line-height:1.6}

.home-beasts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
.beast-stage{height:290px; position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden;
  border-bottom:1px solid var(--line); background:var(--surface2)}
.beast-stage .tag{position:absolute; top:12px; left:12px; z-index:2}
.beast-body{padding:18px}
.beast-body h3{font-family:var(--disp); font-size:20px; margin:4px 0 0}
.beast-body p{margin:8px 0 0; font-size:13px; color:var(--ink2); line-height:1.5}
.beast-chips{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.beast-chip{font-family:var(--mono); font-size:11px; padding:3px 10px; border-radius:14px; border:1px solid var(--line); color:var(--ink2)}
.beast-hp{margin-top:14px; height:7px; border-radius:5px; background:var(--bg); border:1px solid var(--line-soft); overflow:hidden}
.beast-hp > span{display:block; height:100%}

.home-owner{display:grid; grid-template-columns:1fr 320px; gap:36px; align-items:center; padding:40px}
.home-owner h2{font-family:var(--disp); font-weight:700; font-size:clamp(26px,3vw,38px); margin:12px 0 0; max-width:20ch}
.home-owner p{margin:16px 0 0; color:var(--ink2); line-height:1.6; max-width:52ch}

.home-final{text-align:center; padding:58px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:radial-gradient(600px 260px at 50% 0%, rgba(221,107,58,.14), transparent 60%), var(--surface2)}
.home-final h2{font-family:var(--disp); font-weight:800; font-size:clamp(30px,4vw,50px); margin:14px auto 0; max-width:18ch}

.home-embers{position:absolute; inset:0; pointer-events:none}
@keyframes homeEmber{0%{transform:translateY(0); opacity:.15}30%{opacity:.85}100%{transform:translateY(-22px); opacity:0}}
.home-embers circle{animation:homeEmber 4s ease-in-out infinite}
.home-embers circle:nth-child(2){animation-duration:5.2s; animation-delay:1.1s}
.home-embers circle:nth-child(3){animation-duration:4.5s; animation-delay:2s}

@media (max-width:900px){
  .home-hero,.home-owner{grid-template-columns:1fr}
  .home-steps,.home-beasts{grid-template-columns:1fr}
  .home-strip{grid-template-columns:1fr}
  .home-owner{padding:28px}
}

/* ---- Top nav (guests + members); the app rail is retired ---- */
.layout.guest,.layout.onecol{grid-template-columns:1fr}
.topnav{position:sticky; top:72px; z-index:40; background:var(--surface); border-bottom:1px solid var(--line)}
/* wrap, not scroll: an overflow container would clip the dropdowns. */
.topnav .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:48px; padding-top:4px; padding-bottom:4px}
.topnav > .wrap > a,
.topnav .nav-dd > summary{font-size:13.5px; font-weight:500; color:var(--ink2); padding:8px 13px;
  border-radius:var(--r); white-space:nowrap; text-decoration:none; transition:.13s; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; list-style:none}
.topnav > .wrap > a:hover,
.topnav .nav-dd > summary:hover{color:var(--ink); background:var(--surface2)}
.topnav > .wrap > a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ember)}
body[data-theme="chart"] .topnav > .wrap > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--bad)}
/* dropdowns */
.nav-dd{position:relative}
.nav-dd > summary::-webkit-details-marker{display:none}
.nav-dd[open] > summary{color:var(--ink); background:var(--surface2)}
.nav-dd[data-cur] > summary{color:var(--ink); box-shadow:inset 0 -2px 0 var(--ember)}
body[data-theme="chart"] .nav-dd[data-cur] > summary{box-shadow:inset 0 -2px 0 var(--bad)}
.nav-dd .cx{font-size:9px; color:var(--ink3); transition:transform .15s}
.nav-dd[open] .cx{transform:rotate(180deg)}
.nav-dd .nav-menu{position:absolute; top:calc(100% + 5px); left:0; z-index:60; min-width:184px;
  display:flex; flex-direction:column; gap:1px; padding:5px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 14px 32px rgba(0,0,0,.42)}
.nav-dd .nav-menu a{padding:8px 11px; border-radius:var(--r); color:var(--ink2); font-size:13.5px;
  font-weight:500; white-space:nowrap; text-decoration:none}
.nav-dd .nav-menu a:hover{background:var(--surface2); color:var(--ink)}
.nav-dd .nav-menu a[aria-current="page"]{background:var(--surface2); color:var(--ink); box-shadow:inset 2px 0 0 var(--ember)}