/* Self-hosted (D-156): mirrors exactly what Google's own css2 endpoint
   served for `family=Cormorant+Garamond:wght@500;600;700&family=Inter:
   wght@400;500;600;700`, latin subset only (the site is English-only) —
   each family resolves to a single variable-font file, with one @font-face
   rule per weight pointing at it, same as Google's own CSS does. Avoids
   sending every visitor's IP to Google on every page load (a real GDPR
   issue — see LG München, Jan 2022 — not just a performance nicety). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/inter.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Logo wordmark only (D-160, was Fondamento per D-159) — Cormorant Garamond
   reads thin/weak at the small size the header logo needs; Metamorphous is
   a bold fantasy display face with a mystical, "sword and sorcery" presence,
   and stays legible small since it's a display face, not a delicate
   book-text serif. */
@font-face {
  font-family: "Metamorphous";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/metamorphous.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #3c3350;
  --bg-deep: #332b44;
  --panel: #f5ecda;
  --text: #f2ece0;
  --muted: #b6abc8;
  --accent: #d9ae61;
  --accent-strong: #f0c67e;
  --line: rgba(242, 236, 224, 0.14);
  --border-strong: rgba(242, 236, 224, 0.3);
  --card-text: #2b2130;
  --card-muted: #6b5f60;
  --card-accent: #a9741f;
  --card-line: rgba(43, 33, 48, 0.14);
  --success: #3f7d5c;
  --danger: #a4425a;
  --radius: 4px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(ellipse 900px 500px at 88% -8%, rgba(217, 174, 97, 0.14), transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 8%, rgba(242, 236, 224, 0.6), transparent),
    radial-gradient(1px 1px at 60% 5%, rgba(242, 236, 224, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 85% 15%, rgba(242, 236, 224, 0.5), transparent),
    radial-gradient(1px 1px at 25% 20%, rgba(242, 236, 224, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 45% 3%, rgba(242, 236, 224, 0.45), transparent),
    radial-gradient(1px 1px at 75% 32%, rgba(242, 236, 224, 0.35), transparent),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", serif;
  margin-top: 0;
}

p {
  line-height: 1.75;
}

.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

/* Card-like surfaces sit on a warm parchment tone, so the vars they and
   their descendants read need to flip to the dark-ink-on-light set. */
.hero-panel,
.feature-card,
.rules-card,
.game-shell,
.tutorial-banner {
  background: var(--panel);
  color: var(--card-text);
  border-radius: var(--radius);
  box-shadow: 0 20px 44px rgba(20, 14, 30, 0.3);
  --text: var(--card-text);
  --muted: var(--card-muted);
  --accent: var(--card-accent);
  --line: var(--card-line);
  --border-strong: rgba(43, 33, 48, 0.26);
}

/* Cards nested a level deeper (hand cards, faction boxes) read as pieces
   resting on that parchment: a faint recessed tint instead of invisible. */
.faction,
.card {
  background: rgba(43, 33, 48, 0.035);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(60, 51, 80, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Metamorphous", "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease;
}

/* Reuses favicon.svg's illustrated raven mark directly instead of the
   plain ✦ glyph this used to hold — one source of truth, so the header
   logo and the browser tab icon are always the same artwork. */
.brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.brand:hover {
  opacity: 0.82;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--muted);
}

.main-nav a {
  position: relative;
  padding-bottom: 5px;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s ease;
}

.main-nav a:hover {
  color: var(--accent);
}

.main-nav a:hover::after {
  right: 0;
}

.main-nav a.active {
  color: var(--accent);
}

.main-nav a.active::after {
  right: 0;
}

.nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 0.9rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* A press dip site-wide, not just in the game — the cheapest, most
   standard sign a tap actually registered, instead of nothing happening
   until whatever the button triggers finishes. */
.button:active {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
}

.button-small {
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
}

.button-primary {
  background: var(--accent);
  color: #241a0c;
}

.button-primary:hover:not(:disabled) {
  background: var(--accent-strong);
}

.button-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* Unavailable-right-now state (e.g. a building you can't afford yet, or
   already used this turn) — greyed out rather than left in full color, so
   it reads at a glance like a game (an option you can't currently take),
   not a form field that merely doesn't submit. */
.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(70%);
}

.button-block {
  width: 100%;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 64px;
}

/* Full-bleed mood photo behind the whole hero instead of a boxed side
   panel (D-164) — the source is landscape but still much narrower than
   the full-bleed section at desktop widths, so "cover" crops top/bottom;
   positioned toward the top to keep the seeress's face and the castle
   both in frame. A left-to-right dark wash keeps the copy legible against
   whatever's busy behind it. */
.hero-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(51, 43, 68, 0.96) 0%, rgba(51, 43, 68, 0.82) 38%, rgba(51, 43, 68, 0.4) 68%, rgba(51, 43, 68, 0.12) 100%),
    url("assets/hero-realm.jpg");
  background-size: cover, cover;
  background-position: center, center 22%;
  background-repeat: no-repeat, no-repeat;
}

