/* =========================================================================
   NOX Connection, mobile & tablet layer (PRD Optimasi Mobile)
   -------------------------------------------------------------------------
   Loaded LAST on every public layout (landing, store/dashboard, profile,
   login). Golden rule: desktop (>=1024px) must render pixel-identical, so
   every rule below lives inside @media (max-width: 1023.98px).

   The ONLY exception is the first block: elements that exist purely for
   mobile (bottom nav, drawer extras, sticky checkout bar...) carry
   .only-mobile and are hidden on desktop. It targets new markup only, so it
   cannot change how any existing element renders on desktop.

   Breakpoints used inside the mobile layer:
     <=359.98px  small phones (12px gutters)
     <=479.98px  phones (design base, 16px gutters)
     480-767px   large phones
     768-1023px  tablets (still the mobile pattern: drawer + bottom nav)
   z-index scale: sticky header 40, bottom nav / sticky bar 50, overlay 60,
   drawer 70, bottom sheet / modal 80, toast 90.
   ========================================================================= */

@media (min-width: 1024px) {
  .only-mobile { display: none !important; }
  /* New layout-only wrappers are transparent on desktop (same render). */
  .nox-m-fields, .nox-pic { display: contents; }
  /* with display:contents the <source>s would become flex items (gap shift) */
  .nox-pic > source { display: none; }
}

