/* ==========================================================
   wosunraveled site stylesheet, mobile-first. No build step: edit this file directly.
   Theme "Arctic cartography" (from ~/Desktop/wos/site-preview/styles.css): ice paper, deep indigo ink, lime + indigo accents.
   Only the parts the site uses are here; copy more from the prototype when a page needs them.
   ========================================================== */
:root {
  /* color */
  --bg: #f3f6fc;
  --bg-elev: #fbfcff;
  --bg-card: #ffffff;
  --grid: rgba(27, 26, 74, .06);
  --line: #c5cce6;          /* subtle dividers */
  --line-strong: #1b1a4a;   /* header rule, outlines: full ink */
  --ink: #1b1a4a;           /* headings, offset shadows */
  --text: #1b1a4a;
  --text-dim: #4a4b7c;
  --brand: #4b3fd6;         /* links, numbers, active states */
  --brand-strong: #3a2fb8;
  --brand-ink: #ffffff;     /* text on --brand */
  --lime: #c8f439;          /* primary call-to-action */
  --lime-ink: #1b1a4a;
  --accent: #4b3fd6;        /* focus ring */
  --ok: #1f8a4c;
  --warn: #b7791f;
  --bad: #c53030;
  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem;
  --fs-xl: 1.5rem; --fs-2xl: 1.875rem; --fs-3xl: 2.375rem;
  /* space / shape */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --radius: 6px; --radius-sm: 4px;
  --shadow: 0 8px 24px rgba(27, 26, 74, .14);
  --offset: 3px 3px 0 var(--ink);
  --gutter: 16px;
  --maxw: 1240px;
  --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: var(--fs-md)/1.6 var(--font);
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--s3); color: var(--ink); font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s4); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--lime); color: var(--lime-ink); padding: var(--s3) var(--s4); z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--text-dim); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Normal pages: the footer sits at the bottom of the window even when the page is short. */
body:not(.is-app) { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body:not(.is-app) > main { flex: 1 0 auto; }

/* ---------- Header + Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px); border-bottom: 2px solid var(--line-strong);
}
.site-header .container { height: 100%; display: flex; align-items: center; gap: var(--s4); }
.logo { display: flex; align-items: center; gap: var(--s2); font: 700 var(--fs-lg)/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-mark { flex: none; width: 32px; height: 32px; color: var(--ink); }
/* Next to the logo on full-screen pages, which have no footer to carry the disclaimer. */
.site-tag { min-width: 0; font-size: var(--fs-xs); line-height: 1.2; color: var(--text-dim); }
.site-nav { margin-left: auto; }
.site-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.site-nav > ul > li > a, .nav-menu-btn {
  display: flex; align-items: center; gap: var(--s1); min-height: 44px; padding: 0 var(--s3); border: 0; background: none;
  color: var(--text); font: 600 var(--fs-md)/1 var(--font); cursor: pointer;
}
.nav-menu-btn::after { content: "\25BE"; font-size: .8em; transition: transform .15s; }
.nav-menu-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
.site-nav > ul > li > a:hover, .nav-menu-btn:hover { text-decoration: none; box-shadow: inset 0 -3px 0 var(--line); }
.site-nav > ul > li > a[aria-current="page"], .nav-menu-btn[data-current] { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
/* the Tools menu: under the whole header on phones, a card under its button from 768px */
.nav-menu {
  position: absolute; top: var(--header-h); left: 0; right: 0; z-index: 60; padding: var(--s2) var(--gutter) var(--s3);
  background: var(--bg-elev); border-bottom: 2px solid var(--line-strong); box-shadow: var(--shadow);
}
.nav-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-menu a, .nav-soon { display: block; padding: var(--s3); border-radius: var(--radius-sm); color: var(--text); }
.nav-menu a:hover { text-decoration: none; background: var(--bg-card); box-shadow: inset 3px 0 0 var(--brand); }
.nav-menu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand); }
.nav-menu b { display: block; color: var(--ink); }
.nav-menu a b { color: var(--brand); }
.nav-menu span { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-dim); }
.nav-soon em { display: block; margin-top: var(--s1); font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }

/* ---------- Error pages ---------- */
.error-page { padding-top: var(--s7); }
.error-page .error-code { font-weight: 700; color: var(--brand); margin-bottom: var(--s2); }
.error-page .actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ---------- Cards / buttons ---------- */
.card { background: var(--bg-card); border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: var(--s4); }
.card h3 { margin-bottom: var(--s2); color: var(--brand); }
.card p { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }
a.card { display: block; color: var(--text); transition: transform .15s, border-color .15s; }
a.card:hover { text-decoration: none; border-color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--offset); }
.card-grid { display: grid; gap: var(--s3); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4);
  border-radius: var(--radius-sm); border: 2px solid var(--line-strong); background: var(--bg-card); color: var(--ink);
  font: 700 var(--fs-sm)/1 var(--font); cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn-primary { background: var(--lime); color: var(--lime-ink); border-color: var(--ink); box-shadow: var(--offset); }
