/* =====================================================================
   Gear upgrade reports dashboard -- "command center" layout
   Reuses the streaming overlay's PAGE language (its index.css): ribbons,
   angled "rcard" panels, flat slanted .copy-style buttons/tags, hairline
   tables and slanted step badges. No capsules or round pills: square
   corners everywhere except the 5px caption tags. This is a normal page that
   scrolls, so tokens.css's body{overflow:hidden} (built for a fixed OBS
   canvas) is overridden right away.
   ===================================================================== */

html { background: var(--ink-900); }
body {
  overflow: auto;
  background: var(--ink-900);
  min-height: 100vh;
}

a { color: var(--jade); text-decoration-color: rgba(63, 217, 164, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--jade); }
:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }

.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 40px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ---- ribbon (page brand mark) ----------------------------------------
   Same shape as the overlay's: a tapered bar with a capsule accent block,
   built from two clipped layers so the border follows the angled edge. */
.rib { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; }
.rib__bar {
  height: var(--rib-h, 34px);
  padding: 1px;
  background: var(--ink-600);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rib-cut, 11px)) 100%, 0 100%);
}
.rib__in {
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rib-cut, 11px) + 1px) 100%, 0 100%);
  padding-right: calc(var(--rib-cut, 11px) + 12px);
}
.rib__acc {
  flex: 0 0 var(--rib-h, 34px);
  width: var(--rib-h, 34px);
  height: 100%;
  background: var(--acc, var(--jade));
  color: var(--ink-900);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  display: grid;
  place-items: center;
}
.rib__acc svg { width: 15px; height: 15px; }
.rib__val {
  padding-left: 13px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}
/* .dash-header has no align-items:flex-start (unlike the overlay's .head),
   so a flex column child stretches to the full row width by default --
   without this the ribbon would span the whole page instead of hugging
   its own content, the way it does on the overlay's page. */
.brand-rib { align-self: flex-start; }
/* Brand ribbon left, EN | NL switch right, on one line above the title. */
.dash-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.lang-switch { display: flex; gap: 4px; }
.lang-switch .pill { padding: 6px 14px 6px 11px; }

/* ---- angled "rcard" panel ---------------------------------------------
   Same idiom as the overlay: flat two-layer border, corner cut bottom
   right, caption sitting on the top edge as its own capsule. */
.rcard-wrap { position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 12px; margin-top: 12px; }
.rcard-wrap:first-child { margin-top: 0; }
.rcard__cap {
  position: absolute; top: 0; left: 22px; z-index: 2;
  height: 22px; display: flex; align-items: center; padding: 0 12px;
  background: var(--ink-900); border: 1px solid var(--ink-600); border-radius: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-300); white-space: nowrap;
}
.rcard {
  padding: 1px; background: var(--ink-700);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.rcard__in {
  background: var(--ink-800);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%);
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ---- capsules (character identity) ------------------------------------ */
.capsule-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.capsule {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--paper);
}
.capsule__dot { width: 8px; height: 8px; background: var(--jade); flex: 0 0 8px; }
.capsule__text { white-space: nowrap; }

/* ---- tags and buttons ---------------------------------------------------
   The overlay page's .copy button (css/index.css): flat ground, no border,
   no radius, uppercase, and the right edge slanted by 6px. Status tags use
   the same shape with a tinted ground; an active toggle is the .copy.ok
   state (solid jade, dark text). Flat tints only, no gradients. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px 7px 12px;
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  border: 0; border-radius: 0;
  background: var(--ink-750); color: var(--ink-200);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  cursor: default; text-decoration: none;
}
.pill--sm { padding: 4px 12px 4px 9px; font-size: 10px; }
.pill--ok { background: var(--jade-ghost); color: var(--jade); }
.pill--fail { background: rgba(217, 139, 139, .15); color: var(--rose); }
.pill--warn { background: rgba(216, 178, 99, .15); color: var(--gold); }
.pill--muted { background: var(--ink-750); color: var(--ink-300); }
.pill--link, .pill--action, .pill--filter {
  color: var(--jade); background: var(--ink-750); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pill--link:hover, .pill--action:hover, .pill--filter:hover { background: var(--ink-700); }
.pill--filter { color: var(--ink-300); }
.pill--filter:hover { color: var(--paper-dim); }
.pill--filter.is-active { background: var(--jade); color: var(--ink-900); }
/* Item levels are values, like the numbers in the overlay's source table:
   plain mono text, no ground. */
