/* ============================================================================
   Guides: the hub (/guides) and the eight guides (/guides/<slug>).
   Builds on style.css (tokens, .page-hero, .toc, .panel, .prose, .table-wrap,
   .titan-card, .boss-card, .building-card, .steps, .checks, .stats, chips).
   Sections:
     1. Hero art            5. Fights: tiles, specials, LOOT bar, pay, boards
     2. Guide layout        6. Titans: roster, wheel
     3. Prose tweaks        7. Packs, town, Boss Rush, leagues, missions
     4. Pager               8. The hub
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. Hero art — portrait titans, wide bosses, buildings: sized by height
   --------------------------------------------------------------------------- */
.guide-hero .page-hero-art {
  width: auto;
  height: clamp(170px, 46vw, 220px);
  max-width: 100%;
  object-fit: contain;
}
.guide-hero .guide-hero-boss { height: clamp(160px, 44vw, 210px); }
@media (min-width: 900px) {
  .guide-hero .page-hero-grid { align-items: center; }
  .guide-hero .page-hero-art { height: 300px; max-width: 380px; }
  .guide-hero .guide-hero-boss { height: 280px; }
}


/* ---------------------------------------------------------------------------
   2. Layout — phones: TOC, article, all guides. Desktop: guides nav + sticky
   TOC on the left, the article on the right.
   --------------------------------------------------------------------------- */
.guide-body { padding: 28px 0 var(--section-y); }
.guide-layout {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "toc" "main" "nav";
}
.guide-layout > * { min-width: 0; }
.guide-toc { grid-area: toc; }
.guide-main { grid-area: main; }
.guide-nav { grid-area: nav; }
@media (min-width: 1024px) {
  .guide-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "nav main" "toc main";
    column-gap: 32px;
    row-gap: 20px;
    align-items: start;
  }
  .guide-toc { position: sticky; top: calc(var(--header-h) + 20px); }
}

/* all eight guides (current one marked) */
.guide-nav {
  padding: 16px 12px 12px;
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
}
.guide-nav-title {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 4px 8px;
  color: var(--muted);
  font: 700 .9375rem/1.2 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.guide-nav-title:hover { color: var(--link); text-decoration: underline; }
.guide-nav ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.guide-nav li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  color: var(--ink);
  font: 600 1.0625rem/1.2 var(--font-display);
  text-decoration: none;
}
.guide-nav li a img { flex: none; width: 28px; height: 28px; }
.guide-nav li a:hover { background: var(--well); }
.guide-nav li a[aria-current="page"] {
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border);
  font-weight: 700;
}
@media (min-width: 560px) and (max-width: 1023.98px) {
  .guide-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the TOC (44px rows, dark-blue discs) is style.css's .toc as it stands */

/* the article panel */
.guide-article { --pad: clamp(18px, 3.4vw, 44px); }
.guide-article .prose { max-width: none; counter-reset: gsec; container: prose / inline-size; }
.guide-article .prose > p,
.guide-article .prose > ul:not([class]),
.guide-article .prose > ol:not([class]) { max-width: 74ch; }
.guide-version {
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--well);
  color: var(--ink);
  font: 600 1rem/1.45 var(--font-display);
}
/* numbered section heads that match the TOC's numbers */
.guide-article .prose h2 {
  counter-increment: gsec;
  display: flex;
  align-items: center;
  gap: .45em;
  margin-top: 1.7em;
  padding-top: 1.1em;
  border-top: 3px dashed var(--panel-border);
}
.guide-article .prose h2::before {
  content: counter(gsec);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: linear-gradient(var(--secondary-bottom), var(--secondary-lip));
  box-shadow: 0 3px 0 #173D8A, 0 0 0 3px var(--keyline);
  color: #fff;
  font-size: .62em;
  line-height: 1;
}
.guide-article .prose .guide-version + h2 { margin-top: 1.2em; padding-top: 0; border-top: 0; }
.guide-article .prose h3 { margin-top: 1.4em; }


