/* Base reset (the Claude artifact host supplied this before; GitHub Pages needs it in the file) */
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:root {
  --bg: #11151b;
  --panel: #181e26;
  --panel-2: #1f2630;
  --line: #2d3644;
  --fg: #e7e0d2;
  --muted: #98a1ad;
  --gold: #cfa64e;
  --arcane: #86b6ff;
  --have: #74c483;
  --want: #e3ad4f;
  --neg: #e07a6e;
  --font-display: "IM Fell English SC", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius: 6px;
  /* Page titles sit a step above subtitles on a 1.2 scale (22 × 1.2 ≈ 26) */
  --subtitle-size: 22px;
  --title-size: clamp(24px, 6vw, 26px);
  --sky-glow: #1c2a4a;
  --star: rgb(214 224 255 / .7);
  --sigil: rgb(207 166 78 / .32);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #eceef0; --panel: #f7f7f6; --panel-2: #e3e6ea; --line: #c9ced6;
    --fg: #1c222a; --muted: #5b6573; --gold: #85661a; --arcane: #2457b8;
    --have: #2c7a3c; --want: #9a6410; --neg: #b23a2e; color-scheme: light;
    --sky-glow: #dde5f1; --star: rgb(36 56 96 / .3); --sigil: rgb(133 102 26 / .3);
  }
}
:root[data-theme="light"] {
  --bg: #eceef0; --panel: #f7f7f6; --panel-2: #e3e6ea; --line: #c9ced6;
  --fg: #1c222a; --muted: #5b6573; --gold: #85661a; --arcane: #2457b8;
  --have: #2c7a3c; --want: #9a6410; --neg: #b23a2e; color-scheme: light;
  --sky-glow: #dde5f1; --star: rgb(36 56 96 / .3); --sigil: rgb(133 102 26 / .3);
}

* { box-sizing: border-box; }
/* The chart ring hangs past the right edge; never let it widen the page */
html { overflow-x: clip; }
body {
  background: radial-gradient(1100px 520px at 72% -120px, var(--sky-glow), transparent 70%) no-repeat, var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-block: 28px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid;
  gap: 28px;
}
a { color: var(--arcane); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Star chart: a star field behind the page and a chart ring behind the title.
   The tile is a mask so its color comes from the theme tokens. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--star);
  -webkit-mask: url(sky.svg) 0 0 / 480px 480px repeat; mask: url(sky.svg) 0 0 / 480px 480px repeat;
  opacity: .9;
}
/* Stars fade toward the bottom of the screen, where the reading is */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, transparent 30vh, var(--bg) 100vh);
  opacity: .75;
}
/* Cropped to the header (the header paints above the cards), open at the top and right */
.sigil-crop { position: absolute; z-index: -1; inset: -28px -160px 0 0; overflow: hidden; pointer-events: none; }
.sigil { position: absolute; top: -110px; right: 70px; width: 380px; height: 380px; fill: none; stroke: var(--sigil); stroke-width: 1; }
.sigil .ticks { stroke-width: 6; stroke-dasharray: 1 11.566; }
.sigil .ticks-major { stroke-width: 12; stroke-dasharray: 1.6 73.8; }
.sigil .dashed { stroke-dasharray: 3 5; }
.sigil .faint { opacity: .45; }
.sigil .lines { stroke: color-mix(in srgb, var(--sigil), var(--arcane) 35%); }
.sigil .stars { fill: color-mix(in srgb, var(--star), var(--gold) 30%); stroke: none; }
.sigil .star { fill: color-mix(in srgb, var(--arcane) 55%, transparent); stroke: none; }
.sigil-turn { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .sigil-turn { animation: sigil-turn 360s linear infinite; }
}
@keyframes sigil-turn { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .sigil { width: 260px; height: 260px; top: -70px; right: 60px; opacity: .7; } }

