/* World of Clankcraft dashboard. Dark slate with parchment ink; the world map is the one loud thing. */
:root {
  --bg: #131a1e; --bg2: #182227; --bg3: #1f2c33; --line: #2a3940; --line2: #36474f;
  --ink: #ebe3cf; --dim: #9aa69f; --faint: #6b7872;
  --gold: #e2b456; --gold2: #8a6d32; --ally: #4f93e6; --horde: #d9483b; --ok: #6cc58a; --dead: #8a8f90;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", system-ui, "Segoe UI", sans-serif;
  --r: 10px; --gut: 16px;
}
* { box-sizing: border-box; font-variant-numeric: lining-nums tabular-nums !important }  /* the font shorthand would reset it to Alegreya's oldstyle figures */
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--sans); font-variant-numeric: lining-nums tabular-nums; }
button, input, select { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; line-height: 1.2 }
h2 { font-size: 20px; margin: 28px 0 10px }
h3 { font-size: 16px; margin: 18px 0 6px; color: var(--dim); font-weight: 500 }
.dim { color: var(--dim) } .faint { color: var(--faint) }
.ally { color: var(--ally) } .horde { color: var(--horde) }
[hidden] { display: none !important }

/* ---- top bar and navigation ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px var(--gut);
  background: var(--bg); border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; flex: 1 0 auto; max-width: 100% }  /* the title never shrinks or clips */
.mark { font: italic 500 22px var(--serif); letter-spacing: .2px; color: var(--gold); white-space: nowrap }
.pulse { color: var(--dim); font-size: 13px; white-space: nowrap }
.pulse b { color: var(--ink); font-weight: 700 }
.pulse i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 6px; vertical-align: 1px;
  box-shadow: 0 0 0 0 rgba(108, 197, 138, .6); animation: beat 2.4s infinite }
.pulse.stale i { background: var(--horde); animation: none }
@keyframes beat { 0% { box-shadow: 0 0 0 0 rgba(108,197,138,.55) } 70% { box-shadow: 0 0 0 7px rgba(108,197,138,0) } 100% { box-shadow: 0 0 0 0 rgba(108,197,138,0) } }
.mebox { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim) }
.mebox input { width: 120px }
input, select { background: var(--bg); border: 1px solid var(--line2); border-radius: 7px; padding: 7px 10px; min-width: 0 }
input::placeholder { color: var(--faint) }
.tabs { display: flex; gap: 2px }
.tabs button { background: none; border: 0; padding: 8px 12px; border-radius: 7px; color: var(--dim); cursor: pointer; font-weight: 500 }
.tabs button[aria-current] { color: var(--ink); background: var(--bg3) }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; padding-top: max(10px, env(safe-area-inset-top)) }
  .tabs { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; justify-content: space-around; gap: 0;
    background: rgba(19, 26, 30, .97); border-top: 1px solid var(--line); padding: 4px 4px max(6px, env(safe-area-inset-bottom)) }
  .tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: none }  /* seven tabs: scroll, don't squash */
  .tabs::after { content: ""; position: sticky; right: -4px; flex: 0 0 28px; margin-left: -28px; pointer-events: none;
    background: linear-gradient(90deg, rgba(19, 26, 30, 0), rgba(19, 26, 30, .97) 70%) }  /* more tabs this way */
  .tabs button { flex: 1 0 auto; padding: 10px 9px; font-size: 14px }
  .tabs button[aria-current] { background: none; color: var(--gold); box-shadow: inset 0 2px 0 var(--gold); border-radius: 0 }
  body { padding-bottom: 64px }
  .mebox input { width: 110px }
}