/* ---------------------------------------------------------------------------
   3. Prose tweaks — shared lists inside .prose keep their own spacing
   --------------------------------------------------------------------------- */
.prose :is(.steps, .checks, .stats, .tile-row, .combos, .mission-list, .town-map) { padding-left: 0; }
.prose :is(.steps, .stats, .tile-row, .combos, .mission-list, .town-map) > li + li { margin-top: 0; }
.prose .steps > li { background: #FFFDF8; }
@media (max-width: 479.98px) {
  .prose .steps > li { padding: 12px 14px 12px 60px; }
  .prose .steps > li::before { left: 12px; top: 12px; width: 36px; height: 36px; font-size: 1.125rem; }
}
.prose .checks > li + li { margin-top: .65em; }
.guide-stats { --stat-cols: 4; }
.guide-stats .stat-num { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem); }
.prose .table-wrap caption { color: var(--ink); }
.lc { text-transform: none; }
.prose .note, .prose .tip { max-width: 74ch; }
.formula {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 10px 18px;
  border-radius: 14px;
  background: var(--well);
  box-shadow: inset 0 0 0 2px var(--well-border);
  font: 700 clamp(1.0625rem, 1rem + .5vw, 1.3125rem)/1.3 var(--font-display);
}


/* ---------------------------------------------------------------------------
   4. Pager — previous / next guide
   --------------------------------------------------------------------------- */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border: 2px solid var(--panel-border);
  border-radius: var(--radius-card);
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.pager-link:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--panel-shadow); }
.pager-link:active { transform: scale(.98); }
.pager-next { align-items: flex-end; text-align: right; }
.pager-dir { color: var(--muted); font: 700 .875rem/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.pager-name { font: 700 clamp(1.0625rem, 1rem + .4vw, 1.25rem)/1.2 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }


/* ---------------------------------------------------------------------------
   5. Fights and boards
   --------------------------------------------------------------------------- */
.tile-row { display: flex; flex-wrap: wrap; gap: 12px 10px; list-style: none; }
.tile-row li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  font: 700 .875rem/1.1 var(--font-display);
  letter-spacing: .05em;
}
.tile-row .tile { width: 52px; height: 52px; }
@media (max-width: 479.98px) {
  .tile-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.el-link { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* a tile with a white special overlay laid on top */
.tile-stack { position: relative; display: inline-block; flex: none; width: 64px; height: 64px; }
.tile-stack img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile-pair { display: inline-flex; justify-content: center; gap: 4px; }

.specials { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.special {
  padding: 16px 16px 18px;
  border: 2px solid var(--well-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #EEF5FF, var(--well));
  text-align: center;
}
.special h3 { margin-top: 6px; }
.special > * + * { margin-top: .35em; }
.special-how { color: var(--link); font: 700 .9375rem/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
.special-quote { font: 600 1rem/1.4 var(--font-display); }

.combos { display: grid; gap: 10px; list-style: none; }
.combos li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 2px solid var(--well-border);
  border-radius: 14px;
  background: var(--well);
}
.combo-tiles { display: inline-flex; flex: none; align-items: center; gap: 2px; }
.combo-tiles .tile-stack { width: 46px; height: 46px; }
.combo-op { font: 700 1.25rem/1 var(--font-display); }
.combo-text strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
@media (max-width: 379.98px) {
  .combos li { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* the LOOT bar demo, on a water fight ground */
.loot-demo {
  padding: 14px 18px 38px;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--water-top), var(--water-bottom));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
}
.loot-head { display: flex; justify-content: space-between; font: 700 1.125rem/1.2 var(--font-display); letter-spacing: .04em; }
.loot-pct { font-size: 1.375rem; }
.loot-track {
  position: relative;
  height: 22px;
  margin-top: 8px;
  border-radius: var(--radius-pill);
  background: #EEF3FD;
  box-shadow: 0 0 0 3px #fff, inset 0 3px 0 rgba(43, 47, 74, .1);
}
.loot-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--coin-hi), var(--coin) 55%, var(--coin-shade));
}
.loot-mark { position: absolute; top: -5px; bottom: -5px; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--ink); }
.loot-mark > span { position: absolute; top: 100%; left: 50%; margin-top: 7px; transform: translateX(-50%); font: 700 .9375rem/1 var(--font-display); white-space: nowrap; }
.loot-mark-end { margin-left: -4px; }
.loot-mark-end > span { left: auto; right: 0; transform: none; }