/* Header */
header { position: relative; isolation: isolate; display: grid; gap: 6px; padding-bottom: 18px; }
/* A gold rule that fades out, instead of a flat line */
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--gold), color-mix(in srgb, var(--gold) 30%, var(--line)) 40%, var(--line)); }
.eyebrow { font-family: var(--font-data); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
/* On phones the data age wraps as one piece rather than mid-phrase */
#data-age { display: inline-block; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 6vw, 52px); line-height: 1.05; margin: 0; text-wrap: balance; text-shadow: 0 0 28px color-mix(in srgb, var(--sky-glow) 80%, transparent); }

h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--title-size); line-height: 1.15; margin: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.hint { color: var(--muted); font-size: 14px; margin: 0; }

/* Controls */
.controls { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
input, select { width: 100%; min-width: 0; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font: inherit; font-size: 15px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.seg button { flex: 1; background: var(--panel); color: var(--muted); border: 0; border-right: 1px solid var(--line); padding: 8px 6px; font: inherit; font-size: 14px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--panel-2); color: var(--fg); box-shadow: inset 0 -2px 0 var(--gold); }

/* Item list */
.list { display: grid; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, 1fr) 196px; gap: 8px 18px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.row.is-have { background: color-mix(in srgb, var(--have) 6%, transparent); }
.row.is-want { background: color-mix(in srgb, var(--want) 6%, transparent); }
.status { display: flex; gap: 6px; }
/* On Items, the actions sit level with the middle of each row */
.row > .status { align-self: center; }
.status button { flex: 1; font: inherit; font-size: 13px; font-weight: 500; padding: 5px 0; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.status button:hover { color: var(--fg); border-color: var(--muted); }
.status button.have[aria-pressed="true"] { background: var(--have); border-color: var(--have); color: var(--bg); }
.status button.want[aria-pressed="true"] { background: var(--want); border-color: var(--want); color: var(--bg); }
.status button.wear[aria-pressed="true"] { background: var(--arcane); border-color: var(--arcane); color: var(--bg); }
/* Item actions are one segmented control, so they can't be mistaken for the filter
   chips, and each part hints at its color before it's pressed */
.seg-actions { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); }
.seg-actions button, .seg-actions button:hover { border: 0; border-radius: 0; border-left: 1px solid var(--line); }
.seg-actions button:first-child { border-left: 0; }
.seg-actions button { white-space: nowrap; }
.seg-actions .have { color: color-mix(in srgb, var(--have) 80%, var(--muted)); }
.seg-actions .want { color: color-mix(in srgb, var(--want) 80%, var(--muted)); }
.seg-actions .wear { color: color-mix(in srgb, var(--arcane) 80%, var(--muted)); }
.seg-actions .got-it { color: var(--have); }
.seg-actions .have:hover { background: color-mix(in srgb, var(--have) 12%, transparent); }
.seg-actions .want:hover { background: color-mix(in srgb, var(--want) 12%, transparent); }
.seg-actions .wear:hover { background: color-mix(in srgb, var(--arcane) 12%, transparent); }
.seg-actions .got-it:hover { background: color-mix(in srgb, var(--have) 12%, transparent); }
.seg-actions .remove:hover { background: var(--panel-2); color: var(--fg); }
.name { display: grid; gap: 2px; min-width: 0; }
.name .t { font-weight: 700; font-size: 17px; line-height: 1.25; }
.name .meta { font-family: var(--font-data); font-size: 12px; color: var(--muted); letter-spacing: .02em; }
.flags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.flag { font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); }
.flag.nd { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 50%, var(--line)); }
.stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--font-data); font-size: 13px; min-width: 0; font-variant-numeric: tabular-nums; }
.stats .s { white-space: nowrap; color: var(--muted); }
.stats .s b { font-weight: 500; color: var(--fg); }
.stats .s.int b, .stats .s.int { color: var(--arcane); }
.stats .s.neg b { color: var(--neg); }
.note { grid-column: 3; font-size: 13px; color: var(--muted); font-style: italic; margin-top: -4px; }
.src { display: grid; gap: 2px; font-size: 14px; min-width: 0; }
.src .mob { font-weight: 500; }
.src .links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.empty { padding: 28px 4px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--line); }

