/* Character pages — the same world as the app, but built to be read.
 *
 * The app is a 474px column on purpose; these pages are documents, so they get
 * a wider measure and real tables. The palette is the app's own, copied rather
 * than imported so a page is one stylesheet and one request.
 *
 * Deliberately single-theme: the app commits to its dark world, and a page that
 * flipped to light when the reader's OS did would not look like part of it. The
 * background and every colour are therefore painted explicitly, so the page
 * holds together whatever ground it lands on.
 */
:root{
  --paper:#120a26; --paper-2:#1a1236; --surface:#1c1440; --surface-2:#251b52;
  --ink:#f4efff; --ink-2:#bcb0e2; --ink-3:#8f83bd;
  --line:rgba(184,150,255,.15); --line-2:rgba(184,150,255,.28);
  --gold:#b98cff; --gold-2:#c9a6ff; --gold-soft:rgba(168,85,247,.15);
  --pyro:#ff8a6b; --hydro:#6cc6ff; --electro:#c084fc; --cryo:#a9ecff;
  --anemo:#7fe6c4; --geo:#ffd76b; --dendro:#b6e06a;
  --good:#7fe6c4; --warn:#ffd27a; --danger:#ff8fa3;
  --radius:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-synthesis-weight:none;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--gold-2)}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

.wrap{max-width:760px;margin:0 auto;padding:18px 16px 90px}

/* ---------- header ---------- */
.back{display:inline-block;font-size:13px;color:var(--ink-2);text-decoration:none;margin-bottom:14px}
.back:hover{color:var(--gold-2)}
.hd{display:flex;gap:14px;align-items:center}
.por{border-radius:12px;background:var(--surface);flex:none;width:96px;height:96px}
h1{margin:0;font-size:clamp(26px,6vw,34px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.ttl{margin:4px 0 0;font-size:14px;color:var(--gold);font-style:italic}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.chip{font-size:11.5px;line-height:1;padding:5px 9px;border:1px solid var(--line-2);border-radius:99px;color:var(--ink-2)}
.chip.el-pyro{color:var(--pyro);border-color:var(--pyro)}
.chip.el-hydro{color:var(--hydro);border-color:var(--hydro)}
.chip.el-electro{color:var(--electro);border-color:var(--electro)}
.chip.el-cryo{color:var(--cryo);border-color:var(--cryo)}
.chip.el-anemo{color:var(--anemo);border-color:var(--anemo)}
.chip.el-geo{color:var(--geo);border-color:var(--geo)}
.chip.el-dendro{color:var(--dendro);border-color:var(--dendro)}
.blurb{color:var(--ink-2);font-size:14.5px;margin:14px 0 0}
.blurb p{margin:0 0 8px}
.ab-d p{margin:0 0 8px}
.ab-d em,.cons em,.blurb em{color:var(--gold-2);font-style:normal;font-weight:600}
.cons p{margin:4px 0 6px}

/* ---------- sections ---------- */
section{margin-top:34px}
h2{
  font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
h3{font-size:17px;margin:0 0 4px;color:var(--ink)}

/* ---------- the cost cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.big{font-size:29px;font-weight:800;line-height:1.05;color:var(--gold-2);font-variant-numeric:tabular-nums}
.cl{font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.4}
.split{font-size:14px;color:var(--ink-2);margin:12px 0 0}
.split b{color:var(--ink);font-weight:600}
.note{font-size:12.5px;color:var(--ink-3);line-height:1.55;margin:12px 0 0}
.warn{
  font-size:13px;color:var(--warn);line-height:1.55;margin:12px 0 0;
  border-left:2px solid var(--warn);padding-left:11px;
}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:13.5px}
caption{
  text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:11px 13px 0;
}
th,td{padding:9px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:600;white-space:nowrap}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
td.n,.scale td{font-variant-numeric:tabular-nums;white-space:nowrap}
.mat img{margin-right:9px;border-radius:5px}
.gear img{margin-right:9px}
.sum td{color:var(--gold-2);font-weight:600}
.scale th[scope=row]{font-weight:500;color:var(--ink-2);white-space:nowrap;position:sticky;left:0;background:var(--surface)}
.scale thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}

/* ---------- talents ---------- */
.ab{margin-top:22px}
.ab-d{font-size:13.5px;color:var(--ink-2);margin:0}

/* ---------- constellations ---------- */
.cons{margin:0;padding:0;list-style:none;counter-reset:c}
.cons li{border-left:2px solid var(--line-2);padding:0 0 0 13px;margin-bottom:15px}
.cons b{font-size:14.5px;color:var(--gold-2)}
.cons p{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}

/* ---------- the honest plaques ---------- */
.unsure,.cant{
  font-size:13px;color:var(--ink-2);line-height:1.6;margin:0;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 14px;
}
.cant{margin-top:16px}
.unsure b,.cant b{color:var(--ink)}
.tag{
  display:inline-block;font-size:9.5px;letter-spacing:.1em;font-weight:700;
  color:var(--warn);border:1px solid var(--warn);border-radius:99px;
  padding:2px 7px;margin-right:7px;vertical-align:1px;
}
.reac{margin:10px 0 0;padding-left:19px;font-size:13.5px;color:var(--ink-2)}
.reac b{color:var(--ink)}

/* ---------- your build ---------- */
.mine{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:15px}
.mine-top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.mine-score{font-size:31px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.mine-grade{font-size:12px;font-weight:700;border:1px solid currentColor;border-radius:99px;padding:2px 8px}
.mine-lv{font-size:13px;color:var(--ink-2)}
.mine-fix{margin-top:12px;font-size:14px;line-height:1.55}
.mine-fix b{color:var(--ink-3);font-weight:600}
.mine-cost{margin-top:6px;font-size:13px;color:var(--ink-2)}
.mine-cta{display:inline-block;margin-top:12px;font-size:13px;color:var(--gold-2)}

/* ---------- footer, fab ---------- */
.ft{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.ft p{margin:0 0 7px}
.dis{font-size:11.5px;color:var(--ink-3)}
.fab{
  position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--gold-2);
  font-size:21px;line-height:1;cursor:pointer;box-shadow:0 6px 22px -8px rgba(0,0,0,.8);
}
.fab:hover{background:var(--surface);color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}