/* ─────────────────────────────────────────────────────────────
   AUGURIA · Cifras del día
   A vintage astrology / celestial almanac aesthetic
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Palette ── deep night, antique gold, parchment ── */
  --ink-deep:    #06081f;
  --ink:         #0a0d2a;
  --ink-soft:    #131846;
  --ink-purple:  #1c1750;
  --vellum:      #f0e3c0;
  --vellum-soft: #e8d8a8;
  --gold:        #d4a857;
  --gold-bright: #ecc879;
  --gold-soft:   #b08740;
  --rose:        #c97e7e;
  --rose-deep:   #8a4747;
  --celeste:     #8aa9d8;

  /* ── Type ── */
  --font-display: "Italiana", "Cormorant Garamond", serif;
  --font-serif:   "Cinzel", "Cormorant Garamond", serif;
  --font-body:    "Cormorant Garamond", "Iowan Old Style", "Palatino", serif;

  /* ── Rhythm ── */
  --max:  720px;
  --pad:  clamp(1.25rem, 4vw, 2.5rem);

  /* iOS safe-area insets — gracefully fall back to 0 on other devices */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  color-scheme: dark;
}

/* respect the notch/Dynamic Island and the home indicator */
body {
  padding-top:    var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left:   var(--safe-left);
  padding-right:  var(--safe-right);
}

/* ── reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  line-height: 1.55;
  color: var(--vellum);
  background:
    /* the static ambient glow is now subtler so the animated nebulae read */
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(42,29,110,0.55) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 110%, rgba(74,29,82,0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 80%, rgba(14,42,85,0.45) 0%, transparent 55%),
    linear-gradient(180deg, #050618 0%, var(--ink) 30%, var(--ink-deep) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

::selection { background: var(--gold); color: var(--ink); }

/* ── Cosmos background layer ──────────────────────────────── */
.cosmos {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cosmos__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,168,87,0.05), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201,126,126,0.05), transparent 40%);
  overflow: hidden;
}

/* Two slow-drifting nebulae — large, soft, almost-invisible blobs
   that lend the night sky a quiet weather. */
.cosmos__veil::before,
.cosmos__veil::after {
  content: "";
  position: absolute;
  width: 90vmax; height: 90vmax;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform;
  pointer-events: none;
}
.cosmos__veil::before {
  top: -30vmax; left: -25vmax;
  background: radial-gradient(circle at 50% 50%, rgba(140,95,220,0.32), transparent 60%);
  animation: nebulaA 60s ease-in-out infinite alternate;
}
.cosmos__veil::after {
  bottom: -35vmax; right: -30vmax;
  background: radial-gradient(circle at 50% 50%, rgba(220,170,90,0.22), transparent 60%);
  animation: nebulaB 80s ease-in-out infinite alternate;
}
@keyframes nebulaA {
  0%   { transform: translate(0, 0)         scale(1); }
  100% { transform: translate(16vw, 12vh)   scale(1.15); }
}
@keyframes nebulaB {
  0%   { transform: translate(0, 0)         scale(1.08); }
  100% { transform: translate(-14vw, -10vh) scale(0.92); }
}