.pill--ilvl {
  padding: 0; background: none; clip-path: none;
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--paper-dim);
}

/* ---- header ------------------------------------------------------------ */
/* gap:0, like the overlay's .head -- each child's own margin sets the
   rhythm below, matching the overlay's spacing instead of an even flex gap. */
.dash-header { display: flex; flex-direction: column; gap: 0; padding-bottom: 24px; border-bottom: 1px solid var(--ink-700); }
/* Verbatim from the overlay's .head h1 / .lead (css/index.css). */
.dash-header h1 {
  font-size: clamp(38px, 5.6vw, 60px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.032em;
  color: var(--paper);
}
.lead {
  margin-top: 20px;
  max-width: 64ch;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--paper-dim);
}
@media (max-width: 900px) {
  .lead { font-size: 18px; }
}
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.status-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.updated { font-size: 13px; color: var(--ink-400); cursor: default; }

/* ---- peon mascot -------------------------------------------------------
   A square frame with a thin border, like the overlay page's screenshot
   boxes (.shot__box). Only shown for the run currently on screen, so it sits next to
   the status pill rather than inside it. */
.mascot-slot[hidden] { display: none; }
.mascot-frame {
  width: 90px; aspect-ratio: 498 / 420;
  border: 1px solid var(--ink-700);
  background: var(--ink-900); box-sizing: border-box;
  overflow: hidden;
}
.mascot__media { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ---- global error / viewing banner -------------------------------------- */
.error-capsule {
  display: flex; align-items: center; gap: 10px;
  background: rgba(217, 139, 139, .12); border: 1px solid rgba(217, 139, 139, .4);
  color: var(--paper);
  padding: 12px 16px; font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.error-capsule__icon {
  flex: 0 0 20px; width: 20px; height: 20px;
  background: var(--rose); color: var(--ink-900);
  display: grid; place-items: center; font-weight: 800; font-size: 12px;
}
.global-error { margin-top: -8px; }

.viewing-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: rgba(216, 178, 99, .1); border: 1px solid rgba(216, 178, 99, .35);
  padding: 12px 18px; font-size: 14px; color: var(--paper-dim);
}
/* An author rule setting display always beats the UA [hidden] rule at equal
   specificity, so an element can end up "hidden" yet still a visible empty
   box. Say it again, explicitly, for this element. */
.viewing-banner[hidden] { display: none; }

/* ---- views / sections ---------------------------------------------------- */
.view__title {
  font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: 6px;
}
.section-caption { font-size: 13px; color: var(--ink-500); max-width: 62ch; margin-bottom: 16px; }
.reports-container, .crest-container, .history-container { display: flex; flex-direction: column; gap: 16px; }
.muted-note { color: var(--ink-400); font-size: 14px; }

/* ---- stat tiles ---------------------------------------------------------- */
.tiles-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tile {
  background: var(--ink-800); border: 1px solid var(--ink-700);
  border-left: 2px solid var(--jade); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.tile__label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); }
.tile__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Up to two lines, then an ellipsis; Wowhead's hover tooltip carries the full name. */
.tile__link {
  font-size: 15px; font-weight: 600; color: var(--paper); line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}
.tile__big { font-size: 28px; font-weight: 600; color: var(--paper); line-height: 1.05; }
.tile__big--jade { color: var(--jade); cursor: help; }
.tile__muted { font-size: 13px; color: var(--ink-400); }
.tile__slot { font-size: 11px; color: var(--ink-400); }
.tile__crest-line { display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; }
.tile__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tile__pct { font-size: 13px; color: var(--jade); font-weight: 600; }
.tile__pct--gold { color: var(--gold); }
.tile__rank { font-size: 12px; color: var(--paper-dim); }

