/* ==== korea-1x menu :: design tokens (measured from reference) ==== */
:root{
  /* colors */
  --c-blue:#276aa5;        /* menu labels, icons, chevrons */
  --c-navy:#1d4268;        /* bold headings: 0 KRW, DOWNLOAD... */
  --c-green:#7eac2f;       /* Deposit / store buttons */
  --c-green-press:#6f9a28;
  --c-panel:#e9eef2;       /* balance pill, banner, search wrap, section bands */
  --c-icon-bg:#f3f8fc;     /* icon circles */
  --c-gear-active:#d4dee8; /* settings active square */
  --c-divider:#ecf0f3;     /* row separators */
  --c-section-txt:#8a97a4; /* CASINO / GAMES ... */
  --c-placeholder:#4d7bab; /* search placeholder */
  --c-red:#e63329;         /* notification badge */
  --c-white:#ffffff;
  --c-white-press:#f2f5f8;

  /* metrics */
  /* fluid metrics — scale smoothly from ~320px to large phones.
     Reference proportions preserved at ~412px. */
  --pad-x:clamp(12px, 4.1vw, 17px);   /* global horizontal gutter */
  --row-h:clamp(44px, 11.6vw, 46px);  /* menu row height */
  --circle:clamp(26px, 6.9vw, 28px);  /* icon circle diameter (matches reference) */
  --icon:clamp(14px, 3.7vw, 15px);    /* glyph size inside circle */
  --gap-icon:clamp(11px, 3.4vw, 14px);/* circle -> label gap */
  --row-py:clamp(7px, 2.1vw, 9px);    /* row top/bottom padding (~8px like reference) */
  --r-md:10px;             /* pills, buttons, fields */
  --r-sm:8px;
  --section-h:clamp(34px, 8.7vw, 36px);

  --fz-label:clamp(15.5px, 4.2vw, 17px);   /* menu labels */
  --fz-section:clamp(11px, 2.9vw, 12px);
  --fz-heading:clamp(16.5px, 4.7vw, 19px); /* DOWNLOAD THE 1XBET APP */
  --fz-balance:clamp(16px, 4.4vw, 18px);   /* 0 KRW */
  --fz-btn:clamp(14px, 3.9vw, 16px);

  --hairline:#e7ebef;
}

/* ---- tablet / laptop (>=600px, effective up to 1024): scale up as a centered modal column ---- */
@media (min-width:600px){
  :root{
    --pad-x:20px;
    --row-h:52px;
    --circle:34px;
    --icon:18px;
    --gap-icon:16px;
    --row-py:10px;
    --section-h:40px;
    --fz-label:18px;
    --fz-section:12px;
    --fz-heading:22px;
    --fz-balance:20px;
    --fz-btn:17px;
  }
  body{background:#eaeef2;}   /* light page so the white column reads as a modal */
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:var(--c-white);
  color:var(--c-blue);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;}