/* ==========================================================================
   OQ Football landing — faithful replica of "Final Landing page - EN"
   Design canvas: 1440 x 4970. Scale system: 1rem = 100px at 1440w.
   Every dimension below is design-px / 100 in rem.
   ========================================================================== */

/* ---------- fonts ---------- */
/* Sofia Pro: self-hosted files (drop the .woff2 files into assets/fonts/) */
@font-face {
  font-family: "Sofia Pro";
  src: url("../assets/fonts/SofiaPro-Regular.woff2") format("woff2"),
       url("../assets/fonts/SofiaPro-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Pro";
  src: url("../assets/fonts/SofiaPro-Bold.woff2") format("woff2"),
       url("../assets/fonts/SofiaPro-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* PixelMplus12: the JP design's pixel face, used for the /jp headings.
   M+ FONTS PROJECT, free to use/copy/redistribute (see mplus_bitmap_fonts
   LICENSE). Shipped as .ttf — these are the full CJK files, so they are
   heavy; subsetting them to the glyphs the page uses is a pending win. */
@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PixelMplus12";
  src: url("../assets/fonts/PixelMplus12-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset / base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #060A14;
  --orange: #FF4400;
  --yellow: #FFD700;
  --hero-yellow: #F4DF21;
  --grey-bullet: #D9D4D4;
  --font-body: "Sofia Pro", "Segoe UI", -apple-system, sans-serif;
  --font-pixel: "Jersey 10", monospace;
  --font-table: "Inter", sans-serif;
}

html {
  /* 1rem = 100 design px (100px at 1440 viewport) */
  font-size: 6.9444444vw;
  scroll-behavior: smooth;
  scroll-padding-top: 1.3rem;
  /* hard stop for horizontal scroll — `hidden` fallback for browsers
     without `clip` support (e.g. iOS Safari < 16) */
  overflow-x: hidden;
  overflow-x: clip;
}
@media (min-width: 1440px) { html { font-size: 100px; } }

body {
  background: var(--bg);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.16rem;          /* sane inherited size — avoids 1rem line-box struts */
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; }
a { color: inherit; text-decoration: none; }

.page {
  position: relative;
  max-width: 14.4rem;
  margin: 0 auto;
  background: var(--bg);       /* backdrop the blended glows composite onto */
}

/* ---------- decorative page glows (exact SVG gradients inlined in HTML) ---- */
.glows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glows svg { position: absolute; }
.glow-1 { left: -4.66rem; top: 6.61rem;  width: 9.74rem;  height: 8.97rem;  opacity: .78; }
.glow-2 { left: 13.07rem; top: 18.28rem; width: 8.62rem;  height: 8.28rem;  opacity: .83; }
.glow-3 { left: -8.72rem; top: 21.82rem; width: 22.34rem; height: 20.57rem; opacity: .82; }
.glow-4 { left: 7.92rem;  top: 51.64rem; width: 8.61rem;  height: 7.00rem;  opacity: .2; }
.glow-5 { left: 7.75rem;  top: 26.86rem; width: 10.73rem; height: 7.04rem;  opacity: .39; mix-blend-mode: color; }

.nav { position: relative; z-index: 50; }

/* ==========================================================================
   NAV  — bar: x70 y30 1300x64 r20, #FF4400 29%, backdrop blur 10.55
   ========================================================================== */
.nav {
  position: fixed;
  top: 0.30rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 13rem;
  max-width: calc(100vw - 0.70rem);
  height: 0.64rem;
  border-radius: 0.20rem;
  background: rgba(255, 68, 0, 0.29);
  -webkit-backdrop-filter: blur(10.55px);
  backdrop-filter: blur(10.55px);
  z-index: 50;
  display: flex;
  align-items: center;
}
.nav__logo {
  position: absolute;
  left: 0.18rem;               /* x88 - bar x70 */
  top: 0.172646rem;            /* y47.2646 - 30 */
  width: 1.36rem;
  height: 0.294705rem;
}
.nav__logo img { width: 100%; height: 100%; }
.nav__links {
  position: absolute;
  inset: 0;
  font-size: 0.16rem;
  line-height: 1;
  white-space: nowrap;
  /* first link keeps the design's x473; the rest are evenly spaced from it */
  display: flex;
  align-items: center;
  padding-left: 4.03rem;
  gap: 0.527rem;
  /* the bar-wide box must not swallow clicks meant for the logo behind it */
  pointer-events: none;
}
.nav__links a {
  color: #fff;
  pointer-events: auto;
}
.nav__cta {
  position: absolute;
  left: 11.35rem;              /* x1205 - 70 */
  top: 0.12rem;                /* y42 - 30 */
  width: 1.47rem;
  height: 0.40rem;
  border-radius: 0.08rem;
  background: var(--orange);
  color: #F7F5F3;
  font-size: 0.16rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   HERO — rect x38 y118 1365x622 r24
   ========================================================================== */
.hero {
  position: relative;
  margin: 1.20rem 0.37rem 0 0.38rem;
  height: 6.22rem;
  border-radius: 0.24rem;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/hero-bg.png");
  background-size: cover;      /* art is 1365x622 — the hero box aspect exactly */
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: auto;
}
/* light scrim behind the copy — fades out before the art's warm glow */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.14) 42%, rgba(0, 0, 0, 0) 68%);
}
.hero__players {
  position: absolute;
  left: 6.44rem;               /* x682 - 38 */
  top: 2.10rem;                /* y328 - 118 */
  width: 7.75rem;
  height: 4.13rem;
  background-image: url("../assets/images/hero-players.png");
  background-size: 125.22% 101.617%;
  background-position: -1.3405rem 0;
  background-repeat: no-repeat;
  filter: blur(1px);
}
.hero__content { position: absolute; inset: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  background: #0F0F0F;
  border-radius: 0.13rem;
  border: 1px solid rgba(255, 68, 0, 0.41);
}
.hero__badge {
  position: absolute;
  left: 0.72rem;               /* x110 - 38 */
  top: 1.08rem;                /* y226 - 118 */
  width: 1.52rem;
  height: 0.26rem;
}
.hero__badge img { width: 0.14rem; height: 0.14rem; margin-left: 0.10rem; }
.hero__badge span {
  font-size: 0.14rem;
  line-height: 1;
  margin-left: 0.08rem;        /* text x142: 110+10+14+8 */
}

.hero__title {
  position: absolute;
  left: 0.706rem;              /* x110 - 38 (Jersey has ~4px left bearing) */
  top: 1.238rem;               /* baseline 363.089 - ascent(159*0.755) - 118 */
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 1.23rem;          /* updated Figma spec: 123px, #F4DF21, Jersey 10 400 */
  line-height: 1;
  letter-spacing: 0;
  color: var(--hero-yellow);
  white-space: nowrap;
}
.hero__sub {
  position: absolute;
  left: 0.71rem;
  top: 2.33rem;                /* keeps the original baseline gap now the title is 123px */
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 0.45rem;
  line-height: 1;
  letter-spacing: -0.01rem;
  color: #fff;
  white-space: nowrap;
}
.hero__bullets {
  position: absolute;
  left: 0.72rem;
  top: 3.008rem;               /* first icon y445.812 - 118, shifted up with the 123px title */
}
.hero__bullets li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  margin-bottom: 0.18rem;      /* icons 34px apart, icon 16 */
  height: 0.16rem;
}
.hero__bullets img { width: 0.16rem; height: 0.16rem; }
.hero__bullets span {
  font-size: 0.18rem;
  line-height: 0.16rem;
  margin-left: 0.09rem;        /* text x135: 110+16+9 */
  color: var(--grey-bullet);
  letter-spacing: 0;
  transform: translateY(0.017rem);  /* baseline 458.5 vs icon box  */
}

