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

body {
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #0c0121;
  color: #d9d9d9;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* Buttons/inputs don't inherit body font by default — without this the Khmer
   labels inside them fall back to Arial, which has no Khmer glyphs. */
button, input, textarea, select { font-family: inherit; }

/* ===== HERO SECTION ===== */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  min-height: 720px;
  overflow: visible;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg picture,
.gradient-bar picture,
.game-card-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.social-top-mobile { display: none; }

/* Logo */
.logo-wrap {
  position: absolute;
  z-index: 2;
  top: calc(100% * 17 / 1080);
  left: 50%;
  transform: translateX(-50%);
}

.logo {
  width: clamp(190px, 100vw * 280 / 1920, 280px);
  height: clamp(86px, 100vw * 127 / 1920, 127px);
  object-fit: cover;
}

/* Headings */
.hero-headings {
  position: absolute;
  z-index: 2;
  top: calc(100% * 160 / 1080);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 4 / 1920);
}

.heading1 { width: clamp(200px, 100vw * 300 / 1920, 300px); height: clamp(39px, 100vw * 58 / 1920, 58px); }
.heading2 { width: clamp(227px, 100vw * 340 / 1920, 340px); height: clamp(32px, 100vw * 46 / 1920, 46px); }

/* Below 1280 the hero is narrower than the 1920 grid assumes, so the banners
   move outward to keep clear of the floored form frame. */
@media (min-width: 960px) and (max-width: 1279px) {
  .banner-left  { left: 7%; }
  .banner-right { right: 7%; }
}

/* Left banner */
.banner-left {
  position: absolute;
  z-index: 2;
  left: calc(100% / 6);
  top: calc(100% * 289 / 1080);
  width: min(calc(100% * 280 / 1920), 280px);
}

.banner-img {
  width: 100%;
  aspect-ratio: 280 / 407;
  object-fit: cover;
  border-radius: 1.04vw;
  outline: 1px solid rgba(255, 213, 28, 0.2);
  outline-offset: -1px;
}

/* banner-right.png exports at aspect 0.668 but Figma 263:147 places it at
   280/407 = 0.688; without this the social row below drifts ~10px down. */
.banner-right .banner-img {
  aspect-ratio: 280 / 407;
  object-fit: cover;
}

