/* Pigeon Studios site v3: the "hype shot" language (the Packs art) across the whole site, with a pigeon
   theme. Loaded LAST on every page, after the page's own CSS.
   - Foil = light on objects only (packs, cards) and the rank colours in packs. The logo is always black and white, never tinted.
   - Real objects as hero art: tilted towards you, a foil shine sweep, rays + a coloured spotlight behind, a floor shadow.
   - Feathers drift slowly in the hero backgrounds (assets/hx.js). Racing-pigeon leg rings number the steps.
   Every number shown is still the real one; motion is off with prefers-reduced-motion. */
:root {
  --hx-base: linear-gradient(135deg, #17191e 0%, #0e0f12 100%);
  --feather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120'%3E%3Cpath d='M15 0c7 12 12 30 11 52-1 16-5 30-10 42l-.6 26h-.8L14 94C9 84 4 70 3 54 2 34 7 14 15 0z' opacity='.55'/%3E%3Cpath d='M14.6 6h.8l.4 112h-1.6z'/%3E%3Cpath fill='%23fff' d='M15 40l11-9v2L15 43zM15 62l10-6v2l-10 7zM15 30L4 22v2l11 9zM15 70L4 64v2l11 7z' opacity='0'/%3E%3C/svg%3E");
  --mark: url(/assets/brand/pigeon-mark.png);
}

/* ---------- shared pieces ---------- */
/* drifting feathers (hx.js puts .hx-feathers into any [data-feathers]) */
[data-feathers] { position: relative; isolation: isolate; }
.hx-feathers { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
@media (min-width: 901px) { .hero > .hx-feathers { -webkit-mask: linear-gradient(90deg, transparent 0 46%, #000 60%); mask: linear-gradient(90deg, transparent 0 46%, #000 60%); } }
.hx-feathers i { position: absolute; left: var(--x); top: var(--y); width: calc(18px * var(--s)); height: calc(72px * var(--s));
  background: #cfe3ee; opacity: 0.12; -webkit-mask: var(--feather) center / contain no-repeat; mask: var(--feather) center / contain no-repeat;
  transform: rotate(var(--r)); animation: hx-drift var(--t) ease-in-out var(--d) infinite; }
@keyframes hx-drift {
  0% { transform: translate(0, 0) rotate(var(--r)); }
  25% { transform: translate(14px, 18px) rotate(calc(var(--r) + 18deg)); }
  50% { transform: translate(-6px, 34px) rotate(calc(var(--r) - 8deg)); }
  75% { transform: translate(-16px, 14px) rotate(calc(var(--r) + 12deg)); }
  100% { transform: translate(0, 0) rotate(var(--r)); }
}

/* pointer tilt + glare (hx.js sets --rx/--ry/--gx/--gy on [data-tilt]) */
[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
[data-tilt].hx-on { transition: transform 0.08s linear; }
.hx-glare { position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.22), transparent 45%);
  mix-blend-mode: screen; }
.hx-on .hx-glare, [data-tilt]:hover .hx-glare { opacity: 1; }

/* the foil shine that sweeps across hero objects every few seconds */
.hx-shine { position: absolute; inset: 0; z-index: 2; overflow: hidden; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; }
.hx-shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.0) 20%, rgba(190, 240, 230, 0.22) 44%, rgba(255, 255, 255, 0.34) 50%, rgba(200, 180, 255, 0.2) 56%, transparent 80%);
  transform: translateX(-160%) skewX(-8deg); animation: hx-shine 6s ease-in-out 1.2s infinite; }
@keyframes hx-shine { 0%, 60% { transform: translateX(-160%) skewX(-8deg); } 88%, 100% { transform: translateX(330%) skewX(-8deg); } }

/* rays + spotlight behind a hero object: put .hx-rays inside a positioned stage, set --hx-c for the colour */
.hx-rays { position: absolute; left: 50%; top: 50%; z-index: -1; width: 760px; height: 760px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--hx-c, #4fd1b0) 22%, transparent) 0, transparent 46%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hx-c, #4fd1b0) 9%, transparent) 0 4deg, transparent 4deg 13deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%);
  animation: hx-turn 90s linear infinite; }
@keyframes hx-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hx-floor { position: absolute; left: 50%; bottom: 0; z-index: -1; width: 70%; height: 40px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, 0.75); filter: blur(24px); pointer-events: none; }