.btn-primary:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--s2); }
/* Links inside running text are underlined: their colour alone is too close to the text colour to tell them apart. */
.prose a, .disclaimer a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Content pages (components/page/*): breadcrumbs, intro (+ screenshot), sections in one column, and on
   wide screens an ad sidebar beside them (.has-aside) ---------- */
.breadcrumbs { padding-top: var(--s4); font-size: var(--fs-sm); color: var(--text-dim); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.breadcrumbs li + li::before { content: "\203A"; margin-right: var(--s1); color: var(--text-dim); }
.breadcrumbs a { color: var(--text-dim); text-decoration: underline; text-underline-offset: 2px; }
.intro { display: grid; gap: var(--s5); padding: var(--s6) 0 var(--s5); }
.breadcrumbs + .intro { padding-top: var(--s4); }
.intro h1 { margin-bottom: var(--s3); }
.intro-text { min-width: 0; }
.intro-media { min-width: 0; }
.lead { font-size: var(--fs-lg); color: var(--text-dim); max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0 var(--s3); }
.note { font-size: var(--fs-sm); color: var(--text-dim); margin: 0; }
.btn-lg { min-height: 52px; padding: 0 var(--s5); font-size: var(--fs-md); }
.shot { margin: 0; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); overflow: hidden; background: #0d1a2b; }
.shot img { width: 100%; height: auto; }
.page-cols { display: grid; gap: var(--s6); }
.page-main { min-width: 0; }
.page-section { margin-top: var(--s7); }
.page-section:first-child { margin-top: var(--s5); }
.page-section > h2 { margin-bottom: var(--s4); }
.page-section .card-grid .card p { font-size: var(--fs-md); }
.page-section > .note { margin-top: var(--s3); }
.card-soon { border-style: dashed; border-color: var(--line); }
.card-soon h3 { color: var(--text); }
.card .card-note { margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
/* the steps are a real sequence: numbered discs in the brand colour */
.steps { list-style: none; padding-left: 0; counter-reset: step; }
.steps li { position: relative; counter-increment: step; padding-left: 2.75rem; margin-bottom: var(--s4); }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font: 700 var(--fs-sm)/1 var(--font);
}
.faq h3 { margin-top: var(--s5); font-family: var(--font); font-size: var(--fs-md); }
.cta-band {
  margin-top: var(--s7); padding: var(--s5); border: 2px solid var(--ink); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--offset);
}
.cta-band h2 { margin-bottom: var(--s2); }
.cta-band p { color: var(--text-dim); }

/* comparison table: balanced columns (the row heads 26%, each side 37%); our column tinted, with a green tick, the
   other column faded with a dash. Phones: each row becomes a block (head, then each side with its name); from 600px
   a normal table. */
.table-wrap { border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; }
.compare { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.45; }
.compare .c-what { width: 26%; }
.compare .c-us, .compare .c-them { width: 37%; }
.compare th, .compare td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { padding-top: var(--s4); font-size: var(--fs-md); font-family: var(--font-display); color: var(--text-dim); background: var(--bg-elev); }
.compare thead th:nth-child(2), .compare tbody td:nth-child(2) { background: rgba(75, 63, 214, .07); }
.compare thead th:nth-child(2) { color: var(--brand); box-shadow: inset 0 -3px 0 var(--brand); }
.compare tbody th { color: var(--ink); font-weight: 700; }
.compare tbody td:nth-child(2) { color: var(--ink); font-weight: 600; }
.compare tbody td:nth-child(3) { color: var(--text-dim); }
.compare tbody td:nth-child(2)::before { content: "\2713"; margin-right: var(--s2); color: var(--ok); font-weight: 800; }
.compare tbody td:nth-child(3)::before { content: "\2013"; margin-right: var(--s2); color: var(--line); font-weight: 800; }
@media (max-width: 599px) {
  .compare, .compare tbody, .compare tr { display: block; width: 100%; }
  .compare thead, .compare colgroup { display: none; }
  .compare tr { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .compare tr:last-child { border-bottom: 0; }
  .compare th, .compare td { display: block; padding: 0; border: 0; text-align: left; background: none !important; }
  .compare tbody th { margin-bottom: var(--s2); font-size: var(--fs-md); }
  .compare td { padding: var(--s2) var(--s3) !important; border-radius: var(--radius-sm); }
  .compare tbody td:nth-child(2) { background: rgba(75, 63, 214, .07) !important; }
  .compare td + td { margin-top: var(--s1); }
  .compare tbody td::after { content: attr(data-label); display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--text-dim); }
}

/* ---------- Ad spaces (<x-ui.ad>, only when ads are on) ----------
   Each space keeps its height while the ad loads, so the text never jumps. Set apart from the content by a label. */
.ad { margin: var(--s6) 0; text-align: center; }
.ad-label { display: block; margin-bottom: var(--s1); font-size: var(--fs-xs); color: var(--text-dim); }
.ad .adsbygoogle { display: block; }
.ad-inline .adsbygoogle { min-height: 280px; }
.ad-aside { margin: 0; }
.ad-aside .adsbygoogle { min-height: 600px; }
/* beside a full-screen tool: wide screens only (below that the tool needs the room and a stray tap is easy; AdSense
   does not request a unit that is display:none) */
.ad-rail { display: none; }
/* preview mode (ADS_PREVIEW, local only): a labelled box of the space's size */
.ad-box {
  display: grid; place-items: center; min-height: 280px; border: 2px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: var(--fs-sm); background: var(--bg-elev);
}
.ad-aside .ad-box, .ad-rail .ad-box { min-height: 600px; }

/* ---------- Footer ----------
   The site, Tools and Site columns (one column on phones, three from 768px), then the disclaimer in its own bar. */
.site-footer { margin-top: var(--s7); border-top: 2px solid var(--line-strong); background: var(--bg-elev); }
.footer-grid { display: grid; gap: var(--s5); padding-top: var(--s6); padding-bottom: var(--s5); }
.site-footer .logo { font-size: var(--fs-lg); }
.footer-brand p { margin: var(--s3) 0 0; max-width: 46ch; font-size: var(--fs-sm); color: var(--text-dim); }
.footer-brand p a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.footer-head { margin: 0 0 var(--s2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s1); }
.footer-col a { display: inline-block; padding: var(--s1) 0; color: var(--text); font-size: var(--fs-sm); }
.footer-legal { border-top: 1px solid var(--line); padding: var(--s4) 0 var(--s5); }
.disclaimer { margin: 0; font-size: var(--fs-xs); color: var(--text-dim); }
.byline { margin: 0 0 var(--s3); font-size: var(--fs-sm); color: var(--text-dim); }
.byline a { text-decoration: underline; text-underline-offset: 2px; }
.game-art-credit { margin-top: var(--s2); }

/* ---------- Full-screen app pages (the map) ----------
   The header stays; the stage fills the rest of the viewport. No footer, no page scroll. */
body.is-app { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; --header-h: 48px; }
body.is-app .site-header { flex: 0 0 auto; }
/* The header spans the full width, lined up with the tool below it, and is shorter than on normal pages. */
body.is-app .site-header .container { max-width: none; gap: var(--s3); }
body.is-app .logo { font-size: var(--fs-md); }
body.is-app .logo-mark { width: 26px; height: 26px; }
.app-stage { position: relative; flex: 1 1 auto; min-height: 0; background: #0d1a2b; }
/* the tool and, on wide screens, an ad rail beside it (never over the tool or next to its toolbars) */
.app-split { position: absolute; inset: 0; display: flex; }
.app-tool { position: relative; flex: 1 1 auto; min-width: 0; }
.app-tool > iframe, .app-stage > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.app-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s5);
  background: var(--bg);
}
/* ==========================================================
   Exploration (/exploration): a controlled grid. Every region and every place is in the page from the first paint
   (the Blade view) at the size set here; the scripts only fill text and pictures into them.
   - every track is a token below (rem); phones change token values only, never the structure;
   - every text sits in a fixed box: one line (.one-line) or N clamped lines (.lines with --lines);
   - what opens on demand (gear details, what to fix) lies over the screen;
   - steps 1, 3 and 4 sit in one phone-width column (--screen-w) on the card's centre line.
   Order: tokens, controls, step cards, steps 1-4, the hero screen, gear, hero cards, phones.
   ========================================================== */

