/* style.css — VIJAYBET / सट्टा मटका
 *
 * All 15 stylesheets merged into one, concatenated in their original <link>
 * order so the cascade is byte-for-byte equivalent. Rules whose selectors
 * cannot match this page were removed; :hover/:focus/::before rules were kept
 * by matching on the selector with pseudo-classes stripped, and JS-toggled
 * states (.active, [hidden], [open]) were matched with the page in those
 * states. Section banners below mark where each source file began.
 *
 * The redesign layer is the last section; delete it to revert the visual work.
 */
/* ==== inline-01.css =================================================== */
html.loaded {
    #p-img,
    .app-loading-bg {
      display: none;
    }
  }
body {
    margin: 0;
    padding: 0;
  }
#root {
    display: none;
  }
@property --rotate {
    syntax: '<angle>';
    initial-value: 132deg;
    inherits: false;
  }
:root {
    --card-height: 65vh;
    --card-width: 70vw;
  }

/* ==== 9384.3fd35acb.css =============================================== */
@font-face{font-family:Tahoma;font-style:normal;font-weight:400;src:url(../fonts/media-Tahoma.4e507db3.woff)}
body {background:#f5f6f9;font-family:Tahoma,sans-serif!important;line-height:normal;min-width:1200px}
.main-wrap {width:1200px}
.main-wrap {margin:auto;position:relative}
.app:not(.account) {display:flex;flex-direction:column;margin-top:160px;min-height:calc(100vh - 160px);position:relative}
footer {background-color:#111}
footer .footer-main {margin:0 auto}
footer .footer-main .footer-cont {display:flex;flex-wrap:wrap;justify-content:center}
footer .footer-main .footer-cont .footer-provider {background:#ffffff0d;padding:20px 60px}
footer .footer-main .footer-cont .footer-head {color:#fff;font-size:18px;line-height:30px;text-align:center}
footer .footer-main .footer-cont .footer-ref {display:flex;justify-content:space-between;margin:auto;max-width:1280px;padding:30px 0;position:relative;width:90%}
footer .footer-main .footer-cont .footer-ref .footer-nav,footer .footer-main .footer-cont .footer-ref .footer-ref-item {border-right:1px solid #d8d8d880;flex:1;padding:0 30px;text-align:left}
footer .footer-main .footer-cont .footer-ref .footer-nav:last-of-type,footer .footer-main .footer-cont .footer-ref .footer-ref-item:last-of-type {border-right:0 solid #000}
footer .footer-main .footer-cont .footer-ref .footer-nav .footer-head,footer .footer-main .footer-cont .footer-ref .footer-ref-item .footer-head {margin-bottom:10px;text-align:left}
footer .footer-main .footer-cont .footer-ref .footer-nav .submenu {display:none}
footer .footer-main .footer-cont .footer-ref .footer-nav a,footer .footer-main .footer-cont .footer-ref .footer-ref-item a {color:#fff;display:block;font-size:14px;line-height:30px;text-decoration:none}
footer .footer-main .footer-cont .footer-ref .footer-nav a:hover,footer .footer-main .footer-cont .footer-ref .footer-ref-item a:hover {color:#ff0}
footer .footer-main .footer-cont .footer-ref .footer-ref-item .footer-logo {width:200px}
footer .copy {background:#ffffff1a;color:#e5ebfa;font-size:12px;line-height:30px;text-align:center}
.quick-nav {background-color:#111;height:100px;line-height:100px;position:fixed;top:0;width:100%;z-index:11}
.quick-nav .main-header {align-items:center;color:#fff;display:flex;height:100px;justify-content:space-between;margin:0 auto;width:1200px}
.quick-nav .logo {background-position:0;background-repeat:no-repeat;background-size:contain;cursor:pointer;height:45px;width:250px}

/* ==== d-AppContainer.c58785da.css ===================================== */
:root {--toastify-color-light:#fff;--toastify-color-dark:#121212;--toastify-color-info:#3498db;--toastify-color-success:#07bc0c;--toastify-color-warning:#f1c40f;--toastify-color-error:#e74d3c;--toastify-color-transparent:#ffffffb3;--toastify-icon-color-info:var(--toastify-color-info);--toastify-icon-color-success:var(--toastify-color-success);--toastify-icon-color-warning:var(--toastify-color-warning);--toastify-icon-color-error:var(--toastify-color-error);--toastify-container-width:fit-content;--toastify-toast-width:320px;--toastify-toast-offset:16px;--toastify-toast-top:max(var(--toastify-toast-offset),env(safe-area-inset-top));--toastify-toast-right:max(var(--toastify-toast-offset),env(safe-area-inset-right));--toastify-toast-left:max(var(--toastify-toast-offset),env(safe-area-inset-left));--toastify-toast-bottom:max(var(--toastify-toast-offset),env(safe-area-inset-bottom));--toastify-toast-background:#fff;--toastify-toast-padding:14px;--toastify-toast-min-height:64px;--toastify-toast-max-height:800px;--toastify-toast-bd-radius:6px;--toastify-toast-shadow:0px 4px 12px #0000001a;--toastify-font-family:sans-serif;--toastify-z-index:9999;--toastify-text-color-light:#757575;--toastify-text-color-dark:#fff;--toastify-text-color-info:#fff;--toastify-text-color-success:#fff;--toastify-text-color-warning:#fff;--toastify-text-color-error:#fff;--toastify-spinner-color:#616161;--toastify-spinner-color-empty-area:#e0e0e0;--toastify-color-progress-light:linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);--toastify-color-progress-dark:#bb86fc;--toastify-color-progress-info:var(--toastify-color-info);--toastify-color-progress-success:var(--toastify-color-success);--toastify-color-progress-warning:var(--toastify-color-warning);--toastify-color-progress-error:var(--toastify-color-error);--toastify-color-progress-bgo:0.2}
@media(max-width:640px) {
  body::-webkit-scrollbar {display:none}
}
* {outline:none}
a,article,aside,body,details,div,footer,h1,h2,h3,html,img,li,nav,ol,p,section,span,summary,table,tbody,td,th,thead,tr,ul {border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:initial}
html {line-height:1}
ul {list-style:none}
table {border-collapse:collapse;border-spacing:0}
td,th {font-weight:400;text-align:left;vertical-align:middle}
a img {border:none}
article,aside,details,footer,nav,section,summary {display:block}
.lottery-game-list {align-items:center;display:flex;justify-content:flex-start}
.lottery-game-list {flex-wrap:wrap}
aside {background-color:#1e1f2c;box-sizing:border-box;padding:40px 0 0;position:relative;text-align:center}
.maintenance {cursor:not-allowed!important}
.maintenance-block {background-color:#000c;border-radius:8px;box-shadow:inset 0 0 0 4px gold,0 2px 6px #0009;box-sizing:border-box;color:#fff;font-size:14px;line-height:20px;position:absolute}
.maintenance-block .time {color:gold;display:block;font-weight:100;padding:10px 0}
.lottery-game-list {padding:20px 50px 120px;text-align:center}
.lottery-game-list li {cursor:pointer;margin:0 20px;padding-bottom:20px;position:relative;width:calc(20% - 40px)}
.lottery-game-list li:hover .cover {box-shadow:0 0 15px #fb2}
.lottery-game-list li:hover .cont {color:#fb2}
.lottery-game-list li .cover {background-color:#fff;border-radius:10px;margin:0 auto 12px;max-width:180px;overflow:hidden;position:relative;transition:.3s;width:100%}
.lottery-game-list li .cover img {display:block;height:auto;position:relative;width:100%}
.lottery-game-list li .cont {color:#fff}
/* whole card is an outbound link; keep the original look and hover colour */
.lottery-game-list li > a {display:block;color:inherit;text-decoration:none}
:root {--swiper-theme-color:#007aff}
:root {--swiper-navigation-size:44px}
footer .footer-provider {width:100%}
footer .payment-list {align-items:center;display:flex;gap:5px;justify-content:center}
footer .payment-list img {display:block;height:75px}
footer .footer-license {color:#999;display:flex;font-size:12px;gap:10px;line-height:1.4;margin:10px auto;width:90%}

/* ==== d-Home.5b2f7868.css ============================================= */
:root {--swiper-theme-color:#007aff}
:root {--swiper-navigation-size:44px}
body {background:#282828 url(../images/bg-texture.webp)}

/* ==== inline-14.css =================================================== */
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

/* ==== d-Game.fb37a0c9.css ============================================= */
.section-games.lottery-games {background:#110e2b url(../images/banner-main.jpg) top/100% auto no-repeat;min-height:calc(100vh - 345px);padding-top:250px}
.section-games.lottery-games .gametype-tag {margin:0 auto;max-width:1100px;text-align:center}
.section-games.lottery-games .gametype-tag .gametype-inner {align-items:center;background-color:#00000080;border-radius:50px;display:flex;gap:10px;padding:6px 0}
.section-games.lottery-games .gametype-tag .gametype-item {align-items:center;color:#fff;cursor:pointer;display:flex;flex:1;justify-content:center;line-height:45px;overflow:hidden;-webkit-user-select:none;user-select:none;white-space:nowrap}
.section-games.lottery-games .gametype-tag .gametype-item.active {background-color:#fb2;border-radius:50px;box-shadow:inset 0 -3px 0 #ffffff4d;position:relative}
.section-games.lottery-games .gametype-tag .gametype-item.active:before {background:linear-gradient(180deg,#ffffff4d 0,#fff0);content:"";height:80%;left:0;position:absolute;top:0;width:100%}

/* ==== tabs.css ======================================================== */
/* Added by hand — supports js/game-tabs.js.
   Everything else in css/ is untouched output from the saved page. */

.gametype-item {
  cursor: pointer;
}
/* The game grid is a flex container,so a hidden card must be taken out of
   layout explicitly or it would still occupy a column. */
ul[class*="game-list"] > li[hidden] {
  display: none !important;
}

/* ==== responsive.css ================================================== */
/* responsive.css
 *
 * The captured page is the site's desktop build: `body` carries a hard
 * `min-width:1200px` and the shell containers are fixed at 1200px,so anything
 * under ~1280px scrolls sideways. This file is a layer on top of the original
 * stylesheets — nothing in them was edited — that releases those fixed widths
 * and reflows the header,nav,game grid and footer.
 *
 * Breakpoints: 1279 (below desktop) / 1023 (tablet) / 767 (large phone)
 * / 479 (small phone).
 */

/* ------------------------------------------------------------------ 1279 */
@media (max-width: 1279px) {
  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden;
  }

  .main-wrap,
  .quick-nav .main-header,
  .gametype-tag,
  footer .main-wrap {
    width: 100% !important;
    max-width: 1200px !important;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }

  .lottery-game-list {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* 5 across only fits at desktop width */
  .lottery-game-list li {
    width: calc(25% - 40px) !important;
  }

  /* the nav has more items than fit — let it scroll instead of clipping */
  header .nav {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  header .nav::-webkit-scrollbar {
    display: none;
  }

  /* hover fly-outs are unusable once the bar scrolls */
  header .nav .submenu {
    display: none !important;
  }

  /* fixed side rail and promo bubble start colliding with the grid */
  #shortcut_list .side-menu {
    transform: scale(0.85);
    transform-origin: right center;
  }
  .floating-promo-center,
  .floating-game-el {
    right: 12px;
    top: auto !important;
    bottom: 90px;
  }
}
/* ------------------------------------------------------------------ 1023 */
@media (max-width: 1023px) {
  .lottery-game-list li {
    width: calc(33.333% - 32px) !important;
    margin: 0 16px;
  }

  /* the inline login form has nowhere to go; the buttons still work */
  .quick-nav .simple-logo-wrap .input-wrap,
  .quick-nav .simple-logo-wrap .forgot-password {
    display: none !important;
  }
  .quick-nav .main-header {
    gap: 12px;
  }
  .quick-nav .logo {
    width: 190px;
    flex: 0 0 auto;
  }

  /* the rail overlaps content on tablets and there is a duplicate of every
     one of its links in the footer */
  #shortcut_list {
    display: none !important;
  }
}
/* ------------------------------------------------------------------- 767 */
@media (max-width: 767px) {
  /* shrink the two stacked fixed bars so they don't eat the viewport */
  .quick-nav,
  .quick-nav .main-header {
    height: 64px !important;
    line-height: 64px !important;
  }
  header {
    top: 64px !important;
    height: 52px !important;
  }
  header .nav,
  header .nav .nav-item {
    height: 52px !important;
  }
  header .nav .nav-item a {
    font-size: 14px;
    padding: 0 8px 0 34px;
  }
  header .nav .nav-item a:before {
    font-size: 26px;
    left: 5px;
    top: 13px;
  }
  .app {
    margin-top: 116px !important;
  }

  .quick-nav .logo {
    width: 150px;
    height: 36px;
  }
  .quick-nav .main-header .right,
  .quick-nav .main-header .simple-logo-wrap,
  .quick-nav .main-header .btn-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
  }
  .quick-nav .header-btn,
  .quick-nav .main-header .header-btn {
    font-size: 13px;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 14px !important;
    height: 38px !important;
    line-height: 38px !important;
  }
  .quick-nav .lang .lang-list-wrap {
    right: 0;
  }

  /* banner height tracks the viewport width, so the offset has to as well */
  .section-games.lottery-games {
    padding-top: 30vw !important;
    background-size: 140% auto;
    background-position: top center;
  }

  /* six tabs will not fit — scroll them, and stop flex:1 squashing labels */
  .section-games .gametype-tag,
  .gametype-tag {
    padding-left: 8px;
    padding-right: 8px;
  }
  .section-games .gametype-tag .gametype-inner,
  .gametype-tag .gametype-inner {
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
  }
  .section-games .gametype-tag .gametype-inner::-webkit-scrollbar,
  .gametype-tag .gametype-inner::-webkit-scrollbar {
    display: none;
  }
  .section-games.lottery-games .gametype-tag .gametype-item,
  .gametype-tag .gametype-item {
    flex: 0 0 auto;
    line-height: 38px;
    padding: 0 18px;
    font-size: 14px;
    overflow: visible;
  }

  .lottery-game-list {
    padding: 16px 12px 60px;
  }
  .lottery-game-list li {
    width: calc(50% - 16px) !important;
    margin: 0 8px;
  }
  .lottery-game-list li .cont h2 {
    font-size: 13px;
  }

  /* footer columns stack */
  footer .footer-ref {
    flex-wrap: wrap;
  }
  footer .footer-ref .footer-ref-item {
    width: 50%;
    border: 0 !important;
    margin-bottom: 20px;
  }
  footer .footer-payment .payment-list,
  footer .payment-list {
    flex-wrap: wrap;
    justify-content: center;
  }

  .floating-promo-center,
  .floating-game-el {
    width: 64px !important;
    height: 64px !important;
    bottom: 16px !important;
    right: 8px !important;
  }

  /* the login glyph is a background-image offset by padding-left, which the
     narrower padding above would run the label into */
  .quick-nav .header-btn.login,
  .header-btn.login {
    background-image: none !important;
    padding-left: 14px !important;
  }

  /* licence block is a two-column flex row by default */
  .footer-license {
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 92%;
    gap: 14px;
  }
  .footer-license img {
    max-width: 200px;
    height: auto;
  }
}
/* ------------------------------------------------------------------- 479 */
@media (max-width: 479px) {
  .quick-nav .logo {
    width: 124px;
  }
  .quick-nav .header-btn {
    font-size: 12px;
    padding: 0 10px;
  }
  .lottery-game-list li .cont h2 {
    font-size: 12px;
  }
  footer .footer-ref .footer-ref-item {
    width: 100%;
  }
}
/* Touch devices get no :hover,so the card overlay must not latch on. */
@media (hover: none) {
  .lottery-game-list li:hover .cover {
    box-shadow: none;
  }
}

/* ==== redesign.css ==================================================== */
/* redesign.css — VIJAYBET / सट्टा मटका
 *
 * A layer on top of the captured stylesheets. Nothing in the original CSS was
 * edited; every rule here either adds a new component or overrides an old one
 * at equal-or-higher specificity. Load order: last.
 *
 * Untouched by design: .section-games and everything inside it (cards, covers,
 * card headings, provider tabs) and the payment logo strip.
 *
 * Palette is pulled from background.webp — indigo night,with the brand amber
 * (#fb2, already the site's tab-active colour) as the single locked accent.
 */

/* ============================================================ 1. Typefaces */

/* Martel — display. Devanagari serif with real weight; carries the headings. */
@font-face {
  font-family: 'Martel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/martel-devanagari-700-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Martel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/martel-latin-700-normal.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: 'Martel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/martel-devanagari-800-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Martel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/martel-latin-800-normal.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;
}
/* Mukta — body and UI. Same foundry lineage,deliberately plainer. */
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mukta-devanagari-400-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mukta-latin-400-normal.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: 'Mukta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/mukta-devanagari-500-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/mukta-latin-500-normal.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: 'Mukta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/mukta-devanagari-600-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/mukta-latin-600-normal.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: 'Mukta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mukta-devanagari-700-normal.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Mukta';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/mukta-latin-700-normal.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;
}
/* =============================================================== 2. Tokens */

:root {
  /* Surfaces — sampled from background.webp's darkest quadrant */
  --ink-0: #05040d;
  --ink-1: #0b0819;
  --panel: rgba(11, 8, 25, 0.82);
  --panel-2: rgba(19, 14, 38, 0.9);
  --panel-solid: #100c22;

  /* One accent, locked. #fb2 is already the site's active-tab amber. */
  --gold: #ffbb22;
  --gold-lift: #ffd36b;
  --gold-deep: #b47600;
  --gold-wash: rgba(255, 187, 34, 0.12);

  --text: #f4f1fa;
  --text-2: #cdc5e0;
  --muted: #9d94b8;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.18);

  --font-display: 'Martel', 'Noto Serif Devanagari', Georgia, serif;
  --font-body: 'Mukta', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;

  /* 4pt scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 17px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --text-3xl: 38px;
  --text-display: clamp(32px, 5.4vw, 62px);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --w: 1200px;
  --gutter: 20px;
  --header-h: 78px;

  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 180ms;
}
/* ========================================================= 3. Page canvas */

/* inline-01.css hides #root until the (absent) React bundle boots. The capture
   worked around it with an inline style; this restores it in the cascade. */
#root {
  display: block;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  min-width: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--font-body) !important;
  font-size: var(--text-base);
  line-height: 1.6;
  overflow-x: clip;
}
/* background.webp,with a scrim tuned so the artwork
   stays visible at the top of the page and quietens under running text. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #05040d url('../images/background.webp') center top / cover no-repeat;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(5, 4, 13, 0.35) 0%, rgba(5, 4, 13, 0.78) 55%, rgba(5, 4, 13, 0.92) 100%),
    linear-gradient(180deg, rgba(5, 4, 13, 0.25) 0%, rgba(5, 4, 13, 0.7) 45%, rgba(5, 4, 13, 0.88) 100%);
}
.app.gamelobby.lottery {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent;
}
::selection {
  background: var(--gold);
  color: #14100a;
}
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* The legacy sheets are content-box and several bands carry width:100%,so
   their padding adds to the width and pushes past the viewport. Scoped rather
   than a global `*` reset — the game grid still relies on content-box maths. */
.wrap,.hero,.hero-banner,.games-head,.post,.post-inner,.table-scroll,.toc,.callout,.faq,.faq summary,.faq-body,footer .footer-provider,footer .footer-head,footer .payment-list,footer .footer-ref,footer .footer-ref-item,footer .footer-nav,footer .footer-license,footer .copy,.quick-nav .main-header {
  box-sizing: border-box;
}
.wrap {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
/* ============================================================== 4. Header */

.quick-nav {
  position: sticky;
  top: 0;
  height: var(--header-h);
  line-height: normal;
  background: linear-gradient(180deg, rgba(6, 5, 16, 0.94), rgba(6, 5, 16, 0.82));
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
  z-index: 60;
}
.quick-nav .main-header {
  width: 100%;
  max-width: var(--w);
  height: var(--header-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  justify-content: space-between;
}
.quick-nav .logo {
  width: 196px;
  height: 40px;
  flex: 0 0 auto;
  background-position: left center;
}
/* In-page nav — every item points at a section that exists on this page. */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline: auto;
}
.site-nav a {
  display: block;
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.site-nav a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}
.btn-ghost {
  color: var(--text);
  border-color: var(--line-2);
  background: rgba(255, 255, 255, 0.04);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-solid {
  color: #191203;
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 18px rgba(255, 187, 34, 0.22);
}
.btn-solid:hover {
  background: linear-gradient(180deg, #ffe08e, var(--gold-lift));
}
.btn:active {
  transform: translateY(1px);
}
/* ================================================================ 5. Hero */

.hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(28px, 3.5vw, 48px);
}
/* The banner artwork carries the headline, so the h1 IS the image. No dark
   plate any more — the artwork is its own surface and needs no scrim. */
.hero-banner {
  display: block;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9);
  line-height: 0;
}
.hero-banner a {
  display: block;
  border-radius: inherit;
}
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}
/* one orchestrated entrance, nothing else on the page moves by itself */
@media (prefers-reduced-motion: no-preference) {
  .hero-banner {
    animation: plate-in 620ms var(--ease-out) both;
  }
  @keyframes plate-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
  }
}
/* ====================================================== 5b. Hero CTA pair */

/* The page's single conversion point, sat directly under the banner. It is the
   one element allowed to loop an attention animation — everything else on the
   page stays still, so the movement reads as intent rather than noise.
   Scale + opacity only (compositor-friendly); the glow is a blurred pseudo
   behind the face so no box-shadow is repainted per frame. */
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(22px, 3vw, 34px);
}
.cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  border-radius: 999px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}
/* the halo — blurred, behind the face, never clipped by the face's overflow */
.cta::before {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 999px;
  filter: blur(19px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.cta-gold::before {
  background: linear-gradient(180deg, var(--gold-lift), var(--gold) 60%, var(--gold-deep));
}
.cta-ghost::before {
  background: linear-gradient(180deg, rgba(255, 211, 107, 0.75), rgba(255, 187, 34, 0.6) 60%, rgba(180, 118, 0, 0.5));
}
.cta-face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 210px;
  padding: 0 clamp(28px, 3.4vw, 46px);
  border-radius: inherit;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.cta-gold .cta-face {
  color: #191203;
  border: 1px solid rgba(255, 224, 142, 0.9);
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 10px 26px rgba(255, 187, 34, 0.28);
}
.cta-ghost .cta-face {
  color: var(--gold-lift);
  border: 1px solid rgba(255, 187, 34, 0.55);
  background: linear-gradient(180deg, rgba(30, 21, 8, 0.88), rgba(12, 9, 24, 0.88));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 10px 26px rgba(0, 0, 0, 0.45);
}
/* sheen sweep, clipped to the pill */
.cta-face::after {
  content: '';
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: 0;
  width: 34%;
  pointer-events: none;
  transform: translateX(-260%) skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.cta-ghost .cta-face::after {
  background: linear-gradient(90deg, rgba(255, 211, 107, 0), rgba(255, 211, 107, 0.34), rgba(255, 211, 107, 0));
}
.cta:hover::before {
  opacity: 1;
}
.cta:hover .cta-face {
  transform: translateY(-2px);
}
.cta-gold:hover .cta-face {
  background: linear-gradient(180deg, #ffe8a8, var(--gold-lift));
}
.cta-ghost:hover .cta-face {
  color: #191203;
  border-color: rgba(255, 224, 142, 0.9);
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
}
.cta:active .cta-face {
  transform: translateY(0) scale(0.97);
}
@media (prefers-reduced-motion: no-preference) {
  .cta {
    animation: cta-pop 1.15s var(--ease-in-out) infinite both;
  }
  .cta::before {
    animation: cta-halo 1.15s var(--ease-in-out) infinite both;
  }
  .cta-face::after {
    animation: cta-sheen 2.3s var(--ease-out) infinite both;
  }
  /* half-beat offset so the pair breathes alternately instead of as one blob */
  .cta-ghost,
  .cta-ghost::before {
    animation-delay: -0.4s;
  }
  .cta-ghost .cta-face::after {
    animation-delay: 1.15s;
  }
  /* stop the loop under the cursor — a button should never be a moving target
     once the user has reached for it */
  .cta:hover,
  .cta:hover::before,
  .cta:focus-visible,
  .cta:focus-visible::before {
    animation-play-state: paused;
  }
  @keyframes cta-pop {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.06);
    }
  }
  @keyframes cta-halo {
    0%,
    100% {
      opacity: 0.5;
      transform: scale(0.94);
    }
    50% {
      opacity: 1;
      transform: scale(1.07);
    }
  }
  @keyframes cta-sheen {
    0% {
      transform: translateX(-260%) skewX(-20deg);
    }
    38%,
    100% {
      transform: translateX(560%) skewX(-20deg);
    }
  }
}

/* ======================================================= 6. Games section */

/* Section chrome only — the markup inside .section-games is untouched. */
.games-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.games-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.3;
  color: var(--text);
}
.section-games.lottery-games {
  background: transparent;
  min-height: 0;
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-5);
}
/* Provider tabs. The markup inside .section-games is untouched — this is
   styling only. Three problems fixed: the active pill was white-on-amber
   (about 2:1, the main reason it was hard to read), inactive labels were thin
   and had no hover affordance, and the strip sat at max-width 1100px so it
   was inset ~30px from the heading rule and the card grid above and below. */
.section-games.lottery-games .gametype-tag {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}
.section-games.lottery-games .gametype-tag .gametype-inner {
  gap: 4px;
  padding: 6px;
  background-color: rgba(6, 5, 16, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
}
.section-games.lottery-games .gametype-tag .gametype-item {
  border-radius: 999px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 42px;
  transition: background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
.section-games.lottery-games .gametype-tag .gametype-item:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: var(--text);
}
.section-games.lottery-games .gametype-tag .gametype-item.active,
.section-games.lottery-games .gametype-tag .gametype-item.active:hover {
  background: linear-gradient(180deg, var(--gold-lift), var(--gold));
  color: #191203;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 6px 16px rgba(255, 187, 34, 0.22);
}
/* the legacy gloss overlay washes out the new dark label */
.section-games.lottery-games .gametype-tag .gametype-item.active:before {
  display: none;
}
.lottery-game-list {
  padding-bottom: var(--sp-7);
}
/* ============================================================= 7. Article */

/* The artwork is busy everywhere,so running text gets its own surface and the
   image is left to frame the column rather than sit behind it. */
.post {
  padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(48px, 7vw, 96px);
}
.post-inner {
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(32px, 5vw, 56px);
  box-sizing: border-box;
  background: rgba(8, 6, 19, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.post p,.post li {
  font-size: var(--text-base);
  line-height: 1.86;
  color: var(--text-2);
}
.post p {
  margin: 0 0 var(--sp-5);
}
.post .lead {
  font-size: var(--text-lg);
  line-height: 1.8;
  color: var(--text);
}
/* The article's own title (the H1 from the source doc). Sized above the
   section headings so the outline reads title > section, and no top rule —
   it opens the body rather than dividing it. */
.post .post-title {
  margin: var(--sp-7) 0 var(--sp-5);
  padding-top: 0;
  border-top: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(27px, 4.2vw, 42px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow-wrap: anywhere;
}
.post h2 {
  margin: var(--sp-8) 0 var(--sp-5);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(25px, 3.6vw, 36px);
  line-height: 1.34;
  color: var(--text);
  overflow-wrap: anywhere;
  min-width: 0;
}
.post h3 {
  margin: var(--sp-7) 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--gold-lift);
  overflow-wrap: anywhere;
  min-width: 0;
}
/* Keyword links. Each term is linked once, on its first occurrence in the
   body copy; without this they fall back to the UA's blue underline. */
.post a {
  color: var(--gold-lift);
  text-decoration: none;
}
.post p a.kw {
  color: var(--gold-lift);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 187, 34, 0.38);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.post p a.kw:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.post ul,.post ol {
  margin: 0 0 var(--sp-5);
  padding-left: 0;
  list-style: none;
}
.post ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: var(--sp-3);
}
.post ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.85em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}
/* Table of contents */
.post-inner > :first-child {
  margin-top: 0;
}
.toc {
  margin-bottom: var(--sp-7);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* .post h2 owns the section rule + big display size; the TOC label is an h2
   for outline reasons only,so it needs the higher-specificity reset. */
.post .toc .toc-head {
  margin: 0 0 var(--sp-4);
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--muted);
}
.toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: var(--sp-6);
}
.toc-list li {
  counter-increment: toc;
  break-inside: avoid;
  margin-bottom: 2px;
}
.toc-list a {
  display: block;
  padding: 5px 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--dur) var(--ease-out);
}
.toc-list a::before {
  content: counter(toc) '.';
  display: inline-block;
  width: 24px;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.toc-list a:hover {
  color: var(--gold);
}
/* Legal callout. NB: the legacy sheet styles the bare `aside` element with
   text-align:center and its own background — both are reset here. */
.callout {
  text-align: left;
  margin: var(--sp-6) 0 var(--sp-7);
  padding: var(--sp-5);
  background: var(--gold-wash);
  border: 1px solid rgba(255, 187, 34, 0.28);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
}
.callout .callout-head {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--gold-lift);
}
.callout p:last-child {
  margin: 0;
  color: var(--text);
}
/* Tables */
.table-scroll {
  margin: 0 0 var(--sp-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
}
.post table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.post thead th {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 187, 34, 0.1);
  color: var(--gold-lift);
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid rgba(255, 187, 34, 0.24);
  white-space: nowrap;
}
.post tbody th,.post tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  line-height: 1.6;
  text-align: left;
  vertical-align: top;
}
.post tbody th {
  font-weight: 600;
  color: var(--text);
  width: 38%;
}
.post tbody td {
  color: var(--text-2);
}
.post tbody tr:last-child th,.post tbody tr:last-child td {
  border-bottom: 0;
}
/* FAQ */
.faq {
  margin-bottom: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-2);
}
.faq details + details {
  border-top: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--dur) var(--ease-out);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 9px;
  margin-left: auto;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq summary:hover {
  background: rgba(255, 255, 255, 0.04);
}
.faq summary h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
}
.faq-body {
  padding: 0 var(--sp-5) var(--sp-4);
}
.faq-body p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.8;
}
/* Key takeaways + care list get a quieter panel so the eye can rest */
.post .takeaway,.post .care-list {
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* =============================================================== 8. Footer */

footer {
  position: relative;
  background: linear-gradient(180deg, rgba(4, 3, 11, 0.86), rgba(4, 3, 11, 0.97));
  border-top: 1px solid var(--line);
}
footer .footer-main {
  width: 100%;
  margin: 0 auto;
  padding-bottom: var(--sp-6);
}
footer .footer-main .footer-cont {
  display: block;
}
/* payment strip */
footer .footer-main .footer-cont .footer-provider {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-6) var(--gutter);
}
footer .footer-main .footer-cont .footer-head {
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: var(--sp-4);
}
footer .payment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
}
footer .payment-list img {
  height: 46px;
  width: auto;
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 2px;
  box-sizing: border-box;
}
/* link columns + merged brand block */
footer .footer-main .footer-cont .footer-ref {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr;
  gap: var(--sp-7) var(--sp-6);
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding: var(--sp-8) var(--gutter) var(--sp-7);
  box-sizing: border-box;
}
footer .footer-main .footer-cont .footer-ref .footer-nav,footer .footer-main .footer-cont .footer-ref .footer-ref-item {
  border-right: 0;
  padding: 0;
  flex: none;
  text-align: left;
  min-width: 0;
}
footer .footer-main .footer-cont .footer-ref .footer-nav .footer-head,footer .footer-main .footer-cont .footer-ref .footer-ref-item .footer-head {
  margin-bottom: var(--sp-4);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}
footer .footer-main .footer-cont .footer-ref .footer-nav a,footer .footer-main .footer-cont .footer-ref .footer-ref-item a {
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: 6px 0;
  transition: color var(--dur) var(--ease-out);
}
footer .footer-main .footer-cont .footer-ref .footer-nav a:hover,footer .footer-main .footer-cont .footer-ref .footer-ref-item a:hover {
  color: var(--gold);
}
footer .footer-nav ul.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}
footer .footer-nav ul.nav > li {
  margin: 0;
}
/* footer .footer-nav .nav-item a {
  cursor: default;
} */
footer .footer-nav h3 {
  font: inherit;
  font-size: var(--text-sm);
  color: inherit;
}
/* brand block — the logo now anchors a column instead of floating in one */
.footer-brand {
  min-width: 0;
}
.footer-brand .footer-logo {
  display: block;
  width: 188px;
  max-width: 100%;
  height: auto;
  margin-bottom: var(--sp-4);
}
.footer-brand p {
  margin: 0 0 var(--sp-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 34ch;
}
.brand-marks {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.age-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
  flex: 0 0 auto;
}
.age-note {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
}
/* licence — now tracks the container,was width:90% */
footer .footer-license {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter);
  border-top: 1px solid var(--line);
  box-sizing: border-box;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.75;
}
footer .footer-license img {
  flex: 0 0 auto;
  width: 118px;
  height: auto;
  margin-top: 2px;
  opacity: 0.8;
}
.licence-en {
  display: block;
  margin-top: var(--sp-3);
  color: #8a83a3;
  font-size: 12px;
  line-height: 1.65;
}
footer .copy {
  width: 100%;
  max-width: var(--w);
  margin: var(--sp-7) auto 0;
  /* longhands, not the `padding: 0 var(--gutter)` shorthand that used to sit
     at the end of this rule and silently reset the vertical padding */
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  padding-inline: var(--gutter);
  box-sizing: border-box;
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  text-align: center;
}
/* ========================================================== 10. Responsive */

@media (max-width: 1100px) {
  :root {
    --header-h: 70px;
  }
  .site-nav {
    display: none;
  }
  footer .footer-main .footer-cont .footer-ref {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7) var(--sp-6);
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --header-h: 64px;
    --text-base: 16px;
  }
  .quick-nav,.quick-nav .main-header {
    height: var(--header-h) !important;
    line-height: normal !important;
  }
  .quick-nav .logo {
    width: 138px;
    height: 30px;
  }
  .header-actions {
    gap: var(--sp-2);
  }
  .btn {
    height: 38px;
    padding: 0 var(--sp-4);
    font-size: 14px;
  }
  .app.gamelobby.lottery {
    margin-top: 0 !important;
  }
  /* the original banner offset is gone,so the old padding must go too */
  .section-games.lottery-games {
    padding-top: var(--sp-5) !important;
    background: transparent;
  }
  .hero {
    padding-top: var(--sp-7);
  }
  .hero-banner {
    border-radius: var(--radius);
  }
  /* At 2.8:1 the banner is only ~120px tall on a phone and the title stops
     being readable. Crop into the middle of the artwork rather than shrink it —
     the headline sits in the centre ~62% of the frame. */
  .hero-banner img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
  }
  .hero-cta {
    gap: var(--sp-3);
    margin-top: var(--sp-5);
  }
  .cta {
    flex: 1 1 0;
    min-width: 0;
    max-width: 220px;
  }
  .cta::before {
    inset: -11px;
    filter: blur(13px);
  }
  .cta-face {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0 var(--sp-3);
    font-size: 16px;
  }
  .toc-list {
    columns: 1;
  }
  .post h2 {
    margin-top: var(--sp-8);
  }
  .post tbody th {
    width: 44%;
  }
  footer .payment-list img {
    height: 38px;
  }
  footer .footer-license {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    gap: var(--sp-4);
  }
  footer .footer-license img {
    max-width: 118px;
  }
}
@media (max-width: 767px) {
  /* two short columns read far better than one very long one on a phone */
  footer .footer-main .footer-cont .footer-ref {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-5);
    padding-top: var(--sp-7);
    padding-bottom: var(--sp-6);
  }
}
@media (max-width: 359px) {
  footer .footer-main .footer-cont .footer-ref {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 400px) {
  .quick-nav .logo {
    width: 116px;
    height: 26px;
  }
  .btn {
    padding: 0 var(--sp-3);
    font-size: 13px;
  }
  .header-actions {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}