footer { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 6px; }
footer p { margin: 0; max-width: 80ch; }

@media (max-width: 860px) {
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .field.search { grid-column: 1 / -1; }
  .row { grid-template-columns: minmax(0, 1fr) 196px; }
  .row .status { grid-column: 2; grid-row: 1; }
  .row .name { grid-column: 1; grid-row: 1; }
  .row .stats, .row .src, .row .note { grid-column: 1 / -1; }
  .note { margin-top: 0; }
}
@media (max-width: 420px) {
  .controls { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
  .row .status { grid-column: 1; grid-row: auto; order: 5; }
  .row .name { grid-row: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .row, .status button { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}

/* Site header and navigation */
.site-head { display: grid; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.site-head h1 a { color: inherit; text-decoration: none; }
.navbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--font-data); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
nav a { color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--fg); }
nav a[aria-current] { color: var(--fg); border-bottom-color: var(--gold); }
#switcher select { width: auto; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.banner { background: color-mix(in srgb, var(--want) 14%, var(--panel)); border: 1px solid color-mix(in srgb, var(--want) 45%, var(--line)); border-radius: var(--radius); padding: 10px 14px; }
.banner p { margin: 0; }

/* Pages */
.page { display: grid; gap: 14px; min-width: 0; }
h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--subtitle-size); margin: 10px 0 0; }
.btn { font: inherit; font-size: 14px; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
.btn:hover { border-color: var(--gold); }
.btn.small { font-size: 12px; padding: 2px 8px; }
.btn[aria-pressed="true"] { background: var(--panel-2); box-shadow: inset 0 -2px 0 var(--have); }
.btn.more { justify-self: center; margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 22%, transparent), 0 8px 24px -16px rgb(0 0 0 / .5); }
.card h3 { margin: 0; }
.controls { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.controls .field.search { grid-column: span 2; }
.controls.compact { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 20px; }
.controls.compact .field { width: 160px; }
.controls.compact .field.reach-field { width: auto; }
.reach-row { display: flex; align-items: center; gap: 10px; }
.reach-row input { width: 90px; }
.reach-note { font-family: var(--font-body); font-size: 14px; white-space: nowrap; letter-spacing: 0; text-transform: none; }
.field label, label.field { display: grid; gap: 4px; font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.check input { width: auto; }
.flag.ok { color: var(--have); border-color: color-mix(in srgb, var(--have) 50%, var(--line)); }
.flag.pick { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); }
.row .status { min-width: 0; }
.row.no-status { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.row .note, .note { grid-column: auto; margin: 0; }
.open { margin: 0; padding: 8px 12px; border-left: 3px solid var(--want); background: var(--panel); }
.links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; }
.detail .meta { font-family: var(--font-data); font-size: 13px; color: var(--muted); margin: 0; }
.detail .flags { align-self: center; }
.actions .status { width: 160px; }
.actions .wear-in .status { width: auto; }
.uprow p.hint { margin: 0; }

.wear-in { display: flex; align-items: center; gap: 8px; }
.wear-in .seg-actions button { padding: 5px 14px; }
.drops, .mobs, .wanted, .chars, .worn { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.drops li .links, .zone h3 .links { display: inline-flex; margin-left: 6px; font-family: var(--font-body); }

/* Upgrades */
.upgrades { display: grid; border-top: 1px solid var(--line); }
.uprow { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 2.4fr); gap: 6px 16px; padding: 10px 4px; border-bottom: 1px solid var(--line); align-items: start; }
.uprow .pos { font-family: var(--font-data); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.cands { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.cands .gain { font-family: var(--font-data); color: var(--have); }
.cands .delta { font-family: var(--font-data); font-size: 12px; color: var(--muted); }
.cands .btn { margin-left: 8px; }

/* Farm */
/* Each zone is a card with a header strip, so one camp reads as one unit */
.zone { display: grid; gap: 8px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold) 22%, transparent); }
details.zone { display: block; padding: 0; overflow: hidden; }
/* Zones sit inside a section, a step below its subtitle */
.zone h3 { font-size: 20px; }
.zone-body { display: grid; gap: 8px; padding: 12px 14px 14px; }
.zone summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 10px 14px; background: var(--panel-2); }
details.zone[open] > summary { border-bottom: 1px solid var(--line); }
.zone summary h3, .zone > h3 { margin: 0; }
@media (max-width: 640px) {
  .zone-body, div.zone { padding: 10px 10px 12px; }
  .zone summary { padding: 10px; }
  .zone .mobs { padding-left: 14px; }
}
.zone summary::-webkit-details-marker { display: none; }
.zone summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
details.zone[open] > summary::before { transform: rotate(90deg); }
.zone summary:hover::before { color: var(--gold); }
.mobs .mob { font-weight: 500; }