/* ---- tokens ---- */
.flow-card {
  /* the game's screens */
  --game-navy: #13304d; --game-panel: #183553; --game-tile: #1c3a55; --game-soft: #cfe3f7; --game-gold: #ffd84a;
  --radius-lg: 12px; --radius-xl: 14px;
  /* rows */
  --gap: var(--s4);
  --row-head: 2.25rem;            /* a step's title */
  --row-ctl: 2.75rem;             /* inputs and buttons (44px) */
  --caption-h: 1.25rem;           /* a caption over an input */
  --row-field: calc(var(--caption-h) + 2px + var(--row-ctl));
  --row-act: 3.25rem;             /* the big button */
  --text-line: 1.3125rem;         /* one line of small text: .875rem × 1.5 */
  --note-lines: 2; --verdict-lines: 2; --caveat-lines: 2; --msg-lines: 4;
  /* columns */
  --screen-w: 30rem;              /* the game's screens: as wide as a phone */
  --stage-label-w: 3.5rem; --stage-input-w: 7.5rem; --stage-btn-w: 8rem; --power-w: 12rem;
  --gen-w: 16rem; --sort-w: 10rem;
  /* places */
  --token-h: 4.75rem;             /* a chosen hero, a hero tab */
  --face-sm: 2.5rem;
  --grid-h: 30rem;                /* the hero list */
  --unit-w: 5.5rem;               /* a position in a formation */
  --enemy-h: 6.5rem; --slot-h: 9.5rem; --slot-card-w: 4.25rem; --unit-name: 1.25rem;
  --form-pad: var(--s3);
  --vs-h: 3.75rem; --stage-top-h: 4rem; --key-h: 1.25rem;
  /* the hero screen: columns side | hero | side, rows top | hero | info, the tab bar under it */
  --side-w: 6rem; --top-h: 3.5rem; --hero-h: 19rem; --info-h: 14rem; --tabbar-h: 3.5rem; --screen-pad: var(--s3);
  --power-h: 2.25rem; --stars-h: 2.75rem; --set-h: 2.5rem;   /* Stats rows; the escorts bar takes the rest */
  --season-w: 2rem; --power-pill: 12rem; --star: 2.6rem;
  --sk: 4.75rem; --arc: 1.75rem; --arc-label: 1.5rem; --wsk: 3.25rem; --wpanel-h: 9.5rem;   /* skills: icon, the arc's bend */
  --gear-w: 5rem; --gear-name: 1.25rem; --w-tile: 4.25rem;
  /* the results */
  --row-res: 2rem; --pos-col: 5.5rem;
  /* derived, do not set */
  --form-enemy-h: calc(2 * var(--enemy-h) + var(--s2) + 2 * var(--form-pad) + 4px);
  --form-mine-h: calc(2 * var(--slot-h) + var(--s2) + 2 * var(--form-pad) + 4px);
  --stage-h: calc(var(--stage-top-h) + var(--form-enemy-h) + var(--key-h) + 2 * var(--text-line) + 3 * var(--s3));
  --screen-h: calc(var(--top-h) + var(--hero-h) + var(--info-h) + 2 * var(--s2) + 2 * var(--screen-pad));
  --verdict-h: calc(var(--verdict-lines) * var(--text-line) + 2 * var(--s3));
  --msg-h: calc(var(--msg-lines) * var(--text-line) + 2 * var(--s3));
  --results-h: calc(8 * var(--row-res) + var(--msg-h) + 2 * var(--s2));
}

/* ---- text boxes and controls ---- */
.one-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-card .note { line-height: 1.5; }
.flow-card .lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 2); line-clamp: var(--lines, 2); overflow: hidden; line-height: 1.5; }
.flow-card input, .flow-card select {
  height: var(--row-ctl); min-width: 0; padding: 0 var(--s2); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--ink); font: 600 var(--fs-md)/1 var(--font); font-variant-numeric: tabular-nums;
}
.flow-card select:disabled { opacity: .5; }
.max-btn { height: 2rem; padding: 0 var(--s2); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--lime); color: var(--lime-ink); font: 800 var(--fs-xs)/1 var(--font); white-space: nowrap; cursor: pointer; }
.max-btn:hover { box-shadow: 2px 2px 0 var(--ink); }
.max-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.pair { display: inline-grid; grid-auto-flow: column; align-items: center; gap: var(--s1); }
.calc-out { display: block; padding: var(--s3); border-radius: var(--radius-sm); background: rgba(75, 63, 214, .07); color: var(--ink); line-height: 1.5; }

