/* =====================================================================
   codex · components
   Pure tokens: every colour, font, texture and ornament comes from
   base.css + the active theme. Static HTML + CSS only.
   ===================================================================== */

/* ---------- reset-ish ---------- */
.codex, .codex *, .codex *::before, .codex *::after { box-sizing: border-box; }
.codex {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" 0;
}
.codex button, .codex input, .codex select { font: inherit; color: inherit; }
.codex button { cursor: pointer; }
.codex h1, .codex h2, .codex h3, .codex h4, .codex p, .codex ul, .codex ol, .codex figure { margin: 0; }
.codex ul, .codex ol { padding: 0; list-style: none; }
.codex :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: var(--num-figures); }

/* ---------- icons: 1:1 slot, white glyph tinted by currentColor ---------- */
.ic {
  display: inline-block; flex: none;
  width: var(--icon-md); height: var(--icon-md);
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.ic--health  { --icon: url("assets/ic-health.svg"); }
.ic--damage  { --icon: url("assets/ic-damage.svg"); }
.ic--burn    { --icon: url("assets/ic-burn.svg"); }
.ic--frost   { --icon: url("assets/ic-frost.svg"); }
.ic--poison  { --icon: url("assets/ic-poison.svg"); }
.ic--armor   { --icon: url("assets/ic-armor.svg"); }
.ic--crit    { --icon: url("assets/ic-crit.svg"); }
.ic--speed   { --icon: url("assets/ic-speed.svg"); }
.ic--range   { --icon: url("assets/ic-range.svg"); }
.ic--healing { --icon: url("assets/ic-healing.svg"); }
.ic--regen   { --icon: url("assets/ic-regen.svg"); }
.ic--ward    { --icon: url("assets/ic-ward.svg"); }
.ic--cleave  { --icon: url("assets/ic-cleave.svg"); }
.ic--thorns  { --icon: url("assets/ic-thorns.svg"); }
.ic--search  { --icon: url("assets/ic-search.svg"); }
.ic--chevron-down  { --icon: url("assets/ic-chevron-down.svg"); }
.ic--chevron-left  { --icon: url("assets/ic-chevron-left.svg"); }
.ic--chevron-right { --icon: url("assets/ic-chevron-right.svg"); }
.ic--close   { --icon: url("assets/ic-close.svg"); }
.ic--filter  { --icon: url("assets/ic-filter.svg"); }
.ic--menu    { --icon: url("assets/ic-menu.svg"); }
/* currencies are full-colour art, not tinted */
.ic--krowns, .ic--lore { background: var(--icon) center / contain no-repeat; -webkit-mask: none; mask: none; }
.ic--krowns  { --icon: url("assets/ic-krowns.svg"); }
.ic--lore    { --icon: url("assets/ic-lore.svg"); }

/* stat colour hooks (fixed by game, see base.css) */
.st--health  { --c: var(--stat-health); }   .st--damage { --c: var(--stat-damage); }
.st--burn    { --c: var(--stat-burn); }     .st--frost  { --c: var(--stat-frost); }
.st--poison  { --c: var(--stat-poison); }   .st--armor  { --c: var(--stat-armor); }
.st--crit    { --c: var(--stat-crit); }     .st--speed  { --c: var(--stat-speed); }
.st--range   { --c: var(--stat-range); }    .st--healing{ --c: var(--stat-healing); }
.st--regen   { --c: var(--stat-regen); }    .st--ward   { --c: var(--stat-ward); }
.st--cleave  { --c: var(--stat-cleave); }   .st--thorns { --c: var(--stat-thorns); }
.st--krowns  { --c: var(--stat-krowns); }   .st--lore   { --c: var(--stat-lore); }

/* rarity hooks */
.r--common    { --r: var(--rarity-common);    --r-ink: var(--rarity-common-ink);    --r-band: var(--rarity-common-band, var(--r));    --r-rim: var(--rarity-common-rim, var(--r-ink)); }
.r--uncommon  { --r: var(--rarity-uncommon);  --r-ink: var(--rarity-uncommon-ink);  --r-band: var(--rarity-uncommon-band, var(--r));  --r-rim: var(--rarity-uncommon-rim, var(--r-ink)); }
.r--rare      { --r: var(--rarity-rare);      --r-ink: var(--rarity-rare-ink);      --r-band: var(--rarity-rare-band, var(--r));      --r-rim: var(--rarity-rare-rim, var(--r-ink)); }
.r--epic      { --r: var(--rarity-epic);      --r-ink: var(--rarity-epic-ink);      --r-band: var(--rarity-epic-band, var(--r));      --r-rim: var(--rarity-epic-rim, var(--r-ink)); }
.r--legendary { --r: var(--rarity-legendary); --r-ink: var(--rarity-legendary-ink); --r-band: var(--rarity-legendary-band, var(--r)); --r-rim: var(--rarity-legendary-rim, var(--r-ink)); }
.r--clan      { --r: var(--rarity-clan);      --r-ink: var(--rarity-clan-ink);      --r-band: var(--rarity-clan-band, var(--r));      --r-rim: var(--rarity-clan-rim, var(--r-ink)); }
.r--special   { --r: var(--rarity-special);   --r-ink: var(--rarity-special-ink);   --r-band: var(--rarity-special-band, var(--r));   --r-rim: var(--rarity-special-rim, var(--r-ink)); }
/* Units page: neutral beasts come from TRANSFORM-only (Special) structures, so they share its colour */
.r--beast     { --r: var(--rarity-special);   --r-ink: var(--rarity-special-ink);   --r-band: var(--rarity-special-band, var(--r));   --r-rim: var(--rarity-special-rim, var(--r-ink)); }

/* ---------- page shell + atmosphere ---------- */
.app { position: relative; min-height: 100%; isolation: isolate; overflow-x: clip; }
.layout { container: app / inline-size; position: relative; }
.atmos {
  position: absolute; inset: 0 0 auto 0; height: 980px; z-index: -1; pointer-events: none;
  background: var(--slot-atmosphere);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
/* key-art add-on: empty unless --slot-keyart is set */
.atmos::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--slot-keyart);
  background-size: cover; background-position: 50% 30%;
  opacity: .62; filter: brightness(.5) saturate(.85) contrast(1.05);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.75) 32%, transparent 78%);
          mask-image: linear-gradient(#000 0%, rgba(0,0,0,.75) 32%, transparent 78%);
}
.app::after { /* painterly grain over everything, very faint */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--slot-grain); opacity: .5; mix-blend-mode: overlay;
}
.wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--page-gutter); }

/* ---------- panel primitive ---------- */
.panel {
  background: var(--slot-panel-texture), var(--color-surface);
  border: var(--slot-frame-border);
  box-shadow: var(--slot-frame-shadow);
  border-radius: var(--radius-lg);
}

/* ---------- divider / ornament ---------- */
.rule { position: relative; flex: 1; height: 9px; min-width: 24px; }
.rule::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; height: 1px;
  background: linear-gradient(90deg, var(--color-line), color-mix(in srgb, var(--color-line) 30%, transparent)); }
.rule::after, .rule > i { content: ""; position: absolute; top: 1px; width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--color-frost, var(--color-line)); box-shadow: 0 0 6px color-mix(in srgb, var(--color-frost, #fff) 60%, transparent); }
.rule::after { right: 1px; }
.rule > i { left: 1px; }
.ornament { height: 16px; background: var(--slot-ornament) center / auto 16px no-repeat; }

/* ---------- logo ---------- */
/* rawstats brand (tools/site/brand.py, docs/branding/README.md): the gem + "rawstats" in Outfit 800 with "raw" in the gem's mid
   blue. Brand-level, so it doesn't take the game theme's display font. */
.logo { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); text-decoration: none; }
.logo__mark { height: 34px; width: auto; flex: none; display: block;
  /* the gem glows (docs/branding/rawstats-header-glow.html, "C · 34 px"): softens its diagonal edges at 100 % zoom; the pale
     inner glow reads as part of the stone, so the stone is 2 px smaller than without it */
  filter: drop-shadow(0 0 3px rgba(150, 215, 245, .55)) drop-shadow(0 0 10px rgba(84, 174, 219, .5)); }
.logo__word { font-family: "Outfit", system-ui, sans-serif; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: #eef1f5; }
.logo__raw { color: #54aedb; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: var(--space-6); height: 64px; }
.topbar__nav { display: flex; gap: 2px; }
.navlink {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  color: var(--color-text-dim); text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap;
  border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out);
}
.navlink:hover { color: var(--color-text); }
.navlink[aria-current="page"] { color: var(--color-frost-bright, var(--color-text)); }
.navlink[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-frost, var(--color-line)), transparent); }
.navlink[aria-current="page"]::before { content: ""; position: absolute; left: calc(50% - 3px); bottom: -1px; width: 6px; height: 6px;
  transform: rotate(45deg); background: var(--color-frost, var(--color-line)); box-shadow: var(--glow-frost, none); }
.buildstamp { margin-left: auto; color: var(--color-text-faint); font-size: var(--fs-xs); white-space: nowrap; font-variant-numeric: var(--num-figures); }
.buildstamp b { color: var(--color-text-dim); font-weight: var(--fw-semibold); }
.iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--color-text-dim); border-radius: var(--radius-sm); }
.iconbtn:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-frost, #fff) 8%, transparent); }
.iconbtn .ic { width: 20px; height: 20px; }
/* narrower windows: the section links move to their own row under the logo and stamp, scrolling sideways if needed */
@media (max-width: 1199px) {
  .topbar { flex-wrap: wrap; height: auto; row-gap: 0; padding-top: 10px; }
  .topbar__nav { order: 3; flex: 1 0 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px;
    margin-inline: -12px; }      /* the first link's text lines up with the logo */
  .topbar__nav::-webkit-scrollbar { display: none; }
  .navlink { flex: none; }
}

/* ---------- Search (the top bar's box, static/search.js) ----------
   Scoped to .topbar: the filter bars' own .search labels share the class name. The box takes over the stamp's
   margin-left: auto so the two sit together at the right; the field grows to the left over the nav's spare space
   while focused (absolutely positioned, so the nav never reflows). The list sits below .tiplayer. */
.topbar .search { position: relative; z-index: calc(var(--z-sticky) + 5); display: block; flex: none; width: 200px; max-width: none;
  height: 36px; margin-left: auto; }