/* Characters */
.chars li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.charform { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 90px auto; gap: 10px; align-items: end; }
.wgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wgrid .field { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.wgrid .field input { color: var(--muted); }
.wgrid .field.weighted { color: var(--gold); }
.wgrid .field.weighted input { color: var(--fg); border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.backup { display: grid; gap: 10px; }
.backup input[type="file"] { width: auto; }
details summary { cursor: pointer; padding: 4px 0; }
footer a { color: var(--muted); }

@media (max-width: 640px) {
  .uprow { grid-template-columns: 1fr; }
  .charform { grid-template-columns: 1fr 1fr; }
  .controls .field.search { grid-column: 1 / -1; }
}

/* Gear card: paper doll + stat sheet */
.gear-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gear-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; align-items: start; }
/* Same arrangement as the in-game inventory window: jewelry and head across
   the top, a column either side of the character, weapons under it */
.doll {
  position: relative; display: grid; gap: 8px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-areas:
    ". ear1 neck head face ear2 ."
    "chest fig fig fig fig fig back"
    "shirt fig fig fig fig fig shoulders"
    "wrist1 fig fig fig fig fig wrist2"
    "waist fig fig fig fig fig hands"
    "finger1 fig fig fig fig fig finger2"
    "legs weapons weapons weapons weapons weapons feet";
}
/* Four tiles, each one doll column wide, centered across the five middle columns */
.doll .weapons { grid-area: weapons; display: grid; gap: 8px; grid-template-columns: repeat(4, calc((100% - 32px) / 5)); justify-content: center; }
.doll .weapons .slot-tile { grid-area: auto; }
/* Spans every row so it sits at the exact center of all the slots, not just the middle rows */
.doll .figure { grid-column: 2 / 7; grid-row: 1 / -1; place-self: center; pointer-events: none; width: 100%; height: 100%; max-height: 440px; fill: none; stroke: var(--line); stroke-width: 2; }
/* The sigil: a star and arc per slot, gold when worn, with the count in the middle */
.sigil-doll { max-width: 100%; }
.sigil-doll .ring { fill: none; stroke: var(--sigil); stroke-width: .8; }
.sigil-doll .ring.ticks { stroke-width: .8; opacity: .8; }
.sigil-doll .ring.ticks-major { stroke-width: 1.6; }
.sigil-doll .ring.dashed { stroke-dasharray: 2 4; opacity: .7; }
.sigil-doll .arc { fill: none; stroke: color-mix(in srgb, var(--muted) 30%, transparent); stroke-width: 3; }
.sigil-doll .arc.worn { stroke: var(--gold); }
.sigil-doll .arc.blocked { stroke-dasharray: 1 3; }
.sigil-doll .spoke { stroke: color-mix(in srgb, var(--gold) 35%, transparent); stroke-width: .7; }
.sigil-doll .star { fill: var(--muted); stroke: none; }
.sigil-doll .star.worn { fill: var(--gold); }
.sigil-doll .star.blocked { fill: none; stroke: var(--muted); stroke-width: .8; }
.sigil-doll .halo { fill: color-mix(in srgb, var(--gold) 20%, transparent); stroke: none; }
/* Every slot filled: the outer dial turns gold, glows and slowly turns */
.sigil-doll.complete .dial .ring { stroke: var(--gold); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--gold) 60%, transparent)); }
.sigil-doll.complete .count-label { fill: var(--gold); }
.sigil-doll .dial { transform-origin: 0 0; }
.sigil-doll .shimmer { fill: none; stroke: none; }
@media (prefers-reduced-motion: no-preference) {
  .sigil-doll.complete .dial { animation: sigil-turn 60s linear infinite; }
  /* One bright sweep round the dial when the last slot is filled */
  /* Brighter than the gold ring it runs over, with a glow, so it reads on top of it */
  .sigil-doll.just-completed .shimmer { stroke: color-mix(in srgb, var(--gold) 45%, #fff); stroke-width: 4.5; stroke-linecap: round;
    stroke-dasharray: 90 501; transform: rotate(-90deg); animation: sigil-shimmer 1.6s ease-in-out 1 forwards;
    filter: drop-shadow(0 0 4px var(--gold)) drop-shadow(0 0 8px color-mix(in srgb, var(--gold) 70%, transparent)); }
}
@keyframes sigil-shimmer {
  from { stroke-dashoffset: 0; opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  to { stroke-dashoffset: -591; opacity: 0; }
}
.sigil-doll text { text-anchor: middle; stroke: none; }
.sigil-doll .count { font-family: var(--font-display); font-size: 26px; fill: var(--fg); }
.sigil-doll .count-label { font-family: var(--font-data); font-size: 6px; letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .sigil-doll .halo { animation: twinkle 4s ease-in-out infinite alternate; }
}
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
.pos-ear1 { grid-area: ear1; } .pos-neck { grid-area: neck; } .pos-head { grid-area: head; } .pos-face { grid-area: face; } .pos-ear2 { grid-area: ear2; }
.pos-chest { grid-area: chest; } .pos-shirt { grid-area: shirt; } .pos-wrist1 { grid-area: wrist1; } .pos-waist { grid-area: waist; }
.pos-finger1 { grid-area: finger1; } .pos-legs { grid-area: legs; }
.pos-back { grid-area: back; } .pos-shoulders { grid-area: shoulders; } .pos-wrist2 { grid-area: wrist2; } .pos-hands { grid-area: hands; }
.pos-finger2 { grid-area: finger2; } .pos-feet { grid-area: feet; }
.pos-primary { grid-area: primary; } .pos-secondary { grid-area: secondary; } .pos-range { grid-area: range; } .pos-ammo { grid-area: ammo; }
.slot-tile.unused { opacity: .5; }
.slot-tile {
  display: grid; justify-items: center; align-content: start; gap: 2px; min-height: 86px; min-width: 0;
  padding: 8px 6px; text-align: center; font: inherit; color: var(--muted); text-decoration: none;
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: var(--radius);
}
button.slot-tile { cursor: pointer; }
button.slot-tile:hover, .slot-tile.open { border-color: var(--gold); }
.slot-tile.filled { border-style: solid; color: var(--fg); background: var(--panel); }
.slot-label { font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.slot-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.slot-tile.filled .slot-icon { stroke: var(--gold); opacity: 1; }
.slot-empty { font-size: 12px; font-style: italic; }
.slot-item { font-size: 13px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.slot-stats { font-family: var(--font-data); font-size: 11px; color: var(--arcane); }
.statsheet { display: grid; gap: 8px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.statsheet h4, .picker h4 { font-family: var(--font-display); font-weight: 400; font-size: 18px; margin: 0; }
.statsheet dl { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; margin: 0; font-family: var(--font-data); font-size: 13px; font-variant-numeric: tabular-nums; }
.statsheet dt { color: var(--muted); }
.statsheet dd { margin: 0; text-align: right; }
.statsheet p { margin: 0; }
.statsheet .total { border-top: 1px solid var(--line); padding-top: 8px; font-family: var(--font-data); }
.picker { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: var(--radius); }
.picker { scroll-margin-top: 16px; }
.picker-filters { display: flex; flex-wrap: wrap; align-items: start; gap: 10px 20px; }
.picker-filters > .field:first-child { width: 160px; }
.picker-filters .stat-filter { flex: 0 1 auto; }
.picker-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; }
.picks li { position: relative; display: flex; align-items: center; gap: 8px; }
.pick-item { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-width: 0; padding: 5px 8px; text-align: left; font: inherit; color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; }
.pick-item:hover, .pick-item:focus-visible { background: var(--panel-2); border-color: var(--gold); }
.pick-item:disabled { cursor: default; color: var(--have); }
.pick-item:disabled:hover { border-color: transparent; }
.pick-name { color: var(--arcane); font-weight: 500; }
.pick-details { font-size: 12px; white-space: nowrap; }
/* Stats card: floats under the row for mouse users */
.pick-tip { display: none; position: absolute; z-index: 5; left: 8px; top: 100%; min-width: 260px; max-width: 420px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.pick-tip p { margin: 4px 0 0; }
.picks li:hover .pick-tip, .picks li:focus-within .pick-tip { display: block; }
/* Touch screens can't hover, so show the stats inline instead */
@media (hover: none) {
  .picks li { flex-wrap: wrap; }
  .pick-tip { display: block; position: static; flex-basis: 100%; min-width: 0; max-width: none; box-shadow: none; border: 0; padding: 0 8px 6px 30px; background: transparent; }
}

@media (max-width: 760px) {
  .gear-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  /* Each in-game column becomes a row: top, left side, right side, weapons */
  .doll {
    grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
    grid-template-areas:
      "ear1 neck head face ear2"
      "chest shirt wrist1 waist finger1"
      "back shoulders wrist2 hands finger2"
      "legs primary secondary range feet"
      "ammo . . . .";
  }
  .doll .figure { display: none; }
  .doll .slot-tile { padding: 6px 4px; }
  .doll .weapons { display: contents; }
  .doll .weapons .pos-primary { grid-area: primary; } .doll .weapons .pos-secondary { grid-area: secondary; }
  .doll .weapons .pos-range { grid-area: range; } .doll .weapons .pos-ammo { grid-area: ammo; }
}
.item-icon, .title-icon { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; flex: none; }
.item-icon { width: 1em; height: 1em; margin-right: .3em; opacity: .75; }
.title-icon { width: .9em; height: .9em; margin-right: .3em; color: var(--gold); }
/* Items list: a larger icon tile at the start of each name block */
.name.has-thumb { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
.name.has-thumb > :not(.thumb) { grid-column: 2; }
.name .thumb { grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); color: var(--arcane); }
.thumb-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Toggle chip filters (flags, stats): several can be on at once */
.flags-field { grid-column: span 2; }
.weapon-slot { display: contents; }
.weapon-field, .armor-field { grid-column: span 2; }
.weapon-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; }
@media (max-width: 640px) { .weapon-field, .armor-field { grid-column: 1 / -1; } }
/* Has stats: an Add stat select, then one removable pill per chosen stat */
.stats-field { grid-column: span 2; }
.stat-pills { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stat-filter .label { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.add-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 150px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--fg); font-family: var(--font-data); font-size: 15px; cursor: pointer; text-align: left; }
.add-stat:hover, .add-stat[aria-expanded="true"] { border-color: var(--gold); }
.add-stat:disabled { opacity: .5; cursor: default; }
.add-stat .caret { color: var(--muted); font-size: 11px; }
/* Always opens downward, over whatever follows, and fits a phone's width */
.stat-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: min(520px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 2px; padding: 8px; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 24px rgb(0 0 0 / .25); }
.stat-menu button { font: inherit; font-size: 13px; padding: 7px 4px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--fg); cursor: pointer; white-space: nowrap; }
.stat-menu button:hover, .stat-menu button:focus-visible { border-color: var(--gold); background: var(--panel-2); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; padding: 5px 8px 5px 11px; border-radius: 999px; border: 1px solid var(--gold); background: var(--panel-2); color: var(--fg); cursor: pointer; box-shadow: inset 0 -2px 0 var(--gold); }
.pill span { color: var(--muted); font-size: 15px; line-height: 1; }
.pill:hover span, .pill:focus-visible span { color: var(--fg); }
@media (max-width: 640px) { .stats-field { grid-column: 1 / -1; } }
.chips-field .label { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
.chip:hover { color: var(--fg); border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--panel-2); color: var(--fg); border-color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
@media (max-width: 640px) { .flags-field { grid-column: 1 / -1; } }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.card h4 { font-family: var(--font-display); font-weight: 400; font-size: 17px; margin: 4px 0 0; }
.card-head h2 .hint, .section-head h2 .hint { font-family: var(--font-body); font-size: 15px; }
/* Characters page: separates managing the roster from the character above */
.manage { display: grid; gap: 14px; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.manage > h2 { font-size: var(--subtitle-size); color: var(--muted); }
.manage:first-child, .intro + .manage { margin-top: 0; padding-top: 0; border-top: 0; }
.card.backup { gap: 10px; }
.intro { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: flex; gap: 10px; align-items: baseline; }
.step-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--font-data); font-size: 12px; border: 1px solid var(--line); color: var(--muted); }
.steps li.next .step-mark { border-color: var(--gold); color: var(--gold); }
.steps li.done .step-mark { background: color-mix(in srgb, var(--gold) 20%, transparent); border-color: transparent; color: var(--gold); }
.steps li.done b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.backup-rows { display: grid; gap: 10px; }
.backup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.backup-row .label { width: 64px; font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.backup-row select { width: auto; }
.btn.primary { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
.btn.primary:hover { background: color-mix(in srgb, var(--gold) 85%, var(--fg)); }
.share-welcome { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: var(--panel-2); }
.share-welcome h3 { font-size: var(--subtitle-size); margin: 0 0 6px; }
.share-welcome p { margin: 0 0 14px; }
.share-welcome .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.share-welcome .btn.primary { font-size: 16px; padding: 10px 18px; text-decoration: none; }
.example-callout { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); border-radius: var(--radius); background: var(--panel-2); }
.example-callout .btn.primary { font-size: 16px; padding: 10px 18px; }
.example-callout > span { flex: 1 1 280px; }
.backup-row label.btn { cursor: pointer; }
.backup-row .file-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
.btn:disabled:hover { border-color: var(--line); }
/* Camps: suggestions for slots with no Want */
.camp-section { display: grid; gap: 10px; }
.camp-section > h2 { font-size: var(--subtitle-size); }
.camp-section > .hint { margin: 0; }
.camp-section.suggested { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.camp-items { display: grid; gap: 8px; margin-top: 6px; }
.camp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.camp-main { display: grid; gap: 4px; min-width: 0; }
.camp-title { font-size: 15px; }
.camp-score { font-family: var(--font-data); font-size: 13px; }
.camp-score .gain { color: var(--have); }
.camp-score .loss { color: var(--neg); }
/* The section rule (or the footer's) already separates; avoid a doubled line */
.camp-section { gap: 14px; }
/* Upgrades: Have/Want toggles beside Wear on each candidate */
.cands .cand-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; vertical-align: middle; }
.cands .cand-actions .btn { margin-left: 0; }
.cands .status button { flex: none; font-size: 11px; padding: 1px 8px; }
.pick-item .off-class { font-size: 12px; color: var(--want); }
/* Consider colors (EQ-style): a colored pill per mob level */
.con { display: inline-block; min-width: 2.2em; padding: 0 6px; border-radius: 999px; font-family: var(--font-data); font-size: 12px; line-height: 1.6; text-align: center; border: 1px solid transparent; }
.con-red { background: #c0392b; color: #fff; }
.con-yellow { background: #e1b12c; color: #1c1c1c; }
.con-white { background: #f4f4f2; color: #1c1c1c; border-color: var(--line); }
.con-blue { background: #2f6fd6; color: #fff; }
.con-green { background: #2e9a4a; color: #fff; }
.con-badges { color: var(--muted); font-size: 14px; }
.con-legend { margin: 0; }
.con-legend .con { margin: 0 2px; }
/* Upgrades: worn item's stats, and a comparison card on hover */
.uprow .cur .stats { margin-top: 4px; font-size: 12px; }
.cands li { position: relative; }
.cand-top { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
/* Actions sit at the right edge, so they line up down the list whatever the name length */
.cand-top .cand-actions { margin-left: auto; }
.cand-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; margin-top: 4px; }
.cand-stats .stats { display: inline-flex; font-size: 12px; gap: 2px 8px; }
.cands { gap: 12px; }
.uprow p.cand-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin: 20px 0 0 20px; }
.cand-more .btn { margin: 0; }
.compare-tip { display: none; position: absolute; z-index: 5; left: 0; top: 100%; min-width: 280px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgb(0 0 0 / .25); }
.compare-tip p { margin: 0 0 6px; }
.compare-tip table { border-collapse: collapse; font-family: var(--font-data); font-size: 12px; width: 100%; }
.compare-tip th { text-align: right; color: var(--muted); font-weight: 400; padding: 2px 8px; }
.compare-tip th:first-child, .compare-tip td:first-child { text-align: left; }
.compare-tip td { text-align: right; padding: 2px 8px; }
.compare-tip .up { color: var(--have); }
.compare-tip .down { color: var(--neg); }
.compare-tip .score-row td { border-top: 1px solid var(--line); font-weight: 500; }
@media (hover: hover) {
  .cands li:hover .compare-tip, .cands li:focus-within .compare-tip { display: block; }
}
.camp-sort.controls.compact .field { width: auto; min-width: 200px; }
.camp-sort .ports { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.camp-sort .ports .label { width: 100%; font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.camp-sort .ports label.check { display: inline-flex; gap: 6px; font-family: var(--font-body); font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--fg); }
.zone .route { margin: -4px 0 0; }

/* Notifications */
.toasts { position: fixed; z-index: 50; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 8px; width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); color: var(--fg); border: 1px solid var(--gold); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .3); font-size: 14px; }
.toast-text { flex: 1; min-width: 0; }
.toast-close { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast-close:hover { color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in .18s ease-out; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
}
.camp-actions { display: inline-flex; gap: 6px; }
.camp-actions button { flex: none; padding: 3px 12px; white-space: nowrap; }

/* Nav badges */
nav .count:empty { display: none; }
nav .count { display: inline-block; min-width: 1.6em; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--fg); font-size: 11px; line-height: 1.5; text-align: center; letter-spacing: 0; }
nav a[aria-current] .count { border-color: var(--gold); }
/* With badges, four links only fit one line on a phone if they sit closer */
@media (max-width: 420px) { nav { gap: 4px 12px; letter-spacing: .03em; } }

/* FAQ */
.faq h3 { margin: 18px 0 4px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; padding: 10px 0; font-weight: 500; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "\25B8"; color: var(--muted); transition: transform .15s; }
.faq-item[open] > summary::before { transform: rotate(90deg); }
.faq-item summary:hover { color: var(--gold); }
.faq-answer { padding: 0 0 12px 18px; display: grid; gap: 8px; max-width: 72ch; }
.faq-answer p { margin: 0; }
.faq-answer code { font-family: var(--font-data); font-size: 13px; }
.intro-faq { margin-left: auto; }
.faq-item.asked > summary { color: var(--gold); }
.head-tools { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.help-link { font-family: var(--font-data); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.help-link:hover { color: var(--fg); }
.help-link[aria-current] { color: var(--fg); border-bottom-color: var(--gold); }
a.help { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); font: 600 11px/1 var(--font-body); text-decoration: none; text-transform: none; letter-spacing: 0; vertical-align: 1px; }
a.help:hover, a.help:focus-visible { border-color: var(--gold); color: var(--gold); }
/* Phones: the help link shares the switcher's row instead of taking its own */
@media (max-width: 420px) {
  .head-tools { flex-wrap: nowrap; width: 100%; }
  #switcher { flex: 1; min-width: 0; }
  #switcher select { width: 100%; }
}
.mob-facts { margin: 2px 0 4px; }
.drops .mob-facts { margin: 2px 0 0; }