/* Below ~480px, "cover" crops a window too narrow to show both the
   seeress and the castle — centered, it lands on plain cloak/rock with
   neither in frame. Shifting the photo layer leftward brings her face
   back into view (the castle is lost at this width either way, so her
   face is the one thing worth keeping framed). */
@media (max-width: 480px) {
  .hero-backdrop::before {
    background-position: center, 32% 22%;
  }
}

.hero-grid {
  position: relative;
  z-index: 1;
}

.hero-copy {
  max-width: 620px;
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.76rem;
  font-weight: 700;
}

.eyebrow::before {
  content: "✦ ";
}

.hero-copy h1 {
  font-weight: 700;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1.08;
  margin-bottom: 18px;
  max-width: 620px;
  text-shadow: 0 0 40px rgba(217, 174, 97, 0.2);
}

.lead {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
}

.text-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.meta-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  gap: 0;
}

.meta-list li {
  padding: 0 18px;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.meta-list li:first-child {
  padding-left: 0;
}

.meta-list li:last-child {
  border-right: none;
}

.hero-panel {
  overflow: hidden;
}

/* D-164: a small fanned row of real evolution-card thumbnails, reusing the
   same images the Evolution-cards section shows further down — the hero's
   one visible, concrete signal that this is a card game, not just mood art. */
.hero-card-strip {
  display: flex;
  margin-top: 28px;
}

.hero-card-strip img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  box-shadow: 0 10px 24px rgba(10, 6, 16, 0.45);
  margin-left: -16px;
}

.hero-card-strip img:first-child {
  margin-left: 0;
  transform: rotate(-6deg);
}

.hero-card-strip img:nth-child(2) {
  transform: rotate(-2deg);
}

.hero-card-strip img:nth-child(3) {
  transform: rotate(3deg);
}

.hero-card-strip img:nth-child(4) {
  transform: rotate(7deg);
}

.section {
  padding: 90px 0;
}

.alt-section {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-heading {
  margin-bottom: 28px;
}

/* Subtle scroll reveal (home page) — only takes effect once script.js (or
   an inline equivalent) confirms it can actually reveal these again and
   marks <html>; without that class every .reveal element is plain, fully
   visible content, so no-JS/old-browser visitors never hit a permanently
   blank section. prefers-reduced-motion is checked before the class is
   ever added, same reasoning. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* A small stagger across a row of cards reads as one gentle cascade
   instead of everything popping in at once. */
html.js-reveal .feature-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
html.js-reveal .feature-grid .reveal:nth-child(3) { transition-delay: 0.16s; }

.section-heading h2 {
  font-weight: 700;
  font-size: clamp(2rem, 2.8vw, 2.7rem);
  margin-bottom: 0;
}

.text-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  color: var(--muted);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* D-165: the three build-order strategies, directly under the hero —
   deliberately boxless like the hero itself (no cream .feature-card panel),
   so the section reads as a continuation of the hero rather than a new
   visual language. Each strategy gets its own small fanned card strip,
   reusing .hero-card-strip's look at a smaller size (3-across here instead
   of the hero's single row, so less horizontal room per strip). */
.strategy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.strategy-card h3 {
  margin-bottom: 8px;
}

.strategy-card p {
  color: var(--muted);
}

.strategy-card-strip {
  margin-top: 18px;
}

.strategy-card-strip img {
  width: 58px;
  height: 58px;
}

/* How-to-play's own layout (D-158): a compact vertical timeline instead of
   3 boxed cards — on a small screen, 3 full cream cards meant 3 near-full
   screens of scrolling through nearly-identical boxes. No card background
   here at all; each step is just an icon node on a connecting rail, with
   its text beside it, reading as an actual diagram of a turn's flow rather
   than 3 separate feature blurbs. Width-capped and centered rather than
   stretched edge-to-edge, since a thin vertical list looks better narrow
   even inside the wider section container. */
.howto-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.howto-step {
  display: flex;
  gap: 18px;
}

.howto-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.howto-node {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: rgba(217, 174, 97, 0.14);
  color: var(--accent);
}

.howto-node svg {
  width: 20px;
  height: 20px;
}

.howto-line {
  flex: 1;
  width: 1px;
  min-height: 24px;
  margin: 6px 0;
  background: var(--line);
}

.howto-step:last-child .howto-line {
  display: none;
}

.howto-step-body {
  flex: 1;
  padding-bottom: 28px;
}

.howto-step:last-child .howto-step-body {
  padding-bottom: 0;
}

.howto-step-num {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
}

.howto-step-body h3 {
  margin-bottom: 6px;
}

.howto-step-body p {
  color: var(--muted);
  margin-bottom: 0;
  max-width: 560px;
}

.howto-repeat {
  margin: 24px 0 0 62px;
  color: var(--muted);
  font-size: 0.95rem;
}

html.js-reveal .howto-timeline .reveal:nth-child(2) { transition-delay: 0.08s; }
html.js-reveal .howto-timeline .reveal:nth-child(3) { transition-delay: 0.16s; }

.feature-card {
  padding: 24px 20px;
}

.feature-icon {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 12px;
}

/* Bleeds past .feature-card's own padding (negative margin) to sit as a
   full-width banner instead of a small floating icon — this is real card
   art (D-131), not a decorative accent, so it reads as the card's own
   illustration rather than a label next to the real content below it. */
.feature-card-art {
  display: block;
  width: calc(100% + 40px);
  height: 240px;
  margin: -24px -20px 16px;
  border-radius: var(--radius) var(--radius) 0 0;
  object-fit: cover;
}

.card-num {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 14px;
}

.feature-card p {
  color: var(--muted);
  margin-bottom: 0;
}

.section-footnote {
  text-align: center;
  margin: 28px 0 0;
}

.rules-section {
  padding-top: 62px;
}

.rules-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 26px;
  align-items: center;
}