/* ---- layout ---- */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1500px; margin: 0 auto }
main { padding: 14px var(--gut) 40px; min-width: 0 }
@media (min-width: 1100px) {
  .shell { grid-template-columns: minmax(0, 1fr) 420px }
  .profile { position: sticky; top: var(--hdr, 57px); height: calc(100vh - var(--hdr, 57px)); overflow: auto; border-left: 1px solid var(--line) }
  .profile .close { display: none }
}
@media (max-width: 1099px) {
  .profile { position: fixed; inset: 0; z-index: 40; overflow: auto; background: var(--bg); transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1); visibility: hidden }
  .profile.open { transform: none; visibility: visible }
}
@media (prefers-reduced-motion: reduce) { .profile { transition: none } .pulse i { animation: none } }
.cols2 { display: grid; gap: 0 28px }
@media (min-width: 900px) { .cols2 { grid-template-columns: 1fr 1fr } }

/* ---- the map: the one framed, ornamented object ---- */
.maptools { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap }
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px }
.seg button { background: none; border: 0; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--dim); font-weight: 500 }
.seg button[aria-selected="true"] { background: var(--bg3); color: var(--ink) }
.back { background: none; border: 1px solid var(--gold2); color: var(--gold); border-radius: 8px; padding: 6px 12px; cursor: pointer }
.back::before { content: "‹ "; }
.map { position: relative; margin: 0; aspect-ratio: 1002 / 668; border-radius: 6px; overflow: hidden; background: #2a2116;
  box-shadow: 0 0 0 1px #5b4a29, 0 0 0 4px #1b1610, 0 0 0 5px #3d321d, 0 12px 30px rgba(0, 0, 0, .45); cursor: zoom-in; user-select: none; -webkit-user-select: none }
.map.zone { cursor: default }
@media (min-width: 761px) { .map { max-width: calc((100vh - 150px) * 1.5) } }  /* whole map in view on a desktop */
.map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .25s }
.map img.loading { opacity: .25 }
.dots { position: absolute; inset: 0 }
.dot { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; padding: 0; border: 0; background: none; cursor: pointer }
.dot::after { content: ""; position: absolute; left: 7px; top: 7px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 1.5px rgba(20, 14, 6, .85), 0 1px 3px rgba(0, 0, 0, .6) }
.dot.a { --c: #3f86e0 } .dot.h { --c: #d8402f } .dot.d { --c: #9a9c9a }
.dot.sel::after, .dot.watch::after { left: 4px; top: 4px; width: 16px; height: 16px; box-shadow: 0 0 0 2.5px var(--ring), 0 0 0 4px rgba(20,14,6,.8), 0 0 14px var(--ring) }
.dot.sel { --ring: var(--gold); z-index: 3 } .dot.watch { --ring: var(--ok); z-index: 2 }
.dot.fav::before { content: "★"; position: absolute; left: 15px; top: -4px; font-size: 11px; color: var(--gold); text-shadow: 0 0 2px #000 }
.city { position: absolute; padding: 0; background: none; border: 1.5px dashed transparent; border-radius: 6px; cursor: zoom-in }
.city span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -115%); white-space: nowrap; font: 600 12px/1 var(--sans);
  color: #2a1d0b; background: rgba(244, 226, 182, .9); border: 1px solid #6e5428; border-radius: 9px; padding: 3px 8px; display: none }
.city span b { color: #7a1f14 }
.city.big { border-color: rgba(244, 226, 182, .55) } .city.big span { display: block }
.city:hover, .city:focus-visible { border-color: var(--gold) } .city:hover span { display: block }
.lbl { position: absolute; transform: translate(9px, -50%); font: 600 12px/1 var(--sans); color: #fff6dd; white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 3px #1b1209, 0 0 3px #1b1209, 0 1px 2px #000 }
.lbl small { color: #e8d39a; font-weight: 500 }
.badge { position: absolute; transform: translate(-50%, -50%); pointer-events: none; font: 700 11px/1 var(--sans); color: #2a1d0b;
  background: rgba(244, 226, 182, .82); border: 1px solid #6e5428; border-radius: 9px; padding: 2px 6px }
.mapcap { position: absolute; left: 10px; bottom: 8px; font: italic 500 15px var(--serif); color: #f4e6c4; text-shadow: 0 0 4px #000, 0 1px 2px #000; pointer-events: none }
.mapcap .dim { font: 13px var(--sans); color: #e4d6b4 }
.hint { font-size: 13px; margin: 10px 2px 0 }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none }
.chips button { flex: none; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 4px 10px; cursor: pointer; font-size: 13px; color: var(--dim) }
.chips button b { color: var(--ink); margin-left: 4px }

/* ---- rows of agents ---- */
.arow { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 8px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left }
.arow:hover { background: var(--bg2) }
.arow .fd { width: 8px; height: 8px; border-radius: 50%; align-self: center }
.arow .nm { font: 700 16px var(--serif) }
.arow .lv { color: var(--dim); font-size: 13px }
.arow .sub { grid-column: 2 / 4; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.arow .sub em { color: var(--ink); font-style: normal }
.agentlist .arow { grid-template-columns: 12px minmax(0, 1fr) auto }
.star { color: var(--gold) }
.roster { max-height: 520px; overflow: auto }
.filters { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap }
.filters input { flex: 1 1 220px }
.toggle { background: var(--bg2); border: 1px solid var(--line2); border-radius: 7px; padding: 7px 12px; cursor: pointer; color: var(--dim) }
.toggle[aria-pressed="true"] { color: #1d1508; background: var(--gold); border-color: var(--gold) }

/* ---- thought feed ---- */
.feed { max-height: 520px; overflow: auto; font-size: 14px }
.feed div { padding: 7px 0; border-bottom: 1px solid var(--line) }
.feed .who { cursor: pointer; font: 700 15px var(--serif); color: var(--ink) }
.feed .t { color: var(--faint); font-size: 12px; margin-left: 6px }
.feed p { margin: 2px 0 0; color: #d8d1bd }
.tier { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-right: 6px; color: #121212; vertical-align: 1px }
.T3 { background: #c9a2ef } .T2 { background: #8fb4ff } .T1 { background: #b9df8c } .T0, .stub { background: #7b8380 }

/* ---- realm overview ---- */
.ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
@media (min-width: 700px) { .ledger { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.ledger div { background: var(--bg2); padding: 12px 14px }
.ledger dt { color: var(--dim); font-size: 13px }
.ledger dd { margin: 2px 0 0; font: 700 24px var(--serif) }
.ledger dd small { font: 400 13px var(--sans); color: var(--dim); margin-left: 4px }
.balance { display: flex; height: 30px; border-radius: 6px; overflow: hidden; font-weight: 700; font-size: 13px }
.balance div { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; min-width: max-content }
.balance .a { background: #2c5f9e; justify-content: flex-start } .balance .h { background: #9e3127; justify-content: flex-end; flex: 1 }
.bars { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 5px 10px; align-items: center; font-size: 14px }
.bars .bar { height: 10px; border-radius: 3px; background: var(--c, var(--dim)); min-width: 2px }
.bars .bar.split { background: linear-gradient(90deg, var(--ally) var(--p), var(--horde) var(--p)) }
.bars .n { color: var(--dim); text-align: right }
.bars button { all: unset; cursor: pointer } .bars button:hover { color: var(--gold) }
.hist { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 120px }
.hist .col { display: flex; flex-direction: column-reverse; height: 100%; justify-content: flex-start }
.hist .col i { display: block } .hist .col .a { background: var(--ally) } .hist .col .h { background: var(--horde) }
.hist .col i:last-child { border-radius: 3px 3px 0 0 }
.histx { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; font-size: 11px; color: var(--faint); text-align: center; margin-top: 4px }
.grid2 { display: grid; gap: 0 32px } @media (min-width: 800px) { .grid2 { grid-template-columns: 1fr 1fr } }
.grid3 { display: grid; gap: 0 28px } @media (min-width: 800px) { .grid3 { grid-template-columns: repeat(3, 1fr) } }
ol.board { list-style: none; margin: 0; padding: 0; counter-reset: b }
ol.board li { counter-increment: b; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); align-items: baseline }
ol.board li::before { content: counter(b); color: var(--faint); font-size: 13px; text-align: right }
ol.board li:first-child::before { color: var(--gold) }
ol.board .nm { font: 700 15px var(--serif); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
ol.board .v { color: var(--ink) }
.timeline svg { width: 100%; height: 150px; display: block }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--dim); margin-top: 6px }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px }
.events div { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.events .t { color: var(--faint); font-size: 12px; margin-right: 6px }
.events .who { font: 700 15px var(--serif); cursor: pointer }

/* ---- coins ---- */
.coin { white-space: nowrap }
.coin i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 2px; vertical-align: 0 }
.coin .g { background: radial-gradient(circle at 35% 35%, #ffe7a0, #c9952c) }
.coin .s { background: radial-gradient(circle at 35% 35%, #f4f6f8, #8f969c) }
.coin .c { background: radial-gradient(circle at 35% 35%, #f2b98d, #9a5a2c) }

/* ---- market ---- */
.housebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px }
table.t { width: 100%; border-collapse: collapse; font-size: 14px }
table.t th { text-align: left; font-weight: 500; color: var(--dim); font-size: 13px; padding: 6px 6px; border-bottom: 1px solid var(--line2) }
table.t td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: middle }
table.t .r { text-align: right }
table.t .it { font-weight: 700 }
.spark { width: 80px; height: 22px; display: block }
.scroll { overflow-x: auto }
.empty { border: 1px dashed var(--line2); border-radius: var(--r); padding: 18px; color: var(--dim) }
.empty b { color: var(--ink); font-family: var(--serif); font-size: 17px; display: block; margin-bottom: 4px }
.state { font-size: 12px; border-radius: 4px; padding: 1px 6px; border: 1px solid var(--line2); color: var(--dim) }
.state.confirmed { color: var(--ok); border-color: #2f5a3d } .state.failed { color: #ef8a7f; border-color: #6a2f29 }
.state.pending { color: var(--gold); border-color: var(--gold2) }

/* ---- brain ---- */
.tiers { display: grid; gap: 12px } @media (min-width: 520px) { .tiers { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 1300px) { .tiers { grid-template-columns: repeat(4, 1fr) } }
.tierbox { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px }
.tierbox h3 { margin: 0 0 2px; color: var(--ink); font-size: 17px; font-family: var(--serif) }
.tierbox p { margin: 0 0 8px; color: var(--dim); font-size: 13px }
.tierbox dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 0; font-size: 14px }
.tierbox dt { color: var(--dim) } .tierbox dd { margin: 0; text-align: right; font-weight: 700 }
.stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--bg3) }
.stack i { display: block; height: 100% }

/* ---- profile ---- */
.profile { background: var(--bg) }
.profile .close { position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--bg2); font-size: 22px; cursor: pointer }
#pbody, #ptalk { padding: 0 18px }
#pbody { padding-top: 18px }
.pempty { padding: 30px 0 } .pempty h2 { margin-top: 0 }
.phead h1 { font-size: 30px; margin: 0 }
.phead .line { color: var(--dim); margin-top: 2px }
.phead .line b { color: var(--ink); font-weight: 500 }
.facpill { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px }
.facpill.a { background: #1f3e63; color: #a9cbf5 } .facpill.h { background: #5a221d; color: #f3b1a8 }
.pact { display: flex; gap: 8px; margin: 14px 0 4px; align-items: center; flex-wrap: wrap }
.btn { background: var(--gold); color: #1d1508; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: 700; cursor: pointer }
.btn.ghost { background: none; color: var(--gold); border: 1px solid var(--gold2) }
.btn[disabled] { opacity: .5; cursor: default }
.now { margin-top: 14px; display: grid; gap: 10px }
.now .k { color: var(--dim); font-size: 13px; display: block }
.quote { font: italic 500 17px/1.45 var(--serif); color: #f0e4c6; border-left: 2px solid var(--gold2); padding-left: 12px; margin: 0 }
.persona { font: 16px/1.6 var(--serif); color: #e2dac4 }
.persona h1 { display: none } .persona h2 { font-size: 17px; margin: 18px 0 4px; color: var(--gold) }
.persona p { margin: 6px 0 } .persona ul { margin: 6px 0; padding-left: 18px } .persona strong { color: var(--ink) }
details { border-top: 1px solid var(--line); padding: 4px 0 }
details > summary { cursor: pointer; list-style: none; font: 700 18px var(--serif); padding: 10px 0; display: flex; justify-content: space-between }
details > summary::after { content: "+"; color: var(--dim); font-family: var(--sans) }
details[open] > summary::after { content: "−" }
details > summary::-webkit-details-marker { display: none }
.journal div { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.journal .t { color: var(--faint); font-size: 12px } .journal .kind { color: var(--dim); font-size: 12px; margin: 0 6px }
.journal .reflection { font: italic 15px/1.5 var(--serif); color: #efe2c2 }
.journal .plan { color: #d9c48f }
.gear { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 14px }
.gear dt { color: var(--dim) } .gear dd { margin: 0; font-weight: 700 }
.skill { display: grid; grid-template-columns: 110px 1fr 54px; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0 }
.skill .bar { height: 8px; background: var(--bg3); border-radius: 4px; overflow: hidden } .skill .bar i { display: block; height: 100%; background: var(--gold) }
.rel { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.rel .pos { color: var(--ok) } .rel .neg { color: #ef8a7f }
#ptalk { padding-bottom: 30px }
.chat { max-height: 300px; overflow: auto; margin: 6px 0; font-size: 14px; display: flex; flex-direction: column; gap: 6px }
.chat div { max-width: 85%; padding: 6px 10px; border-radius: 10px; background: var(--bg2); align-self: flex-start }
.chat .me { align-self: flex-end; background: #233a52 }
.chat b { font-family: var(--serif) }
.say { display: flex; gap: 6px } .say input { flex: 1 }
.mini { font-size: 13px; color: var(--dim) }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; font-size: 14px } .kv dt { color: var(--dim) } .kv dd { margin: 0 }

/* ---- Laya decisions: options as probability bars, Laya's choice in gold, the actual pick outlined ---- */
.dcard { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin: 4px 0 10px }
.dhead { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 8px }
.dhead .who { font: 700 15px var(--serif); cursor: pointer }
.verdict { margin-left: auto; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 2px 9px; border: 1px solid var(--line2); color: var(--dim) }
.verdict.yes { color: var(--ok); border-color: #2f5a3d; background: #17271e } .verdict.no { color: #ef8a7f; border-color: #6a2f29; background: #2a1715 }
.verdict.laya { color: #b9df8c; border-color: #3d5226 }
.opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.opts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 3px 8px; align-items: baseline; padding: 4px 8px 6px; border-radius: 7px; border: 1px solid transparent }
.opts .ol { font-size: 14px; color: #cfc8b4; overflow-wrap: anywhere }
.opts .pp { font-weight: 700; font-size: 14px; min-width: 38px; text-align: right; color: var(--dim) }
.opts .pb { grid-column: 1 / -1; height: 7px; border-radius: 4px; background: var(--bg3); overflow: hidden }
.opts .pb i { display: block; height: 100%; background: #4a5c66; border-radius: 4px }
.opts li.lc .pb i { background: linear-gradient(90deg, var(--gold2), var(--gold)) }
.opts li.lc .pp, .opts li.lc .ol { color: var(--ink) }
.opts li.pk { border-color: var(--line2); background: rgba(255, 255, 255, .035) }
.opts li.pk .ol { font-weight: 700; color: var(--ink) }
.tags { display: flex; gap: 4px }
.tags b { font-size: 11px; border-radius: 4px; padding: 0 5px; white-space: nowrap }
.tags .tl { background: var(--gold); color: #1d1508 }
.tags .tp { color: #121212; background: #7b8380 } .tags .tp.T3 { background: #c9a2ef } .tags .tp.T2 { background: #8fb4ff } .tags .tp.T1 { background: #b9df8c }
.dfoot { display: flex; justify-content: space-between; font-size: 13px; color: var(--dim); margin-top: 8px }
.dfoot b { color: var(--ink) }
.quote.small { font-size: 15px; margin-top: 10px }
.dgrid { display: grid; gap: 0 14px } @media (min-width: 900px) { .dgrid { grid-template-columns: 1fr 1fr } }
.drow { border-top: 0; border-bottom: 1px solid var(--line); padding: 0 }
.drow > summary { font: 14px var(--sans); padding: 8px 0; display: grid; grid-template-columns: 30px auto minmax(0, 1fr) 54px 36px 10px; gap: 8px; align-items: center }
.drow > summary::after { display: none }
.drow .t { color: var(--faint); font-size: 12px } .drow .tier { margin: 0 }
.drow .ol { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }
.drow .pp { text-align: right; color: var(--dim); font-size: 13px }
.mb { display: inline-block; width: 100%; height: 6px; border-radius: 3px; background: var(--bg3); overflow: hidden; vertical-align: middle }
.mb i { display: block; height: 100%; background: var(--gold) }
.vdot { width: 9px; height: 9px; border-radius: 50% }
.vdot.yes { background: var(--ok) } .vdot.no { background: var(--horde) } .vdot.laya { background: #b9df8c } .vdot.none, .vdot.kept { background: var(--faint) }
.fdec { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--dim); margin-top: 4px }
.fdec .yes { color: var(--ok) } .fdec .no { color: #ef8a7f }
.calib { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; gap: 8px 10px; align-items: center; font-size: 14px }
.calib .cb { position: relative; height: 12px; border-radius: 4px; background: var(--bg3) }
.calib .cb i { display: block; height: 100%; border-radius: 4px; background: var(--ok) }
.calib .cb u { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--ink); opacity: .7 }
.calib .n { text-align: right }
.mini a { color: var(--gold) }

/* ---- faction feeds and achievements ---- */
.gold { color: var(--gold) }
.fcol { --fc: var(--dim); background: var(--bg2); border: 1px solid var(--line); border-top: 3px solid var(--fc); border-radius: var(--r); padding: 2px 14px 6px; margin-bottom: 16px }
.fcol.a { --fc: var(--ally) } .fcol.h { --fc: var(--horde) } .fcol.g { --fc: var(--gold) }
.fcol h2 { color: var(--fc); margin: 10px 0 4px }
.news { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: #d8d1bd }
.news:last-child { border-bottom: 0 }
.news .t { color: var(--faint); font-size: 12px; margin-right: 6px }
.news .who { font: 700 15px var(--serif); cursor: pointer }
.ntag { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 5px; margin-right: 6px; vertical-align: 1px; color: var(--fc); border: 1px solid currentColor }
.news.realm_first { color: var(--gold) }
.news.realm_first .ntag { background: var(--gold); border-color: var(--gold); color: #1d1508 }
.news.death .ntag { color: var(--dead) } .news.level .ntag { color: var(--ok) }
.rf div { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.rf .rfn { color: var(--dim); font-weight: 400 } .rf .won .rfn { color: var(--gold); font-weight: 700 }
.rf .who { font: 700 15px var(--serif); cursor: pointer } .rf .t { color: var(--faint); font-size: 12px }
.fdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px }
.fdot.a { background: var(--ally) } .fdot.h { background: var(--horde) }
.achlink { all: unset; cursor: pointer; font-weight: 700; color: inherit }
.achlink:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 2px }
.achlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px }
.achlink.gold { color: var(--gold) }
.achips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px }
.achips .achlink { font-size: 13px; font-weight: 400; border: 1px solid var(--line2); border-radius: 12px; padding: 3px 10px; color: #d8d1bd; background: var(--bg2) }
.achips .achlink:hover { border-color: var(--gold2); text-decoration: none }
.achips .achlink.rf { background: var(--gold); border-color: var(--gold); color: #1d1508; font-weight: 700 }

/* ---- achievement detail: a modal on a desktop, a bottom sheet on a phone ---- */
.achd { width: min(520px, calc(100vw - 32px)); max-height: 85vh; padding: 0; overflow: auto; border: 1px solid var(--line2);
  border-radius: 14px; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px #5b4a29, 0 18px 50px rgba(0, 0, 0, .6) }
.achd::backdrop { background: rgba(8, 12, 14, .72) }
.achd .close { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line2); background: var(--bg2); font-size: 22px; cursor: pointer }
#achd-body { padding: 20px 20px 22px }
#achd-body h2 { margin: 6px 0 0; font-size: 24px; padding-right: 44px }
.achd .k { display: block; color: var(--dim); font-size: 13px; margin-bottom: 2px }
.flavor { font: italic 500 17px/1.45 var(--serif); color: #f0e4c6; border-left: 2px solid var(--gold2); padding-left: 12px; margin: 10px 0 16px }
.acrit, .aprog, .aclaim { margin: 12px 0 }
.aprog { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px }
.aprog.done { color: var(--ok) }
.pnum b { font: 700 22px var(--serif) } .pnum { color: var(--dim) }
.pbar { display: block; height: 10px; margin-top: 6px; border-radius: 5px; background: var(--bg3); overflow: hidden }
.pbar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold2), var(--gold)) }
.rfpill { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 0 6px; background: var(--gold); color: #1d1508 }
.aholders { max-height: 260px; overflow: auto }
.aholders .t { margin-left: 6px }
@media (max-width: 760px) {
  .achd { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 16px 16px 0 0; max-height: 88vh; border-bottom: 0 }
  .aholders { max-height: none }  /* one scroller on a phone: the sheet */
  #achd-body { padding-bottom: max(22px, env(safe-area-inset-bottom)) }
}

/* ---- Wowhead icons, chat lines in the feeds ---- */
.aicon { width: 18px; height: 18px; border-radius: 3px; vertical-align: -4px; margin-right: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5b4a29 }
.aicon.big { width: 56px; height: 56px; border-radius: 8px; margin: 2px 0 0; flex: none }
.achips .achlink .aicon { width: 16px; height: 16px; margin: 0 5px 0 -5px; vertical-align: -3px }
.ahead { display: flex; gap: 14px; align-items: flex-start; padding-right: 44px }
.ahead h2 { padding-right: 0 !important }
.whlink { display: inline-block; margin-top: 4px; font-size: 14px; color: var(--gold) }
.news.talk { font-size: 13px; padding: 4px 0; color: var(--dim); border-bottom: 1px dashed var(--line) }
.news.talk .who { font: 600 13px var(--sans) }
.news.talk .said { color: #c9c1ad }
.news.talk.ch-yell .said { color: #e8d39a; font-weight: 700 }

/* ---- How it works ---- */
.how { max-width: 1040px }
.how p { margin: 6px 0 10px; color: #d8d1bd }
.how p.dim, .how p.mini { color: var(--dim) }
.how .lede { font: 18px/1.55 var(--serif); color: var(--ink); margin: 4px 0 6px }
.how .lede b { color: var(--gold); font-weight: 700 }
.loop { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: 1fr; counter-reset: s }
.loop li { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 12px 50px;
  font-size: 14px; color: var(--dim) }
.loop li b { display: block; font: 700 16px var(--serif); color: var(--ink); margin-bottom: 2px }
.loop li.model { border-color: var(--gold2); background: linear-gradient(180deg, #232a22, var(--bg2)) }
.loop .step { position: absolute; left: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: var(--bg3);
  border: 1px solid var(--line2); display: grid; place-items: center; font: 700 13px var(--sans); color: var(--gold) }
.loop li::after { content: "↓"; position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%); color: var(--gold2); font-size: 16px; line-height: 18px }
.loop li:last-child::after { content: none }
.loopback { margin: 8px 0 0 !important; text-align: center }
.loopback span { display: inline-block; font: italic 500 15px var(--serif); color: var(--gold); border: 1px dashed var(--gold2); border-radius: 16px; padding: 3px 14px }
@media (min-width: 900px) {
  .loop { grid-template-columns: repeat(3, 1fr); gap: 26px 30px }
  .loop li::after { content: "→"; left: auto; right: -24px; top: 50%; bottom: auto; transform: translateY(-50%) }
  .loop li:nth-child(3)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%) }
  .loop li:nth-child(4) { grid-column: 3; grid-row: 2 } .loop li:nth-child(5) { grid-column: 2; grid-row: 2 } .loop li:nth-child(6) { grid-column: 1; grid-row: 2 }
  .loop li:nth-child(4)::after, .loop li:nth-child(5)::after { content: "←"; right: auto; left: -24px }
  .loop li:nth-child(6)::after { content: "↑"; left: 50%; right: auto; top: -24px; bottom: auto; transform: translateX(-50%) }
  .loop li:nth-child(1) { margin-bottom: 0 }
  .loopback { text-align: left }
}
.how .tierbox p { margin: 0 }
.how-tabs { gap: 6px 14px } .how-tabs dt { color: var(--ink); font-weight: 700 } .how-tabs dd { color: var(--dim) }
.how .fine { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint) }

/* ---- where an item happened; the ?watch=1 offer ---- */
.news .place { color: var(--faint); font-size: 12px; margin-left: 6px; white-space: nowrap }
.news .place::before { content: "· " }
.news.talk .place { margin: 0 2px 0 4px }
.wbanner { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--gold2); border-radius: var(--r); background: linear-gradient(180deg, #2a2618, var(--bg2)) }
.wbanner b { display: block; font: 700 17px var(--serif); color: var(--gold) }
.wbanner .mini { display: block; margin: 2px 0 8px }
.wbanner form { display: flex; gap: 8px; flex-wrap: wrap } .wbanner input { flex: 1 1 140px }

/* ---- header: eight tabs don't fit beside the title below ~1360 px. There they take a row of their own,
   wrapping to a second line if still too narrow, so nothing clips and nothing pushes the page wider. ---- */
@media (min-width: 761px) and (max-width: 1519px) {
  .top { flex-wrap: wrap; row-gap: 6px }
  .tabs { order: 3; flex: 1 1 100%; flex-wrap: wrap; margin: 0 -12px -4px }
}

/* ---- tooltips (data-tip: hover with a mouse, tap on touch) ---- */
#tip { position: fixed; z-index: 60; max-width: min(340px, calc(100vw - 16px)); pointer-events: none; white-space: pre-line;
  background: #0d1316; color: var(--ink); border: 1px solid var(--gold2); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .55) }
#tip::first-line { font-weight: 700; color: var(--gold) }
[data-tip] { cursor: help }
.bars .bt { display: block; padding: 3px 0 }
.bars .bt .bar { display: block }
.bars .bt:hover .bar { filter: brightness(1.25) }
.hist .col:hover { background: rgba(255, 255, 255, .05); border-radius: 3px }
.tlcol .hit { fill: transparent } .tlcol:hover .hit { fill: rgba(255, 255, 255, .05) }
.calib .cb[data-tip]:hover, .stack i:hover { filter: brightness(1.2) }

/* ---- the World page's cards: big number, small caption; 6 across, 3 on a tablet, 2x3 on a phone ---- */
.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; min-width: 0 }
.card b { display: block; font: 700 24px/1.15 var(--serif); color: var(--ink); white-space: nowrap }
.card span, .card small { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card small { color: var(--faint); margin-top: 0 }
.card:hover { border-color: var(--gold2) }
@media (max-width: 1359px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
@media (max-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px } .card b { font-size: 21px } }

/* ---- nearby chips in the profile: class-coloured dot, name, level, yards ---- */
.nchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px }
.nchip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line2); border-radius: 14px;
  padding: 3px 10px 3px 8px; font-size: 13px; color: var(--ink); cursor: pointer }
.nchip:hover { border-color: var(--gold2) }
.nchip i { width: 8px; height: 8px; border-radius: 50%; flex: none }
.nchip small { color: var(--dim) }

/* ---- header badge: day N of this world · up X h ---- */
.age { color: var(--dim); font-size: 13px; white-space: nowrap; cursor: help }
.age b { color: var(--ink); font-weight: 700 } .age .sep { color: var(--faint); margin: 0 3px }