.topbar .buildstamp { margin-left: 0; }
.search__toggle { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--color-text-dim); border-radius: var(--radius-sm); cursor: pointer; }
.search__toggle:hover, .search__toggle[aria-expanded="true"] { color: var(--color-text); background: color-mix(in srgb, var(--color-frost, #fff) 8%, transparent); }
.search__toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.search__ic { display: block; }
.search__field { position: absolute; right: 0; top: 0; width: 200px; height: 36px; transition: width var(--dur-fast) var(--ease-out); }
.search__field:focus-within { width: 300px; }
.topbar .search input { width: 100%; height: 100%; padding: 0 34px 0 12px; box-sizing: border-box; font: inherit; font-size: var(--fs-sm); }
.topbar .search input::-webkit-search-cancel-button { display: none; }
.search__hint { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 18px; height: 20px; box-sizing: border-box;
  display: grid; place-items: center; padding: 0 5px; border-radius: 4px; border: 1px solid var(--color-border-strong);
  color: var(--color-text-faint); font: var(--fw-semibold) 11px/1 var(--font-ui); pointer-events: none; }
.search__field:focus-within .search__hint { display: none; }
.search__list { position: absolute; right: 0; top: calc(100% + 6px); box-sizing: border-box; width: min(460px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: var(--radius-md);
  background: url("assets/knot-tile.svg") 0 0 / 48px 64px repeat, var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-3), 0 0 0 1px #05080c;
  color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.4; }
.search__list[hidden] { display: none; }
.search__group + .search__group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border); }
.search__head { padding: 6px 8px 4px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-weight: var(--fw-semibold); color: var(--color-text-faint); }
.search__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.search__opt.is-active { background: color-mix(in srgb, var(--color-frost, #fff) 10%, transparent); color: var(--color-text); }
.search__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; }
.search__icon .hexicon { --s: 28px; }
.search__icon .portrait { --p: 28px; }
.search__round { display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid var(--color-border-strong);
  background: radial-gradient(closest-side, #1d2a38, #0e151e); box-sizing: border-box; }
.search__round img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.search__kind-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--color-border);
  background: var(--color-surface-inset); color: var(--color-frost, var(--color-text-dim)); font-size: 13px; line-height: 1; }
/* scoped: the base .cardicon rules come later in this file and would win over a bare .cardicon--xs */
.search__icon .cardicon--xs { width: 30px; height: 30px; filter: none; }
.search__icon .cardicon--xs img { padding: 20%; clip-path: polygon(50% 3.5%, 96.5% 50%, 50% 96.5%, 3.5% 50%); }
.search__icon .cardicon--xs .hexicon__cost { display: none; }
.search__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.search__name { color: var(--color-text); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__snip { color: var(--color-text-dim); font-size: var(--fs-xs); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search__list mark { background: none; color: var(--color-accent); font-weight: 600; }
.search__label { flex: none; align-self: flex-start; margin-top: 3px; font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--color-text-faint); }
.search__more { min-height: 34px; padding-left: 48px; color: var(--color-frost-bright, var(--color-text)); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.search__msg { padding: 10px 8px; color: var(--color-text-faint); }
@media (hover: none) { .search__hint { display: none; } }
/* below 1200px the nav is its own row: box and stamp stay on the first row, next to the logo */
@media (max-width: 1199px) {
  .topbar .search { order: 2; margin-left: auto; }
  .topbar .buildstamp { order: 2; }
}
/* only the toggle in the top bar, which opens the field: phones, and 1200–1399px, where logo, wordmark, nav, a 200px
   field and the stamp don't fit on one row (checked at 1200px: 50px short) */
@media (min-width: 1200px) and (max-width: 1399px) {
  .topbar .search { width: auto; height: 44px; }
  .search__toggle { display: grid; }
  .search__field { display: none; }
  .search.is-open .search__field { display: block; top: calc(100% + 4px); width: 300px; height: 36px; transition: none; }
}
/* phones: the field full width under the top bar */
@media (max-width: 600px) {
  .topbar { position: relative; }
  .topbar .search { position: static; width: auto; height: 44px; }
  .search__toggle { display: grid; }
  .search__field { display: none; }
  .search.is-open .search__field { display: block; position: absolute; left: 16px; right: 16px; top: 100%; width: auto; height: 44px;
    z-index: calc(var(--z-sticky) + 5); transition: none; }
  .search.is-open .search__list { left: 0; right: 0; width: auto; max-height: calc(100dvh - 160px); }
  .topbar .search input { font-size: 16px; }     /* no zoom on focus (iOS) */
}

/* ---------- game mark: the game's name in a pill (the game's official wordmark, white on transparent) ---------- */
.gameswitch {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  box-shadow: var(--slot-frame-shadow); font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap;
}
.gameswitch__mark { display: block; height: 22px; width: auto; }
.menu { width: 300px; padding: 6px; }
.menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0;
  background: transparent; border-radius: var(--radius-sm); text-align: left; }
.menu__item:hover, .menu__item[aria-checked="true"] { background: color-mix(in srgb, var(--color-frost, #fff) 7%, transparent); }
.menu__item small { display: block; color: var(--color-text-faint); font-size: var(--fs-xs); }
.menu__item[aria-disabled="true"] { opacity: .7; cursor: default; }

/* ---------- page head ---------- */
.pagehead { display: flex; align-items: baseline; gap: 14px; padding-block: 28px 18px; }
.pagehead h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: var(--tracking-display); line-height: 1; }
.pagehead__count { color: var(--color-text-dim); font-variant-numeric: var(--num-figures); }

/* ---------- filter bar ---------- */
.filterbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-block: 1px solid var(--color-border);
}
.filterbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px; padding-block: 10px; }
.search { position: relative; display: flex; align-items: center; flex: 1 1 300px; max-width: 420px; height: 40px; }
.search .ic { position: absolute; left: 12px; color: var(--color-text-faint); pointer-events: none; }
.search input {
  width: 100%; height: 100%; padding: 0 12px 0 36px; border-radius: var(--radius-md);
  background: var(--color-surface-inset); border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5); color: var(--color-text); font-size: var(--fs-sm);
}
.search input::placeholder { color: var(--color-text-faint); }
.search input:focus { outline: none; border-color: var(--color-frost, var(--color-focus)); box-shadow: var(--glow-frost, 0 0 0 2px var(--color-focus)); }
.chipgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px;
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent); color: var(--color-text-dim);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.chip[aria-pressed="true"] {
  color: var(--r-ink, var(--color-text)); border-color: color-mix(in srgb, var(--r, var(--color-frost)) 70%, transparent);
  background: color-mix(in srgb, var(--r, var(--color-frost)) 16%, var(--color-surface));
}
.chip__count { color: var(--color-text-faint); font-variant-numeric: var(--num-figures); font-size: var(--fs-xs); }
.select { position: relative; display: inline-flex; align-items: center; height: 34px; }
.select select {
  appearance: none; -webkit-appearance: none; height: 100%; padding: 0 32px 0 12px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: color-mix(in srgb, var(--color-surface) 75%, transparent);
  color: var(--color-text); font-weight: var(--fw-medium);
}
.select select option { background: var(--color-surface); }
.select .ic { position: absolute; right: 10px; width: 14px; height: 14px; color: var(--color-text-dim); pointer-events: none; }
.filterbar__level { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.label-caps { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-dim); font-weight: var(--fw-semibold); }
.filterbtn { display: none; }

/* ---------- segmented level switch (rhombus active state) ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-md);
  background: var(--color-surface-inset); border: 1px solid var(--color-border); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.seg button {
  position: relative; min-width: 38px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-text-dim); font-weight: var(--fw-semibold); font-variant-numeric: var(--num-figures);
}
.seg button:hover { color: var(--color-text); }
.seg button[aria-pressed="true"] {
  color: var(--color-frost-bright, var(--color-text));
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-frost, #fff) 20%, var(--color-surface)), color-mix(in srgb, var(--color-frost, #fff) 8%, var(--color-surface)));
  box-shadow: var(--glow-frost, inset 0 0 0 1px var(--color-border-strong));
}
.seg button[aria-pressed="true"]::after { content: ""; position: absolute; left: calc(50% - 2.5px); bottom: -4px; width: 5px; height: 5px;
  transform: rotate(45deg); background: var(--color-frost-bright, var(--color-text)); }
.seg--sm button { min-width: 32px; height: 26px; padding: 0 8px; font-size: var(--fs-xs); }

/* ---------- rarity marker ---------- */
.rdia { display: inline-block; flex: none; width: 8px; height: 8px; transform: rotate(45deg);
  background: var(--r); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 8px color-mix(in srgb, var(--r) 80%, transparent); }
.rarity { display: inline-flex; align-items: center; gap: 8px; color: var(--r-ink);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* ---------- banner (painted cloth, torn edge, gold pinstripes) ---------- */
.banner {
  --cloth: var(--r, var(--jewel-indigo, #444));
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 34px 0 14px;
  color: #fff; font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background:
    linear-gradient(var(--slot-banner-stripe), var(--slot-banner-stripe)) 0 4px / 100% 1px no-repeat,
    linear-gradient(var(--slot-banner-stripe), var(--slot-banner-stripe)) 0 calc(100% - 5px) / 100% 1px no-repeat,
    radial-gradient(120% 140% at 20% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(90deg, color-mix(in srgb, var(--cloth) 92%, #000), color-mix(in srgb, var(--cloth) 62%, #000) 85%, color-mix(in srgb, var(--cloth) 40%, #000));
  -webkit-mask: var(--slot-banner-mask) 0 0 / 100% 100% no-repeat; mask: var(--slot-banner-mask) 0 0 / 100% 100% no-repeat;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.banner .rdia { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.7); width: 7px; height: 7px; }

/* ---------- group heading (rarity section) ---------- */
.group { padding-top: 28px; }
.codex .grouphead { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }  /* .codex: beats the h2 margin reset */
.grouphead__count { color: var(--r-ink); font-variant-numeric: var(--num-figures); font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr)); gap: var(--grid-gap); }

/* ---------- tag chip + tag line + keywords + triggers ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-frost, #fff) 7%, var(--color-surface-inset)); border: 1px solid var(--color-border);
  color: var(--color-text); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.tagline { color: var(--color-text-dim); font-size: var(--fs-xs); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw { color: var(--color-text); font-weight: var(--fw-bold); }
.trig {
  margin-right: 6px; white-space: nowrap;
  color: var(--color-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.trig::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 0 1px; vertical-align: .15em; transform: rotate(45deg); background: currentColor; }
.trig--block { display: flex; margin: 0 0 4px; }

/* ---------- stat chip (running text: number + icon + word) ---------- */
/* Values in running text, in-game style: no box, number + icon + word in the stat colour, same baseline as the text. */
.stat { display: inline; color: var(--c); white-space: nowrap; font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); }
.stat .ic { width: 1.2em; height: 1.2em; margin: 0 2px 0 3px; vertical-align: -.24em; }
.stat__n { margin-left: 1px; }
.stat__v { font-weight: var(--fw-bold); }
.sep { opacity: .5; font-weight: var(--fw-regular); margin: 0 1px; }
.stat__n { font-weight: var(--fw-medium); }
.num-plain { font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: var(--num-figures); }

/* compact stat (card footer: icon + number only) */
.mini { display: inline-flex; align-items: center; gap: 4px; color: var(--c); font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); white-space: nowrap; }
.mini .ic { width: 20px; height: 20px; }

/* cost */
.cost { display: inline-flex; align-items: center; gap: 5px; color: var(--stat-krowns); font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); font-size: var(--fs-md); }
.cost .ic { width: 22px; height: 22px; }

/* ---------- structure icon (hex-framed painting) ---------- */
.hexicon {
  --frame-tint: var(--r, #6f7f90);
  position: relative; display: inline-block; flex: none;
  width: calc(var(--s, 56px) * var(--slot-icon-ratio)); height: var(--s, 56px);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
/* Frame modelled on the in-game shop: dark outline, muted rarity band, dark gap, bright rim, dark gap.
   One finished SVG per rarity (--slot-icon-frame-<rarity>); the painting is clipped to the inner hex. */
.hexicon img { display: block; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(50% 10%, 90% 30%, 90% 70%, 50% 90%, 10% 70%, 10% 30%); }
.hexicon::after { /* vignette: painting darkens towards the rim */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  clip-path: polygon(50% 10%, 90% 30%, 90% 70%, 50% 90%, 10% 70%, 10% 30%);
  background: radial-gradient(closest-side, transparent 62%, rgba(0,0,0,.42) 100%); }
.hexicon::before { /* the frame itself, on top */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: var(--hex-frame, var(--slot-icon-frame-common)) 0 0 / 100% 100% no-repeat; }
.r--common    .hexicon, .hexicon.r--common    { --hex-frame: var(--slot-icon-frame-common); }
.r--uncommon  .hexicon, .hexicon.r--uncommon  { --hex-frame: var(--slot-icon-frame-uncommon); }
.r--rare      .hexicon, .hexicon.r--rare      { --hex-frame: var(--slot-icon-frame-rare); }
.r--epic      .hexicon, .hexicon.r--epic      { --hex-frame: var(--slot-icon-frame-epic); }
.r--legendary .hexicon, .hexicon.r--legendary { --hex-frame: var(--slot-icon-frame-legendary); }
.r--clan      .hexicon, .hexicon.r--clan      { --hex-frame: var(--slot-icon-frame-clan); }
.r--special   .hexicon, .hexicon.r--special   { --hex-frame: var(--slot-icon-frame-special); }
/* cost plaque under the hex, overlapping the bottom point (as in the shop) */
.hexicon__cost { position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translate(-50%, 42%);
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 4px; border-radius: 6px;
  background: linear-gradient(180deg, #1d2833, #121a23); color: var(--stat-krowns);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); font-variant-numeric: var(--num-figures); line-height: 1.35; white-space: nowrap;
  box-shadow: 0 0 0 1px #0a0e14, inset 0 0 0 1.5px color-mix(in srgb, var(--color-frost) 55%, transparent), 0 2px 4px rgba(0,0,0,.6); }
.hexicon__cost .ic { width: 18px; height: 18px; }
/* structure card: large hex with the cost plaque on its bottom point (decided 2026-11-01, "variant 1") */
.card .card__head .hexicon { --s: 96px; }
.card .card__head { padding-bottom: 24px; }
.hexicon--24 { --s: 24px; } .hexicon--32 { --s: 32px; } .hexicon--56 { --s: 64px; } .hexicon--96 { --s: 96px; }

/* unit portrait (3/4 render on transparent) */
.portrait { display: block; flex: none; width: var(--p, 28px); height: var(--p, 28px); object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.portrait--lg { --p: 72px; }

/* ---------- structure card ---------- */
.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--slot-panel-texture), var(--color-surface);
  border: var(--slot-frame-border); border-radius: var(--radius-lg);
  box-shadow: var(--slot-frame-shadow);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med);
}
.card::before { /* rarity top edge in the hex-frame language: muted band, dark gap, bright rim line, soft wash */
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 34px; pointer-events: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(var(--r-band), var(--r-band)) 0 0 / 100% 4px no-repeat,
              linear-gradient(#0a0e14, #0a0e14) 0 4px / 100% 1px no-repeat,
              linear-gradient(var(--r-rim), var(--r-rim)) 0 5px / 100% 1px no-repeat,
              linear-gradient(color-mix(in srgb, var(--r-band) 30%, transparent), transparent);
}
/* hover: the hex picks up a soft glow in its rarity colour, like the selected item in the shop */
/* glow starts with the lift: same timing as the card's transform, applied to the header hex only */
/* the glow layer is always there (transparent), so only its alpha animates and it rises with the lift */
.card .card__head .hexicon { transition: filter var(--dur-med) var(--ease-out);
  filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 9px color-mix(in srgb, var(--r-rim) 0%, transparent)); }
.card:hover .card__head .hexicon, .card:focus-within .card__head .hexicon, .card.is-hover .card__head .hexicon {
  filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.55)) drop-shadow(0 0 9px color-mix(in srgb, var(--r-rim) 75%, transparent)); }
.card:hover, .card:focus-within { transform: translateY(var(--lift)); border-color: var(--color-border-strong);
  box-shadow: var(--slot-frame-shadow), var(--shadow-2); background: var(--slot-panel-texture), var(--color-surface-raised); }
.card__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.card__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.card__open { all: unset; cursor: pointer; }
.card__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__open:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 2px 16px 16px; color: var(--color-text-dim); flex: 1;
  font-size: var(--fs-sm); line-height: 1.6; }
.card__body .fx { margin: 0; }
.card__more { align-self: flex-start; margin-top: 2px; color: var(--color-frost); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
/* card footer: unit name + three headline stats; no portrait (too small to recognise, the overlay shows it large) */
.card__foot { gap: 10px; padding: 10px 16px; }
.card__foot .card__stats { gap: 12px; }
.card__foot .mini { gap: 3px; }
.card__foot { display: flex; align-items: center; gap: 10px; margin: 0 1px 1px; padding: 8px 12px; min-height: 44px;
  background: var(--color-surface-inset); border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.card__unit { color: var(--color-text); font-weight: var(--fw-semibold); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card__stats { display: flex; gap: 10px; }
.card__hint { position: absolute; top: 2px; right: 12px; padding: 1px 8px 2px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--r); color: #fff; font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
  opacity: 0; transform: translateY(-3px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); pointer-events: none; }
.card:hover .card__hint, .card.is-hover .card__hint { opacity: 1; transform: none; }
.card.is-hover { transform: translateY(var(--lift)); border-color: var(--color-border-strong); box-shadow: var(--slot-frame-shadow), var(--shadow-2); background: var(--slot-panel-texture), var(--color-surface-raised); }

/* ---------- empty / footer ---------- */
.empty { padding: 48px 0; text-align: center; color: var(--color-text-dim); }
.footer { margin-top: 64px; padding: 28px 0 40px; border-top: 1px solid var(--color-border); color: var(--color-text-dim); font-size: var(--fs-xs); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer__row + .footer__row { margin-top: 10px; }
.footer__fan { color: var(--color-text); font-size: var(--fs-sm); }
.footer .buildstamp { margin-left: auto; }
.footer a { color: var(--color-text-dim); }
.footer a:hover { color: var(--color-text); }
.footer .logo__word { font-size: 19px; }
.footer .logo__mark { height: 27px; }

/* ---------- overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); container: ov / inline-size; display: grid; justify-items: center; align-items: start; padding: 48px 24px; overflow: auto; }
.overlay__scrim { position: absolute; inset: 0; border: 0; padding: 0; background: var(--color-scrim);
  -webkit-backdrop-filter: blur(3px) saturate(.8); backdrop-filter: blur(3px) saturate(.8); cursor: default; }
.ovpanel {
  position: relative; width: 100%; max-width: 1040px; overflow: hidden;
  background: var(--slot-panel-texture), var(--color-surface);
  border: var(--slot-frame-border); border-radius: var(--radius-lg);
  box-shadow: var(--slot-frame-shadow), var(--shadow-3);
}
.ovpanel::before { /* rarity edge */ content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--r); z-index: 2; }
.ovpanel::after { /* key-art add-on, faint */ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--slot-keyart); background-size: cover; background-position: 50% 20%;
  opacity: .1; filter: saturate(.6);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%); mask-image: linear-gradient(180deg, #000, transparent 60%); }
.ovpanel > * { position: relative; z-index: 1; }
.ovbar { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px 0 20px; border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-surface-raised) 85%, transparent), transparent); }
.ovbar__crumb { margin-right: auto; color: var(--color-text-faint); font-size: var(--fs-xs); font-variant-numeric: var(--num-figures); }
.ovbar__sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 4px; }
.ovcols { display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.ovside { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-right: 1px solid var(--color-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--r) 10%, transparent), transparent 300px); }
.ovart { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.6), var(--shadow-2); }
.ovart img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ovart::after { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--color-frost, #fff) 35%, transparent); pointer-events: none; }
.ovart__corner { position: absolute; width: 9px; height: 9px; transform: rotate(45deg); background: var(--color-frost-bright, #fff); z-index: 1; box-shadow: var(--glow-frost, none); }
.ovside__meta { display: flex; align-items: center; justify-content: space-between; }
.ovname { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-display); }
.ovmain { display: flex; flex-direction: column; gap: 26px; padding: 22px 26px 26px; min-width: 0; }
.sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--color-text-dim);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; }
.sechead .rule { opacity: .55; }
.fxrows { display: flex; flex-direction: column; gap: 6px; }
.fxrow { padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface-inset);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.7; }
.unit { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: start; }
.unit__who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 4px; }
.unit__name { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.tablebox { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-inset); }
.ustable { width: 100%; border-collapse: collapse; font-variant-numeric: var(--num-figures); }
.ustable th, .ustable td { height: 36px; padding: 0 14px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.ustable tr:last-child th, .ustable tr:last-child td { border-bottom: 0; }
.ustable thead th { height: 32px; color: var(--color-text-faint); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.ustable thead th:first-child { text-align: left; }
.ustable tbody th { text-align: left; color: var(--c); font-weight: var(--fw-semibold); white-space: nowrap; }
.ustable tbody th span { display: inline-flex; align-items: center; gap: 8px; }
.ustable td { color: var(--color-text); font-weight: var(--fw-semibold); width: 96px; }
.ustable .is-hl { background: color-mix(in srgb, var(--color-frost, #fff) 9%, transparent); box-shadow: inset 1px 0 0 color-mix(in srgb, var(--color-frost, #fff) 35%, transparent), inset -1px 0 0 color-mix(in srgb, var(--color-frost, #fff) 35%, transparent); }
.ustable thead .is-hl { color: var(--color-frost-bright, var(--color-text)); }
.ustable td.is-dim { color: var(--color-text-faint); font-weight: var(--fw-regular); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.source { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-inset); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.source__swatch { width: 14px; height: 16px; flex: none; background: var(--sw, var(--color-frost, #fff));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.syncols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.synlabel { margin-bottom: 8px; color: var(--color-text-dim); font-size: var(--fs-xs); }
.synlabel b { color: var(--color-text); }
.syn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface-inset); color: var(--color-text); font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--r); }
.syn:hover { border-color: var(--color-border-strong); background: color-mix(in srgb, var(--color-frost, #fff) 6%, var(--color-surface-inset)); }
.syn__why { color: var(--color-text-faint); font-weight: var(--fw-regular); font-size: var(--fs-xs); }
.none { color: var(--color-text-faint); font-size: var(--fs-sm); padding: 6px 0; }
.patches { border-radius: var(--radius-md); border: 1px solid var(--color-border); overflow: hidden; }
.patch { display: grid; grid-template-columns: 86px 92px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 40px; padding: 6px 14px;
  background: var(--color-surface-inset); font-variant-numeric: var(--num-figures); }
.patch + .patch { border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.patch__build { color: var(--color-text); font-weight: var(--fw-semibold); }
.patch__date { color: var(--color-text-faint); font-size: var(--fs-xs); }
.patch__what { color: var(--color-text-dim); min-width: 0; }
.patch__delta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: var(--fw-semibold); }
.patch__old { color: var(--color-text-faint); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-faint) 60%, transparent); }
.patch__arrow { color: var(--color-text-faint); }
.patch--buff .patch__new { color: var(--color-buff); }
.patch--nerf .patch__new { color: var(--color-nerf); }
.patch__badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.patch--buff .patch__badge { color: var(--color-buff); background: color-mix(in srgb, var(--color-buff) 13%, transparent); }
.patch--nerf .patch__badge { color: var(--color-nerf); background: color-mix(in srgb, var(--color-nerf) 13%, transparent); }
.patch--note .patch__badge { color: var(--color-text-dim); background: color-mix(in srgb, var(--color-text-dim) 13%, transparent); }
.kbdhint { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; padding: 12px 20px; border-top: 1px solid var(--color-border);
  color: var(--color-text-faint); font-size: var(--fs-xs); background: color-mix(in srgb, var(--color-surface-inset) 70%, transparent); }
.kbdhint span { display: inline-flex; align-items: center; gap: 6px; }
.codex kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: var(--radius-sm);
  font: var(--fw-semibold) 11px/1 var(--font-ui); color: var(--color-text); background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); box-shadow: 0 2px 0 rgba(0,0,0,.6); }

/* ---------- bottom sheet (mobile filters) ---------- */
.sheet { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; justify-content: flex-end; }
.sheet__panel { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 10px 20px 20px; max-height: 88%;
  overflow: auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--slot-panel-texture), var(--color-surface); border-top: var(--slot-frame-border); box-shadow: var(--slot-frame-shadow), var(--shadow-3); }
.sheet__grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--color-border-strong); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__title { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; }
.sheet .chip { height: 44px; }
.sheet .seg button { min-width: 56px; height: 38px; }
.sheet .select { height: 44px; width: 100%; } .sheet .select select { width: 100%; }
.sheet__actions { display: flex; gap: 10px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong); background: transparent; color: var(--color-text); font-weight: var(--fw-semibold); }
.btn--primary { flex: 1; border-color: transparent; color: var(--color-accent-ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 100%, #fff 0%), color-mix(in srgb, var(--color-accent) 80%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), var(--shadow-1); }

/* =====================================================================
   MOBILE — container queries (app width ≤ 720px)
   ===================================================================== */
@container app (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .topbar { gap: 10px; }
  .topbar__nav { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gameswitch { height: 32px; padding: 0 10px; }
  .gameswitch__mark { height: 16px; }
  .logo__word { font-size: 20px; }
  .logo__mark { height: 29px; }
  .pagehead { padding-block: 18px 12px; }
  .pagehead h1 { font-size: 26px; }
  .filterbar__row { flex-wrap: nowrap; min-height: 60px; }
  .filterbar .chipgroup, .filterbar .select, .filterbar__level { display: none; }
  .search { max-width: none; height: 44px; }
  .filterbtn { display: inline-flex; height: 44px; }
  .filterbtn .chip__count { color: var(--color-accent); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .group { padding-top: 22px; }
  .footer { margin-top: 40px; }
  .footer .buildstamp { margin-left: 0; white-space: normal; }
}
@container ov (max-width: 720px) {
  .overlay { padding: 0; align-items: stretch; }
  .ovpanel { max-width: none; min-height: 100%; border-radius: 0; border: 0; }
  .ovbar { position: sticky; top: 0; z-index: 3; height: 56px; padding: 0 4px 0 8px; gap: 2px; background: var(--color-surface-raised); }
  .ovbar__crumb, .ovbar__sep { display: none; }
  .ovbar .seg { margin-right: auto; }
  .ovcols { grid-template-columns: minmax(0, 1fr); }
  .ovside { border-right: 0; border-bottom: 1px solid var(--color-border); padding: 18px 16px; display: grid;
    grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
  .ovart { grid-row: span 3; }
  .ovname { font-size: 30px; }
  .ovside__meta { gap: 12px; justify-content: flex-start; }
  .ovside .tags { grid-column: 1 / -1; margin-top: 8px; }
  .ovmain { padding: 18px 16px 28px; gap: 22px; }
  .unit { grid-template-columns: minmax(0, 1fr); }
  .unit__who { flex-direction: row; justify-content: flex-start; gap: 10px; }
  .portrait--lg { --p: 48px; }
  .ustable th, .ustable td { padding: 0 10px; }
  .ustable td { width: auto; }
  .syncols { grid-template-columns: minmax(0, 1fr); }
  .patch { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 12px; }
  .patch__what { grid-column: 1 / -1; }
  .kbdhint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .codex *, .codex *::before, .codex *::after { transition: none !important; }
}

/* static site: elements hidden by codex.js (filtered cards, closed overlay). Needed because .card, .overlay etc.
   set their own display, which would otherwise override the browser's default [hidden] rule. */
.codex [hidden] { display: none !important; }
/* overlay holder: the chrome is rendered once, the panel content comes from a <template> */
.ovholder { position: relative; }
/* ---------- Fate cards ---------- */
.t--base   { --t-band: var(--tier-base-band);   --t-rim: var(--tier-base-rim);   --card-frame: var(--slot-card-frame-base); }
.t--bronze { --t-band: var(--tier-bronze-band); --t-rim: var(--tier-bronze-rim); --card-frame: var(--slot-card-frame-bronze); }
.t--silver { --t-band: var(--tier-silver-band); --t-rim: var(--tier-silver-rim); --card-frame: var(--slot-card-frame-silver); }
.t--gold   { --t-band: var(--tier-gold-band);   --t-rim: var(--tier-gold-rim);   --card-frame: var(--slot-card-frame-gold); }
.fate { --r-band: var(--t-band); --r-rim: var(--t-rim); --r: var(--t-rim); --r-ink: var(--t-rim); }
/* Fate card icon (default): a diamond with a thin border in the tier colour, like the in-game card picks.
   The art is a free-standing illustration, shown whole and small on dark slate. */
.cardicon { position: relative; display: inline-block; flex: none; width: 86px; height: 86px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cardicon::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in srgb, var(--t-rim) 75%, #fff); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cardicon img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; box-sizing: border-box; padding: 24%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t-rim) 18%, #1d2a38), #121b25 70%);
  clip-path: polygon(50% 2.6%, 97.4% 50%, 50% 97.4%, 2.6% 50%); }
.cardicon .hexicon__cost { transform: translate(-50%, 55%); }
.cardicon.is-placeholder img { padding: 32%; opacity: .5; }
.cardicon--lg { width: 220px; height: 220px; }
.cardicon--lg img { padding: 26%; clip-path: polygon(50% 1.2%, 98.8% 50%, 50% 98.8%, 1.2% 50%); }
.card .cardicon { margin: 4px 6px 10px 2px; }
.fate .card__head { align-items: center; }

/* Alternative, kept on request (2026-11-02): card-shaped tier frame (assets/card-frame-<tier>.svg from tools/site/frames.py).
   Switch it on by adding the class "card-frames" to the .codex root. */
.card-frames .cardicon { width: 78px; height: 104px; filter: drop-shadow(0 0 1px rgba(0,0,0,.95)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.card-frames .cardicon img { padding: 17% 15%;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--t-rim) 22%, transparent), transparent 62%), var(--slot-panel-texture), #1b2530;
  clip-path: polygon(13.7% 10%, 86.3% 10%, 90% 12.8%, 90% 87.2%, 86.3% 90%, 13.7% 90%, 10% 87.2%, 10% 12.8%); }
.card-frames .cardicon::before { z-index: 2; clip-path: none; background: var(--card-frame) 0 0 / 100% 100% no-repeat; }
.card-frames .cardicon .hexicon__cost { transform: translate(-50%, 42%); }
.card-frames .cardicon.is-placeholder img { padding: 28% 26%; }
.card-frames .cardicon--lg { width: 210px; height: 280px; }
.card-frames .cardicon--lg img { padding: 17% 15%; }
.card-frames .card .cardicon { margin: 0 0 4px; }
.card-frames .cardicon--sm { width: 54px; height: 72px; }
.card-frames .cardicon--sm img { padding: 18% 16%; }
/* god glyph: the game's white silhouette tinted in the god's (very pale) colour, muted */
.godmarks { display: flex; flex-direction: column; gap: 8px; align-self: flex-start; margin-top: 2px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.godmark { display: inline-block; flex: none; width: 26px; height: 26px; background: var(--g); filter: saturate(1.5) brightness(.8);
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.godmark--sm { width: 18px; height: 18px; vertical-align: -.25em; margin-right: 4px; }
/* overlay */
.ovart--card { aspect-ratio: auto; display: grid; place-items: center; padding: 8px 0; background: none; box-shadow: none; overflow: visible; }
.ovart--card::after { display: none; }
.favrows { display: flex; flex-direction: column; gap: 8px; }
.favrow { display: flex; align-items: center; gap: 10px; color: var(--color-text-dim); }
.favrow b { color: var(--color-text); }
.chip__cost { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 7px; border-left: 1px solid var(--color-border); color: var(--stat-lore); font-weight: var(--fw-bold); }
.chip__cost .ic { width: 14px; height: 14px; }
.favrow__or { color: var(--color-text-faint); font-size: var(--fs-micro); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding-left: 36px; }

/* ---------- Gods page ---------- */
.pagehead__lede { padding-bottom: 24px; max-width: 760px; color: var(--color-text-dim); }
.godnav { display: flex; flex-wrap: wrap; gap: 8px; }   /* jump links in the sticky filter bar (Gods, Clans) */
.godnav__link { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid var(--color-border);
  border-radius: 999px; color: var(--color-text); text-decoration: none; font-weight: var(--fw-semibold); }
.godnav__link:hover { border-color: var(--color-border-strong); }
.godnav__link[aria-current="true"] { border-color: var(--color-frost); background: color-mix(in srgb, var(--color-frost) 12%, transparent); }
@media (max-width: 760px) { .godnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .godnav__link { flex: none; } }
.godsec { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--color-border); scroll-margin-top: 60px; }
.godsec__art { position: sticky; top: 100px; align-self: start; display: grid; place-items: center; }
.godsec__statue { max-width: 100%; max-height: 520px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.6)); }
/* the god's Fate card back (statue line art + symbol), framed in the god's colour */
.godsec__back { width: 260px; max-width: 100%; border-radius: 14px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--r-ink) 45%, transparent), 0 18px 40px -16px rgba(0,0,0,.85), 0 0 60px -20px color-mix(in srgb, var(--r-ink) 40%, transparent); }
.banner .godmark { width: 20px; height: 20px; margin-right: 8px; filter: brightness(1.15) drop-shadow(0 1px 1px rgba(0,0,0,.6)); }
/* statue with the god's symbol: medallion on the plinth, a faint glow in the god's colour behind */
.godart { position: relative; display: grid; justify-items: center; padding-bottom: 56px; }
.godart::before { content: ""; position: absolute; inset: 6% -4% 18%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--r-ink) 28%, transparent), transparent); filter: blur(12px); }
.godart .godsec__statue { position: relative; max-height: 440px; }
.godart__medal { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 112px; height: 112px; display: grid; place-items: center; }
.godart__medal::before { content: ""; position: absolute; inset: 16px; transform: rotate(45deg);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--r-ink) 12%, #141d28), #0b1017);
  border: 2px solid var(--r-ink); box-shadow: 0 0 0 4px #0b1017, 0 0 0 5px color-mix(in srgb, var(--r-ink) 45%, transparent), 0 10px 24px rgba(0,0,0,.7); }