/* twin starfields — two layers w/ different sizes for parallax effect */
.cosmos__stars,
.cosmos__stars--soft {
  position: absolute; inset: -10%;
  background-image:
    radial-gradient(1px 1px at 12% 18%,   #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 24% 62%,   #f4e7c2 99%, transparent),
    radial-gradient(1.4px 1.4px at 38% 30%, #ecc879 99%, transparent),
    radial-gradient(1px 1px at 47% 85%,   #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 55% 12%,   #f4e7c2 99%, transparent),
    radial-gradient(1.2px 1.2px at 62% 48%, #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 71% 72%,   #c9a5e8 99%, transparent),
    radial-gradient(1.4px 1.4px at 84% 22%, #ecc879 99%, transparent),
    radial-gradient(1px 1px at 92% 58%,   #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 7% 78%,    #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 33% 8%,    #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 79% 91%,   #f4e7c2 99%, transparent),
    radial-gradient(1px 1px at 16% 44%,   #c9a5e8 99%, transparent),
    radial-gradient(1px 1px at 88% 38%,   #f4e7c2 99%, transparent),
    radial-gradient(1.2px 1.2px at 50% 56%, #f4e7c2 99%, transparent);
  background-size: 100% 100%;
  opacity: 0.7;
  animation:
    drift 240s linear infinite,
    twinkle 7s ease-in-out infinite alternate;
}
.cosmos__stars--soft {
  background-image:
    radial-gradient(0.6px 0.6px at 8% 24%,  #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 19% 41%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 28% 75%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 41% 19%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 53% 64%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 66% 33%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 74% 81%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 89% 14%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 95% 71%, #f4e7c2 99%, transparent),
    radial-gradient(0.6px 0.6px at 3% 88%,  #f4e7c2 99%, transparent);
  opacity: 0.5;
  animation: drift 380s linear infinite reverse, twinkle 4s ease-in-out infinite alternate;
}
@keyframes drift   { to { transform: translate3d(-2%, -1%, 0); } }
@keyframes twinkle { 0% { opacity: 0.55; } 100% { opacity: 0.85; } }

/* faint zodiac wheel — turns once every ~10 minutes,
   breathes in opacity even more slowly */
.cosmos__wheel {
  position: absolute;
  top: clamp(9rem, 17vw, 13rem); left: 50%;
  width: min(140vmin, 1100px);
  aspect-ratio: 1;
  color: var(--gold);
  transform-origin: center;
  animation:
    wheelTurn  240s linear        infinite,
    wheelGlow   12s ease-in-out   infinite alternate;
  will-change: transform, opacity;
}
@keyframes wheelTurn {
  from { transform: translate(-50%, -50%) rotate(-12deg); }
  to   { transform: translate(-50%, -50%) rotate(348deg); }
}
@keyframes wheelGlow {
  0%   { opacity: 0.45; }
  100% { opacity: 0.85; }
}

/* paper grain */
.cosmos__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.88   0 0 0 0 0.7   0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.35;
}

/* lift the actual page above the cosmos */
.masthead, main, .colophon { position: relative; z-index: 1; }

/* ── Masthead ─────────────────────────────────────────────── */
.masthead {
  max-width: var(--max);
  /* extra top margin so the masthead clears the notch comfortably */
  margin: clamp(1.5rem, 5vw, 3.5rem) auto clamp(2rem, 5vw, 3.5rem);
  padding: 0 var(--pad);
  text-align: center;
  color: var(--vellum);
}
.masthead__ornament {
  display: flex; justify-content: center;
  color: var(--gold);
  margin-bottom: 1.5rem;
  opacity: 0.85;
}
.masthead__ornament svg { width: 200px; height: 40px; }

.masthead__eyebrow {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.75rem;
  font-weight: 500;
}
.masthead__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 13vw, 8rem);
  line-height: 0.95;
  margin: 0;
  color: var(--vellum);
  text-shadow: 0 0 30px rgba(212,168,87,0.25), 0 0 60px rgba(212,168,87,0.12);
  letter-spacing: 0.01em;
}
.masthead__subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--vellum-soft);
  margin: 0.4rem 0 1.75rem;
  font-weight: 400;
  opacity: 0.85;
}
.masthead__date {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(212,168,87,0.4);
  position: relative;
  margin: 0;
}
.masthead__date::before,
.masthead__date::after {
  content: ""; position: absolute; top: 50%;
  width: 8px; height: 8px;
  border: 1px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
  background: var(--ink);
}
.masthead__date::before { left: -5px; }
.masthead__date::after  { right: -5px; }

/* ── Games column ─────────────────────────────────────────── */
.games {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(3rem, 8vw, 5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3rem);
}

/* ── Card ─────────────────────────────────────────────────── */
.card {
  position: relative;
  padding: clamp(2rem, 4vw, 2.75rem) clamp(0.9rem, 3vw, 2.5rem);
  /* lighter alpha + backdrop blur lets the drifting nebulae and the
     turning zodiac wheel breathe through the card glass. */
  background:
    radial-gradient(ellipse at top, rgba(212,168,87,0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(28,23,80,0.36) 0%, rgba(10,13,42,0.48) 100%);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(212,168,87,0.28);
  box-shadow:
    0 1px 0 rgba(212,168,87,0.1) inset,
    0 30px 60px -30px rgba(0,0,0,0.7),
    0 0 0 1px rgba(212,168,87,0.08);
  isolation: isolate;
  opacity: 0;
  transform: translateY(20px);
  animation: cardIn 0.9s cubic-bezier(.2,.7,.2,1) forwards;
}
.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.15s; }
.card:nth-child(3) { animation-delay: 0.25s; }
.card:nth-child(4) { animation-delay: 0.35s; }
.card:nth-child(5) { animation-delay: 0.45s; }
@keyframes cardIn { to { opacity: 1; transform: none; } }

/* ornate corner brackets, vintage book plate */
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  opacity: 0.55;
  pointer-events: none;
}
.card::before {
  top: 10px; left: 10px;
  border-right: 0; border-bottom: 0;
}
.card::after {
  bottom: 10px; right: 10px;
  border-left: 0; border-top: 0;
}

/* sigil ornament floating at top of card */
.card__sigil {
  position: absolute;
  top: -22px; left: 50%;
  width: 56px; height: 56px;
  transform: translateX(-50%);
  background: var(--ink);
  border: 1px solid rgba(212,168,87,0.5);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold);
  box-shadow:
    0 0 0 6px var(--ink),
    0 0 0 7px rgba(212,168,87,0.18),
    0 10px 24px -8px rgba(0,0,0,0.7);
}
.card__sigil svg { width: 28px; height: 28px; }

.card__head {
  text-align: center;
  margin: 0.5rem 0 1.75rem;
}
.card__eyebrow {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  margin: 0 0 0.4rem;
  font-weight: 500;
}
.card__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.5vw, 2.75rem);
  line-height: 1;
  margin: 0 0 0.4rem;
  color: var(--vellum);
}
.card__tag {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--vellum-soft);
  font-size: 0.95rem;
  opacity: 0.7;
  margin: 0;
}

/* ── Number grid ──────────────────────────────────────────── */
.numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  row-gap: clamp(1rem, 2.5vw, 1.4rem);
  column-gap: clamp(0.4rem, 1.5vw, 0.85rem);
  margin: 0 auto;
  list-style: none; padding: 0;
}