/* pay example */
.pay-example {
  padding: 14px 18px 16px;
  border: 2px solid var(--highlight-border);
  border-radius: var(--radius-card);
  background: var(--highlight);
}
.pay-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 700 1.125rem/1.3 var(--font-display); }
.pay-label { padding: 3px 12px; border-radius: var(--radius-pill); background: #fff; box-shadow: inset 0 0 0 2px var(--highlight-border); }
.pay-result { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pay-result .chip { min-height: 34px; font-size: 1rem; }
.el-chips { --gap: 6px 8px; }

/* the four boards */
.boards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.board-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
}
.board-art {
  display: grid;
  place-items: center;
  padding: 12px 12px 4px;
  background: linear-gradient(180deg, var(--diamond-top), var(--diamond-bottom));
  border-bottom: 2px solid var(--panel-border);
}
.board-svg { width: 100%; max-width: 220px; height: auto; }
.board-card figcaption { display: grid; align-content: start; gap: 8px; padding: 12px 14px 16px; }
.board-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 1.25rem/1.2 var(--font-display); text-transform: uppercase; }
.board-text { font-size: 1rem; line-height: 1.5; }
.board-quote {
  display: block;
  padding: 7px 11px;
  border-radius: 12px;
  background: var(--well);
  font: 600 1rem/1.4 var(--font-display);
}
.svg-num { font: 700 15px var(--font-display); fill: #2B2F4A; }
/* Quad: one wide card with its three portal types */
.board-wide { margin-top: 16px; }
.board-wide figcaption { container-type: inline-size; }
.board-wide .board-art { padding-bottom: 10px; }
.quad-types { display: grid; gap: 10px; margin-top: 4px; }
.quad-type {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 2px solid var(--panel-border);
  border-radius: 14px;
  background: #FFFDF8;
}
.quad-svg { width: 100%; max-width: 140px; height: auto; }
.quad-cap { display: grid; gap: 4px; font-size: 1rem; }
.quad-cap strong { font: 700 1.0625rem/1.2 var(--font-display); }
@container (min-width: 460px) {
  .quad-types { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quad-type { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; text-align: center; }
  .quad-cap { justify-items: center; }
}
@container prose (min-width: 760px) {
  .board-wide { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
  .board-wide .board-art { border-bottom: 0; border-right: 2px solid var(--panel-border); align-content: center; }
}
/* .prose styles figcaptions as muted captions; these are cards */
.prose :is(.board-card, .titan-card, .boss-card, .building-card) figcaption { margin-top: 0; color: var(--ink); }
.prose :is(.titan-card, .boss-card) .titan-ult, .prose .building-card .building-role { color: var(--muted); }

/* wide number tables stack into one card per row on phones (labels come from
   data-label, written from each column's heading) */
@media (max-width: 559.98px) {
  .stack-table, .stack-table tbody { display: block; }
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .stack-table caption, .items-fx caption { display: block; padding: 10px 14px 2px; }
  .prose :is(.stack-table, .items-fx) tbody tr:nth-child(even) td { background: none; }
  .stack-table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 8px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--panel-border);
  }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table tbody tr:nth-child(even) { background: rgba(255, 246, 230, .9); }
  .prose .stack-table td, .prose .stack-table td.num {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    white-space: normal;
  }
  .stack-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font: 700 .8125rem/1.2 var(--font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .prose .stack-table td:first-child { grid-column: 1 / -1; display: block; font-weight: 800; }
  .stack-table td:first-child::before { display: inline-block; margin-right: 10px; }
  .stack-table td.wide { grid-column: 1 / -1; }
  .stack-table td:empty::before, .stack-table td[data-label=""]::before { content: none; }
  /* an icon + name first cell: its label sits on the name's centre line */
  .prose .stack-table:is(.items-table, .league-table) td:first-child { display: flex; align-items: center; }
  .stack-table:is(.items-table, .league-table) td:first-child::before { margin-bottom: 0; }
}

/* crystal prices: on phones only League and the 1x price (10x, 100x and 1000x
   are 10, 100 and 1,000 times it, as the sentence above the table says) */
@media (max-width: 559.98px) {
  .price-table :is(th, td):nth-child(n+3) { display: none; }
}
@media (max-width: 379.98px) {
  .price-table .pill { padding-inline: .6em; letter-spacing: .02em; }
}

/* item names with their icon (fights + town tables) */
.item-name { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1.2 var(--font-display); letter-spacing: .02em; }
.item-name img { flex: none; width: 38px; height: 38px; }
@media (min-width: 560px) { .items-table td:first-child { min-width: 11rem; } }
.prose :is(.items-table, .league-table) td { vertical-align: middle; }
/* phones: each item becomes a card row (name + Auto/Tap, then the effect) */
@media (max-width: 559.98px) {
  .item-name img { width: 32px; height: 32px; }
  .items-fx, .items-fx tbody { display: block; }
  .items-fx thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .items-fx caption { display: block; }
  .items-fx tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--panel-border); }
  .items-fx tbody tr:last-child { border-bottom: 0; }
  .items-fx tbody tr:nth-child(even) { background: rgba(255, 246, 230, .9); }
  .prose .items-fx td { border-bottom: 0; background: none; }
  .items-fx td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
}