.godart__medal .godmark { position: relative; width: 48px; height: 48px; filter: brightness(1.1) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
/* the god's symbol, large, in a diamond like the Fate card icons */
.godsym { position: relative; width: 260px; height: 260px; display: grid; place-items: center; margin-top: 8px; }
.godsym::before { content: ""; position: absolute; inset: 38px; transform: rotate(45deg);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--r-ink) 16%, #121a24), #0b1017);
  border: 2px solid var(--r-ink); box-shadow: 0 0 0 6px #0b1017, 0 0 0 7px color-mix(in srgb, var(--r-ink) 40%, transparent),
    0 0 70px -10px color-mix(in srgb, var(--r-ink) 45%, transparent); }
.godsym .godmark { position: relative; width: 112px; height: 112px; filter: brightness(1.1) drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.codex .godsec__name { margin-bottom: 24px; }  /* .codex: beats the h2 margin reset */
/* the same size as an h1 on their item pages as an h2 on the list (the browser's default sizes differ) */
.codex :is(.godsec__name, .clanhero__name) { font-size: 1.5em; }
.codex .ladder { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 0; }
.ladder::before { content: ""; position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px; background: color-mix(in srgb, var(--r-ink) 35%, transparent); }
.step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
/* diamond marker; the inner span counter-rotates so the number stays upright */
.step__mark { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 6px;
  transform: rotate(45deg); background: var(--color-surface-inset); border: 2px solid var(--r-ink); }
.step__mark > span { transform: rotate(-45deg); color: var(--r-ink); font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); }
/* the power line sits on the marker's centre line (marker 32px + 6px margin = 44px box), then a gap before the cards */
.codex .step__power { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-height: 44px; margin: 0 0 14px; color: var(--color-text-dim); }
.step__power .label-caps { margin-right: 8px; color: var(--r-ink); }
.minicards { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
.minicard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--color-text-dim);
  font-size: var(--fs-xs); text-align: center; line-height: 1.25; }