/* each cell stacks the medallion above its short name */
.num-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* in a flex container, items default to min-width: auto (= min-content),
     which would let the longest label word ("Arquitecto", "Confidente"…)
     blow up the cell. Pinning min-width to 0 lets the explicit width win. */
  min-width: 0;
  width: clamp(54px, 13.5vw, 78px);
}

/* 6-number combos lay out as a 3×2 grid on phones: balanced and
   tap-friendly. 5-number combos and the special groups (1–2 numbers)
   keep the centered flex row above. */
.numbers--six {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(0.25rem, 1vw, 0.6rem);
  row-gap: clamp(1rem, 2.5vw, 1.4rem);
  width: 100%;
}
.numbers--six .num-cell { width: 100%; min-width: 0; }

@media (min-width: 560px) {
  /* with more room, 6 fits comfortably in a single centered row */
  .numbers--six { display: flex; }
}

.num-name {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(0.7rem, 0.65rem + 0.25vw, 0.82rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--vellum-soft);
  opacity: 0.78;
  text-align: center;
  text-wrap: balance;
}

.num {
  --size: clamp(46px, 11vw, 62px);
  position: relative;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(var(--size) * 0.42);
  color: var(--vellum);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,240,200,0.16), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(212,168,87,0.18), transparent 55%),
    linear-gradient(160deg, #16194a 0%, #0d0f33 100%);
  border-radius: 50%;
  border: 1px solid rgba(212,168,87,0.45);
  box-shadow:
    0 0 0 1px rgba(212,168,87,0.1) inset,
    0 8px 16px -6px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
  font-variant-numeric: lining-nums tabular-nums;
}
.num::before {
  /* inner gold ring */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 0.5px solid rgba(212,168,87,0.35);
  pointer-events: none;
}
.num:hover, .num:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  box-shadow:
    0 0 0 1px rgba(236,200,121,0.3) inset,
    0 0 24px -2px rgba(236,200,121,0.45),
    0 12px 24px -6px rgba(0,0,0,0.7);
  outline: 0;
}

/* "special" numbers: reintegro, estrella, dream, complementario, clave */
.num--special {
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,245,210,0.5), transparent 55%),
    linear-gradient(160deg, var(--gold-bright) 0%, var(--gold-soft) 100%);
  border-color: var(--gold);
}
.num--special::before { border-color: rgba(10,13,42,0.35); }
.num--special:hover, .num--special:focus-visible {
  box-shadow:
    0 0 28px -2px rgba(236,200,121,0.6),
    0 14px 28px -8px rgba(0,0,0,0.8);
}