.rules-visual {
  display: grid;
  gap: 16px;
}

.rules-preview {
  aspect-ratio: 1640 / 800;
  overflow: hidden;
}

.rules-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rules-card {
  padding: 24px;
  display: grid;
  gap: 14px;
}

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 0 30px;
}

.footer-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--muted);
}

.rules-page {
  padding: 72px 0 90px;
}

/* Wider than the sitewide .container (1120px) — this page is illustrated
   reference material (long card grids), not marketing prose, so it can use
   more of the viewport than the homepage's narrower-feeling sections. */
.container-wide {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
}

.rules-shell {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.rules-nav {
  position: sticky;
  top: 96px;
  flex: 0 0 200px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.rules-nav a {
  color: var(--muted);
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
}

.rules-nav a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rules-main {
  flex: 1 1 auto;
  min-width: 0;
}

.rules-intro {
  margin-bottom: 50px;
}

.rules-intro h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  margin-bottom: 14px;
}

/* A thin top border per section (instead of the old single boxed page)
   gives the long reference page rhythm without needing full-bleed
   alternating backgrounds, which don't work alongside a sticky side nav. */
.rules-main section {
  padding: 44px 0;
  border-top: 1px solid var(--line);
}

.rules-main section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.rules-main ul,
.rules-main ol {
  padding-left: 1.2rem;
  color: var(--muted);
}

.rules-main li + li {
  margin-top: 0.5rem;
}

.rules-main p {
  color: var(--muted);
}

.rules-inline {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.rule-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
}

/* Buildings/Units/Evolution-cards reference grids, replacing the old HTML
   tables — auto-fill grows the column count with the page's own width
   instead of a hand-tuned breakpoint per card count. */
.rules-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.rules-ref-card h3 {
  margin-bottom: 8px;
}

.rules-ref-card p {
  margin-bottom: 0;
  font-size: 0.92rem;
}

.rules-ref-art {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 12px;
}

.game-shell {
  padding: 24px;
}

.duel-topbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.label {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.battlefield {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
}

.faction {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.faction-header {
  margin-bottom: 12px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.15rem;
  color: var(--accent);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.stat-row:last-child {
  border-bottom: none;
}

.center-vs {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.hand-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.player-hand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.card:hover {
  border-color: var(--accent);
}

.card-name {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  font-weight: 700;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--muted);
}

.card-note {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.battle-log-wrap {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.battle-log {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  line-height: 1.7;
}

.empty-state {
  color: var(--muted);
}

.nav-toggle {
  display: none;
}

.nav-toggle-btn {
  display: none;
}

@media (max-width: 820px) {
  .hero-grid,
  .rules-wrap,
  .text-grid,
  .feature-grid,
  .strategy-grid,
  .battlefield {
    grid-template-columns: 1fr;
    display: grid;
  }

  .hero {
    padding-top: 64px;
  }

  .duel-topbar,
  .hand-header,
  .footer-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .center-vs {
    margin: 0 auto;
  }

  .nav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 12px;
    min-height: 0;
    padding: 14px 0;
  }

  /* Mobile header stays brand + menu toggle only — the CTAs are already in
     the hero immediately below, so a second copy of the same buttons here
     just competes with the hamburger for a very small bar. */
  .nav-wrap > .nav-ctas {
    display: none;
  }

  .nav-toggle-btn {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .main-nav {
    order: 4;
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .nav-toggle:checked ~ .main-nav {
    display: flex;
  }

  .main-nav a {
    padding: 0.5rem 0;
    width: 100%;
  }

  .rules-shell {
    flex-direction: column;
    gap: 20px;
  }

  .rules-nav {
    position: static;
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 4px;
  }

  .rules-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}