/* ============================================================
   TibiaForge — wireframe stylesheet
   Dark steel surfaces + gold accents
   ============================================================ */

:root {
  /* Surfaces (darkest -> lightest) */
  --bg-base:        #0E1014; /* near-black page base / input wells */
  --bg-app:         #14171D; /* main app background (cool charcoal) */
  --bg-panel:       #191D24; /* panel background (steel) */
  --bg-card:        #1C212A; /* card background (steel) */
  --bg-raised:      #20262F; /* raised elements / hub */

  /* Borders */
  --border:         #232932; /* default cool steel stroke */
  --border-strong:  #2C333E; /* emphasised stroke */

  /* Gold accents */
  --gold:           #D2AC52; /* primary gold */
  --gold-bright:    #E9CE86; /* bright gold (logo, hover/active) */
  --gold-light:     #F2E0A8; /* lightest gilt (glints) */

  /* Text (cool grays) */
  --text-bright:    #EDEFF3; /* headings / brightest */
  --text-primary:   #D6DAE2; /* primary body */
  --text-primary-2: #C4C9D2;
  --text-muted:     #9AA0AC; /* secondary / muted */
  --text-muted-2:   #8A909C;
  --text-faint:     #626977; /* faint labels, mono caption */

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --radius:   10px;
  --radius-sm: 7px;

  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Guide-site redesign tokens --- */
  --bg-hero:        #101318; /* hero / page-head / sidebar bg (a touch darker than panel) */
  --divider-hairline: #1A1E26; /* faint table/kv row dividers */
  --positive:       #5BB98C; /* exp gains, "updated" notes, status dots */
  --voc-knight:     #D95C5C;
  --voc-paladin:    #D9A441;
  --voc-sorcerer:   #9D7BE0;
  --voc-druid:      #5BB98C;
  --voc-monk:       #E08A4E;
  --grad-gold:      linear-gradient(180deg, #E0BC66, #C79E45); /* primary gold button */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg-app);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

::selection { background: rgba(210, 172, 82, 0.3); color: var(--text-bright); }

/* keyboard focus ring (mouse clicks don't trigger :focus-visible, so this is keyboard-only) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.input:focus-visible { outline: none; }

/* slim dark scrollbars everywhere (the chunky Windows defaults break the panel look;
   inner scrollers with their own rules — imb-list, hgv-toc "none" — still win) */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid var(--bg-app); }
::-webkit-scrollbar-track { background: transparent; }

/* tactile press on real buttons */
.btn:active, .pm-tool:active, .imb-chip:active, .xtabs button:active { transform: translateY(1px); }

/* respect reduced-motion: freeze decorative animation/transitions site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* ---- App shell ------------------------------------------------ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ---- Sidebar -------------------------------------------------- */

.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.brand__mark {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  flex: none;
}
/* the logo is a self-contained badge (shield + gold rim), so no box frame around it */
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }

.brand__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.brand__name b { color: var(--gold-bright); font-weight: 800; }
.brand__name span { color: var(--text-primary); font-weight: 600; }

/* search well */
.side-search {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.side-search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--text-faint);
}
.side-search__field input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  width: 100%;
  font-family: var(--font-sans);
}
.side-search__field input::placeholder { color: var(--text-faint); }
.side-search__key { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint);
  border: 1px solid var(--border-strong); border-radius: 4px; padding: 1px 5px; }

/* nav */
.nav { padding: 12px 12px 24px; flex: 1; }

.nav__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 14px 12px 7px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s;
}
.nav__item i { font-size: 18px; width: 20px; text-align: center; color: var(--text-muted-2); }
/* mini Wheel-of-Destiny mark used as the tool's icon — same 4-domain colours as the planner */
.nav-wheel { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
.nav__item:hover .nav-wheel, .nav__item.is-active .nav-wheel { filter: brightness(1.12) saturate(1.08); }
.hero__ring .nav-wheel { width: 56px; height: 56px; }
/* image-based nav/rail icon (e.g. the Exercise Wand sprite) — sits in the same 20px slot as glyphs */
.nav-ico { width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; vertical-align: middle; }
.nav__item:hover .nav-ico, .nav__item.is-active .nav-ico { filter: brightness(1.18); }
.nav__item:hover { background: var(--bg-raised); color: var(--text-bright); }
.nav__item:hover i { color: var(--gold-bright); }

.nav__item.is-active {
  background: var(--bg-raised);
  color: var(--gold-bright);
  border-left-color: var(--gold);
}
.nav__item.is-active i { color: var(--gold); }

.nav__item .badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-base);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 8px;
}
.nav__item .badge.badge--gold { color: var(--gold); border-color: var(--gold); }

/* WIP marker — flags tools whose numbers are still being calibrated */
.wip-badge { display: inline-block; text-transform: uppercase; font-size: 9.5px; font-weight: 700; letter-spacing: .5px;
  color: #d99a4a; background: rgba(217,154,74,.1); border: 1px solid rgba(217,154,74,.5); border-radius: 20px;
  padding: 1px 7px; line-height: 1.6; }
.nav__item .wip-badge { margin-left: auto; }
.topbar__title .wip-badge { margin-left: 8px; vertical-align: 2px; }

/* coming-soon nav items — no page built yet, shown muted & non-interactive */
.nav__item.is-soon { color: var(--text-faint); cursor: default; }
.nav__item.is-soon i { color: var(--text-faint); }
.nav__item.is-soon:hover { background: none; color: var(--text-faint); }
.nav__item.is-soon:hover i { color: var(--text-faint); }
.nav__item.is-soon .badge {
  text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.5px; padding: 1px 7px;
}

/* ---- Main ----------------------------------------------------- */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar__title { font-size: 16px; font-weight: 600; color: var(--text-bright); }
.topbar__crumb { color: var(--text-faint); font-size: 13px; }
.topbar__spacer { flex: 1; }

/* hamburger (mobile only) toggles the sidebar drawer; hidden on desktop */
.topbar__menu {
  display: none; align-items: center; justify-content: center;
  background: none; border: none; color: var(--text-primary);
  font-size: 23px; line-height: 1; cursor: pointer; padding: 4px; margin-left: -4px;
}
.topbar__menu:hover { color: var(--gold-bright); }
/* dimming scrim behind the open drawer; hidden until the drawer is used */
.nav-scrim { display: none; }

.select {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--text-primary);
  font-size: 13px;
}
.select i { color: var(--text-muted); font-size: 16px; }

.online-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(210,172,82,0.18); }
.online-pill b { color: var(--text-bright); font-weight: 600; }

.btn {
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.btn--gold { border-color: var(--gold); color: var(--gold-bright); }
.btn--gold:hover { background: rgba(210,172,82,0.08); }
.btn--sm { padding: 5px 9px; font-size: 11.5px; }
.btn--sm i { font-size: 13px; vertical-align: -1px; }

/* quick-budget buttons (set the wheel point budget like the official limit selector) */
.cap-buttons { display: flex; align-items: center; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.cap-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-faint); margin-right: 2px; }
.btn--cap { padding: 5px 11px; font-size: 12px; font-family: var(--font-mono); }
.btn--cap.is-active { border-color: var(--gold); color: var(--gold-bright); background: rgba(210,172,82,0.10); }

/* fill / clear domain actions in the selected-cell panel */
.sp-domain { display: flex; gap: 7px; margin-top: 4px; }

/* ---- Content area --------------------------------------------- */

.content { padding: 24px 26px 48px; min-width: 0; }
/* ^ min-width matters: .content is a flex item of .main — without it, anything with a wide
   min-content (e.g. the character sheet's spell table) punches through the flex stretch and
   forces sideways page scroll on mobile instead of scrolling inside its .hs-table-wrap */

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
}
.section-head h2 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-bright);
}
.section-head .more {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-muted);
}
.section-head .more:hover { color: var(--gold-bright); }

/* hero / hub */
.hero {
  background: var(--bg-raised);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: flex;
  align-items: center;
  gap: 26px;
}
.hero__ring {
  width: 92px; height: 92px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  border: 3px solid var(--gold);
  color: var(--gold-light);
  font-size: 34px;
  background: var(--bg-base);
}
.hero__body { flex: 1; }
.hero__eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold);
}
.hero__title { font-size: 21px; font-weight: 700; color: var(--text-bright); margin: 6px 0 5px; }
.hero__desc { color: var(--text-muted); font-size: 13.5px; max-width: 56ch; }
.hero__actions { display: flex; gap: 10px; margin-top: 15px; }