.num--star {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,245,210,0.4), transparent 55%),
    linear-gradient(160deg, #f4e7c2 0%, #d4a857 100%);
  color: var(--ink);
}

/* divider between groups inside a card */
.card__divider {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0 1rem;
  color: var(--gold);
  opacity: 0.7;
}
.card__divider::before,
.card__divider::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(to var(--dir,right), transparent, currentColor 40%, currentColor 60%, transparent);
}
.card__divider::after { --dir: left; }
.card__divider span {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

/* hint at bottom */
.card__hint {
  margin: 1.5rem 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--vellum-soft);
  opacity: 0.55;
}

/* ── Footer ───────────────────────────────────────────────── */
.colophon {
  max-width: 560px;
  margin: 0 auto clamp(2rem, 6vw, 4rem);
  padding: 0 var(--pad);
  text-align: center;
  color: var(--vellum-soft);
}
.colophon__rule { color: var(--gold); display: flex; justify-content: center; margin-bottom: 1.25rem; opacity: 0.7; }
.colophon__rule svg { width: 220px; height: 24px; }
.colophon__note {
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 1rem;
  opacity: 0.75;
}
.colophon__fineprint {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin: 0;
  color: var(--gold);
  opacity: 0.6;
}

/* ─────────────────  NUMEROLOGY DIALOG  ───────────────── */
.numero {
  border: 1px solid rgba(212,168,87,0.5);
  background:
    radial-gradient(ellipse at top, rgba(212,168,87,0.1) 0%, transparent 60%),
    linear-gradient(180deg, #15184a 0%, #0a0d2a 100%);
  color: var(--vellum);
  width: min(440px, calc(100vw - 2rem));
  padding: 2.75rem 1.75rem 2.25rem;
  border-radius: 4px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(212,168,87,0.15),
    0 30px 80px -10px rgba(0,0,0,0.8),
    0 0 80px -10px rgba(212,168,87,0.2);
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.2,1);
}
.numero[open] { opacity: 1; transform: translate(-50%, -50%); }
.numero::backdrop {
  background: radial-gradient(circle at center, rgba(10,13,42,0.6), rgba(0,0,0,0.85));
  backdrop-filter: blur(4px);
}

/* corner brackets in the dialog too */
.numero::before, .numero::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
  opacity: 0.55;
}
.numero::before {
  top: 8px; left: 8px;
  border-right: 0; border-bottom: 0;
}
.numero::after {
  bottom: 8px; right: 8px;
  border-left: 0; border-top: 0;
}

.numero__close {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--gold);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.numero__close:hover { opacity: 1; transform: rotate(90deg); }
.numero__close svg { width: 14px; height: 14px; }

.numero__sigil {
  margin: 0 auto 1rem;
  width: 76px; height: 76px;
  border: 1px solid rgba(212,168,87,0.45);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 2rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,240,200,0.2), transparent 55%),
    linear-gradient(160deg, #16194a 0%, #0a0d2a 100%);
  position: relative;
}
.numero__sigil::before {
  content: ""; position: absolute; inset: 5px;
  border: 0.5px solid rgba(212,168,87,0.35);
  border-radius: 50%;
}
.numero__eyebrow {
  font-family: var(--font-serif);
  font-size: 0.65rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.4rem;
  opacity: 0.85;
}
.numero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.85rem, 1.4rem + 1.5vw, 2.5rem);
  margin: 0 0 0.35rem;
  line-height: 1;
}
.numero__reduction {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vellum-soft);
  opacity: 0.85;
  margin: 0 0 1rem;
}
.numero__reduction-num {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.45em;
  margin: 0 0.1em;
  font-family: var(--font-display);
  font-size: 1.15em;
  letter-spacing: 0;
  color: var(--gold);
  border: 1px solid rgba(212, 168, 87, 0.55);
  border-radius: 999px;
  vertical-align: -0.35em;
  background: rgba(212, 168, 87, 0.06);
}
.numero__keywords {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--gold-bright);
  font-size: 1.05rem;
  margin: 0 0 0.85rem;
}
.numero__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--vellum-soft);
  margin: 0;
  text-wrap: balance;
}

/* ── Motion / accessibility prefs ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card { opacity: 1; transform: none; }
}

/* ── tablet/desktop refinements ───────────────────────────── */
@media (min-width: 720px) {
  .num { --size: 64px; }
}