/* ---- the step cards: a one-column grid of fixed rows ---- */
.flow-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-content: start; margin-top: var(--s5); padding: var(--s4);
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-card); }
.flow-card > * { min-width: 0; margin: 0; }
.flow-card > h2 { display: flex; align-items: center; gap: var(--s3); height: var(--row-head); font-size: var(--fs-xl); white-space: nowrap; overflow: hidden; }
.flow-num { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font: 700 var(--fs-md)/1 var(--font); }
.step-stage { grid-template-rows: var(--row-head) var(--row-ctl) var(--stage-h); }
.step-heroes { grid-template-rows: var(--row-head) var(--row-field) calc(var(--note-lines) * var(--text-line)) var(--token-h) var(--grid-h); }
.step-fill { grid-template-rows: var(--row-head) var(--token-h) calc(var(--screen-h) + var(--tabbar-h)); }
.step-run { grid-template-rows: var(--row-head) calc(var(--note-lines) * var(--text-line)) var(--vs-h) var(--form-mine-h) var(--verdict-h)
  calc(var(--caveat-lines) * var(--text-line)) var(--row-act) var(--results-h); }
:is(.step-stage, .step-fill, .step-run) > :not(h2) { justify-self: center; width: min(100%, var(--screen-w)); }

/* ---- step 1: the stage box; the panel: title and enemy power, the five enemy places, the key, one message ---- */
.stage-go { display: grid; grid-template-columns: var(--stage-label-w) var(--stage-input-w) var(--stage-btn-w); align-items: center; gap: var(--s2); }
.stage-go label { font-weight: 700; color: var(--ink); }
.stage-go input { width: 100%; padding: 0 var(--s3); }
.stage-go input:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.stage-go .btn { width: 100%; padding: 0; }
.stage-panel { display: grid; grid-template-rows: var(--stage-top-h) var(--form-enemy-h) var(--key-h) calc(2 * var(--text-line)); gap: var(--s3); }
.stage-panel > * { min-width: 0; margin: 0; }
.stage-panel .note { --lines: 2; grid-row: 4; }   /* the Quick Exploration line, or the message, in one place */
.stage-msg { color: var(--bad); font-weight: 700; }
.stage-head { display: grid; grid-template-columns: minmax(0, 1fr) var(--power-w); align-items: center; gap: var(--s3); }
.stage-head h3 { margin: 0; font-size: var(--fs-xl); }
.facts { display: grid; margin: 0; }
.facts > div { display: grid; grid-template-rows: 1rem 1.5rem; align-content: center; gap: 2px; height: var(--stage-top-h); padding: 0 var(--s3);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--lime); box-shadow: var(--offset); }
.facts dt { font-size: var(--fs-xs); line-height: 1rem; font-weight: 700; color: var(--lime-ink); }
.facts dd { margin: 0; font: 700 var(--fs-lg)/1.5rem var(--font); color: var(--ink); font-variant-numeric: tabular-nums; }
.troop-key { display: flex; justify-content: center; align-items: center; gap: var(--s4); padding: 0; list-style: none; font-size: var(--fs-xs); line-height: var(--key-h); color: var(--text-dim); }
.troop-key li { display: flex; align-items: center; gap: var(--s1); }
/* the formations: two rows of fixed places; the enemy's back row (5 4 3) above the front row (2 1), yours mirrored */
.formation { display: grid; grid-template-rows: repeat(2, var(--u-h)); align-content: center; gap: var(--s2); padding: 0 var(--form-pad);
  border: 2px solid var(--line-strong); border-radius: var(--radius); background: #e9edf8; }
.formation.enemy { --u-h: var(--enemy-h); }
.formation.mine { --u-h: var(--slot-h); background: #eef6d6; }
.formation-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--unit-w); justify-content: center; gap: var(--s2); }
.unit { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--unit-name); justify-items: center; align-items: center; gap: 2px; min-width: 0;
  height: var(--u-h); padding: var(--s1); border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-card); text-align: center; }
.unit b { width: 100%; color: var(--ink); font-size: var(--fs-sm); line-height: var(--unit-name); }
.unit .face { width: 4rem; height: 4rem; border-radius: var(--radius); background-color: #0d1a2b; }
.unit.is-empty { border-style: dashed; border-color: var(--line); background: rgba(255, 255, 255, .55); }
.unit.is-empty .face { background: var(--bg); }
.unit-pos { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font: 700 var(--fs-xl)/1 var(--font); font-style: normal; }
.unit:not(.is-empty) .unit-pos, .unit.is-empty .troop { display: none; }
.unit:not(.has-face):not(.is-empty) .face { display: none; }   /* a faceless monster: its troop icon alone */
/* troop icons: a disc in the troop's colour */
.unit .troop, .troop-key i { display: inline-block; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--ink) center / 1.15rem no-repeat; }
.unit.has-face .troop { position: absolute; top: calc(var(--s1) - 2px); left: calc(50% + 1.1rem); width: 1.35rem; height: 1.35rem; background-size: .8rem; box-shadow: 0 0 0 2px var(--bg-card); }
.troop-key i { width: 1.1rem; height: 1.1rem; background-size: .7rem; }
.unit.t-infantry .troop, .troop-key .t-infantry { background-color: #2f6fd6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3C/svg%3E"); }
.unit.t-lancer .troop, .troop-key .t-lancer { background-color: #c0392b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 19L19 5M15 5h4v4M7 13l4 4'/%3E%3C/svg%3E"); }
.unit.t-marksman .troop, .troop-key .t-marksman { background-color: #2b8a4b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 4c6 2 9 7 7 16M7 4l0 16M4 12h14M15 9l3 3-3 3'/%3E%3C/svg%3E"); }

/* ---- step 2: generation, sort and search; the chosen heroes; the hero list ---- */
.pick-bar { display: grid; grid-template-columns: var(--gen-w) var(--sort-w) minmax(0, 1fr); gap: var(--s3); }
.field { display: grid; grid-template-rows: var(--caption-h) var(--row-ctl); gap: 2px; min-width: 0; font-size: var(--fs-sm); line-height: var(--caption-h); font-weight: 700; color: var(--ink); }
.field select, .field input { width: 100%; }
.pick-note { --lines: var(--note-lines); }
/* the chosen heroes and the hero tabs (step 3): five places of one size, a face over a name; a free place is dashed */
.chosen, .hero-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); width: min(100%, var(--screen-w)); }
.chip, .tab { position: relative; display: grid; grid-template-rows: var(--face-sm) 1rem; justify-items: center; align-content: center; gap: var(--s1); min-width: 0;
  height: var(--token-h); padding: var(--s1); border: 1.5px solid var(--ink); border-radius: var(--radius-lg); background: var(--bg-card); color: var(--ink); font: 700 var(--fs-xs)/1rem var(--font); }
.chip b, .tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.empty, .tab.empty { border: 1.5px dashed var(--line); background: none; }
.chip-face { display: grid; place-items: center; width: var(--face-sm); height: var(--face-sm); border: 1.5px dashed var(--line); border-radius: 50%; color: var(--text-dim); font: 700 var(--fs-md)/1 var(--font); }
.chip-x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%;
  background: var(--bg-card); color: var(--ink); font: 700 var(--fs-md)/1 var(--font); cursor: pointer; }