/* ---------------------------------------------------------------------------
   6. Titans: roster, starters, the element wheel
   --------------------------------------------------------------------------- */
.roster, .starters { display: grid; gap: 14px 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); }
@media (min-width: 600px) { .roster { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 14px 12px; } }
.starters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr)); max-width: 680px; }
.roster .titan-card, .starters .titan-card { box-shadow: 0 4px 0 var(--panel-shadow); }
.roster .titan-ult, .starters .titan-ult { line-height: 1.35; }
.titan-ult .ult-move { display: block; margin-top: 2px; color: var(--ink); font: 700 .875rem/1.2 var(--font-display); letter-spacing: .03em; white-space: nowrap; }
.roster .titan-card:is(:hover, :focus-within, .is-hype) .titan-art > .idle { opacity: 1; }
.roster .titan-name, .starters .titan-name { font-size: clamp(.8125rem, .55rem + 1.3vw, .9375rem); letter-spacing: .01em; overflow-wrap: normal; }
.table-wrap.tw-narrow { max-width: 480px; }
.roster .titan-meta .chip, .roster .titan-meta .pill, .starters .titan-meta .chip, .starters .titan-meta .pill { font-size: .8125rem; }
.wheel { display: grid; place-items: center; }
.wheel-svg { width: 100%; max-width: 440px; height: auto; }
.wheel-svg .svg-big { font: 700 28px var(--font-display); fill: #2B2F4A; }
.wheel-svg .svg-small { font: 700 12px var(--font-display); fill: #2B2F4A; letter-spacing: .04em; text-transform: uppercase; }
.wheel-svg .svg-verb { font: 700 16px var(--font-display); fill: #1F4FB0; }
.wheel-svg .svg-name { font: 700 16px var(--font-display); fill: #2B2F4A; letter-spacing: .05em; }
@media (max-width: 559.98px) {
  .wheel-svg .svg-small { font-size: 14px; }
  .wheel-svg .svg-verb { font-size: 19px; }
  .wheel-svg .svg-name { font-size: 20px; letter-spacing: .02em; }
}


/* ---------------------------------------------------------------------------
   7. Card packs, town, Boss Rush, leagues, daily missions
   --------------------------------------------------------------------------- */
.pack-sizes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.pack-size {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 12px;
  border: 3px solid;
  border-radius: var(--radius-card);
  text-align: center;
}
.ps-name { font: 700 2.25rem/1 var(--font-display); }
.ps-range { font: 700 1rem/1.3 var(--font-display); }
.ps-avg { font-size: 1rem; }
.ps-1 { background: #E6F4FF; border-color: #7CC6FF; }
.ps-10 { background: #E3F9E5; border-color: var(--grass-dark); }
.ps-100 { background: #F3E8FF; border-color: var(--r-unique); }
.ps-1000 { background: #FFF4CF; border-color: var(--coin); box-shadow: inset 0 0 0 2px #fff; }
.odds-table th.num .pill { font-size: .8125rem; }

/* the town map: City Hall top centre, Bank / Factory, Armory / Lab */
.town-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: ". hall ." "bank . factory" "armory . lab";
  gap: 4px 6px;
  max-width: 560px;
  margin-inline: auto;
  padding: 16px 10px 14px;
  list-style: none;
  border: 3px solid #fff;
  border-radius: 22px;
  background:
    linear-gradient(90deg, transparent 43%, var(--sand) 43%, var(--sand) 57%, transparent 57%) center bottom / 100% 72% no-repeat,
    linear-gradient(180deg, var(--town-sky-top) 0%, #DDF3FF 28%, var(--grass) 28%, #7FD65F 100%);
  box-shadow: 0 4px 0 var(--panel-shadow);
}
.town-map li { display: flex; flex-direction: column; align-items: center; }
.town-map img { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 5px 3px rgba(40, 70, 30, .22)); }
.town-map span {
  position: relative;
  margin-top: -8px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: 0 2px 0 var(--panel-shadow), inset 0 0 0 2px var(--panel-border);
  font: 700 .875rem/1.2 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.spot-hall { grid-area: hall; }
.spot-bank { grid-area: bank; }
.spot-factory { grid-area: factory; }
.spot-armory { grid-area: armory; }
.spot-lab { grid-area: lab; }
@media (max-width: 379.98px) {
  .town-map span { padding: 2px 7px; font-size: .8125rem; }
}
.stage-row { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stage-row .building-name { font-size: 1rem; }
.stage-row .building-role { font-size: 1rem; line-height: 1.3; }
@media (max-width: 479.98px) {
  .stage-row { gap: 8px; }
  .stage-row .building-cap { padding: 10px 6px 12px; }
}

/* Boss Rush */
.bosses { display: grid; gap: 14px 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.bosses .titan-name { font-size: .875rem; letter-spacing: .01em; overflow-wrap: normal; }
.bosses .boss-card .titan-art { aspect-ratio: 1 / 1; }

/* leagues */
.ladder-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 16px 16px 14px;
  list-style: none;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #B9C2FF, #FFEBA8);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 14px 6px;
}
.prose .ladder-row > li + li { margin-top: 0; }
.ladder-row > li { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; }
@container prose (min-width: 640px) { .ladder-row > li { flex-basis: calc((100% - 30px) / 6); } }
@media (max-width: 359.98px) {
  .ladder-row { padding-inline: 10px; }
  .ladder-row .league-name { font-size: .75rem; letter-spacing: .02em; }
}
.ladder-row .league img { width: 48px; }
.ladder-row .league-name { font-size: .8125rem; }
@media (max-width: 559.98px) {
  .stack-table td:first-child::before { vertical-align: middle; }
  .stack-table .league-cell { vertical-align: middle; }
}
.league-cell { display: inline-flex; align-items: center; gap: 10px; font: 700 1rem/1.2 var(--font-display); }
.league-cell img { flex: none; width: 30px; height: auto; }
.league-table td:first-child { min-width: 9.5rem; }
.legend-and { font: 700 .9375rem/1.2 var(--font-display); white-space: nowrap; }
@media (max-width: 559.98px) { .stack-table .legend-and { white-space: normal; } }
.star-sources { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.star-source {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 14px 14px 16px;
  border: 2px solid var(--highlight-border);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, #FFF8DD, var(--highlight));
  text-align: center;
}
.star-source img { width: auto; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 3px rgba(43, 47, 74, .18)); }
.star-source strong { font: 700 1.125rem/1.2 var(--font-display); }
.star-source span { font-size: 1rem; line-height: 1.45; }

/* daily missions */
.reward { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.all-five {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 18px;
  border: 2px solid var(--primary-bottom);
  border-radius: var(--radius-card);
  background: #E3F9E5;
}
.all-five p { margin: 0; flex: 1 1 16rem; }
.all-five-badge {
  flex: none;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--primary-top), #34CB5B);
  box-shadow: 0 3px 0 var(--primary-lip);
  color: var(--ink);
  font: 700 1.125rem/1.1 var(--font-display);
  letter-spacing: .05em;
}
.mission-list { display: grid; gap: 8px; list-style: none; }
.mission-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: 2px solid var(--well-border);
  border-radius: 14px;
  background: var(--well);
  font-weight: 700;
}
.mission-list img { flex: none; width: 34px; height: 34px; object-fit: contain; }


/* ---------------------------------------------------------------------------
   8. The hub — hero trio, guide cards, numbers, store button
   --------------------------------------------------------------------------- */
.hub-hero-art { display: flex; align-items: flex-end; justify-content: center; height: clamp(140px, 50vw, 190px); }
.hub-titan { width: auto; filter: drop-shadow(0 10px 8px rgba(40, 70, 30, .2)); }
.hub-titan-c { position: relative; z-index: 1; height: 100%; }
.hub-titan-l, .hub-titan-r { height: 64%; }
.hub-titan-l { margin-right: -12px; }
.hub-titan-r { margin-left: -12px; }
@media (min-width: 900px) { .hub-hero-art { height: 300px; } }

.hub-body { padding-top: 28px; }
.guide-cards { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
@media (min-width: 620px) { .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .guide-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.guide-cards > li { display: flex; }
.guide-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  width: 100%;
  overflow: hidden;
  border: 2px solid var(--panel-border);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--panel-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--panel-shadow); }
.guide-card:active { transform: scale(.98); }
.guide-card:focus-visible { outline-offset: 4px; border-radius: 18px; }
.guide-card-art {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 8px 8px;
  border-right: 2px solid var(--panel-border);
}
.guide-card-art.town { background: linear-gradient(180deg, var(--town-sky-top) 0%, var(--town-sky-bottom) 64%, var(--grass) 64%, #7FD65F 100%); }
.guide-card-art img { width: 100%; height: 104px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 4px rgba(40, 70, 30, .2)); }
.guide-card-art.art-boss img { height: 96px; }
@media (max-width: 359.98px) {
  .guide-card { grid-template-columns: 96px minmax(0, 1fr); }
  .guide-card-art img { height: 88px; }
  .guide-card-body { padding: 12px 12px 14px; }
}
.guide-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 16px; }
.guide-card-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(var(--secondary-bottom), var(--secondary-lip));
  box-shadow: 0 2px 0 #173D8A;
  color: #fff;
  font: 700 .9375rem/1 var(--font-display);
}
.guide-card-title { font: 700 1.25rem/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.guide-card-blurb { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.guide-card-go { margin-top: auto; padding-top: 6px; color: var(--link); font: 700 .9375rem/1.2 var(--font-display); letter-spacing: .05em; text-transform: uppercase; }
@media (min-width: 1100px) {
  .guide-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .guide-card-art { height: 172px; padding-top: 16px; border-right: 0; border-bottom: 2px solid var(--panel-border); }
  .guide-card-art img { height: 146px; }
  .guide-card-art.art-boss img { height: 136px; }
  .guide-card-body { padding: 16px 18px 18px; }
}

.hub-new { margin-top: 30px; text-align: center; font-weight: 700; }
.hub-new-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--highlight);
  box-shadow: inset 0 0 0 2px var(--highlight-border);
  font: 700 .875rem/1.3 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hub-stats .stat img { width: 44px; height: 44px; object-fit: contain; }
.hub-cta { display: grid; justify-items: center; gap: 16px; margin-top: 44px; text-align: center; }
.hub-cta-line { font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.2 var(--font-display); text-transform: uppercase; }