@media (max-width: 1023.98px) {

  /* ======================================================================
     0. Mobile tokens
     ====================================================================== */
  :root {
    --m-gutter: 16px;
    --m-topbar-h: 56px;
    --m-bottomnav-h: 64px;
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-tap: 44px;
  }

  /* Inputs at 16px+ so iOS Safari does not auto-zoom on focus. Inputs that
     are already larger keep their own size (excluded). */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not(.nox-deposit-input):not(.nox-track-input),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* <picture> wrapper of the logo (partials/nox-logo) adds no box */
  .nox-pic { display: contents; }
  .nox-pic > source { display: none; }

  :focus-visible {
    outline: 2px solid var(--nox-gold, #d4af37);
    outline-offset: 2px;
  }

  /* Touch feedback instead of hover-only effects */
  a:active, button:active { -webkit-tap-highlight-color: transparent; }

  /* ======================================================================
     1. Store shell (layouts/dashboard + layouts/profile)
     ====================================================================== */

  /* ---- Main content: 16px gutters, room for the bottom nav ---- */
  .nox-shell .nox-main {
    padding: 16px var(--m-gutter) calc(var(--m-bottomnav-h) + var(--m-safe-bottom) + 24px);
  }

  /* ---- Top app bar: menu, logo, search, account ---- */
  .nox-topbar {
    height: var(--m-topbar-h);
    padding: 0 12px;
    gap: 8px;
  }
  .nox-topbar .nox-topbar__toggle {
    display: flex;
    width: var(--m-tap); height: var(--m-tap);
    flex-shrink: 0;
  }
  .nox-topbar .nox-topbar__collapse,
  .nox-topbar .nox-search__kbd,
  .nox-topbar .nox-lang-toggle,
  .nox-topbar .nox-locale-switch,
  .nox-topbar .nox-balance,
  .nox-topbar__actions > a.nox-nav__item { display: none !important; }

  .nox-m-logo {
    display: flex; align-items: center; min-height: var(--m-tap);
    flex-shrink: 0;
  }
  .nox-m-logo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }

  .nox-topbar__actions { gap: 8px; margin-left: auto; }

  .nox-m-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: var(--m-tap); height: var(--m-tap); flex-shrink: 0;
    background: var(--nox-panel-soft); color: var(--nox-text);
    border: 1px solid var(--nox-border); border-radius: 10px;
  }
  .nox-m-icon-btn:active { transform: scale(0.96); }

  .nox-topbar .nox-login-btn {
    display: inline-flex; align-items: center; min-height: var(--m-tap);
    padding: 0 16px; font-size: 0.85rem; white-space: nowrap;
  }
  .nox-topbar .nox-profile-toggle { min-height: var(--m-tap); padding: 4px; }
  .nox-topbar .nox-profile-toggle .hide-on-mobile { display: none !important; }

  /* ---- Search: the existing form becomes a full-width bar on demand ---- */
  .nox-topbar .nox-search { display: none; }
  body.nox-m-search-open .nox-topbar .nox-search {
    display: flex;
    position: absolute; inset: 0; z-index: 2;
    max-width: none; margin: 0;
    padding: 0 8px 0 16px;
    border: 0; border-radius: 0;
    background: var(--nox-bg-900);
    box-shadow: none;
  }
  /* the desktop bevel layers would tint the full-width bar gold */
  body.nox-m-search-open .nox-topbar .nox-search { clip-path: none; }
  body.nox-m-search-open .nox-topbar .nox-search::before { background: transparent; }
  body.nox-m-search-open .nox-topbar .nox-search::after {
    inset: 0; clip-path: none; background: var(--nox-bg-900);
    border-bottom: 1px solid var(--nox-gold);
  }
  body.nox-m-search-open .nox-topbar .nox-search input { height: var(--m-tap); }
  .nox-topbar .nox-search input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
  .nox-m-search-cancel {
    min-height: var(--m-tap); padding: 0 12px; margin-left: 4px;
    color: var(--nox-gold-soft); font-weight: 600; font-size: 0.9rem;
    background: transparent; border: 0; white-space: nowrap;
  }
  body.nox-m-search-open::before {
    content: ''; position: fixed; inset: 0; z-index: 39;
    background: rgba(0, 0, 0, 0.6);
  }
  body.nox-m-search-open .nox-search__results {
    max-height: calc(100dvh - var(--m-topbar-h) - 24px);
  }
  .nox-search__result { min-height: 56px; }

  /* ---- Drawer: the desktop sidebar, off-canvas below 1024px ---- */
  .nox-shell .nox-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(85vw, 320px);
    height: 100vh; height: 100dvh;
    transform: translateX(-100%);
    z-index: 70;
    /* hidden (not focusable) once the slide-out has finished */
    transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
    visibility: hidden;
  }
  .nox-shell .nox-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease-out, visibility 0s;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
  }
  .nox-sidebar-overlay { z-index: 60; }
  .nox-sidebar .nox-sidebar__panel {
    padding: 12px 16px calc(16px + var(--m-safe-bottom));
    overscroll-behavior: contain;
  }
  .nox-sidebar .nox-user { justify-content: flex-start; margin-bottom: 12px; min-height: var(--m-tap); }
  .nox-drawer-close {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: var(--m-tap); height: var(--m-tap);
    display: flex; align-items: center; justify-content: center;
    color: var(--nox-text); background: var(--nox-panel-soft);
    border: 1px solid var(--nox-border); border-radius: 10px;
  }
  .nox-sidebar .nox-nav__item,
  .nox-sidebar .nox-nav__item.hide-on-mobile {
    display: flex !important;
    min-height: 48px;
  }
  .nox-drawer-account {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 12px; padding: 12px 14px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
    border: 1px solid var(--nox-border-hi);
  }
  .nox-drawer-account small { display: block; font-size: 0.75rem; color: var(--nox-text-muted); }
  .nox-drawer-account strong { display: block; color: var(--nox-gold-soft); font-variant-numeric: tabular-nums; }
  .nox-drawer-account a {
    display: inline-flex; align-items: center; min-height: var(--m-tap); padding: 0 16px;
    background: linear-gradient(135deg, var(--nox-gold), var(--nox-gold-soft));
    color: var(--nox-bg-900); font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  }
  .nox-drawer-prefs { padding: 4px 4px 8px; display: flex; flex-direction: column; gap: 12px; }
  .nox-drawer-pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .nox-drawer-pref > span { font-size: 0.9rem; color: var(--nox-text-muted); }
  .nox-drawer-pref .nox-lang-toggle { margin: 0; }
  .nox-drawer-pref .nox-lang-toggle a { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; }
  .nox-drawer-pref .nox-lang-toggle a .nox-lang-code { display: inline; }
  .nox-drawer-pref select {
    min-height: var(--m-tap); padding: 0 12px; min-width: 110px;
    background: var(--nox-panel-soft); color: var(--nox-text);
    border: 1px solid var(--nox-border-hi);
  }
  .nox-drawer-pref select option { background: #04211f; }
  .nox-sidebar .nox-premium-card { margin-top: 16px; }
  .nox-sidebar .nox-premium-card__btn { min-height: var(--m-tap); display: inline-flex; align-items: center; }
  body.nox-drawer-open { overflow: hidden; }

  /* ---- Bottom navigation: 5 destinations ---- */
  .nox-bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: calc(var(--m-bottomnav-h) + var(--m-safe-bottom));
    padding: 0 4px var(--m-safe-bottom);
    background: rgba(0, 31, 31, 0.96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--nox-border);
    z-index: 50;
    justify-content: space-around; align-items: stretch;
  }
  .nox-bottom-nav__item {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--nox-text-muted); text-decoration: none;
  }
  .nox-bottom-nav__item svg { width: 24px; height: 24px; }
  .nox-bottom-nav__item span {
    font-size: 12px; line-height: 16px; font-weight: 600;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nox-bottom-nav__item.is-active { color: var(--nox-gold-soft); }
  .nox-bottom-nav__item:active { background: rgba(255, 255, 255, 0.06); }
  /* Product page uses its own sticky checkout bar; hide while typing too */
  body.nox-page-product .nox-bottom-nav,
  body.nox-kb-open .nox-bottom-nav { display: none; }
  body.nox-page-product .nox-shell .nox-main { padding-bottom: calc(24px + var(--m-safe-bottom)); }

  /* ---- Store footer: 2-column link grid, 44px rows ---- */
  .nox-footer { margin-top: 40px; padding: 20px 0 0; }
  .nox-footer > div { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nox-footer .gap-5 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; width: 100%;
    font-size: 0.875rem;
  }
  .nox-footer .gap-5 a { min-height: var(--m-tap); display: flex; align-items: center; }

  /* Generic store buttons reach the 44px touch target */
  .nox-shell .nox-btn { min-height: var(--m-tap); }

  /* ======================================================================
     1b. Bottom sheets (all modals below 1024px)
     ====================================================================== */
  .nox-modal-backdrop.active { align-items: flex-end; padding: 0; z-index: 80; }
  .nox-modal-backdrop .nox-modal {
    max-width: none; width: 100%;
    max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    clip-path: none; border-radius: 16px 16px 0 0;
    padding: 28px var(--m-gutter) calc(16px + var(--m-safe-bottom));
    background: #062e2a;
    animation: noxSheetIn 0.25s ease-out;
  }
  .nox-modal-backdrop .nox-modal::before {
    content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25);
  }
  .nox-modal-backdrop .nox-modal__close {
    width: var(--m-tap); height: var(--m-tap);
    display: flex; align-items: center; justify-content: center; margin-right: -8px;
  }
  .nox-modal-backdrop .nox-modal > .nox-btn:last-child { position: sticky; bottom: 0; min-height: 48px; }
  @keyframes noxSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } }

  .nox-m-sheet {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: flex-end;
    background: rgba(0, 0, 0, 0.6);
  }
  .nox-m-sheet[hidden] { display: none; }
  .nox-m-sheet__panel {
    position: relative; width: 100%;
    max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 24px var(--m-gutter) calc(16px + var(--m-safe-bottom));
    background: #062e2a; border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--nox-border-hi);
    animation: noxSheetIn 0.25s ease-out;
  }
  .nox-m-sheet__handle {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25);
  }
  .nox-m-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .nox-m-sheet__head h3 { margin: 0; font-size: 18px; color: var(--nox-gold-soft); }
  .nox-m-sheet__close {
    width: var(--m-tap); height: var(--m-tap); margin-right: -8px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--nox-text);
  }
  .nox-m-sheet__body { margin: 0; }
  .nox-m-sheet__row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--nox-border); font-size: 15px;
  }
  .nox-m-sheet__row dt { color: var(--nox-text-muted); }
  .nox-m-sheet__row dd { margin: 0; color: #fff; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
  .nox-m-sheet__row.is-total { border-bottom: 0; }
  .nox-m-sheet__row.is-total dd { font-size: 20px; color: var(--nox-gold-soft); }
  body.nox-sheet-open { overflow: hidden; }

  /* ======================================================================
     1c. Product page /product/{slug} (PRD 7.1)
     ====================================================================== */
  .nox-page-product .nox-shell .nox-main {
    padding-bottom: calc(72px + var(--m-safe-bottom) + 24px);
  }
  /* minmax(0,1fr): a plain 1fr track grows to the widest no-wrap child (chip row) */
  .nox-order-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nox-order-aside { position: static; }
  .nox-order-grid, .nox-order-extra { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .nox-order-extra { margin-top: 16px; }
  .nox-order-form-panel, .nox-order-items-panel, .nox-order-extra__panel, .nox-order-summary-card {
    padding: 20px 16px;
  }
  #step3Panel { margin-top: 16px !important; }

  .nox-product-hero { flex-direction: column; text-align: center; padding: 20px 16px; gap: 12px; }
  .nox-product-hero h1 { font-size: clamp(1.4rem, 5vw + 0.5rem, 1.9rem); overflow-wrap: anywhere; }
  .nox-product-back { display: inline-flex; align-items: center; min-height: var(--m-tap); }

  /* Step header: number in a 28px circle, 18px title */
  .nox-order-section [data-step] {
    display: flex !important; align-items: center; gap: 10px;
    margin-bottom: 16px;
  }
  .nox-order-section [data-step]::before {
    content: attr(data-step);
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--nox-gold), var(--nox-gold-soft));
    color: var(--nox-bg-900); font-weight: 800; font-size: 14px;
  }
  .nox-order-section [data-step] .nox-section__eyebrow { display: none; }
  .nox-order-section [data-step] .nox-section__title {
    font-size: 18px; line-height: 24px; margin: 0; padding-left: 0;
  }
  .nox-order-section [data-step] .nox-section__title::before { display: none; }
  .nox-order-section [data-step] > div { display: contents; }

  /* Account fields: two short fields share a row (2/3 + 1/3) */
  .nox-m-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
  .nox-m-fields[data-fields="2"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .nox-m-fields .nox-form-group { min-width: 0; margin-bottom: 16px; }
  .nox-m-fields .nox-form-group label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nox-order-section .nox-form-input { min-height: 48px; }
  .nox-order-section .nox-form-group > div[style*="display:flex"] .nox-btn { flex: 0 0 88px; min-height: 48px; }

  /* Item categories: one swipeable row */
  .nox-item-categories {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 0 16px; padding: 2px 0;
  }
  .nox-item-categories::-webkit-scrollbar { display: none; }
  .nox-item-cat { flex: 0 0 auto; min-height: var(--m-tap); padding: 0 16px; scroll-snap-align: start; white-space: nowrap; }

  /* Item grid: full list (no nested scroll box), 2 columns, 3 from 480px */
  .nox-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none; overflow: visible; min-height: 0; padding-right: 0; gap: 12px;
  }
  .nox-item-card { min-height: 72px; justify-content: center; padding: 12px; }
  .nox-item-card__name { overflow-wrap: anywhere; font-size: 14px; line-height: 20px; }
  .nox-item-card__price { font-variant-numeric: tabular-nums; }
  /* Selected = 2px brand border on a dark tinted card (the translucent
     desktop fill turned the whole card gold and the text unreadable) */
  .nox-item-card.selected::after,
  .nox-pay-opt:has(input:checked)::after {
    inset: 2px;
    background: linear-gradient(rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.14)), #072f2b;
  }
  .nox-item-card:active { transform: scale(0.98); }
  .nox-item-empty { padding: 24px; text-align: center; grid-column: 1 / -1; }

  /* Payment methods: collapsible groups, 56px rows */
  .nox-pay-options { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .nox-pay-group {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; padding: 0 14px;
    background: var(--nox-panel-soft); border: 1px solid var(--nox-border-hi);
    color: #fff; font-weight: 700; font-size: 15px; text-align: left;
  }
  .nox-pay-group small { color: var(--nox-text-muted); font-weight: 500; }
  .nox-pay-group__fee { margin-left: auto; color: var(--nox-gold-soft); font-size: 13px; }
  .nox-pay-group::after {
    content: ''; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s ease-out; margin-bottom: 4px;
  }
  .nox-pay-group[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -4px; }
  .nox-pay-opt { min-height: 56px; }
  .nox-pay-opt[data-group]:not(.is-group-open) { display: none; }
  .nox-pay-opt .nox-pay-opt__total { font-variant-numeric: tabular-nums; }
  .nox-fee-info-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: var(--m-tap); margin-top: 8px;
    color: var(--nox-mint); font-size: 14px; font-weight: 600;
    background: none; border: 0; text-decoration: underline; text-underline-offset: 3px;
  }

  /* Order summary card stays in the flow, below step 4 */
  .nox-order-summary-card .nox-order-summary__detail strong { overflow-wrap: anywhere; }
  .nox-order-summary-card .nox-btn { min-height: 48px; }

  /* Sticky checkout bar */
  .nox-m-checkout {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; align-items: center; gap: 12px;
    min-height: calc(72px + var(--m-safe-bottom));
    padding: 10px var(--m-gutter) calc(10px + var(--m-safe-bottom));
    background: rgba(0, 31, 31, 0.97);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--nox-border-hi);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }
  body.nox-kb-open .nox-m-checkout { display: none; }
  .nox-m-checkout__sum {
    flex: 1; min-width: 0; min-height: 48px;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    background: none; border: 0; padding: 0; color: #fff; text-align: left;
  }
  .nox-m-checkout__sum small {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; line-height: 16px; color: var(--nox-text-muted);
  }
  .nox-m-checkout__sum strong { font-size: 18px; line-height: 24px; color: var(--nox-gold-soft); font-variant-numeric: tabular-nums; }
  .nox-m-checkout__sum span {
    max-width: 100%; font-size: 12px; line-height: 16px; color: var(--nox-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nox-m-checkout__pay {
    flex-shrink: 0; min-height: 48px; min-width: 132px; max-width: 55%;
    padding: 0 18px; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nox-m-checkout__pay:disabled {
    /* stays readable (>= 3:1) and keeps its "why" label */
    background: rgba(255, 255, 255, 0.08); color: var(--nox-text-muted) !important; filter: none; cursor: not-allowed;
  }
  .nox-m-checkout__pay:disabled::before, .nox-m-checkout__pay:disabled::after { background: rgba(255, 255, 255, 0.1); }

  /* ======================================================================
     1d. Store /store (PRD 7.2; /games redirects here)
     ====================================================================== */

  /* Hero slider: 16:9 image, copy below the image (no text over artwork).
     Selectors carry .nox-main because the partial's own <style> sits in the
     body, after this file. */
  .nox-main .nox-hero { margin-bottom: 24px; }
  .nox-main .nox-hero .swiper { -webkit-mask-image: none; mask-image: none; }
  .nox-main .nox-hero .swiper-slide {
    height: auto; display: flex; flex-direction: column;
    background: var(--nox-panel);
  }
  .nox-main .nox-hero .swiper-slide img {
    aspect-ratio: 16 / 9; height: auto; flex-shrink: 0; transform: none;
  }
  .nox-main .nox-hero .nox-hero__overlay {
    position: static; inset: auto; flex: 1;
    justify-content: flex-start;
    padding: 14px 16px 36px;
    background: linear-gradient(180deg, rgba(0, 18, 18, 0.6), rgba(0, 18, 18, 0.95));
  }
  .nox-main .nox-hero .nox-hero__overlay h2 {
    font-size: 20px; line-height: 26px; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nox-main .nox-hero .nox-hero__overlay p {
    margin: 6px 0 12px; font-size: 14px; line-height: 20px; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nox-main .nox-hero .nox-hero__overlay .nox-btn { min-height: var(--m-tap); }
  .nox-main .nox-hero .swiper-pagination { bottom: 10px !important; text-align: left; padding-left: 10px; }
  .nox-main .nox-hero .swiper-pagination-bullet { position: relative; margin: 0 7px !important; }
  /* 24px tap area around each dot */
  .nox-main .nox-hero .swiper-pagination-bullet::after { content: ''; position: absolute; inset: -8px; }

  /* Flash sale: cards ~85% wide so the next one peeks */
  .nox-flash__title { font-size: 22px; }
  .nox-flash__grid {
    overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter) 8px;
    scroll-padding-left: var(--m-gutter);
  }
  .nox-flash__grid::-webkit-scrollbar { display: none; }
  .nox-flash__grid > .nox-flash__card.nox-gcard { flex: 0 0 85%; max-width: 360px; }
  .nox-gcard__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
  .nox-gcard__price strong { font-variant-numeric: tabular-nums; }

  /* Sticky category chips under the top bar */
  .nox-m-catnav {
    position: sticky; top: var(--m-topbar-h); z-index: 39;
    margin: 0 calc(-1 * var(--m-gutter)) 16px;
    padding: 8px 0;
    background: rgba(0, 31, 31, 0.94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--nox-border);
  }
  .nox-m-catnav__track {
    display: flex; gap: 8px; overflow-x: auto;
    padding: 0 var(--m-gutter); scroll-padding: 0 var(--m-gutter);
    scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .nox-m-catnav__track::-webkit-scrollbar { display: none; }
  .nox-m-catnav__chip {
    flex: 0 0 auto; display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 14px; scroll-snap-align: start;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--nox-text-muted); background: var(--nox-panel-soft);
    border: 1px solid var(--nox-border); border-radius: 999px;
    position: relative;
  }
  /* keep a 44px touch target around the 36px chip */
  .nox-m-catnav__chip::after { content: ''; position: absolute; inset: -4px 0; }
  .nox-m-catnav__chip.is-active {
    color: var(--nox-bg-900); font-weight: 700;
    background: linear-gradient(135deg, var(--nox-gold), var(--nox-gold-soft)); border-color: transparent;
  }
  /* jump targets clear the top bar + chip row */
  .nox-store-cat__head[id], #sec-berita, #games { scroll-margin-top: calc(var(--m-topbar-h) + 64px); }

  /* Category header: name + count left, "Lihat Semua" right */
  .nox-store-cat { margin-bottom: 28px; }
  /* icon | name over count | "Lihat Semua" — the name gets the full middle column */
  .nox-store-cat__head {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "icon title more" "icon count more";
    column-gap: 10px; row-gap: 0; align-items: center; margin-bottom: 12px;
  }
  .nox-store-cat__icon { grid-area: icon; width: 34px; height: 38px; }
  .nox-store-cat__titles { grid-area: title; min-width: 0; }
  .nox-store-cat__count { grid-area: count; font-size: 12px; line-height: 16px; }
  .nox-store-cat .nox-section__title {
    font-size: 18px; line-height: 24px; padding-left: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nox-store-cat .nox-section__title::before { display: none; }
  .nox-store-cat .nox-section__eyebrow { display: none; }
  .nox-store-cat__rule { display: none; }
  .nox-store-cat .nox-cat-expand {
    grid-area: more; margin-left: auto; flex-shrink: 0;
    min-height: var(--m-tap); padding: 0 4px; display: inline-flex; align-items: center;
    font-size: 14px; font-weight: 600; white-space: nowrap;
  }

  /* Collapsed category = one swipeable row (max 10 cards), Play Store style */
  .nox-store-cat .nox-cat-grid.is-collapsed {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter) 8px;
    scroll-padding-left: var(--m-gutter);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .nox-store-cat .nox-cat-grid.is-collapsed::-webkit-scrollbar { display: none; }
  .nox-store-cat .nox-cat-grid.is-collapsed > a { flex: 0 0 140px; scroll-snap-align: start; }
  .nox-store-cat .nox-cat-grid.is-collapsed > a:nth-child(n+11) { display: none; }
  /* Expanded ("Lihat Semua") = full grid, 2 / 3 / 4 columns */
  .nox-store-cat .nox-cat-grid:not(.is-collapsed) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }

  /* Game card: whole card is the tap target, long names clamp to 2 lines */
  .nox-game-card__info { padding: 10px; }
  .nox-game-card__title {
    font-size: 14px; line-height: 18px;
    overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nox-game-card__price { font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
  .nox-game-card__price strong { font-size: 13px; }
  .nox-game-card__region { font-size: 11px; padding: 3px 7px; }
  .nox-game-card:active { transform: scale(0.98); }

  /* Below-the-fold categories render lazily */
  .nox-store-cat ~ .nox-store-cat ~ .nox-store-cat {
    content-visibility: auto; contain-intrinsic-size: auto 320px;
  }

  /* News: vertical list, 96px thumbnail on the left */
  .nox-news-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nox-news-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; align-items: start; }
  .nox-news-card:not(:has(.nox-news-card__img)) { grid-template-columns: minmax(0, 1fr); }
  .nox-news-card:hover { transform: none; }
  .nox-news-card__img { width: 96px; height: 96px; aspect-ratio: 1 / 1; }
  .nox-news-card__body { padding: 0; min-width: 0; }
  .nox-news-card__label { font-size: 11px; margin-bottom: 6px; }
  .nox-news-card h3 {
    font-size: 15px; line-height: 20px; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nox-news-card p {
    font-size: 13px; line-height: 18px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .nox-news-card__link { min-height: var(--m-tap); display: inline-flex; align-items: center; margin-top: 4px; }

  /* ======================================================================
     1e. Shared mobile carousel (scroll-snap rows + dots from mobile.js)
     ====================================================================== */
  .nox-m-dots { display: flex; justify-content: center; gap: 0; margin-top: 8px; }
  .nox-m-dots button {
    width: 24px; height: 24px; padding: 0; border: 0; background: transparent;
    display: flex; align-items: center; justify-content: center;
  }
  .nox-m-dots button::before {
    content: ''; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.3); transition: width 0.2s ease-out, background 0.2s;
  }
  .nox-m-dots button[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--nox-gold); }

  /* ======================================================================
     1f. Membership /membership (PRD 7.5)
     ====================================================================== */
  #membership-cards, #membership-benefits, #membership-compare { scroll-margin-top: calc(var(--m-topbar-h) + 16px); }
  .nox-mp-hero { padding: 24px 16px; margin-bottom: 32px; }
  .nox-mp-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nox-mp-hero__showcase { order: -1; }
  .nox-mp-rankcard.is-hero { width: 100%; max-width: 420px; transform: none; animation: none; }
  .nox-mp-hero__title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); line-height: 1.15; }
  .nox-mp-hero__desc { font-size: 16px; line-height: 24px; }
  .nox-mp-hero__actions { flex-direction: column; gap: 12px; }
  .nox-mp-hero__actions .nox-btn { width: 100%; min-height: 48px; justify-content: center; }
  .nox-mp-rankbar { max-width: none; }
  /* 4 stats as a 2 x 2 grid that never clips its labels */
  .nox-mp-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .nox-mp-stat { padding: 12px 8px; }
  .nox-mp-stat strong { font-size: 20px; line-height: 26px; }
  .nox-mp-stat span { display: block; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; overflow-wrap: anywhere; }

  /* Tier cards: swipeable carousel, 85% wide, ribbon stays visible */
  .nox-mp-grid {
    display: flex; gap: 12px; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 8px var(--m-gutter) 4px;
    scroll-padding-left: var(--m-gutter);
  }
  .nox-mp-grid::-webkit-scrollbar { display: none; }
  .nox-mp-grid > .nox-mp-rank { flex: 0 0 85%; max-width: 380px; scroll-snap-align: start; display: flex; flex-direction: column; }
  .nox-mp-rank.is-popular, .nox-mp-rank:hover { transform: none; }
  .nox-mp-rank__head { padding-right: 52px; }
  .nox-mp-rank__ident { min-width: 0; }
  .nox-mp-rank__ident h3 { overflow-wrap: anywhere; }
  .nox-mp-rank__perks { flex: 1; }
  .nox-mp-rank__cta .nox-btn { min-height: 48px; justify-content: center; }

  /* Comparison table: scrolls inside its box, sticky first column */
  .nox-m-scroll-hint { margin: 0 0 8px; font-size: 12px; color: var(--nox-text-muted); text-align: right; }
  .nox-mp-compare-wrap {
    position: relative; overscroll-behavior-x: contain;
    /* right-edge shadow hints there is more to swipe; the "local" cover
       layer hides it once the table is scrolled to its end */
    background:
      linear-gradient(to left, var(--nox-panel) 40%, transparent) right center / 40px 100% no-repeat local,
      linear-gradient(to left, rgba(0, 0, 0, 0.45), transparent) right center / 24px 100% no-repeat scroll,
      var(--nox-panel);
  }
  .nox-mp-compare { min-width: 0; width: max-content; }
  .nox-mp-compare th, .nox-mp-compare td { padding: 12px; font-size: 14px; min-width: 112px; }
  .nox-mp-compare th:first-child, .nox-mp-compare td:first-child {
    position: sticky; left: 0; z-index: 1;
    min-width: 140px; max-width: 160px; white-space: normal;
    background: #062b28;
    box-shadow: 1px 0 0 var(--nox-border);
  }
  .nox-mp-compare thead th:first-child { z-index: 2; background: #051f1d; }
  .nox-mp-compare__th { font-size: 14px; }
  .nox-mp-compare__th small { font-size: 12px; }

  /* Benefits: 2 columns, icon on top */
  .nox-mp-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .nox-mp-benefit { padding: 16px 14px; }
  .nox-mp-benefit:hover { transform: none; }
  .nox-mp-benefit__ic { width: 40px; height: 44px; margin-bottom: 10px; }
  .nox-mp-benefit h3 { font-size: 15px; line-height: 20px; }
  .nox-mp-benefit p { font-size: 13px; line-height: 19px; }

  .nox-mp-cta { padding: 28px 16px; margin-top: 40px; }
  .nox-mp-cta__actions { flex-direction: column; }
  .nox-mp-cta__actions .nox-btn { width: 100%; min-height: 48px; justify-content: center; }

  /* ======================================================================
     1g. Tentang Kami (store) /aboutus (PRD 7.6)
     ====================================================================== */
  .nox-about-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 16px; gap: 20px; }
  .nox-about-hero__right { order: -1; }
  .nox-about-hero__right img { aspect-ratio: 4 / 3; max-height: 220px; width: auto; object-fit: contain; }
  .nox-about-hero__title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); }
  .nox-about-hero__desc { font-size: 16px; line-height: 24px; }
  .nox-about-hero__cta { flex-direction: column; gap: 12px; margin-bottom: 0; }
  .nox-about-hero__cta .nox-btn { width: 100%; min-height: 48px; justify-content: center; }
  /* value cards: icon left, text right (2 x 2 from 480px) */
  .nox-values-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .nox-value {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px;
    padding: 16px; align-items: start;
  }
  .nox-value__icon { grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; }
  .nox-value h3 { font-size: 16px; line-height: 22px; margin: 0 0 4px; }
  .nox-value p { font-size: 14px; line-height: 20px; margin: 0; }
  .nox-value:hover { transform: none; }
  .nox-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  /* ======================================================================
     1h. FAQ (store /faq) (PRD 7.7)
     ====================================================================== */
  .nox-page-hero { padding: 24px 16px; margin-bottom: 20px; }
  .nox-page-hero__title { font-size: 26px; line-height: 32px; }
  .nox-page-hero__desc { font-size: 16px; line-height: 24px; margin-bottom: 16px; }
  .nox-page-hero .nox-btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
  .nox-faq-search input { min-height: 48px; }
  .nox-faq-q { min-height: 56px; padding: 14px 16px; text-align: left; gap: 12px; font-size: 15px; line-height: 21px; }
  .nox-faq-icon { flex-shrink: 0; }
  .nox-faq-a__content { padding: 0 16px 16px; font-size: 15px; line-height: 24px; }
  .nox-faq-empty { padding: 28px 16px; line-height: 1.6; }
  .nox-faq-empty a, .land-faq__empty a {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--m-tap); margin-top: 8px; color: var(--nox-mint); font-weight: 600;
  }

  /* ======================================================================
     1i. Cek Transaksi /cek-transaksi (PRD 7.8)
     ====================================================================== */
  .nox-track-container {
    max-width: none; margin: 8px 0 0; padding: 28px 16px;
    display: flex; flex-direction: column;
  }
  .nox-track-icon { width: 56px; height: 56px; margin-bottom: 16px; }
  .nox-track-title { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
  .nox-track-subtitle { font-size: 15px; line-height: 22px; margin-bottom: 20px; }
  .nox-track-input-group { margin-bottom: 12px; }
  .nox-track-input { min-height: 48px; font-size: 16px; letter-spacing: 0.04em; }
  .nox-track-btn { min-height: 48px; }
  /* the "not found" message goes under the field it is about */
  .nox-track-container > .nox-track-msg.is-error { order: 10; margin: 12px 0 0; }
  /* result: status card with a copy button for the invoice */
  .nox-track-msg { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
  .nox-m-copy {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--m-tap); min-height: 36px; padding: 0 12px; margin-left: 6px;
    background: var(--nox-panel-soft); border: 1px solid var(--nox-border-hi);
    color: var(--nox-gold-soft); font-size: 13px; font-weight: 700; vertical-align: middle;
    position: relative;
  }
  .nox-m-copy::after { content: ''; position: absolute; inset: -4px 0; }
  .nox-m-copy.is-copied { color: var(--nox-mint); border-color: var(--nox-mint); }

  /* ======================================================================
     2. Landing shell (layouts/landing)
     ====================================================================== */
  .land-nav { padding: 0 var(--m-gutter); height: 64px; }
  .land-nav__links { display: none; }
  .land-nav__actions { gap: 8px; }
  .land-nav__actions .land-lang-toggle { display: none; }
  .land-nav__actions > .land-btn--gold {
    white-space: nowrap; min-height: var(--m-tap);
    display: inline-flex; align-items: center;
    padding: 0 16px; font-size: 0.85rem;
  }
  .land-nav__hamburger { display: flex; width: var(--m-tap); height: var(--m-tap); }
  .land-nav__logo img { height: 34px; }

  .land-mobile-menu {
    height: 100vh; height: 100dvh;
    justify-content: flex-start; align-items: stretch;
    gap: 0; padding: 80px 24px calc(24px + var(--m-safe-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    z-index: 110;
  }
  .land-mobile-menu > a:not(.land-btn) {
    display: flex; align-items: center; min-height: 48px;
    font-size: 1.1rem; border-bottom: 1px solid var(--nox-border);
  }
  .land-mobile-menu .land-mobile-menu__lang { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; color: var(--nox-text-muted); }
  .land-mobile-menu .land-lang-toggle a { min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; }
  .land-mobile-menu .land-lang-toggle a span { display: inline; }
  .land-mobile-menu > .land-btn {
    margin-top: auto; width: 100%; min-height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
  }
  /* the generic ".land-mobile-menu a" muted colour made the gold CTA unreadable */
  .land-mobile-menu > .land-btn--gold { color: var(--nox-bg-900); }
  .land-mobile-close { top: 12px; right: var(--m-gutter); }
  body.land-menu-open { overflow: hidden; }

  /* Anchored sections clear the fixed header */
  section[id] { scroll-margin-top: 72px; }

  /* Landing footer */
  .land-footer ul { gap: 0; }
  .land-footer ul a, .land-footer__address { min-height: var(--m-tap); display: inline-flex; align-items: center; }
  .land-footer__address { padding: 8px 0; }
  .land-footer__socials { gap: 8px; }
  .land-footer__social { width: var(--m-tap); height: var(--m-tap); }
  .land-footer__bottom { flex-direction: column; gap: 14px; text-align: center; }

  /* Landing buttons: 44px minimum */
  .land-btn { min-height: var(--m-tap); }

  /* ---- Landing page / (PRD 7.4) ---- */
  .land-section { padding: 48px 0; }
  .land-container { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .land-section__head { margin-bottom: 24px; }
  .land-section__title { font-size: 22px; line-height: 28px; }
  .land-section__desc { font-size: 16px; line-height: 24px; margin-bottom: 0; }

  /* Hero: no full-screen empty block on phones. Backdrop art swapped for a
     960px copy (57 KB WebP / 90 KB JPG instead of the 874 KB 1920px PNG). */
  .land-hero { min-height: auto; padding-top: 64px; }
  .land-hero {
    background:
      linear-gradient(180deg, rgba(0,22,22,0.82), rgba(0,22,22,0.55) 45%, var(--nox-bg-800) 86%, var(--nox-bg-700)),
      url('/img/kristal-960.jpg') no-repeat center top / cover,
      var(--nox-bg-900);
    background:
      linear-gradient(180deg, rgba(0,22,22,0.82), rgba(0,22,22,0.55) 45%, var(--nox-bg-800) 86%, var(--nox-bg-700)),
      image-set(url('/img/kristal-960.webp') type('image/webp'), url('/img/kristal-960.jpg') type('image/jpeg')) no-repeat center top / cover,
      var(--nox-bg-900);
  }
  .land-hero__grid { padding: 48px var(--m-gutter) 56px; }
  .land-hero.has-banner .land-hero__grid { padding: 40px var(--m-gutter) 40px; }
  .land-hero__title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); line-height: 1.2; margin-bottom: 20px; }
  .land-hero.has-banner .land-hero__title { margin-bottom: 20px; }
  .land-hero__ctas { flex-direction: column; gap: 12px; }
  .land-hero__ctas .land-btn { width: 100%; min-height: 48px; justify-content: center; }

  /* Leaderboard rows */
  .land-lb__row { min-height: 56px; }
  .land-lb__pts { font-variant-numeric: tabular-nums; }

  /* Popular games: one swipeable row of 10, full-width CTA below */
  .land-games__grid.land-games__grid--5 {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 0 var(--m-gutter) 8px;
    scroll-padding-left: var(--m-gutter);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .land-games__grid.land-games__grid--5::-webkit-scrollbar { display: none; }
  .land-games__grid--5 > .land-game-card { flex: 0 0 140px; scroll-snap-align: start; }
  .land-game-card__info h3 {
    font-size: 14px; line-height: 18px; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .land-game-card__info span { font-size: 12px; }
  .land-game-card__region { font-size: 11px; }
  .land-game-card:active { transform: scale(0.98); }
  .land-games__cta { margin-top: 20px; }
  .land-games__cta .land-btn, .land-cta-box .land-btn {
    width: 100%; min-height: 48px; justify-content: center; display: flex; align-items: center;
  }

  /* How to buy: vertical stepper (32px circles joined by a line) */
  .land-steps__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .land-steps__grid::before { display: none; }
  .land-step {
    display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px;
    text-align: left; padding-bottom: 20px;
  }
  .land-step__num {
    grid-row: 1 / 3; width: 32px; height: 32px; margin: 0;
    font-size: 14px; border-width: 1px;
  }
  .land-step:not(:last-child)::after {
    content: ''; position: absolute; left: 15px; top: 36px; bottom: 2px; width: 2px;
    background: var(--nox-border-hi);
  }
  .land-step h3 { font-size: 16px; line-height: 22px; margin: 4px 0 4px; }
  .land-step p { font-size: 14px; line-height: 20px; }
  .land-step:hover .land-step__num { transform: none; }

  /* Testimonials: swipeable cards, 85% wide */
  .land-testimonials__grid {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 calc(-1 * var(--m-gutter)); padding: 4px var(--m-gutter) 4px;
    scroll-padding-left: var(--m-gutter);
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .land-testimonials__grid::-webkit-scrollbar { display: none; }
  .land-testimonials__grid > .land-testimonial { flex: 0 0 85%; max-width: 400px; scroll-snap-align: start; padding: 20px; }
  .land-testimonial:hover { transform: none; }
  .land-testimonial__text { font-size: 15px; line-height: 22px; }

  /* Closing CTA */
  .land-cta-section { padding: 48px 0; }
  .land-cta-box { padding: 32px 16px; }
  .land-cta-box h2 { font-size: 22px; line-height: 28px; }

  /* ---- Landing "Tentang Kami" /tentang-kami ---- */
  .land-page-hero { padding: 96px 0 40px; }
  .land-page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .land-page-hero__title { font-size: clamp(1.75rem, 5vw + 0.75rem, 2.25rem); }
  .land-page-hero__desc { font-size: 16px; line-height: 24px; }
  .land-page-hero__ctas { flex-direction: column; gap: 12px; }
  .land-page-hero__ctas .land-btn { width: 100%; min-height: 48px; justify-content: center; display: flex; align-items: center; }
  /* six feature cards: icon left, text right; 2 columns from 600px */
  .land-features__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .land-feature {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px;
    padding: 18px 16px; align-items: start;
  }
  .land-feature__icon { grid-row: 1 / 3; width: 40px; height: 40px; margin: 0; }
  .land-feature__icon svg { width: 22px; height: 22px; }
  .land-feature h3 { font-size: 16px; line-height: 22px; margin-bottom: 4px; }
  .land-feature p { font-size: 14px; line-height: 20px; }
  .land-feature:hover { transform: none; }
  .land-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .land-team__card { padding: 18px 12px; }
  .land-team__photo { width: 72px; height: 72px; }

  /* ---- Landing FAQ /bantuan (PRD 7.7) ---- */
  .land-faq__search input { min-height: 48px; }
  .land-faq__q { min-height: 56px; padding: 14px 16px; gap: 12px; font-size: 15px; line-height: 21px; }
  .land-faq__a { padding: 0 16px 16px; font-size: 15px; line-height: 24px; }
  .land-faq__empty { padding: 28px 16px; }
  .land-faq__help .land-btn { width: 100%; min-height: 48px; justify-content: center; display: flex; align-items: center; }

  /* ---- Legal pages /terms, /privacy (PRD 7.9) ---- */
  .land-legal { padding: 88px 0 48px; }
  .land-legal__body { max-width: 65ch; }
  .land-legal__body h1 { font-size: 26px; line-height: 32px; }
  .land-legal__body h2 { font-size: 20px; line-height: 26px; margin: 24px 0 8px; }
  .land-legal__body p, .land-legal__body li { font-size: 16px; line-height: 26px; overflow-wrap: anywhere; }
  .land-legal__body a { display: inline-block; min-height: 24px; }

  /* ======================================================================
     3. Login (auth/login)
     ====================================================================== */
  .auth-wrap { min-height: 100vh; min-height: 100dvh; }
  /* decorative glows stay inside the viewport */
  .orb--1 { right: 0; width: min(360px, 90vw); height: min(360px, 90vw); }
  .orb--2 { left: 0; width: min(220px, 60vw); height: min(220px, 60vw); }
  .auth-input { min-height: 48px; }
  .auth-submit, .auth-google { min-height: 48px; width: 100%; }
  .auth-tab { min-height: var(--m-tap); }
  .auth-pw-toggle { min-width: var(--m-tap); min-height: var(--m-tap); }

  /* ======================================================================
     Performance (PRD 8): paint cost on phones
     Lighthouse showed ~15s of main-thread "Other" (paint/composite) work on
     a throttled phone, from endless decorative animations and backdrop blur.
     Functional motion (spinners, order-status pulse, flash-sale pulse) stays.
     ====================================================================== */
  .land-hero::before,
  .land-hero__orb,
  .nox-premium-card__icon,
  .nox-promo-popup__image img,
  .nox-about-hero__glow,
  .nox-mp-hero__fx,
  .nox-mp-rankcard__scan,
  .orb { animation: none !important; }
  .nox-premium-card::after { animation: none !important; }

  /* Backdrop blur on fixed bars and on every game-card badge is the most
     expensive effect on mobile GPUs; solid fills look the same at a glance. */
  .land-nav, .land-nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 31, 31, 0.97); }
  .nox-topbar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 31, 31, 0.98); }
  .nox-bottom-nav, .nox-m-catnav, .nox-m-checkout { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nox-shell .nox-sidebar { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, #001f1f, #03392c); }
  .land-mobile-menu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 20, 20, 0.99); }
  .nox-promo-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.82); }
  .nox-game-card__region, .land-game-card__region { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.62); }
  .nox-modal-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* ======================================================================
     Reduced motion
     ====================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .nox-shell .nox-sidebar, .nox-sidebar-overlay { transition: none; }
  }
}

@media (max-width: 359.98px) {
  :root { --m-gutter: 12px; }
  .nox-m-fields[data-fields="2"] { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 480px) and (max-width: 1023.98px) {
  .nox-item-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nox-store-cat .nox-cat-grid:not(.is-collapsed) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 480px) and (max-width: 1023.98px) {
  .nox-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
  .land-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nox-mp-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .nox-mp-grid > .nox-mp-rank { flex-basis: 46%; }
  .land-testimonials__grid > .land-testimonial { flex-basis: 46%; }
  .land-team__grid, .nox-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nox-store-cat .nox-cat-grid:not(.is-collapsed) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nox-store-cat .nox-cat-grid.is-collapsed > a { flex-basis: 160px; }
}

/* Touch screens: no hover-only reveal ("TOP UP" badge sits on the art) */
@media (max-width: 1023.98px) and (hover: none) {
  .nox-store-cat .nox-game-card__img::before { display: none; }
  .nox-game-card:hover { transform: none; }
}