/* aeron.css: prototype layer (Aeron, 2026-10-15). Loaded after site.css.
   Self-hosted fonts, pure black, Norse display, square edges, real content components. */

@font-face { font-family: "Norse"; src: url("/assets/fonts/Norse-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Norse"; src: url("/assets/fonts/Norse-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #000; --bg-2: #0d0d0d; --bg-3: #161616;
  --surface-1: #0d0d0d; --surface-2: #161616;
  --line: #2a2a2a; --rule: #2a2a2a;
  --ink: #f2efe8; --ink-dim: #b9b5ab; --ink-faint: #8a877d;
  --fire: #f7c722; --fire-2: #ed8523; --fire-3: #f15922;
  --f-display: "Norse", Georgia, serif;
  --f-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html { font-synthesis: none; }
body { background: #000; color: var(--ink); }

/* Header: solid black, in flow (the original site), no scrim, bigger logo */
.site-header { position: sticky; top: 0; background: #000; border-bottom: 1px solid var(--line); }
.site-header::before { display: none; }
.site-header__brand img, .site-header img { height: 52px; width: auto; }
.site-header a { font-family: var(--f-display); font-weight: 400; letter-spacing: .06em; font-size: 1.15rem; text-transform: none; }

/* Audio toggle: out of the menu's way on phones */
@media (max-width: 480px) {
  .audio-toggle { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px; }
}

/* Headings in Norse everywhere */
h1, h2, h3, .legend-card__name { font-family: var(--f-display); font-weight: 700; letter-spacing: .02em; }

/* Square edges, no glow, no lift */
.btn, .card, .legend-card, .ks-banner__close { border-radius: 2px; }
.legend-card, .legend-card:hover, .legend-card:focus-visible { transform: none; box-shadow: none; }

/* ---------- Buttons ---------- */
.a-btn { display: inline-block; padding: .85rem 1.6rem; border: 2px solid var(--ink); border-radius: 2px;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .08em;
  color: var(--ink); background: transparent; cursor: pointer; text-decoration: none; line-height: 1.1; }
.a-btn:hover, .a-btn:focus-visible { background: var(--ink); color: #000; text-decoration: none; }
.a-btn--primary { background: var(--fire-2); border-color: var(--fire-2); color: #000; }
.a-btn--primary:hover, .a-btn--primary:focus-visible { background: var(--fire); border-color: var(--fire); color: #000; }
.a-btn:focus-visible { outline: 3px solid var(--fire); outline-offset: 3px; }

/* ---------- Intro under the banner ---------- */
.a-intro { background: #000; padding: 2rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.a-intro__in { text-align: center; }
.a-intro__line { font-family: var(--f-display); font-size: clamp(1.25rem, 2.6vw, 1.9rem); color: var(--fire); margin: 0 0 1.25rem; letter-spacing: .04em; }
.a-intro__cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.a-laurels { list-style: none; margin: 2rem auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; max-width: 1300px; }
.a-laurels img { height: 42px; width: auto; display: block; }
@media (max-width: 600px) {
  .a-laurels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
  .a-laurels img { height: auto; width: 100%; }
}

/* ---------- Sections ---------- */
.a-sec { padding: clamp(3rem, 7vw, 6rem) 0; background: #000; }
.a-sec--alt { background: var(--bg-2); }
.a-h { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; margin: 0 0 1rem; color: var(--ink); }
.a-lede { font-size: 1.15rem; color: var(--ink-dim); max-width: 60ch; margin: 0 0 2rem; }
.a-copy p { font-size: 1.1rem; line-height: 1.65; color: var(--ink-dim); max-width: 58ch; }
.a-link { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--fire); }
.a-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) {
  .a-split { grid-template-columns: 1.1fr 1fr; }
  .a-split--rev { grid-template-columns: 1fr 1.1fr; }
}
.a-photo { margin: 0; }
.a-photo img, .a-gallery img { display: block; width: 100%; height: auto; border-radius: 2px; }
.a-quote { margin: 1.5rem 0; padding: 0 0 0 1.25rem; border-left: 4px solid var(--fire-2); }
.a-quote p { color: var(--ink); font-size: 1.2rem; font-style: italic; }
.a-quote footer { color: var(--ink-faint); font-size: .95rem; }
.a-gallery { display: grid; gap: 1rem; }
@media (min-width: 900px) { .a-gallery { grid-template-columns: 1.2fr 1fr 1.2fr; align-items: center; } }

/* ---------- Phases ---------- */
.a-phases { list-style: none; counter-reset: ph; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 900px) { .a-phases { grid-template-columns: repeat(3, 1fr); } }
.a-phases li { counter-increment: ph; font-size: 1.05rem; line-height: 1.55; color: var(--ink-dim); padding-top: .75rem; border-top: 3px solid var(--fire-2); }
.a-phases strong { display: block; font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); margin-bottom: .25rem; }

/* ---------- Arena tiles ---------- */
.a-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.a-tiles li:first-child { grid-column: span 2; grid-row: span 2; }
.a-tiles img { display: block; width: 100%; height: auto; }

/* ---------- Legend cards: clean, square, readable ---------- */
.legend-card { aspect-ratio: auto; background: var(--bg-3); border: 1px solid var(--line); padding: 0 1.25rem 1.25rem; }
.legend-card:hover, .legend-card:focus-visible { border-color: var(--fire-2); }
.legend-card__portrait { width: calc(100% + 2.5rem); margin: 0 -1.25rem 1rem; }
.legend-card__class, .legend-card__name, .legend-card__epithet { display: block; }
.legend-card__epithet { color: var(--ink-faint); font-style: italic; margin-bottom: .5rem; }
.legend-card__class { font-family: var(--f-body); font-weight: 600; letter-spacing: .08em; color: var(--fire); }
.legend-card__name { font-size: 1.7rem; }

/* ---------- Closing band ---------- */
.a-cta-band { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.a-cta-band .a-lede { margin: 0; }

/* ---------- Cooldown demo ---------- */
.a-demo { border: 1px solid var(--line); background: #000; padding: clamp(1rem, 3vw, 2rem); }
.a-demo__title { font-size: 1.6rem; margin: 0 0 .5rem; }
.a-demo__help { color: var(--ink-dim); max-width: 70ch; margin: 0 0 1.25rem; }
.a-demo__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 1rem; }
.a-slot { position: relative; min-height: 132px; background: var(--bg-3); border: 1px solid var(--line); padding: 1.9rem .4rem .4rem; }
.a-slot__n { position: absolute; top: .3rem; left: .5rem; font-family: var(--f-display); font-size: 1.3rem; color: var(--fire-2); }
.a-slot__cards { display: flex; flex-direction: column; gap: 4px; }
.a-demo__label { font-family: var(--f-display); font-size: 1.25rem; margin: 0 0 .5rem; }
.a-demo__planned { font-family: var(--f-body); font-size: .9rem; color: var(--ink-faint); margin-left: .5rem; }
.a-demo__cards { display: flex; flex-wrap: wrap; gap: 6px; }
.a-card { font: 600 .9rem/1.2 var(--f-body); text-align: left; color: var(--ink); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 2px; padding: .5rem .6rem; cursor: pointer; min-width: 9.5rem; }
.a-card small { display: block; font-weight: 400; color: var(--ink-faint); }
.a-card[aria-pressed="true"] { border-color: var(--fire); background: #2a1c06; }
.a-card:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
.a-card--onTrack { cursor: default; min-width: 0; width: 100%; font-size: .8rem; }
.a-demo__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
.a-demo__status { margin: 0; color: var(--ink-dim); }
@media (max-width: 600px) {
  .a-slot { min-height: 110px; padding-top: 1.7rem; }
  .a-card--onTrack { font-size: .7rem; padding: .3rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .a-card { transition: border-color .2s ease, background-color .2s ease; }
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Header nav: 4 | logo | 4, "Play free" as the one button ---------- */
.site-header .nav-link.is-highlight { background: var(--fire-2); color: #000; padding: .35rem .8rem; border-radius: 2px; }
.site-header .nav-link.is-highlight:hover { background: var(--fire); color: #000; }
.site-drawer__nav .is-highlight { color: var(--fire); }

/* ---------- Inner pages ---------- */
.page-header { display: none; }
.a-page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 1.5rem; background: #000; }
.a-page-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1; margin: 0 0 .75rem; }
.a-page-head__sub { font-size: 1.2rem; color: var(--ink-dim); max-width: 60ch; margin: 0; }
.a-page-banner { margin: 0 0 2.5rem; }
.a-page-banner img { display: block; width: 100%; max-height: 520px; object-fit: cover; }
.a-body { padding-bottom: clamp(3rem, 7vw, 5rem); }
.a-body h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 2.75rem 0 .75rem; }
.a-body h3 { font-size: 1.35rem; }
.a-body p, .a-body li { font-size: 1.08rem; line-height: 1.7; color: var(--ink-dim); max-width: 70ch; }
.a-body .lede { font-size: 1.25rem; color: var(--ink); }
.a-body a:not(.a-btn) { color: var(--fire); }
.a-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.a-cards figure { margin: 0; }
.a-cards img { display: block; width: 100%; height: auto; }
.a-cards figcaption { color: var(--ink-faint); font-size: .95rem; margin-top: .4rem; }
.a-tiles--row { grid-template-columns: repeat(5, 1fr); margin: 1.5rem 0; }
.a-tiles--row li:first-child { grid-column: auto; grid-row: auto; }
@media (max-width: 600px) { .a-tiles--row { grid-template-columns: repeat(3, 1fr); } }
.a-intro__cta--left { justify-content: flex-start; margin: 1.5rem 0 2.5rem; }
.a-social { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.a-social a { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 2px; font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); }
.a-social a:hover { border-color: var(--fire-2); text-decoration: none; }
.a-fine { margin-top: 2rem; color: var(--ink-faint); font-size: .9rem; }
.a-body .a-demo { margin: 1.5rem 0 2.5rem; }

/* ---------- Footer: minimal, like the original ---------- */
.a-footer { background: #000; border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; }
.a-footer__in { text-align: center; display: grid; gap: .9rem; justify-items: center; }
.a-footer__logo img { height: 40px; width: auto; }
.a-footer__tag { margin: 0; color: var(--fire); font-family: var(--f-display); font-size: 1.15rem; }
.a-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.2rem; }
.a-footer__nav a, .a-footer__social a { color: var(--ink-dim); }
.a-footer__social, .a-footer__credit, .a-footer__legal { margin: 0; font-size: .92rem; color: var(--ink-faint); }
.a-footer__credit { color: var(--fire); }
@media (max-width: 480px) { .a-footer { padding-bottom: 5rem; } }

/* nav sizing + readable "Play free" (beats site.css specificity) */
.site-header .site-header__inner .nav-link { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .05em; text-transform: none; color: var(--ink); }
.site-header .site-header__inner .nav-link:hover, .site-header .site-header__inner .nav-link[aria-current] { color: var(--fire); }
.site-header .site-header__inner .nav-link.is-highlight, .site-header .site-header__inner .nav-link.is-highlight:hover { color: #000; background: var(--fire-2); padding: .4rem .85rem; }
.site-header .site-header__inner .nav-link.is-highlight:hover { background: var(--fire); }
.site-header .site-header__inner .nav-link { white-space: nowrap; }

/* ================= Round 3 (Jason's screenshot review) ================= */
:root {
  --ink-dim: #d8d3c8;                      /* warmer, brighter body text */
  --parchment: #efe3c4; --parchment-ink: #1c1610;
  --t-battle: #c8232b; --t-blitz: #2f8f3a; --t-prep: #2b5fb8; --t-enh: #7b3fa8;
  --class-firemage: #e06b26; --class-assassin: #5f5357; --class-berserker: #cc2328;
  --class-icemage: #13a4de; --class-reaper: #41316f; --class-marksman: #f3de0c;
}

/* 1. Header: logo is the anchor, nav hugs it */
.site-header { padding: 10px 24px; }
.site-header .site-header__inner { max-width: 1240px; gap: 2.25rem; }
.site-header .site-header__nav-left { justify-content: flex-end; gap: 1.75rem; }
.site-header .site-header__nav-right { justify-content: flex-start; gap: 1.75rem; align-items: center; }
.site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 64px; filter: none; }
.site-header.is-condensed { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 24px; }
.site-header.is-condensed .site-header__brand img { height: 52px; }
.site-header .site-header__inner .nav-link { text-shadow: none; text-transform: uppercase; letter-spacing: .08em; }

/* 2. Audio: small square icon button, bottom-right, every width */
.audio-toggle, .audio-toggle[aria-pressed] { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px;
  width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 2px;
  background: #000; border: 1px solid var(--line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.audio-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.audio-toggle__ico { font-size: 1.1rem; color: var(--fire); }

/* 3. Laurels: Jason's own art, one block */
.a-laurels-img { display: block; width: min(100%, 880px); height: auto; margin: 2rem auto 0; }

/* 4. Deck-control section */
.a-h--balance { text-wrap: balance; }
.a-split { align-items: start; }
.a-split .a-photo { margin-top: .5rem; }

/* 7. Card-style panels (the real cards are parchment) */
.a-parchment { background: var(--parchment); color: var(--parchment-ink); border-left: 0; padding: 1.25rem 1.5rem; position: relative; border-radius: 2px; }
.a-parchment::before { content: ""; position: absolute; top: 0; left: 0; border-style: solid; border-width: 22px 22px 0 0; border-color: var(--fire-3) transparent transparent transparent; }
.a-quote.a-parchment p { color: var(--parchment-ink); font-style: normal; font-weight: 600; }
.a-quote.a-parchment footer { color: #5a4a36; }
.a-phases li { position: relative; background: var(--bg-3); border-top: 0; padding: 1.25rem 1.25rem 1.25rem 3.25rem; }
.a-phases li::before { content: counter(ph); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem;
  background: var(--fire-2); color: #000; font-family: var(--f-display); font-weight: 700; font-size: 1.3rem;
  display: grid; place-items: center; clip-path: polygon(0 0, 100% 0, 0 100%); padding: 0 .9rem .9rem 0; }
.a-copy p, .a-body p, .a-body li, .a-lede { color: var(--ink-dim); }

/* 6. Hero cards: art + solid class bar, even heights */
.legend-grid { align-items: stretch; }
.legend-card { display: flex; flex-direction: column; padding: 0 0 1.25rem; background: var(--bg-3); }
.legend-card__art { position: relative; display: block; }
.legend-card .legend-card__portrait { width: 100%; margin: 0; aspect-ratio: 1 / 1; object-fit: cover; border-bottom: 0; background: #000; }
.legend-card__bar { position: absolute; left: 8px; right: 8px; bottom: 10px; display: block; text-align: center;
  font-family: var(--f-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase;
  padding: .3rem .25rem; color: #fff; background: #333; }
.legend-card--firemage .legend-card__bar { background: var(--class-firemage); color: #000; }
.legend-card--assassin .legend-card__bar { background: var(--class-assassin); color: #fff; }
.legend-card--berserker .legend-card__bar { background: var(--class-berserker); color: #fff; }
.legend-card--icemage .legend-card__bar { background: var(--class-icemage); color: #000; }
.legend-card--reaper .legend-card__bar { background: var(--class-reaper); color: #fff; }
.legend-card--marksman .legend-card__bar { background: var(--class-marksman); color: #000; }
.legend-card .legend-card__name { padding: 1rem 1.25rem 0; font-size: 1.8rem; color: var(--ink); }
.legend-card .legend-card__epithet { padding: 0 1.25rem; font-style: normal; color: var(--ink-faint); }
.legend-card .legend-card__sum { padding: 0 1.25rem; margin: .6rem 0 0; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.legend-card:hover .legend-card__name { color: var(--fire); }

/* 5. Demo: printed-track look + real-card faces */
.a-demo { background: #0b0a09; }
.a-demo__track { gap: 4px; background: #1f1c18; padding: 6px; }
.a-slot { background: #2b2722; border: 0; min-height: 170px; padding: 3.2rem .4rem .4rem; }
.a-slot__n { left: 0; right: 0; top: .35rem; text-align: center; font-size: 2rem; color: #f2efe8; line-height: 1; }
.a-slot::after { content: "COOLDOWN"; position: absolute; top: 2.35rem; left: 0; right: 0; text-align: center;
  font-family: var(--f-display); font-size: .62rem; letter-spacing: .3em; color: #8d8578; }
.a-demo__cards { gap: 10px; }
.a-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem;
  width: 116px; min-width: 0; height: 150px; padding: .55rem; text-align: left; cursor: pointer;
  background: var(--parchment); color: var(--parchment-ink); border: 2px solid #000; border-radius: 4px; }
.a-card__cd { position: absolute; top: 0; left: 0; width: 2.3rem; height: 2.3rem; padding: .1rem 0 0 .3rem;
  font-family: Georgia, serif; font-weight: 700; font-size: 1.15rem; color: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); background: #555; }
.a-card--battle .a-card__cd { background: var(--t-battle); }
.a-card--blitz .a-card__cd { background: var(--t-blitz); }
.a-card--prep .a-card__cd { background: var(--t-prep); }
.a-card--enhancement .a-card__cd { background: var(--t-enh); }
.a-card__name { font: 800 .95rem/1.05 var(--f-body); color: #000; }
.a-card__type { font: 600 .68rem/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #6b5a42; }
.a-card[aria-pressed="true"] { outline: 3px solid var(--fire); outline-offset: 2px; transform: translateY(-6px); background: #fff4d8; }
.a-card--onTrack { width: 100%; height: 64px; cursor: default; font-size: .8rem; padding: .35rem .4rem; }
.a-card--onTrack .a-card__cd { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
.a-card--onTrack .a-card__name { font-size: .78rem; }
.a-card--onTrack .a-card__type { display: none; }
@media (max-width: 600px) {
  .a-card { width: calc(33.333% - 7px); height: 120px; }
  .a-slot { min-height: 140px; padding-top: 2.8rem; }
  .a-slot::after { display: none; }
  .a-card--onTrack { height: 52px; }
  .a-card--onTrack .a-card__name { font-size: .62rem; }
}
.a-card { transition: transform .15s ease, background-color .15s ease; }
/* Jason 10-17: the demo animates for everyone, reduced motion included (beats the site-wide reduced-motion transition kill) */
@media (prefers-reduced-motion: reduce) { .a-card { transition-duration: .15s !important; } }
.legend-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .legend-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .legend-grid { grid-template-columns: 1fr; } }
.a-card__name { font-size: .86rem; hyphens: auto; overflow-wrap: anywhere; }
@media (max-width: 600px) { .site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 46px; } }
.a-copy--wide p { max-width: 68ch; }
.a-board { margin: 2rem 0 1.5rem; }
.a-board img { display: block; width: 100%; height: auto; }

/* Demo board: track 5..1, then the Skillbook on the right (like the printed layout) */
.a-demo__board { display: grid; gap: 10px; align-items: stretch; }
@media (min-width: 1000px) { .a-demo__board { grid-template-columns: minmax(0, 1fr) 268px; } }
.a-demo__board .a-demo__track { margin-bottom: 0; }
.a-demo__book { background: #1f1c18; padding: 10px; border: 2px dashed #4a4239; display: flex; flex-direction: column; }
.a-demo__book .a-demo__label { text-align: center; }
.a-demo__book .a-demo__planned { display: block; margin: .15rem 0 0; }
@media (min-width: 1000px) {
  .a-demo__book .a-demo__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .a-demo__book .a-card { width: auto; height: 96px; }
  .a-demo__book .a-card__name { font-size: .78rem; }
  .a-demo__book .a-card__type { font-size: .6rem; }
}
.a-card { will-change: auto; }
.a-card--flip { will-change: transform; }
html.is-loading main#main { opacity: .6; transition: opacity .2s ease; }
main#main:focus { outline: none; }

/* Round 6: Skillbook list below; a card-back deck beside slot 1 marks where the Skillbook sits */
.a-demo__board { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; margin-bottom: 1rem; }
@media (min-width: 1000px) { .a-demo__board { grid-template-columns: minmax(0, 1fr) 120px; } }
.a-demo__book { background: transparent; border: 0; padding: 0; display: block; }
.a-demo__book .a-demo__label { text-align: left; }
.a-demo__book .a-demo__planned { display: inline; margin-left: .5rem; }
.a-demo__book .a-demo__cards { display: flex; flex-wrap: wrap; gap: 10px; }
.a-demo__book .a-card { width: 116px; height: 150px; }
.a-demo__book .a-card__name { font-size: .86rem; }
.a-demo__book .a-card__type { font-size: .68rem; }
.a-deck { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; background: #1f1c18; padding: 6px; }
.a-deck__stack { position: relative; width: 84px; height: 116px; border-radius: 5px; border: 2px solid #000;
  background: radial-gradient(120% 90% at 50% 40%, #7a1d12 0%, #3a0b07 70%); display: grid; place-items: center;
  box-shadow: 3px 3px 0 #000, 5px 5px 0 #5a160e, 7px 7px 0 #000, 9px 9px 0 #4a120b, 11px 11px 0 #000; }
.a-deck__stack::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(247,199,34,.45); border-radius: 3px; }
.a-deck__stack img { width: 68px; height: auto; }
.a-deck__label { font-family: var(--f-display); font-size: .95rem; letter-spacing: .1em; color: #f2efe8; }
@media (max-width: 600px) {
  .a-demo__board { grid-template-columns: minmax(0, 1fr) 62px; gap: 6px; }
  .a-deck__stack { width: 48px; height: 68px; box-shadow: 2px 2px 0 #000, 4px 4px 0 #5a160e, 6px 6px 0 #000; }
  .a-deck__stack img { width: 40px; }
  .a-deck__label { font-size: .62rem; }
  .a-demo__book .a-card { width: calc(33.333% - 7px); height: 120px; }
}
.a-card__name { overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; letter-spacing: -.01em; }
@media (max-width: 600px) { .a-demo__book .a-card__name { font-size: .72rem; } .a-demo__book .a-card { padding: .45rem; } }

/* Round 7 */
/* Community: lede aligned with everything else; buttons and social chips never underlined */
.a-body .lede { margin-inline: 0; max-width: 60ch; }
.a-body a.a-btn, .a-body p a.a-btn, .a-social a, .a-body .a-social a { text-decoration: none; }
.a-body a.a-btn { color: var(--ink); }
.a-body a.a-btn.a-btn--primary { color: #000; }
.a-social a { color: var(--ink); }
.a-social a:hover { color: var(--fire); }
/* Tagline line: Norse Bold */
.a-intro__line { font-weight: 700; }
/* Header: same size at all times (no shrink on scroll) */
.site-header, .site-header.is-condensed { padding: 10px 24px; background: #000; }
.site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 64px; }
@media (max-width: 600px) { .site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 46px; } }
.page-body .a-social li a, .page-body p a.a-btn { text-decoration: none; }

/* Round 9: larger header nav (scales down a little toward the 1024 breakpoint so 4 | logo | 4 always fits) */
.site-header .site-header__inner .nav-link { font-size: clamp(1.1rem, 1.45vw, 1.35rem); }
.site-header .site-header__inner .nav-link.is-highlight { padding: .45rem .95rem; }
@media (max-width: 1240px) { .site-header .site-header__nav-left, .site-header .site-header__nav-right { gap: 1.1rem; } .site-header .site-header__inner { gap: 1.25rem; } }

/* Round 10: character profile pages */
.a-legend { background: #000; padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.a-legend__in { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .a-legend__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.a-legend__art { position: relative; margin: 0; background: #0d0d0d; }
.a-legend__art img { display: block; width: 100%; height: auto; }
.a-legend__art .legend-card__bar { font-size: 1.3rem; bottom: 14px; left: 14px; right: 14px; padding: .45rem .3rem; }
.a-legend__name { font-size: clamp(3rem, 7vw, 5rem); line-height: .95; margin: .25rem 0 .35rem; }
.a-legend__epithet { font-family: var(--f-display); font-size: 1.5rem; color: var(--fire); margin: 0 0 1.25rem; }
.a-legend__summary { font-size: 1.2rem; line-height: 1.6; color: var(--ink); max-width: 56ch; margin: 0 0 1.5rem; }
.a-legend__facts { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; margin: 0 0 1.75rem; padding: 0; }
.a-legend__facts div { display: flex; gap: .6rem; align-items: baseline; }
.a-legend__facts dt { font-size: .95rem; color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-family: var(--f-body); }
.a-legend__facts dd { margin: 0; font-size: 1.05rem; color: var(--ink); font-weight: 600; }
.a-legend__ult { margin: 0; max-width: 56ch; }
.a-legend__ult-name { font-size: 1.5rem; color: var(--parchment-ink); margin: 0 0 .4rem; }
.a-legend__ult p { color: var(--parchment-ink); margin: 0; font-size: 1.05rem; line-height: 1.55; }
.legend-hero { display: none; }
.legend-body h2 { margin-top: 2.5rem; }
.legend-body .chronicle p { color: var(--ink-dim); font-size: 1.08rem; line-height: 1.75; }
.legend-related { justify-content: flex-start; gap: .6rem; }
.legend-related a { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line); padding: .45rem .8rem; border-radius: 2px; text-decoration: none; }
.page-body .legend-related a { text-decoration: none; }
.legend-related a:hover { border-color: var(--fire-2); color: var(--fire); }
.legend-all-link { margin-top: 2rem; display: flex; gap: .75rem; flex-wrap: wrap; }

/* Round 11: chronicle runs in the right column; portrait stays in view on the left */
.a-legend { padding-bottom: clamp(3rem, 7vw, 5rem); }
.a-legend__text.page-body { padding: 0; margin: 0; max-width: none; }
.a-legend .legend-body .chronicle { max-width: 68ch; }
.a-legend .chronicle p { max-width: none; }
.a-legend__text h2 { margin-top: 2.75rem; }
@media (min-width: 900px) {
  .a-legend__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .a-legend__art { position: sticky; top: 128px; }
}

/* Round 12: profile portrait pinned exactly where it loads (no drift) */
:root { --header-h: 108px; --legend-gap: 32px; }
@media (min-width: 1025px) { .site-header { height: var(--header-h); box-sizing: border-box; display: flex; align-items: center; } .site-header .site-header__inner { width: 100%; } }
.a-legend { padding-top: var(--legend-gap); }
.a-legend__name { margin-top: 0; }
@media (min-width: 900px) and (max-width: 1024px) { :root { --header-h: 0px; } .a-legend__art { position: static; } }
@media (min-width: 1025px) { .a-legend__art { position: sticky; top: calc(var(--header-h) + var(--legend-gap)); } }
.a-legend__art { background: transparent; }
@media (min-width: 1025px) {
  .a-legend__art { width: fit-content; max-width: 100%; justify-self: start; }
  .a-legend__art img { width: auto; max-width: 100%; max-height: calc(100vh - var(--header-h) - var(--legend-gap) - 24px); }
}

/* Round 17: class title in class colour, bigger; Health + Challenge facts */
.a-legend__classname { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); letter-spacing: .04em; margin: .1rem 0 1.25rem; line-height: 1; }
.a-cls--firemage { color: #e06b26; }
.a-cls--icemage { color: #13a4de; }
.a-cls--marksman { color: #f3de0c; }
.a-cls--berserker { color: #e0453f; }   /* lighter class red: 5.09:1 on black */
.a-cls--assassin { color: #a8989d; }    /* lighter class grey: 7.64:1 */
.a-cls--reaper { color: #9a80dc; }      /* lighter class purple: 6.5:1 */
.a-legend__facts { gap: .6rem 2.25rem; }
.a-pips { display: inline-flex; gap: 5px; vertical-align: middle; }
.a-pip { width: 14px; height: 14px; border: 2px solid var(--fire-2); transform: rotate(45deg); display: inline-block; }
.a-pip.is-on { background: var(--fire-2); }
.a-legend .a-legend__text p.a-legend__classname { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; max-width: none; margin: .1rem 0 1.25rem; }
.a-legend .a-legend__text p.a-cls--firemage { color: #e06b26; }
.a-legend .a-legend__text p.a-cls--icemage { color: #13a4de; }
.a-legend .a-legend__text p.a-cls--marksman { color: #f3de0c; }
.a-legend .a-legend__text p.a-cls--berserker { color: #e0453f; }
.a-legend .a-legend__text p.a-cls--assassin { color: #a8989d; }
.a-legend .a-legend__text p.a-cls--reaper { color: #9a80dc; }

/* Round 20: desktop prev/next legend arrows, fixed at the screen edges */
.a-legend-nav { display: none; }
@media (min-width: 1025px) {
  .a-legend-nav { display: block; }
  .a-legend-nav__btn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 40;
    width: 56px; height: 84px; display: grid; place-items: center; color: var(--fire-2); text-decoration: none; }
  .a-legend-nav__btn--prev { left: 18px; }
  .a-legend-nav__btn--next { right: 18px; }
  .a-legend-nav__btn svg { width: 34px; height: 52px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
  .a-legend-nav__btn:hover svg, .a-legend-nav__btn:focus-visible svg { fill: var(--fire-2); }
  .a-legend-nav__btn:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) { .a-legend-nav__btn svg { transition: fill .2s ease; } }
@media (min-width: 1025px) and (max-width: 1439px) { .a-legend > .container { padding-inline: 92px; } }

/* Round 22: no stranded short lines in page subtitles and intro lines */
.a-page-head__sub { max-width: 100%; text-wrap: balance; }
.a-lede, .a-body .lede, .a-legend__summary { text-wrap: pretty; }

/* Round 23: sub-groups inside a people (Icengard under Skorn) */
.group-block .group-sub { font-size: 1rem; margin: .9rem 0 .1rem; color: var(--ink-dim, #b9b2a6); letter-spacing: .02em; }

/* Round 24: one card shape everywhere. Track cards, hand cards and the Skillbook pile all share the
   116:150 card ratio, and the face is sized in container units, so cards scale evenly as they move.
   The Skillbook sits in the track as a sixth box the same size as a cooldown box. */
.a-demo__board { display: block; }
.a-demo__track { grid-template-columns: repeat(5, minmax(0, 1fr)) 10px minmax(0, 1fr); gap: 4px; }
.a-deck { grid-column: 7; justify-content: flex-start; gap: 0; background: #2b2722; padding: .35rem .4rem .4rem; container-type: inline-size; }
.a-deck__label { font-size: 1.15rem; line-height: 1.75; margin-bottom: calc(3.2rem - .35rem - 2rem); }
.a-deck__stack { width: min(100cqw - 12px, 116px); height: auto; aspect-ratio: 116 / 150; }
.a-deck__stack img { width: 80%; }
.a-slot { container-type: inline-size; min-height: 0; }
.a-slot__cards { --cw: min(100cqw, 116px); display: grid; grid-template-columns: var(--cw); justify-content: center;
  gap: 6px; min-height: calc(var(--cw) * 150 / 116); }
@container (min-width: 150px) {
  .a-slot__cards { --cw: min((100cqw - 6px) / 2, 116px); grid-template-columns: repeat(2, var(--cw)); }
}
.a-card, .a-demo__book .a-card, .a-card--onTrack { width: 116px; height: auto; aspect-ratio: 116 / 150; padding: 0;
  container-type: inline-size; font-size: 1rem; }
.a-card--onTrack { width: 100%; }
.a-card__cd, .a-card--onTrack .a-card__cd { width: 31.7cqw; height: 31.7cqw; padding: 1cqw 0 0 4cqw; font-size: 15.9cqw; line-height: 1.1; }
.a-card__name, .a-demo__book .a-card__name, .a-card--onTrack .a-card__name { font-size: 11.9cqw; padding: 0 7.6cqw; }
.a-card__type, .a-demo__book .a-card__type, .a-card--onTrack .a-card__type { display: block; font-size: 9.4cqw; padding: 0 7.6cqw 7.6cqw; }
@media (max-width: 600px) {
  .a-demo__track { grid-template-columns: repeat(5, minmax(0, 1fr)) 4px minmax(0, 1fr); gap: 3px; padding: 4px; }
  .a-slot { padding: 2.2rem 3px 3px; }
  .a-slot__n { font-size: 1.4rem; }
  .a-deck { padding: .35rem 3px 3px; }
  .a-deck__label { font-size: .55rem; line-height: 1.4rem; margin-bottom: calc(2.2rem - .35rem - 1.4rem); }
  .a-deck__stack { width: min(100cqw - 6px, 116px); box-shadow: 1px 1px 0 #000, 3px 3px 0 #5a160e, 4px 4px 0 #000; }
  .a-demo__book .a-card { width: calc(33.333% - 7px); padding: 0; }
  .a-card { border-width: 1px; }
}

/* Round 25: track cards fill the cooldown box width, one column; taller boxes */
.a-slot__cards { --cw: 100cqw; grid-template-columns: var(--cw); gap: 8px; min-height: calc(var(--cw) * 150 / 116); }
@container (min-width: 150px) { .a-slot__cards { --cw: 100cqw; grid-template-columns: var(--cw); } }
.a-slot, .a-deck { padding-bottom: .8rem; }
.a-deck__stack { width: calc(100cqw - 12px); }
@media (max-width: 600px) { .a-slot, .a-deck { padding-bottom: 3px; } .a-deck__stack { width: calc(100cqw - 6px); } }

/* Round 27: mock cards (name on top, art, targeting grid, implied rules text) and a cascading stack per cooldown slot */
.a-card { justify-content: flex-start; gap: 0; overflow: hidden; box-shadow: 0 -3px 6px rgba(0,0,0,.45); }
.a-card__cd, .a-card--onTrack .a-card__cd { width: 24cqw; height: 24cqw; padding: .5cqw 0 0 3cqw; font-size: 12cqw; line-height: 1.1; }
.a-card__name, .a-demo__book .a-card__name, .a-card--onTrack .a-card__name {
  display: block; min-height: 22cqw; padding: 5cqw 4cqw 0 22cqw; font-size: 10cqw; line-height: 1.05; letter-spacing: -.01em; }
.a-card__art { display: block; width: auto; height: 46cqw; margin: 1cqw 5cqw 0; object-fit: cover; border: 1px solid #3a2e20; }
.a-card__foot { display: flex; gap: 4cqw; align-items: center; margin: 4cqw 5cqw 0; }
.a-card__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8cqw; width: 30cqw; flex: none; }
.a-card__sq { aspect-ratio: 1; background: rgba(60,45,30,.18); border: 1px solid rgba(60,45,30,.35); }
.a-card__sq.is-hero { background: #2b241c; border-color: #2b241c; }
.a-card__sq.is-target { background: #c0392b; border-color: #8e2418; }
.a-card__text { flex: 1; display: grid; gap: 2.6cqw; filter: blur(.5px); }
.a-card__line { display: block; height: 2.6cqw; border-radius: 2cqw; background: rgba(70,55,40,.4); }
.a-card__line:nth-child(2) { width: 88%; }
.a-card__line:nth-child(3) { width: 95%; }
.a-card__line:nth-child(4) { width: 60%; }
.a-card__type, .a-demo__book .a-card__type, .a-card--onTrack .a-card__type { margin-top: auto; padding: 0 5cqw 4cqw; font-size: 8cqw; }
.a-slot__cards { display: flex; flex-direction: column; gap: 0; width: var(--cw); margin-inline: auto; }
.a-slot__cards > .a-card + .a-card { margin-top: calc(var(--cw) * (.24 - 150 / 116)); }

/* Round 28: End round waits while the track shifts */
.a-demo [data-end]:disabled, .a-demo [data-end][aria-disabled="true"] { opacity: .55; cursor: progress; }

/* Round 29: a cooldown box rises above its neighbours while one of its cards is moving */
.a-slot.is-lifted { z-index: 3; }

/* Round 30: cards flying back to the hand pass over the cooldown boxes */
.a-card.is-flying { z-index: 4; }

/* Round 33 (preview): Library: jump links, people intros, playable legends linked, tile art for locations */
.a-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 2rem; }
.a-jump a { font-family: var(--f-display); letter-spacing: .06em; padding: .45rem .9rem; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.a-jump a:hover, .a-jump a:focus-visible { border-color: var(--fire); color: var(--fire); }
.library-section { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }
.group-intro { color: var(--ink-dim); max-width: 62ch; margin: .1rem 0 .6rem; text-wrap: pretty; }
.roster li.is-legend a { font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.roster li.is-legend a:hover { border-bottom-width: 2px; }
.a-places { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.a-place { margin: 0; }
.a-place img { display: block; width: 100%; height: auto; aspect-ratio: 1; border: 1px solid #2a2622; }
.a-place img.is-back { opacity: .55; }
.a-place__name { display: block; margin-top: .35rem; font-size: .9rem; color: var(--ink-dim); }
@media (max-width: 600px) { .a-places { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
/* Locations: painted art only (name bar + rules text cropped off); icon tiles stay a name list */
.a-places { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: .9rem; }
.a-place img { aspect-ratio: 8 / 5; object-fit: cover; }
@media (max-width: 600px) { .a-places { grid-template-columns: repeat(2, 1fr); } }

/* Round 36 (preview): Peoples and Gods lists in 4 columns (fewer on narrow screens) */
#peoples .roster, #gods .roster { columns: 4 10rem; }
/* People intros: use the list width; balance the lines instead of breaking at an arbitrary 62ch */
.a-body .group-intro, .group-block .group-intro { max-width: none; text-wrap: balance; }

/* Round 39 (preview): Archive in 4 columns (fewer on narrow screens) */
#archive .archive-list { columns: 4 11rem; column-gap: 2rem; }
#archive .archive-list li { break-inside: avoid; }

/* Fix (10-16): outline buttons in page bodies keep dark text on their light hover fill */
.a-body a.a-btn:hover, .a-body a.a-btn:focus-visible { color: #000; }

/* Round 42: cards off slot 1 rest on the Skillbook pile until the last beat */
.a-deck__stack .a-card--parked { position: absolute; inset: -2px; width: auto; height: auto; aspect-ratio: auto; margin: 0; box-shadow: none; }

/* Round 49 (preview): footer back to the original four-column layout (brand · The Game · Seeking Heroes · War Council) */
.a-footer { padding: 3rem 0 2rem; }
.a-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; text-align: left; }
.a-footer__brand .a-footer__tag { margin: .9rem 0 0; color: var(--ink-dim); font-family: var(--f-body); font-size: 1rem; max-width: 26ch; }
.a-footer__col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.a-footer__h { margin: 0 0 .35rem; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .04em; color: var(--fire-2); }
.a-footer__col a { color: var(--ink-dim); text-decoration: none; }
.a-footer__col a:hover, .a-footer__col a:focus-visible { color: var(--fire); }
.a-footer__base { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: center; display: grid; gap: .4rem; }
.a-footer__base p { margin: 0; font-size: .88rem; color: var(--ink-faint); }
.a-footer__base .a-footer__credit { color: var(--fire); }
@media (max-width: 900px) { .a-footer__cols { grid-template-columns: 1fr 1fr; } .a-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .a-footer__cols { grid-template-columns: 1fr; } .a-footer { padding-bottom: 5rem; } }

/* Round 51 (preview): social links as icons under the tagline; War Council column removed */
.a-footer__cols { grid-template-columns: 1.6fr 1fr 1fr; }
.a-footer__social { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.a-footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink-dim); transition: color .15s ease, border-color .15s ease; }
.a-footer__social a:hover, .a-footer__social a:focus-visible { color: var(--fire); border-color: var(--fire); }
.a-footer__social svg { width: 20px; height: 20px; display: block; }
@media (max-width: 900px) { .a-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .a-footer__cols { grid-template-columns: 1fr; } }

/* Round 52 (preview): footer in four short groups (Learn · Play · Support Oathen · Seeking Heroes);
   links to pages that don't exist yet show dulled and unclickable */
.a-footer__cols { grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem 1.5rem; }
.a-footer__soon { color: #5e5a54; cursor: default; }
@media (max-width: 1100px) { .a-footer__cols { grid-template-columns: repeat(4, 1fr); } .a-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 700px) { .a-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .a-footer__cols { grid-template-columns: 1fr 1fr; } }
.a-footer__social { gap: .4rem; flex-wrap: nowrap; }
.a-footer__social a { width: 36px; height: 36px; }
.a-footer__social svg { width: 18px; height: 18px; }

/* Frigg 10-17 (Jason via Kyja): header about 20-22% shorter on every page, Join the Beta button a little shorter.
   Heights before -> after: desktop 108 -> 84px, tablet 107 -> 83px, phone 89 -> 71px; logo 64 -> 52px (46 -> 40px on phones);
   Join the Beta 50 -> 39px tall at 1440px (vertical padding + line-height only; width and text size unchanged). */
@media (min-width: 1025px) { :root { --header-h: 84px; } }
.site-header, .site-header.is-condensed { padding: 8px 24px; }
.site-header .site-header__inner { padding-block: .45rem; }
.site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 52px; }
@media (max-width: 600px) { .site-header .site-header__brand img, .site-header.is-condensed .site-header__brand img { height: 40px; } }
.site-header .site-header__inner .nav-link.is-highlight { padding-top: .35rem; padding-bottom: .35rem; line-height: 1.25; }

/* Frigg 10-17 (Jason via Kyja): legend pages' Ultimate box: the heading starts at the box's own top padding
   (.a-legend__text h2's 2.75rem section margin was landing inside the box); the corner tab stays clear of the text */
.a-legend__text .a-legend__ult-name { margin-top: 0; }

/* Frigg 10-17 (Jason via Kyja): home round-phase cards: the numbered corner triangles are deeper (38 -> 54px legs) so each
   number sits clear of the diagonal (gap about 1px -> 8px); the headings keep their place (12px clear of the diagonal) */
.a-phases li::before { width: 3.4rem; height: 3.4rem; padding: 0 1.5rem 1.5rem 0; }

/* Frigg 10-17 (Jason via Kyja): home "How to play" is the section's centred call to action: the primary button,
   square corners inside a square 1px fire frame, a slow ember glow + a light sweep at rest, a lift + hotter glow on
   hover/focus. It animates for everyone, reduced motion included (Jason's choice 10-17). */
.a-cta-center { text-align: center; margin: 2.25rem 0 .5rem; }
.a-btn--glow { position: relative; overflow: hidden; isolation: isolate; border-radius: 0; font-size: 1.25rem; padding: 1rem 2.6rem;
  outline: 1px solid var(--fire-2); outline-offset: 6px;
  animation: a-ember 3.2s ease-in-out infinite; transition: transform .2s ease, outline-color .2s ease; }
.a-btn--glow::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 216, .6) 50%, transparent 70%);
  transform: translateX(-130%); animation: a-sweep 4.8s ease-in-out infinite; }
.a-btn--glow:hover, .a-btn--glow:focus-visible { transform: translateY(-3px); outline-color: var(--fire); animation-name: a-ember-hot; }
.a-btn--glow:focus-visible { outline: 3px solid var(--fire); outline-offset: 6px; }
@keyframes a-ember {
  0%, 100% { box-shadow: 0 0 10px 1px rgba(237, 133, 35, .35); }
  50% { box-shadow: 0 0 26px 6px rgba(247, 199, 34, .45), 0 0 50px 14px rgba(241, 89, 34, .2); }
}
@keyframes a-ember-hot {
  0%, 100% { box-shadow: 0 0 30px 8px rgba(247, 199, 34, .55), 0 0 60px 18px rgba(241, 89, 34, .28); }
  50% { box-shadow: 0 0 40px 12px rgba(247, 199, 34, .7), 0 0 76px 24px rgba(241, 89, 34, .36); }
}
@keyframes a-sweep { 0%, 55% { transform: translateX(-130%); } 85%, 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) {
  .a-btn--glow { animation-duration: 3.2s !important; animation-iteration-count: infinite !important; transition-duration: .2s !important; }
  .a-btn--glow::after { animation-duration: 4.8s !important; animation-iteration-count: infinite !important; }
}
@media (max-width: 480px) { .a-btn--glow { padding: .95rem 2rem; } }

/* Frigg 10-17b (Aeron gate follow-ups …1509): (1) phone/tablet Menu button reaches the 44px tap-target size, label centred;
   the phone header keeps its 71px by trimming the inner padding to fit the 44px row. (2) Library jump links land below the
   sticky header at every width (--header-h is 0 at 900-1024px, so the scroll margin no longer uses it). */
@media (max-width: 1024px) { .site-header .site-header__menu-toggle { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } }
@media (max-width: 600px) { .site-header .site-header__inner { padding-block: .32rem; } }
.library-section { scroll-margin-top: 100px; }
@media (max-width: 600px) { .library-section { scroll-margin-top: 88px; } }

/* Frigg 10-17d (Jason via Kyja): (1) the top-nav hover underline sits on the header's bottom edge, not mid-air: at the
   widths with the inline nav, the header row and the nav links stretch to the full header height (84px unchanged), so the
   links' 2px bottom border lands on the header's bottom border. (2) Join the Beta keeps its exact box on hover/focus
   (the old :hover rule swapped its padding to .4rem .85rem and drew a gold bottom border): only the colours change. */
@media (min-width: 1025px) {
  .site-header, .site-header.is-condensed { padding-top: 0; padding-bottom: 0; align-items: stretch; }
  .site-header .site-header__inner { padding-block: 0; align-items: stretch; }
  .site-header .site-header__nav-left, .site-header .site-header__nav-right { align-items: stretch; }
  .site-header .site-header__inner .nav-link:not(.is-highlight) { display: inline-flex; align-items: center; }
  .site-header .site-header__inner .nav-link.is-highlight { align-self: center; }
}
.site-header .site-header__inner .nav-link.is-highlight:hover,
.site-header .site-header__inner .nav-link.is-highlight:focus-visible { padding: .35rem .95rem; border-bottom-color: transparent; }
.site-header .site-header__inner .nav-link.is-highlight:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }

/* Frigg 10-17d (Jason via Kyja): Library hero links (the six legend names in the rosters) lose their underline; they stay
   bold in the link colour, hover/focus turns them orange, and keyboard focus keeps a visible outline. Other links unchanged. */
.roster li.is-legend a, .roster li.is-legend a:hover { border-bottom: 0; text-decoration: none; }
.roster li.is-legend a:hover, .roster li.is-legend a:focus-visible { color: var(--fire-2); }
.roster li.is-legend a:focus-visible { outline: 2px solid var(--fire); outline-offset: 2px; }

/* Frigg 10-17 (Jason via Kyja): the cooldown demo becomes Nyxa's guided first round. The three phase cards are its tabs
   (Planning / Action / Cooldown); round 1 runs on rails, then free play. Target grids follow the printed cards. */
.a-phases li { padding: 0; }
.a-phase { display: block; width: 100%; height: 100%; margin: 0; padding: 1.25rem 1.25rem 1.25rem 3.25rem; border: 0; border-radius: 0;
  background: transparent; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.a-phase:hover { background: #1d1b18; }
.a-phase[aria-selected="true"] { box-shadow: inset 0 0 0 2px var(--fire-2); background: #1d1b18; }
.a-phase[aria-selected="true"] strong { color: var(--fire); }
.a-phase[aria-disabled="true"] { cursor: default; }
.a-phase[aria-disabled="true"]:not([aria-selected="true"]) { opacity: .6; }
.a-phase[aria-disabled="true"]:hover:not([aria-selected="true"]) { background: transparent; }
.a-phase:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
.a-phases { margin-bottom: 1rem; }

.a-demo [hidden] { display: none !important; }
.a-demo__hand { margin-bottom: 1.25rem; }
.a-demo__slots { min-height: 150px; }
.a-demo__slot { width: 116px; aspect-ratio: 116 / 150; border: 2px dashed #4a4239; border-radius: 4px; flex: none; }
.a-demo__slot .a-card { margin: -2px; }
.a-card.is-guided { outline: 3px solid var(--fire); outline-offset: 2px; box-shadow: 0 0 14px 2px rgba(247, 199, 34, .45); }
.a-card.is-guided:hover { transform: translateY(-4px); }
.a-card[aria-disabled="true"] { cursor: default; }
.a-card.is-spot { outline: 3px solid var(--fire); outline-offset: 2px; transform: translateY(-6px); box-shadow: 0 0 16px 3px rgba(247, 199, 34, .5); }
.a-demo__step:focus { outline: none; }
.a-demo__step { min-height: 4.8em; margin: 1rem 0 0; padding: .9rem 1.1rem; background: #1d1b18; border-left: 4px solid var(--fire-2);
  color: var(--ink); max-width: 72ch; text-wrap: pretty; }

/* The scripted round: Nyxa's played cards beside a stand-in opponent */
.a-demo__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: start; }
.a-demo__played .a-demo__cards { min-height: 150px; align-items: flex-start; }
.a-demo__pair { display: flex; align-items: flex-start; }
.a-demo__pair .a-card.is-attached { margin-left: -58px; margin-top: 34px; box-shadow: -3px -3px 8px rgba(0, 0, 0, .55); }
.a-foe__body { display: flex; gap: 10px; align-items: flex-start; }
.a-foe__hero { position: relative; margin: 0; width: 132px; }
.a-foe__img { display: block; width: 132px; height: 132px; object-fit: cover; border: 2px solid #000; outline: 1px solid var(--line); background: #1d1b18; }
.a-foe__name { margin-top: .35rem; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: .06em; color: var(--ink); text-align: center; }
.a-foe__chips { position: absolute; top: 6px; right: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.a-foe__chip { display: inline-block; padding: .15rem .45rem; font: 700 .78rem/1.2 var(--f-body); letter-spacing: .04em; border: 1px solid #000; }
.a-foe__chip.is-root { background: #5b3a9b; color: #fff; }
.a-foe__chip.is-dmg { background: #c0392b; color: #fff; }
.a-foe.is-hit .a-foe__img { outline-color: #c0392b; }
.a-foe__played { min-height: 0; }
.a-card.is-stopped { filter: grayscale(1) brightness(.6); }
.a-card.is-stopped::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 2px), #c0392b calc(50% - 2px), #c0392b calc(50% + 2px), transparent calc(50% + 2px)); }
@media (max-width: 760px) {
  .a-demo__stage { grid-template-columns: 1fr; gap: 1rem; }
  .a-foe__hero { width: 96px; }
  .a-foe__img { width: 96px; height: 96px; }
}
@media (max-width: 600px) {
  .a-phase { padding: 1rem 1rem 1rem 3.25rem; }
  .a-demo__slot { width: calc(25% - 8px); }
  .a-demo__slots { min-height: 0; flex-wrap: nowrap; gap: 8px; }
  .a-demo__slots .a-card { width: calc(100% + 4px); }
  .a-demo__played .a-demo__cards { min-height: 0; }
  [data-action-hand] .a-card, .a-demo__played .a-card, .a-foe__played .a-card { width: calc(25% - 8px); }
  .a-demo__pair { flex: 0 0 calc(40% - 8px); }
  .a-demo__pair .a-card, .a-demo__played .a-demo__pair .a-card { width: 62%; }
  .a-demo__pair .a-card.is-attached { margin-left: -24%; margin-top: 18%; }
  .a-foe__played .a-card { width: 74px; }
}
[data-action-hand] { min-height: 150px; }
@media (max-width: 600px) { [data-action-hand] { min-height: 0; } }

/* Target grids as printed: red = a space the ability can target (her own space darker), blue = a space she can move to,
   black = a drawn space that isn't a target. Cards without a grid on the print show none. */
.a-card__grid--3 { grid-template-columns: repeat(3, 1fr); width: 21cqw; gap: 0; }
.a-card__grid--7 { grid-template-columns: repeat(7, 1fr); width: 32cqw; gap: 0; }
.a-card__sq.is-r, .a-card__sq.is-own, .a-card__sq.is-b, .a-card__sq.is-k { border: .6cqw solid #000; }
.a-card__sq.is-r { background: #d8452f; }
.a-card__sq.is-own { background: #b4231a; }
.a-card__sq.is-b { background: #4f5fb4; }
.a-card__sq.is-k { background: #1a1714; }
.a-card__sq.is-off { visibility: hidden; }

/* Frigg 10-17e (Jason via Kyja): the How to play label flashes with the button: it fades up to white at each ember-glow
   peak and back to black between (a second animation, same 3.2s cycle, started together, so the peaks line up). A dark
   halo comes up first (by 34% of the cycle, while the label is still near black) and stays while it is light, so the label stays readable on the orange at every point of the cycle.
   Hover/focus keep today's look (black on yellow): their single "hot" animation drops the text flash. */
.a-btn--glow { animation: a-ember 3.2s ease-in-out infinite, a-ember-text 3.2s ease-in-out infinite; }
.a-btn--glow:hover, .a-btn--glow:focus-visible { animation-name: a-ember-hot; }
@keyframes a-ember-text {
  0%, 22%, 78%, 100% { color: #000; text-shadow: 0 0 1px rgba(0, 0, 0, 0), 0 0 2px rgba(0, 0, 0, 0), 0 0 4px rgba(0, 0, 0, 0); }
  34%, 66% { color: #2a2a2a; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 4px rgba(0, 0, 0, .85); }
  50% { color: #fff; text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 4px rgba(0, 0, 0, .85); }
}

/* Frigg 10-17 (Jason via Kyja): home Arena section: a 5x5 duel arena demo (arena-demo.js). Face-down tiles use the
   card-back look of the Skillbook pile; the blue frames mark the spaces Nyxa can move to (blue = move, as on [Move]). */
.a-arena__board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; background: #1f1c18; border: 1px solid var(--line); }
.a-arena__cell { position: relative; aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: #2b2722; color: inherit; font: inherit; cursor: default; }
.a-arena__tile { position: absolute; inset: 0; display: block; }
.a-arena__back { position: absolute; inset: 0; border: 2px solid #000; background: radial-gradient(120% 90% at 50% 40%, #7a1d12 0%, #3a0b07 70%); }
.a-arena__back::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(247, 199, 34, .4); }
.a-arena__face { position: absolute; inset: 0; display: none; border: 2px solid #000; background: #000; }
.a-arena__face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-arena__cell.is-shown .a-arena__back { display: none; }
.a-arena__cell.is-shown .a-arena__face { display: block; }
.a-arena__name { position: absolute; left: 0; right: 0; bottom: 0; padding: .2rem .25rem; background: rgba(0, 0, 0, .8); color: var(--ink);
  font: 600 .72rem/1.15 var(--f-body); text-align: center; opacity: 0; transition: opacity .15s ease; pointer-events: none; z-index: 4; }
.a-arena__cell.is-shown:hover .a-arena__name, .a-arena__cell.is-shown:focus-visible .a-arena__name { opacity: 1; }
.a-arena__cell.is-gate { background: #141210; border: 2px solid #4f5fb4; }
.a-arena__cell.is-gate--foe { border-color: #c0392b; }
.a-arena__gate { position: absolute; inset: 0; display: grid; place-items: center; padding: .2rem; font-family: var(--f-display);
  font-size: .78rem; line-height: 1.1; letter-spacing: .05em; color: var(--ink-dim); text-align: center; }
.a-arena__cell.is-open { cursor: pointer; }
.a-arena__cell.is-open::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 3px solid #8fa0ff; background: rgba(79, 95, 180, .28); animation: a-arena-open 1.6s ease-in-out infinite; }
.a-arena__cell.is-open:hover::after, .a-arena__cell.is-open:focus-visible::after { background: rgba(79, 95, 180, .5); }
@keyframes a-arena-open { 0%, 100% { border-color: rgba(143, 160, 255, .55); } 50% { border-color: #b8c3ff; } }
.a-arena__cell:focus-visible { outline: 3px solid var(--fire); outline-offset: 1px; z-index: 5; }
.a-arena__nyxa { position: absolute; inset: 9%; z-index: 3; display: block; border-radius: 50%; overflow: hidden; border: 3px solid #4f5fb4;
  background: #000; box-shadow: 0 5px 12px rgba(0, 0, 0, .75); pointer-events: none; }
.a-arena__nyxa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.a-arena__caption { min-height: 1.6em; margin: .8rem 0 0; color: var(--ink); }
.a-arena__actions { margin-top: .6rem; }
@media (prefers-reduced-motion: reduce) {
  .a-arena__cell.is-open::after { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
  .a-arena__name { transition-duration: .15s !important; }
}
@media (max-width: 600px) {
  .a-arena__board { gap: 3px; padding: 4px; }
  .a-arena__gate { font-size: .58rem; }
  .a-arena__name { font-size: .6rem; }
  .a-arena__nyxa { border-width: 2px; }
}

/* Aeron 10-17 review, What is Oathen: one centred reading column. Text, headings, review videos + quotes,
   the role grid and the tile row share one 760px column, centred under the logo; the h1 sits on the same edge. */
.a-page-head.is-article > .container, .page-body.is-article { max-width: calc(760px + 48px); }
.page-body.is-article > p, .page-body.is-article > ul, .page-body.is-article > ol,
.page-body.is-article > .lede, .page-body.is-article .review blockquote { max-width: none; }
.page-body.is-article h2 { margin: 3.5rem 0 1rem; }
.page-body.is-article .review { margin: 1.75rem 0 2.5rem; }
.page-body.is-article .review .video-embed { margin-bottom: 1rem; }
.page-body.is-article .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 600px) {
  .page-body.is-article .role-grid { grid-template-columns: 1fr; }
  .page-body.is-article .lede { font-size: 1.125rem; line-height: 1.65; }
}

/* Frigg 10-17f (Jason via Kyja): What is Oathen Reviews: the two videos are player reactions captioned with their own
   titles; the quotes stand on their own. #reviews lands below the sticky header (same margins as the Library). */
.review figcaption { display: block; margin-top: .45rem; color: var(--ink-faint); font-size: .9rem; }
.page-body h2[id] { scroll-margin-top: 100px; }
@media (max-width: 600px) { .page-body h2[id] { scroll-margin-top: 88px; } }

/* Frigg 10-17f (Jason via Kyja: "remove that from all links"): no underlined links anywhere, at rest or on hover.
   In-text links keep the accent colour (--fire) and turn orange (--fire-2) on hover/focus; keyboard focus keeps its
   outline. The header nav's hover bar on the header's bottom edge stays (Jason placed it there 10-17d). */
a, a:hover,
.page-body p a:not(.btn), .page-body li a:not(.btn),
.legend-body p a:not(.btn), .legend-body li a:not(.btn),
.prose-narrow p a:not(.btn), .prose-narrow li a:not(.btn),
.ks-banner a:hover, .ks-banner__cta:hover, .stat-table a:hover { text-decoration: none; }
.a-body a:not(.a-btn):hover, .a-body a:not(.a-btn):focus-visible { color: var(--fire-2); }

/* Frigg 10-17g (Jason via Kyja): links inside paragraphs (running text) are semi-bold as well as yellow, the non-colour
   cue now that underlines are gone. Nav, footer, buttons, cards and lists are unchanged. */
.a-body p a:not(.a-btn) { font-weight: 600; }

/* Frigg 10-17i (Aeron's 10-17g follow-up): the home hero line wraps in balanced lines ("1 to 6" no longer splits at 375). */
.a-intro__line { text-wrap: balance; }

/* Frigg 10-17j (Jason via Kyja): legend pages: the Chronicle and Iconic Abilities are folds. Collapsed, the first
   lines show and fade into the box's bottom border, with a caret button on that border; the whole box toggles.
   Without JS (no .is-foldable) everything shows as before. Animates for everyone (Jason's 10-17 choice). */
.a-fold { margin-top: 2.75rem; }
.a-fold__title { margin: 0 0 .9rem; }
.a-legend__text .a-fold__title { margin-top: 0; }
.a-fold__box { position: relative; padding: 1.25rem 1.5rem 1.5rem; background: #0b0a09; border: 1px solid var(--line); }
.a-fold__body { overflow-wrap: break-word; }
.a-fold__body > :first-child { margin-top: 0; }
.a-fold__body > :last-child { margin-bottom: 0; }
.a-fold.is-foldable .a-fold__box { cursor: pointer; padding-bottom: 2rem; }
.a-fold.is-foldable:not(.is-open) .a-fold__body { max-height: 11rem; overflow: hidden; }
.a-fold.is-moving .a-fold__body { overflow: hidden; }
.a-fold.is-foldable:not(.is-open) .a-fold__box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7rem;
  background: linear-gradient(to bottom, rgba(11, 10, 9, 0), #0b0a09 78%); pointer-events: none; }
.a-fold__toggle { position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translate(-50%, 50%); display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #0b0a09; color: var(--fire);
  cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.a-fold__toggle svg { transition: transform .3s ease; }
.a-fold.is-open .a-fold__toggle svg { transform: rotate(180deg); }
.a-fold__box:hover .a-fold__toggle, .a-fold__toggle:focus-visible { border-color: var(--fire-2); color: var(--fire-2); }
.a-fold__toggle:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
.a-fold__toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .a-fold__toggle svg { transition-duration: .3s !important; }
  .a-fold__toggle { transition-duration: .2s !important; }
}
.a-legend .legend-body .a-fold__body.chronicle { max-width: none; }
.a-legend .legend-body .a-fold { max-width: 68ch; }
@media (max-width: 600px) { .a-fold__box { padding: 1rem 1rem 1.25rem; } .a-fold.is-foldable .a-fold__box { padding-bottom: 1.75rem; } }

/* Iconic Abilities: the printed cards in a grid (desktop 5 across from 1280px; 3 across from 601 to 1279px, where the
   text column is too narrow for 5 readable cards; phone 2). Collapsed, the top of the first
   row shows and fades into the box's bottom border: the box is a size container, so the collapsed height follows the
   card size at every width. */
.a-fold--cards .a-fold__box { container-type: inline-size; }
.a-legend .legend-body .a-fold--cards { max-width: none; }
.a-iconic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.a-iconic li { margin: 0; }
.a-iconic img { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
.a-fold--cards.is-foldable:not(.is-open) .a-fold__body { max-height: calc((100cqw - 32px) / 5 * 1.4 * .62); }
@media (max-width: 1279px) {
  .a-iconic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-fold--cards.is-foldable:not(.is-open) .a-fold__body { max-height: calc((100cqw - 16px) / 3 * 1.4 * .62); }
}
@media (max-width: 600px) {
  .a-iconic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-fold--cards.is-foldable:not(.is-open) .a-fold__body { max-height: calc((100cqw - 8px) / 2 * 1.4 * .62); }
}

/* Frigg 10-17k (Jason via Kyja): What is Oathen player reviews: 2 columns (1 on phones) of click-to-play stand-ins.
   The stand-in is local (ember backdrop + wordmark + play button); no thumbnails are fetched from YouTube. */
.a-videos { list-style: none; margin: 1.75rem 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.a-video { margin: 0; }
.a-video__play, .a-video__frame { position: relative; display: block; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.a-video__play { background: radial-gradient(120% 120% at 50% 35%, #5a160e 0%, #2a0905 55%, #0b0a09 100%); text-decoration: none; }
.a-video__logo { position: absolute; left: 50%; top: 22%; width: 34%; height: auto; transform: translateX(-50%); opacity: .55; }
.a-video__btn { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); display: block; line-height: 0; transition: transform .2s ease; }
.a-video__btnbg { fill: var(--fire-2); transition: fill .2s ease; }
.a-video__play:hover .a-video__btn, .a-video__play:focus-visible .a-video__btn { transform: translate(-50%, -50%) scale(1.08); }
.a-video__play:hover .a-video__btnbg, .a-video__play:focus-visible .a-video__btnbg { fill: var(--fire); }
.a-video__play:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
.a-body .a-video__title, .a-video__title { margin: .45rem 0 0; color: var(--ink-faint); font-size: .9rem; }
@media (max-width: 600px) { .a-videos { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .a-video__btn, .a-video__btnbg { transition-duration: .2s !important; } }

/* Frigg 10-17k (Jason via Kyja): the arena demo's tile panel: what the space Nyxa is on does (art, name, printed effect
   with its timing tag, and a plain line on when that timing happens). Under the arena at every width. */
.a-arena__info { display: flex; gap: 1rem; align-items: flex-start; margin-top: .8rem; padding: .9rem 1rem; background: #0b0a09; border: 1px solid var(--line); min-height: 6.5rem; }
.a-arena__info-art { flex: none; width: 128px; height: auto; aspect-ratio: 8 / 5; object-fit: cover; border: 1px solid #000; }
.a-arena__info-body { min-width: 0; }
.a-arena__info-name { margin: 0 0 .3rem; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .04em; color: var(--ink); }
.a-arena__info-text { margin: 0; color: var(--ink-dim); line-height: 1.5; }
.a-arena__tag { display: inline-block; margin-right: .1rem; padding: .05rem .4rem; background: var(--fire-2); color: #000; font: 700 .78rem/1.4 var(--f-body); letter-spacing: .04em; text-transform: uppercase; border-radius: 2px; }
.a-arena__info-when { margin: .35rem 0 0; color: var(--ink-faint); font-size: .88rem; }
@media (max-width: 480px) { .a-arena__info { flex-direction: column; } .a-arena__info-art { width: 100%; max-width: 240px; } }

/* Frigg 10-17l (Jason via Kyja): arena targeting. A strip of Nyxa's cards (Move + three attacks, grids as printed);
   an attack lights its target spaces red on the arena; a stand-in Bravus token stands on one space. */
.a-arena__cards { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .6rem; }
.a-tgt { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .35rem .6rem .35rem .45rem; background: var(--bg-3);
  border: 1px solid var(--line); border-left: 4px solid #555; border-radius: 2px; color: var(--ink); font: 600 .85rem/1.1 var(--f-body); cursor: pointer; }
.a-tgt--battle { border-left-color: var(--t-battle); }
.a-tgt--blitz { border-left-color: var(--t-blitz); }
.a-tgt[aria-pressed="true"] { border-color: var(--fire); border-left-color: var(--fire); background: #2a1c06; }
.a-tgt:hover:not(:disabled) { border-color: var(--fire-2); }
.a-tgt:disabled { opacity: .5; cursor: default; }
.a-tgt:focus-visible { outline: 3px solid var(--fire); outline-offset: 2px; }
.a-tgt__grid { display: grid; flex: none; gap: 0; background: transparent; }
.a-tgt__grid--3 { grid-template-columns: repeat(3, 8px); }
.a-tgt__grid--7 { grid-template-columns: repeat(7, 5px); }
.a-tgt__sq { aspect-ratio: 1; border: 1px solid #000; }
.a-tgt__sq.is-r { background: #d8452f; }
.a-tgt__sq.is-own { background: #b4231a; }
.a-tgt__sq.is-b { background: #4f5fb4; }
.a-tgt__sq.is-k { background: #1a1714; }
.a-tgt__sq.is-off { visibility: hidden; }
.a-arena__cell.is-lit::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 3px solid #ff6a50; background: rgba(216, 69, 47, .38); }
.a-arena__cell.is-lit:hover::after, .a-arena__cell.is-lit:focus-visible::after { background: rgba(216, 69, 47, .55); }
.a-arena__foe { position: absolute; inset: 9%; z-index: 3; display: block; border-radius: 50%; overflow: hidden; border: 3px solid #c0392b;
  background: #000; box-shadow: 0 5px 12px rgba(0, 0, 0, .75); pointer-events: none; }
.a-arena__foe img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.a-arena__foe.is-hit { border-color: #ff6a50; box-shadow: 0 0 0 3px rgba(255, 106, 80, .6), 0 5px 12px rgba(0, 0, 0, .75); }
/* Nyxa and Bravus in the same space: each takes a corner */
.a-arena__cell:has(.a-arena__foe):has(.a-arena__nyxa) .a-arena__nyxa { inset: 4% 34% 34% 4%; }
.a-arena__cell:has(.a-arena__foe):has(.a-arena__nyxa) .a-arena__foe { inset: 34% 4% 4% 34%; }
@media (max-width: 600px) { .a-tgt { font-size: .78rem; padding: .3rem .5rem .3rem .4rem; } .a-arena__foe { border-width: 2px; } }

/* Aeron 10-17 (gate must-fix 2, verbatim): targeting reads at a glance on red tile backs: out-of-range spaces dim;
   in-range spaces get a light frame + red X (the printed target mark). */
.a-arena__board:has(.is-lit) .a-arena__cell:not(.is-lit) { filter: brightness(.4) saturate(.6); }
.a-arena__cell.is-lit::after { border: 3px solid #f2efe8; background: rgba(242, 239, 232, .14); box-shadow: inset 0 0 0 2px #d8452f; }
.a-arena__cell.is-lit:hover::after, .a-arena__cell.is-lit:focus-visible::after { background: rgba(242, 239, 232, .3); }
.a-arena__cell.is-lit:not(.is-gate):not(:has(.a-arena__nyxa, .a-arena__foe))::before { content: "\2715"; position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; color: #e8402a; font-size: clamp(1.1rem, 4.2vw, 2.1rem); font-weight: 700; line-height: 1;
  text-shadow: 0 0 2px #fff, 0 0 8px rgba(0, 0, 0, .7); pointer-events: none; }

/* Aeron 10-17 (option b, D1, verbatim): Iconic Abilities + Other Legends as a full-width row under both legend columns. */
.a-legend__below { margin-top: clamp(2rem, 4vw, 3rem); }
.a-legend .a-legend__below .a-fold { max-width: none; margin-top: 0; }
.a-legend__below .legend-others-head { text-align: left; }
@media (min-width: 900px) { .a-legend__below .a-iconic { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 601px) and (max-width: 899px) { .a-legend__below .a-iconic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 601px) { .a-legend__below .a-fold--cards.is-foldable:not(.is-open) .a-fold__body { max-height: none; } }