.btn {
  display: flex;
  align-items: center;
  background: var(--orange);
  border-radius: 0.08rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.26rem;
  letter-spacing: 0;
  white-space: nowrap;
}
/* countdown pill — 279x42 r21, #FF4400 23% inside a #FF4400 38% hairline.
   Width is content-driven: the label words differ per language and the digits
   drop from 2 to 1 as the deadline nears. */
.hero__timer {
  position: absolute;
  left: 0.72rem;               /* x110 - 38 */
  top: 4.05rem;
  height: 0.42rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.19rem 0 0.13rem;
  border-radius: 0.21rem;
  background: rgba(255, 68, 0, 0.23);
  border: 1px solid rgba(255, 68, 0, 0.38);
}
.hero__timer-icon { width: 0.22rem; height: 0.22rem; flex: none; }
.hero__timer-unit {
  display: inline-flex;
  align-items: baseline;
  margin-left: 0.11rem;
  white-space: nowrap;
}
.hero__timer-num {
  font-size: 0.18rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.hero__timer-label {
  font-size: 0.13rem;
  font-weight: 400;
  line-height: 1;
  color: var(--hero-yellow);   /* the hero title's yellow */
  margin-left: 0.05rem;
}

.hero__btn {
  position: absolute;
  left: 0.72rem;               /* x110 - 38 */
  top: 4.69rem;                /* y562 - 118, then down 0.52 for the timer pill */
  width: 1.58rem;
  height: 0.52rem;
  padding-left: 0.24rem;       /* label x134 */
}
.hero__terms {
  position: absolute;
  left: 0.76431rem;            /* x114.431 - 38 */
  top: 5.435rem;               /* baseline 641.5 ≈, then down 0.52 with the button */
  font-size: 0.14rem;
  line-height: 1;
  letter-spacing: 0.002rem;
  color: #fff;
}
.hero__terms a { font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   Section shell helpers
   ========================================================================== */
.section-badge {
  display: flex;
  align-items: center;
  background: #0F0F0F;
  border: 1px solid rgba(255, 68, 0, 0.15);
  border-radius: 0.13rem;
  width: max-content;
  font-size: 0.14rem;
}
.section-badge img { margin-right: 0.085rem; }

.h2 {
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--yellow);
}

/* ==========================================================================
   FEATURES — badge y811, title baseline 901.79, cards y939.7 h372.2
   ========================================================================== */
.features { text-align: center; }
.features__badge {
  margin: 0.98rem auto 0;      /* 840 - 742 */
  height: 0.22rem;
  border-radius: 0.11rem;
  padding: 0 0.12rem 0 0.10rem;
}
.features__badge img { width: 0.14rem; height: 0.14rem; }
.features__title { margin-top: 0.146rem; } /* title top ≈ 901.79-72*.755=847.4 ; 847.4-833=14.4 → visual pass */
.features__cards {
  position: relative;
  height: 3.7219rem;
  margin-top: 0.203rem;        /* frames y939.695 - title bottom (919.4) */
  text-align: left;
}
.feature-card { position: absolute; top: 0; }
/* frame boxes from source: c1 (70.57,939.70) 406x372.19 · c2 (508.645,939.652) 421.94x371.35 · c3 (946.572,939.652) 424.95x371.16 */
.feature-card--1 { left: 0.705723rem; width: 4.06rem;     height: 3.7219rem; }
.feature-card--2 { left: 5.08645rem;  width: 4.21944rem;  height: 3.71348rem; }
.feature-card--3 { left: 9.46572rem;  width: 4.24948rem;  height: 3.71158rem; }
.feature-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-card__icon { position: absolute; }
.feature-card--1 .feature-card__icon { left: 0.41rem; top: 0.48511rem; width: 0.55001rem; height: 0.61834rem; }
.feature-card--2 .feature-card__icon { left: 0.48rem; top: 0.42rem;    width: 0.54414rem; height: 0.58358rem; }
.feature-card--3 .feature-card__icon { left: 0.42rem; top: 0.48rem;    width: 0.64348rem; height: 0.62238rem; }
.feature-card__title {
  position: absolute;
  font-size: 0.24rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.feature-card--1 .feature-card__title { left: 0.4143rem; top: 1.3957rem; } /* x112, baseline 1096.54 */
.feature-card--2 .feature-card__title { left: 0.48rem;   top: 1.3205rem; } /* x556.645, baseline 1088.98 */
.feature-card--3 .feature-card__title { left: 0.485rem;  top: 1.3956rem; } /* x995.087, baseline 1096.49 */
.feature-card__text {
  position: absolute;
  width: 3.4rem;
  font-size: 0.18rem;
  line-height: 0.28rem;
  letter-spacing: 0.002rem;
  opacity: 0.7;
}
.feature-card--1 .feature-card__text { left: 0.4143rem; top: 1.701rem; }  /* first baseline 1128.5 */
.feature-card--2 .feature-card__text { left: 0.48rem;   top: 1.626rem; }  /* first baseline 1120.95 */
.feature-card--3 .feature-card__text { left: 0.485rem;  top: 1.701rem; }  /* first baseline 1128.45 */
/* gradient-tinted duplicate for titles ($-style Figma overlay) */
.grad-text { color: #fff; }
:where(.grad-text) { position: relative; display: inline-block; }
.grad-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(107deg, rgba(255,68,0,0) 0%, rgba(255,68,0,.45) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   LEADERBOARD — strip y1383..2088 r24, stadium color-dodge
   ========================================================================== */
.leaderboard {
  position: relative;
  margin-top: 0.981rem;        /* 1439 - 1340.9 */
  height: 7.05rem;
  border-radius: 0.24rem;
  overflow: hidden;
  text-align: center;
  /* base: transparent -> #FFD700 11% (paint13) — the color-dodge image blends onto it */
  background: linear-gradient(188.4deg, rgba(255,215,0,0) 8.1%, rgba(255,215,0,0.11) 84.4%);
}
.leaderboard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/stadium.png");
  background-size: 152.645% 136.154%;
  background-position: -3.7894rem -1.5351rem;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
}
.leaderboard__badge {
  position: relative;
  margin: 0.38rem auto 0;      /* badge y1477 - 1439 */
  height: 0.28rem;
  border-radius: 0.14rem;
  padding: 0 0.13rem 0 0.10rem;
}
.leaderboard__badge img { width: 0.14rem; height: 0.14rem; }
.leaderboard__title { position: relative; margin-top: 0.059rem; }

/* ---- top-3 prize cards (left column x70..726) ---- */
.lb-prizes { position: absolute; inset: 0; text-align: center; }
.prize-card { position: absolute; }
.prize-card--1 { left: 0.70rem; top: 1.6194rem; width: 6.56rem; height: 2.17rem; }  /* frame box 70,1600.94 656x217 */
.prize-card--2 { left: 0.70rem; top: 3.8894rem; width: 3.31rem; height: 2.00rem; }  /* 70,1827.94 331x200 */
.prize-card--3 { left: 4.13rem; top: 3.8994rem; width: 3.12rem; height: 1.99rem; }  /* 413,1828.94 312x199 */
.prize-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.prize-chip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  height: 0.24rem;
  padding: 0 0.14rem 0 0.12rem;
  border-radius: 0.12rem;
  font-size: 0.16rem;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}
.prize-card--1 .prize-chip { top: 0.6725rem; }  /* chip y1668.19 - 1600.94 */
.prize-card--2 .prize-chip { top: 0.513rem; }   /* 1879.24 - 1827.94 */
.prize-card--3 .prize-chip { top: 0.5225rem; }  /* 1881.19 - 1828.94 */
.prize-chip img { width: 0.11rem; height: 0.12rem; margin-right: 0.08rem; }
/* raised ordinal: top: -0.5em keeps the box height unchanged, unlike vertical-align: super */
.prize-chip sup { font-size: 0.65em; vertical-align: baseline; position: relative; top: -0.5em; }
.prize-chip--gold   { background: linear-gradient(180deg, #FF4400 0%, #FF9900 100%); }
.prize-chip--silver { background: linear-gradient(90deg, #7E7E7E 0%, #A7A7A7 100%); }
.prize-chip--bronze { background: #C77A21; }
.prize-card__name {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0.998rem;               /* baseline 1746.72 - 61*.755 - 1600.94 */
  font-size: 0.61rem;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.prize-card__name--sm {
  top: 0.906rem;               /* baseline 1942.68 - 32*.755 - 1827.94 */
  font-size: 0.32rem;
  line-height: 0.32rem;
}

.lb-table {
  position: absolute;
  left: 7.47rem;               /* x747 */
  top: 1.6494rem;              /* y1603.94 - 1439 */
  width: 6.23rem;              /* x747..1370 */
  height: 4.20rem;
  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 0.10rem;
  overflow: hidden;
  text-align: left;
  font-size: 0.16rem;
  display: flex;
  flex-direction: column;
}
.lb-table__head {
  position: relative;
  flex: 0 0 0.415rem;          /* 1589.94..1631.44 */
  background: rgba(255, 68, 0, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lb-table__head span {
  position: absolute;
  top: 0.1256rem;              /* baseline 1613.56/1614.06 */
  font-family: var(--font-table);
  font-size: 0.11rem;
  font-weight: 700;
  letter-spacing: 0.0088rem;
  color: #EEF2FF;
  line-height: 1;
}
/* column x (page) → rel table x747: RANKING 34, PLAYER 138, TEAM 278, STAGE 362, POINTS right edge ~1293.5 */
.lb-col-rank  { left: 0.34rem; }
.lb-col-player{ left: 1.38rem; }
.lb-col-team  { left: 2.78rem; }
.lb-col-stage { left: 3.62rem; }
.lb-col-points{ right: 0.765rem; color: #fff; }

.lb-table__row {
  position: relative;
  flex: 1 1 0;                 /* rows share the space left by the head, whatever the row count */
  min-height: 0;
}
.lb-table__row > * { position: absolute; top: 50%; transform: translateY(-50%); line-height: 1; }
.lb-row-rank {
  left: 0.34rem;
  font-family: var(--font-table);
  font-size: 0.13rem;
  font-weight: 700;
  color: #EEF2FF;
}
.lb-row-player {
  left: 1.38rem;
  font-size: 0.15rem;
  font-weight: 700;
  color: #EEF2FF;
}
.lb-row-flag { left: 2.88rem; width: 0.19rem; height: 0.155638rem; }
.lb-row-flag img { width: 100%; height: 100%; }
/* fallback chip for teams without a pixel-flag asset yet */
.lb-flag-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-table);
  font-size: 0.09rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #EEF2FF;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.03rem;
}
.lb-row-stage {
  left: 3.62rem;
  font-size: 0.16rem;
  letter-spacing: -0.01rem;
  color: #FDFDFF;
}
.lb-row-points {
  right: 0.765rem;
  font-size: 0.20rem;
  font-weight: 700;
  color: var(--orange);
}
/* rows 4-10: lighter weight / grey rank */
.lb-table__row--dim .lb-row-rank { font-weight: 400; color: #8D8D8D; }
.lb-table__row--dim .lb-row-player { font-weight: 400; }

/* podium bars behind ranks 1-3 — 32x r7 bar, same palette as the prize chips.
   Rows are nth-child 2-4 because the head is the table's first child. */
.lb-table__row:nth-child(2)::before,
.lb-table__row:nth-child(3)::before,
.lb-table__row:nth-child(4)::before {
  content: "";
  position: absolute;
  left: 0.14rem;
  right: 0.14rem;
  top: 50%;
  transform: translateY(-50%);
  height: 0.32rem;
  border-radius: 0.07rem;
}
.lb-table__row:nth-child(2)::before {
  background: linear-gradient(180deg, #FF4400 0%, #FF9900 100%);
  opacity: 0.68;
}
.lb-table__row:nth-child(3)::before {
  background: linear-gradient(90deg, #808080 0%, #A5A5A5 100%);
  opacity: 0.56;
}
.lb-table__row:nth-child(4)::before {
  background: #C77A21;
  opacity: 0.34;
}
/* orange on the orange/bronze bars would not read */
.lb-table__row:nth-child(2) .lb-row-points,
.lb-table__row:nth-child(3) .lb-row-points,
.lb-table__row:nth-child(4) .lb-row-points { color: #fff; }

/* bottom prize note — rect x419 y2062 602x42 r12, same blurred recipe as the old rewards banner */
.lb-banner {
  position: absolute;
  left: 4.19rem;
  top: 6.23rem;                /* y2062 - 1439 */
  width: 6.02rem;
  height: 0.42rem;
  border-radius: 0.12rem;
  background:
    linear-gradient(180deg, rgba(255,68,0,0) 0%, rgba(255,68,0,0.08) 100%),
    linear-gradient(rgba(255,68,0,0.17), rgba(255,68,0,0.17)),
    rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 68, 0, 0.29);
  -webkit-backdrop-filter: blur(8.9px);
  backdrop-filter: blur(8.9px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-banner p { font-size: 0.18rem; line-height: 1; color: #fff; }
.lb-banner sup { font-size: 0.65em; vertical-align: baseline; position: relative; top: -0.5em; }

/* ==========================================================================
   STEPS — badge y2159, cards y2285 h254, pitch 329.97
   ========================================================================== */
.steps { text-align: center; }
.steps__badge {
  margin: 0.98rem auto 0;      /* 2242 - 2144 */
  height: 0.26rem;
  border-radius: 0.13rem;
  padding: 0 0.13rem 0 0.10rem;
  background-color: #000;
  background-image: linear-gradient(rgba(255,68,0,.15), rgba(255,68,0,.15));
}
.steps__badge img { width: 0.14rem; height: 0.14rem; }
.steps__title { margin-top: 0.144rem; }
.steps__cards {
  display: flex;
  justify-content: center;
  margin-top: 0.136rem;        /* frames y2285 - title bottom (2271.4) */
  text-align: left;
}
.step-card {
  position: relative;
  width: 3.11049rem;
  height: 2.54rem;
  flex: none;
}
.step-card + .step-card { margin-left: 0.1892rem; } /* pitch 329.97 - 311.05 */
.step-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.step-card__num {
  position: absolute;
  z-index: 0;                  /* own stacking context so the ::before chip (z -1) stays above the card frame */
  left: 0.378rem;              /* chip x108.3 - card x70.5 */
  top: 0.359rem;               /* chip y2320.9 - card y2285 */
  width: 0.305rem;
  height: 0.301rem;
  font-family: var(--font-pixel);
  font-size: 0.24rem;
  line-height: 0.301rem;
  text-align: center;
  color: #fff;
}
.step-card__num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.063rem;
  background: linear-gradient(180deg, #FF4400 0%, #4B1400 69.23%, #3E1000 100%);
  opacity: 0.75;
}
.step-card__title {
  position: absolute;
  left: 0.372rem;              /* x107.7 - 70.5 */
  top: 0.832rem;               /* baseline 2386.9 - 26*.72 - 2285 */
  font-size: 0.26rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}
.step-card__text {
  position: absolute;
  left: 0.38rem;
  top: 1.148rem;               /* first baseline 2412 */
  width: 2.42rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  letter-spacing: 0.002rem;
  opacity: 0.7;
}

/* ==========================================================================
   REWARDS — strip y2610..3043 r24, stadium color-dodge
   ========================================================================== */
.rewards {
  position: relative;
  margin-top: 0.98rem;         /* strip top y2720, steps cards bottom 2622 */
  height: 3.37rem;             /* y2720..3057 */
  border-radius: 0.24rem;
  overflow: hidden;
  /* base: transparent -> #FFD700 24% (paint22) — the color-dodge image blends onto it */
  background: linear-gradient(175.1deg, rgba(255,215,0,0) -45.4%, rgba(255,215,0,0.24) 113.3%);
}
.rewards::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/stadium.png");
  background-size: 110.088% 133.365%;
  background-position: -0.7231rem -1.068rem;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
}
.rewards__badge {
  position: absolute;
  left: 0.775rem;
  top: 0.49rem;                /* y2659 - 2610 */
  height: 0.28rem;
  border-radius: 0.14rem;
  padding: 0 0.14rem 0 0.115rem;
}
.rewards__badge img { width: 0.14rem; height: 0.14rem; }
.rewards__title {
  position: absolute;
  left: 0.775rem;
  top: 0.859rem;               /* first baseline 2750.29 - 72*.755 - 2610 */
  line-height: 0.50rem;
  text-align: left;
}
.rewards__text {
  position: absolute;
  left: 0.775rem;
  top: 2.077rem;               /* first baseline 2841.5 */
  width: 4.7rem;
  font-size: 0.18rem;
  line-height: 0.28rem;
  letter-spacing: 0.002rem;
  opacity: 0.7;
}
.rewards__cards { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.reward-card {
  position: absolute;
  top: 0.53rem;                /* y2663 - 2610 */
  width: 1.83363rem;
  height: 2.35rem;
}
.reward-card:nth-child(1) { left: 5.70rem; }
.reward-card:nth-child(2) { left: 7.7255rem; }   /* +2.02546 */
.reward-card:nth-child(3) { left: 9.7509rem; }
.reward-card:nth-child(4) { left: 11.7764rem; }
.reward-card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.reward-card__amount {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0.632rem;               /* digits baseline 2780.61 - 72*.72 - 2663 */
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
}
.reward-card__amount .cur { font-size: 0.54rem; letter-spacing: -0.02em; }
.reward-card__amount .val { font-size: 0.72rem; letter-spacing: -0.05em; }
.reward-card__chip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 1.41rem;                /* chip y2804 - 2663 */
  height: 0.27rem;
  padding: 0 0.12rem;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  border: 0.004rem solid rgba(255, 255, 255, 0.15);
  border-radius: 0.0477rem;
  font-size: 0.142991rem;
  letter-spacing: 0.00158879rem;
  white-space: nowrap;
}
.reward-card__chip span { opacity: 0.7; }

/* ==========================================================================
   THE RULES — badge y3155, tab bar x104.5 y3303 1230x52, panel text w933.5
   ========================================================================== */
.rules { text-align: center; }
.rules__badge {
  margin: 0.98rem auto 0;      /* 3155 - 3057 */
  height: 0.3435rem;
  border-radius: 0.16rem;
  padding: 0 0.16rem 0 0.10rem;
  background-color: #000;
  background-image: linear-gradient(rgba(255,68,0,.15), rgba(255,68,0,.15));
}
.rules__badge img { width: 0.14rem; height: 0.14rem; }
.rules__title { margin-top: 0.034rem; }
.rules__tabs {
  display: flex;
  align-items: center;
  gap: 0.28rem;                /* chip end 207 → next label 235.3 */
  padding-left: 0.08rem;
  width: 12.30rem;
  height: 0.52rem;
  margin: 0.383rem auto 0;     /* bar y3303 - title bottom */
  border-radius: 0.08rem;
  background: rgba(255, 68, 0, 0.1);
  border: 0.5px solid rgba(255, 68, 0, 0.15);
  font-size: 0.18rem;
  letter-spacing: 0.002rem;
  white-space: nowrap;
}
.rules__tab {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: inherit;
  letter-spacing: inherit;
  line-height: 1;
  color: #fff;
  opacity: 0.7;
}
.rules__tab.is-active {
  height: 0.32rem;
  padding: 0 0.09rem;
  border-radius: 0.08rem;
  background: rgba(255, 68, 0, 0.8);
  opacity: 1;
}
.rules__panel {
  width: 9.335rem;             /* text x253.5..1187 */
  margin: 0.368rem auto 0;     /* heading top 3391.8 - bar bottom 3355 */
  text-align: justify;
}
.rules__heading {
  margin-left: -0.27rem;       /* heading x226.5, body x253.5 */
  font-size: 0.35rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: left;
}
.rules__panel p {
  margin-top: 0.181rem;
  font-size: 0.18rem;
  font-weight: 300;
  line-height: 0.28rem;
  letter-spacing: 0.002rem;
  color: rgba(227, 227, 227, 0.7);   /* #E3E3E3 at 70% */
}
.rules__panel p + p { margin-top: 0.20rem; }

/* tier table on the "What You Can Win" tab — container x230.5 y? 963x241 r10 */
.rules-table {
  position: relative;
  width: 9.63rem;
  height: 2.409rem;
  margin: 0.275rem 0 0 -0.23rem;   /* heading bottom → table top 36; panel x253.5, table x230.5 */
  border: 1px solid rgba(255, 255, 255, 0.33);
  border-radius: 0.10rem;
  overflow: hidden;
  text-align: left;
}
.rules-table__head {
  position: relative;
  height: 0.42rem;
  background: rgba(255, 68, 0, 0.32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.rules-table__head span {
  position: absolute;
  top: 0.125rem;
  font-family: var(--font-table);
  font-size: 0.11rem;
  font-weight: 700;
  letter-spacing: 0.0088rem;
  color: #EEF2FF;
  line-height: 1;
}
/* column x rel table x146: score 34, coupon 271, deposit 517, volume 763 */
.rt-col-score,   .rt-score   { left: 0.34rem; }
.rt-col-coupon,  .rt-coupon  { left: 2.71rem; }
.rt-col-deposit, .rt-deposit { left: 5.17rem; }
.rt-col-volume,  .rt-volume  { left: 7.63rem; }
.rules-table__row { position: relative; height: 0.47rem; }
.rules-table__row > * { position: absolute; top: 50%; transform: translateY(-50%); line-height: 1; }
.rt-score {
  font-family: var(--font-table);
  font-size: 0.13rem;
  font-weight: 700;
  color: #EEF2FF;
}
.rt-coupon, .rt-deposit, .rt-volume {
  font-size: 0.16rem;
  letter-spacing: -0.01rem;
  color: #FDFDFF;
}
.rules__panel .rules-table + p { margin-top: 0.259rem; }

/* ==========================================================================
   FAQ — badge x69.5 y3927 / items x517.5 w852
   ========================================================================== */
.faq {
  position: relative;
  display: flow-root;        /* stop child negative margin collapsing with section margin */
  margin-top: 1.15rem;         /* 3927 - rules end ~3812 */
  min-height: 4.4rem;
}
.faq__left { position: absolute; left: 0.695rem; top: 0; }
.faq__badge {
  height: 0.26rem;
  border-radius: 0.13rem;
  padding: 0 0.13rem 0 0.10rem;
  background-color: #000;
  background-image: linear-gradient(rgba(255,68,0,.15), rgba(255,68,0,.15));
}
.faq__badge img { width: 0.16rem; height: 0.16rem; }
.faq__title { margin-top: 0.106rem; }   /* baseline 3204.79 */

.faq__items { margin-left: 5.175rem; width: 8.52rem; margin-top: -0.25rem; }
.faq-item { border-bottom: 1px solid #E4E7EC; }
.faq-item:last-child { border-bottom: none; }
.faq-item__q {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.18rem;
  line-height: 1;
  padding: 0.298rem 0.5rem 0.202rem 0;   /* closed row = 69px incl 1px divider */
  cursor: pointer;
}
.faq-item__icon {
  position: absolute;
  right: 0.02rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.22rem;
  height: 0.22rem;
}
.faq-item__icon .h { display: none; }
.faq-item:not(.open) .faq-item__icon .h { display: block; }
.faq-item__a {
  display: none;
  padding-bottom: 0.17rem;
  margin-top: -0.09rem;
  width: 8.35rem;
  font-size: 0.16rem;
  line-height: 0.24rem;
  color: #8C8C8C;
}
.faq-item.open .faq-item__a { display: block; }

/* ==========================================================================
   CTA — rect x38 y3614 1365x316 r18 + orange drop shadow
   ========================================================================== */
.cta {
  position: relative;
  margin: 0.82rem 0.37rem 0 0.38rem;   /* CTA top y4937, FAQ bottom ~4855 */
  height: 3.16rem;
  border-radius: 0.18rem;
  overflow: hidden;
  box-shadow: 0.06rem 0.07rem 0.016rem rgba(255, 68, 0, 0.37);
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/stadium-cta.png");
  background-size: 100% 241.095%;
  background-position: 0 -2.9138rem;
  background-repeat: no-repeat;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
}
.cta__title {
  position: relative;
  z-index: 1;
  padding-top: 0.548rem;       /* baseline 5040.14 - 64*.755 - 4937 */
  font-family: var(--font-pixel);
  font-weight: 400;
  color: var(--yellow);
  font-size: 0.64rem;
  line-height: 0.54rem;
  letter-spacing: 0;
}
.cta__btn {
  position: relative;
  z-index: 1;
  margin: 0.33rem auto 0;      /* y5133 */
  width: 1.58rem;
  height: 0.52rem;
  padding-left: 0.24rem;
}

/* ==========================================================================
   FOOTER — from y4001, rounded top 24, black + orange bottom gradient
   ========================================================================== */
.footer {
  position: relative;
  margin-top: 0.98rem;         /* 5351 - 5253 */
  height: 9.67rem;             /* 5351..6318 */
  border-radius: 0.24rem 0.24rem 0 0;
  background:
    linear-gradient(180deg, rgba(255,68,0,0) 0%, rgba(255,68,0,0.2) 100%),
    #000;
  overflow: hidden;
}
.footer__watermark {
  position: absolute;
  /* the mark is a fixed 1440 wide, so when a scrollbar narrows the page it must
     centre and overhang both sides evenly instead of sitting flush left */
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.02rem;
  display: flex;
  width: 14.40rem;             /* 1440 */
  height: 3.12041rem;          /* 312.041 */
  justify-content: center;
  align-items: center;
  object-fit: contain;
  pointer-events: none;
}
.footer__logo {
  position: absolute;
  left: 1.01rem;
  top: 0.68rem;                /* y4069 - 4001 */
  width: 1.36rem;
  height: 0.294705rem;
}
.footer__about {
  position: absolute;
  left: 1.01rem;
  top: 1.243rem;               /* first baseline 4130.97 */
  width: 3.45rem;
  font-size: 0.14rem;
  line-height: 0.20rem;
  letter-spacing: 0.002rem;
  opacity: 0.7;
}
.footer__social {
  position: absolute;
  left: 1.01rem;
  top: 2.5547rem;              /* y4256.47 - 4001 */
  display: flex;
}
.footer__social a { margin-right: 0.24rem; }   /* icons at 101,149,197,245 → 24 gap */
.footer__social img { width: 0.24rem; height: 0.24rem; }
.footer__copy {
  position: absolute;
  left: 1.01rem;
  top: 3.132rem;               /* baseline 4323 */
  font-size: 0.12rem;
  letter-spacing: 0.002rem;
  opacity: 0.5;
  line-height: 1;
}
.footer__legal {
  position: absolute;
  left: 4.77rem;
  top: 0.593rem;               /* first baseline 4069 */
  width: 8.93rem;
  font-size: 0.12rem;
  font-weight: 300;
  line-height: 0.20rem;
  letter-spacing: 0.002rem;
  color: rgba(227, 227, 227, 0.7);   /* #E3E3E3 at 70% */
}
.footer__legal p { margin-bottom: 0.20rem; }
.footer__legal p:last-child { margin-bottom: 0; }
.footer__legal .u { text-decoration: underline; }

/* ==========================================================================
   MOBILE  (faithful stacking below 768px; 1rem ≈ 90.7px @390 so cards fit
   full-width and body text stays readable while keeping the design system)
   ========================================================================== */
@media (max-width: 767px) {
  html { font-size: 23.2558vw; scroll-padding-top: 0.9rem; }  /* 100vw / 4.3 */

  /* glow SVGs are placed with desktop coordinates — on the reflowed mobile page
     they land on the wrong sections and their rect edges show as hard bands */
  .glows { display: none; }

  /* background crops are % -tuned to the desktop container aspect; mobile
     containers have a completely different aspect, so re-crop with cover */
  .hero__bg,
  .leaderboard::before,
  .rewards::before,
  .cta::before {
    background-size: cover;
    background-position: center;
  }
  /* the copy spans the full width and crosses the players art, which sits above
     the background scrim — so on mobile the veil moves above the players layer
     (.hero::before, z-index 1) and the copy gets a soft shadow on top of it */
  .hero__bg::after { background: none; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
  }
  .hero__content { z-index: 2; text-shadow: 0 0.01rem 0.06rem rgba(0, 0, 0, 0.55); }

  .nav { max-width: calc(100vw - 0.24rem); height: 0.56rem; border-radius: 0.16rem; }
  .nav__links { display: none; }
  .nav__logo { left: 0.14rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 0.2384rem; }
  .nav__cta { left: auto; right: 0.10rem; top: 50%; transform: translateY(-50%); width: 1.1rem; height: 0.36rem; font-size: 0.14rem; }

  .hero { margin: 0.94rem 0.12rem 0; height: auto; padding-bottom: 0.5rem; }
  .hero__players {
    left: auto; right: -1.2rem; bottom: 0; top: auto;
    width: 4.6rem; height: 2.45rem;
  }
  .hero__content { position: relative; }   /* keeps text above the absolute bg layers */
  .hero__badge, .hero__title, .hero__sub, .hero__bullets, .hero__timer, .hero__btn, .hero__terms {
    position: static;
    margin-left: 0.24rem;
  }
  .hero__badge { margin-top: 0.4rem; width: 1.52rem; height: 0.26rem; }
  .hero__title { font-size: 0.72rem; margin-top: 0.12rem; white-space: normal; }
  .hero__sub { font-size: 0.24rem; margin-top: 0.06rem; letter-spacing: -0.005rem; white-space: normal; }
  .hero__bullets { margin-top: 0.2rem; padding-right: 0.24rem; }
  .hero__bullets li { height: auto; margin-bottom: 0.12rem; align-items: flex-start; }
  .hero__bullets span { font-size: 0.15rem; line-height: 0.2rem; transform: none; }
  .hero__timer { margin-top: 0.22rem; }
  .hero__btn { margin-top: 0.22rem; width: 1.58rem; height: 0.5rem; }
  .hero__terms { display: inline-block; margin-top: 0.14rem; }

  .features__cards { height: auto; padding-bottom: 0.1rem; }
  .feature-card--1, .feature-card--2, .feature-card--3 {
    position: relative;
    left: auto;
    margin: 0.22rem auto 0;
    max-width: calc(100vw - 0.24rem);
  }
  .feature-card--1 { margin-top: 0.3rem; }
  /* inner elements keep rem coords; frame scales with card width — cap card width to natural size */
  .feature-card__text { width: 3.3rem; max-width: calc(100vw - 1.1rem); }

  .steps__cards { display: block; height: auto; }
  .step-card { position: relative; margin: 0.2rem auto 0; display: block; }
  .step-card + .step-card { margin-left: auto; }

  .leaderboard { height: auto; padding-bottom: 0.35rem; }
  .lb-prizes {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.12rem;
    margin-top: 0.24rem;
  }
  .prize-card--1, .prize-card--2, .prize-card--3 { position: relative; left: auto; top: auto; }
  .prize-card--1 { width: 3.82rem; height: 1.264rem; }   /* keeps 656:217 frame aspect */
  .prize-card--2 { width: 1.85rem; height: 1.118rem; }
  .prize-card--3 { width: 1.85rem; height: 1.18rem; }
  .prize-chip { height: 0.2rem; padding: 0 0.1rem 0 0.08rem; font-size: 0.12rem; border-radius: 0.1rem; }
  .prize-chip img { width: 0.09rem; height: 0.1rem; margin-right: 0.06rem; }
  .prize-card--1 .prize-chip { top: 0.36rem; }
  .prize-card--2 .prize-chip, .prize-card--3 .prize-chip { top: 0.26rem; }
  .prize-card__name { top: 0.56rem; font-size: 0.34rem; }
  .prize-card__name--sm { top: 0.50rem; font-size: 0.17rem; line-height: 0.17rem; }
  .lb-table { position: static; margin: 0.24rem auto 0; width: calc(100% - 0.24rem); height: auto; font-size: 0.14rem; }
  .lb-banner {
    position: static;
    width: calc(100% - 0.4rem);
    height: auto;
    margin: 0.26rem auto 0;
    padding: 0.1rem 0.14rem;
  }
  .lb-banner p { line-height: 0.24rem; }
  .lb-table__head span { font-size: 0.10rem; }
  .lb-col-rank                  { left: 0.14rem; }   /* the wide RANKING label would hit PLAYER if indented */
  .lb-row-rank                  { left: 0.24rem; }   /* clears the podium bar edge (inset 0.14rem) */
  .lb-col-player,.lb-row-player { left: 0.72rem; }
  .lb-col-team   { left: 1.98rem; }
  .lb-row-flag   { left: 1.98rem; }
  .lb-col-stage, .lb-row-stage  { left: 2.5rem; }
  .lb-col-points,.lb-row-points { right: 0.24rem; }  /* was overhanging the bar's right edge */
  .lb-row-player { font-size: 0.13rem; }
  .lb-row-stage  { font-size: 0.13rem; }
  .lb-row-points { font-size: 0.16rem; }
  .lb-table__row { flex: 0 0 0.42rem; }   /* mobile table grows instead of squeezing rows */

  .rewards { height: auto; padding-bottom: 0.3rem; }
  .rewards__badge, .rewards__title, .rewards__text { position: static; margin-left: 0.24rem; }
  .rewards__badge { margin-top: 0.35rem; }
  .rewards__title { margin-top: 0.16rem; line-height: 0.42rem; font-size: 0.6rem; }
  .rewards__text { margin-top: 0.12rem; width: calc(100% - 0.48rem); }
  .rewards__cards {
    position: static;
    height: auto;
    margin-top: 0.24rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.16rem;
  }
  .reward-card { position: relative; left: auto !important; top: auto; }

  .rules__tabs {
    width: calc(100% - 0.48rem);
    height: auto;
    margin: 0.3rem auto 0;
    padding: 0.08rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.08rem 0.16rem;
    white-space: normal;
    font-size: 0.15rem;
  }
  .rules__tab { line-height: 0.3rem; }
  .rules__tab.is-active { height: 0.3rem; padding: 0 0.12rem; }
  .rules__panel { width: auto; margin: 0.3rem 0.24rem 0; }
  .rules__heading { margin-left: 0; font-size: 0.26rem; }
  .rules__panel p { font-size: 0.15rem; line-height: 0.22rem; text-align: left; }
  .rules-table { width: 100%; height: auto; margin: 0.2rem 0 0; padding-bottom: 0.06rem; }
  .rules-table__head span { font-size: 0.08rem; }
  .rt-col-score,   .rt-score   { left: 0.12rem; }
  .rt-col-coupon,  .rt-coupon  { left: 1.35rem; }
  .rt-col-deposit, .rt-deposit { left: 1.95rem; }
  .rt-col-volume,  .rt-volume  { left: 2.55rem; }
  .rules-table__row { height: 0.42rem; }
  .rt-score { font-size: 0.11rem; }
  .rt-coupon, .rt-deposit, .rt-volume { font-size: 0.13rem; }

  .faq { min-height: 0; margin-top: 0.6rem; }
  .faq__left { position: static; margin-left: 0.24rem; padding-top: 0.05rem; }
  .faq__items { margin: 0.26rem 0.24rem 0; width: auto; }
  .faq-item__q { padding: 0.2rem 0.4rem 0.2rem 0; line-height: 0.24rem; }
  .faq-item__a { width: auto; margin-top: 0; padding-bottom: 0.2rem; }

  .cta { margin-left: 0.12rem; margin-right: 0.12rem; height: auto; padding-bottom: 0.4rem; }
  .cta__title { font-size: 0.42rem; line-height: 0.32rem; padding-top: 0.35rem; }
  .cta__btn { margin-top: 0.2rem; }

  .footer { height: auto; display: flex; flex-direction: column; }
  .footer__logo, .footer__about, .footer__social, .footer__copy, .footer__legal {
    position: static;
  }
  .footer__logo { margin: 0.4rem 0 0 0.24rem; }
  .footer__about { margin: 0.2rem 0.24rem 0; width: auto; }
  .footer__social { margin: 0.24rem 0 0 0.24rem; }
  .footer__legal { margin: 0.28rem 0.24rem 0; width: auto; }
  .footer__copy { display: block; margin: 0.26rem 0.24rem 0.35rem; }
  .footer__watermark { position: static; transform: none; order: 99; width: 100%; height: auto; margin-top: 0.15rem; }  /* watermark last, flush with the bottom edge */
}

/* ==========================================================================
   PT-BR (/br) — Portuguese strings run longer than the English layout allows
   ========================================================================== */
/* two-line card titles (matching the PT design) need the body text lower */
html[lang="pt-BR"] .feature-card__title { line-height: 1.15; }
html[lang="pt-BR"] .feature-card--1 .feature-card__title { top: 1.26rem; }
html[lang="pt-BR"] .feature-card--2 .feature-card__title { top: 1.19rem; }
html[lang="pt-BR"] .feature-card--3 .feature-card__title { top: 1.26rem; }
html[lang="pt-BR"] .feature-card--1 .feature-card__text { top: 1.86rem; }
html[lang="pt-BR"] .feature-card--2 .feature-card__text { top: 1.79rem; }
html[lang="pt-BR"] .feature-card--3 .feature-card__text { top: 1.86rem; }
html[lang="pt-BR"] .step-card__title { line-height: 1.15; top: 0.66rem; }
html[lang="pt-BR"] .step-card__text { top: 1.30rem; width: 2.5rem; font-size: 0.15rem; line-height: 0.21rem; }
/* "A Recompensa Aumenta" must clear the first reward card */
html[lang="pt-BR"] .rewards__title { font-size: 0.60rem; line-height: 0.42rem; }
html[lang="pt-BR"] .rewards__text { top: 1.82rem; }
/* "Jogar agora" is wider than the fixed EN button box */
html[lang="pt-BR"] .hero__btn, html[lang="pt-BR"] .cta__btn { width: fit-content; padding: 0 0.24rem; }
@media (min-width: 768px) {
  /* nav links and rules tabs must fit their fixed-width bars */
  html[lang="pt-BR"] .nav__links { padding-left: 3.25rem; gap: 0.40rem; }
  html[lang="pt-BR"] .rules__tabs { font-size: 0.17rem; gap: 0.20rem; }
}
@media (max-width: 767px) {
  /* the lowered text start leaves the longest card copy a hair short of room */
  html[lang="pt-BR"] .feature-card__text { line-height: 0.26rem; }
}

/* ==========================================================================
   JA (/jp) — Japanese needs JP-capable fallbacks for both font families
   ========================================================================== */
/* Jersey 10 has no kana/kanji: DotGothic16 keeps the pixel look for JP glyphs;
   Noto Sans JP backs Sofia Pro for body copy */
html[lang="ja"] {
  --font-body: "Sofia Pro", "Noto Sans JP", "Segoe UI", -apple-system, sans-serif;
  /* PixelMplus12 covers both latin and kana, so it takes over the whole stack
     as soon as the files land in assets/fonts/. Jersey 10 is deliberately not
     in this stack: it would serve the latin runs at roughly 3/4 the width the
     JP design gives them, splitting each heading across two faces. */
  --font-pixel: "PixelMplus12", "DotGothic16", monospace;
  --font-table: "Inter", "Noto Sans JP", sans-serif;
}
/* hero lockup — JP spec sheet: PixelMplus12 700, 79/44 title, 34/22 sub */
html[lang="ja"] .hero__title {
  left: 0.75rem;
  top: 1.781rem;               /* ink starts on the design's y277.5 x113 */
  font-weight: 700;
  font-size: 0.79rem;
  line-height: 0.44rem;
  text-transform: uppercase;
}
html[lang="ja"] .hero__sub {
  left: 0.75rem;
  top: 2.546rem;               /* ink starts on the design's y367 x116 */
  width: 9.38rem;
  font-weight: 700;
  font-size: 0.34rem;
  line-height: 0.22rem;
  letter-spacing: -0.01rem;
}
/* two-line card titles (matching the JP design) need the body text lower */
html[lang="ja"] .feature-card--1 .feature-card__title,
html[lang="ja"] .feature-card--2 .feature-card__title { line-height: 1.15; }
html[lang="ja"] .feature-card--1 .feature-card__title { top: 1.26rem; }
html[lang="ja"] .feature-card--2 .feature-card__title { top: 1.19rem; }
html[lang="ja"] .feature-card--1 .feature-card__text { top: 1.86rem; }
html[lang="ja"] .feature-card--2 .feature-card__text { top: 1.79rem; }
/* the longest JP card copy runs one line past the frame at the default leading */
html[lang="ja"] .feature-card__text { line-height: 0.25rem; }
/* DotGothic16 glyphs are full-height: the Jersey-tuned leadings overlap */
html[lang="ja"] .rewards__title { font-size: 0.60rem; line-height: 0.62rem; }
html[lang="ja"] .rewards__text { top: 2.14rem; }
html[lang="ja"] .cta__title { line-height: 0.70rem; }
html[lang="ja"] .faq__title { width: 4.3rem; line-height: 0.78rem; }
/* OQtima プレゼンツ / 今すぐプレイ are wider than the fixed EN boxes */
html[lang="ja"] .hero__badge { width: fit-content; padding-right: 0.12rem; }
html[lang="ja"] .hero__badge span { white-space: nowrap; }
html[lang="ja"] .hero__btn, html[lang="ja"] .cta__btn { width: fit-content; padding: 0 0.24rem; }
/* JP counter units run flush against their number (11日, not 11 日) */
html[lang="ja"] .hero__timer-label { margin-left: 0; }
/* JP copy runs longer than the EN these card boxes were measured against, so
   every frame gets room below its last line (the frames are inset:0 images,
   so they follow the card). The cards are absolute at >=768px and only
   overhang their wrapper, which has ~99 design px of clear space below. */
html[lang="ja"] .feature-card--1 { height: 3.96rem; }
html[lang="ja"] .feature-card--2 { height: 3.95rem; }
html[lang="ja"] .feature-card--3 { height: 3.95rem; }
html[lang="ja"] .step-card       { height: 2.78rem; }
html[lang="ja"] .reward-card     { height: 2.59rem; }
/* the prize cards are left alone: their copy already clears the frame by 44-56
   design px, and their frames are the one set with a locked aspect ratio */

/* the JP rules sheet sets the panel copy as a bulleted list, where EN and PT
   run it as plain justified paragraphs */
html[lang="ja"] .rules__panel p { position: relative; }
html[lang="ja"] .rules__panel p::before {
  content: "•";
  position: absolute;
  left: -0.16rem;
  top: 0;
  color: rgba(227, 227, 227, 0.7);
}
/* ルール sat tighter under its badge than every other section title */
html[lang="ja"] .rules__title { margin-top: 0.145rem; }
@media (min-width: 768px) {
  /* nav links must fit their fixed-width bar */
  html[lang="ja"] .nav__links { padding-left: 3.25rem; gap: 0.40rem; }
  /* the JP tab labels are far shorter than the EN ones they were spaced for,
     so left-packing them left ~347 design px dead at the right end */
  html[lang="ja"] .rules__tabs { justify-content: center; padding-left: 0; }
}
@media (max-width: 767px) {
  /* square DotGothic16 glyphs run ~2x wider than Jersey 10 — shrink the pixel
     titles so they wrap inside the viewport instead of clipping */
  /* the longest card copy wraps to more lines in a phone-width frame */
  html[lang="ja"] .feature-card--2 { height: 4.25rem; }
  /* the desktop spec's 0.44/0.22 leadings collapse once these titles wrap */
  html[lang="ja"] .hero__title { font-size: 0.52rem; line-height: 0.58rem; }
  html[lang="ja"] .hero__sub { font-size: 0.22rem; line-height: 0.28rem; width: auto; padding-right: 0.24rem; }
  html[lang="ja"] .h2 { font-size: 0.52rem; }
  html[lang="ja"] .rewards__title { font-size: 0.52rem; line-height: 0.56rem; }
  html[lang="ja"] .cta__title { font-size: 0.34rem; line-height: 0.44rem; padding-left: 0.12rem; padding-right: 0.12rem; }
  html[lang="ja"] .faq__title { width: auto; padding-right: 0.24rem; line-height: 0.58rem; }
}