.chip-x::after { content: ""; position: absolute; inset: -9px; }   /* a 44px tap area */
.tab { border-color: var(--line); cursor: pointer; }
.tab.on { border-color: var(--ink); background: var(--lime); box-shadow: inset 0 0 0 1px var(--ink); }
.tab.bad::after { content: ""; position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); }   /* something to fix */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); align-content: start; gap: var(--s3) var(--s2);
  overflow-y: auto; overscroll-behavior: contain; padding: var(--s1); }
.pick-none { grid-column: 1 / -1; }
.pick { position: relative; display: grid; grid-template-rows: auto 1rem; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.pick b { min-width: 0; font-size: var(--fs-xs); line-height: 1rem; color: var(--ink); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.on::after { content: "\2713"; position: absolute; top: 38%; right: var(--s1); display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
.pick:disabled { opacity: .4; cursor: not-allowed; }
.pick .hcard { transition: transform .1s; }
.pick:not(:disabled):hover .hcard { transform: translateY(-2px); }
.pick.on .hcard { box-shadow: 0 0 0 3px var(--brand); }

/* ---- step 3: the hero screen, one template for Stats, Skills and Gear ---- */
.hero-card { position: relative; display: grid; grid-template-rows: var(--screen-h) var(--tabbar-h); }
.hc-screen {
  position: relative; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); grid-template-rows: var(--top-h) var(--hero-h) var(--info-h);
  grid-template-areas: "top top top" "left hero right" "info info info"; gap: var(--s2); padding: var(--screen-pad); overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: #fff; background: radial-gradient(ellipse at 50% 35%, #8cc8f0 0%, #4f8fc9 55%, #2b5a8a 100%);
}
.hc-screen > * { min-width: 0; min-height: 0; }
.hc-screen.is-empty .hc-top > * { visibility: hidden; }
/* top bar: quality letters | name (its generation badge beside it) over the troop badge | Max all */
.hc-top { grid-area: top; display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--side-w); column-gap: var(--s2); align-items: start; }
.hc-grade { height: 2rem; overflow: hidden; color: var(--game-gold); font: italic 900 2rem/1 var(--font); text-shadow: 0 2px 0 #b0700a, 0 3px 6px rgba(0, 0, 0, .3); }
.hc-title { display: grid; grid-template-rows: 1.75rem 1.5rem; justify-items: center; gap: 2px; min-width: 0; }
.hc-name { display: grid; grid-template-columns: var(--season-w) minmax(0, 1fr) var(--season-w); align-items: center; width: 100%; height: 1.75rem; margin: 0;
  color: #fff; font: 800 var(--fs-xl)/1.75rem var(--font); text-shadow: 0 2px 2px rgba(0, 0, 0, .45); text-align: center; }
.hc-name-text { grid-column: 2; }
.hc-season { grid-column: 3; display: flex; align-items: center; width: 100%; height: 100%; padding-left: var(--s1); overflow: hidden; }   /* kept, empty, without a badge */
.hc-season .season { font-size: 1rem; }
.hc-badge-cell { display: grid; place-items: center; width: 1.8rem; height: 1.5rem; }
.hc-badge { width: 1.5rem; height: auto; }
.max-all { justify-self: end; width: 100%; max-width: 5rem; }
/* the hero: one box for every hero and every tab; the picture fits inside it */
.hc-portrait { grid-area: hero; position: relative; margin: 0; }
.hc-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .3)); }
.hc-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--s2); color: #e6f0fb; font-weight: 700; text-align: center; }
.hc-side { display: grid; }
.hc-side.left { grid-area: left; }
.hc-side.right { grid-area: right; }
.hc-info { grid-area: info; display: grid; }
/* Stats: the power, the stars, how to set them, the escorts bar */
.tab-stats .hc-info { grid-template-rows: var(--power-h) var(--stars-h) var(--set-h) minmax(0, 1fr); justify-items: center; align-items: center; gap: var(--s2); }
.hc-power { width: var(--power-pill); max-width: 100%; height: 2rem; margin: 0; padding: 0 18px; overflow: hidden; white-space: nowrap; text-align: center; border-radius: 999px;
  background: radial-gradient(ellipse, rgba(200, 40, 40, .9), rgba(150, 20, 20, .5) 70%, transparent);
  color: #fff; font: 800 var(--fs-lg)/2rem var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); font-variant-numeric: tabular-nums; }
.hc-power::before { content: "Power "; font-weight: 600; font-size: var(--fs-sm); }
.hc-stars-show .stars { display: grid; grid-template-columns: repeat(5, var(--star)); gap: 6px; }
.hc-stars-show .stars img, .star-void { width: var(--star); height: var(--star); object-fit: contain; }
.hc-stars-show .stars img.off { filter: brightness(.3) saturate(.3); opacity: .7; }
.hc-stars-set { display: grid; grid-template-columns: 6.5rem 7rem 3rem; gap: var(--s1); }
.hc-stars-set select { height: var(--set-h); }
.hc-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-self: stretch; width: 100%; overflow: hidden; border-radius: var(--radius-xl); background: var(--game-panel); }
.hc-cell { display: grid; grid-template-rows: 1.25rem minmax(0, 1fr); justify-items: center; align-items: center; min-width: 0; padding: var(--s2) var(--s1); }
.hc-cell + .hc-cell { border-left: 1px solid rgba(255, 255, 255, .15); }
.hc-cell-mid { background: rgba(0, 0, 0, .18); }
.hc-cell-h { max-width: 100%; color: var(--game-soft); font-size: var(--fs-sm); line-height: 1.25rem; font-weight: 700; }
.hc-cell b { max-width: 100%; color: #fff; font: 800 var(--fs-2xl)/1.2 var(--font); }
.hc-cell b.small { font-size: var(--fs-md); }
.hc-level { display: grid; grid-template-columns: 4rem 2.75rem; align-items: center; gap: var(--s1); }
.hc-level input { width: 100%; height: 2.5rem; padding: 0 2px; text-align: center; }
.hc-level .max-btn { padding: 0; }
/* Skills, as the game's skills screen: three places on each arc (Exploration left, Expedition right), the top and
   bottom ones bent in towards the hero by --arc and over his edge, the label over the top icon; tap an icon to raise
   it. Under the hero, the widget: its tile and level, its two skills. */
.hc-arc { display: grid; grid-template-rows: var(--arc-label) minmax(0, 1fr); }
.hc-skills { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; }
.sk-slot, .hc-arc-h { width: var(--sk); }
.sk-slot { display: grid; height: var(--sk); }
.hc-side.left :is(.sk-slot, .hc-arc-h) { justify-self: start; }
.hc-side.right :is(.sk-slot, .hc-arc-h) { justify-self: end; }
.hc-side.left :is(.sk-slot:not(:nth-child(2)), .hc-arc-h) { transform: translateX(var(--arc)); }
.hc-side.right :is(.sk-slot:not(:nth-child(2)), .hc-arc-h) { transform: translateX(calc(-1 * var(--arc))); }
.hc-arc-h { display: flex; justify-content: center; white-space: nowrap; color: #fff; font: 800 var(--fs-sm)/var(--arc-label) var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sk-icon { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sk-icon[aria-disabled="true"], span.sk-icon { cursor: default; }
.sk-icon img, .skill-none { width: 100%; height: 100%; border: 3px solid #fff; border-radius: var(--radius-lg); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.sk-icon.locked img, .sk-icon.locked .skill-none { filter: grayscale(1); opacity: .55; }
.skill-none { display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 var(--fs-lg)/1 var(--font); }
/* "Lv. N" on the icon's bottom edge, as the game writes it */
.sk-lv { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 1px 7px; border: 1.5px solid #fff; border-radius: 999px; background: #3f6f99; color: #fff; font: 700 11px/1.3 var(--font); white-space: nowrap; }
.sk-icon.locked .sk-lv { background: #5b6675; }
.hc-wpanel { display: grid; grid-template-columns: var(--w-tile) minmax(0, 1fr); grid-template-rows: 1rem var(--row-ctl) var(--wsk);
  grid-template-areas: "tile head" "tile ctl" "tile skills"; column-gap: var(--s3); row-gap: var(--s2); align-self: center; width: 100%; height: var(--wpanel-h);
  padding: var(--s3); border-radius: var(--radius-lg); background: rgba(19, 48, 77, .85); color: #fff; }
.hc-wpanel-h { grid-area: head; color: var(--game-soft); font-size: var(--fs-xs); line-height: 1rem; }
.hc-wpanel .hc-widget { display: contents; }
.hc-wpanel .w-tile { grid-area: tile; align-self: center; }
.hc-wpanel .hc-widget > .pair { grid-area: ctl; width: 100%; }
.hc-wskills { grid-area: skills; display: grid; grid-template-columns: repeat(2, var(--wsk)); gap: var(--s3); }
.hc-wskills .sk-slot { width: var(--wsk); height: var(--wsk); }
.hc-wskills .sk-slot:empty { border: 2px dashed rgba(255, 255, 255, .3); border-radius: var(--radius-lg); }   /* no widget: the places stay */
/* the tab bar under the screen */
.hc-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--game-navy); }
.hc-tab { border: 0; border-radius: 10px 10px 4px 4px; background: #5b8fca; color: #fff; font: 800 var(--fs-md)/1 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); cursor: pointer; }
.hc-tab.on { background: #e6eef7; color: #3f6f99; text-shadow: none; }
.hc-tab:disabled { opacity: .55; cursor: default; }
/* what to fix: under the name, over the screen; it scrolls inside when long */
.hc-errors { margin: 0; padding-left: 1.1rem; color: var(--bad); font-size: var(--fs-sm); line-height: 1.5; }
.hc-errors:empty { display: none; }
.hero-card > .hc-errors { position: absolute; top: calc(var(--screen-pad) + var(--top-h) + var(--s2)); left: var(--s2); right: var(--s2); z-index: 3; max-height: 8rem; overflow-y: auto;
  padding: var(--s2) var(--s3) var(--s2) 1.75rem; border: 1.5px solid var(--bad); border-radius: var(--radius); background: var(--bg-card); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }

/* ---- gear: two pieces on each side of the hero, the widget below him, a piece's details over the screen ---- */
.tab-gear .hc-side { grid-template-rows: repeat(2, minmax(0, 1fr)); justify-items: center; align-items: center; }
/* a piece, as the game draws it: the quality frame picture is the tile (no fill under it, so no dark ring at its
   rounded edges), the piece, the troop icon, "+N" or the Legendary badge, the Mastery "Lv."; an empty place keeps its
   own frame and fill */
.gear { position: relative; width: var(--gear-w); height: var(--gear-w); margin-bottom: var(--gear-name); padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; }
.gear.empty { background: var(--game-tile); }
.gear[aria-pressed="true"] { outline: 3px solid var(--brand); outline-offset: 2px; }
.gear img, .w-tile img { position: absolute; }
.gear .g-frame, .w-tile .g-frame { inset: 0; width: 100%; height: 100%; }
.gear .g-piece { inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.gear.empty .g-piece { opacity: .6; }
.gear .g-item { inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.gear .g-type { top: -4px; left: -4px; width: 1.35rem; height: auto; }
/* the game's outlined numbers: white or gold with a dark rim (--rim) */
.g-plus, .g-mastery, .w-plus, .season { text-shadow: -1px -1px 0 var(--rim), 1px -1px 0 var(--rim), -1px 1px 0 var(--rim), 1px 1px 0 var(--rim); }
.g-plus, .g-badge, .g-mastery, .w-plus { position: absolute; color: #fff; font: 800 12px/1 var(--font); }
.g-plus { --rim: #2a1a10; top: 4px; right: 6px; font-size: 13px; }
.g-mastery { --rim: #5a3000; bottom: 3px; right: 5px; color: #ffe27a; }
.w-plus { --rim: #6b3a00; top: 3px; right: 5px; }
/* Legendary +N on its tier badge (IMAGES.md: green +20, blue +40, purple +60, orange +80, red +100) */
.g-badge { top: 2px; right: 2px; min-width: 2.1rem; padding: 3px 4px; border-radius: 6px; background: transparent center / 100% 100% no-repeat; text-shadow: 0 1px 1px rgba(0, 0, 0, .6); text-align: center; }
.g-name { position: absolute; left: -.5rem; right: -.5rem; bottom: calc(-1 * var(--gear-name)); color: #fff; font-size: 10px; line-height: var(--gear-name); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the widget: its tile and its level; a hero without one keeps the cell, an empty dashed tile */
.hc-widget { display: grid; grid-template-rows: var(--w-tile) var(--row-ctl); justify-items: center; align-content: center; gap: var(--s2); }
.hc-widget > .pair { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) auto; width: min(100%, 16rem); }   /* level and Max: one fixed box */
.hc-widget > .pair > .note { grid-column: 1 / -1; color: #fff; }
.hc-widget select { width: 100%; }
.w-tile { position: relative; display: block; width: var(--w-tile); height: var(--w-tile); }
.w-tile.off { filter: grayscale(1); opacity: .6; }   /* not activated */
.w-tile.none { border: 2px dashed rgba(255, 255, 255, .35); border-radius: 10px; }
.w-icon { inset: 10%; width: 80%; height: 80%; object-fit: contain; }
/* a piece's details, as the game's Gear Details */
.gear-edit { position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 2; display: grid; gap: var(--s2); max-height: calc(var(--hero-h) + var(--info-h));
  overflow-y: auto; padding: var(--s3); border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--bg-card); color: var(--text); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.gear-edit .note { color: var(--text-dim); }
.ge-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2); }
.ge-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg); color: var(--ink); font: 700 var(--fs-lg)/1 var(--font); cursor: pointer; }
.hc-row { display: grid; grid-template-columns: auto auto; grid-template-rows: var(--caption-h) var(--row-ctl); justify-content: start; align-items: center; column-gap: var(--s2); }   /* the label over its controls */
.hc-row > label { grid-column: 1 / -1; color: var(--ink); font-size: var(--fs-sm); line-height: var(--caption-h); font-weight: 700; }
.hc-row input { width: 5rem; }
.gems { display: flex; gap: var(--s1); }
.gem { width: 1.6rem; height: 1.6rem; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius-sm); background: var(--bg); cursor: pointer; transform: rotate(45deg); }
.gem.lit { background: #e0a100; }

/* ---- step 4: the vs bar, your five positions (tap two to swap), Squad Power, run, the results ---- */
.run-note { --lines: var(--note-lines); }
.caveat { --lines: var(--caveat-lines); }
.verdict { --lines: var(--verdict-lines); font-size: var(--fs-sm); }
.vs-bar { display: grid; grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr); align-items: center; gap: var(--s2); padding: 0 var(--s3); border-radius: var(--radius-lg); background: var(--game-navy); color: #fff; }
.vs-side { display: grid; grid-template-rows: 1rem 1.25rem; gap: 2px; min-width: 0; }
.vs-side.them { text-align: right; }
.vs-side small { color: var(--game-soft); font-size: var(--fs-xs); line-height: 1rem; }
.vs-side b { font: 800 var(--fs-lg)/1.25rem var(--font); font-variant-numeric: tabular-nums; }
.vs-stage { display: grid; place-items: center; height: var(--row-ctl); padding-bottom: 6px; overflow: hidden; background: #2f6fd6; color: #fff; font: 900 var(--fs-xl)/1 var(--font);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.slot { font: inherit; cursor: pointer; }
.slot:hover { border-color: var(--ink); }
.slot.picked { outline: 3px solid var(--brand); outline-offset: 2px; }
.slot.empty { border-style: dashed; background: var(--bg-elev); }
.slot .hcard { width: var(--slot-card-w); }
.hcard.slot-plus { display: grid; place-items: center; background: var(--bg); color: var(--text-dim); font: 700 var(--fs-xl)/1 var(--font); }
.step-run > .actions { display: flex; align-items: center; }
/* the results: a title, the five positions (your order, the best, the next best, wins), a message box */
.sim-out { display: grid; grid-template-rows: var(--row-res) calc(7 * var(--row-res)) var(--msg-h); gap: var(--s2); }
.sim-out > * { min-width: 0; margin: 0; }
.sim-out h3 { font-size: var(--fs-lg); line-height: var(--row-res); }
.order-table { width: 100%; height: calc(7 * var(--row-res)); table-layout: fixed; border-collapse: collapse; border: 2px solid var(--line-strong); background: var(--bg-card); font-size: var(--fs-sm); }
.order-table th, .order-table td { height: var(--row-res); padding: 0 var(--s2); overflow: hidden; border-bottom: 1px solid var(--line); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.order-table thead th:first-child { width: var(--pos-col); }
.order-table thead th, .order-table tfoot th, .order-table tfoot td { background: var(--bg-elev); color: var(--text-dim); font-size: var(--fs-xs); }
.order-table tbody th { color: var(--text-dim); font-weight: 600; }
.order-table tfoot td { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-msg { overflow-y: auto; padding: var(--s3); border-radius: var(--radius-sm); background: rgba(75, 63, 214, .07); color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; }
.sim-msg p { margin: 0 0 var(--s1); }

/* ---- hero cards: as the game's hero list, the half-body picture (4:7) on the quality colour, the troop badge,
   the generation badge, "Lv. N" and the stars; faces (chosen heroes, tabs, enemies) ---- */
.hcard { position: relative; display: block; width: 100%; aspect-ratio: 4 / 7; overflow: hidden; border-radius: var(--radius-lg); }
.hcard > img:first-child { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hcard-type { position: absolute; top: 5px; left: 5px; width: 1.5rem; height: auto; }
.hcard .season { position: absolute; top: 5px; right: 6px; }
.hcard-foot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 3px; padding: 22px 6px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .35)); }
.hcard-lv { color: #fff; font: 800 13px/1 var(--font); text-shadow: 0 1px 2px #000; }
.face { position: relative; display: block; overflow: hidden; }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.small { width: var(--face-sm); height: var(--face-sm); border-radius: 50%; }
.face-none { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font: 700 var(--fs-xl)/1 var(--font-display); }
/* the quality colour behind a hero, as the game's hero list paints it (Rare blue, Epic purple, Mythic orange) */
.qbg-1 { background-image: linear-gradient(#b9c2cf, #8d97a6); }
.qbg-2 { background-image: linear-gradient(#8fd36a, #4fa832); }
.qbg-3 { background-image: linear-gradient(#7fbcf0, #4c8fd8); }
.qbg-4 { background-image: linear-gradient(#bf8ef0, #8c5bd3); }
.qbg-5 { background-image: linear-gradient(#f8ab55, #e8822e); }
/* the game's six-piece stars: cyan in the hero screen, small on the cards */
.stars { display: inline-flex; align-items: center; gap: 2px; color: #3fe0f0; font-size: var(--fs-lg); }
.stars img { width: 1.9rem; height: auto; }
.stars img.off { filter: grayscale(1) brightness(.55); opacity: .5; }
.stars.small { display: flex; justify-content: space-between; width: 100%; gap: 0; min-height: 20px; }
.hcard .stars.small img { width: 18%; }
.hcard .stars.small img.off { filter: grayscale(1) sepia(1) brightness(.45); opacity: .8; }
/* the generation badge, as the game draws it: a gold italic "S" with the number */
.season { --rim: #4a2a00; display: inline-flex; align-items: baseline; color: var(--game-gold); font: italic 900 1.1rem/1 var(--font); }
.season small { font-size: .75em; }

/* hidden places stay hidden whatever their display (last, to win over the rules above) */
.flow-card [hidden] { display: none; }

/* ---- phones: the same template, smaller tracks ---- */
@media (max-width: 599px) {
  .flow-card {
    --gap: var(--s3); --verdict-lines: 3; --caveat-lines: 3;
    --gen-w: 7rem; --sort-w: 6.25rem; --grid-h: 25rem; --unit-w: 5.25rem;
    --side-w: 4.5rem; --top-h: 3rem; --info-h: 13.25rem;
    --power-h: 2rem; --stars-h: 2.25rem; --star: 2.1rem; --season-w: 1.5rem;
    --hero-h: 14rem; --sk: 4rem; --arc: 1rem; --arc-label: 1.25rem; --wsk: 3rem; --gear-w: 4rem;
    padding: var(--s3);
  }
  .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2) 6px; }
  .pick b { font-size: 10px; }
  .hc-grade { height: 1.5rem; font-size: 1.5rem; }
  .hc-name { font-size: var(--fs-lg); }
  .hc-arc-h { font-size: 11px; }
}

.app-placeholder h1 { margin-bottom: var(--s2); }
.app-placeholder p { color: var(--text-dim); max-width: 52ch; margin: 0 auto; }

/* ---------- ≥768px ---------- */
@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 64px; }
  h1 { font-size: var(--fs-3xl); }
  .has-menu { position: relative; }
  .nav-menu {
    top: calc(100% + 10px); left: auto; right: 0; width: 360px; padding: var(--s2);
    border: 2px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--offset);
  }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .intro { padding-top: var(--s7); }
  .footer-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- ≥1024px: the intro beside its screenshot, and room for an ad sidebar ---------- */
@media (min-width: 1024px) {
  .intro.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--s6); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .page-cols.has-aside { grid-template-columns: minmax(0, 1fr) 300px; }
  .page-cols.has-aside .card-grid, .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .page-aside .ad { position: sticky; top: calc(var(--header-h) + var(--s5)); }
}

/* ---------- ≥1280px: the ad rail beside a full-screen tool ---------- */
@media (min-width: 1280px) {
  .ad-rail {
    display: flex; flex-direction: column; align-items: center; flex: 0 0 332px; margin: 0; padding: var(--s4);
    background: var(--bg); border-left: 2px solid var(--line-strong); overflow-y: auto;
  }
  .ad-rail .adsbygoogle, .ad-rail .ad-box { width: 300px; }
  .ad-rail .adsbygoogle { min-height: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}