/* Right banner */
.banner-right {
  position: absolute;
  z-index: 2;
  right: calc(100% / 6);
  top: calc(100% * 289 / 1080);
  width: min(calc(100% * 280 / 1920), 280px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(100vw * 12 / 1920);
}

.banner-socials {
  display: flex;
  gap: calc(100vw * 16 / 1920);
  align-items: center;
}

.social-icon {
  width: min(calc(100vw * 40 / 1920), 40px);
  height: min(calc(100vw * 36 / 1920), 36px);
  object-fit: contain;
}

.social-icon-sm {
  width: 40px;
  height: 36px;
  object-fit: contain;
}

/* Form area */
.form-area {
  position: absolute;
  z-index: 2;
  top: calc(100% * 394 / 1080);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(261px, 100vw * 420 / 1920, 420px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-decoration {
  position: absolute;
  /* min(), not max(): these are negative offsets, so the -77px floor is the
     LARGER value. max() would cap the pull-up at -77 and drop the frame 47px. */
  top: min(-77px, -100vw * 124 / 1920);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(360px, 100vw * 580 / 1920, 580px);
  /* Reserve room below the button when desktop fields reach their 44px floor. */
  height: clamp(330px, 100vw * 438 / 1920, 438px);
  /* Figma 263:128 sits at y=270 while the fields (263:236) start at y=394,
     so the art must offset -124px == -6.46vw on the 1920 grid. */
  pointer-events: none;
  z-index: 0;
}

.form-decoration img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.form-fields {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-field {
  width: 100%;
  height: clamp(44px, 100vw * 52 / 1920, 52px);
  background: #0b012d;
  border: 1px solid #2f2289;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: calc(100vw * 6 / 1920);
  padding: 0 calc(100vw * 16 / 1920);
  margin-bottom: 2px;
}

/* Figma's InputField reserves a 22px line under each field for its error
   (#e10000 @ 12px). The space was already there; this puts the text in it. */
.field-error {
  width: 100%;
  min-height: 22px;
  font-size: 12px;
  line-height: 22px;
  color: #e10000;
}

/* Backend-wide errors only consume space when there is a message. */
#register-general-error:empty {
  display: none;
  min-height: 0;
}

/* Pixel-sampled from the Figma exports: the DESKTOP frame (263:236) paints
   field 1's border #9747ff at rest, while the MOBILE frame (263:247) leaves
   both fields #2f2289. So the resting ring is desktop-only (reset below),
   and :focus-within adds the real interaction state on top for keyboard users. */
.input-field--active {
  border-color: #9747ff;
  box-shadow: 0 0 5px rgba(151, 71, 255, 0.9);
}

/* Must be visibly STRONGER than --active, or focusing field 1 changes nothing. */
.input-field:focus-within {
  border-color: #b47bff;
  box-shadow: 0 0 12px rgba(151, 71, 255, 1);
}

/* Figma already defines the focused-field look — the violet ring above — so the
   inputs opt out of the generic gold ring. Two indicators at once is noise, and
   a text input always matches :focus-visible (even on programmatic focus), so
   the gold box was showing when nobody had touched the keyboard.
   Buttons keep the gold ring: Figma gives them no focus state at all. */
.input-field input:focus-visible {
  outline: none;
}

.input-icon-right:focus-visible {
  outline: 2px solid #ffd51c;
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.input-icon {
  width: 1.25vw;
  height: 1.25vw;
  flex-shrink: 0;
}

.input-icon img { width: 100%; height: 100%; }

.input-icon-right {
  position: relative;
  width: 1.25vw;
  height: 1.25vw;
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  border: none;
  background: transparent;
  display: block;
}

/* The glyph is only ~20px, well under the 44px touch minimum. Grow the hit
   area with a pseudo-element so the icon itself keeps its Figma size. */
.input-icon-right::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
}

/* The eye glyph is 24x14 — forcing a square box would squash it 42%. */
.input-icon-right img { width: 100%; height: 100%; object-fit: contain; }

.input-field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  /* #808080 is the placeholder token; typed text uses the body colour so a
     filled field is distinguishable from an empty one. */
  color: #d9d9d9;
  font-size: clamp(14px, 0.94vw, 18px);
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
}

.input-field input::placeholder { color: #808080; }

.btn-register {
  position: relative;
  width: clamp(180px, 100vw * 250 / 1920, 250px);
  height: clamp(53px, 100vw * 74 / 1920, 74px);
  border: none;
  background: transparent;
  cursor: pointer;
}

.btn-register[disabled],
.btn-register.disabled {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.btn-register-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-register span {
  position: relative;
  z-index: 1;
  /* The green pill occupies y=17..68 of the 74px art; centre the glyph body on
     the pill, not on the 74px box (the art extends above it). */
  top: -0.21vw;
  color: white;
  font-size: clamp(18px, 1.35vw, 26px);
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
  font-weight: 700;
}

/* Gradient bar */
.gradient-bar {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% * 100 / 1080);
}

.gradient-bar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Game carousel */
.game-carousel {
  position: absolute;
  z-index: 2;
  /* Figma 263:226 spans y=744..866, clear of the gradient bar at y=980. */
  bottom: calc(100% * 214 / 1080);
  left: 50%;
  transform: translateX(calc(-50% - 1px));
  display: flex;
  align-items: center;
  gap: calc(100vw * 20 / 1920);
}

/* The hero has a 720px minimum height on small laptops. Lower the carousel
   progressively so it clears the decorative form frame at 960–1366px. */
@media (min-width: 960px) and (max-width: 1439px) {
  .game-carousel {
    bottom: calc((100% * 214 / 1080) - clamp(0px, calc(259.2px - 18vw), 40px));
  }
}

/* Decorative chrome from the Figma frame — there is no carousel behaviour
   behind these, so they are divs and carry no pointer affordance. */
.carousel-arrow {
  background: transparent;
  border: none;
  width: clamp(20px, 1.25vw, 24px);
  height: clamp(26px, 1.61vw, 31px);
  flex-shrink: 0;
}

.carousel-arrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-arrow--right { transform: rotate(180deg); }

.carousel-games {
  display: flex;
  gap: calc(100vw * 10 / 1920);
  align-items: center;
}

.carousel-game {
  width: clamp(140px, 100vw * 180 / 1920, 180px);
  height: clamp(95px, 100vw * 122 / 1920, 122px);
}

/* Figma 263:230 uses object-contain: the tiles have rounded corners and a
   lavender rim baked into the art, which cover would crop off. */
.carousel-game img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-game picture { display: block; width: 100%; height: 100%; }

.stat-row:nth-child(1) { --stat-start: 60%; --stat-target: 80%; }
.stat-row:nth-child(2) { --stat-start: 54%; --stat-target: 72%; }
.stat-row:nth-child(3) { --stat-start: 69%; --stat-target: 92%; }

.hero-content {
  display: contents;
}

/* ===== WHY SECTION ===== */
/* Figma 297:814 starts the title ink at y=1044, overlapping the hero's last
   36px — the hero art has already faded to #0c0121 there. Without the pull-up
   there is a 79px band of dead black that isn't in the design. */
/* One unit, not `40px - 4.11vw`: mixing them made the overlap drift +13.4px at
   1280 and -13.2px at 2560. -2.03vw is identical at 1920 and scales correctly. */
.why-section {
  position: relative;
  z-index: 1;
  padding: 0;
  margin-top: calc(-100vw * 39 / 1920);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* max-width carries the 16px gutters because box-sizing is border-box:
   774 - 32 = 742, the Figma content column (297:808). */
.why-header {
  max-width: 774px;
  text-align: center;
  margin-bottom: 24px;
  padding: 0 16px;
}

.why-title {
  color: #ffd51c;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

.why-desc {
  color: #d9d9d9;
  font-size: 14px;
  line-height: 22px;
  min-height: 88px;
  padding: 0 12px;
  /* Figma's title node carries text-center; this one does not. */
  text-align: left;
}

/* Game Cards */
.game-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 774px;
  padding: 0 16px;
}

.game-card {
  position: relative;
  width: 100%;
  height: 250px;
}

.game-card-bg {
  position: absolute;
  inset: 0;
}

.game-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 44px 24px 34px;
  height: 100%;
}

.game-card-thumb {
  width: 200px;
  height: 136px;
  flex-shrink: 0;
}

/* Figma 315:1790 uses object-contain — cover oversizes the art ~18% and crops it. */
.game-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.game-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.game-card-title {
  color: #ffd51c;
  font-size: 20px;
  font-weight: 700;
  width: 100%;
}

.game-stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-label {
  color: white;
  font-size: 16px;
  line-height: 22px;
  width: 122px;
  flex-shrink: 0;
}

.stat-row:nth-child(3) .stat-label { width: 121px; }

.stat-bar {
  width: 250px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.stat-bar-fill {
  width: var(--stat-target);
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #9d00ff, #e100ff);
}

.game-card.stats-pending .stat-bar-fill { width: var(--stat-start); }
.game-card.stats-animating .stat-bar-fill {
  width: var(--stat-target);
  transition: width 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

.stat-value {
  color: #ffd51c;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-align: right;
  flex: 1;
  min-width: 0;
}

.btn-play {
  position: relative;
  width: 150px;
  height: 49px;
  border: none;
  background: transparent;
  cursor: pointer;
  /* .game-card-info gap is 8px for title->stats; restore Figma's 16px here. */
  margin-top: 8px;
}

.btn-play img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-play span {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 16px;
  font-weight: 700;
}

/* ===== FOOTER ===== */
.footer {
  margin-top: 40px;
  border-top: 2px solid #ab08e2;
  background: #11022b;
}

.footer-top {
  padding: 30px 0 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.footer-logo {
  width: 280px;
  height: 127px;
  object-fit: cover;
}

.footer-desc {
  color: #d9d9d9;
  font-size: 14px;
  line-height: 22px;
  min-height: 88px;
  text-align: center;
  max-width: 704px;
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
}

.footer-socials {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: -4px; /* Figma 263:199 -> 263:200 is a 12px gap, not the 16px flex gap */
}

/* The footer is fixed-px; without this it inherits the hero's vw-scaled
   .social-icon and drifts (27x24 @1280, 53x48 @2560). Figma 263:201 = 40x36. */
.footer-socials .social-icon {
  width: 40px;
  height: 36px;
}

.footer-payment {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-payment-label {
  color: #d9d9d9;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
}

.payment-icons {
  display: flex;
  gap: 16px;
  align-items: center;
}

.payment-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
}

.footer-nav {
  display: flex;
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  height: 40px;
  padding: 0 20px;
  flex-wrap: wrap;
  justify-content: center;
  min-width: 495px;
}

.footer-nav a {
  color: #dcc976;
  font-size: 14px;
  text-decoration: none;
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
  white-space: nowrap;
}

.footer-certs {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}

.cert-sm {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.cert-wide {
  width: 60px;
  height: 24px;
  object-fit: contain;
}

.footer-certs img:last-child { height: 22px; } /* Figma 263:222 is 60x22 */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px; /* Figma 263:218 -> 263:223 */
}

.footer-bottom p {
  color: #d9d9d9;
  font-size: 14px;
  text-align: center;
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
}


/* ===== MOBILE / TABLET =====
   Vertical rhythm follows the 430x2400 Figma frame:
   logo y=6 -> headings y=110 -> form y=189 -> carousel y=536 -> why-title y=706. */
@media (max-width: 959px) {
  .hero {
    aspect-ratio: auto;
    min-height: auto;
    /* carousel ends at 629; +57 +20 (why padding) lands the title at 706 */
    padding-bottom: 57px;
  }

  /* Decorative layers fill the viewport, including wider phones and tablets.
     Keep their vertical composition aligned with the form and game carousel. */
  .hero-bg,
  .gradient-bar {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
  }

  /* Let the hero glow fade behind the introductory copy. */
  .why-section {
    background: transparent;
  }

  .hero-bg {
    position: absolute;
    top: 0;
    height: 932px;
  }

  /* Figma 297:822 sits BESIDE the logo, so it must not consume flow height. */
  .social-top-mobile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 430px);
    top: 0;
    z-index: 3;
    padding: 30px 16px 0;
  }

  .social-top-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .logo-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    display: flex;
    justify-content: center;
    padding-top: 6px;
    margin-top: 0;
  }

  .logo {
    width: 190px;
    height: 87px;
  }

  .hero-headings {
    position: relative;
    top: auto;
    left: auto;
    transform: translateX(1px);
    margin-top: 17px;
    gap: 4px;
    width: 240px;
    margin-inline: auto;
  }

  .heading1 { width: 200px; height: 39px; }
  .heading2 { width: 240px; height: 32px; }

  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    margin-top: 4px;
    padding: 0 5px;
  }

  .banner-left,
  .banner-right {
    display: none;
    position: static;
    width: auto;
  }

  .form-area {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin-top: 0;
  }

  /* Keep the fields and button inside the frame on narrow phones, while
     retaining Figma's 420 x 306 frame at the 430px reference width. */
  .form-decoration {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 306px;
    aspect-ratio: 420 / 306;
    overflow: hidden;
  }

  .form-decoration img { object-fit: fill; }
  /* Match the image crop inside Figma node 753:257. */
  .form-decoration .form-decoration-image {
    position: absolute;
    top: -1.39%;
    height: 103.77%;
  }

  .form-fields {
    position: absolute;
    top: 73px;
    left: 50%;
    transform: translateX(-50%);
    width: min(310px, 74%);
  }

  /* Figma 263:250 instances are 310x68 = 44px field + 24px slack */
  .input-field {
    height: 44px;
    margin-bottom: 2px;
    border-radius: 12px;
    padding: 0 16px;
    gap: 6px;
  }

  .input-field input { font-size: 14px; }
  .input-icon { width: 20px; height: 20px; }
  .input-icon-right { width: 20px; height: 20px; }

  .btn-register {
    width: 210px;
    height: 62px;
  }

  .btn-register span { font-size: 20px; top: 0; }

  /* Figma 263:247 shows no resting ring on mobile — only real focus. */
  .input-field--active:not(:focus-within) {
    border-color: #2f2289;
    box-shadow: none;
  }

  /* Figma 263:277 pins this to y=754 so it fades the BOTTOM of the 932px bg.
     In flow it landed at 561 and washed out the stage ellipse. */
  .gradient-bar {
    position: absolute;
    top: 754px;
    bottom: auto;
    height: 204px;
    margin-top: 0;
    z-index: 1;
  }

  .gradient-bar img {
    width: 100%;
    height: 204px;
    object-fit: fill;
  }

  .game-carousel {
    position: relative;
    bottom: auto;
    left: auto;
    transform: translateX(1px);
    z-index: 2;
    margin-top: 41px; /* form ends 495 -> games at 536 (Figma 263:347) */
    gap: 16px;
    padding: 0 20px;
    justify-content: center;
    width: fit-content;
    max-width: calc(100% - 2px);
    margin-inline: auto;
  }

  .carousel-arrow { width: 20px; height: 26px; }
  .carousel-games { gap: 0; } /* Figma 263:349/351 are adjacent */

  .carousel-game {
    width: 140px;
    height: 93px;
  }

  .carousel-game--desktop { display: none; }

  .carousel-game:nth-child(2) img {
    height: calc(100% * 80.111111 / 93);
    margin-block: auto;
  }

  .carousel-game:nth-child(2) { display: flex; align-items: center; }

  /* Why section — mobile rhythm is pinned separately (title lands at y=706) */
  .why-section { padding-top: 20px; margin-top: 0; }
  .why-title { font-size: 20px; margin-bottom: 16px; }
  .why-desc { padding: 0 8px; min-height: 154px; }
  .why-header { max-width: 430px; padding: 0 15px; }

  /* 430 - 2*15 = 400, the Figma card width (316:1880) */
  .game-cards {
    gap: 20px;
    max-width: 430px;
    padding: 0 15px;
  }

  .game-card {
    height: auto;
    min-height: 287px;
  }

  /* contain would letterbox: the PNG is aspect 1.381 vs the card's 400/287=1.394 */
  .game-card-bg img { object-fit: contain; }

  /* Mobile game card grid so thumb + title share a row (Figma 316:1880) */
  .game-card-content {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 8px; /* row gaps differ (8 then 14), so set them per-child */
    padding: 8px 32px;
    height: auto;
    align-items: start;
  }

  .game-card-thumb {
    grid-column: 1;
    grid-row: 1;
    width: 120px;
    height: 82px;
    align-self: center;
  }

  .game-card:nth-child(1) .game-card-thumb img { object-fit: cover; }
  .game-card:nth-child(2) .game-card-thumb img {
    height: 80px;
    margin-top: 1px;
    object-fit: cover;
  }

  .game-card-info {
    display: contents;
  }

  .game-card-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 18px;
    width: auto;
  }

  .game-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 8px;
    margin-top: 8px;
  }

  .btn-play {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: end;
    width: 140px;
    height: 46px;
    margin-top: 14px;
  }

  /* Mobile stats: label + value on one line, bar below at full width */
  .stat-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .stat-label { font-size: 14px; line-height: normal; width: auto; flex: 1; order: 1; }
  .stat-row:nth-child(3) .stat-label { width: auto; }
  .stat-value { font-size: 14px; line-height: normal; flex: 0 0 auto; white-space: nowrap; text-align: right; order: 2; }
  .stat-bar { flex: 0 0 100%; width: 100%; height: 6px; order: 3; }
  .stat-row:nth-child(n) {
    --stat-start: calc(100% * 150 / 336);
    --stat-target: calc(100% * 200 / 336);
  }

  /* Footer */
  .footer { margin-top: 32px; }
  .footer-top { padding-top: 22px; } /* 2px border + 22 = Figma's 24 */
  .footer-logo { width: 190px; height: 87px; }
  .footer-desc { max-width: 398px; min-height: 110px; }
  .footer-socials .social-icon { width: 30px; height: 27px; }
  .footer-socials { gap: 12px; }

  /* Links total 343.6px + 32 gaps + 16 padding = 391.6, so they already fit the
     398px pill on one line at 430 — no `nowrap` needed. Forcing it only made
     them spill on narrower phones, and any threshold defending that would
     break again whenever the Khmer fallback font is wider. Let it wrap. */
  .footer-nav {
    gap: 8px;
    width: 100%;
    max-width: 398px;
    padding: 8px;
    height: auto;
    min-height: 40px;
    min-width: 0;
  }

  .footer-nav a { font-size: 12px; }

  .footer-bottom { margin-top: 24px; } /* mobile Figma gap is 24, desktop 32 */
}

@media (min-width: 431px) and (max-width: 959px) {
  /* Stretch only the decorative backdrop; foreground artwork keeps its ratio. */
  .hero-bg .hero-bg-image { object-fit: fill; }
}

@media (max-width: 429px) {
  /* Preserve the full frame around card content when the card is narrower
     than the 400px Figma reference. */
  .game-card-bg img { object-fit: fill; }
}

/* Very narrow phones use compact carousel chrome and payment marks. */
@media (max-width: 380px) {
  .game-carousel { gap: 8px; padding: 0 8px; }
  .carousel-game { width: 120px; height: 80px; }
}

@media (max-width: 299px) {
  .hero-headings { width: min(240px, 100%); transform: none; }
  .heading2 { width: 100%; }
  .game-carousel { transform: none; }
  .game-carousel .carousel-arrow { display: none; }
  .payment-icons { gap: 8px; }
  .payment-icon { width: 32px; height: 32px; }
}