/* ---- per-difficulty report links in the history rows; a jade check marks the
   report that was uploaded. */
.report-links { display: inline-flex; gap: 10px; }
.report-link {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-300); text-decoration: none;
}
a.report-link:hover { color: var(--jade); }
.report-link--fail { color: var(--rose); }
.report-link--up { color: var(--paper-dim); }
.report-link__check { color: var(--jade); }

/* ---- command grid: reports (main) + crests/history (sidebar) ------------- */
.command-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: "reports crests" "reports history";
  gap: 24px;
  align-items: start;
}
.grid-reports { grid-area: reports; }
.grid-crests { grid-area: crests; }
.grid-history { grid-area: history; }

/* ---- report card content ------------------------------------------------- */
.report-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.report-card__link { font-weight: 600; }
.report-card__error {
  color: var(--rose); font-size: 13.5px; line-height: 1.5;
  background: rgba(217, 139, 139, .08); border-left: 2px solid var(--rose);
  padding: 8px 12px; overflow-wrap: anywhere;
}
.warning-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* ---- tabs ------------------------------------------------------------------ */
.tablist { display: flex; gap: 8px; margin-bottom: 4px; }
.tab {
  cursor: pointer; background: var(--ink-750); color: var(--ink-300);
  border: 0; border-radius: 0;
  padding: 8px 20px 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--f-display);
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tab:hover { background: var(--ink-700); color: var(--paper-dim); }
.tab.is-selected { background: var(--jade); color: var(--ink-900); }
.tabpanel { display: flex; flex-direction: column; gap: 16px; }
.tabpanel[hidden] { display: none; }
.report-panel { display: flex; flex-direction: column; gap: 16px; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- power to gain: the report's best-per-slot total, follows the filter -- */
.power-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 10px 14px; background: var(--jade-ghost); border-left: 2px solid var(--jade);
  cursor: help;
}
.power-line[hidden] { display: none; }
.power-line__label { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); }
.power-line__pct { font-size: 18px; font-weight: 600; color: var(--jade); }
.power-line__note { font-size: 13px; color: var(--paper-dim); }

