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

body {
  font-family: 'Noto Sans Khmer', 'Inter', sans-serif;
  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-mobile { display: none; }
.social-top-mobile { display: none; }

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

.logo {
  width: clamp(190px, 14.58vw, 280px);
  height: clamp(86px, 6.61vw, 127px);
  object-fit: contain;
}

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

.heading1 { width: clamp(200px, 15.63vw, 300px); }
.heading2 { width: clamp(227px, 17.71vw, 340px); }

/* 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: 16.67%;
  top: 26.76%;
  width: 14.58%;
}

.banner-img {
  width: 100%;
  border-radius: 1.04vw;
  border: 1px solid rgba(255, 213, 28, 0.2);
}

/* 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: 16.67%;
  top: 26.76%;
  width: 14.58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.63vw;
}

.banner-socials {
  display: flex;
  gap: 0.83vw;
  align-items: center;
}

.social-icon {
  width: 2.08vw;
  height: 1.88vw;
  object-fit: contain;
}

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

/* Form area */
.form-area {
  position: absolute;
  z-index: 2;
  top: 36.5%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(261px, 21.88vw, 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, -6.46vw);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(360px, 30.21vw, 580px);
  height: clamp(272px, 22.81vw, 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: contain;
}

.form-decoration-mobile { display: none; }

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

.input-field {
  width: 100%;
  height: clamp(44px, 2.71vw, 52px);
  background: #0b012d;
  border: 1px solid #2f2289;
  border-radius: 0.63vw;
  display: flex;
  align-items: center;
  gap: 0.31vw;
  padding: 0 0.83vw;
  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;
}

/* 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;
  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, 13.02vw, 250px);
  height: clamp(53px, 3.85vw, 74px);
  border: none;
  background: transparent;
  cursor: pointer;
}

.btn-register[disabled] {
  opacity: 0.6;
  cursor: default;
}

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

.btn-register-mobile { display: none; }

.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: 9.26%;
}

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

.gradient-bar-mobile { display: none; }

/* 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: 19.81%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.04vw;
}

/* 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: contain;
}

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

.carousel-games {
  display: flex;
  gap: 0.52vw;
  align-items: center;
}

.carousel-game {
  width: clamp(140px, 9.38vw, 180px);
  height: clamp(95px, 6.35vw, 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;
}

.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: -2.03vw;
  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;
  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-bg-mobile { display: none; }

.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-bar {
  width: 250px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.stat-bar-fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(to right, #9d00ff, #e100ff);
  transition: width 1s ease-in-out;
}

@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: 32px 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: contain;
}

.footer-desc {
  color: #d9d9d9;
  font-size: 14px;
  line-height: 22px;
  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;
}

.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 / SMALL LAPTOP =====
   Figma only provides a 430 frame and a 1920 frame. The desktop hero is a
   pure vw scale off the 1920 grid with no floor, so between 769 and 1279 it
   renders SMALLER than the mobile design (7.2px form text at 769px). This
   block therefore runs up to 1279px. NOTE: the `zoom` rules at the bottom of
   this file mean 1279 -> 1280 is NOT a smooth handoff — elements snap 33-47%
   smaller crossing it. See the tablet sizing note there.

   Vertical rhythm is pinned to Figma 263:242 (430x2400):
   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;
  }

  /* The hero art is a 430x932 composition. Past 430 it is centred on the page
     colour rather than stretched, so wide viewports letterbox instead of warp. */
  .hero-bg,
  .social-top-mobile,
  .gradient-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, 430px);
  }

  /* .hero-bg is 932px tall and outlives the hero box by ~246 design px. At 430
     it is full-bleed so the tail is invisible, but once centred it shows
     through the transparent .why-section as a hard-edged rectangle. */
  .why-section {
    background: #0c0121;
  }

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

  .hero-bg-desktop { display: none; }
  .hero-bg-mobile { display: block; }

  /* 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;
    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: none;
    margin-top: 17px;
    gap: 4px;
  }

  .heading1 { width: 200px; }
  .heading2 { width: 240px; }

  .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;
  }

  /* min-height:auto would let the 1160x877 PNG force 317px and override the ratio */
  .form-decoration {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 420 / 306;
  }

  .form-decoration img { object-fit: fill; }
  .form-decoration-desktop { display: none; }
  .form-decoration-mobile { display: block; }

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

  /* 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-desktop { display: none; }
  .btn-register-mobile { display: block; }

  .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;
  }

  .gradient-bar-desktop { display: none; }
  .gradient-bar-mobile { display: block; }

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

  .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; }

  /* 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; }
  .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;
  }

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

  /* 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-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-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; }

  /* 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; }
  .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;
  }

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

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

/* Very narrow phones: the carousel's fixed parts overflow 320px viewports
   (2x20 arrows + 2x16 gaps + 2x140 tiles + 2x20 padding = 392 > 320). */
/* ===== TABLET =====
   Figma has no frame between 430 and 1920. Below 1280 the desktop composition
   is unusable (sub-12px form text), so tablets get the 430 phone composition —
   but pinned at 430 it only fills 56% of an iPad and reads as a phone
   screenshot on a big screen. `zoom` scales the whole composition (art,
   spacing and type together, unlike transform it still reflows), so the
   proportions stay exactly as designed and only the size changes. */
/* Zoom stops at 899 rather than running to the desktop boundary. Carrying 1.3
   up to 1023 made the handoff into the desktop grid a 34% drop; ending it here
   lets the unzoomed 430 composition meet the desktop floors almost exactly
   (input 44px/14px on both sides). 600-899 is where zoom actually pays. */
@media (min-width: 600px) and (max-width: 899px) {
  body { zoom: 1.3; }
}

@media (max-width: 380px) {
  .game-carousel { gap: 8px; padding: 0 8px; }
  .carousel-game { width: 120px; height: 80px; }
}