.minicard:hover { color: var(--color-text); }
.cardicon--sm { width: 64px; height: 64px; }
.cardicon--sm img { padding: 23%; clip-path: polygon(50% 3.5%, 96.5% 50%, 50% 96.5%, 3.5% 50%); }
@media (max-width: 760px) { .godsec { grid-template-columns: minmax(0, 1fr); } .godsec__art { position: static; } .godsec__statue { max-height: 300px; } }

/* ---------- Clans page ---------- */
/* section: the clan's scene (game art, warchief included) as a wide header, the banner over its empty left side;
   facts + clan structures and skills in two columns below */
.clansec { padding: 40px 0; border-top: 1px solid var(--color-border); scroll-margin-top: 60px; }
main > .godsec:first-child, main > .clansec:first-child { border-top: 0; }   /* the sticky bar above already has a border */
.clanhero { position: relative; display: flex; align-items: flex-end; aspect-ratio: 3 / 1; min-height: 240px; margin-bottom: 28px;
  overflow: hidden; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--r-ink) 45%, transparent);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); background: var(--bg) 50% 40% / cover no-repeat; }
.clanhero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,14,21,.75) 0%, rgba(9,14,21,.25) 30%, transparent 50%),
              linear-gradient(180deg, transparent 55%, rgba(9,14,21,.65)); }
.codex .clanhero__name { position: relative; z-index: 1; margin: 0 0 24px 24px; }
.clanhero--plain { aspect-ratio: auto; min-height: 0; border: 0; box-shadow: none; overflow: visible; }
.clanhero--plain::after { content: none; }
.codex .clanhero--plain .clanhero__name { margin: 0; }
.clansec__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 900px) {
  .clansec__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .clanhero { aspect-ratio: 16 / 9; min-height: 0; background-position: 75% 40%; }
}
.clanlogo { width: 26px; height: 26px; object-fit: contain; margin-right: 8px; vertical-align: -7px; }
.banner .clanlogo { width: 24px; height: 24px; margin-right: 8px; }
.hexrow { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 12px 0 26px; }
.hexitem { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; font-weight: var(--fw-semibold); }
.hexitem .hexicon { --s: 96px; }   /* same size as on the Structures page */
/* starting favour: the god's glyph on a dark hex in the same frame */
.hexicon--glyph { display: inline-grid; place-items: center; }
.hexicon--glyph::after { z-index: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 22%, #0e151e) 0%, #090e15 100%); }
.hexicon--glyph .godmark { position: relative; z-index: 1; width: 40%; height: 40%; filter: saturate(1.3) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
a.hexitem:hover { color: var(--r-ink); }
.clanskills { display: grid; gap: 12px; margin-top: 12px; }
.clanskill { padding: 12px 16px; background: var(--color-surface-inset); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.codex .clanskill__name { margin: 0 0 6px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; }
.codex .clanskill .fx { margin: 0; color: var(--color-text-dim); }
.clanskill .label-caps { margin-right: 8px; color: var(--r-ink); }


/* ---------- Patches ---------- */
.patchnote { margin: 8px 0 28px; padding: 18px 22px 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent); scroll-margin-top: 80px; }
.patchnote__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 14px; }
.codex .patchnote__head :is(h1, h2) { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; color: var(--color-accent); }
.patchnote__title { color: var(--color-text); font-weight: var(--fw-semibold); }
.patchnote__meta { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: auto; color: var(--color-text-faint); font-size: var(--fs-xs);
  font-variant-numeric: var(--num-figures); }
.patchnote__src { color: var(--color-text-dim); }
.patchnote__src:hover { color: var(--color-accent); }
.patchnote__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; }
.patchnote--untracked { padding-block: 12px 14px; background: transparent; }
.patchnote--untracked .patchnote__head { margin-bottom: 6px; }
.codex .patchnote--untracked .patchnote__head :is(h1, h2) { font-size: var(--fs-lg); color: var(--color-text-dim); }
.patchnote__more summary, .dgroup > summary { cursor: pointer; color: var(--color-text-dim); font-weight: var(--fw-semibold); }
.patchnote__more[open] summary { margin-bottom: 10px; }
.bbnotes { color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.55; }
.codex .bbnotes p { margin: 0 0 8px; }
.codex .bbnotes h4, .codex .bbnotes h5 { margin: 14px 0 6px; color: var(--color-text); font-size: var(--fs-md, 15px); }
.codex .bbnotes ul, .codex .bbnotes ol { margin: 0 0 8px; padding-left: 20px; list-style: disc; }
.codex .bbnotes ol { list-style: decimal; }
.codex .bbnotes ul ul { list-style: circle; }
.codex .patches__older { margin: 36px 0 4px; }
.codex .bbnotes li p { margin: 0 0 4px; }
.bbnotes strong { color: var(--color-text); }
.bbnotes a { color: var(--color-accent); }
.bbnotes hr { border: 0; border-top: 1px solid var(--color-border); margin: 12px 0; }
.bbnotes table { border-collapse: collapse; margin: 0 0 8px; }
.bbnotes td, .bbnotes th { padding: 4px 8px; border: 1px solid var(--color-border); }
.dgroup { margin-top: 12px; }
.codex .dgroup h4 { margin: 0 0 6px; color: var(--color-text); font-size: var(--fs-sm); }
.codex .ditems, .codex .dchanges { margin: 0; padding: 0; list-style: none; }
.ditem { padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.ditem > a { color: var(--color-text); font-weight: var(--fw-semibold); }
.ditem > a:hover { color: var(--color-accent); }
.ditem .patch__badge { margin-right: 8px; color: var(--color-text-dim); background: color-mix(in srgb, var(--color-text-dim) 13%, transparent); }
.ditem .patch__badge--new { color: var(--color-buff); background: color-mix(in srgb, var(--color-buff) 13%, transparent); }
.dchanges li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; padding: 3px 0; font-size: var(--fs-sm); }
.dchange__field { color: var(--color-text-faint); }
.dchange__vals { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; }
.patch--wide .patch__delta { grid-column: 1 / -1; white-space: normal; flex-wrap: wrap; }
@media (max-width: 900px) {
  .patchnote { padding: 14px 14px 18px; }
  .patchnote__cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .patchnote__meta { margin-left: 0; }
  .dchanges li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* =====================================================================
   PLANNER (redesign 2026-11-04). Everything is scoped under .planner and
   uses p-prefixed classes so nothing leaks into other pages. Values are
   ported from docs/superpowers/specs/2026-11-04-planner-prototype*.dc.html.
   Reused site parts: .hexicon (+ .r--<rarity>, .hexicon__cost), .tag,
   .ic.ic--g-<slug>, .sr-only, .pagehead__lede, .wrap.
   ===================================================================== */
.planner {
  --p-in: #4fc3f7;                      /* gives to the selected: blue, solid  */
  --p-out: #ff8a3d;                     /* gets from the selected: orange, dashed */
  --p-gold-hi: #f2cd7d;                 /* selection outline, gold highlight    */
  --p-gold-lo: #c99a3f;
  --p-gold-text: #ffd98a;
  /* one-off colours from the prototype (no codex token) */
  --p-text-soft: #c9d4de;
  --p-gold-pale: #ffe2a6;
  --p-scrollbar: #2a3644;
  --p-chip-on: #2a3442;
  --p-gold-dark: #2a2112;
  --p-chip: #1a232d;
  --p-sel-inner: #fff6dc;
  /* the in-game structure badge (sampled from a screenshot): slate body, near-black outline, pale persons,
     silver level box with a black digit */
  --p-vil-on: #c9dcdf;
  --p-vil-off: #1a2a32;
  --p-badge-top: #42606c;
  --p-badge-bottom: #2b404b;
  --p-badge-line: #0b1418;
  --p-lvl-top: #d6e7ea;
  --p-lvl-bottom: #8aa0a8;
  --p-lvl-ink: #0b1418;
  --p-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --p-bar: color-mix(in srgb, var(--color-bg-2) 72%, transparent);
  --p-gold-fill: linear-gradient(180deg, var(--p-gold-hi), var(--color-accent) 55%, var(--p-gold-lo));
  padding-bottom: 40px;
}
.planner [hidden] { display: none !important; }
.planner .pic { width: 18px; height: 18px; flex: none; }
.planner .pscroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--p-scrollbar) transparent; }