/* metric cards */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 16px;
}
.metric {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.metric__label {
  font-size: 11.5px; color: var(--text-muted-2);
  text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.metric__value {
  font-size: 26px; font-weight: 700; color: var(--text-bright); margin-top: 6px;
}
.metric__value .unit { font-size: 14px; color: var(--text-faint); font-weight: 500; }
.metric__delta { font-size: 12px; color: var(--gold); margin-top: 4px; }

/* split columns */
.columns {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 18px;
  align-items: start;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel__head {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.panel__head h3 { font-size: 14px; font-weight: 600; color: var(--text-bright); }
.panel__head i { color: var(--gold); font-size: 18px; }
.panel__head .more { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* boss tracker rows */
.boss {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.boss:last-child { border-bottom: none; }
.boss__icon {
  width: 38px; height: 38px; border-radius: 8px; flex: none;
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  display: grid; place-items: center; color: var(--text-muted); font-size: 18px;
}
.boss__name { font-weight: 600; color: var(--text-primary); font-size: 13.5px; }
.boss__meta { font-size: 12px; color: var(--text-faint); }
.boss__chance { margin-left: auto; text-align: right; }
.chance-bar {
  width: 96px; height: 6px; border-radius: 4px; background: var(--bg-base);
  border: 1px solid var(--border); overflow: hidden; margin-top: 5px;
}
.chance-bar span { display: block; height: 100%; background: var(--gold); }
.boss__pct { font-size: 13px; font-weight: 700; color: var(--gold-bright); }

/* highscores list */
.rank {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.rank:last-child { border-bottom: none; }
.rank__no {
  width: 24px; text-align: center; font-weight: 700; font-size: 13px;
  color: var(--text-faint); font-family: var(--font-mono);
}
.rank--top .rank__no { color: var(--gold); }
.rank__name { font-weight: 600; color: var(--text-primary); font-size: 13.5px; }
.rank__vocation { font-size: 11.5px; color: var(--text-faint); }
.rank__level { margin-left: auto; font-weight: 700; color: var(--text-bright); font-size: 14px; }
.rank__level small { color: var(--text-faint); font-weight: 500; font-size: 11px; }

/* news list */
.news {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px;
}
.news__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.news__tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 9px;
}
.news__title { font-size: 14px; font-weight: 600; color: var(--text-bright); line-height: 1.4; }
.news__date { font-size: 11.5px; color: var(--text-faint); margin-top: 9px; }

/* ---- News homepage feed ---- */
/* coloured tag, shared by lead + rows; type modifiers reuse the planner domain palette */
.tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--gold);
  background: rgba(210, 172, 82, 0.12);
  border: 1px solid rgba(210, 172, 82, 0.35);
  border-radius: 5px; padding: 2px 8px;
}
.tag--patch  { color: #18cd8f; background: rgba(24, 205, 143, 0.10); border-color: rgba(24, 205, 143, 0.35); }
.tag--guide  { color: #b67be6; background: rgba(182, 123, 230, 0.12); border-color: rgba(182, 123, 230, 0.35); }
.tag--event  { color: #ef5a68; background: rgba(239, 90, 104, 0.10); border-color: rgba(239, 90, 104, 0.35); }

/* lead / featured story */
.news-lead {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-top: 4px;
  transition: border-color 0.14s, background 0.14s;
}
.news-lead:hover { border-color: var(--gold); background: var(--bg-raised); }
.news-lead__title {
  font-size: 19px; font-weight: 700; color: var(--text-bright);
  line-height: 1.3; margin: 12px 0 8px;
}
.news-lead:hover .news-lead__title { color: var(--gold-bright); }
.news-lead__excerpt { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; max-width: 72ch; }
.news-lead__meta { font-size: 12px; color: var(--text-faint); margin-top: 14px; }

/* feed of secondary stories */
.news-feed { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.news-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  transition: border-color 0.14s, background 0.14s;
}
.news-row:hover { border-color: var(--gold); background: var(--bg-raised); }
.news-row__tag { flex: 0 0 auto; }
.news-row__body { flex: 1; min-width: 0; }
.news-row__title { font-size: 14px; font-weight: 600; color: var(--text-bright); }
.news-row:hover .news-row__title { color: var(--gold-bright); }
.news-row__excerpt {
  font-size: 12.5px; color: var(--text-muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-row__date { flex: 0 0 auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }

/* rail "coming soon" rows (non-interactive) */
.rail-soon {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 4px;
  border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 13px;
}
.rail-soon:first-child { border-top: none; }
.rail-soon i { color: var(--text-faint); font-size: 17px; width: 20px; text-align: center; }
.rail-soon .badge {
  margin-left: auto; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; background: var(--bg-base); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px;
}

.footnote {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
}

/* ---- Page heading ---- */
.page-head { margin-bottom: 22px; }
.page-head h1 { font-size: 22px; font-weight: 700; color: var(--text-bright); }
.page-head p { color: var(--text-muted); font-size: 13.5px; margin-top: 6px; max-width: 72ch; }

/* ---- Tabs ---- */
.tabs {
  display: inline-flex; gap: 6px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 5px; margin-bottom: 20px;
}
.tabs button {
  border: none; background: transparent; color: var(--text-muted);
  font-weight: 600; font-size: 13.5px; font-family: var(--font-sans);
  padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: background 0.12s, color 0.12s;
}
.tabs button i { font-size: 17px; color: var(--text-muted-2); }
.tabs button:hover { color: var(--text-bright); }
.tabs button.is-active { background: var(--bg-raised); color: var(--gold-bright); }
.tabs button.is-active i { color: var(--gold); }

.calc-pane.is-hidden { display: none; }

/* ---- Page layout (3-column: sidebar | main | rail) ---- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.layout__main { min-width: 0; }
.rail { position: sticky; top: calc(var(--topbar-h) + 24px); display: grid; gap: 16px; }

/* ---- Calculator layout (inputs | results) ---- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }

.card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.card + .card { margin-top: 18px; }
.card__head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--border); }
.card__head i { color: var(--gold); font-size: 18px; }
.card__head h2 { font-size: 15px; font-weight: 600; color: var(--text-bright); }
.card__head .hint { margin-left: auto; font-size: 11.5px; color: var(--text-faint); }
.card__body { padding: 18px; }

/* ---- Form fields ---- */
.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field > label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-muted-2);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: 0.5px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.input {
  width: 100%; background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text-primary);
  font-size: 14px; font-family: var(--font-sans); outline: none; transition: border-color 0.12s;
}
.input:focus { border-color: var(--gold); }
.input::placeholder { color: var(--text-faint); }
select.input { appearance: none; cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0AC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; }

/* segmented control (weapon type) */
.segmented { display: flex; gap: 7px; }
.segmented button {
  flex: 1; background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 8px; cursor: pointer;
  color: var(--text-muted); font-size: 12.5px; font-weight: 600; font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: 2px; align-items: center; transition: border-color 0.12s, color 0.12s;
}
.segmented button small { font-size: 10.5px; font-weight: 500; color: var(--text-faint); }
.segmented button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.segmented button.is-active { border-color: var(--gold); color: var(--gold-bright); background: rgba(210,172,82,0.07); }
.segmented button.is-active small { color: var(--gold); }

/* toggles */
.toggle {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-top: 1px solid var(--border); cursor: pointer;
}
.toggle:first-of-type { border-top: none; }
.toggle__track {
  width: 38px; height: 22px; border-radius: 20px; background: var(--bg-base);
  border: 1px solid var(--border-strong); position: relative; flex: none; transition: background 0.15s, border-color 0.15s;
}
.toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-muted-2); transition: transform 0.15s, background 0.15s;
}
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle input:checked + .toggle__track { background: rgba(210,172,82,0.22); border-color: var(--gold); }
.toggle input:checked + .toggle__track::after { transform: translateX(16px); background: var(--gold); }
.toggle__text { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.toggle__text small { display: block; font-size: 11.5px; color: var(--text-faint); font-weight: 400; }

/* ---- Results ---- */
.results { min-width: 0; }
.result-hero {
  background: var(--bg-raised); border: 1px solid var(--gold); border-radius: var(--radius);
  padding: 20px; text-align: center;
}
.result-hero__label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.result-hero__value { font-size: 44px; font-weight: 800; color: var(--text-bright); line-height: 1.1; margin: 8px 0 2px; }
.result-hero__sub { font-size: 12.5px; color: var(--text-muted); }

.result-list { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
.result-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 15px; display: flex; align-items: center; gap: 12px;
}
.result-tile i { font-size: 19px; color: var(--gold); width: 22px; text-align: center; }
.result-tile__label { font-size: 11.5px; color: var(--text-muted-2); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; }
.result-tile__value { font-size: 16px; font-weight: 700; color: var(--text-bright); margin-top: 2px; }
.result-tile__value small { font-weight: 500; font-size: 12px; color: var(--text-faint); }

.notice {
  margin-top: 14px; font-size: 12px; color: var(--text-muted); line-height: 1.55;
  background: var(--bg-panel); border: 1px solid var(--border); border-left: 2px solid var(--gold);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.notice b { color: var(--gold-bright); font-weight: 600; }

/* ---- Right rail widgets ---- */
.ref-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ref-table th {
  text-align: left; color: var(--text-muted-2); font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 7px 8px; border-bottom: 1px solid var(--border);
}
.ref-table td { padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.ref-table tr:last-child td { border-bottom: none; }
.ref-table .w { color: var(--gold-bright); font-weight: 600; }
.ref-table .num { font-family: var(--font-mono); color: var(--text-primary-2); }

.rail-link {
  display: flex; align-items: center; gap: 11px; padding: 10px 0;
  color: var(--text-muted); font-size: 13px; font-weight: 500; border-top: 1px solid var(--border);
}
.rail-link:first-child { border-top: none; }
.rail-link i { color: var(--gold); font-size: 17px; width: 20px; text-align: center; }
.rail-link:hover { color: var(--gold-bright); }
.rail-link .chev { margin-left: auto; color: var(--text-faint); font-size: 15px; }

/* ============================================================
   Wheel of Destiny
   ============================================================ */
.pts {
  display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-muted);
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 13px; height: 41px;
}
.pts b { color: var(--text-bright); font-weight: 700; }
.pts .muted b { color: var(--text-muted); }
.pts-need { color: var(--gold-bright); font-size: 11.5px; font-weight: 600; }
.pts.over-budget .pts-need, .pts.over-budget #pts-used { color: #e0727b; }

/* free-allocation toggle + the disabled level / quick-budget controls when it's on */
.free-toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.free-toggle input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }
.free-toggle span { line-height: 1.4; }
.btn--cap:disabled, .input:disabled { opacity: 0.45; cursor: not-allowed; }

/* top row: vocation/level controls (left, flexes to fill) + a compact in-game-code card (right) */
.top-row { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
/* zero any card margins (incl. the .card + .card sibling margin) so both cards in the row
   share the same top/bottom — stretch then makes them equal height with level tops */
.top-row .controls-card, .top-row .share-card { margin: 0; }
.top-row .controls-card { flex: 1 1 auto; min-width: 0; }
.top-row .share-card { flex: 0 0 300px; }
/* the controls card is narrower now — let the vocation tabs wrap instead of clipping */
#voc-tabs { flex-wrap: wrap; }
#voc-tabs button { flex: 1 1 auto; }
.share-card .input { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: 12px; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share-help { font-size: 11px; margin-top: 10px; line-height: 1.45; }
@media (max-width: 980px) { .top-row { flex-direction: column; } .top-row .share-card { flex-basis: auto; } }

#voc-tabs { width: 100%; }
#voc-tabs button { flex: 1; justify-content: center; }

/* wheel + vessels side by side: the wheel sits left, the gem vessels in a column to its right.
   Top-aligned so a tall (greater-gem) vessel column never pushes the wheel down; the column caps
   its height and scrolls instead. */
.wheel-row { display: flex; align-items: flex-start; }
.wheel-row .wheel-wrap { flex: 1 1 auto; min-width: 0; }
.wheel-card .wheel-wrap { display: flex; justify-content: center; padding: 16px 10px 16px 14px; }
#wheel-svg { width: 100%; max-width: 522px; height: auto; }
.wheel-vessels { flex: 0 0 202px; padding: 16px 14px 12px 2px; border-left: 1px solid var(--border); max-height: 540px; overflow-y: auto; }
.wheel-vessels > .sum-title { display: block; margin: 0 0 12px; }
.wheel-vessels .vessels { display: grid; gap: 10px; }
/* stack the vessels under the wheel on narrow screens */
@media (max-width: 820px) {
  .wheel-row { flex-direction: column; }
  .wheel-vessels { flex-basis: auto; border-left: none; border-top: 1px solid var(--border); max-height: none; padding: 16px 18px 4px; }
}

/* ---- domain colours (0=BR, 1=BL, 2=TL, 3=TR), muted to match the official. The cells
   are painted OPAQUE in a domain shade and the maze texture is multiplied over them, so
   the labyrinth itself takes the domain colour. Two shades: `--domN` = filled (bright),
   `--domN-dim` = reachable-but-empty (dim). Locked cells use neutral grey. */
:root {
  /* EXACT base colours the official 2D canvas uses (captured from its fillStyle). They are
     very saturated and drawn at LOW alpha over the grey maze: filled cells 0.42, reachable
     cells 0.19 — that low alpha is what mutes them into the dusty look, not desaturation.
     `--domN` = filled colour, `--domN-dim` = reachable-but-empty colour. */
  --dom0: #e618da;  --dom0-dim: #841d9e;  /* BR purple  */
  --dom1: #18cd8f;  --dom1-dim: #198d40;  /* BL teal    */
  --dom2: #94c412;  --dom2-dim: #46b21c;  /* TL green   */
  --dom3: #ef1a38;  --dom3-dim: #ae1434;  /* TR red     */
}

/* official grey-maze backdrop the colours are drawn over */
.wheel-base { pointer-events: none; image-rendering: pixelated; }

/* cells. `pointer-events: all` on both paths keeps every part of a cell clickable. The
   fill alpha (0.42 filled, 0.19 reachable, 0.40 locked-grey) lets the maze read through. */
.cell { cursor: pointer; }
.cell-outer { fill: #808080; fill-opacity: 0.40; pointer-events: all; stroke: rgba(0,0,0,0.28); stroke-width: 1; transition: fill-opacity 0.1s, stroke 0.1s; }
.spoke-overlay { pointer-events: none; }
.cell-inner { fill: var(--gold); fill-opacity: 0.58; pointer-events: all; }

/* reachable-but-empty cells: the dim domain colour at low alpha */
.cell.section-0 .cell-outer { fill: var(--dom0-dim); fill-opacity: 0.19; }
.cell.section-1 .cell-outer { fill: var(--dom1-dim); fill-opacity: 0.19; }
.cell.section-2 .cell-outer { fill: var(--dom2-dim); fill-opacity: 0.19; }
.cell.section-3 .cell-outer { fill: var(--dom3-dim); fill-opacity: 0.19; }
/* filled arc: the bright domain colour (0.58 alpha from .cell-inner — more vivid than the
   captured 0.42 so it pops like the live site; maze still reads through) */
.cell.section-0 .cell-inner { fill: var(--dom0); }
.cell.section-1 .cell-inner { fill: var(--dom1); }
.cell.section-2 .cell-inner { fill: var(--dom2); }
.cell.section-3 .cell-inner { fill: var(--dom3); }

/* locked (unreachable) cells: just the bare dark maze (no tint). The #808080 0.40 grey
   captured from the canvas was the mouse-HOVER highlight, not the locked-cell colour —
   the official leaves unreachable cells as the plain dark labyrinth. */
.cell.locked { cursor: default; }
.cell.locked .cell-outer { fill-opacity: 0; }

/* hover: the official's grey cursor highlight — #808080 at 0.40 laid over the whole cell
   (the value captured from its canvas fillStyle). cell-hover is a full-wedge overlay that
   sits above both paths, so filled, reachable and locked cells all grey on hover. */
.cell-hover { fill: #808080; fill-opacity: 0; pointer-events: none; transition: fill-opacity 0.08s; }
.cell:hover .cell-hover { fill-opacity: 0.40; }
/* selection keeps the gold outline so it stays distinct from a plain hover */
.cell.selected .cell-outer { stroke: var(--gold-bright); stroke-width: 2.5; }

/* perk sprites + revelation corners sit on top of cells but must not block clicks */
.cell-icon, .rev { pointer-events: none; }
.cell-icon image, .rev image { image-rendering: pixelated; }

/* gem sockets (the small ornate socket per domain — click to open the gem editor) */
.vessel { cursor: pointer; }
.vessel-socket { fill: url(#socket-grad); stroke: rgba(150, 120, 60, 0.6); stroke-width: 1.5; }
.vessel-hit { fill: transparent; pointer-events: all; }
.vessel.selected .vessel-socket { stroke: var(--gold-bright); filter: drop-shadow(0 0 5px var(--gold-bright)); }

/* real in-game gem sprite sitting in the socket */
.gem-icon { image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6)); }

/* revelation corners (real client backdrop art) */
.rev image { image-rendering: pixelated; }
.rev-light { opacity: 0.9; }
.rev-track { fill: none; stroke: rgba(14, 16, 20, 0.7); stroke-width: 6; }
/* the progress ring shows how many points are in the domain — coloured per domain */
.rev-prog { fill: var(--gold); stroke: none; }
.rev.section-0 .rev-prog { fill: var(--dom0); }
.rev.section-1 .rev-prog { fill: var(--dom1); }
.rev.section-2 .rev-prog { fill: var(--dom2); }
.rev.section-3 .rev-prog { fill: var(--dom3); }

/* the three stage dots under each revelation perk: lit (in the domain colour) once
   that stage's point threshold (250 / 500 / 1000) is reached, dark otherwise */
/* only lit VR dots are drawn (the empty sockets live in the frame art); a bright
   domain-coloured gem in the hole with a soft glow */
.rev-dot.lit { stroke: rgba(255,255,255,0.35); stroke-width: 0.6; }
.rev-dots.section-0 .rev-dot.lit { fill: #e618da; filter: drop-shadow(0 0 2px #e618da); }
.rev-dots.section-1 .rev-dot.lit { fill: #18cd8f; filter: drop-shadow(0 0 2px #18cd8f); }
.rev-dots.section-2 .rev-dot.lit { fill: #94c412; filter: drop-shadow(0 0 2px #94c412); }
.rev-dots.section-3 .rev-dot.lit { fill: #ef1a38; filter: drop-shadow(0 0 2px #ef1a38); }

/* selected-perk panel */
.selected-panel { border-top: 1px solid var(--border); padding: 14px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.selected-panel.is-hidden { display: none; }
.sp-main { display: flex; flex-direction: column; gap: 5px; font-size: 13px; min-width: 240px; flex: 1; }
.sp-loc { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold); font-weight: 600; }
.sp-line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-line b { color: var(--text-bright); font-weight: 600; }
.sp-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; padding: 2px 6px; border-radius: 4px; font-weight: 700; flex: none; }
.sp-tag.conv { background: rgba(210, 172, 82, 0.16); color: var(--gold-bright); }
.sp-tag.ded { background: rgba(140, 158, 186, 0.14); color: var(--text-muted); }
.sp-desc { color: var(--text-muted); font-size: 12px; }
.sp-desc b { color: var(--gold-bright); font-weight: 600; }
/* full official perk description (passives / augments / vessel resonance) */
.sp-full { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); max-width: 420px; margin: -1px 0 1px; }
.selected-panel__ctl { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.selected-panel__ctl .btn { padding: 7px 11px; }
.selected-panel__val { font-weight: 700; color: var(--gold-bright); min-width: 70px; text-align: center; font-family: var(--font-mono); }

/* build summary */
.sum-group { margin-bottom: 15px; }
.sum-group:last-child { margin-bottom: 0; }
.sum-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold); }
.sum-list { list-style: none; margin: 7px 0 0; padding: 0; }
.sum-list li { font-size: 12.5px; color: var(--text-primary); padding: 4px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 10px; }
.sum-list li:last-child { border-bottom: none; }
.sum-list li span { color: var(--text-muted); }
.sum-list li b { color: var(--text-bright); font-weight: 600; white-space: nowrap; }
.sum-list li b.muted { color: var(--text-faint); font-weight: 500; }
.sum-list li.sum-total { border-bottom: 1px solid var(--border); padding-bottom: 7px; margin-bottom: 2px; }
.sum-list li.sum-total span { color: var(--gold); font-weight: 600; }
.sum-list li.sum-total b { color: var(--gold-bright); }

/* summary rows are hoverable — they highlight the cells that grant them on the wheel */
.sum-list li[data-hl-conv], .sum-list li[data-hl-ded], .sum-list li[data-hl-section] { cursor: default; transition: background 0.1s; }
.sum-list li[data-hl-conv]:hover, .sum-list li[data-hl-ded]:hover, .sum-list li[data-hl-section]:hover { background: rgba(210,172,82,0.10); }

/* cells highlighted from a summary hover */
.cell.hl .cell-outer { stroke: var(--gold-bright); stroke-width: 3; fill: rgba(210,172,82,0.16); }
.cell.hl { filter: drop-shadow(0 0 3px rgba(233,206,134,0.75)); }

/* floating rich tooltip when hovering a wheel cell */
.wheel-tip { position: fixed; z-index: 9999; max-width: 300px; background: #14161b; border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 11px; box-shadow: 0 8px 28px rgba(0,0,0,0.55); pointer-events: none; }
.wheel-tip.is-hidden { display: none; }
.tip-loc { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gold); font-weight: 600; }
.tip-row { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.tip-row b { color: var(--text-bright); font-weight: 600; font-size: 12.5px; }
.tip-row span { color: var(--text-muted); font-size: 11.5px; }
.tip-row.is-dim b { color: var(--text-faint); font-weight: 500; }
.tip-desc { color: var(--text-muted); font-size: 11px; line-height: 1.45; margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }

/* augmented-spell rank lines (I / II): the unlocked rank(s) bright, locked ones greyed —
   mirrors the official tooltip. Shared by the wheel cell tooltip and the selected panel. */
.tip-aug { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
.aug-rank { display: flex; gap: 7px; font-size: 11.5px; line-height: 1.4; color: var(--text-bright); }
.aug-rank + .aug-rank { margin-top: 5px; }
.aug-rank .aug-rom { flex: 0 0 auto; min-width: 13px; text-align: center; color: var(--gold-bright); font-weight: 700; }
.aug-rank.locked, .aug-rank.locked .aug-rom { color: var(--text-faint); }

/* revelation-perk hover: invisible hit target on the corner icon + per-stage tooltip styling */
.rev-hit { fill: transparent; pointer-events: auto; cursor: help; }
.tip-desc b { color: var(--gold-bright); font-weight: 700; }
.tip-rev-hint { margin-top: 5px; font-size: 10px; font-style: italic; color: var(--text-faint); }
.muted { color: var(--text-faint); }

/* vessels (gems) editor — structured gem + mod picker */
.vessels { margin-top: 8px; display: grid; gap: 10px; }
.vessel-card { padding: 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255, 255, 255, 0.015); cursor: pointer; }
.vessel-card.selected { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.vessel-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.vessel-label { font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--gold); }
.vessel-vr { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.vessels .input { width: 100%; padding: 6px 9px; font-size: 12px; }
select.vessel-q { padding-right: 28px; }
.gem-mod { display: flex; gap: 6px; margin-top: 6px; }
.gem-mod .gem-mod-sel { flex: 1; min-width: 0; }
.gem-mod .gem-grade-sel { width: 96px; flex: none; padding-right: 24px; }
.gem-mod.supreme .gem-mod-sel { border-color: rgba(210, 172, 82, 0.5); }
.gem-mod-val { font-size: 11px; color: var(--text-bright); margin: 3px 2px 0; font-family: var(--font-mono); line-height: 1.45; }

@media (max-width: 1240px) {
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; }
}
@media (max-width: 1080px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .columns { grid-template-columns: 1fr; }
  .news { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .calc-grid { grid-template-columns: 1fr; }
  .result-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .result-list { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .news-row__excerpt { display: none; }
  .news-lead__title { font-size: 17px; }
}
/* ---- Mobile / tablet-portrait: sidebar becomes an off-canvas drawer ---- */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
    width: min(84vw, 286px);
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    z-index: 60;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden;
    transition: opacity 0.26s ease;
    z-index: 55;
  }
  body.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .topbar__menu { display: inline-flex; }
  .topbar { padding: 0 14px; gap: 12px; }
  .topbar__crumb { display: none; }

  .content { padding: 16px 14px 40px; }

  /* vocation tabs wrap instead of overflowing */
  #voc-tabs { flex-wrap: wrap; }
  /* selected-cell +/- controls reflow full width below the perk info, shrinking and
     wrapping so the +max button never clips off the right edge on a narrow screen */
  .selected-panel { padding: 13px 14px; }
  .selected-panel__ctl { margin-left: 0; width: 100%; flex-wrap: wrap; justify-content: center; gap: 5px; }
  .selected-panel__ctl .btn { padding: 7px 9px; }
  .selected-panel__val { min-width: 52px; }
}

/* very small phones: drop the server picker so the topbar doesn't crowd */
@media (max-width: 480px) {
  .topbar .select { display: none; }
  .tabs button { padding: 9px 13px; font-size: 12.5px; }
}

/* ---- Build-guide wheel embeds (wod-embed.js) ---------------------------------- */
.wod-build {
  display: inline-block; vertical-align: top; box-sizing: border-box;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; width: 100%; max-width: 380px;
}
.wod-embed-wheel { width: 100%; }
.wod-embed-svg { width: 100%; height: auto; display: block; }
/* read-only: cells aren't clickable, but they DO answer hover — wod-embed wires the same
   rich tooltips the planner shows (cellTipHTML/revTipHTML), so keep pointer events alive */
.wod-embed-svg .cell, .wod-embed-svg .cell-inner, .wod-embed-svg .cell-outer,
.wod-embed-svg .cell-hover, .wod-embed-svg .vessel-hit, .wod-embed-svg .vessel { cursor: help; }

/* read-only vessels/gems panel under the embed wheel */
.wod-embed-vessels { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 11px; }
.wod-embed-vessels__t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.wov { padding: 7px 0 6px; border-bottom: 1px solid var(--divider-hairline); }
.wov:last-child { border-bottom: none; padding-bottom: 0; }
.wov__head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.wov__label { color: var(--text-muted); font-weight: 600; }
.wov__gem { color: var(--gold-bright); font-weight: 600; }
.wov.is-empty .wov__gem { color: var(--text-faint); font-weight: 400; }
.wov__vr { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.wov__mod { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 3px 0 0 10px; }
.wov__mod-name { color: var(--text-primary); }
.wov__mod-val { color: var(--text-muted); font-family: var(--font-mono); font-size: 10.5px; text-align: right; }
.wov__mod.is-supreme .wov__mod-name { color: var(--gold-bright); }
.wod-embed-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.wod-embed-meta { font-size: 12.5px; color: var(--text-muted); }
.wod-embed-meta b { color: var(--gold-bright); font-weight: 600; }
.wod-embed-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wod-embed-btn {
  font-size: 12px; padding: 6px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg-base); color: var(--text-primary);
  cursor: pointer; font-family: var(--font-sans); font-weight: 600; white-space: nowrap; text-decoration: none;
}
.wod-embed-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
.wod-embed-err { padding: 22px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* supreme gem-mod lines in the build summary wrap as a single muted string */
.sum-list .sum-supreme { display: block; font-size: 11px; color: var(--text-muted); line-height: 1.45; }

/* ============================================================
   Highscores page
   ============================================================ */
.hs-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.hs-filter-row .field { margin-bottom: 0; min-width: 170px; }
.hs-search-field { flex: 1 1 220px; }

/* vocation filter pills */
.hs-vocations { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hs-vocations button {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-sm); padding: 8px 13px; font-size: 12.5px; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.hs-vocations button i { font-size: 15px; }
.hs-vocations button:hover { color: var(--text-bright); border-color: var(--border-strong); }
.hs-vocations button.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, 0.08); }

/* ranked table — sits full-bleed inside its card (no card__body padding) */
.hs-table-card { padding: 0; overflow: hidden; }
.hs-table-card.is-loading .hs-table-wrap { opacity: 0.55; transition: opacity .15s; }
.hs-table-wrap { overflow-x: auto; }
.hs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hs-table thead th {
  text-align: left; padding: 12px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--text-muted); border-bottom: 1px solid var(--border-strong);
  white-space: nowrap; background: var(--bg-panel); position: sticky; top: 0;
}
.hs-table tbody td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.hs-table tbody tr:last-child td { border-bottom: none; }
.hs-table tbody tr:hover { background: var(--bg-raised); }
.hs-num { text-align: right; font-family: var(--font-mono); color: var(--text-primary-2); }
.hs-table thead th.hs-num { text-align: right; } /* numeric headers must line up over their right-aligned data */
.hs-value { color: var(--text-bright); font-weight: 500; }

.hs-rank-col { width: 66px; }
.hs-rank {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 7px; border-radius: 13px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  color: var(--text-muted); background: var(--bg-base);
}
.hs-rank--1 { color: #0e1014; background: linear-gradient(180deg, #f2e0a8, #d2ac52); font-weight: 700; }
.hs-rank--2 { color: #0e1014; background: linear-gradient(180deg, #e4e7ee, #aeb4c0); font-weight: 700; }
.hs-rank--3 { color: #1a120a; background: linear-gradient(180deg, #e0a86b, #bd7b41); font-weight: 700; }

.hs-name a { font-weight: 600; color: var(--text-primary); }
.hs-table tbody tr:hover .hs-name a { color: var(--gold-bright); }
.hs-world { color: var(--text-muted); }

/* delivery-task group filter pills (Market Tasks tab) */
.mkt-taskgroups { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px 0; }

/* condensed phone boards (GuildStats-style) on the earners/transfers cards: drop the vocation
   column (3rd on both) and tighten cells so name · level · numbers fit without sideways scroll */
@media (max-width: 560px) {
  .exp-card .hs-table thead th:nth-child(3), .exp-card .hs-table tbody td:nth-child(3) { display: none; }
  .exp-card .hs-table tbody td { padding: 7px 8px; font-size: 12.5px; }
  .exp-card .hs-table thead th { padding-left: 8px; padding-right: 8px; }
  .exp-card .hs-rank-col { width: 30px; }
}

/* GuildStats-style board accents: zebra rows, bold levels, green values, abbrev vocations */
.hs-table tbody tr:nth-child(even) { background: rgba(233, 238, 246, 0.02); }
.hs-table tbody tr:hover { background: var(--bg-raised); } /* re-assert after zebra so hover wins */
.hs-lvl { font-weight: 700; color: var(--text-bright); }
.hs-value { color: var(--positive); font-weight: 600; }
.hs-voc b { font-weight: 700; font-size: 12.5px; color: var(--text-primary); letter-spacing: .3px; }

.hs-voc { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); }
.hs-voc i { font-size: 15px; color: var(--text-muted-2); }
.hs-voc--knight i   { color: #d08f6e; }
.hs-voc--paladin i  { color: #9ec06b; }
.hs-voc--sorcerer i { color: #e07b6e; }
.hs-voc--druid i    { color: #5fbf93; }
.hs-voc--monk i     { color: var(--gold); }

.hs-empty { padding: 44px 16px; text-align: center; color: var(--text-faint); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.hs-empty i { font-size: 18px; }
/* is-hidden stays scoped per component on purpose (.wizard-panel animates instead of display:none) */
.hs-empty.is-hidden, .today-section.is-hidden { display: none; }

/* first-visit hint bar (wheel planner + character sheet) */
.wheel-hint { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 11px 14px;
  background: rgba(210,172,82,.06); border: 1px solid rgba(210,172,82,.3); border-radius: var(--radius);
  font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.wheel-hint[hidden] { display: none; }
.wheel-hint > i { color: var(--gold); font-size: 17px; flex: 0 0 auto; }
.wheel-hint b { color: var(--text-bright); font-weight: 600; }
.wheel-hint .btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.wheel-hint__close { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; padding: 2px; flex: 0 0 auto; }
.wheel-hint__close:hover { color: var(--text-bright); }
@media (max-width: 640px) { .wheel-hint { flex-wrap: wrap; } .wheel-hint .btn { margin-left: 26px; } }

/* ---- Guides index ---- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; text-decoration: none; transition: border-color .12s; }
.guide-card:hover { border-color: var(--gold); }
.guide-card h2 { font-size: 16px; font-weight: 700; color: var(--text-bright); }
.guide-card p { font-size: 13px; color: var(--text-muted); line-height: 1.6; flex: 1; }
.guide-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.guide-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-muted); background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.guide-tag i { font-size: 12px; }
.guide-tag--druid { color: #5fbf93; border-color: rgba(95,191,147,.4); }
.guide-card__meta { font-size: 12px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 4px; }
.guide-card__meta .chev { color: var(--gold); }
.guide-card--cta { border-style: dashed; }

/* ---- Imbuing calculator ---- */
/* picker (left rail): world select + group chips + imbuement list */
#imb-page { max-width: 1252px; margin: 0 auto; } /* 1200 tool column + the 26px side paddings — same centered rhythm as stamina */
.imb-layout { display: grid; grid-template-columns: minmax(280px, 336px) minmax(0, 1fr); gap: 18px; align-items: start; max-width: 1200px; }
.imb-picker { position: sticky; top: calc(var(--topbar-h) + 16px); overflow: hidden; }
.imb-picker__ctl { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; }
.imb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.imb-chip { font-family: var(--font-sans); cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); transition: border-color .12s, color .12s, background .12s; }
.imb-chip:hover { color: var(--text-bright); border-color: var(--border-strong); }
.imb-chip.is-active { background: rgba(210,172,82,.10); border-color: rgba(210,172,82,.45); color: var(--gold-bright); }
.imb-list { max-height: min(520px, calc(100vh - 320px)); overflow-y: auto; padding: 4px 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.imb-item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background .12s, border-color .12s; }
.imb-item:hover { background: rgba(233, 238, 246, 0.04); }
.imb-item.is-active { border-color: rgba(210,172,82,.45); background: rgba(210,172,82,.07); }
.imb-item img { width: 30px; height: 30px; image-rendering: pixelated; flex: 0 0 auto; }
.imb-item__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imb-item__name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; }
.imb-item.is-active .imb-item__name { color: var(--gold-bright); }
.imb-item__name i { color: var(--gold); font-size: 13px; }
.imb-item__desc { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* result card */
.imb-result { border-color: rgba(210,172,82,.45); }
.imb-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.imb-head img { width: 44px; height: 44px; padding: 5px; box-sizing: border-box; image-rendering: pixelated; flex: 0 0 auto;
  background: var(--bg-base); border: 1px solid rgba(210,172,82,.30); border-radius: 8px; }
.imb-head h2 { font-size: 16px; font-weight: 700; color: var(--text-bright); margin: 0; }
.imb-tabs { margin-left: auto; display: flex; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 2px; }
.imb-tabs button { font-family: var(--font-sans); cursor: pointer; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 5px; border: none; background: transparent; color: var(--text-muted); }
.imb-tabs button:hover { color: var(--text-bright); }
.imb-tabs button.is-active { background: rgba(210,172,82,.14); color: var(--gold-bright); }
.imb-result__body { padding: 16px 18px 18px; }
.imb-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.imb-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.imb-pill i { font-size: 14px; color: var(--text-faint); }
.imb-meta .imb-pill:first-child i { color: var(--gold); }
.imb-pill--gold { color: var(--gold-bright); background: rgba(210,172,82,.06); border-color: rgba(210,172,82,.35); }
.imb-pill--gold i { color: var(--gold); }
.imb-rows { display: flex; flex-direction: column; gap: 4px; }
.imb-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid transparent; }
.imb-row .mkt-sprite { width: 28px; height: 28px; image-rendering: pixelated; flex: 0 0 auto; }
.imb-row__n { color: var(--text-faint); min-width: 36px; font-family: var(--font-mono); font-size: 12px; flex: 0 0 auto; }
.imb-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.imb-row__name { color: var(--text-primary); font-size: 13px; }
.imb-row__sub { font-size: 11px; color: var(--text-faint); }
.imb-row__p { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; color: var(--text-bright); }
.imb-row.is-pick { border-color: rgba(210,172,82,.30); background: rgba(210,172,82,.04); }
.imb-row.is-pick .imb-row__p { color: var(--gold-bright); font-weight: 600; }
.imb-row.is-covered { opacity: .45; }
.imb-row.is-covered .imb-row__p { color: var(--text-faint); text-decoration: line-through; }
.imb-row--tok { border-color: rgba(210,172,82,.35); background: rgba(210,172,82,.05); }
.imb-row--tok .imb-row__p { color: var(--gold-bright); font-weight: 600; }
.imb-fee { display: flex; align-items: center; gap: 10px; padding: 10px 10px 4px; font-size: 13px; border-top: 1px solid var(--border-strong); margin-top: 6px; }
.imb-fee > i { width: 28px; text-align: center; color: var(--gold); font-size: 17px; flex: 0 0 auto; }
.imb-fee__name { flex: 1; color: var(--text-primary); }
.imb-fee__p { color: var(--text-bright); font-variant-numeric: tabular-nums; white-space: nowrap; }
.imb-totalbox { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(210,172,82,.11), rgba(210,172,82,.03)); border: 1px solid rgba(210,172,82,.30); border-radius: var(--radius-sm); padding: 12px 14px; }
.imb-totalbox__lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.imb-totalbox__hr { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.imb-totalbox__hr span { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.imb-totalbox__sum { font-size: 21px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.imb-note { margin-top: 8px; font-size: 11.5px; color: var(--text-faint); }
.imb-src { margin-top: 16px; font-size: 12px; color: var(--text-faint); }
.imb-src b { color: var(--text-muted); }
.imb-verdict { margin-top: 10px; display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-base); border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); padding: 9px 12px; }
.imb-verdict i { color: var(--text-muted); font-size: 15px; flex: 0 0 auto; }
.imb-verdict b { color: var(--text-bright); }
.imb-verdict--tok { border-color: rgba(210,172,82,.35); border-left-color: var(--gold); }
.imb-verdict--tok i { color: var(--gold); }
@media (max-width: 900px) {
  .imb-layout { grid-template-columns: 1fr; }
  .imb-picker { position: static; }
  /* the vertical list becomes a horizontal chip strip: a tall inner-scroll area at the top
     of the page swallows vertical swipes on touch — sideways swiping doesn't fight the page */
  .imb-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none;
    gap: 6px; padding: 6px 10px 10px; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .imb-list::-webkit-scrollbar { height: 5px; }
  .imb-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
  .imb-list::-webkit-scrollbar-track { background: transparent; margin: 0 10px; }
  /* edge fades signal "more this way" — toggled by JS (can-l / can-r) so a fade never
     covers a true end of the strip */
  .imb-listwrap { display: block; position: relative; }
  .imb-listwrap::before, .imb-listwrap::after { content: ""; position: absolute; top: 0; bottom: 8px; width: 36px;
    pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 2; }
  .imb-listwrap::before { left: 0; background: linear-gradient(90deg, var(--bg-card) 18%, transparent); }
  .imb-listwrap::after { right: 0; background: linear-gradient(270deg, var(--bg-card) 18%, transparent); }
  .imb-listwrap.can-l::before { opacity: 1; }
  .imb-listwrap.can-r::after { opacity: 1; }
  .imb-item { flex: 0 0 auto; border-color: var(--border); padding: 6px 10px; }
  .imb-item.is-active { border-color: rgba(210,172,82,.45); }
  .imb-item__desc { display: none; }
  .imb-item__name { white-space: nowrap; }
  .imb-item img { width: 26px; height: 26px; }
  .imb-head img { width: 28px; height: 28px; }
  .imb-tabs { margin-left: 0; }
  .imb-row__n { min-width: 28px; }
}

/* ---- Exercise calculator: option 1a layout in the site's card language ----
   Keeps the 1a structure (hairline settings ledger, weapon trio, big result
   anchored right) but dressed like the rest of TibiaForge: card shell, filled
   input wells, pill tabs/chips, gold-tinted hero. Old .tabs/.segmented/.toggle/
   .result-* classes stay in this file for other pages. */
#ex-page { max-width: 1332px; margin: 0 auto; } /* wider than .content--col: the 1a grid needs ~600px of form beside the rail */
.xhead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.xhead h1 { font-size: 22px; font-weight: 700; color: var(--text-bright); margin: 0; }
.xsub { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 22px; max-width: 62ch; }
/* mode switch: two prominent segments above the calculator — the primary choice on the page */
.xtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; margin: 0 0 16px; }
.xtabs button { text-align: left; padding: 11px 15px 10px; border-radius: var(--radius-sm); background: var(--bg-card);
  border: 1px solid var(--border); font-family: var(--font-sans); cursor: pointer; transition: border-color .12s, background .12s; }
.xtabs button b { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); transition: color .12s; }
.xtabs button b i { color: var(--text-faint); font-size: 16px; margin-right: 7px; vertical-align: -2px; transition: color .12s; }
.xtabs button small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-faint); margin-top: 3px; }
.xtabs button:hover { border-color: var(--border-strong); }
.xtabs button:hover b { color: var(--text-bright); }
.xtabs button.is-active { border-color: var(--gold); background: rgba(210,172,82,.08); }
.xtabs button.is-active b { color: var(--gold-bright); }
.xtabs button.is-active b i { color: var(--gold); }
/* the calculator is a standard card; result column divided off inside it */
.xgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 0 36px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 22px 20px; }
/* hairline settings ledger */
.xrow { display: grid; grid-template-columns: 168px 1fr; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--divider-hairline); }
.xrow--last { border-bottom: none; padding: 15px 0 8px; }
.xlabel { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted-2); }
/* inputs: the site's filled wells */
.xsel { width: 100%; max-width: 300px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 13.5px; font-family: var(--font-sans); padding: 9px 32px 9px 12px; outline: none;
  cursor: pointer; appearance: none; transition: border-color .12s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239AA0AC' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.xsel--loyal { width: 96px; font-family: var(--font-mono); font-size: 13px; }
.xsel:focus { border-color: var(--gold); }
.xnum { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-bright); font-family: var(--font-mono); font-size: 14px; padding: 8px 10px; outline: none;
  box-sizing: border-box; appearance: textfield; -moz-appearance: textfield; transition: border-color .12s; }
.xnum::-webkit-outer-spin-button, .xnum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xnum:focus { border-color: var(--gold); }
.xnum--lvl { width: 82px; }
.xnum--pct { width: 64px; }
.xinline { display: flex; align-items: center; gap: 10px; }
.xdim { font-size: 12px; color: var(--text-faint); }
/* weapon trio: chip buttons like the imbuing picker */
.xweaps { display: flex; gap: 8px; flex-wrap: wrap; }
.xweaps button { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; padding: 7px 12px 6px; transition: border-color .12s, background .12s; }
.xweaps button span { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-muted); transition: color .12s; }
.xweaps button small { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }
.xweaps button:hover { border-color: var(--border-strong); }
.xweaps button:hover span { color: var(--text-primary); }
.xweaps button.is-active { border-color: var(--gold); background: rgba(210,172,82,.08); }
.xweaps button.is-active span { color: var(--gold-bright); }
.xchecks { display: flex; gap: 26px; flex-wrap: wrap; }
.xchk { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer; }
.xchk input { accent-color: var(--gold); width: 15px; height: 15px; cursor: pointer; margin: 0; }
.xchk small { color: var(--text-faint); font-weight: 400; font-size: 12px; }
/* anchored result column: gold-tinted hero + hairline stat list */
.xres { border-left: 1px solid var(--border); padding-left: 36px; align-self: stretch; }
.xres__hero { margin-top: 14px; background: linear-gradient(135deg, rgba(210,172,82,.11), rgba(210,172,82,.03));
  border: 1px solid rgba(210,172,82,.30); border-radius: var(--radius-sm); padding: 14px 16px 15px; }
.xres__label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.xres__value { font-size: 46px; font-weight: 800; color: var(--gold-bright); line-height: 1.08; letter-spacing: -1px; margin: 8px 0 3px; font-variant-numeric: tabular-nums; }
.xres__sub { font-size: 12.5px; color: var(--text-muted); }
.xres__rule { margin: 16px 0 2px; }
.xstat { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--divider-hairline); }
.xstat:last-of-type { border-bottom: none; }
.xstat span { font-size: 12px; color: var(--text-muted); }
.xstat b { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--text-bright); }
.xstat b small { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.xtip { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-faint); margin: 14px 0 0; }
@media (max-width: 1240px) {
  .xgrid { grid-template-columns: 1fr; }
  .xres { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 6px; margin-top: 16px; }
  .xres__value { font-size: 40px; }
}
@media (max-width: 560px) {
  .xgrid { padding: 4px 14px 16px; }
  .xrow { grid-template-columns: 1fr; gap: 8px; align-items: start; padding: 12px 0; }
  .xweaps { gap: 8px; }
  .xres__value { font-size: 36px; }
}

/* ---- Loot split ---- */
/* shared centered-column shell for single-column tool pages (same rhythm as stamina/imbuing).
   width:100% matters on every centered page: .content is a flex item of .main, and margin:auto
   alone makes it FIT-CONTENT sized there — a wide-min-content child (e.g. the sheet's spell
   table) would blow the box past the viewport instead of scrolling inside its wrapper */
.content--col, #ls-page, #cs-page, #imb-page, #ex-page, #st-calc { width: 100%; }
.content--col, #ls-page { max-width: 1172px; margin: 0 auto; }
#cs-page { max-width: 1332px; margin: 0 auto; } /* character sheet: wider — paper-doll grid + embedded wheel */
.ls-input { width: 100%; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; resize: vertical; }
.ls-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ls-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 13px; display: flex; flex-direction: column; gap: 3px; }
.ls-chip span { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }
.ls-chip b { font-size: 15px; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.ls-chip--gold { border-color: rgba(210,172,82,.4); }
.ls-chip--gold b { color: var(--gold-bright); }
.ls-transfer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 4px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-muted); }
.ls-transfer:last-of-type { border-bottom: none; }
.ls-transfer b { color: var(--text-bright); }
.ls-transfer .ls-amt { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.ls-transfer .btn { font-family: var(--font-mono); font-size: 12px; }
.ls-hint { margin-top: 12px; font-size: 12px; color: var(--text-faint); }
.ls-hint i { font-style: italic; }
.ls-pays { color: #e0946e; }

/* ---- Stamina calculator ---- */
.st-row { gap: 18px; flex-wrap: wrap; align-items: end; }
.st-time { display: flex; align-items: center; gap: 6px; }
.st-time .input { width: 74px; text-align: center; }
.st-time span { color: var(--text-faint); font-weight: 700; }
.st-lines { margin-top: 14px; }
.st-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; font-size: 13px; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.st-line:last-child { border-bottom: none; }
.st-line b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.st-line--gold b { color: var(--gold-bright); }
.st-bar { position: relative; margin-top: 16px; height: 14px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.st-bar__fill { height: 100%; border-radius: 999px; transition: width .2s; }
.st-bar__fill--bonus, .st-bar__fill--full { background: linear-gradient(90deg, #8a6f2f, var(--gold)); }
.st-bar__fill--ok { background: #4f7d5c; }
.st-bar__fill--low { background: #9a6238; }
.st-bar__fill--out { background: #7d3f3a; }
.st-bar__mark { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.28); }
.st-bar__mark--bonus { background: rgba(233,206,134,.6); }
.st-zones { display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.st-zone { display: flex; gap: 10px; align-items: flex-start; }
.st-zone b { color: var(--text-bright); }
.st-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: 0 0 auto; }
.st-dot--bonus { background: var(--gold); }
.st-dot--ok { background: #4f9d6c; }
.st-dot--low { background: #d99a4a; }
.st-dot--out { background: #c05a52; }

/* world detail (?world=) quick links */
.wd-links { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); }
.wd-links .btn { text-decoration: none; }

.hs-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 14px; border-top: 1px solid var(--border); }
.hs-pager__info { font-size: 12px; color: var(--text-faint); }
.hs-pager__btns { display: flex; align-items: center; gap: 5px; }
.hs-page-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted);
  font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s;
}
.hs-page-btn:hover:not(:disabled) { color: var(--text-bright); border-color: var(--border-strong); }
.hs-page-btn.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, 0.08); }
.hs-page-btn:disabled { opacity: 0.4; cursor: default; }
.hs-page-gap { color: var(--text-faint); padding: 0 2px; }

/* small screens: hide the World column (table still scrolls if needed) */
@media (max-width: 680px) {
  .hs-table thead th:nth-child(4), .hs-table tbody td:nth-child(4) { display: none; }
  .hs-filter-row .field { min-width: 140px; }
}

/* ============ CHARACTER SEARCH ============ */
.cs-search { display: flex; gap: 10px; align-items: center; }
.cs-search .input { flex: 1; }
.cs-search .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; }

.cs-result .card { margin-top: 14px; }
.cs-msg { display: flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 14px; }
.cs-msg i { font-size: 18px; color: var(--gold); }
.cs-msg b { color: var(--text-bright); }
.cs-spin { animation: cs-spin 0.9s linear infinite; }
@keyframes cs-spin { to { transform: rotate(360deg); } }

.cs-head { display: flex; align-items: center; gap: 14px; padding: 18px; border-bottom: 1px solid var(--border); }
.cs-voc { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; justify-content: center; background: var(--bg-raised); border: 1px solid var(--border); }
.cs-voc i { font-size: 22px; }
.cs-head__name { font-size: 19px; font-weight: 700; color: var(--text-bright); }
.cs-head__sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); }
.cs-field { display: flex; flex-direction: column; gap: 3px; padding: 13px 18px; background: var(--bg-panel); }
.cs-field__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); }
.cs-field__v { font-size: 13.5px; color: var(--text-bright); }
.cs-comment { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); font-style: italic; white-space: pre-wrap; }

.cs-skills { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 18px; }
.cs-skill { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.cs-skill__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); }
.cs-skill__v { font-size: 15px; font-weight: 700; color: var(--text-bright); font-family: var(--font-mono); }
.cs-skills__none { font-size: 12.5px; color: var(--text-faint); display: inline-flex; align-items: center; gap: 7px; }

.cs-deaths { display: flex; flex-direction: column; }
.cs-death { display: flex; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cs-death:last-child { border-bottom: 0; }
.cs-death__when { flex: 0 0 160px; color: var(--text-faint); font-size: 12px; }
.cs-death__txt { color: var(--text-muted); }

.cs-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 18px; }
.cs-other { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 10px 13px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .12s, color .12s; }
.cs-other:hover { border-color: var(--gold); }
.cs-other__n { font-weight: 600; color: var(--text-bright); font-size: 13.5px; }
.cs-other:hover .cs-other__n { color: var(--gold-bright); }
.cs-other__meta { font-size: 11.5px; color: var(--text-faint); margin-top: 1px; }
.cs-other__lv { color: var(--text-muted); font-weight: 600; }
.cs-other__lv i { font-size: 12px; vertical-align: -1px; margin-right: 3px; }
.cs-vi--knight { color: #d08f6e; } .cs-vi--paladin { color: #9ec06b; } .cs-vi--sorcerer { color: #e07b6e; }
.cs-vi--druid { color: #5fbf93; } .cs-vi--monk { color: var(--gold); } .cs-vi--none { color: var(--text-faint); }
.cs-online { color: #5fbf93; font-weight: 600; }

@media (max-width: 680px) {
  .cs-death { flex-direction: column; gap: 2px; }
  .cs-death__when { flex-basis: auto; }
}

/* ============ EXP TRACKER (top experience earners) ============ */
.exp-card .card__head { gap: 9px; }
.exp-world { margin-left: auto; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px; color: var(--gold-bright); background: rgba(210, 172, 82, 0.10); border: 1px solid rgba(210, 172, 82, 0.35); border-radius: 999px; padding: 3px 11px; }
.exp-tabs { display: flex; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.exp-tabs button { padding: 7px 14px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.exp-tabs button:hover { color: var(--text-bright); border-color: var(--border-strong); }
.exp-tabs button.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, 0.08); }
.exp-status { padding: 28px 24px; color: var(--text-muted); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.55; }
.exp-status i { font-size: 19px; color: var(--gold); flex: 0 0 auto; }
.exp-status span { max-width: 64ch; }
.exp-status b { color: var(--text-bright); font-weight: 600; }
.exp-card .hs-name a { color: var(--text-primary); font-weight: 600; }
.exp-card .hs-name a:hover { color: var(--gold-bright); }
.exp-gain { color: #5fbf93; font-weight: 700; }
.exp-foot { padding: 10px 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-faint); }

/* world transfers */
.tf-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.tf-controls .exp-tabs { padding: 0; border-bottom: 0; }
.tf-controls .exp-tabs button i { font-size: 14px; margin-right: 3px; vertical-align: -2px; }
.tf-move { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; }
.tf-move b { color: var(--text-bright); font-weight: 700; }
.tf-move--out { color: #e0726e; }
.tf-move--in { color: #6fcf97; }
.tf-arrow { font-size: 15px; opacity: .75; }
.tf-date { color: var(--text-faint); font-size: 12px; font-family: var(--font-mono); white-space: nowrap; }

/* worlds + "today on Tibia" */
.today-section { margin-bottom: 16px; }
.today-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--border); }
.today-item { background: var(--bg-panel); padding: 15px 18px; display: flex; flex-direction: column; gap: 9px; }
.today-k { font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.today-v { display: flex; align-items: center; gap: 11px; }
.today-img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.today-img--ph { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px; color: var(--gold); }
.today-img--ph i { font-size: 20px; }
.today-name { font-size: 15px; font-weight: 700; color: var(--text-bright); }
.wd-controls { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.wd-controls .input { flex: 1; min-width: 0; max-width: 360px; }
.wd-count { font-size: 12px; white-space: nowrap; }
.wd-table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.wd-table th[data-sort]:hover { color: var(--text-bright); }
.wd-table th.is-sorted { color: var(--gold-bright); }
.wd-table th.is-sorted[data-dir="desc"]::after { content: " ↓"; }
.wd-table th.is-sorted[data-dir="asc"]::after { content: " ↑"; }
.wd-prem { display: inline-block; font-size: 9px; font-weight: 700; color: var(--gold-bright); border: 1px solid rgba(210,172,82,.4); border-radius: 3px; padding: 0 3px; vertical-align: 1px; }
.wd-off { color: var(--text-faint); }
.be { display: inline-flex; font-size: 15px; }
.be--green { color: #5fbf93; } .be--yellow { color: var(--gold-bright); } .be--off { color: var(--text-faint); }
.wd-pvp { font-size: 12.5px; }
.wd-pvp--openpvp, .wd-pvp--retroopenpvp { color: #e0a36e; }
.wd-pvp--optionalpvp { color: #6fcf97; }
.wd-pvp--hardcorepvp, .wd-pvp--retrohardcorepvp { color: #e0726e; }
.wd-xfer { font-size: 12.5px; color: var(--text-muted); text-transform: capitalize; }

/* guilds */
.guild-dirhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.guild-wsel { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.guild-wsel select { width: auto; }
.guild-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; padding: 16px 18px; }
.guild-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: left; transition: border-color .12s; }
.guild-card:hover { border-color: var(--border-strong); }
.guild-logo { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: #0e1014; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; color: var(--gold); }
.guild-logo img { width: 100%; height: 100%; object-fit: contain; }
.guild-logo i { font-size: 20px; }
.guild-logo--lg { width: 64px; height: 64px; } .guild-logo--lg i { font-size: 30px; }
.guild-card__b { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.guild-card__n { font-weight: 700; color: var(--text-bright); font-size: 14px; }
.guild-card__d { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.guild-forming { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--gold-bright); border: 1px solid rgba(210,172,82,.4); border-radius: 3px; padding: 0 4px; vertical-align: 1px; }
.guild-war { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #e0726e; border: 1px solid rgba(224,114,110,.4); border-radius: 3px; padding: 1px 4px; vertical-align: 2px; }
.guild-head { display: flex; align-items: center; gap: 16px; padding: 18px; }
.guild-head__b { flex: 1; min-width: 0; }
.guild-head__n { font-size: 20px; font-weight: 800; color: var(--text-bright); }
.guild-head__sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.guild-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.guild-back:hover { color: var(--gold-bright); }
.guild-detail .cs-grid { border-top: 1px solid var(--border); }
.guild-mtitle { font-size: 11px; color: var(--text-faint); font-style: italic; }
.guild-joined { font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); white-space: nowrap; }
.guild-off { color: var(--text-faint); }
.guild-on { background: rgba(95,191,147,0.04); }

/* ============ HOMEPAGE (news feed + search + rail peeks) ============ */
.home-hero { padding: 4px 0 20px; }
.home-hero__title { font-size: 25px; font-weight: 800; color: var(--text-bright); letter-spacing: -0.3px; }
.home-search { display: flex; align-items: center; gap: 10px; margin-top: 14px; max-width: 560px; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px 6px 6px 14px; transition: border-color .12s; }
.home-search:focus-within { border-color: var(--gold); }
.home-search > i { font-size: 18px; color: var(--text-faint); flex: 0 0 auto; }
.home-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text-bright); font-size: 14.5px; font-family: var(--font-sans); padding: 8px 0; }
.home-search input::placeholder { color: var(--text-faint); }
.home-search .btn { flex: 0 0 auto; }

.card-more { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--gold); }
.card-more:hover { color: var(--gold-bright); }

.home-peek { padding: 4px 0; }
.home-peek__row { display: flex; align-items: center; gap: 9px; padding: 8px 16px; border-bottom: 1px solid var(--border); transition: background .12s; }
.home-peek__row:last-child { border-bottom: 0; }
.home-peek__row:hover { background: var(--bg-raised); }
.home-peek__rank { flex: 0 0 18px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.home-peek__rank.r1 { color: var(--gold); } .home-peek__rank.r2 { color: #aeb4c0; } .home-peek__rank.r3 { color: #bd7b41; }
.home-peek__voc { font-size: 14px; flex: 0 0 auto; }
.home-peek__name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-bright); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-peek__row:hover .home-peek__name { color: var(--gold-bright); }
.home-peek__val { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.home-peek__val.is-gain { color: #5fbf93; }
.home-peek__world { color: var(--gold); font-weight: 600; }
.home-peek__msg { padding: 18px 16px; text-align: center; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.home-peek__msg b { color: var(--text-bright); }

.home-community { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.home-community .btn { width: 100%; margin-top: 12px; }

/* ============ CHARACTER SHEET — DAMAGE OUTPUT (DPS) ============ */
.sheet-dps { margin-bottom: 16px; }
.dps-hero { text-align: center; padding: 6px 0 14px; }
.dps-hero__num { font-size: 38px; font-weight: 800; color: var(--gold-bright); letter-spacing: -0.5px; font-variant-numeric: tabular-nums; line-height: 1; }
.dps-hero__unit { font-size: 18px; font-weight: 700; color: var(--gold); }
.dps-hero__lbl { font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; }
.dps-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.dps-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px; background: var(--bg-panel); }
.dps-tile__v { font-size: 16px; font-weight: 700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.dps-tile__k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-faint); }
.dps-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; font-size: 12.5px; color: var(--text-muted); }
.dps-meta__el { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.dps-meta__leech { display: inline-flex; align-items: center; gap: 5px; color: #5fbf93; font-weight: 600; }
.dps-meta__leech i { font-size: 14px; }
.dps-meta__leech--mp { color: #6aa6e0; }
.dps-meta__note { display: inline-flex; align-items: center; gap: 5px; color: var(--text-faint); font-size: 12px; }
.dps-empty { padding: 24px 16px; text-align: center; color: var(--text-faint); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.dps-empty i { font-size: 18px; }
.dps-vs { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.dps-vs label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.dps-vs input[type="range"] { flex: 1; min-width: 120px; max-width: 240px; accent-color: var(--gold); cursor: pointer; }
.dps-vs__pct { font-size: 12.5px; font-weight: 700; color: var(--text-bright); min-width: 34px; font-variant-numeric: tabular-nums; }
.dps-vs__arrow { color: var(--text-faint); }
.dps-vs__out { font-size: 15px; font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; }

/* ============ CHARACTER SHEET — SPELL DAMAGE ============ */
.sheet-spells { margin-bottom: 16px; }
.spell-mp { font-size: 12.5px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.spell-mp b { color: var(--gold-bright); font-size: 14px; font-variant-numeric: tabular-nums; }
.spell-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); margin: 18px 0 6px; }
.spell-table th, .spell-table td { font-size: 12.5px; }
.spell-name { display: flex; align-items: center; gap: 8px; }
.spell-name__n { font-weight: 600; color: var(--text-bright); }
.spell-words { font-size: 11px; color: var(--text-faint); font-style: italic; }
.spell-dmg { color: var(--gold-bright); font-weight: 700; }
.spell-locked { opacity: 0.42; }
.spell-locked .spell-dmg { color: var(--text-muted); }
.elem-ico--heal { display: inline-flex; align-items: center; justify-content: center; background: none; color: #5fbf93; }
.elem-ico--heal i { font-size: 13px; }

/* ============ SPELLS LIBRARY ============ */
.sp-count { font-size: 12px; color: var(--text-faint); margin: 4px 2px 12px; }
.spell-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.spell-card { background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: row; align-items: stretch; gap: 12px; }
.spell-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.spell-card--attack { border-left-color: #e07b6e; }
.spell-card--healing { border-left-color: #5fbf93; }
.spell-card--support { border-left-color: var(--gold); }
.spell-card__top { display: flex; align-items: center; gap: 11px; }
.spell-card__el { flex: 0 0 auto; position: relative; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.spell-card__el .elem-ico { width: 20px; height: 20px; }
.spell-ico { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.spell-anim { flex: 0 0 auto; align-self: flex-end; width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; background: #0e1014; border: 1px solid var(--border); border-radius: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,0.4); }
.spell-card__el--healing { color: #5fbf93; } .spell-card__el--support { color: var(--gold); } .spell-card__el--attack { color: #e07b6e; }
.spell-card__el i { font-size: 17px; }
.spell-card__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.spell-card__name { font-weight: 700; color: var(--text-bright); font-size: 14px; }
.spell-card__words { font-size: 11.5px; color: var(--gold); font-family: var(--font-mono); }
.spell-card__group { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); }
.spell-card__group--attack { color: #e07b6e; } .spell-card__group--healing { color: #5fbf93; } .spell-card__group--support { color: var(--gold-bright); }
.spell-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 8px; }
.sp-chip i { font-size: 12px; color: var(--text-faint); }
.sp-chip--prem { color: var(--gold-bright); border-color: rgba(210, 172, 82, 0.35); }
.sp-chip--rune { color: #9a86d0; }
.sp-chip--power { color: #e58a54; border-color: rgba(229, 138, 84, 0.4); }
.sp-chip--power i { color: inherit; }
.spell-card__voc { font-size: 11.5px; color: var(--text-faint); display: flex; align-items: center; gap: 5px; }
.spell-card__voc i { font-size: 12px; }
.spell-card__desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }

/* ============================================================
   Character sheet
   ============================================================ */
/* level + base-skill inputs */
.sheet-basics { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.sheet-basic { display: flex; flex-direction: column; gap: 4px; }
.sheet-basic span { font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); }
.sheet-basic .input { padding: 7px 9px; font-family: var(--font-mono); text-align: right; }

/* two-column shell: paper-doll + stats */
.sheet-layout { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.sheet-layout > .card { margin-top: 0; } /* drop the .card + .card sibling margin so both columns top-align; stretch then makes them equal height */
@media (max-width: 900px) { .sheet-layout { grid-template-columns: 1fr; } }

/* save & share build toolbar */
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.sheet-action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--gold); border: 1px solid var(--gold); color: #1a1410; font-size: 12px; font-weight: 700; cursor: pointer; }
.sheet-action:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.sheet-action.is-done { background: #3fae6a; border-color: #3fae6a; color: #fff; }
.sheet-action--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-muted); font-weight: 600; }
.sheet-action--ghost:hover { background: var(--bg-base); color: var(--text-bright); border-color: var(--border-strong); }
.sheet-action[disabled] { opacity: .6; cursor: default; }
/* character importer */
.sheet-import { margin-bottom: 12px; }
.sheet-import__row { display: flex; gap: 8px; }
.sheet-import__row .input { flex: 1; min-width: 0; }
.sheet-import__row .sheet-action { flex: 0 0 auto; }
.sheet-import__status { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-top: 6px; }
.sheet-import__status:empty { display: none; }
.sheet-import__status.is-ok { color: #6fcf97; }
.sheet-import__status.is-err { color: #e0726e; }
.sheet-import__status.is-busy { color: var(--text-muted); }
.sheet-import__status b { color: var(--text-bright); }
.sheet-import__status .spin { display: inline-block; animation: tf-spin 0.8s linear infinite; }
@keyframes tf-spin { to { transform: rotate(360deg); } }

/* paper-doll — slots laid out like the in-game inventory */
.paper-doll {
  display: grid; gap: 10px; justify-content: center; margin: 4px auto 0;
  grid-template-columns: repeat(3, 78px);
  grid-template-areas: "amu hel ." "lh arm rh" "rng leg amm" ". boo .";
}
.slot {
  width: 78px; height: 78px; border-radius: var(--radius-sm);
  background: var(--bg-base); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; color: var(--text-faint); font-family: var(--font-sans);
  transition: border-color .12s, color .12s, background .12s, transform .12s;
}
.slot:hover { border-color: var(--gold); color: var(--text-muted); background: var(--bg-raised); }
.slot__add { font-size: 17px; opacity: .55; }
.slot__name { font-size: 10.5px; font-weight: 600; }
.slot--pulse { border-color: var(--gold); transform: scale(.94); }
.slot.is-filled { border-color: var(--gold); background: var(--bg-raised); gap: 3px; padding: 6px; color: var(--text-primary); }
.slot.is-filled:hover { background: var(--bg-card); border-color: var(--gold-bright); }
.slot__type { font-size: 9px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--text-faint); }
.slot__item { font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--gold-bright); }
.slot__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.item-ico { max-width: 100%; max-height: 100%; image-rendering: pixelated; object-fit: contain; }
.slot.is-filled .slot__item { font-size: 9.5px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-fb { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); font-weight: 700; }
.slot__icon .icon-fb { width: 32px; height: 32px; font-size: 14px; }
/* picker row icon */
.picker-item__ico { width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.picker-item__ico .item-ico { image-rendering: pixelated; }
.picker-item__ico .icon-fb { width: 30px; height: 30px; font-size: 12px; border-radius: var(--radius-sm); }
.sheet-gear-note { font-size: 11.5px; margin-top: 16px; line-height: 1.5; text-align: center; }
.stat-approx { font-size: 13px; color: var(--text-faint); cursor: help; vertical-align: -1px; }
.stat-info { font-size: 12.5px; color: var(--text-faint); cursor: help; vertical-align: -1px; margin-left: 1px; }
.stat-info:hover, .stat-info:focus-visible { color: var(--gold-bright); outline: none; }
/* stat formula/calculation tooltip */
.stat-tip { position: fixed; z-index: 80; width: max-content; min-width: 280px; max-width: min(420px, calc(100vw - 16px)); background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, .6); padding: 13px 15px; pointer-events: none; }
.stat-tip.is-hidden { display: none; }
.stat-tip__label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); margin: 12px 0 5px; }
.stat-tip__label:first-child { margin-top: 0; }
/* JetBrains Mono second: per-glyph fallback for the math brackets Inter lacks (⌊⌋⌈⌉) —
   keeps Firefox/DirectWrite out of its slow system-font fallback scan */
.stat-tip__f { font-size: 13px; color: var(--text-primary); line-height: 1.55; font-family: "Inter", "JetBrains Mono", sans-serif; }
.stat-tip__c { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); line-height: 1.7; word-break: break-word; }
.stat-tip__res { color: var(--gold-bright); font-weight: 700; }
.stat-tip__n { display: flex; gap: 6px; font-size: 11px; color: var(--text-faint); margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--border); font-style: italic; line-height: 1.5; }
.stat-tip__n i { font-style: normal; color: #d8b25a; margin-top: 1px; }

/* item picker modal */
.picker-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.picker-modal.is-hidden { display: none; }
.picker-overlay { position: absolute; inset: 0; background: rgba(8, 9, 12, .66); }
.picker-card { position: relative; width: 100%; max-width: 460px; max-height: 80vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; }
.picker-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.picker-head i { color: var(--gold); font-size: 16px; }
.picker-head h3 { font-size: 14px; font-weight: 600; color: var(--text-bright); }
.picker-close { margin-left: auto; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px; }
.picker-close:hover { color: var(--gold-bright); }
.picker-search { width: calc(100% - 32px); margin: 12px 16px 8px; }
.picker-list { overflow-y: auto; padding: 0 8px 12px; }

/* picker filters (weapon type / hands) */
.picker-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; padding: 0 16px 11px; }
.picker-filters:empty { display: none; }
.picker-filter-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.picker-filter-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); margin-right: 2px; }
.picker-filter { padding: 3px 10px; border-radius: 999px; background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; cursor: pointer; }
.picker-filter:hover { color: var(--text-bright); border-color: var(--border-strong); }
.picker-filter.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, .1); }
.picker-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; color: var(--text-primary); font-family: var(--font-sans); }
.picker-item:hover { background: var(--bg-raised); }
.picker-item.is-equipped { background: rgba(210, 172, 82, .09); box-shadow: inset 2px 0 0 var(--gold); }
.picker-item__main { flex: 1; min-width: 0; }
.picker-item__name { font-size: 13px; font-weight: 600; display: block; }
.picker-item__stats { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-item__lvl { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.picker-item__lvl.is-over { color: #e0727b; }
.picker-item.picker-remove { color: #e0727b; border-bottom: 1px solid var(--border); border-radius: 0; }
.picker-item.picker-remove i { font-size: 15px; }
.picker-empty { padding: 22px 16px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* imbuement pips on a slot */
.slot-pips { display: flex; gap: 3px; margin-top: 2px; }
.imbue-pip { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: var(--text-faint); background: var(--bg-base); border: 1px solid var(--border); overflow: hidden; }
.slot:hover .imbue-pip { border-color: var(--border-strong); }
.imbue-pip:hover { border-color: var(--gold) !important; color: var(--gold-bright); }
.imbue-pip.is-set { border-color: var(--gold); }
.imbue-pip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* imbuement rows in the picker (icon + name + 3 tier buttons) */
.imbue-row { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius-sm); }
.imbue-row:hover { background: var(--bg-raised); }
.imbue-row.is-equipped { background: rgba(210, 172, 82, .09); box-shadow: inset 2px 0 0 var(--gold); }
.imbue-row__icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.imbue-row__main { flex: 1; min-width: 0; }
.imbue-row__name { font-size: 13px; font-weight: 600; color: var(--text-primary); display: block; }
.imbue-row__eff { font-size: 11px; color: var(--text-muted); display: block; margin-top: 1px; text-transform: capitalize; }
.imbue-row__tiers { display: flex; gap: 4px; flex: 0 0 auto; }
.imbue-tier { min-width: 42px; padding: 5px 6px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; cursor: pointer; }
.imbue-tier:hover { color: var(--text-bright); border-color: var(--border-strong); }
.imbue-tier.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, .1); }

/* wheel-of-destiny panel on the character sheet */
.sheet-wheel { margin-top: 16px; }
.wheel-frame { width: 100%; height: 1100px; border: 0; display: block; border-radius: var(--radius-sm); background: var(--bg-card); }

/* embedded planner: wheel.html?embed rendered inside the character sheet — strip the page chrome */
.is-embed .sidebar, .is-embed .topbar, .is-embed .nav-scrim { display: none !important; }
.is-embed .app { display: block; }
.is-embed .main { width: 100%; min-width: 0; }
.is-embed .content { padding: 14px; }
.is-embed .page-head, .is-embed .footnote, .is-embed .site-footer { display: none; }
/* wheel embed only (page has #wheel-root): its vocation is driven by the host character sheet */
.is-embed:has(#wheel-root) .field:has(#voc-tabs) { display: none; }
/* read-only wheel embed (hunting-guide viewer): show only the allocation (wheel + gems) and the
   resulting bonuses (build summary) — hide the level/points/quick-budget row, the share-code panel
   and the per-cell point editor. Interaction is already blocked by the host sheet. */
.is-embed.is-readonly:has(#wheel-root) .top-row,
.is-embed.is-readonly:has(#wheel-root) .selected-panel { display: none !important; }
/* read-only member build (guide viewer) = minimum level + recommended gear (with imbuements) only.
   Strip the whole stat analysis, the base-skill grid (keep just Level), stances, the vocation picker
   and the embedded wheel card — the wheel is drawn compactly by the host page (see .hgv-member-wheel).
   A reader sees a clean loadout, not the full character-analysis tool. */
.is-readonly.is-compact:has(#paper-doll) .field:has(#voc-tabs),
.is-readonly.is-compact:has(#paper-doll) .field:has(#stance-controls),
.is-readonly.is-compact:has(#paper-doll) .field:has(#sheet-basics) > label,
.is-readonly.is-compact:has(#paper-doll) .sheet-basic:not(:has([data-field="level"])),
.is-readonly.is-compact:has(#paper-doll) .sheet-stats,
.is-readonly.is-compact:has(#paper-doll) .sheet-wheel,
.is-readonly:has(#paper-doll) .field > label > .muted { display: none; }
.is-readonly.is-compact:has(#paper-doll) .sheet-layout { display: block; }               /* gear full width */
.is-readonly.is-compact:has(#paper-doll) .sheet-basics { display: block; }               /* single Level cell, not a grid */
.is-readonly.is-compact:has(#paper-doll) .sheet-basic { max-width: 160px; }

/* in-page compact wheel for a guide member (replaces the wheel iframe) */
.hgv-member-wheel { margin-top: 6px; }
.hgv-member-wheel:empty { display: none; }
.hgv-member-wheel__h { font-size: 13px; font-weight: 700; color: var(--text-bright); margin: 4px 0 10px; }
.hgv-member-wheel .wod-build { max-width: 400px; }
/* character.html?embed inside the hunting-guide editor/viewer (page has #paper-doll): drop the
   importer + share/reset actions; the guide owns save/share and each member picks their own vocation */
.is-embed:has(#paper-doll) .sheet-import,
.is-embed:has(#paper-doll) .sheet-actions { display: none; }
.is-embed:has(#paper-doll) .content { padding: 0; }
/* readonly viewer: show the build but make every control inert */
.is-readonly #paper-doll .slot, .is-readonly .imbue-pip, .is-readonly #voc-tabs button,
.is-readonly #sheet-basics input, .is-readonly #stance-controls, .is-readonly #dps-target,
.is-readonly .wizard-toggle, .is-readonly .sheet-wheel { pointer-events: none; }
.is-readonly #sheet-basics input { background: transparent; border-color: transparent; -moz-appearance: textfield; appearance: textfield; }
.is-readonly #sheet-basics input::-webkit-outer-spin-button,
.is-readonly #sheet-basics input::-webkit-inner-spin-button { display: none; }
.is-readonly .sheet-gear-note { display: none; }
.is-readonly .wizard-toggle, .is-readonly #wizard-panel { display: none; } /* wizard is an authoring tool */
/* compact (hunting-guide member view): equipment + resistances/defenses + wheel only.
   Drops the full character analysis — DPS estimator, spell-damage table, and the offensive &
   damage-reduction stat columns — keeping just what a guide reader needs. */
.is-compact .sheet-dps, .is-compact .sheet-spells { display: none; }
.is-compact .stats-grid { grid-template-columns: 1fr; }
.is-compact .stats-col:not(:first-child) { display: none; }
.is-compact .stats-col__title { display: none; }
#wheel-status.is-ok { color: var(--gold-bright); border-color: var(--gold); }
#wheel-status.is-bad { color: #e0796f; border-color: rgba(224, 121, 111, .5); }
.wheel-load { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wheel-load .input { flex: 1; min-width: 220px; font-family: var(--font-mono); font-size: 12.5px; }
.wheel-contrib { margin-top: 12px; }
.wheel-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wheel-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: var(--bg-base); border: 1px solid var(--border); font-size: 12px; }
.wheel-chip > span:not([class]) { color: var(--text-muted); }
.wheel-chip b { color: var(--gold-bright); font-family: var(--font-mono); }
.wheel-chip.is-vuln b { color: #e0796f; }
.wheel-chip.is-muted { opacity: .62; }
.wheel-chip.is-muted b { color: var(--text-bright); }
.wheel-contrib-note { font-size: 11.5px; margin: 9px 0 0; }

/* stance + potion toggles (character basics card) */
.stance-controls { display: flex; flex-direction: column; gap: 8px; }
.stance-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stance-group__label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); width: 60px; flex: 0 0 auto; }
.stance-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; cursor: pointer; }
.stance-btn:hover { color: var(--text-bright); border-color: var(--border-strong); }
.stance-btn.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, .1); }
.stance-ico { position: relative; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.stance-ico i { font-size: 16px; color: inherit; }
.stance-ico-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }

/* stats panel */
.sheet-stats .card__head { display: flex; align-items: center; gap: 9px; }
.sheet-demo-tag { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gold); background: rgba(210, 172, 82, .1); border: 1px solid rgba(210, 172, 82, .3); border-radius: 5px; padding: 2px 7px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; }
@media (max-width: 1000px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 18px 24px; } }
@media (max-width: 620px) { .stats-grid { grid-template-columns: 1fr; gap: 18px; } }

/* mobile touch polish: comfortable tap targets + 16px inputs (stops iOS auto-zoom on focus) */
@media (max-width: 620px) {
  input, select, textarea { font-size: 16px !important; } /* override smaller per-input sizes; <16px makes iOS zoom on focus */
  #sheet-basics input { height: 42px; }
  #voc-tabs button { min-height: 42px; }
  .sheet-action { padding: 9px 13px; }
  .stance-btn, .wiz-el, .picker-item, .wiz-chip { min-height: 38px; }
  .sheet-actions { justify-content: stretch; }
  .sheet-action { flex: 1; justify-content: center; }
}
.stats-col__title { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-faint); padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-strong); }
.stat-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.stat-label { font-size: 13px; color: var(--text-primary); }
.stat-value { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--text-bright); white-space: nowrap; }
.stat-row--vuln .stat-value { color: #e0727b; }

/* element colour-coding + per-element icons (Damage-reduction rows + wheel resist chips) */
.elem-ico { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; }
.elem-physical  { color: #c6c9d0; }
.elem-fire      { color: #ff6f43; }
.elem-earth     { color: #5fbf52; }
.elem-energy    { color: #8e7bf0; }
.elem-ice       { color: #57c4ea; }
.elem-holy      { color: #f1cf52; }
.elem-death     { color: #8e9198; }
.elem-lifedrain { color: #d65f6e; }
.elem-heal      { color: #57d6a0; }
.stat-src[class*="elem-"] b { color: inherit; }   /* element-tinted source amounts (attack damage split) */
.stat-sources { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; color: var(--text-muted); }
.stat-src { font-size: 11px; }

/* gear special-effects list (perks that don't fold into a stat number) */
.gear-effects:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.gear-effects__title { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 8px; }
.gear-effects__title .muted { font-weight: 400; }
.gear-effects__list { display: flex; flex-wrap: wrap; gap: 6px; }
.gear-effect { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 9px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); font-size: 11.5px; }
.gear-effect b { color: var(--text-bright); font-weight: 600; }
.gear-effect__src { color: var(--text-faint); font-size: 10.5px; }

/* HP / Mana bars (top of the Defensive column) — Tibia-client style */
.vital-bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.vital { display: flex; align-items: center; gap: 8px; }
.vital__ico { font-size: 16px; flex: 0 0 auto; }
.vital--hp .vital__ico { color: #ec4a4f; }
.vital--mp .vital__ico { color: #4f8ff0; }
.vital__track { position: relative; flex: 1; height: 21px; border-radius: 5px; background: #0b0d11; border: 1px solid var(--border-strong); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
.vital__fill { position: absolute; inset: 0; }
.vital--hp .vital__fill { background: linear-gradient(180deg, #f3595e 0%, #d83a40 46%, #ad272d 100%); }
.vital--mp .vital__fill { background: linear-gradient(180deg, #5ea4f3 0%, #3f7fda 46%, #2a5cae 100%); }
.vital__fill::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0)); }
.vital__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .75); letter-spacing: .3px; font-variant-numeric: tabular-nums; }

/* defense wizard (auto-complete defensive gear + protection imbues) */
.wizard-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.wizard-toggle:hover { color: var(--gold-bright); border-color: var(--border-strong); }
.wizard-toggle.is-active { color: var(--gold-bright); border-color: var(--gold); background: rgba(210, 172, 82, .1); }
.wizard-panel { box-sizing: border-box; overflow: hidden; max-height: 900px; opacity: 1; margin-bottom: 14px; padding: 13px; border: 1px solid rgba(210, 172, 82, .34); border-radius: var(--radius); background: rgba(210, 172, 82, .045); transition: max-height .3s ease, opacity .22s ease, margin-bottom .3s ease, padding .3s ease; }
.wizard-panel.is-hidden { max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; }
.wizard-panel__intro { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0 0 11px; }
.wizard-panel__intro b { color: var(--text-bright); }
.wizard-els { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-el { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); font-size: 12px; cursor: pointer; }
.wiz-el:hover { border-color: var(--border-strong); }
.wiz-el.is-w1 { border-color: var(--border-strong); background: var(--bg-raised); }
.wiz-el.is-w2 { border-color: var(--gold); background: rgba(210, 172, 82, .12); }
.wiz-el.is-w3 { border-color: var(--gold-bright); background: rgba(210, 172, 82, .2); color: var(--text-bright); }
.wiz-el__w { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .35); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.wiz-el.is-w1 .wiz-el__w { color: var(--text-muted); }
.wizard-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.wizard-result { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; }
.wizard-result:empty { display: none; }
.wiz-res-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; font-size: 12px; }
.wiz-res-row__k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); width: 42px; }
.wiz-res { font-weight: 600; font-variant-numeric: tabular-nums; }
.wiz-empty { font-size: 11px; margin-top: 2px; }
.wiz-opt { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
.wiz-opt input { accent-color: var(--gold); }
.wiz-info { color: var(--text-faint); font-size: 13px; cursor: help; vertical-align: -1px; margin-left: 1px; }
.wiz-info:hover, .wiz-info:focus-visible { color: var(--gold-bright); outline: none; }
.wiz-pieces { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.wiz-piece { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); }
.wiz-piece.is-pinned { border-color: var(--gold); color: var(--gold-bright); }
.wiz-piece__x { display: inline-flex; padding: 1px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: 3px; }
.wiz-piece__x:hover { color: #ec4a4f; background: rgba(236, 74, 79, .12); }
.wiz-piece__pin { color: var(--gold); font-size: 13px; }
.wizard-lists { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px; }
.wiz-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wiz-list__k { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); width: 60px; flex: 0 0 auto; }
.wiz-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.wiz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); font-size: 11px; color: var(--text-muted); cursor: pointer; }
.wiz-chip:hover { color: var(--text-bright); border-color: var(--border-strong); }
.wiz-chip--pin { border-color: rgba(210, 172, 82, .4); color: var(--gold-bright); }
.wiz-search { margin-top: 2px; }
#wizard-search { box-sizing: border-box; width: 100%; padding: 6px 9px; border-radius: var(--radius-sm); background: var(--bg-base); border: 1px solid var(--border); color: var(--text-primary); font-size: 12px; font-family: inherit; }
#wizard-search:focus { outline: none; border-color: var(--gold); }
.wiz-search-results { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; }
.wiz-search-results:empty { display: none; }
.wiz-sr { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-base); font-size: 12px; }
.wiz-sr__n { color: var(--text-primary); }
.wiz-sr__b { display: inline-flex; gap: 5px; flex: 0 0 auto; }
.wiz-sr__b button { padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--text-muted); font-size: 10.5px; cursor: pointer; }
.wiz-sr__b button:hover { color: var(--gold-bright); border-color: var(--gold); }
.stat-src b { font-family: var(--font-mono); color: var(--text-primary-2); font-weight: 600; }
.stat-sources--none { font-size: 11px; color: var(--text-faint); margin-top: 3px; }

/* wheel-embed teaser (placeholder until the interactive mount lands) */
.sheet-wheel-teaser { margin-top: 16px; }
.sheet-wheel-teaser .card__body { display: flex; align-items: center; gap: 16px; }
.sheet-wheel-teaser__svg { width: 44px; height: 44px; flex: none; }
.sheet-wheel-teaser__svg svg { width: 100%; height: 100%; }
.sheet-wheel-teaser__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sheet-wheel-teaser__body b { color: var(--text-bright); font-size: 14px; }
.sheet-wheel-teaser__body span { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 560px) { .sheet-wheel-teaser .card__body { flex-wrap: wrap; } .sheet-wheel-teaser .btn { width: 100%; } }

/* ============ Market ============ */
.mkt-controls { flex-wrap: wrap; gap: 12px; }
.mkt-filters { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.mkt-sel, .mkt-search { background: var(--bg-base); color: var(--text-bright); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; padding: 7px 10px; }
.mkt-sel { min-width: 120px; }
#mkt-server { min-width: 172px; } /* room for the "· 3h ago ⚠" freshness suffix */
.mkt-search { min-width: 190px; }
/* stale-world warning (selected server's snapshot is old) */
.mkt-stale { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #e0b74a;
  background: rgba(240,185,15,.07); border: 1px solid rgba(240,185,15,.28); border-radius: var(--radius-sm);
  padding: 8px 11px; margin: 10px 6px 2px; }
.mkt-stale i { font-size: 15px; flex: 0 0 auto; }
.mkt-stale b { color: var(--text-bright); }
/* Transfer tab: swap-worlds button + savings % chip */
.mkt-swapbtn { background: var(--bg-base); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1; padding: 7px 9px; cursor: pointer; transition: color .12s, border-color .12s; }
.mkt-swapbtn:hover { color: var(--gold); border-color: var(--border-strong); }
.mkt-savepct { font-size: 10.5px; font-weight: 700; color: #5fbf93; background: rgba(95,191,147,.12); padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
/* Transfer: full-width "instant profit" flip table */
.mkt-tarb { margin: 4px 6px 14px; padding: 10px 12px 4px; background: rgba(95,191,147,.05); border: 1px solid rgba(95,191,147,.22); border-radius: var(--radius-sm); }
.mkt-tarb__sub { font-size: 12px; color: var(--text-faint); line-height: 1.5; margin: 2px 2px 10px; }
.mkt-tdepth { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.mkt-tdepth .cs-spin { color: var(--text-faint); font-size: 13px; }
.mkt-sel:focus, .mkt-search:focus { outline: none; border-color: var(--gold); }
.mkt-body { padding: 4px; }
.mkt-status { padding: 30px 24px; color: var(--text-muted); font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 10px; line-height: 1.55; text-align: center; }
.mkt-status i { font-size: 19px; color: var(--gold); flex: 0 0 auto; }
.mkt-status b { color: var(--text-bright); font-weight: 600; }
.mkt-note { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; padding: 10px 14px; margin: 6px 6px 10px; background: rgba(210,172,82,0.05); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mkt-note i { color: var(--gold); margin-top: 1px; }
.mkt-note b { color: var(--text-bright); }

/* item cell + table */
.mkt-table td, .mkt-table th { vertical-align: middle; }
.mkt-name-col { min-width: 180px; }
.mkt-th { cursor: pointer; user-select: none; white-space: nowrap; }
.mkt-th:hover { color: var(--gold); }
.mkt-sortic { font-size: 12px; color: var(--gold); }
.mkt-item { display: flex; flex-direction: row; align-items: center; gap: 9px; text-decoration: none; }
.mkt-item__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
.mkt-item__n { color: var(--text-bright); font-weight: 500; font-size: 13.5px; }
.mkt-item:hover .mkt-item__n { color: var(--gold); }
.mkt-item__c { color: var(--text-faint); font-size: 11px; }
.mkt-sprite { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; background: linear-gradient(150deg, #191d25, #0d0f13); border: 1px solid var(--border); border-radius: 5px; padding: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.mkt-detail-sprite { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; background: linear-gradient(150deg, #191d25, #0d0f13); border: 1px solid var(--border); border-radius: 6px; padding: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.mkt-up { color: #5fbf93; font-weight: 600; }
.mkt-down { color: #e07b6e; font-weight: 600; }
.mkt-foot { padding: 10px 14px; font-size: 12px; color: var(--text-faint); }
.mkt-foot b { color: var(--text-muted); }
.mkt-more { padding: 4px 6px 10px; }
.mkt-more__h { font-size: 12px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .5px; margin: 6px 8px; }
.mkt-more__list { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt-more__list a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-base); }
.mkt-more__list a:hover { color: var(--gold); border-color: var(--gold); }

/* movers */
.mkt-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 6px 6px; }
.mkt-movers__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; margin: 4px 2px 8px; }
@media (max-width: 800px) { .mkt-movers { grid-template-columns: 1fr; } }

/* item detail */
.mkt-detail-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 8px 12px; border-bottom: 1px solid var(--border); }
.mkt-back { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); text-decoration: none; }
.mkt-back:hover { color: var(--gold); }
.mkt-detail-title h2 { margin: 0; font-size: 18px; color: var(--text-bright); }
.mkt-detail-title .mkt-item__c { font-size: 12px; }
.mkt-days { margin-left: auto; }
.mkt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 14px 8px; }
.mkt-stat { display: flex; flex-direction: column; gap: 3px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; }
.mkt-stat__l { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; }
.mkt-stat__v { font-size: 16px; font-weight: 600; color: var(--text-bright); }
.mkt-chart-wrap { padding: 8px; position: relative; }
.mkt-chart { width: 100%; height: auto; display: block; cursor: crosshair; }
/* hover read-out: a vertical hairline + snap dots (driven by JS) and an HTML tooltip pinned above the plot */
.mkt-hair { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.mkt-hdot { stroke: var(--bg-card); stroke-width: 1.6; pointer-events: none; }
.mkt-hdot--sell { fill: var(--gold-bright); }
.mkt-hdot--buy { fill: #6aa6e0; }
.mkt-chart-tip { position: absolute; top: 6px; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 1px;
  background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,.4); padding: 6px 9px; font-size: 12px; white-space: nowrap; }
.mkt-tip-d { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 1px; }
.mkt-tip-r { display: flex; justify-content: space-between; gap: 12px; color: var(--text-muted); }
.mkt-tip-r b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.mkt-tip-r--sell { color: var(--gold-bright); }
.mkt-tip-r--buy { color: #6aa6e0; }
/* Browser category filter pills */
.mkt-catbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 6px 4px; }
.mkt-catpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-muted);
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: border-color .12s, color .12s; }
.mkt-catpill:hover { color: var(--text-bright); border-color: var(--border-strong); }
.mkt-catpill.is-active { color: var(--text-bright); border-color: var(--gold); background: rgba(210,172,82,.08); }
.mkt-catpill__n { font-size: 10.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mkt-catpill.is-active .mkt-catpill__n { color: var(--gold); }
.mkt-catpill--wpn.is-active { border-color: #e0846e; background: rgba(224,132,110,.1); }
.mkt-catpill--arm.is-active { border-color: #6aa6e0; background: rgba(106,166,224,.1); }
.mkt-catpill--jwl.is-active { border-color: #b98ce0; background: rgba(185,140,224,.1); }
.mkt-catpill--con.is-active { border-color: #5fbf93; background: rgba(95,191,147,.1); }
.mkt-catpill--val.is-active { border-color: var(--gold); background: rgba(210,172,82,.1); }
.mkt-catpill--cre.is-active { border-color: #d99a4a; background: rgba(217,154,74,.1); }
.mkt-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mkt-line--sell { stroke: var(--gold-bright); }
.mkt-line--buy { stroke: #6aa6e0; }
.mkt-grid { stroke: var(--border); stroke-width: 1; }
.mkt-axis { fill: var(--text-faint); font-size: 10px; font-family: "JetBrains Mono", monospace; }
.mkt-legend { display: flex; gap: 16px; justify-content: center; padding: 4px 0 8px; }
.mkt-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.mkt-key::before { content: ""; width: 14px; height: 3px; border-radius: 2px; }
.mkt-key--sell::before { background: var(--gold-bright); }
.mkt-key--buy::before { background: #6aa6e0; }
.mkt-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px; }
.mkt-board__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 4px 2px 8px; }
.mkt-board__empty { padding: 12px 4px; font-size: 12.5px; }
.mkt-trader { color: var(--text-muted); font-size: 12.5px; }
@media (max-width: 640px) { .mkt-board { grid-template-columns: 1fr; } .mkt-filters { width: 100%; } .mkt-search { flex: 1; } }

/* ---- Compare (cross-world price finder) ---- */
.mkt-compare-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 6px 2px; }
.mkt-typeahead { position: relative; flex: 1 1 300px; min-width: 220px; }
.mkt-ta-ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 15px; pointer-events: none; }
#mkt-item-search { width: 100%; background: var(--bg-base); color: var(--text-bright); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13.5px; padding: 9px 12px 9px 34px; }
#mkt-item-search:focus { outline: none; border-color: var(--gold); }
.mkt-ta-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; background: var(--bg-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 28px rgba(0,0,0,.45); max-height: 340px; overflow-y: auto; display: none; }
.mkt-ta-list.is-open { display: block; }
.mkt-ta-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 7px 11px; cursor: pointer; }
.mkt-ta-item:last-child { border-bottom: none; }
.mkt-ta-item:hover { background: var(--bg-raised); }
.mkt-ta-empty { padding: 12px; font-size: 12.5px; color: var(--text-faint); }
.mkt-wmeta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.mkt-be { width: 15px; height: 15px; flex: 0 0 auto; display: inline-block; vertical-align: middle; }
.mkt-be--green { color: #6cc04a; }
.mkt-be--yellow { color: #f0b90b; }
.mkt-cmp-head { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; border-bottom: 1px solid var(--border); }
.mkt-cmp-head h2 { margin: 0; font-size: 18px; color: var(--text-bright); }
.mkt-cmp-head .mkt-item__c { font-size: 12px; }
.mkt-cmp-status { padding: 10px 12px; font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.mkt-cmp-status b { color: var(--text-bright); }
.mkt-cheapest { background: rgba(95,191,147,.07); }
.mkt-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 6px; border-radius: 4px; background: rgba(210,172,82,.16); color: var(--gold); vertical-align: middle; }
.mkt-tag--buy { background: rgba(95,191,147,.16); color: #5fbf93; }
@media (max-width: 640px) { .mkt-compare-bar .mkt-sel { flex: 1; } }

/* ---- market polish ---- */
/* let the Compare item-search dropdown extend past the card instead of being clipped (.card is overflow:hidden);
   the tables inside keep their own .hs-table-wrap scroll, so this is safe */
#mkt-card { overflow: visible; }
.mkt-gp { cursor: help; border-bottom: 1px dotted transparent; }
.mkt-gp:hover { border-bottom-color: var(--border-strong); }
.mkt-chg { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.mkt-cmp-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px 14px; margin: 8px 6px 0; background: rgba(210,172,82,.05); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.mkt-sum { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.mkt-sum i { color: var(--gold); font-size: 15px; }
.mkt-sum b { color: var(--text-bright); }
.mkt-sum--buy i { color: #5fbf93; }
/* category pills (item rows) + world pills (compare) + stat-card icons */
.mkt-cat { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .2px; padding: 1px 6px; border-radius: 4px; line-height: 1.5; }
.mkt-cat--wpn { color: #e0846e; background: rgba(224,132,110,.12); }
.mkt-cat--arm { color: #6aa6e0; background: rgba(106,166,224,.12); }
.mkt-cat--jwl { color: #b98ce0; background: rgba(185,140,224,.12); }
.mkt-cat--con { color: #5fbf93; background: rgba(95,191,147,.12); }
.mkt-cat--val { color: var(--gold); background: rgba(210,172,82,.12); }
.mkt-cat--cre { color: #d99a4a; background: rgba(217,154,74,.12); }
.mkt-cat--oth { color: var(--text-faint); background: rgba(255,255,255,.045); }
.mkt-wpill { font-size: 10.5px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.05); color: var(--text-muted); }
.mkt-wpill--loc { color: var(--text-faint); }
.mkt-stat__l { display: inline-flex; align-items: center; gap: 5px; }
.mkt-stat__l i { font-size: 11px; color: var(--gold); opacity: .85; }
/* item-detail listing polish */
.mkt-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.mkt-detail-meta .mkt-wpill i { font-size: 11px; margin-right: 1px; }
.mkt-upd { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); }
.mkt-upd i { font-size: 12px; }
.mkt-section-h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; padding: 18px 8px 8px; }
.mkt-section-h i { color: var(--gold); font-size: 14px; }
.mkt-section-h .muted { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-faint); }
.mkt-board__h { display: flex; align-items: center; gap: 7px; }
.mkt-board__n { font-size: 11px; font-weight: 600; color: var(--text-faint); background: rgba(255,255,255,.05); padding: 0 6px; border-radius: 999px; }
/* full-width, stacked market board (Sellers over Buyers) */
.mkt-board--full { margin: 0 0 16px; }
.mkt-ends { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; }
/* fixed layout with shared widths so the Sellers + Buyers tables line up column-for-column */
.mkt-offer-table { table-layout: fixed; }
.mkt-offer-table th:nth-child(1), .mkt-offer-table td:nth-child(1) { width: 26%; }
.mkt-offer-table th:nth-child(2), .mkt-offer-table td:nth-child(2) { width: 11%; }
.mkt-offer-table th:nth-child(3), .mkt-offer-table td:nth-child(3) { width: 17%; }
.mkt-offer-table th:nth-child(4), .mkt-offer-table td:nth-child(4) { width: 17%; }
.mkt-offer-table th:nth-child(5), .mkt-offer-table td:nth-child(5) { width: 29%; }
.mkt-offer-table td:nth-child(1) { overflow: hidden; text-overflow: ellipsis; }
.mkt-dot { stroke: var(--bg-card); stroke-width: 1.6; }
.mkt-dot--sell { fill: var(--gold-bright); }
.mkt-dot--buy { fill: #6aa6e0; }
/* watchlist star / remove + NPC reference prices */
.mkt-star { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 17px; line-height: 1; padding: 0 0 0 5px; vertical-align: 2px; }
.mkt-star:hover, .mkt-star.is-on { color: var(--gold); }
.mkt-unstar { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 14px; padding: 2px 4px; }
.mkt-unstar:hover { color: #e07b6e; }
.mkt-wl-x { width: 44px; text-align: center; }
.mkt-npc-line:not(:empty) { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 2px 8px 8px; }
.mkt-npc { font-size: 12.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.mkt-npc i { color: var(--gold); font-size: 14px; }
.mkt-npc b { color: var(--text-bright); }
/* NPC ↔ market arbitrage flag: a risk-free flip route (NPC price beats the best market offer) */
.mkt-arb-line:not(:empty) { display: flex; flex-direction: column; gap: 6px; padding: 2px 8px 8px; }
.mkt-arb { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-muted);
  background: rgba(95,191,147,.08); border: 1px solid rgba(95,191,147,.28); border-left-width: 3px;
  border-radius: var(--radius-sm); padding: 8px 11px; }
.mkt-arb > i { color: #5fbf93; font-size: 15px; margin-top: 1px; flex: 0 0 auto; }
.mkt-arb__txt b { color: var(--text-bright); }
.mkt-arb__txt b.mkt-arb__profit { color: #5fbf93; font-weight: 700; margin-right: 4px; white-space: nowrap; }
.mkt-arb__profit span { font-weight: 400; color: var(--text-faint); font-size: 10.5px; }

/* ---- Site footer (shared across all pages) ---- */
.site-footer { margin-top: 46px; padding: 26px 4px 4px; border-top: 1px solid var(--border); }
.site-footer__grid { display: grid; grid-template-columns: minmax(230px, 1.4fr) repeat(3, 1fr); gap: 26px; }
.site-footer__logo { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: .4px; font-weight: 800; }
.site-footer__logo img { width: 26px; height: 26px; }
.site-footer__logo b { color: var(--gold-bright); }
.site-footer__logo span { color: var(--text-muted); }
.site-footer__brand p { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.6; max-width: 46ch; }
.site-footer__brand .site-footer__legal { color: var(--text-faint); font-size: 11.5px; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 12.5px; }
.site-footer__col span { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
.site-footer__col a { color: var(--text-muted); text-decoration: none; }
.site-footer__col a:hover { color: var(--gold-bright); }
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---- 404 page ---- */
.nf-hero { text-align: center; padding: 72px 16px 40px; }
.nf-code {
  font-family: var(--font-mono); font-size: 96px; font-weight: 500; line-height: 1;
  color: var(--gold); text-shadow: 0 0 44px rgba(210,172,82,.25); letter-spacing: 6px;
}
.nf-hero h1 { margin-top: 18px; font-size: 22px; font-weight: 700; color: var(--text-bright); }
.nf-hero p { margin-top: 8px; color: var(--text-muted); font-size: 13.5px; }
.nf-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.nf-links { margin-top: 28px; font-size: 12.5px; color: var(--text-faint); display: flex; justify-content: center; gap: 6px 16px; flex-wrap: wrap; }
.nf-links a { color: var(--text-muted); text-decoration: none; }
.nf-links a:hover { color: var(--gold-bright); }

/* ============================================================
   Hunting guides — interactive map + guide editor/viewer
   ============================================================ */
/* Leaflet map surface (route drawing) */
.hunt-map { width: 100%; height: 560px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #0a0b0e; }
.hunt-map .leaflet-container { background: #0a0b0e; font-family: inherit; }
.hunt-map__img { image-rendering: pixelated; }  /* authentic Tibia-minimap look when zoomed in */
.hunt-map .leaflet-control-attribution { background: rgba(20,23,29,.8); color: var(--text-faint); font-size: 10px; }
.hunt-map .leaflet-control-attribution a { color: var(--text-muted); }
.hunt-map .leaflet-bar a, .hunt-map .leaflet-bar button { background: var(--bg-panel); color: var(--text-primary); border-color: var(--border); }
.hunt-map .leaflet-bar a:hover { background: var(--bg-raised); }
/* numbered route waypoint */
.hunt-wp { display: flex; align-items: center; justify-content: center; }
.hunt-wp span { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--gold); color: #14161b;
  border-radius: 50%; font-weight: 700; font-size: 11px; border: 2px solid #14161b; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* floor stepper: [+] up / current floor / [−] down */
.hunt-floorstep { display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-panel); border: 1px solid var(--border-strong) !important; border-radius: 8px; }
.hunt-floorstep__btn { width: 32px; height: 28px; background: var(--bg-panel); color: var(--text-primary);
  border: none; cursor: pointer; font-size: 16px; line-height: 1; font-family: var(--font-mono); }
.hunt-floorstep__btn:hover { background: var(--bg-raised); color: var(--gold-bright); }
.hunt-floorstep__btn:disabled { opacity: 0.35; cursor: default; color: var(--text-faint); background: var(--bg-panel); }
.hunt-floorstep__num { position: relative; width: 32px; padding: 5px 0; text-align: center; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; color: var(--gold-bright); background: var(--bg-base);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); cursor: default; }
.hunt-floorstep__num.has-route::after { content: ""; position: absolute; top: 4px; right: 4px; width: 5px; height: 5px;
  border-radius: 50%; background: #5fbf93; }
/* magnifier zoom (scroll-wheel zoom still works) */
.hunt-zoom { display: flex; flex-direction: column; overflow: hidden;
  background: rgba(20,23,29,0.92); border: 1px solid var(--border-strong) !important; border-radius: 8px; }
.hunt-zoom button { width: 32px; height: 30px; display: grid; place-items: center; background: none;
  color: var(--text-primary); border: none; cursor: pointer; font-size: 15px; }
.hunt-zoom button + button { border-top: 1px solid var(--border); }
.hunt-zoom button:hover { color: var(--gold-bright); background: var(--bg-raised); }

/* editor */
.hg-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 6; background: var(--bg-app); padding: 10px 0; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.hg-actionbar__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.hg-status { font-size: 12.5px; color: var(--text-faint); transition: color .2s; }
.hg-status.is-on { color: #5fbf93; }
.hg-members { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.hg-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted);
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.hg-tab:hover { color: var(--text-bright); border-color: var(--border-strong); }
.hg-tab.is-active { color: var(--text-bright); border-color: var(--gold); background: rgba(210,172,82,.08); }
.hg-tab i { font-size: 15px; }
.hg-tab__lv { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hg-tab--add { border-style: dashed; color: var(--text-faint); }
.hg-member-bar { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 4px; }
.hg-hint { font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 6px; margin: 10px 0; }
.hg-hint i { color: var(--gold); font-size: 14px; }
.hg-frame { width: 100%; min-height: 620px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); display: block; }
.hg-linkbtn { background: none; border: none; color: var(--gold); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.hg-linkbtn:hover { color: var(--gold-bright); }
@media (max-width: 560px) { .hunt-map { height: 420px; } .hg-member-bar { flex-wrap: wrap; } }

/* hunting-guide viewer header + index cards */
.hgv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.hgv-head .page-head h1 { margin-top: 6px; }
.hgv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hgv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hgv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }
.hgv-chip i { color: var(--gold); font-size: 14px; }
.hgv-notes { font-size: 13.5px; color: var(--text-primary); line-height: 1.7; white-space: normal; }
.hgi-card h2 { font-size: 15px; }
.hgi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.hgi-vocs { display: inline-flex; gap: 4px; }
.hgi-voc { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-base); border: 1px solid var(--border); font-size: 14px; }
.hgi-voc.cs-vi--knight { color: #d98b5f; } .hgi-voc.cs-vi--paladin { color: #6fbf73; }
.hgi-voc.cs-vi--sorcerer { color: #b98ce0; } .hgi-voc.cs-vi--druid { color: #5fbf93; } .hgi-voc.cs-vi--monk { color: var(--gold); }
.hgi-lv { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.guide-tag--party { color: var(--gold); border-color: rgba(210,172,82,.4); }

/* ---- hunting-guide viewer: Maxroll-style hero + sticky section TOC ---- */
html:has(#hgv) { scroll-behavior: smooth; }
.hgv-back { display: inline-flex; margin-bottom: 12px; }
.hgv-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 4px;
  background: linear-gradient(135deg, rgba(210,172,82,.10), rgba(210,172,82,.015) 55%), var(--bg-card);
  border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.hgv-hero__party { display: flex; gap: 7px; flex-wrap: wrap; }
.hgv-voc { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--bg-base); border: 1px solid var(--border-strong); font-size: 23px; }
.hgv-voc.cs-vi--knight { color: #d98b5f; } .hgv-voc.cs-vi--paladin { color: #6fbf73; }
.hgv-voc.cs-vi--sorcerer { color: #b98ce0; } .hgv-voc.cs-vi--druid { color: #5fbf93; } .hgv-voc.cs-vi--monk { color: var(--gold); }
.hgv-voc.cs-vi--none { color: var(--text-faint); }
.hgv-hero__body { flex: 1 1 240px; min-width: 0; }
.hgv-hero__kicker { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gold); }
.hgv-hero__body h1 { font-size: 26px; font-weight: 800; color: var(--text-bright); margin: 4px 0 0; line-height: 1.15; }
.hgv-hero .hgv-chips { margin-top: 12px; }
.hgv-hero__body .hgv-chips { margin-top: 12px; }
.hgv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hgv-toc { position: sticky; top: var(--topbar-h); z-index: 4; display: flex; gap: 4px; flex-wrap: wrap;
  padding: 9px 0; margin: 6px 0 6px; background: var(--bg-app); border-bottom: 1px solid var(--border); }
.hgv-toc a { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; padding: 6px 14px; border-radius: 999px; transition: color .12s, background .12s; }
.hgv-toc a:hover { color: var(--text-bright); background: var(--bg-card); }
.hgv-toc a.is-active { color: var(--gold-bright); background: rgba(210,172,82,.1); }
.hgv-section { scroll-margin-top: calc(var(--topbar-h) + 62px); margin-bottom: 24px; }
.hgv-section[hidden] { display: none; }
.hgv-sec-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text-bright); margin: 0 0 12px; }
.hgv-sec-h i { color: var(--gold); }
/* (hero mobile rules consolidated into the hunting-guide mobile pass below) */

/* index card polish toward the Maxroll browse look */
.hgi-card { transition: transform .12s, border-color .12s, box-shadow .12s; }
.hgi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.32); }
.hgi-card .hgi-voc { width: 30px; height: 30px; font-size: 16px; }

/* collapsible guide sections (accordion) */
.hgv-sec-h { width: 100%; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.hgv-sec-h__chev { margin-left: auto; color: var(--text-faint); font-size: 17px; transition: transform .15s, color .12s; }
.hgv-sec-h:hover .hgv-sec-h__chev { color: var(--text-muted); }
.hgv-section.is-collapsed .hgv-sec-h { margin-bottom: 0; }
.hgv-section.is-collapsed .hgv-sec-h__chev { transform: rotate(-90deg); }
.hgv-section.is-collapsed .hgv-sec-body { display: none; }

/* ---- FIX: Leaflet's high internal z-indexes were painting over the sticky topbar/TOC.
   isolation:isolate contains them in the map's own stacking context (below the topbar). ---- */
.hunt-map { isolation: isolate; position: relative; z-index: 0; }

/* ---- index guide cards: banner header (Maxroll-style art-led card) ---- */
.hgi-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.hgi-banner { position: relative; height: 94px; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: radial-gradient(120% 130% at 50% 135%, rgba(210,172,82,.20), transparent 62%), linear-gradient(160deg, #20262f, #14161b);
  border-bottom: 1px solid var(--border); }
.hgi-card--knight   .hgi-banner { background: radial-gradient(120% 130% at 50% 135%, rgba(217,139,95,.28), transparent 62%), linear-gradient(160deg,#241a15,#14161b); }
.hgi-card--paladin  .hgi-banner { background: radial-gradient(120% 130% at 50% 135%, rgba(111,191,115,.24), transparent 62%), linear-gradient(160deg,#16241a,#14161b); }
.hgi-card--sorcerer .hgi-banner { background: radial-gradient(120% 130% at 50% 135%, rgba(185,140,224,.26), transparent 62%), linear-gradient(160deg,#20182a,#14161b); }
.hgi-card--druid    .hgi-banner { background: radial-gradient(120% 130% at 50% 135%, rgba(95,191,147,.24), transparent 62%), linear-gradient(160deg,#15241d,#14161b); }
.hgi-card--monk     .hgi-banner { background: radial-gradient(120% 130% at 50% 135%, rgba(210,172,82,.26), transparent 62%), linear-gradient(160deg,#241f14,#14161b); }
.hgi-banner__party { position: absolute; top: 9px; left: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--gold-bright); background: rgba(10,11,14,.66); padding: 2px 8px; border-radius: 999px; }
.hgi-banner__vocs { display: flex; gap: 8px; }
.hgi-bvoc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(10,11,14,.35); border: 1px solid rgba(255,255,255,.14); font-size: 23px; }
.hgi-bvoc.cs-vi--knight { color: #d98b5f; } .hgi-bvoc.cs-vi--paladin { color: #6fbf73; }
.hgi-bvoc.cs-vi--sorcerer { color: #b98ce0; } .hgi-bvoc.cs-vi--druid { color: #5fbf93; }
.hgi-bvoc.cs-vi--monk { color: var(--gold); } .hgi-bvoc.cs-vi--none { color: var(--text-faint); }
.hgi-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.hgi-card__body h2 { font-size: 15px; color: var(--text-bright); }
.hgi-card__body p { font-size: 12.5px; color: var(--text-muted); flex: 1; }

/* ---- mobile pass: the hunting-guide pages nested content>card>body>map/pills too deeply,
   eating width on phones. Tighten the insets and let the map + hero use the space. ---- */
@media (max-width: 560px) {
  #hgv.content, #hg-index.content, #hg-editor.content { padding-left: 10px; padding-right: 10px; }
  #hgv .card__body, #hg-editor .card__body { padding: 12px; }
  #hgv .card__body:has(.hunt-map), #hg-editor .card__body:has(.hunt-map) { padding: 8px; }
  .hunt-map { height: 400px; }

  /* hero: stack cleanly instead of a cramped row-wrap; vocation cluster reads as a comp banner */
  .hgv-hero { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
  .hgv-hero__party { gap: 8px; }
  .hgv-voc { width: 38px; height: 38px; font-size: 19px; border-radius: 10px; }
  /* reset flex-basis: in a column hero, `flex:1 1 240px` would set a 240px min HEIGHT */
  .hgv-hero__body { width: 100%; flex: 0 0 auto; }
  .hgv-hero__body h1 { font-size: 20px; }
  .hgv-hero .hgv-chips, .hgv-hero__body .hgv-chips { margin-top: 10px; }
  .hgv-actions { width: 100%; }
  .hgv-actions .btn { flex: 1; justify-content: center; }

  /* TOC: a single-line scroll strip so it never wraps to two rows under the topbar */
  .hgv-toc { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 8px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hgv-toc::-webkit-scrollbar { display: none; }
  .hgv-toc a { flex: 0 0 auto; padding: 7px 13px; }

  /* accordion headers: larger tap target + a divider so sections read clearly */
  .hgv-sec-h { font-size: 15px; padding: 6px 0; }
  .hgv-section:not(.is-collapsed) .hgv-sec-h { border-bottom: 1px solid var(--border); padding-bottom: 10px; }

  /* party member tabs: same single-line scroll strip instead of wrapping */
  .hg-members { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 0 -2px 12px; padding: 0 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hg-members::-webkit-scrollbar { display: none; }
  .hg-tab { flex: 0 0 auto; }

  .hgv-route-legend { margin-top: 12px; }

  /* index filters: drop a level of box padding so the pills aren't boxed 3 deep */
  #hg-index .card__body { padding: 12px; }
}

/* ---- flatten "cards in cards" in the guide viewer ----
   The viewer used to wrap each section body in a .card, then the embedded
   character sheet renders its OWN cards, and the wheel embeds cards again —
   3–4 stacked borders around the same content, wasting width and vertical
   space on mobile. Now the section body holds content directly, the member
   iframe is borderless, and cards INSIDE any embed collapse to a header +
   flat content (Maxroll-style), so there's one clean scroll. */
#hgv .hgv-sec-body { display: block; }
#hgv .hg-frame { border: none; border-radius: 0; background: transparent; min-height: 300px; }
#hgv .hg-members { margin-bottom: 12px; }

/* inside any embed (character sheet AND its nested wheel planner): drop the box
   chrome, keep the card header as a labelled divider between sections */
.is-embed .card { background: transparent; border: none; border-radius: 0; overflow: visible; }
.is-embed .card + .card { margin-top: 4px; }
.is-embed .card__head { padding: 14px 2px 10px; }
.is-embed .card__body { padding: 12px 2px 16px; }

/* guide byline (Maxroll "By <author> · Updated <date>") */
.hgv-byline { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.hgv-byline b { color: var(--text-primary); font-weight: 600; }
.hgv-byline__sep { color: var(--text-faint); margin: 0 3px; }
.hgi-byline { font-size: 11.5px; color: var(--text-faint); }

/* waypoint notes (MDT-style) — indicator, dark popup, viewer legend */
.hunt-wp.has-note span { box-shadow: 0 0 0 2px #5fbf93, 0 1px 4px rgba(0,0,0,.5); }
.hunt-map .leaflet-popup-content-wrapper, .hunt-map .leaflet-popup-tip { background: var(--bg-panel); color: var(--text-primary); border: 1px solid var(--border-strong); box-shadow: 0 8px 22px rgba(0,0,0,.55); }
.hunt-map .leaflet-popup-content { margin: 10px 12px; }
.hunt-map .leaflet-popup-close-button { color: var(--text-faint); }
.wp-pop label { display: block; font-size: 10.5px; font-weight: 600; color: var(--text-faint); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.wp-pop input { width: 180px; max-width: 100%; background: var(--bg-base); color: var(--text-bright); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: 13px; padding: 6px 9px; box-sizing: border-box; }
.wp-pop input:focus { outline: none; border-color: var(--gold); }
.hgv-route-legend { display: grid; gap: 7px; margin-top: 14px; }
.hgv-route-legend:empty { display: none; }
.hgv-rl { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-primary); line-height: 1.4; }
.hgv-rl__n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px;
  background: var(--gold); color: #14161b; border-radius: 50%; font-weight: 700; font-size: 11px; }

/* ============================================================
   GUIDE-SITE REDESIGN — shared shell (index / hunt-guides / hunt-guide)
   Darker sidebar, gold left-bar active state, solid gold primary button,
   topbar world chip, full-bleed hero/page-head with map backdrop, slim footer.
   ============================================================ */
.sidebar { background: var(--bg-hero); }
.nav__item.is-active {
  background: linear-gradient(90deg, rgba(210,172,82,0.16), rgba(210,172,82,0.03));
  color: var(--gold-bright); border-left-color: transparent; box-shadow: inset 2.5px 0 0 var(--gold);
}
.sidebar__foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--bg-card);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }

/* solid gold primary button (Sign in / Search / Create / Open in editor) */
.btn--primary { background: var(--grad-gold); color: #1A1408; border: none; font-weight: 700; }
.btn--primary:hover { filter: brightness(1.05); color: #1A1408; border: none; }
.btn--primary i { vertical-align: -1px; }

/* topbar world chip */
.topbar__world { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; }
.topbar__world .wdot { width: 7px; height: 7px; border-radius: 50%; background: var(--positive); }
.topbar__world i { font-size: 13px; color: var(--text-faint); }

/* redesign content: full-bleed sections manage their own 32px side padding */
.content.rd { padding: 0; display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h)); }

/* full-bleed hero / page-head with a faint world-map backdrop */
.rd-hero { position: relative; padding: 44px 32px 40px; background: var(--bg-hero); border-bottom: 1px solid var(--border); overflow: hidden; }
.rd-head { position: relative; padding: 34px 32px 24px; background: var(--bg-hero); border-bottom: 1px solid var(--border); overflow: hidden; }
/* half-res webp upscaled to the PNG's natural size: identical framing, 411 KB -> 106 KB
   (at 13% opacity the softness is invisible; .gcard__thumb keeps the full PNG for crisp crops) */
.rd-mapbg { position: absolute; inset: 0; background-image: url("assets/map/floor-07-dim.webp"); background-size: 2560px 2048px; background-repeat: no-repeat; opacity: 0.13; filter: saturate(0.7); pointer-events: none; }
.rd-hero .rd-mapbg { background-size: 2560px; background-position: -1100px -700px; opacity: 0.14; }
.rd-head .rd-mapbg { background-size: 2560px; background-position: -1500px -900px; opacity: 0.12; }
.rd-veil { position: absolute; inset: 0; pointer-events: none; }
.rd-hero .rd-veil { background:
  radial-gradient(600px 260px at 28% 20%, rgba(210,172,82,0.13), transparent 70%),
  linear-gradient(90deg, #101318 30%, rgba(16,19,24,0.55) 70%, rgba(16,19,24,0.85)); }
.rd-head .rd-veil { background: linear-gradient(90deg, #101318 35%, rgba(16,19,24,0.6)); }
.rd-in { position: relative; }
.rd-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; color: var(--gold); margin-bottom: 8px; }
.rd-h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.4px; color: var(--text-bright); }
.rd-hero .rd-h1 { font-size: 32px; letter-spacing: -0.5px; }
.rd-sub { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.55; max-width: 520px; }

/* slim one-row footer */
.rd-foot { display: flex; align-items: center; gap: 18px; padding: 16px 32px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-faint); margin-top: auto; flex-wrap: wrap; }
.rd-foot__brand { display: flex; align-items: center; gap: 7px; }
.rd-foot__brand img { width: 18px; height: 18px; }
.rd-foot__brand b { color: var(--text-muted); font-weight: 700; }
.rd-foot__legal { flex: 1; min-width: 220px; }
.rd-foot a { color: var(--text-faint); text-decoration: none; }
.rd-foot a:hover { color: var(--text-muted); }

/* shared: section head with right link */
.rd-sec { padding: 26px 32px 0; }
.rd-sec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.rd-sec__head h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-bright); }
.rd-sec__more { margin-left: auto; font-size: 13px; color: var(--gold); text-decoration: none; font-weight: 600; }
.rd-sec__more:hover { color: var(--gold-bright); }
.rd-sec__more i { font-size: 12px; vertical-align: -1px; }

/* ============================================================
   HOMEPAGE (1a)
   ============================================================ */
.rd-hero__search { display: flex; gap: 10px; max-width: 560px; margin-top: 20px; }
.rd-hero__search .well { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--bg-base);
  border: 1px solid var(--border-strong); border-radius: 10px; padding: 13px 15px; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.rd-hero__search .well i { font-size: 17px; color: var(--text-faint); }
.rd-hero__search .well input { flex: 1; background: none; border: none; outline: none; color: var(--text-bright);
  font-size: 14.5px; font-family: var(--font-sans); }
.rd-hero__search .well input::placeholder { color: var(--text-faint); }
.rd-hero__search .btn--primary { border-radius: 10px; padding: 0 24px; font-size: 14.5px; }
.rd-trending { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12.5px; flex-wrap: wrap; }
.rd-trending > span:first-child { color: var(--text-faint); }
.trend-chip { border: 1px solid var(--border-strong); border-radius: 99px; padding: 4px 11px; color: var(--text-muted);
  background: rgba(28,33,42,0.7); cursor: pointer; font: inherit; font-size: 12.5px; }
.trend-chip:hover { color: var(--gold-bright); border-color: var(--gold); }

/* today-on-tibia strip: 3 tiles */
.rd-today { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; padding: 20px 32px 0; }
.rd-tile { display: flex; align-items: center; gap: 13px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 11px; padding: 13px 15px; min-width: 0; }
.rd-tile__ico { width: 46px; height: 46px; flex: none; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--bg-raised); display: grid; place-items: center; overflow: hidden; }
.rd-tile__ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.rd-tile__ico i { font-size: 22px; color: var(--text-faint); }
.rd-tile__k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.3px; color: var(--text-faint); text-transform: uppercase; }
.rd-tile__name { font-size: 14px; font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-tile__sub { font-size: 12px; color: var(--positive); }
.rd-tile__sub.is-muted { color: var(--text-muted); }

/* featured guide cards */
.rd-feat { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.feat-card { display: flex; flex-direction: column; gap: 9px; background: var(--bg-card); border: 1px solid var(--border);
  border-top: 2.5px solid var(--border-strong); border-radius: 11px; padding: 16px 17px 14px; text-decoration: none; transition: background 0.12s, border-color 0.12s; }
.feat-card:hover { background: var(--bg-raised); }
.feat-card--knight { border-top-color: var(--voc-knight); }
.feat-card--paladin { border-top-color: var(--voc-paladin); }
.feat-card--sorcerer { border-top-color: var(--voc-sorcerer); }
.feat-card--druid { border-top-color: var(--voc-druid); }
.feat-card--monk { border-top-color: var(--voc-monk); }
.feat-card__tags { display: flex; gap: 6px; }
.feat-card__title { font-size: 15px; font-weight: 700; color: var(--text-bright); line-height: 1.35; }
.feat-card__teaser { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.feat-card__by { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-faint); }
.feat-card__by .av { width: 18px; height: 18px; border-radius: 50%; background: var(--border-strong); flex: none; }
.feat-card__by .upd { color: var(--positive); }

/* chips: vocation + category (shared across pages) */
.vchip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 5px; padding: 3px 8px; }
.vchip i { font-size: 11px; }
.vchip--knight { color: var(--voc-knight); background: rgba(217,92,92,0.12); }
.vchip--paladin { color: var(--voc-paladin); background: rgba(217,164,65,0.12); }
.vchip--sorcerer { color: var(--voc-sorcerer); background: rgba(157,123,224,0.12); }
.vchip--druid { color: var(--voc-druid); background: rgba(91,185,140,0.12); }
.vchip--monk { color: var(--voc-monk); background: rgba(224,138,78,0.12); }
.vchip--cat { color: var(--text-muted); background: var(--bg-app); }

/* news + rail grid */
.rd-newsgrid { display: grid; grid-template-columns: 1fr 336px; gap: 20px; padding: 26px 32px 28px; align-items: start; }
.news2 { display: flex; flex-direction: column; gap: 10px; }
.news2-row { display: flex; gap: 14px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px;
  padding: 15px 17px; text-decoration: none; transition: background 0.12s; }
.news2-row:hover { background: var(--bg-raised); }
.news2-row__date { flex: none; width: 52px; text-align: center; }
.news2-row__date .m { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-transform: uppercase; }
.news2-row__date .d { font-size: 19px; font-weight: 800; color: var(--gold-bright); line-height: 1.1; }
.news2-row__cat { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; margin-bottom: 3px; color: var(--text-muted); text-transform: uppercase; }
.news2-row__cat.is-featured { color: var(--gold); }
.news2-row__cat.is-news { color: var(--positive); }
.news2-row__title { font-size: 14.5px; font-weight: 600; color: var(--text-bright); margin-bottom: 3px; }
.news2-row__teaser { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.news2-foot { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: 12px; }

/* rail cards */
.rd-rail { display: flex; flex-direction: column; gap: 14px; }
.peek-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.peek-card__head { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.peek-card__head i { color: var(--gold); font-size: 15px; }
.peek-card__head h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text-bright); }
.peek-card__head .all { margin-left: auto; font-size: 12px; color: var(--gold); text-decoration: none; font-weight: 600; }
.peek-row { display: flex; align-items: center; gap: 10px; padding: 9px 15px; font-size: 12.5px; text-decoration: none;
  border-bottom: 1px solid var(--divider-hairline); }
.peek-row:last-child { border-bottom: none; }
.peek-row:hover { background: var(--bg-raised); }
.peek-row__rank { font-family: var(--font-mono); color: var(--text-muted); width: 16px; flex: none; }
.peek-row__rank.is-1 { color: var(--gold-bright); }
.peek-row__name { color: var(--text-primary); font-weight: 600; }
.peek-row__world { color: var(--text-faint); }
.peek-row__val { margin-left: auto; font-family: var(--font-mono); color: var(--text-muted); }
.peek-row__val.is-gain { color: var(--positive); }
.rd-community { background: linear-gradient(160deg, #1C212A, #171B22); border: 1px solid var(--border); border-radius: 11px;
  padding: 16px 17px; display: flex; flex-direction: column; gap: 10px; }
.rd-community__head { display: flex; align-items: center; gap: 8px; }
.rd-community__head i { color: var(--gold); font-size: 16px; }
.rd-community__head b { font-size: 13.5px; font-weight: 700; color: var(--text-bright); }
.rd-community p { margin: 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.rd-community .btn--gold { align-self: flex-start; }

@media (max-width: 900px) {
  .rd-today, .rd-feat { grid-template-columns: 1fr; }
  .rd-newsgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rd-hero { padding: 30px 16px 26px; } .rd-head { padding: 24px 16px 18px; }
  .rd-hero .rd-h1 { font-size: 25px; } .rd-sec, .rd-today, .rd-newsgrid { padding-left: 16px; padding-right: 16px; }
  .rd-hero__search { flex-wrap: wrap; } .rd-foot { padding: 16px; }
}

/* ============================================================
   HUNTING GUIDES INDEX (1b)
   ============================================================ */
.rd-head__row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.rd-head__row .rd-sub { max-width: 640px; }
.rd-head .btn--primary { margin-left: auto; flex: none; border-radius: 10px; padding: 11px 20px; font-size: 13.5px;
  box-shadow: 0 8px 20px rgba(210,172,82,0.18); }

/* filter toolbar */
.gidx-bar { display: flex; align-items: center; gap: 10px; padding: 16px 32px; border-bottom: 1px solid var(--border);
  background: var(--bg-app); flex-wrap: wrap; }
.gidx-bar__search { display: flex; align-items: center; gap: 9px; background: var(--bg-base); border: 1px solid var(--border-strong);
  border-radius: 9px; padding: 9px 13px; width: 250px; }
.gidx-bar__search i { color: var(--text-faint); }
.gidx-bar__search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text-bright); font: inherit; font-size: 13px; }
.gidx-bar__search input::placeholder { color: var(--text-faint); }
.gidx-div { width: 1px; height: 26px; background: var(--border); }
.gidx-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gidx-group__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; color: var(--text-faint); margin-right: 2px; }
.fpill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; border-radius: 99px;
  padding: 5px 13px; border: 1px solid var(--border-strong); color: var(--text-muted); background: none; cursor: pointer; font-family: inherit; }
.fpill i { font-size: 13px; }
.fpill:hover { color: var(--text-bright); }
.fpill.is-active { color: #0E1014; background: var(--gold); border-color: var(--gold); }
.fpill--knight { color: var(--voc-knight); border-color: rgba(217,92,92,0.4); }
.fpill--paladin { color: var(--voc-paladin); border-color: rgba(217,164,65,0.4); }
.fpill--sorcerer { color: var(--voc-sorcerer); border-color: rgba(157,123,224,0.4); }
.fpill--druid { color: var(--voc-druid); border-color: rgba(91,185,140,0.4); }
.fpill--monk { color: var(--voc-monk); border-color: rgba(224,138,78,0.4); }
.fpill.is-active[class*="fpill--"] { color: #0E1014; background: var(--gold); border-color: var(--gold); }

/* results */
.gidx-res { padding: 20px 32px 28px; }
.gidx-res__head { display: flex; align-items: baseline; margin-bottom: 14px; }
.gidx-res__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.gidx-res__sort { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.gidx-res__sort select { background: none; border: none; color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gidx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* guide card (map-thumb horizontal) */
.gcard { display: flex; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; transition: background 0.12s, border-color 0.12s; }
.gcard:hover { border-color: #3A4250; background: var(--bg-raised); }
.gcard__thumb { flex: none; width: 150px; position: relative; background-image: url("assets/map/floor-07.png"); background-size: 5120px 4096px; background-position: -1700px -2000px; }
.gcard__thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--bg-card)); }
.gcard:hover .gcard__thumb::after { background: linear-gradient(90deg, transparent 55%, var(--bg-raised)); }
.gcard__route { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-family: var(--font-mono); font-size: 9.5px; color: var(--gold-bright);
  background: rgba(14,16,20,0.8); border-radius: 5px; padding: 2px 7px; }
.gcard__route i { font-size: 10px; vertical-align: -1px; }
.gcard__body { padding: 15px 17px 13px; display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1; }
.gcard__tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.gtag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 5px; padding: 3px 8px; }
.gtag--party { color: var(--text-muted); background: var(--bg-app); }
.gtag--lv { color: var(--gold-bright); background: rgba(210,172,82,0.10); border: 1px solid rgba(210,172,82,0.3); }
.gtag--boss { color: var(--voc-knight); background: rgba(217,92,92,0.10); }
.gtag--boss i { font-size: 10px; vertical-align: -1px; }
.gcard__title { font-size: 15px; font-weight: 700; color: var(--text-bright); line-height: 1.3; }
.gcard__spot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.gcard__spot i { font-size: 13px; color: var(--text-faint); flex: none; }
.gcard__roles { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; }
.rolechip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px; }
.rolechip i { font-size: 11px; }
.rolechip--knight { color: var(--voc-knight); background: rgba(217,92,92,0.10); }
.rolechip--paladin { color: var(--voc-paladin); background: rgba(217,164,65,0.10); }
.rolechip--sorcerer { color: var(--voc-sorcerer); background: rgba(157,123,224,0.10); }
.rolechip--druid { color: var(--voc-druid); background: rgba(91,185,140,0.10); }
.rolechip--monk { color: var(--voc-monk); background: rgba(224,138,78,0.10); }
.rolechip--none { color: var(--text-muted); background: var(--bg-app); }
.gcard__by { margin-top: auto; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-faint); padding-top: 6px; }
.gcard__by .av { width: 17px; height: 17px; border-radius: 50%; background: var(--border-strong); flex: none; }

/* forge-your-own card */
.gcard--forge { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; background: transparent; border: 1.5px dashed var(--border-strong);
  border-radius: 12px; padding: 18px 20px; text-decoration: none; transition: background 0.12s, border-color 0.12s; }
.gcard--forge:hover { border-color: rgba(210,172,82,0.5); background: rgba(210,172,82,0.03); }
.gcard--forge__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(210,172,82,0.10); color: var(--gold-bright); font-size: 19px; }
.gcard--forge__t { min-width: 0; }
.gcard--forge__b { display: block; font-size: 14px; font-weight: 700; color: var(--text-bright); }
.gcard--forge__s { display: block; font-size: 12.5px; color: var(--text-muted); }
.gcard--forge__go { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.gcard--forge__go i { font-size: 12px; vertical-align: -1px; }

@media (max-width: 820px) { .gidx-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .gidx-bar { padding: 14px 16px; } .gidx-res { padding: 16px 16px 24px; } .gidx-bar__search { width: 100%; }
  .gidx-div { display: none; } .gcard__thumb { width: 104px; }
}

/* ============================================================
   HUNTING GUIDE DETAIL (2a)
   ============================================================ */
.gv-hero { position: relative; padding: 26px 32px 24px; background: var(--bg-hero); border-bottom: 1px solid var(--border); overflow: hidden; }
.gv-hero .rd-mapbg { background-size: 3072px; background-position: -1150px -900px; opacity: 0.16; }
.gv-hero .rd-veil { background: linear-gradient(90deg, #101318 40%, rgba(16,19,24,0.55)); }
.gv-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-bottom: 14px; }
.gv-back:hover { color: var(--gold-bright); }
.gv-back i { font-size: 13px; }
.gv-hero__row { display: flex; align-items: flex-end; gap: 20px; }
.gv-hero__main { min-width: 0; max-width: 720px; }
.gv-hero__kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2px; color: var(--gold); margin-bottom: 8px; }
.gv-hero h1 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.4px; color: var(--text-bright); }
.gv-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gv-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 4px 12px; }
.gv-chip--spot { color: var(--text-muted); background: rgba(28,33,42,0.85); border: 1px solid var(--border-strong); }
.gv-chip--spot i { color: var(--text-faint); font-size: 12px; }
.gv-chip--boss { color: var(--voc-knight); background: rgba(217,92,92,0.10); border: 1px solid rgba(217,92,92,0.35); }
.gv-chip--boss i { font-size: 12px; }
.gv-chip--level { color: var(--gold-bright); background: rgba(210,172,82,0.10); border: 1px solid rgba(210,172,82,0.35); }
.gv-byline { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); }
.gv-byline .av { width: 22px; height: 22px; border-radius: 50%; background: var(--border-strong); flex: none; }
.gv-byline b { color: var(--text-primary); }
.gv-byline .patch { color: var(--positive); }
.gv-hero__actions { margin-left: auto; flex: none; display: flex; gap: 9px; }
.gv-hero__actions .btn { border-radius: 9px; padding: 10px 16px; }

/* body grid */
.gv-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 22px; padding: 24px 32px 30px; align-items: start; }
.gv-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* section cards */
.gv-sec { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.gv-sec[hidden] { display: none; }
.gv-sec__h { display: flex; align-items: center; gap: 9px; width: 100%; padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: none; border-left: 0; border-right: 0; border-top: 0; cursor: pointer; font-family: inherit; text-align: left; }
.gv-sec__h > i:first-child { color: var(--gold); font-size: 16px; }
.gv-sec__h h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-bright); }
.gv-sec__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.gv-sec__chev { margin-left: auto; color: var(--text-faint); font-size: 14px; transition: transform 0.15s; }
.gv-sec.is-collapsed .gv-sec__h { border-bottom: none; }
.gv-sec.is-collapsed .gv-sec__chev { transform: rotate(-90deg); }
.gv-sec.is-collapsed .gv-sec__body { display: none; }
.gv-sec__body { padding: 16px 18px; }
.gv-sec__body.gv-notes { font-size: 13.5px; color: var(--text-primary-2); line-height: 1.65; }
.gv-sec__body.is-flush { padding: 0; }

/* member tab strip */
.gv-tabs { display: flex; align-items: stretch; gap: 4px; padding: 0 18px; background: #171B22; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.gv-tabs::-webkit-scrollbar { display: none; }
.gv-tab { display: flex; align-items: center; gap: 7px; padding: 11px 16px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; }
.gv-tab i { font-size: 14px; }
.gv-tab:hover { color: var(--text-primary); }
.gv-tab.is-active { color: var(--text-bright); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gold); }

/* member panel */
/* member panel: compact doll column left, the wheel gets the remaining width */
.gv-member { padding: 16px 18px 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start; }
.gv-member__head { font-size: 14.5px; font-weight: 700; color: var(--text-bright); margin-bottom: 12px; }
.gv-skills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gv-skill { display: flex; flex-direction: column; gap: 1px; background: var(--bg-app); border: 1px solid var(--border); border-radius: 8px; padding: 8px 13px; }
.gv-skill b { font-family: var(--font-mono); font-size: 15px; color: var(--text-bright); }
.gv-skill span { font-size: 10.5px; color: var(--text-faint); }
.gv-eqlabel { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.3px; color: var(--text-faint); margin-bottom: 10px; }

/* the guide doll IS the character sheet's paper-doll (.slot markup + styles are shared —
   restyling the sheet's slots restyles this doll too). --ro = read-only tweaks only. */
.paper-doll--ro { justify-content: start; margin: 0; }
.paper-doll--ro .slot { cursor: default; }
.paper-doll--ro .slot.is-filled { cursor: help; }  /* hover shows the item tooltip */
.paper-doll--ro .slot:not(.is-filled):hover { border-color: var(--border); color: var(--text-faint); background: var(--bg-base); }
.paper-doll--ro .imbue-pip { width: 15px; height: 15px; font-size: 9px; cursor: help; }

/* current resistances under the equipment (computed by the sheet's engine) */
.gv-eqlabel--res { margin-top: 18px; }
.gv-resists { display: flex; flex-direction: column; max-width: 300px; }
.gv-res { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--divider-hairline); font-size: 12px; }
.gv-res:last-child { border-bottom: none; }
.gv-res__k { width: 96px; flex: none; font-weight: 600; }
.gv-res__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--bg-base); overflow: hidden; }
.gv-res__fill { display: block; height: 100%; border-radius: 2px; background: var(--positive); }
.gv-res.is-vuln .gv-res__fill { background: var(--voc-knight); }
.gv-res__v { width: 52px; flex: none; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); }
.gv-res.is-zero .gv-res__v { color: var(--text-faint); }
.gv-res.is-vuln .gv-res__v { color: var(--voc-knight); }

/* wheel column: hugs the right edge of the panel, sized to a comfortable ~460px */
.gv-wheel { display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-self: end; }
.gv-wheel__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 4px; color: var(--text-faint); }
.gv-wheel .hgv-member-wheel .wod-build { width: 460px; max-width: 100%; background: var(--bg-app); padding: 18px 18px 14px; }
.gv-wheel .wod-embed-meta { font-size: 15px; }
.gv-wheel .wod-embed-meta b { font-size: 16px; }
.gv-wheel .wod-embed-btn { font-size: 13px; padding: 9px 16px; border-radius: 8px; }
.gv-wheel__empty { min-height: 260px; max-width: 620px; display: grid; place-items: center; gap: 6px; align-content: center; text-align: center;
  border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg-app);
  font-size: 12px; color: var(--text-faint); padding: 14px; }
.gv-wheel__empty i { font-size: 22px; color: var(--text-faint); }

/* route floor tabs */
.gv-floors { margin-left: auto; display: flex; gap: 5px; }
.gv-floor { font-size: 11.5px; font-weight: 600; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 6px; padding: 4px 11px; background: none; cursor: pointer; font-family: inherit; }
.gv-floor.is-active { color: #0E1014; background: var(--gold); border-color: var(--gold); font-weight: 700; }
.gv-route-legend { display: flex; align-items: center; gap: 16px; padding: 11px 18px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.gv-route-legend .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 1.5px solid #0E1014; box-shadow: none; }
.gv-route-legend .cred { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.gv-route-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gv-route-legend .sk { color: var(--voc-knight); font-size: 13px; }

/* info rail */
.gv-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.gv-rail__toc { background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; padding: 6px 0; }
.gv-rail__toc-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.3px; color: var(--text-faint); padding: 10px 16px 6px; }
.gv-toc-link { display: flex; align-items: center; gap: 9px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; }
.gv-toc-link:hover { color: var(--text-primary); }
.gv-toc-link.is-active { color: var(--gold-bright); font-weight: 600; box-shadow: inset 2.5px 0 0 var(--gold); }
.gv-info { background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; overflow: hidden; }
.gv-info__h { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.gv-info__h i { color: var(--gold); font-size: 15px; }
.gv-info__h b { font-size: 13.5px; font-weight: 700; color: var(--text-bright); }
.gv-info__body { padding: 6px 16px 12px; }
.gv-kv { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--divider-hairline); font-size: 12.5px; }
.gv-kv:last-child { border-bottom: none; }
.gv-kv__k { color: var(--text-faint); }
.gv-kv__v { color: var(--text-primary); font-weight: 600; text-align: right; }
.gv-kv__v.is-boss { color: var(--voc-knight); }
.gv-share { background: linear-gradient(160deg, #1C212A, #171B22); border: 1px solid var(--border); border-radius: 11px; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; }
.gv-share__h { display: flex; align-items: center; gap: 8px; }
.gv-share__h i { color: var(--gold); font-size: 15px; }
.gv-share__h b { font-size: 13.5px; font-weight: 700; color: var(--text-bright); }
.gv-share p { margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.gv-share__link { display: flex; align-items: center; gap: 8px; background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); overflow: hidden; white-space: nowrap; cursor: pointer; }
.gv-share__link span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gv-share__link i { margin-left: auto; flex: none; color: var(--gold-bright); font-size: 13px; }
.gv-makeyours { display: flex; align-items: center; gap: 11px; background: transparent; border: 1.5px dashed var(--border-strong); border-radius: 11px; padding: 13px 15px; text-decoration: none; }
.gv-makeyours:hover { border-color: rgba(210,172,82,0.5); }
.gv-makeyours__ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: rgba(210,172,82,0.10); color: var(--gold-bright); font-size: 15px; }
.gv-makeyours__t { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.gv-makeyours__t b { color: var(--text-bright); display: block; font-size: 13px; }

/* detail: hide the embedded sheet's basics card + gear head (parent shows heading/skills/EQUIPMENT) */
.is-readonly.is-compact:has(#paper-doll) .card:has(#sheet-basics),
.is-readonly.is-compact:has(#paper-doll) .sheet-gear .card__head { display: none; }

/* ---- wide monitors: cap + center the content column so sections don't stretch
   edge-to-edge. Full-bleed sections (hero/page-head/toolbars/footer) keep their
   background + border across the viewport and align their CONTENT to the same
   1376px column via symmetric padding; plain sections get a max-width + width:100%
   (they're flex items of .content.rd — without width:100% auto margins would
   shrink them to fit-content instead of filling the column). ---- */
@media (min-width: 1500px) {
  .rd-hero, .rd-head, .gv-hero, .gidx-bar, .rd-foot {
    padding-left: calc((100% - 1376px) / 2); padding-right: calc((100% - 1376px) / 2);
  }
  .gv-grid, .gidx-res, .rd-today, .rd-sec, .rd-newsgrid {
    max-width: 1440px; width: 100%; margin-left: auto; margin-right: auto;
  }
}
/* .rd-today sets display:grid, which beats the [hidden] UA rule — restore it */
.rd-today[hidden] { display: none; }
/* larger gear + wheel once there's room */
@media (min-width: 1280px) {
  .gv-member { padding: 20px 24px 24px; gap: 34px; }
  .gv-wheel .hgv-member-wheel .wod-build { width: 520px; }
}

@media (max-width: 900px) {
  .gv-grid { grid-template-columns: minmax(0, 1fr); } .gv-rail { position: static; }
  .gv-member { grid-template-columns: minmax(0, 1fr); }
  .gv-wheel { justify-self: stretch; }
  .gv-wheel .hgv-member-wheel .wod-build { width: 100%; }
  .gv-hero__row { flex-wrap: wrap; } .gv-hero__actions { margin-left: 0; width: 100%; } .gv-hero__actions .btn { flex: 1; justify-content: center; }
}
@media (max-width: 560px) {
  #hgv.content.rd { padding: 0; }   /* full-bleed hero on mobile (override the old hunt-guide 10px inset) */
  .gv-hero { padding: 20px 16px 18px; } .gv-hero h1 { font-size: 23px; } .gv-grid { padding: 16px; gap: 16px; }
}

/* ---- World map planner (map.html) ---- */
/* the map page is app-like: the card fills the viewport under the topbar (content pads 16px);
   pm-body flexes to whatever remains after the share bar / hint, no viewport math anywhere */
.pm-card { display: flex; flex-direction: column; overflow: hidden; height: calc(100vh - var(--topbar-h) - 32px); height: calc(100dvh - var(--topbar-h) - 32px); min-height: 480px; }
.pm-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px 14px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pm-bar__title { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: .2px; }
.pm-bar__title i { color: var(--gold); font-size: 16px; }
/* vertical tool rail on the left of the map (drops back to a horizontal bar on small screens) */
.pm-tools { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; padding: 10px 7px; border-right: 1px solid var(--border); background: var(--bg-panel); overflow-y: auto; }
.pm-group { display: grid; grid-template-columns: repeat(2, auto); justify-items: center; align-items: center; gap: 3px; padding: 3px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.pm-tool { width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 5px; color: var(--text-muted); font-size: 15px; cursor: pointer; padding: 0; }
.pm-tool:hover { color: var(--text-bright); background: var(--bg-raised); }
.pm-tool.is-active { color: var(--gold-bright); background: rgba(210,172,82,.12); }
.pm-tool:disabled { opacity: .32; cursor: default; background: none; color: var(--text-muted); }
.pm-swatch { width: 21px; height: 21px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; margin: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.pm-swatch.is-active { border-color: var(--text-bright); }
.pm-swatch:disabled { opacity: .32; cursor: default; }
.pm-sizebtn .pm-sizedot { display: inline-block; border-radius: 50%; background: currentColor; }
.pm-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #d9a441; animation: pm-pulse 1.2s ease-in-out infinite; }
.pm-status.is-live .pm-dot { background: var(--positive); animation: none; }
@keyframes pm-pulse { 50% { opacity: .35; } }
.pm-who { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); }
.pm-who b { color: var(--text-bright); }
.pm-who i { color: var(--gold); font-size: 14px; }
.pm-hint { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); padding: 8px 14px; border-bottom: 1px solid var(--border); background: rgba(210,172,82,.04); }
.pm-hint i { color: var(--gold); font-size: 15px; flex: 0 0 auto; }
/* the hidden ATTRIBUTE must always win inside the planner card — author display rules on
   .pm-status/.pm-who/.pm-side/.pm-hint etc. would otherwise override it (solo mode showed
   a stray "connecting…" chip + empty roster panel) */
.pm-card [hidden] { display: none !important; }
.pm-map { height: auto; background: #000; }
.pm-map.is-drawing { cursor: crosshair; touch-action: none; }
/* ^ touch-action matters: draw mode disables leaflet dragging, which drops leaflet's own
   touch-action:none — without this, finger-drawing on mobile pans the page instead */
.pm-map.is-drawing .leaflet-interactive { cursor: crosshair; }
.pm-map.is-erasing, .pm-map.is-erasing .leaflet-interactive { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cg%20transform%3D%22rotate%28-45%2011%2011%29%22%3E%3Crect%20x%3D%223.5%22%20y%3D%227%22%20width%3D%2215%22%20height%3D%228.5%22%20rx%3D%222%22%20fill%3D%22%23e9ce86%22%20stroke%3D%22%2314171d%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M5.5%207h4v8.5h-4a2%202%200%200%201-2-2v-4.5a2%202%200%200%201%202-2z%22%20fill%3D%22%23edeff3%22%20stroke%3D%22%2314171d%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 11 11, pointer; }
@media (max-width: 640px) { .pm-map { min-height: 300px; } }
/* sync-view toggle (map planner): gold "on" state for a small btn */
.btn.is-on { color: var(--gold-bright); border-color: var(--gold); background: rgba(210,172,82,.08); }
/* map planner V2: text labels + icon markers */
.pm-noteicon, .pm-markicon { background: none !important; border: none !important; }
.pm-note { position: absolute; transform: translate(-50%, -135%); white-space: nowrap; font: 600 12px/1.5 var(--font-sans);
  background: rgba(14,16,20,.9); border: 1px solid; border-radius: 6px; padding: 2px 8px; }
.pm-markicon i { display: block; text-align: center; font-size: 20px; line-height: 22px; text-shadow: 0 1px 3px rgba(0,0,0,.95); }
.pm-map.is-placing { cursor: crosshair; }
.pm-map.is-erasing .leaflet-marker-icon { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Cg%20transform%3D%22rotate%28-45%2011%2011%29%22%3E%3Crect%20x%3D%223.5%22%20y%3D%227%22%20width%3D%2215%22%20height%3D%228.5%22%20rx%3D%222%22%20fill%3D%22%23e9ce86%22%20stroke%3D%22%2314171d%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M5.5%207h4v8.5h-4a2%202%200%200%201-2-2v-4.5a2%202%200%200%201%202-2z%22%20fill%3D%22%23edeff3%22%20stroke%3D%22%2314171d%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 11 11, pointer; }
.pm-note-input { position: absolute; z-index: 900; transform: translate(-50%, -135%); width: 180px;
  background: var(--bg-panel); color: var(--text-bright); border: 1px solid var(--gold); border-radius: 6px;
  font: 500 12.5px var(--font-sans); padding: 5px 9px; outline: none; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.pm-iconbtn i { font-size: 16px; }
/* map planner V3: presence roster panel + custom colour input (middle-drag pan is JS-only) */
.pm-body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.pm-body .pm-map { flex: 1; min-width: 0; }
.pm-side { width: 200px; flex: 0 0 200px; border-left: 1px solid var(--border); background: var(--bg-panel); display: flex; flex-direction: column; }
.pm-side__h { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); padding: 12px 12px 8px; }
.pm-side__h i { color: var(--gold); font-size: 14px; }
.pm-name { margin: 0 10px 10px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-bright); font: 500 12.5px var(--font-sans); padding: 6px 9px; outline: none; }
.pm-name:focus { border-color: var(--gold); }
.pm-people { list-style: none; margin: 0; padding: 0 6px 10px; overflow-y: auto; flex: 1; }
.pm-person { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-primary); padding: 6px 8px; border-radius: 6px; }
.pm-person.is-you { background: rgba(210,172,82,.07); }
.pm-person__dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pm-person__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-you { margin-left: auto; font-size: 10px; color: var(--gold); border: 1px solid rgba(210,172,82,.4); padding: 0 5px; border-radius: 999px; flex: 0 0 auto; }
#pm-custom { width: 25px; height: 25px; padding: 0; border: none; background: none; cursor: pointer; margin: 2px; }
#pm-custom::-webkit-color-swatch-wrapper { padding: 2px; }
#pm-custom::-webkit-color-swatch { border-radius: 50%; border: 2px dashed var(--border-strong); }
#pm-custom::-moz-color-swatch { border-radius: 50%; border: 2px dashed var(--border-strong); }
#pm-custom:disabled { opacity: .32; cursor: default; }
@media (max-width: 900px) {
  .pm-body { flex-direction: column; }
  .pm-side { width: auto; flex: none; border-left: none; border-top: 1px solid var(--border); max-height: 170px; }
  .pm-tools { flex-direction: row; flex-wrap: wrap; justify-content: center; border-right: none; border-bottom: 1px solid var(--border); padding: 8px; height: auto; min-height: 0; }
  .pm-group { display: flex; flex-direction: row; }
  /* undo/clear belong on the top row beside the mode buttons, not wherever the wrap drops them */
  .pm-tools .pm-group[aria-label="Mode"] { order: 1; }
  .pm-tools .pm-group[aria-label="History"] { order: 2; }
  .pm-tools .pm-colors { order: 3; }
  .pm-tools #pm-sizes { order: 4; }
  .pm-tools #pm-icons { order: 5; }
  /* finger-sized targets (map floor/zoom controls are shared with the hunt-guide maps) */
  .pm-tool { width: 36px; height: 34px; font-size: 17px; }
  .pm-swatch { width: 23px; height: 23px; }
  #pm-custom { width: 27px; height: 27px; }
  .hunt-floorstep__btn { width: 36px; height: 33px; }
  .hunt-zoom button { width: 36px; height: 34px; }
}
/* live cursors (teammates' pointers) */
.pm-cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 640; }
.pm-cur { position: absolute; top: 0; left: 0; display: flex; align-items: flex-start; gap: 3px; transition: transform .09s linear; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)); }
.pm-cur svg { display: block; flex: 0 0 auto; }
.pm-cur span { font: 600 10.5px var(--font-sans); color: #0e1014; background: var(--pc, #e9ce86); border-radius: 4px; padding: 1px 5px; margin-top: 9px; white-space: nowrap; }
/* ---- Stamina redesign: hero spectrum + hunt countdowns + calc grid ---- */
.st-hero { margin-bottom: 18px; }
.st-mono { font-family: var(--font-mono); font-size: 11px; }
.st-hero__body { padding: 20px 22px 16px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.st-time--big .input { width: 72px; padding: 12px 0; font: 700 19px var(--font-mono); }
.st-specwrap { flex: 1; min-width: 340px; }
.st-spec { position: relative; padding: 34px 0 20px; cursor: ew-resize; touch-action: none; user-select: none; }
.st-spec__label { position: absolute; top: 0; transform: translateX(-50%); background: var(--bg-base); border: 1px solid var(--gold); color: var(--gold-bright); font: 700 12px var(--font-mono); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.st-spec__track { position: relative; height: 26px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-base); overflow: hidden; }
.st-spec__dim { position: absolute; inset: 0; display: flex; opacity: .16; }
.st-spec__dim i, .st-spec__strip i { display: block; height: 100%; }
.st-seg--low { width: 33.333%; background: #d99a4a; }
.st-seg--lowf { width: 33.333%; background: #b57d3c; }
.st-seg--ok { width: 59.524%; background: #4f9d6c; }
.st-seg--bonus { width: 7.143%; background: var(--gold); }
.st-seg--bonusf { width: 7.143%; background: linear-gradient(90deg, #b8913e, var(--gold-bright)); }
.st-spec__fillclip { position: absolute; top: 0; bottom: 0; left: 0; overflow: hidden; }
.st-spec__strip { display: flex; height: 100%; }
.st-spec__vline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22); }
.st-spec__vline--gold { background: rgba(233,206,134,.55); }
.st-spec__glow { position: absolute; top: 34px; height: 26px; left: 92.857%; right: 0; border-radius: 0 999px 999px 0; box-shadow: 0 0 16px rgba(233,206,134,.4); animation: st-glow 3s ease-in-out infinite; pointer-events: none; }
@keyframes st-glow { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.st-spec__mark { position: absolute; top: 28px; height: 38px; width: 2px; background: var(--text-bright); margin-left: -1px; border-radius: 2px; pointer-events: none; }
.st-spec__knob { position: absolute; top: 47px; width: 13px; height: 13px; border-radius: 50%; background: var(--text-bright); border: 2px solid var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 8px rgba(233,206,134,.6); pointer-events: none; }
.st-spec__tick { position: absolute; bottom: 0; font: 500 10.5px var(--font-mono); color: var(--text-faint); }
.st-spec__tick--mid { transform: translateX(-50%); }
.st-spec__tick--bonus { transform: translateX(-100%); color: var(--gold); padding-right: 5px; background: var(--bg-card); z-index: 1; }
.st-legend { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.st-legend span { display: inline-flex; align-items: center; gap: 7px; }
.st-legend .st-dot { width: 9px; height: 9px; margin-top: 0; }
.st-hunt { border-top: 1px solid var(--divider-hairline); padding: 14px 22px 16px; display: flex; gap: 20px 44px; align-items: flex-start; flex-wrap: wrap; }
.st-hunt__k { font: 500 11px var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; padding-top: 6px; }
.st-stat__l { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted-2); }
.st-stat__v { font: 700 18px var(--font-mono); color: var(--text-bright); margin-top: 4px; }
.st-stat__v--gold { color: var(--gold-bright); }
.st-stat__s { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 18px; align-items: start; }
.st-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.st-res { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; margin-top: 4px; }
.st-res--gold { border-color: var(--gold); }
.st-res__k { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted-2); }
.st-res--gold .st-res__k { color: var(--gold); }
.st-res__v { font: 800 38px var(--font-mono); color: var(--text-bright); line-height: 1.15; margin: 6px 0 2px; }
.st-res__s { font-size: 12.5px; color: var(--text-muted); }
.st-zonechip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.st-zonechip .st-dot { width: 9px; height: 9px; margin-top: 0; }
.st-tip { margin-top: 18px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.65; }
.st-tip > i { color: var(--gold); font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
.st-tip b { color: var(--gold-bright); }
@media (max-width: 640px) {
  .st-grid { grid-template-columns: 1fr; }
  /* flex-basis 100%, not width — flex:1 (basis 0) ignores width, which squeezed the
     draggable spectrum to ~110px beside the time inputs instead of wrapping it */
  .st-specwrap { flex: 1 1 100%; min-width: 0; }
  .st-hero__body { padding: 16px 14px 14px; gap: 18px; }
  .st-hunt { gap: 16px 26px; padding: 14px 14px 16px; }
  .st-presets .btn { padding-top: 7px; padding-bottom: 7px; }
}
/* stamina polish: mock-faithful width cap, depth, spinner removal + drag/legend feedback */
#st-calc { max-width: 1172px; margin: 0 auto; } /* 1120 content + the 26px side paddings */
#st-calc .card { box-shadow: 0 12px 28px rgba(0,0,0,.22); }
#st-calc input[type="number"]::-webkit-inner-spin-button,
#st-calc input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#st-calc input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.st-spec.is-dragging .st-spec__knob { transform: translate(-50%, -50%) scale(1.35); }
.st-spec.is-dragging .st-spec__label { transform: translateX(-50%) translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.st-spec__knob, .st-spec__label { transition: transform .12s, box-shadow .12s; }
.st-legend span { opacity: .75; transition: opacity .15s; }
.st-legend span.is-now { opacity: 1; color: var(--text-bright); }
.st-legend span.is-now .st-dot { box-shadow: 0 0 7px currentColor; }
/* stamina: zone-coloured result border (calc 2 reflects the zone you'd land in) */
.st-res--bonus { border-color: var(--gold); }
.st-res--ok { border-color: rgba(79,157,108,.65); }
.st-res--low { border-color: rgba(217,154,74,.65); }
.st-res--out { border-color: rgba(192,90,82,.65); }
.st-tip p { margin: 0 0 7px; }
.st-tip p:last-child { margin-bottom: 0; }

/* ---- Stash appraiser (stash.html) ---- */
#stash-page .is-hidden { display: none; }
.stash-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 20px; text-align: center;
  border: 2px dashed var(--border-strong); border-radius: var(--radius); cursor: pointer; transition: border-color .12s, background .12s; }
.stash-drop:hover, .stash-drop.is-over, .stash-drop:focus-visible { border-color: var(--gold); background: rgba(210,172,82,.05); outline: none; }
.stash-drop > i { font-size: 30px; color: var(--gold); }
.stash-drop__t { font-size: 15px; font-weight: 600; color: var(--text-bright); }
.stash-drop__s { font-size: 12.5px; color: var(--text-muted); }
.stash-drop__s b { color: var(--text-primary); font-family: var(--font-mono); }
.stash-link { color: var(--gold-bright); cursor: pointer; text-decoration: underline; }
.stash-place { display: flex; gap: 8px; align-items: baseline; margin-bottom: 10px; padding: 9px 13px; font-size: 12.5px; line-height: 1.5; color: var(--text-primary); background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: var(--radius-sm); }
.stash-place b { color: var(--gold); }
.stash-place.is-done { background: color-mix(in srgb, var(--positive) 10%, transparent); border-color: color-mix(in srgb, var(--positive) 35%, transparent); }
.stash-place.is-done b { color: var(--positive); }
.stash-gridwrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #000; margin-bottom: 12px; }
.stash-canvas { display: block; image-rendering: pixelated; max-width: 100%; }
.stash-gridctl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.stash-gridctl label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted-2); }
.stash-gridctl .input { width: 84px; padding: 7px 9px; font-family: var(--font-mono); }
.stash-gridctl .sheet-action { margin-top: 0; }
#st-scan { border-color: var(--gold); color: var(--gold-bright); }
.stash-progress { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.stash-progress span { font-size: 12px; color: var(--text-muted); }
.stash-progress__track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--gold) 16%, var(--bg-base)); overflow: hidden; }
.stash-progress__bar { height: 100%; background: var(--gold); width: 0; transition: width .2s; }
.stash-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 12px; }
.stash-fil:active, .stash-preset:active, .stash-copy button:active, .stash-startover:active, #stash-page .sheet-action:active { transform: translateY(1px); }
.stash-tot { background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 14px; display: flex; flex-direction: column; }
.stash-tot span { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-faint); }
.stash-tot b { font-size: 17px; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.stash-note { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: flex-start; gap: 7px; }
.stash-note i { color: var(--gold); flex: 0 0 auto; margin-top: 1px; }
.stash-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }
.stash-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); }
.stash-row .mkt-sprite { width: 30px; height: 30px; image-rendering: pixelated; flex: 0 0 auto; }
.stash-row__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stash-row__n { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stash-row__v { font-size: 11px; color: var(--text-faint); }
.stash-row__x { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 0 5px; border-radius: 5px; margin-left: 2px; }
.stash-canvas { cursor: crosshair; }
/* hover-to-inspect overlay (fixed-position, drawn over the screenshot) */
.stash-hi { position: fixed; z-index: 60; pointer-events: none; border: 2px solid var(--gold); border-radius: 3px; background: rgba(233, 206, 134, .14); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 14px rgba(233, 206, 134, .45); }
.stash-hi--miss { border-color: var(--text-muted-2); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(0, 0, 0, .65); }
.stash-tip { position: fixed; z-index: 61; pointer-events: none; display: flex; gap: 10px; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }
.stash-tip__img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; align-self: center; }
.stash-tip__body { min-width: 0; }
.stash-tip__name { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.stash-tip__name b { color: var(--gold); font-family: var(--font-mono); font-weight: 700; }
.stash-tip__verdict { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.stash-tip__val { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-bright); margin-top: 3px; }
.stash-tip__u { color: var(--text-faint); font-size: 11px; }
.stash-tip__ok { font-size: 11px; color: var(--positive); }
.stash-tip__flag { font-size: 11px; color: var(--gold); }
.stash-tip__taught { font-size: 11px; color: var(--gold); font-weight: 600; }
/* taught-templates (correction memory) badge + toast */
.stash-learn { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-muted); }
.stash-learn__clr { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 5px; padding: 1px 8px; font-size: 11px; cursor: pointer; }
.stash-learn__clr:hover { color: var(--text-primary); border-color: var(--text-muted-2); }
.stash-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); z-index: 80; max-width: 90vw; padding: 10px 16px; background: var(--bg-card); border: 1px solid var(--gold); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); color: var(--text-primary); font-size: 13px; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.stash-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.stash-row__price { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-bright); white-space: nowrap; }
.stash-row--keep { border-left: 3px solid var(--gold); }
.stash-row--market { border-left: 3px solid var(--positive); }
.stash-row--market .stash-row__price { color: var(--positive); }
.stash-row--npc { border-left: 3px solid var(--text-muted-2); }
.stash-row--none { border-left: 3px solid var(--text-faint); }
.stash-row--task { border-left: 3px solid #6ea8fe; }
.stash-row--task .stash-row__price { color: #6ea8fe; }
.stash-row.is-flagged { opacity: .72; border-style: dashed; }
.stash-flag { color: var(--gold); font-size: 13px; cursor: help; }
/* stash click-to-correct editor */
.stash-row { cursor: pointer; }
.stash-row:hover { border-color: var(--border-strong); }
.stash-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.stash-edit { grid-column: 1 / -1; background: var(--bg-base); border: 1px solid var(--gold); border-radius: var(--radius-sm); padding: 10px; margin: -2px 0 4px; }
.stash-edit__bar { display: flex; gap: 8px; align-items: stretch; }
.stash-edit__thumb { width: 46px; height: 46px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; border-radius: var(--radius-sm); border: 1px solid var(--gold); background: var(--bg-card); align-self: center; }
.stash-edit__in { flex: 1; min-width: 0; }
.stash-edit__loc { margin-top: 9px; }
.stash-edit__loc > span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.stash-edit__loc canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.stash-edit__merged { display: flex; align-items: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--text-muted); }
.stash-edit__merged i { color: var(--text-faint); }
.stash-edit__rm { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 12px; padding: 0 12px; cursor: pointer; white-space: nowrap; }
.stash-edit__rm:hover { border-color: var(--voc-knight); color: var(--voc-knight); }
.stash-edit__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; margin-top: 8px; }
.stash-edit__list:empty { margin-top: 0; }
.stash-edit__opt { display: flex; align-items: center; gap: 8px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; cursor: pointer; font-size: 12.5px; color: var(--text-primary); text-align: left; }
.stash-edit__opt:hover { border-color: var(--gold); background: rgba(210,172,82,.07); }
.stash-edit__opt img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.stash-tot--gold { border-color: rgba(210,172,82,.4); background: rgba(210,172,82,.06); }
.stash-tot--gold b { color: var(--gold-bright); }
/* action bar: quick-view presets + faceted filters + copy list + start-over */
.stash-actions { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 12px; }
.stash-actions:empty { display: none; }
.stash-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stash-facets { display: flex; flex-wrap: wrap; gap: 10px 18px; padding-top: 9px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.stash-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stash-fgroup__l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-right: 2px; }
.stash-fil { background: var(--bg-base); border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
.stash-fil b { color: var(--text-bright); font-variant-numeric: tabular-nums; margin-left: 2px; }
.stash-fil:hover { color: var(--text-primary); }
.stash-fil.is-on { background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold); }
.stash-fil.is-on b { color: var(--gold); }
.stash-preset { background: color-mix(in srgb, var(--gold) 7%, var(--bg-base)); border: 1px solid var(--border); color: var(--text-primary); border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.stash-preset:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.stash-preset.is-on { background: color-mix(in srgb, var(--gold) 20%, transparent); border-color: var(--gold); color: var(--gold-bright, var(--gold)); }
.stash-copy { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stash-copy button { background: var(--bg-base); border: 1px solid var(--border); color: var(--text-primary); border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; }
.stash-copy button:hover:not(:disabled) { border-color: var(--text-muted-2); }
.stash-copy button:disabled { opacity: .4; cursor: default; }
.stash-shown { font-size: 12px; color: var(--text-muted); margin-right: auto; }
.stash-shown b { color: var(--text-bright); font-variant-numeric: tabular-nums; }
.stash-startline { font-size: 11.5px; color: var(--text-faint); margin-left: 4px; }
.stash-startover { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-size: 11.5px; padding: 0; }
.stash-startover:hover { color: var(--negative, #e05a5a); }
.stash-empty { padding: 22px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
.stash-empty__reset { margin-left: 6px; }
/* opt-in: donate corrected sprites to the training set */
.stash-contribute { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--gold) 24%, transparent); background: color-mix(in srgb, var(--gold) 6%, transparent); border-radius: var(--radius-sm); font-size: 12px; color: var(--text-muted); cursor: pointer; }
.stash-contribute:has(input:checked) { border-color: color-mix(in srgb, var(--positive) 45%, transparent); background: color-mix(in srgb, var(--positive) 8%, transparent); }
.stash-contribute input { margin: 2px 0 0; accent-color: var(--gold); flex: 0 0 auto; cursor: pointer; }
.stash-contribute b { color: var(--text-primary); font-weight: 600; }
.stash-contribute:hover { color: var(--text-primary); }
.stash-tot--market { border-color: color-mix(in srgb, var(--positive) 40%, transparent); }
.stash-tot--market b { color: var(--positive); }
.stash-tot--npc { border-color: var(--border); }
.stash-tot--npc b { color: var(--text-bright); }
/* mobile overrides — kept LAST in the stash section so they win over the base .stash-* rules above
   (equal specificity, so source order decides; earlier this block sat mid-section and was dead) */
@media (max-width: 560px) {
  .stash-results { grid-template-columns: 1fr; }
  .stash-gridctl .input { width: 68px; }
  .stash-totals { grid-template-columns: 1fr 1fr; gap: 8px; }                   /* tidy 2-col instead of ragged wrap */
  .stash-tot { padding: 8px 11px; }
  .stash-facets { gap: 8px 13px; }
  .stash-edit__list { grid-template-columns: 1fr; }                             /* full-width picker rows — easier to tap */
  .stash-fil, .stash-preset, .stash-copy button { padding-top: 9px; padding-bottom: 9px; }   /* ~40px touch targets */
  .stash-startover { padding: 7px 4px; }                                        /* bigger tap area for a destructive action */
  #stash-page .card__head { flex-wrap: wrap; }                                  /* title + world-select + badge stop crowding */
}