.upgrade-rows { display: flex; flex-direction: column; }
.upgrade-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, .9fr) minmax(0, 1.3fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--ink-750);
}
.upgrade-row:last-child { border-bottom: 0; }
.upgrade-row__item {
  font-size: 14px; font-weight: 600; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upgrade-row__source { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.upgrade-row__boss,
.upgrade-row__where { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upgrade-row__boss { font-size: 12px; color: var(--paper-dim); }
.upgrade-row__where { font-size: 11px; color: var(--ink-400); }
.bar-track { height: 8px; background: var(--ink-700); overflow: hidden; min-width: 50px; }
.bar-fill { height: 100%; background: var(--jade); }
.bar-fill--gold { background: var(--gold); }
.upgrade-row__pct { font-size: 13px; color: var(--jade); text-align: right; min-width: 58px; }
.bars-toggle { display: flex; justify-content: flex-start; }

/* ---- crest sidebar (compact rows) ------------------------------------------ */
.crest-compact-list { display: flex; flex-direction: column; }
.crest-compact-row {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 0; border-bottom: 1px solid var(--ink-750);
}
.crest-compact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.crest-compact-row:first-child { padding-top: 0; }
.crest-compact-row__item {
  font-size: 14px; font-weight: 600; color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crest-compact-row__meta { font-size: 11.5px; color: var(--ink-400); }
.crest-compact-row__bar-row { display: flex; align-items: center; gap: 10px; }
.crest-compact-row__bar-row .bar-track { flex: 1; }
.crest-row__pct { font-size: 12px; color: var(--gold); white-space: nowrap; }

/* ---- run history: compact list -------------------------------------------- */
.history-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--ink-750);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.history-row:last-child { border-bottom: 0; }
.history-row:hover { background: var(--ink-800); }
.history-row.is-selected { background: var(--ink-750); }
.history-row__dot {
  width: 8px; height: 8px; background: var(--ink-500); flex: 0 0 8px;
}
.history-row.is-selected .history-row__dot { background: var(--jade); }
.history-row__time { font-size: 12px; color: var(--paper-dim); white-space: nowrap; }
.history-row__trigger { font-size: 11px; color: var(--ink-400); white-space: nowrap; }
.history-row__gh { font-size: 11px; color: var(--ink-400); margin-left: auto; white-space: nowrap; }
.history-row__gh:hover { color: var(--jade); }
.history-showmore { margin-top: 12px; }
/* A group's "+N runs with the same results" toggle, and the runs it unfolds. */
.history-fold {
  order: 10; flex-basis: 100%; text-align: left; padding: 0 0 0 16px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--f-display); font-size: 11px; color: var(--ink-400); white-space: nowrap;
}
.history-fold::before { content: '\25B8'; display: inline-block; margin-right: 5px; color: var(--jade); transition: transform var(--t-fast) var(--ease); }
.history-fold.is-open::before { transform: rotate(90deg); }
.history-fold:hover { color: var(--paper-dim); }
.history-row--nested { padding-left: 22px; }
.history-row--nested .history-row__dot { width: 6px; height: 6px; flex-basis: 6px; background: var(--ink-600); }
.history-legend { white-space: nowrap; }

/* ---- gear paper doll -------------------------------------------------------- */
.paperdoll {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
  grid-template-areas: "left id right" "left weapons right";
  gap: 24px;
  align-items: start;
}
.pd-col { display: flex; flex-direction: column; }
.pd-col--left { grid-area: left; }
.pd-col--right { grid-area: right; }
.pd-id {
  grid-area: id;
  background: var(--ink-800); border: 1px solid var(--ink-700);
  padding: 20px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.pd-id__name { font-size: 19px; font-weight: 600; color: var(--paper); }
.pd-id__spec { font-size: 13px; color: var(--paper-dim); }
.pd-id__ilvl { margin-top: 8px; font-size: 13px; color: var(--ink-300); }
.pd-id__ilvl-note { color: var(--ink-500); }
.pd-id__asof { margin-top: 2px; font-size: 12px; color: var(--ink-400); }
.pd-id__asof--stale { color: var(--gold); }
.pd-id__stale { margin-top: 6px; cursor: help; }
.pd-id__update { margin-top: 8px; }
.pd-weapons { grid-area: weapons; display: flex; flex-direction: column; }

.pd-slot {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ink-750);
  padding: 11px 2px; min-width: 0;
}
.pd-col .pd-slot:first-child, .pd-weapons .pd-slot:first-child { border-top: 1px solid var(--ink-700); }
.pd-slot--empty { color: var(--ink-500); }
.pd-slot__label {
  flex: 0 0 78px; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400);
}
.pd-slot__main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.pd-slot__item {
  font-size: 13.5px; font-weight: 600; color: var(--paper);
  white-space: normal; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0;
}
/* The best upgrade for the slot, under the equipped item: a quieter second line. */
.pd-slot__up {
  flex: 1 0 100%; display: flex; align-items: baseline; gap: 6px; min-width: 0;
  font-size: 12px; color: var(--ink-300); cursor: default;
}
.pd-slot__up-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-slot__up-arrow { color: var(--jade); font-weight: 700; }
.pd-slot__up-item { color: var(--paper-dim); }
.pd-slot__up-ilvl { color: var(--ink-400); font-size: 11.5px; }
.pd-slot__up-pct { margin-left: auto; color: var(--jade); font-size: 12px; white-space: nowrap; }

/* ---- "since the previous run" ---------------------------------------------- */
.changes {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; background: var(--ink-850); border: 1px solid var(--ink-700);
}
.changes__title { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-400); }
.changes__none { font-size: 13px; color: var(--ink-300); }
.changes__body { display: flex; flex-direction: column; gap: 8px; }
.changes__line { display: flex; align-items: baseline; gap: 10px; }
.changes__tag {
  flex: 0 0 auto; min-width: 58px; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase;
}
.changes__tag--new { color: var(--jade); }
.changes__tag--gone { color: var(--rose); }
.changes__tag--gear { color: var(--gold); }
.changes__items { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; font-size: 13px; }
.changes__item { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--paper-dim); }
.changes__item--gone .changes__link { text-decoration: line-through; text-decoration-color: var(--ink-500); }
.changes__pct { font-size: 12px; color: var(--ink-300); }
.changes__item--new .changes__pct { color: var(--jade); }
.changes__slot { color: var(--ink-400); }