/* ---------- step 1: clan screen ---------- */
.planner .pclans { padding-top: 36px; }
.planner .pclans__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.planner .pclans__intro { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.planner .pclans__intro h1 { margin: 0; font-family: var(--font-display); font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: var(--tracking-display); }
.planner .pclans__intro .pagehead__lede { padding-bottom: 0; font-size: 16px; line-height: 1.5; }
.planner .pkicker { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--color-accent);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; }
.planner .pkicker::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: var(--color-accent); flex: none; }
.planner .pclans__go { display: flex; align-items: center; gap: 18px; }
.planner .pclans__fresh { margin: 0; text-align: right; font-size: 14px; line-height: 1.45; color: var(--color-text-dim); }
.planner .pcta { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: var(--radius-md); background: var(--p-gold-fill); color: var(--color-accent-ink); font-weight: var(--fw-bold); font-size: 16px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -10px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.planner .pcta:hover { filter: brightness(1.06); }
.planner .pcta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.planner .pcta .pic path { stroke-width: 2.4; }
.planner .pclans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.planner .pclans__hint { margin: 20px auto 0; font-size: 14px; color: var(--color-text-dim); }
/* one clan card (rendered by JS): button.pclan > .pclan__scene(img) + .pclan__body */
.planner .pclan { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--slot-panel-texture), var(--color-surface); border: var(--slot-frame-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-frost-bright) 7%, transparent), 0 14px 30px -14px rgba(0,0,0,.85);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.planner .pclan:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-frost) 40%, transparent); }
.planner .pclan:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.planner .pclan[aria-pressed="true"] { border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent), 0 0 28px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 14px 30px -14px rgba(0,0,0,.85); }
.planner .pclan__scene { position: relative; height: 196px; overflow: hidden; }
.planner .pclan__scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.planner .pclan__scene::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 0%, transparent) 45%, color-mix(in srgb, var(--color-surface) 96%, transparent) 100%); }
.planner .pclan__picked { position: absolute; top: 12px; right: 12px; z-index: 1; display: none; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.planner .pclan[aria-pressed="true"] .pclan__picked { display: inline-flex; }
.planner .pclan__picked .pic { width: 13px; height: 13px; }
.planner .pclan__body { position: relative; margin-top: -26px; padding: 0 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.planner .pclan__banner { position: relative; align-self: flex-start; height: 40px; display: flex; align-items: center; padding: 0 18px 0 46px;
  background: var(--jewel, var(--jewel-crimson)); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.planner .pclan__banner img { position: absolute; left: 8px; top: 4px; width: 32px; height: 32px; object-fit: contain; }
.planner .pclan__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.planner .pclan__chief { font-size: 14px; color: var(--color-text-dim); }
.planner .pclan__chief b { color: var(--color-text); font-weight: var(--fw-semibold); }
.planner .pclan__starts { display: flex; flex-direction: column; gap: 10px; }
.planner .pclan__start { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: var(--fw-semibold); }
.planner .pclan__start .hexicon { --s: 49px; }
.planner .pgodhex { position: relative; width: 44px; height: 49px; flex: none; display: grid; place-items: center; }
.planner .pgodhex::before, .planner .pgodhex::after { content: ""; position: absolute; clip-path: var(--p-hex); }
.planner .pgodhex::before { inset: 0; background: var(--g, var(--color-text-faint)); }
.planner .pgodhex::after { inset: 3px; background: var(--color-bg-2); }
.planner .pgodhex > * { position: relative; z-index: 1; width: 22px; height: 22px; object-fit: contain; }

/* section label with a hairline (cards, clan screen) */
.planner .psec { display: flex; align-items: center; gap: 8px; color: var(--color-text-dim);
  font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; }
.planner .psec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-frost) 50%, transparent), color-mix(in srgb, var(--color-frost) 6%, transparent)); }

/* ---------- step 2: board view layout ---------- */
.planner .pboardhead { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.planner .pboardhead h1 { margin: 0; font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1; }
.planner .pboardhead__lede { margin: 6px 0 0; font-size: 15px; color: var(--color-text-dim); }
/* toolbar, stage and legend on the left, the panel spans them on the right (.pmain only groups the markup) */
.planner .pboardview:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) 372px; column-gap: 24px; row-gap: 12px;
  grid-template-areas: "head head" "tools panel" "stage panel" "legend panel"; grid-template-rows: auto auto auto 1fr; }
.planner .pboardhead { grid-area: head; }
.planner .pmain { display: contents; }
.planner .ptools { grid-area: tools; }
.planner .pstage { grid-area: stage; }
.planner .ppanel { grid-area: panel; }
.planner .plegend { grid-area: legend; align-self: start; }

/* ---------- toolbar ---------- */
/* one row always (the stage-height cap below 1400px counts on it): secondary labels hide where they wouldn't fit */
.planner .ptools { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 6px; border-radius: var(--radius-lg);
  background: var(--p-bar); border: 1px solid var(--color-border); }
.planner .ptools__acts { margin-left: auto; display: flex; gap: 8px; }
.planner .ptb { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-frost) 26%, transparent); color: var(--color-text);
  font-size: 14px; font-weight: var(--fw-semibold); white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-frost-bright) 6%, transparent); }
.planner .ptb:hover { border-color: color-mix(in srgb, var(--color-frost) 60%, transparent); background: var(--color-surface-raised); }
.planner .ptb:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.planner .ptb--gold { background: var(--p-gold-fill); color: var(--color-accent-ink); border-color: var(--p-gold-text); }
.planner .ptb--gold:hover { background: var(--p-gold-fill); filter: brightness(1.06); }
.planner .ptb--gold .pic path { stroke-width: 2.2; }
.planner .ptb--icon { width: 44px; height: 44px; padding: 0; justify-content: center; }
.planner .pclanbtn { padding-left: 6px; }
.planner .pclanbtn > .pic { width: 16px; height: 16px; color: var(--color-text-dim); }
.planner .pclanbtn__logo { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--jewel, var(--jewel-crimson)); }
.planner .pclanbtn__logo img { width: 24px; height: 24px; object-fit: contain; }
.planner .pincome { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-radius: var(--radius-md);
  background: var(--color-surface-inset); border: 1px solid var(--color-border); }
.planner .pincome__label { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); }
.planner .pincome__vals { display: inline-flex; align-items: center; gap: 12px; }
.planner .pincome__val { display: inline-flex; align-items: center; gap: 5px; color: var(--c); font-weight: var(--fw-bold); font-size: 16px; font-variant-numeric: var(--num-figures); }
.planner .pincome__val .ic { width: 18px; height: 18px; }
.planner .pincome__val small { font-size: 13px; font-weight: var(--fw-semibold); }

/* ---------- stage + tiles ---------- */
/* JS sizes the stage (aspect ratio of the board) and positions .prt/.ptile absolutely inside it */
.planner .pstage { position: relative; width: 100%; aspect-ratio: 900 / 640; outline: none; user-select: none; -webkit-user-select: none; }
.planner .pstage:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-focus) 35%, transparent); }
.planner .pring, .planner .ptiles { position: absolute; inset: 0; }
.planner .pring { pointer-events: none; overflow: hidden; }   /* JS adds a radial mask (vignette) */
.planner .pedges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.planner .pedges line, .planner .pedges path { fill: none; stroke: var(--color-accent); stroke-width: 1.2; opacity: .55; }
.planner .pedges--none { display: none; }
.planner .prt { position: absolute; pointer-events: none; }
/* inset 0: the tile box is already shrunk by the gap (JS), so the gap is even on every edge */
.planner .phx { position: absolute; inset: 0; clip-path: var(--p-hex); background: var(--color-surface-inset); transition: filter .2s; }
.planner .prt .phx { filter: saturate(.45) brightness(.55); }
.planner .pgnd { position: absolute; inset: 0; background-size: cover; background-position: center; }
.planner .part { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.planner .ptile { position: absolute; }
.planner .ptile.is-free .phx { filter: brightness(.82); }
.planner .ptile.is-dim .phx { filter: brightness(.66) saturate(.7); }
.planner .ptile.is-ghost .part { opacity: .78; }
.planner .ptile.is-lifted { opacity: .45; }
/* ground view (G / Show ground): structures fade, obstacles stay; chips, badges, flags and outlines step aside */
.planner .pstage.is-ground .ptile:not(.is-obstacle) .part { opacity: .2; }
.planner .pstage.is-ground .ptile :is(.pgains, .pbadge, .pflag, .prings) { display: none; }
.planner .phit { all: unset; position: absolute; inset: 0; z-index: 2; cursor: pointer; clip-path: var(--p-hex); }
.planner .phit:hover { background: color-mix(in srgb, var(--color-frost-bright) 7%, transparent); }
.planner .phit:focus-visible { background: color-mix(in srgb, var(--color-focus) 20%, transparent); }

/* synergy outlines: svg.prings > polygon.pr-<kind> */
.planner .prings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.planner .pr-sel { fill: none; stroke: var(--p-gold-hi); stroke-width: 4.5; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-accent) 85%, transparent)); }
.planner .pr-sel2 { fill: none; stroke: var(--p-sel-inner); stroke-width: 1.2; }
.planner .pr-in { fill: none; stroke: var(--p-in); stroke-width: 4; }
.planner .pr-out { fill: none; stroke: var(--p-out); stroke-width: 4; stroke-dasharray: 10 6; }
.planner .pr-best { fill: color-mix(in srgb, var(--color-accent) 12%, transparent); stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; }
.planner .pr-ghost { fill: none; stroke: var(--p-gold-hi); stroke-width: 3; stroke-dasharray: 12 6; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-accent) 70%, transparent)); }
.planner .pr-drop { fill: color-mix(in srgb, var(--color-focus) 12%, transparent); stroke: var(--color-focus); stroke-width: 2.5; }

/* gains: chips just above the badge, inside the tile */
/* every gain, two per row, growing upwards from above the badge; an odd last chip is centred on its own row */
.planner .pgains { position: absolute; left: 50%; bottom: calc(14% + 24px); transform: translateX(-50%); z-index: 5;
  display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 2px 3px; white-space: nowrap; pointer-events: none; }
.planner .pgains > .pgain--wide, .planner .pgains > .pgain:only-child { grid-column: 1 / -1; justify-self: center; }
.planner .pgains > .pgain--more { display: none; }
.planner .pgain { display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 5px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface-inset) 92%, transparent); border: 1px solid color-mix(in srgb, var(--color-frost) 30%, transparent); color: var(--c, var(--color-text));
  font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); box-shadow: 0 2px 8px rgba(0,0,0,.55); }
.planner .pgain .ic { width: 13px; height: 13px; flex: none; }
.planner .pgain--score { border-color: color-mix(in srgb, var(--color-frost) 45%, transparent); }
.planner .pgain--best { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--p-gold-pale); }
.planner .pgain--none { color: var(--color-text-faint); }
.planner .pgain--best .ic { filter: brightness(0) opacity(.8); }
/* dense chips (5+ gains): smaller, so three rows stay inside the own hex instead of covering the tile above */
@media (min-width: 901px) {
  .planner .pgains--dense { gap: 2px; }
  .planner .pgains--dense > .pgain { height: 18px; padding: 0 4px; gap: 2px; font-size: 11.5px; }
  .planner .pgains--dense > .pgain .ic { width: 11px; height: 11px; }
}
/* foot row: the badge, with the "!" flag beside it */
.planner .pfoot { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 3px; }
.planner .pfoot > .pflag { cursor: help; }
.planner .pflag { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--color-nerf);
  color: #fff; font-size: 11px; font-weight: var(--fw-bold); }

/* ground: mini texture swatch (JS sets --g to the texture url) */
.planner .pmini-g { display: inline-block; width: 12px; height: 13.5px; flex: none; clip-path: var(--p-hex);
  background: var(--g, var(--color-text-faint)) center / 320%; }

/* badge inside the tile, near the bottom edge: villagers (person buttons) + level box */
/* styled like the game's badge, minus its Fate card hex: a slate bar with the persons, the silver level box flush
   at the right end, all inside one near-black outline */
.planner .pbadge { display: flex; align-items: stretch;
  height: 18px; padding: 0 0 0 2px; background: linear-gradient(180deg, var(--p-badge-top), var(--p-badge-bottom));
  border: 1.5px solid var(--p-badge-line); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.planner .pbadge:not(:has(.plvl)) { padding-right: 2px; }
.planner .pvil { all: unset; cursor: pointer; width: 12px; display: grid; place-items: center; color: var(--p-vil-off); }
.planner .pvil.is-on { color: var(--p-vil-on); }
/* hovering a person previews the click: it and every person before it light up */
.planner .pvil:hover, .planner .pvil:has(~ .pvil:hover) { color: #fff; }
.planner .pvil:focus-visible { outline: 1px solid var(--color-focus); outline-offset: -1px; }
.planner .pvil .pic { width: 11px; height: 11px; }
/* compact villager button (more than 3 slots): one person icon + "xn" */
.planner .pvil--count { width: auto; display: inline-flex; align-items: center; gap: 1px; padding: 0 2px 0 1px; color: var(--p-vil-on);
  font-size: 10.5px; font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); }
.planner .pvil--count:not(.is-on) { color: color-mix(in srgb, var(--p-vil-on) 55%, var(--p-badge-bottom)); }
.planner .plvl { all: unset; cursor: pointer; min-width: 10px; display: grid; place-items: center; margin-left: 2px; padding: 0 3px;
  background: linear-gradient(180deg, var(--p-lvl-top), var(--p-lvl-bottom)); border-left: 1.5px solid var(--p-badge-line); color: var(--p-lvl-ink);
  font-size: 12px; font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); line-height: 1; }
