/* Pin the Figma typefaces locally so the composition has no network-font swap. */
@font-face {
  font-family: 'Noto Sans Khmer';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/noto-sans-khmer-khmer.woff2') format('woff2');
  unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Khmer';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/noto-sans-khmer-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Figma uses Inter for form/footer Latin and Noto Sans Khmer as Khmer fallback. */
.input-field input,
.footer-desc,
.footer-payment-label,
.footer-nav a,
.footer-bottom p {
  font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
}

.why-desc {
  font-variation-settings: 'CTGR' 0, 'wdth' 100;
}

/* The design wraps Khmer at phrase spaces; browser dictionaries wrap at words.
   These explicit break opportunities preserve Figma's editable text composition
   at the two reference widths. Smaller phones use the browser's natural flow. */
.figma-break { display: none; }
@media (min-width: 960px) {
  .figma-break--desktop { display: initial; }
}
@media (min-width: 430px) and (max-width: 959px) {
  .figma-break--mobile { display: initial; }
}

/* Explicit breaks change min-content widths. Keep the design's text columns
   stretched to their declared maximum instead of shrink-wrapping the lines. */
.why-header,
.footer-brand,
.footer-desc {
  width: 100%;
}

/* Figma's inset border does not consume the content padding. */
.input-field { padding-inline: calc(100vw * 16 / 1920 - 1px); }
.input-field input { line-height: 22px; }

.btn-register span {
  position: absolute;
  left: 32%;
  top: calc(100% * 18 / 74);
  font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
  font-size: clamp(18px, 100vw * 26 / 1920, 26px);
  line-height: 1.1923076923;
  white-space: nowrap;
}

.btn-play span {
  position: absolute;
  left: 35px;
  top: 12px;
  line-height: 22px;
  white-space: nowrap;
}

.footer-nav a,
.footer-bottom p { line-height: 22px; }
.footer-bottom { padding-bottom: 1px; }
.footer-nav a:nth-child(1) { width: 35px; }
.footer-nav a:nth-child(2) { width: 96px; }
.footer-nav a:nth-child(3) { width: 122px; }
.footer-nav a:nth-child(4) { width: 98px; }
.footer-nav a:nth-child(5) { width: 40px; }

@media (min-width: 960px) {
  .stat-row:nth-child(2) .stat-value { text-align: center; }
}

@media (max-width: 959px) {
  .input-field { padding-inline: 15px; }
  .input-field input { line-height: 17px; }
  .btn-register span {
    left: 71px;
    top: 17px;
    font-size: 20px;
    line-height: 24px;
  }
  .btn-play span { left: 30px; }
  .game-card-title { line-height: 25px; }
  .stat-row:nth-child(2) .stat-value {
    font-family: 'Inter', 'Noto Sans Khmer', sans-serif;
    line-height: 17px;
  }
  .footer-nav a:nth-child(1) { width: 30px; }
  .footer-nav a:nth-child(2) { width: 82px; }
  .footer-nav a:nth-child(3) { width: 105px; }
  .footer-nav a:nth-child(4) { width: 84px; }
  .footer-nav a:nth-child(5) { width: 34px; }
}