/* ---------- global surfaces ---------- */
.section, .intro-band, .numbers { position: relative; }
.section.alt { background: var(--bg-alt); }

.sec-head h2 { font-size: clamp(2rem, 3.6vw, 2.75rem); font-weight: 800; letter-spacing: -0.035em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.sec-head > .eyebrow::before, .intro-copy > .eyebrow::before { content: ""; width: 16px; height: 16px; background: #fff; /* the logo is black and white: never tint it */ -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* primary buttons: a soft glow, nothing more */
.btn-primary { box-shadow: 0 8px 22px -12px rgba(79, 209, 176, 0.55); }
.btn-primary:hover, a:hover > .btn-primary { box-shadow: 0 10px 26px -10px rgba(79, 209, 176, 0.7); }

/* panels: flat surface, a lit top edge, a deep shadow */
.submit-card, .contact-panel, .rr-group, .xl-card {
  position: relative; border-color: var(--line-strong) !important;
  background: var(--surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 60px -40px rgba(0, 0, 0, 0.9); }
.rr-group { padding: 22px 22px 8px; border: 1px solid; border-radius: var(--radius); }

/* racing-pigeon leg rings for numbered steps */
.rr-steps li::before { border: 2px solid rgba(79, 209, 176, 0.55) !important; background: #15171c; color: var(--text); font-weight: 700; }

/* ---------- home: featured game hero ---------- */
/* The stage: the featured cover forward as a tilted trading card, the upcoming covers fanned behind it.
   Light is on the stage and the card only (a neutral spotlight, slow rays, a foil sweep, a teal-violet rim);
   the page itself stays dark and flat. Sizes all come from --cw (the main card's width; never above its 408px art). */
.hero { background: var(--hx-base); }
.hero .wrap { position: relative; z-index: 1; }
.specs { border-color: var(--line-strong); background: rgba(24, 26, 32, 0.8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

.hs-stage { --cw: 400px; --top: 30px; --sk: 0.75; --sx: 0.42; --sr: 10deg; --ch: calc(var(--cw) * 1.338);
  position: relative; isolation: isolate; height: calc(var(--ch) + var(--top) + 64px); }
/* spotlight: a soft white pool behind the card, plus a faint cone from above */
.hs-spot { position: absolute; left: 50%; top: calc(var(--top) + var(--ch) * 0.48); z-index: -2; width: calc(var(--cw) * 2.5); height: calc(var(--cw) * 2.2); transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(235, 240, 248, 0.13), rgba(235, 240, 248, 0.05) 48%, transparent 100%); }
.hs-spot::before { content: ""; position: absolute; left: 50%; top: -30%; width: 70%; height: 100%; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(235, 240, 248, 0.07), rgba(235, 240, 248, 0.02) 70%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.hs-stage .hx-rays { top: calc(var(--top) + var(--ch) * 0.46); z-index: -1; width: calc(var(--cw) * 2.6); height: calc(var(--cw) * 2.6);
  background: repeating-conic-gradient(from 0deg, rgba(235, 240, 248, 0.07) 0 3deg, transparent 3deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 16%, transparent 64%); mask: radial-gradient(circle, #000 0 16%, transparent 64%);
  animation-duration: 60s; }

/* the featured card: floats, leans towards the pointer (hx.js) on top of its resting tilt */
.hs-float { position: absolute; left: 50%; top: var(--top); z-index: 3; width: var(--cw); margin-left: calc(var(--cw) / -2); animation: hs-float 6s ease-in-out infinite; }
@keyframes hs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-art .hs-main, .hero-art .hs-main.hx-on { position: relative; border-radius: 18px; transform-style: preserve-3d; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: perspective(1400px) rotateY(calc(-12deg + var(--ry, 0deg))) rotateX(calc(4deg + var(--rx, 0deg))) rotate(-2.5deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 50px 70px -30px rgba(0, 0, 0, 0.95), 0 18px 30px -18px rgba(0, 0, 0, 0.8); }
.hero-art .hero-cover { display: block; width: 100%; height: auto; aspect-ratio: 408 / 546; border-radius: 18px; }
/* pigeon-neck rim light: a thin teal-violet edge whose angle follows the tilt */
.hs-rim { position: absolute; inset: 0; z-index: 3; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0.8;
  background: conic-gradient(from calc(210deg + var(--ry, 0deg) * 12), #4fd1b0, #9d8cff 18%, rgba(255, 255, 255, 0.85) 26%, #4fd1b0 34%, rgba(79, 209, 176, 0.15) 48%, #9d8cff 66%, rgba(157, 140, 255, 0.15) 82%, #4fd1b0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* the foil sweep: a 1.2 s pass every 5 s */
.hs-main .hx-shine::before { width: 46%;
  background: linear-gradient(105deg, transparent 0%, rgba(120, 230, 205, 0.16) 32%, rgba(255, 255, 255, 0.42) 50%, rgba(170, 150, 255, 0.18) 66%, transparent 100%);
  animation: hs-shine 5s ease-in-out 1.6s infinite; }
@keyframes hs-shine { 0%, 76% { transform: translateX(-170%) skewX(-10deg); } 100% { transform: translateX(330%) skewX(-10deg); } }
@keyframes hs-shine-once { from { transform: translateX(-170%) skewX(-10deg); } to { transform: translateX(330%) skewX(-10deg); } }
/* the pigeon set mark, stamped in the corner like a trading card's set symbol (always plain white) */
.hs-mark { position: absolute; left: 12px; bottom: 12px; z-index: 4; width: 34px; height: 34px; border-radius: 50%; background: rgba(9, 10, 13, 0.86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 4px 10px rgba(0, 0, 0, 0.4); }
.hs-mark::before { content: ""; position: absolute; inset: 6px; background: #fff; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

/* the upcoming games behind it */
.hs-side { position: absolute; left: 50%; top: calc(var(--top) + var(--ch) * 0.12); z-index: 1; width: calc(var(--cw) * var(--sk)); margin: 0 0 0 calc(var(--cw) * var(--sk) / -2); padding: 0;
  border: 0; border-radius: 14px; background: none; cursor: pointer; transform-origin: 50% 100%;
  --x: calc(var(--cw) * var(--sx) * var(--d)); --r: calc(var(--sr) * var(--d));
  transform: translateX(var(--x)) rotate(var(--r)); filter: brightness(0.72) saturate(0.85);
  transition: transform 0.55s cubic-bezier(.2, .8, .2, 1), filter 0.4s; }
.hs-l { --d: -1; }
.hs-r { --d: 1; }
.hs-side img { display: block; width: 100%; height: auto; aspect-ratio: 408 / 546; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 34px 50px -24px rgba(0, 0, 0, 0.95); }
.hs-tag { position: absolute; top: 12px; padding: 5px 8px 4px; border-radius: 6px; background: rgba(9, 10, 13, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--accent); font: 600 0.75rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.hs-l .hs-tag { left: 12px; }
.hs-r .hs-tag { right: 12px; }
.hs-side:focus-visible { outline-offset: 4px; border-radius: 14px; }
/* fan-out: hover / keyboard focus (mouse), or a tap on the card (touch, one shot) */
.hs-stage:hover .hs-side, .hs-stage:focus-within .hs-side, .hs-tap .hs-side { --x: calc(var(--cw) * (var(--sx) + 0.1) * var(--d)); --r: calc((var(--sr) + 6deg) * var(--d)); filter: brightness(0.9) saturate(0.95); }
.hs-side:hover, .hs-side:focus-visible { filter: brightness(1) !important; }
@media (hover: hover) { .hs-stage:hover .hs-main .hx-shine::before { animation: hs-shine-once 1.2s ease-in-out; } }
.hs-tap .hs-main .hx-shine::before { animation: hs-shine-once 1.2s ease-in-out; }

/* floor shadow: shrinks and fades as the card floats up */
.hs-floor { position: absolute; left: 50%; top: calc(var(--top) + var(--ch) + 14px); z-index: 0; width: calc(var(--cw) * 1.25); height: calc(var(--cw) * 0.12); transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 55%, transparent); animation: hs-floor 6s ease-in-out infinite; }
@keyframes hs-floor { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(0.88); opacity: 0.72; } }

/* deal-in, once per visit (app.js adds .hs-deal): Zeus, then Order!, then the featured card. `translate` stacks on top of the transforms */
.hs-deal .hs-side { animation: hs-deal 0.5s cubic-bezier(.2, .8, .2, 1) both; }
.hs-deal .hs-l { animation-delay: 0.12s; }
.hs-deal .hs-float { animation: hs-deal 0.5s cubic-bezier(.2, .8, .2, 1) 0.24s both, hs-float 6s ease-in-out 0.74s infinite; }
@keyframes hs-deal { from { translate: 0 70px; } to { translate: 0 0; } }

/* sizes: the main card is never drawn above its 408px source */
@media (max-width: 1279px) { .hs-stage { --cw: 330px; } }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; }
  .hero-art { order: -1; }
  .hs-stage { --cw: 260px; --top: 18px; }
  .hero-copy { max-width: 620px; }
}
@media (max-width: 599px) {
  .hero { padding: 14px 0 40px; }
  .hero-grid { gap: 14px; }
  .hs-stage { --cw: 168px; --top: 10px; --sk: 0.72; --sx: 0.44; --sr: 12deg; height: calc(var(--ch) + var(--top) + 30px); }
  .hs-main, .hero-art .hs-main.hx-on { border-radius: 11px; }
  .hero-art .hero-cover { border-radius: 11px; }
  .hs-side, .hs-side img { border-radius: 9px; }
  .hs-floor { top: calc(var(--top) + var(--ch) + 8px); }
  .hs-mark { left: 7px; bottom: 7px; width: 22px; height: 22px; }
  .hs-mark::before { inset: 4px; }
  .hs-tag { top: 6px; padding: 3px 5px 2px; border-radius: 4px; font-size: 0.5625rem; letter-spacing: 0.08em; }
  .hs-l .hs-tag { left: 6px; }
  .hs-r .hs-tag { right: 6px; }
  .hero-eyebrow { margin-bottom: 10px; font-size: 0.6875rem; }
  .hero h1 { margin-bottom: 10px; font-size: 3.5rem; }
  .hero .tagline { font-size: 0.9375rem; line-height: 1.5; }
  .hero .hero-stats { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: space-between; margin-top: 18px; }
  .hero .hero-stats div { display: block; padding: 10px 10px 11px 0; }
  .hero .hero-stats div + div { border-top: 0; border-left: 1px solid var(--line-strong); }
  .hero-stats div + div { padding-left: 12px; }
  .hero-stats dt { font-size: 0.6875rem; letter-spacing: 0.08em; }
  .hero-stats dd { height: 24px; margin-top: 4px; font-size: 1.0625rem; }
  .hero-stats .hs-max dd { font-size: 1.3125rem; }
  .hero-stats .vmeter-wrap { gap: 6px; }
  .hero-stats .vmeter { height: 14px; gap: 2px; }
  .hero-stats .vmeter i { width: 4px; }
  .hero-stats .vmeter i:nth-child(1) { height: 5px; }
  .hero-stats .vmeter i:nth-child(2) { height: 8px; }
  .hero-stats .vmeter i:nth-child(3) { height: 11px; }
  .hero-stats .vmeter i:nth-child(4) { height: 14px; }
  .hero-cta { margin-top: 18px; gap: 10px; }
  .hero-cta .btn { min-height: 52px; padding-inline: 14px; }
  .hero-cta .btn-primary { flex: 1.4 1 auto; }
  .hero-rg { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  /* a still composition: no float, rays, sweep or fan; the shine rests as a soft highlight across the card */
  .hs-main .hx-shine::before { transform: translateX(150%) skewX(-10deg); opacity: 0.55; }
  .hs-stage:hover .hs-side, .hs-stage:focus-within .hs-side { --x: calc(var(--cw) * var(--sx) * var(--d)); --r: calc(var(--sr) * var(--d)); }
}

/* ---------- home hero: chalk (the studio banner's language) ----------
   Pure black board, the banner's own dry-brush strokes, X marks and specks at the edges (screen-blended, so their
   black drops out), white hand-drawn marks and marker lettering. Monochrome: colour comes only from the covers. */
.hero { background: transparent; }
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 0; width: min(46vw, 640px); pointer-events: none; mix-blend-mode: screen; }
.hero::before { left: 0; background: url(/assets/brand/chalk-l.webp) left center / auto 100% no-repeat; opacity: 0.55;
  -webkit-mask: linear-gradient(90deg, #000 30%, transparent), linear-gradient(180deg, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #000 30%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.hero::after { right: 0; background: url(/assets/brand/chalk-r.webp) right center / auto 100% no-repeat; opacity: 0.9;
  -webkit-mask: linear-gradient(270deg, #000 40%, transparent), linear-gradient(180deg, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(270deg, #000 40%, transparent), linear-gradient(180deg, #000 70%, transparent); mask-composite: intersect; }
.hero h1 { margin-bottom: 14px; font: 400 clamp(4.25rem, 9vw, 8.5rem)/0.86 var(--hand); letter-spacing: 0; color: #fff; transform: rotate(-2deg); transform-origin: left bottom; }
.hero-eyebrow { color: var(--text-2); }
.hero-eyebrow .live-dot { background: #fff; animation-name: live-pulse-w; }
@keyframes live-pulse-w { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); } }
.hero .hero-stats { border-color: rgba(255, 255, 255, 0.16); }
.hero .hero-stats div + div { border-color: rgba(255, 255, 255, 0.16); }
.hero-stats .vmeter i.on { background: #fff !important; }
/* max win: white, circled in chalk */
.hero-stats .hs-max dd { position: relative; width: max-content; color: #fff; }
.chalk-ring, .chalk-arrow { position: absolute; overflow: visible; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chalk-ring { left: -0.75em; top: -0.42em; width: calc(100% + 1.4em); height: calc(100% + 0.8em); opacity: 0.9; transform: rotate(-3deg); }
/* the primary action is chalk white */
.hero-cta .btn-primary { background: #fff; color: #0a0a0c; box-shadow: 0 10px 30px -12px rgba(255, 255, 255, 0.35); }
.hero-cta .btn-primary:hover { background: #e9eaee; }
.hero-cta .btn-secondary { border-color: rgba(255, 255, 255, 0.35); background: transparent; }
/* stage: no rays or colour, just a soft neutral pool */
.hs-stage .hx-rays { display: none; }
.hs-spot { opacity: 0.8; }
.hs-spot::before { display: none; }
.hs-rim { display: none; }
.hs-main .hx-shine::before { background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.12) 32%, rgba(255, 255, 255, 0.42) 50%, rgba(255, 255, 255, 0.12) 68%, transparent 100%); }
.hero-art .hs-main, .hero-art .hs-main.hx-on { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 50px 70px -30px rgba(0, 0, 0, 0.95), 0 18px 30px -18px rgba(0, 0, 0, 0.8); }
.hs-tag { padding: 3px 9px 4px; border-radius: 4px; background: #fff; box-shadow: none; color: #0a0a0c; font: 400 1.125rem/1 var(--hand); letter-spacing: 0.02em; text-transform: none; transform: rotate(-4deg); }
.hs-r .hs-tag { transform: rotate(4deg); }
/* "out now!" note with its arrow, top left of the card */
.hs-note { position: absolute; z-index: 4; left: calc(50% - var(--cw) * 0.5 - 150px); top: calc(var(--top) + var(--ch) * 0.02); color: #fff; font: 400 2.125rem/1 var(--hand); transform: rotate(-8deg); pointer-events: none; }
.chalk-arrow { left: 70px; top: 32px; width: 92px; height: 62px; stroke-width: 2.6; }
@media (max-width: 1279px) { .hs-note { left: calc(50% - var(--cw) * 0.5 - 128px); font-size: 1.75rem; } }
@media (max-width: 1023px) {
  .hero::before { opacity: 0.4; }
  .hs-note { left: calc(50% - var(--cw) * 0.5 - 118px); }
}
@media (max-width: 599px) {
  .hero::before, .hero::after { width: 70vw; }
  .hero::before { opacity: 0.35; }
  .hero::after { opacity: 0.6; }
  .hero h1 { margin-bottom: 8px; font-size: 4.25rem; }
  .hs-tag { top: 6px; padding: 2px 6px 3px; font-size: 0.875rem; }
  .hs-note { left: 8px; top: auto; bottom: 8px; font-size: 1.375rem; transform: rotate(-10deg); }
  .chalk-arrow { left: 46px; top: -50px; width: 52px; height: 40px; transform: scaleY(-1); stroke-width: 2.2; }
}
@media (prefers-reduced-motion: reduce) { .hero h1 { transform: rotate(-2deg); } }

/* ---------- home: numbers ---------- */
.numbers { background: var(--bg); }

/* ---------- home: intro (see chalk.css: the facts board) ---------- */
.intro-band { background: transparent; }

/* ---------- home: game tiles as trading cards ---------- */
.tile { position: relative; border-color: var(--line-strong); }
.tile:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9), 0 0 50px -20px var(--c, #4fd1b0); }
.tile:hover { border-color: rgba(255, 255, 255, 0.22); }
.tile-face .hx-glare { border-radius: 0; }

/* ---------- home: extras cards ---------- */
.xl-art { border-bottom-color: var(--line-strong); background: #111317; isolation: isolate; }
.xl-art .hx-rays { width: 520px; height: 520px; }
.xl-c-packs .xl-art { --hx-c: #8fd8ff; }
.xl-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 60px -30px rgba(0, 0, 0, 0.95); }
/* the mini pack + card fan (the .xr-* pieces in styles.css, scaled down) */
.xl-art.xl-hx { height: 400px; align-items: center; }
.xl-hx .xr-stage { zoom: 0.68; }
.xl-card:hover .xl-hx .xr-card { transform: translate(calc(var(--x) * 1.08), calc(var(--y) - 24px)) rotate(calc(var(--r) * 1.1)); }
.xl-card:hover .xl-hx .xr-card.xr-top { animation: xr-holo 3.6s ease-in-out infinite; transform: translate(0, -32px); }
.xl-card:hover .xl-hx .xr-pack { transform: translateX(-50%) rotateY(-4deg) rotateX(2deg) rotate(-1deg); }
/* the Packs card spans the row: the pack beside the copy on wide screens, stacked on phones */
.xl-grid.xl-one { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .xl-one .xl-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; }
  .xl-one .xl-art.xl-hx { height: auto; min-height: 420px; border-bottom: 0; border-right: 1px solid var(--line-strong); }
  .xl-one .xl-hx .xr-stage { zoom: 0.8; }
  .xl-one .xl-body { justify-content: center; padding: 44px 48px; }
  .xl-one .xl-body h3 { font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.15; text-wrap: balance; }
  .xl-one .xl-btn { margin-top: 4px; }
}

/* ---------- packs page hero: the whole series on stage ---------- */
.hx-pk-wrap { position: relative; isolation: isolate; display: flex; justify-content: center; align-items: center; min-height: 520px; --hx-c: #8fd8ff; }
.hx-pk-wrap .hx-floor { bottom: 26px; width: 60%; }
.xr-stage.hx-pk { zoom: 1.12; }

.hx-pk .xr-pack { z-index: 3; }
.hx-pk-wrap:hover .xr-card { transform: translate(calc(var(--x) * 1.08), calc(var(--y) - 24px)) rotate(calc(var(--r) * 1.1)); }
.hx-pk-wrap:hover .xr-card.xr-top { animation: xr-holo 3.6s ease-in-out infinite; transform: translate(0, -32px); }
.hx-pk-wrap:hover .xr-pack { transform: translateX(-50%) rotateY(-4deg) rotateX(2deg) rotate(-1deg); }
.lb-hero { background: radial-gradient(760px 520px at 76% 46%, rgba(143, 216, 255, 0.10), transparent 70%), var(--hx-base); }
.ph-facts li, .lb-hero .xl-facts li { border-color: var(--line-strong); background: rgba(24, 26, 32, 0.85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---------- footer: the pigeon signs off ---------- */
.site-footer { position: relative; overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; right: -60px; bottom: -80px; z-index: -1; width: 360px; height: 360px; background: #fff; opacity: 0.04; transform: rotate(-8deg);
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }

@media (max-width: 900px) {
  .hx-pk-wrap { min-height: 0; padding-top: 8px; }
  .xr-stage.hx-pk { zoom: 0.8; }
}
@media (max-width: 760px) {
  .xr-stage.hx-pk { zoom: 0.72; }
  .hx-rays { width: 520px; height: 520px; }
  .hx-feathers i { opacity: 0.12; }
}
/* small phones: the two side packs stay inside the screen */
@media (max-width: 420px) {
  .xr-stage.hx-pk { zoom: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-feathers i, .hx-shine::before, .hx-rays { animation: none; }
  [data-tilt], .btn-primary::after { transition: none; }
}