.planner .pbadge:has(> .plvl:first-child) { padding-left: 0; }
.planner .pbadge > .plvl:first-child { margin-left: 0; border-left: 0; }
.planner .plvl:hover { background: linear-gradient(180deg, #fff, var(--p-lvl-top)); }
.planner .plvl:focus-visible { outline: 1px solid var(--color-focus); outline-offset: -2px; }
.planner .pbadge--lg { position: static; transform: scale(1.2); transform-origin: left center; margin: 2px 0 4px; }

/* toast, top-right of the board */
.planner .ptoast { position: absolute; right: 12px; top: 12px; z-index: 12; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-accent); font-size: 14px; font-weight: var(--fw-semibold); }

/* drag ghost following the pointer */
.planner .pghost { position: fixed; left: 0; top: 0; z-index: var(--z-overlay); pointer-events: none; opacity: .7; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); will-change: transform; }
.planner .pghost .hexicon { --s: 64px; }
.planner .pghost__tile { clip-path: var(--p-hex); }
.planner .pghost__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.planner.is-dragging, .planner.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }

/* ---------- detail / preview card (overlaid at the board's top-left) ---------- */
.planner .pcard { position: absolute; left: 0; top: 0; z-index: 10; width: 280px; max-height: 100%; box-sizing: border-box; overflow-y: auto;
  padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 12px;
  background: var(--slot-panel-texture), var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-frost) 20%, transparent); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-frost-bright) 7%, transparent), var(--shadow-3); scrollbar-width: thin; scrollbar-color: var(--p-scrollbar) transparent; }
.planner .pcard--hint { padding: 14px 16px; gap: 6px; }
.planner .pcard__hint-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.1; }
.planner .pcard__hint-body { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-dim); }
.planner .pcard--preview { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.planner .pcard--preview .pcard__head { align-items: center; }
.planner .pcard--preview .pcard__head .hexicon { --s: 52px; }
.planner .pcard--preview .pcard__name { font-size: 23px; }
.planner .pcard__where.pcard__where--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
.planner .pcard__dot { color: var(--color-text-faint); }
.planner .pcard__best { color: var(--color-accent); font-weight: var(--fw-semibold); }
.planner .pcard__note { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-text-dim); }
.planner .pcard__note b { color: var(--color-text); }
.planner .pcard__keys { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-frost) 12%, transparent);
  font-size: 13px; line-height: 1.45; color: var(--color-text-dim); }
.planner .pcard__keyrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.planner .pgold { color: var(--color-accent); }
.planner .pcard__head { display: flex; gap: 12px; align-items: flex-start; }
.planner .pcard__head .hexicon { --s: 64px; }
.planner .pcard__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.planner .pcard__name { font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1; }
.planner .pcard__close { width: 32px; height: 32px; }
.planner .pcard__close .pic { width: 16px; height: 16px; }
.planner .pcard__meta { display: flex; align-items: center; gap: 14px; }
.planner .pcard__where { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--color-text-dim); }
.planner .pcard__where b { color: var(--color-text); }
.planner .pcard__badge + .pcard__where { margin-left: 34px; }
/* rounds on board (growing structures): label, − n + stepper, what one more round adds */
.planner .prounds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.planner .prounds__label { color: var(--color-text-dim); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .14em; text-transform: uppercase; }
.planner .prounds__step { display: inline-flex; gap: 4px; }
.planner .pcard .prounds .pseg { width: 28px; height: 28px; }
.planner .pcard .prounds .pseg--val { width: auto; min-width: 32px; padding: 0 6px; }
.planner .prounds__per { display: inline-flex; align-items: center; gap: 4px; }
.planner .prounds__unit { color: var(--color-text-dim); font-size: 12px; }
.planner .ptags { display: flex; flex-wrap: wrap; gap: 4px; }
.planner .ptags .tag { height: 22px; padding: 0 7px; font-size: 12px; }
.planner .pcap { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); font-size: 11.5px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase; }
/* unit stats base -> final */
.planner .pstats { background: var(--color-surface-inset); border: 1px solid color-mix(in srgb, var(--color-frost) 12%, transparent); border-radius: var(--radius-md); }
.planner .pstat { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(34px, auto); align-items: center; gap: 6px; padding: 7px 10px; font-variant-numeric: var(--num-figures); }
.planner .pstat + .pstat { border-top: 1px solid color-mix(in srgb, var(--color-frost) 8%, transparent); }
.planner .pstat__name { display: inline-flex; align-items: center; gap: 6px; color: var(--c); font-size: 14px; font-weight: var(--fw-semibold); }
.planner .pstat__name .ic { width: 15px; height: 15px; }
.planner .pstat__src { display: block; padding-left: 21px; font-size: var(--fs-micro); color: var(--color-text-dim); }
.planner .pstat__base { text-align: right; color: var(--color-text-faint); font-size: 14px; }
.planner .pstat .pic { width: 14px; height: 14px; color: var(--color-text-faint); }
.planner .pstat__final { text-align: right; color: var(--c); font-size: 16px; font-weight: var(--fw-bold); }
/* gets from / gives to */
.planner .pleg { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--p-text-soft); }
.planner .pleg svg { flex: none; }
.planner .psyns { display: flex; flex-direction: column; gap: 4px; }
.planner .psyn { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--radius-md); font-size: 13.5px; }
.planner .psyn:hover { background: color-mix(in srgb, var(--color-frost) 6%, transparent); }
.planner .psyn .hexicon { --s: 25px; }
.planner .psyn__name { flex: 1; min-width: 0; }
.planner .psyn__val { display: inline-flex; align-items: center; gap: 3px; color: var(--c); font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); }
.planner .psyn__val .ic { width: 14px; height: 14px; }
.planner .pnone { padding: 2px 8px; font-size: 13px; color: var(--color-text-faint); }
/* effect texts with the current level highlighted (4/8/12) */
.planner .pfx { display: flex; flex-direction: column; gap: 6px; }
.planner .pfx__line { margin: 0; padding: 9px 11px; background: var(--color-surface-inset); border-radius: var(--radius-md); font-size: 14px; line-height: 1.45; color: var(--p-text-soft); }
.planner .pfx__line--warn { border-left: 2px solid var(--color-nerf); }
.planner .plv-cur { color: inherit; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.planner .plv-oth { opacity: .55; font-weight: var(--fw-semibold); }
.planner .pstat__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planner .pcard__ground { display: inline-flex; align-items: center; gap: 6px; }
.planner .pleg--gap { margin-top: 6px; }
.planner .psyn__val + .psyn__val { margin-left: 4px; }
.planner .psyn__note { margin-left: 6px; font-size: var(--fs-micro); color: var(--color-text-faint); }
.planner .pfx__line--warn .pflag { vertical-align: 1px; margin-right: 2px; }
/* ground trigger ("Rocky: ...") with a mini ground swatch instead of the diamond */
.planner .trig--g { display: inline-flex; align-items: center; gap: 5px; vertical-align: -1px; }
.planner .trig--g::before { display: none; }

/* ---------- legend + keys + lenses ---------- */
.planner .plegend { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--p-bar); border: 1px solid var(--color-border); }
.planner .plegend__row { display: flex; align-items: center; gap: 18px; min-height: 28px; flex-wrap: wrap; }
.planner .plegend__outlines { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.planner .plegend__right { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.planner .plenses { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.planner .plenses:empty, .planner .plenses:empty + .plegend__sep { display: none; }   /* no stat on the board yet */
.planner .plegend__sep { width: 1px; height: 20px; margin: 0 6px; background: color-mix(in srgb, var(--color-frost) 20%, transparent); }
.planner .plegend__keys { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-frost) 10%, transparent); }
.planner .pkey { display: inline-flex; align-items: center; gap: 4px; }
.planner .pkey .pklabel { margin-left: 2px; }
.planner .pkbd { display: inline-grid; place-items: center; min-width: 14px; height: 22px; padding: 0 6px; border-radius: var(--radius-md);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); border-bottom-width: 2px;
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--color-text); }
.planner .pklabel { color: var(--color-text-dim); font-size: 13px; }
.planner .plens { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: var(--radius-md);
  border: 1px solid transparent; color: var(--color-text-dim); font-size: 13px; font-weight: var(--fw-semibold); }
.planner .plens:hover { color: var(--color-text); }
.planner .plens:focus-visible { outline: 2px solid var(--color-focus); }
.planner .plens[aria-pressed="true"] { color: #fff; background: var(--color-surface-raised); border-color: var(--color-border-strong); }
.planner .plens .ic { width: 14px; height: 14px; }

/* ---------- structures panel ---------- */
.planner .ppanel { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 32px); position: sticky; top: 16px; overflow: hidden;
  background: var(--slot-panel-texture), var(--color-surface); border: var(--slot-frame-border); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-frost-bright) 7%, transparent), 0 14px 30px -14px rgba(0,0,0,.85); }
.planner .ppanel__head { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 12px; border-bottom: 1px solid color-mix(in srgb, var(--color-frost) 12%, transparent);
  background: color-mix(in srgb, var(--color-bg-2) 60%, transparent); }
.planner .ppanel__title { display: flex; align-items: baseline; gap: 10px; }
.planner .ppanel__title h2 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.planner .ppanel__count { font-size: 14px; color: var(--color-text-dim); font-variant-numeric: var(--num-figures); }
.planner .ppanel__body { flex: 1; min-height: 0; }
.planner .ppanel__foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid color-mix(in srgb, var(--color-frost) 12%, transparent);
  background: color-mix(in srgb, var(--color-bg-2) 70%, transparent); font-size: 12.5px; color: var(--color-text-dim); }
.planner .ppanel__foot .pic { width: 16px; height: 16px; }
.planner .psearch { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-radius: var(--radius-md);
  background: var(--color-surface-inset); border: 1px solid var(--color-border-strong); color: var(--color-text-dim); }
.planner .psearch:focus-within { border-color: var(--color-focus); box-shadow: var(--glow-frost); }
.planner .psearch input { all: unset; flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--color-text); }
.planner .psearch input::placeholder { color: var(--color-text-faint); }
.planner .ppanel__head { container-type: inline-size; }
.planner .pfilters { display: flex; flex-wrap: wrap; gap: 5px; }
/* narrow panel (beside the board): rarity chips show only their diamond (the pressed one keeps its name), so the chips
   and the tag select stay on one row */
@container (max-width: 480px) {
  .planner .pfilters { flex-wrap: nowrap; }
  .planner .pfilters .prchip { padding: 0 9px; }
  .planner .prchip:not([aria-pressed="true"]) .prchip__label { display: none; }
  .planner .pfilters .pdia { width: 9px; height: 9px; }
  .planner .pfilters .ptagsel { flex: 1; min-width: 0; }
  .planner .pfilters .ptagsel select { flex: 1; min-width: 0; }
}
.planner .pfilters__rar { display: contents; }
.planner .prchip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  border-radius: var(--radius-md); background: var(--p-chip); border: 1px solid color-mix(in srgb, var(--color-frost) 17%, transparent); color: var(--p-text-soft); font-size: 12.5px; font-weight: var(--fw-semibold); }
.planner .prchip:hover { border-color: color-mix(in srgb, var(--color-frost) 45%, transparent); }
.planner .prchip:focus-visible { outline: 2px solid var(--color-focus); }
.planner .prchip[aria-pressed="true"] { background: var(--p-chip-on); border-color: var(--color-accent); color: #fff; }
.planner .pdia { width: 7px; height: 7px; flex: none; transform: rotate(45deg); background: var(--r-rim, var(--color-frost)); }
.planner .ptagsel { position: relative; display: inline-flex; }
.planner .ptagsel select { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0 26px 0 9px; border-radius: var(--radius-md);
  background: var(--p-chip); border: 1px solid color-mix(in srgb, var(--color-frost) 17%, transparent); color: var(--p-text-soft); font: inherit; font-size: 12.5px; line-height: 26px; font-weight: var(--fw-semibold); }
.planner .ptagsel select:focus-visible { outline: 2px solid var(--color-focus); }
.planner .ptagsel.is-on select { border-color: var(--color-accent); color: #fff; background: var(--p-chip-on); }
.planner .ptagsel select option { background: var(--color-surface); color: var(--color-text); }
.planner .ptagsel .pic { position: absolute; right: 7px; top: 7px; width: 14px; height: 14px; pointer-events: none; color: var(--color-text-dim); }
/* list, grouped by rarity */
.planner .plist { padding-bottom: 10px; }
.planner .pgrp { display: flex; align-items: center; gap: 9px; margin: 14px 8px 4px; color: var(--r-rim, var(--color-text));
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.planner .pgrp::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-frost) 45%, transparent), color-mix(in srgb, var(--color-frost) 5%, transparent)); }
.planner .pgrp__count { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0; color: var(--color-text-dim); font-weight: var(--fw-semibold); }
.planner .pgrp__items { display: flex; flex-direction: column; padding: 0 6px; }
.planner .psrow { position: relative; display: flex; align-items: center; gap: 11px; padding: 7px 8px 12px; border-radius: var(--radius-md); cursor: grab; touch-action: none; }
.planner .psrow:hover { background: color-mix(in srgb, var(--color-frost) 6%, transparent); }
.planner .psrow.is-on { background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.planner .psrow.is-lifted { opacity: .38; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 70%, transparent); }
.planner .psrow .hexicon { --s: 56px; }
.planner .psrow .hexicon__cost { font-size: 13px; padding: 0 6px 0 3px; }
.planner .psrow .hexicon__cost .ic { width: 15px; height: 15px; }
.planner .psrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.planner .psrow__top { display: flex; align-items: center; gap: 7px; }
.planner .psname { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.1; letter-spacing: .01em; }
.planner .psfx { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 13px; line-height: 1.4; color: var(--p-text-soft); }
.planner .psfx .stat .ic { width: 14px; height: 14px; }
.planner .psrow .ptags .tag { height: 19px; padding: 0 6px; font-size: 11.5px; }
.planner .parmed { margin-left: auto; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--color-accent); white-space: nowrap; }
.planner .ponboard { margin-left: auto; font-size: var(--fs-micro); color: var(--color-text-dim); white-space: nowrap; font-variant-numeric: var(--num-figures); }
.planner .pmatch { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); color: var(--p-text-soft); }
.planner .pmark { padding: 0 2px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 25%, transparent); color: var(--p-gold-pale); font-weight: var(--fw-semibold); }
.planner .pgrip { all: unset; box-sizing: border-box; cursor: grab; width: 24px; height: 36px; flex: none; display: grid; place-items: center;
  border-radius: var(--radius-md); color: var(--color-text-faint); }