/* ---- footer / "how this works" --------------------------------------------- */
.dash-footer { display: flex; flex-direction: column; gap: 16px; align-items: center; padding-top: 8px; }
.how-it-works {
  width: 100%; max-width: 640px;
  background: var(--ink-800); border: 1px solid var(--ink-700);
  padding: 4px 22px;
}
.how-it-works summary {
  cursor: pointer; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--paper-dim);
  list-style: none;
}
.how-it-works summary::-webkit-details-marker { display: none; }
.how-it-works summary::before { content: '\25B8'; display: inline-block; margin-right: 8px; color: var(--jade); transition: transform var(--t-fast) var(--ease); }
.how-it-works[open] summary::before { transform: rotate(90deg); }
/* The overlay page's numbered .steps: slanted jade-ghost number blocks. */
.how-it-works__list {
  list-style: none; counter-reset: step; margin: 4px 0 20px; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 14px; line-height: 1.6; color: var(--ink-300);
}
.how-it-works__list li {
  counter-increment: step;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start;
}
.how-it-works__list li::before {
  content: counter(step);
  width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 13px; font-weight: 500;
  color: var(--jade); background: var(--jade-ghost);
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.footer-link { font-size: 13px; color: var(--ink-400); }
.footer-link:hover { color: var(--jade); }
.footer-attribution { font-size: 13px; color: var(--ink-400); }
.footer-attribution a { color: var(--paper-dim); }
.footer-attribution a:hover { color: var(--jade); }

.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---- responsive: command-center reflow at ~1100px, single column below --- */
@media (max-width: 1100px) {
  .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles-grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .command-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crests" "reports" "history";
  }
  .paperdoll {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "id id" "left right" "weapons weapons";
  }
  /* The 78px side-by-side label eats too much of an already-halved column;
     stack the label above the item instead so the name gets the width. */
  .pd-slot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pd-slot__label { flex: 0 0 auto; }
  .pd-slot__main { width: 100%; }
  /* Half a column is too narrow to cut the upgrade's name short: let it wrap. */
  .pd-slot__up { flex-wrap: wrap; row-gap: 2px; }
  .pd-slot__up-name { flex-basis: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
}

/* ---- responsive: down to 360px -------------------------------------------- */
@media (max-width: 720px) {
  .page { padding: 28px 16px 72px; gap: 24px; }
  .rcard__in { padding: 30px 16px 20px; }
  /* name + ilvl on one line, source under it, bar + % on the last line */
  .upgrade-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "item ilvl" "source source" "bar pct";
    row-gap: 6px; column-gap: 10px;
  }
  .upgrade-row > .upgrade-row__item { grid-area: item; }
  .upgrade-row > .pill--ilvl { grid-area: ilvl; justify-self: end; }
  .upgrade-row > .upgrade-row__source { grid-area: source; }
  .upgrade-row > .bar-track { grid-area: bar; }
  .upgrade-row > .upgrade-row__pct { grid-area: pct; text-align: right; }
  .history-row { padding: 10px 2px; }
}

@media (max-width: 400px) {
  .page { padding: 22px 12px 64px; }
  .capsule__text { font-size: 12px; }
  .rib__val { font-size: 14px; }
  .mascot-frame { width: 68px; }
  .tile__big { font-size: 22px; }
}

/* ---- motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}