.planner .pgrip:hover, .planner .psrow:hover .pgrip { color: var(--color-accent); }
.planner .pgrip:focus-visible { outline: 2px solid var(--color-focus); }
.planner .pempty { padding: 24px 16px; font-size: 14px; color: var(--color-text-dim); }
/* suggestions above the list */
.planner .psuggest { margin: 12px 10px 4px; padding: 12px 10px 8px; display: flex; flex-direction: column; gap: 4px; border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-surface-inset) 78%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
.planner .psuggest__head { display: flex; align-items: center; gap: 8px; padding: 0 4px 6px; font-size: 13px; color: var(--color-text-dim); }
.planner .psuggest__head b { color: var(--color-text); font-size: 14px; }
.planner .psuggest__head .hexicon { --s: 24px; }
.planner .psuggest .pleg { padding: 2px 4px; font-weight: var(--fw-semibold); }
.planner .psugrow { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; border-radius: var(--radius-md); cursor: grab; touch-action: none; }
/* touch: the panel scrolls through the rows (tap flows come with the mobile task; drag isn't needed there) */
@media (pointer: coarse) { .planner .psrow, .planner .psugrow { touch-action: pan-y; } }
.planner .psugrow:hover, .planner .psugrow.is-hov { background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.planner .psugrow .hexicon { --s: 40px; }
.planner .psugrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.planner .psugrow__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.planner .psugrow__name { font-size: 14px; font-weight: var(--fw-semibold); }
.planner .psugrow__amts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.planner .psugamt { display: inline-flex; align-items: center; gap: 2px; color: var(--c, var(--color-text)); font-size: 13px; font-weight: var(--fw-bold); font-variant-numeric: var(--num-figures); }
.planner .psugamt .ic { width: 13px; height: 13px; }
.planner .psugmore { all: unset; box-sizing: border-box; cursor: pointer; align-self: flex-start; margin: 0 6px 4px; padding: 2px 4px; border-radius: var(--radius-sm);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--color-text-dim); }
.planner .psugmore:hover { color: var(--color-accent); }
.planner .psugmore:focus-visible { outline: 2px solid var(--color-focus); }
.planner .psugrow__best { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); color: var(--color-text-dim); }

/* ---------- mobile sheet + controls (used below 900px, Task 10) ---------- */
.planner .psheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); max-height: 70vh; box-sizing: border-box; overflow-y: auto;
  padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 12px;
  background: var(--slot-panel-texture), var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-frost) 20%, transparent); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-3); }
.planner .psheet::before { content: ""; align-self: center; width: 40px; height: 4px; flex: none; border-radius: 2px; background: color-mix(in srgb, var(--color-frost) 35%, transparent); }
.planner .psheet--place { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.planner .psheet__label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-dim); }
.planner .psheet__acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.planner .pmbtn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; padding: 0 14px;
  border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid color-mix(in srgb, var(--color-frost) 30%, transparent); color: var(--color-text); font-size: 14px; font-weight: var(--fw-semibold); }
.planner .pmbtn--gold { background: var(--p-gold-fill); color: var(--color-accent-ink); border-color: var(--p-gold-text); }
.planner .pmbtn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.planner .pseg { all: unset; box-sizing: border-box; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--color-surface-inset); border: 1px solid color-mix(in srgb, var(--color-frost) 25%, transparent); color: var(--color-text-dim); font-size: 16px; font-weight: var(--fw-bold); }
.planner .pseg[aria-pressed="true"] { border-color: var(--color-accent); color: var(--p-gold-text); background: var(--p-gold-dark); }
.planner .pseg:focus-visible { outline: 2px solid var(--color-focus); }
.planner .pseg .pic { width: 20px; height: 20px; }
.planner .pseg:disabled { opacity: .4; cursor: default; }
.planner .pseg--val { width: auto; min-width: 64px; padding: 0 10px; display: inline-flex; gap: 4px; cursor: default; color: var(--color-text); font-variant-numeric: var(--num-figures); }
.planner .pseg--val .pic { width: 16px; height: 16px; }
.planner .pmbtn:disabled { opacity: .45; cursor: default; }
.planner .pmbtn--lg { height: 52px; font-size: 16px; }
.planner .pmbtn .pic { width: 18px; height: 18px; }
.planner .pmbtn--gold .pic path { stroke-width: 2.4; }
/* JS: .psheet > .psheet__content (body + actions, or the add view's top row) + the panel copy (.ppanel--sheet) */
.planner .psheet { overflow: hidden; max-height: 58vh; max-height: 58dvh; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.planner .psheet { max-width: 760px; margin-inline: auto; }
.planner .psheet[data-view="add"] { height: 85vh; height: 85dvh; max-height: none; }
.planner .psheet__content { display: contents; }
.planner .psheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; margin-inline: -4px; padding-inline: 4px; }
.planner .psheet__acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 8px; margin-top: 0; flex: none; }
.planner .psheet__ctl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; }
.planner .psheet__grp { display: flex; flex-direction: column; gap: 4px; }
.planner .psheet__segs { display: flex; gap: 4px; }
.planner .psheet__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--color-text-dim); }
.planner .psheet[data-view="idle"] .psheet__hint { text-align: center; }
.planner .psheet__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.planner .psheet__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1; }
.planner .psheet .pcard__head .hexicon { --s: 52px; }
.planner .psheet .pcard__name { font-size: 23px; }
.planner .ppanel--sheet { flex: 1; min-height: 0; position: static; max-height: none; overflow: hidden; background: none; border: 0; border-radius: 0; box-shadow: none; }
.planner .ppanel--sheet .ppanel__head { padding: 0 0 10px; background: none; }
.planner .ppanel--sheet .ppanel__foot { display: none; }
.planner .ppanel--sheet .ppanel__title h2 { display: none; }   /* the sheet has its own title */
.planner .ppanel--sheet .psuggest { margin-inline: 0; }
/* the touch card's Move / Remove and Cancel / Place rows */
.planner .pcard .psheet__acts { margin-top: 4px; }
.planner .pcard .pmbtn { padding: 0 10px; white-space: nowrap; }
/* the mobile toolbar's Ground toggle (the legend has its own on desktop) */
.planner .ptb--ground { display: none; }
.planner .ptb--ground[aria-pressed="true"] { border-color: var(--color-accent); color: var(--p-gold-text); background: var(--p-gold-dark); }

/* ---------- breakpoints ---------- */
/* below 1400px the panel moves under the board, so the stage stays wide enough for the card overlay + board */
@media (max-width: 1399px) {
  .planner .pboardview:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tools" "stage" "legend" "panel"; grid-template-rows: none; }
  .planner .ppanel { position: static; max-height: none; }
  /* the full-width stage would be taller than the window: cap its height so the toolbar and the whole board fit
     (232px = site header + page head + toolbar above the stage); the board shrinks with it (geometry: W <= stageH / 5.2) */
  .planner .pstage { max-height: max(420px, calc(100vh - 232px)); max-height: max(420px, calc(100dvh - 232px)); }
}
/* toolbar too narrow for every label (the column beside the panel from 1400px up, capped by the page width; the full width at 901-1199px):
   Re-roll / Undo / Clear go icon-only (label kept for screen readers, title for the tooltip) */
@media (min-width: 1400px), (min-width: 901px) and (max-width: 1199px) {
  .planner .ptb--sec .ptb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .planner .ptb--sec { width: 40px; padding: 0; justify-content: center; }
}
/* narrowest desktop widths: Next round too (only Share keeps its label) */
@media (min-width: 901px) and (max-width: 1023px) {
  .planner .ptb[data-act="round"] .ptb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .planner .ptb[data-act="round"] { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 1100px) {
  .planner .pclans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* mobile layout: the bottom sheet (planner.js renderSheet) replaces the card and the panel */
  .planner .pclans__head { flex-direction: column; align-items: stretch; gap: 20px; }
  .planner .pclans__intro h1 { font-size: 40px; }
  .planner .pclans__go { justify-content: space-between; }
  .planner .pclans__fresh { text-align: left; }
  .planner .pboardview:not([hidden]) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "tools" "stage" "legend"; grid-template-rows: none; row-gap: 8px; }
  .planner .pmain > .ppanel { display: none; }
  .planner .pcard { display: none; }
  .planner.has-sheet { padding-bottom: calc(var(--sheet-h, 0px) + 24px); }
  /* the board fits above an open sheet (max 58vh): on tablets it is capped by the height left, not the width */
  .planner .pstage { aspect-ratio: 390 / 350; justify-self: center; width: min(100%, calc((42vh - 16px) * 390 / 350)); width: min(100%, calc((42dvh - 16px) * 390 / 350)); }
  .planner .pboardhead { min-height: 0; padding-block: 16px 4px; }
  .planner .pboardhead h1 { font-size: 34px; }
  .planner .pboardhead__lede { display: none; }
  .planner .ptools { flex-wrap: wrap; gap: 6px; padding: 6px; }
  .planner .ptools__acts { gap: 4px; }   /* ground + 5 icon buttons fit one row at 390px */
  .planner .pincome { padding: 0 10px; gap: 8px; }
  .planner .pincome__vals { gap: 8px; }
  /* icon-only buttons; the label stays for screen readers (same technique as .sr-only) */
  .planner .ptb__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .planner .ptb { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .planner .pclanbtn { width: auto; padding: 0 8px 0 6px; }
  .planner .pclanbtn .ptb__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .planner .ptb.ptb--ground { display: inline-flex; width: auto; padding: 0 8px; gap: 6px; }
  .planner .pincome__label { display: none; }
  .planner .plegend__keys { display: none; }
  /* the legend collapses to the lenses (one scrollable row) */
  .planner .plegend { padding: 6px 8px; }
  .planner .plegend__outlines, .planner .plegend__sep, .planner .plegend .plens[data-act="ground"] { display: none; }
  .planner .plegend__right { margin-left: 0; min-width: 0; flex: 1; flex-wrap: nowrap; }
  .planner .plenses { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
  .planner .plens { flex: none; height: 36px; }
  .planner .plegend:has(.plenses:empty) { display: none; }   /* lenses are all it shows here */
  /* taps on a tile select it (the sheet has the villager / level controls) */
  .planner .ptile .pbadge { pointer-events: none; }
  .planner .pgain { height: 17px; padding: 0 3px; gap: 2px; font-size: 10.5px; }
  .planner .pgain .ic { width: 10px; height: 10px; }
  /* no room for more rows on small tiles: the top MAX_CHIPS (2) gains in one row, then "+n" */
  .planner .pgains { bottom: calc(14% + 20px); display: flex; }
  .planner .pgains > .pgain:nth-child(n+3):not(.pgain--more) { display: none; }
  .planner .pgains > .pgain--more { display: inline-flex; color: var(--p-text-soft); }
  .planner .pbadge { height: 16px; padding-left: 2px; border-width: 1.5px; border-radius: 4px; }
  .planner .pbadge:not(:has(.plvl)) { padding-right: 2px; }
  .planner .pvil { width: 9px; }
  .planner .pvil .pic { width: 9px; height: 9px; }
  .planner .pvil--count { width: auto; font-size: 9.5px; }
  .planner .plvl { min-width: 8px; margin-left: 2px; padding: 0 3px; font-size: 10.5px; border-left-width: 1.5px; }
}
@media (max-width: 600px) {
  .planner .pclans__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
  /* phone: intro, the clan cards, then the Start button sticky at the bottom of the screen */
  .planner .pclans { display: flex; flex-direction: column; padding-top: 20px; }
  .planner .pclans__head { display: contents; }
  .planner .pclans__intro { padding-inline: var(--page-gutter); }
  .planner .pclans__intro h1 { font-size: 34px; }
  .planner .pclans__intro .pagehead__lede { font-size: 15px; }
  .planner .pclans__grid, .planner .pclans__hint { width: 100%; box-sizing: border-box; }   /* .wrap's auto margins would shrink them */
  .planner .pclans__grid { order: 1; }
  .planner .pclans__go { order: 2; position: sticky; bottom: 0; z-index: 2; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 16px;
    padding: 28px var(--page-gutter) max(12px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--color-bg) 24px); }
  .planner .pclans__fresh { font-size: 13px; text-align: center; }
  .planner .pclans__fresh br { display: none; }
  .planner .pcta { justify-content: center; }
  .planner .pclans__hint { order: 3; padding-inline: var(--page-gutter); }
  .planner .pclan__scene { height: 150px; }
  .planner .pclan__body { padding: 0 16px 18px; gap: 12px; }
  .planner .pclan__start .hexicon { --s: 42px; }
  .planner .pgodhex { width: 38px; height: 42px; }
}

/* =====================================================================
   UNITS PAGE (tools/site/units.py, static/units.js)
   ===================================================================== */
/* card: portrait in the header, a role chip, level-1 stats in the footer */
.ucard .card__head { padding-bottom: 10px; }
.ucard .portrait--card { --p: 72px; }
.portrait.is-placeholder { border-radius: var(--radius-md); object-fit: cover; filter: saturate(.6) brightness(.85); }
.ucard__role { flex: none; align-self: flex-start; }
.ucard .card__foot { margin-top: auto; }
.ucard .card__stats { flex-wrap: wrap; }
/* overlay: the transparent portrait sits on a soft glow instead of filling the frame */
.ovart--unit { background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--r) 24%, transparent), transparent 70%), var(--color-surface-inset); }
.ovart--unit img { object-fit: contain; padding: 10%; }
.ovart--unit img.is-placeholder { object-fit: cover; padding: 0; }
.udesc { margin: 0; color: var(--color-text-dim); line-height: 1.6; }
.udeploys { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* "Deployed by": one tile per structure (the Structures cards' rarity hex + cost, name, deploy text), linking to its
   Structures overlay; the bottom padding leaves room for the cost plaque that hangs below the hex */
.udeploy { display: flex; align-items: center; gap: 14px; padding: 8px 14px 14px 10px; border-radius: var(--radius-md); color: inherit; text-decoration: none;
  background: var(--color-surface-inset); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); transition: border-color .15s; }
.udeploy:hover, .udeploy:focus-visible { border-color: var(--color-frost-bright, var(--color-border)); }
.udeploy .hexicon { --s: 64px; }
.udeploy__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.udeploy__from { color: var(--color-text); font-weight: var(--fw-bold); }
.udeploy:hover .udeploy__from { color: var(--color-frost-bright, var(--color-text)); text-decoration: underline; }
.udeploy__how { color: var(--color-text-dim); }
/* view / level switches (.seg) in the filter bar */
.filterbar .seg { flex: none; }
.seg[hidden] { display: none; }
/* compare table; the name column stays put while the table scrolls sideways */
.cmpbox { margin-top: 28px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: var(--num-figures); }
.cmp th, .cmp td { height: 40px; padding: 0 12px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.cmp td { color: var(--color-text); font-weight: var(--fw-semibold); }
.cmp thead th { height: 44px; color: var(--c, var(--color-text-faint)); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.cmp tr:not(.cmp__group) > th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--color-surface-inset); }
.cmp__sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cmp__sort .ic { width: 18px; height: 18px; }
.cmp__sort:focus-visible, .cmp__open:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cmp th[aria-sort="descending"] .cmp__sort::after { content: "▼"; font-size: 9px; }
.cmp th[aria-sort="ascending"] .cmp__sort::after { content: "▲"; font-size: 9px; }
.cmp__who { display: inline-flex; align-items: center; gap: 10px; }
.cmp__who .portrait--row { --p: 32px; }
.cmp__open { all: unset; cursor: pointer; color: var(--color-text); font-weight: var(--fw-semibold); }
.cmp tr[data-item] { cursor: pointer; }
.cmp tr[data-item]:hover > * { background: color-mix(in srgb, var(--color-frost, #fff) 6%, var(--color-surface-inset)); }
.cmp tr[hidden] { display: none; }
.cmp .cmp__group th { height: 36px; color: var(--r-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .16em; text-transform: uppercase; text-align: left; }
/* the group label spans the whole (wide) row: keep it in view while the table scrolls sideways */
.cmp .cmp__group th > span { position: sticky; left: 12px; }
@container app (max-width: 720px) {
  .filterbar__row:has(.seg) { flex-wrap: wrap; padding-block: 8px; }
  .cmp th, .cmp td { padding: 0 8px; }
  .cmp__who .portrait--row { display: none; }
}

/* =====================================================================
   KEYWORD TOOLTIPS (tools/site/tips.py, static/tips.js, static/tips-core.mjs)
   ===================================================================== */
/* keywords look like plain text until tips.js has loaded tips.json (html.has-tips, spec 6.16) */
.ent { color: inherit; }
.has-tips [data-tip] { cursor: help; border-radius: 3px; }
.has-tips :is(a, button)[data-tip] { cursor: pointer; }
.has-tips :is(.kw, .ent, .card__unit, .unit__name)[data-tip], .has-tips .stat[data-tip] .stat__n,
.has-tips .ustable th > [data-tip], .has-tips .favrow b[data-tip], .has-tips .pstat__name[data-tip] {
  text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.has-tips .ent[data-tip] { color: var(--color-frost-bright); font-weight: var(--fw-semibold); }
.has-tips [data-tip]:not(a, button):hover, .has-tips [data-tip]:not(a, button).is-open {
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 16%, transparent); }
.has-tips .hexicon__cost[data-tip]:hover, .has-tips .hexicon__cost[data-tip].is-open { background: linear-gradient(180deg, #2a3746, #18222d);
  box-shadow: 0 0 0 1px #0a0e14, inset 0 0 0 1.5px var(--color-accent), 0 2px 4px rgba(0,0,0,.6); }
/* keywords inside a card sit above its stretched click area (.card__open::after); a click still bubbles to the card */
.has-tips .card [data-tip]:not(.hexicon__cost) { position: relative; z-index: 1; }
.has-tips [data-tip]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* the layer (a child of .codex after .layout, layout.py) and the tooltips */
.tiplayer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: calc(var(--z-sheet) + 10); }
.tip { position: absolute; z-index: 1; box-sizing: border-box; width: max-content; max-width: min(340px, calc(100vw - 16px));
  --mh: min(72vh, 560px); border-radius: var(--radius-md);
  background: url("assets/knot-tile.svg") 0 0 / 48px 64px repeat, var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-3), 0 0 0 1px #05080c;
  color: var(--color-text-dim); font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 1.55; text-align: left;
  opacity: 0; transform: translateY(3px); transition: opacity 120ms ease-out, transform 120ms ease-out; }
.tip.is-shown { opacity: 1; transform: none; }
.tip::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; }   /* invisible 4px bridge */
.tip__in { box-sizing: border-box; max-height: calc(var(--mh) - 2px); overflow: auto; overscroll-behavior: contain;
  padding: 13px 15px; border-radius: inherit; }
.tip--narrow { width: 300px; }
.tip--wide { width: 340px; }
.tip--card { width: 320px; }
.tip--card .tip__in { padding: 0; }
.tip__bar { position: absolute; right: 6px; top: 6px; z-index: 6; display: flex; gap: 4px; }
.tip__x, .tip__back { all: unset; display: none; place-items: center; height: 26px; border-radius: 6px; color: var(--color-text-dim); cursor: pointer; }
.tip__x { width: 26px; font-size: 18px; line-height: 1; }
.tip.is-touch .tip__x, .tip--sheet .tip__x { display: grid; }
.tip__x:hover, .tip__x:focus-visible, .tip__back:hover, .tip__back:focus-visible { color: var(--color-text); background: rgba(255,255,255,.07); }
.tip__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 24px; }
.tip__icon .ic { width: 34px; height: 34px; color: var(--c); }
.tip__tagmark { flex: none; width: 22px; height: 22px; margin: 4px; transform: rotate(45deg);
  border: 1px solid var(--color-border-strong); background: var(--color-surface-inset); }
.tip__swatch { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--g); }
.g--plains { --g: #7d8c4f; } .g--fertile { --g: #4f8f3a; } .g--rocky { --g: #8a8378; }
.g--wildland { --g: #7a5f3a; } .g--forest { --g: #2f5d34; } .g--mountain { --g: #6c7480; }
.tip__god { --s: 34px; width: 34px; height: 34px; }
.tip__portrait { --p: 48px; }
.tip__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; line-height: 1.1;
  letter-spacing: var(--tracking-display); color: var(--color-text); }
.tip__kind { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-faint); font-weight: var(--fw-semibold); }
.tip__text { margin: 0; }
.tip__stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; }
.tip__src { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 18px;
  color: var(--color-text-faint); border: 1px solid var(--color-border); white-space: nowrap; }
.tip__none { color: var(--color-text-faint); font-style: italic; }
.tip__sub { margin: 12px 0 6px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--color-text-faint); font-weight: var(--fw-semibold); }
.tip__sub b { color: var(--color-text-dim); margin-left: 4px; }
.tiplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: var(--fs-xs); }
.tiplist li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tiplist .hexicon { filter: drop-shadow(0 1px 1px rgba(0,0,0,.8)); }
.tiplist .ent { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* mini cards (structures, Fate cards) */
.tipcard__head { display: flex; align-items: center; gap: 12px; padding: 14px 40px 22px 14px; }
.tipcard__title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tipcard .rarity { font-size: var(--fs-micro); }
.tipcard__tags { font-size: var(--fs-xs); color: var(--color-text-dim); }
.tipcard .hexicon__cost { font-size: var(--fs-xs); }
.tipcard .hexicon__cost .ic { width: 15px; height: 15px; }
.tipcard__body { display: flex; flex-direction: column; gap: 6px; padding: 0 15px 10px; }
.tipcard__body .fx { margin: 0; }
.tip__more { color: var(--color-frost); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.tip__open { display: flex; align-items: center; justify-content: flex-end; gap: 2px; margin-top: 10px; padding: 8px 12px;
  border-top: 1px solid var(--color-border); color: var(--color-frost-bright); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-decoration: none; background: color-mix(in srgb, #000 18%, transparent); }
.tipcard .tip__open { margin-top: 0; }
.tip__in > .tip__open { margin: 10px -15px -13px; }
.tip__open:hover { color: #fff; }
.tip__open .ic { width: 16px; height: 16px; }
/* loops: a keyword whose subject is already open up the stack is inert, plain faint text; hovering it pulses that tooltip */
.tk-self { cursor: inherit; }
.tip [data-tip].is-cycle { cursor: default; color: var(--color-text-faint) !important; font-weight: var(--fw-medium); filter: grayscale(1);
  text-decoration: none !important; background: none !important; box-shadow: none !important; }
.tip [data-tip].is-cycle .stat__n, .tip [data-tip].is-cycle .stat__v { text-decoration: none !important; color: inherit; }
.tip [data-tip].is-cycle .ic { opacity: .45; }
@keyframes tipflash {
  0%, 100% { box-shadow: var(--shadow-3), 0 0 0 1px #05080c; }
  30% { box-shadow: var(--shadow-3), 0 0 0 2px var(--color-accent), 0 0 22px 4px color-mix(in srgb, var(--color-accent) 55%, transparent); }
}
.tip.is-flash { animation: tipflash 700ms ease-out; }
/* phones (spec 6.13): a bottom sheet; only the newest level shows, "‹ parent" goes back */
@media (max-width: 600px) {
  .tip.tip--sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; --mh: 70vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateY(12px); }
  .tip.tip--sheet.is-shown { transform: none; }
  .tip.tip--sheet::before { display: none; }
  .tiplayer > .tip--sheet:not(:last-child), .overlay > .tip--sheet:not(:last-of-type) { display: none; }
  .tip--sheet .tip__bar { position: static; display: flex; padding: 8px 8px 0 10px; }
  .tip--sheet .tip__back { display: inline-flex; padding: 0 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-frost-bright); }
  .tip--sheet .tip__x { margin-left: auto; }
  .tip--sheet .tip__head { padding-right: 0; }
  .tip--sheet .tipcard__head { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; transform: none; }
  .tip.is-flash { animation: none; }
}

/* item pages (layout.item_body): the overlay panel as a page; "ov" so the panel's container queries apply */
.itempage { padding-block: 22px 48px; }
.backlink { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 14px; color: var(--color-text-dim);
  font-size: var(--fs-sm); text-decoration: none; }
.backlink:hover { color: var(--color-text); }
.itemframe { container: ov / inline-size; }
.itemframe > .ovpanel { margin-inline: auto; }   /* only the overlay panel is centred (max-width 1040 like the overlay); gods, clans and patches stretch */
.godsec__link, .clanhero__link, .patchnote__link { color: inherit; text-decoration: none; }
.godsec__link:hover, .clanhero__link:hover, .patchnote__link:hover { text-decoration: underline; }

.notfound__links { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; padding: 0; }

/* legal page (legal.py) */
.legal { padding-bottom: 24px; line-height: 1.6; }
.legal > section { max-width: 760px; }
.legal section + section { margin-top: 36px; }
.legal h2 { font-family: var(--font-display, inherit); margin: 0 0 12px; }
.legal h3 { font-size: var(--fs-md, 1.05rem); margin: 22px 0 6px; }
.legal p, .legal ul { margin: 0 0 12px; }
.legal a { color: var(--color-accent, inherit); }
.legal code { font-size: .92em; }
.legal__updated { color: var(--color-text-dim); font-size: var(--fs-sm); margin-top: 24px; }