/* ==========================================================================
   style.css — MARUAY888: flat dark UI, gold used as an accent only.
   Base + desktop layout (>= 1280px). Smaller screens: responsive.css.

   Every colour, radius and timing comes from the tokens in section 1.

   1. Tokens          6. Layout + titles     11. SEO content (editorial)
   2. Fonts + base    7. Carousel + hero     12. Forms, dialogs, dropdowns
   3. Buttons         8. Category tiles      13. Footer, bottom bar, floating
   4. App bar         9. Game cards / rows   14. Motion (reveal, fades)
   5. Sidebar        10. Catalog + content pages (PHP)
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
    color-scheme: dark;

    --bg-main: #090909;
    --bg-section: #0f0e0c;
    --bg-header: #0f0f0f;
    --bg-nav: #141414;
    --bg-sunken: #070707;

    --surface-1: #151515;
    --surface-2: #1a1814;
    --surface-3: #211f1a;

    --gold: #e4b83f;                 /* bright gold: CTA, active, highlight */
    --gold-bright: #f0cf68;
    --gold-hover: #f0cf68;
    --gold-deep: #b98213;
    --gold-muted: #8c6a20;           /* muted gold: borders, dividers, detail */
    --wine: #7a2226;                 /* HOT / alert badges only */
    --gold-soft: rgba(228, 184, 63, .1);
    --on-gold: #111111;

    --text-main: #f1eee8;
    --text-secondary: #c4bcae;
    --text-article: #c4bcae;
    --text-muted: #8a857c;           /* 5.4:1 on the page background (was #77736c = 4.2:1) */
    --text-nav: #c9c9c9;
    --text-strong: #ffffff;

    --border: rgba(228, 184, 63, .15);
    --border-hover: rgba(240, 207, 104, .55);
    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .12);

    --button-primary: linear-gradient(180deg, #d9ac38, #a87812);
    --button-primary-hover: linear-gradient(180deg, #e2b644, #b38216);
    --overlay: rgba(0, 0, 0, .7);
    --overlay-soft: rgba(0, 0, 0, .38);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    --focus-ring: 0 0 0 3px rgba(228, 184, 63, .22);
    --error: #e58a78;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    --transition-fast: 160ms ease;
    --transition: 220ms ease;

    --appbar-h: 64px;
    --mainnav-h: 48px;          /* desktop menu row; 0 below 960px */
    --header-h: calc(var(--appbar-h) + var(--mainnav-h));
    --drawer-w: 232px;
    --bottom-bar-h: 0px;
    --container: 1440px;
    --gap: 12px;
    --section-gap: 36px;
    --page: 1280px;                  /* content frame of the sub pages */
    --space-xs: 6px; --space-sm: 12px; --space-md: 18px; --space-lg: 28px; --space-xl: 40px;
    --font: "Kanit", "Noto Sans Thai", "Leelawadee UI", Thonburi, Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 2. Fonts + base ------------------------------------------------------------ */
/* Kanit (SIL Open Font License), self-hosted, light weights only: 300 / 400 / 500.
   font-display: swap (text is never invisible); the three Thai files are preloaded in <head>, so on a normal
   connection Kanit is ready before first paint and no visible swap / layout shift happens. */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/kanit-thai-300.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/kanit-thai-400.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/kanit-thai-500.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/kanit-latin-300.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: "Kanit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/kanit-latin-400.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: "Kanit"; font-style: normal; font-weight: 500 900; font-display: swap; src: url("../fonts/kanit-latin-500.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; }

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 12px);
    background: var(--bg-main);
    scrollbar-gutter: stable;        /* same page width on every page, also while a dialog locks scrolling */
}

body { margin: 0; color: var(--text-main); overflow-x: hidden; }
/* Page background: one local image (1920x1080, 22 KB) at the top of every page, never stretched.
   It keeps its ratio (width 100%, at least 1280px wide on small screens, cropped at the sides),
   scrolls with the page (no fixed attachment) and fades into the flat theme colour where it ends,
   so long pages simply continue in #0d0d0d. The app bar, sidebar and footer keep their own dark fill. */
body {
    background-color: var(--bg-main);
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .3)),
        linear-gradient(180deg, rgba(9, 9, 9, 0) 55%, var(--bg-main) 100%),
        url("../images/background/bg-pc.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% max(56.25vw, 720px), 100% max(56.25vw, 720px), max(100%, 1280px) auto;
}

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 500; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
hr { border: 0; margin: 0; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
code { font-family: Consolas, Menlo, monospace; font-size: .9em; color: var(--gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

.icon { flex: 0 0 auto; }

.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 12px; top: -80px; z-index: 3000;
    padding: 10px 16px; border-radius: var(--radius-sm);
    background: var(--gold); color: var(--on-gold); font-weight: 500;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 10px; }

.link { color: var(--gold); font-weight: 400; }
.link:hover { color: var(--gold-hover); text-decoration: underline; }

/* 3. Buttons ----------------------------------------------------------------
   One system for every CTA. States: normal, :hover, :active, :focus-visible, :disabled. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 16px;
    border: 1px solid transparent; border-radius: var(--radius-md);
    font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 2px; box-shadow: var(--focus-ring); }
.btn--primary { background: var(--button-primary); color: var(--on-gold); }
.btn--primary:hover { background: var(--button-primary-hover); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--secondary { background: #141210; border-color: rgba(228, 184, 63, .55); color: var(--gold); }
.btn--secondary:hover { background: linear-gradient(rgba(228, 184, 63, .08), rgba(228, 184, 63, .08)), #141210; border-color: var(--gold-bright); }
.btn--secondary:active { background: #141210; }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--surface-3); border-color: var(--line); color: var(--text-muted);
    cursor: not-allowed; transform: none; pointer-events: none;
}
.btn .icon { width: 18px; height: 18px; transition: transform 170ms ease; }
.btn .icon--end { margin-left: 1px; }                 /* 7px before the text, 8px after it */
.btn:hover .icon--arrow { transform: translateX(2px); }     /* only arrows move */
.btn--lg { height: 44px; padding: 0 22px; font-size: 15px; }

/* Register CTA ("สมัครสมาชิก") — the one effect shared by every register button on every page.
   .register-cta        gold face + a slow 1.5px float
   .register-cta--shine light sweep: ::after runs by itself every 4.5s, ::before once on hover
   Only transform / translate / opacity are animated (compositor only, no JavaScript).
   The float uses the `translate` property, so it never fights the hover / active `transform`. */
.register-cta {
    --register-face: linear-gradient(180deg, #f0cb58 0%, #dba92c 46%, #b98110 100%);
    position: relative; overflow: hidden; isolation: isolate;
    border-color: rgba(255, 211, 91, .75);
    background: var(--register-face); color: #111; font-weight: 500;
    transition: transform 180ms ease, filter 180ms ease, border-color 180ms ease;
    animation: registerFloat 2.8s ease-in-out infinite;
    will-change: transform;
}
.register-cta:hover { background: var(--register-face); }
@media (hover: hover) {
    .register-cta:hover { transform: translate3d(0, -2px, 0); filter: brightness(1.06); border-color: rgb(255, 228, 154); }
}
.register-cta:active { transform: translate3d(0, 0, 0) scale(.985); }
.register-cta--shine::before, .register-cta--shine::after {
    content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; z-index: 2;
    width: 32%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .05) 20%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .08) 80%, transparent 100%);
    transform: translate3d(-450%, 0, 0) skewX(-20deg);
    opacity: 0; pointer-events: none;
}
.register-cta--shine::after { animation: registerShine 4.5s ease-in-out infinite; }
@media (hover: hover) {
    .register-cta--shine:hover::before { opacity: 1; transform: translate3d(500%, 0, 0) skewX(-20deg); transition: transform 700ms ease; }
}
@keyframes registerShine {
    0% { transform: translate3d(-450%, 0, 0) skewX(-20deg); opacity: 0; }
    8% { opacity: 1; }
    28% { transform: translate3d(500%, 0, 0) skewX(-20deg); opacity: 1; }
    32%, 100% { transform: translate3d(500%, 0, 0) skewX(-20deg); opacity: 0; }
}
@keyframes registerFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -1.5px; }
}

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 40px; height: 40px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--surface-1); color: var(--gold);
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.icon-btn:hover { background: var(--surface-3); border-color: var(--border-hover); }

/* 4. App bar ------------------------------------------------------------------ */
.appbar {
    position: fixed; inset: 0 0 auto 0; z-index: 1006;
    display: flex; align-items: center; gap: 6px;
    height: var(--appbar-h);
    padding: 0 16px 0 12px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--line);
    color: var(--text-main);
    transition: border-color var(--transition);
}
.appbar.is-scrolled { border-bottom-color: var(--line-strong); }
.appbar__logo { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; width: 165px; height: 100%; padding: 4px; }
.appbar__logo img { width: 150px; height: auto; max-height: 40px; object-fit: contain; object-position: left center; }
.appbar__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.auth-actions { display: flex; align-items: center; gap: 8px; }

/* Desktop header (>= 960px): logo left, login / register right, .mainnav centred.
   From 1280px the menu sits in the same row, in the true centre of the bar (section 15);
   960 - 1279px there is not enough room for that, so the menu is a second row, also centred.
   The sidebar, its toggle and the search button are not shown here;
   below 960px they come back and .mainnav is hidden (responsive.css). */
@media (min-width: 960px) {
    .appbar { padding: 0 max(20px, calc((100% - var(--container)) / 2 + 20px)) 0 max(16px, calc((100% - var(--container)) / 2 + 16px)); }
    .appbar__toggle, .appbar__search, .drawer, .drawer-scrim { display: none; }
}
.mainnav {
    position: fixed; top: var(--appbar-h); left: 0; right: 0; z-index: 1005;
    height: var(--mainnav-h);
    padding: 0 max(6px, calc((100% - var(--container)) / 2 + 6px));
    border-bottom: 1px solid var(--border);
    background: var(--bg-nav);
}
.mainnav__list { display: flex; align-items: stretch; gap: 2px; height: 100%; }
.mainnav__list > li { position: relative; display: flex; align-items: stretch; }
.mainnav__link {
    position: relative; display: flex; align-items: center; padding: 0 14px;
    color: var(--text-nav); font-size: 15px; font-weight: 400; white-space: nowrap;
    transition: color var(--transition-fast);
}
.mainnav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.mainnav__link:hover { color: var(--text-strong); }
.mainnav__link:hover::after { transform: scaleX(1); }
.mainnav__link.is-active { color: var(--gold); }
.mainnav__link.is-active::after { transform: scaleX(1); }
.mainnav__link:focus-visible, .mainnav__caret:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: -4px; border-radius: var(--radius-sm); }
/* "คาสิโนสด" = link + caret button; the menu opens on hover, on keyboard focus and on a click on the caret */
.mainnav__group .mainnav__link { padding-right: 2px; }
.mainnav__group .mainnav__link::after { right: 2px; }
.mainnav__caret { display: grid; place-items: center; width: 26px; margin-right: 4px; color: var(--text-muted); transition: color var(--transition-fast); }
.mainnav__caret .icon { transition: transform var(--transition-fast); }
.mainnav__group:hover .mainnav__caret, .mainnav__caret[aria-expanded="true"] { color: var(--gold); }
.mainnav__group:hover .mainnav__caret .icon, .mainnav__caret[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* Hidden with visibility (not display): the 160ms delay keeps the menu focusable while keyboard focus moves into it. */
.mainnav__menu {
    position: absolute; top: 100%; left: 4px; z-index: 1100;
    min-width: 200px; padding: 5px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface-1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
    visibility: hidden; opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear .16s;
}
.mainnav__group:hover > .mainnav__menu,
.mainnav__group:has(:focus-visible) > .mainnav__menu,
.mainnav__caret[aria-expanded="true"] + .mainnav__menu { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }

/* 5. Sidebar ---------------------------------------------------------------------- */
.drawer {
    position: fixed; top: var(--appbar-h); bottom: 0; left: 0; z-index: 1004;
    width: var(--drawer-w);
    background: var(--bg-header);
    border-right: 1px solid var(--line);
    transition: width var(--transition), transform var(--transition);
}
.drawer__scroll { height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; padding-bottom: 16px; }
.drawer-scrim { position: fixed; inset: var(--appbar-h) 0 0 0; z-index: 1003; background: var(--overlay); }

.app-card {
    position: relative; display: flex; align-items: center;
    height: 60px; margin: 14px 10px 4px; padding: 0 70px 0 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-1);
    transition: border-color var(--transition-fast);
}
.app-card:hover { border-color: var(--border-hover); }
.app-card__text { display: block; min-width: 0; }
.app-card__title { display: block; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--text-main); }
.app-card__subtitle { display: block; font-size: 12px; line-height: 1.3; color: var(--text-muted); }
.app-card__phone {
    position: absolute; right: 14px; bottom: 0;
    width: 42px; height: 50px; padding: 10px 5px 0;
    border: 1px solid var(--line-strong); border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--surface-3);
}
.app-card__notch { position: absolute; top: 4px; left: 50%; width: 12px; height: 2px; border-radius: 2px; background: var(--text-muted); transform: translateX(-50%); }
.app-card__row { display: block; height: 8px; margin: 4px 0 5px; border-radius: 2px; background: var(--gold); }
.app-card__tiles { display: flex; gap: 3px; }
.app-card__tiles i { flex: 1; height: 12px; border-radius: 2px; background: var(--line-strong); }
.app-card__rail { display: none; }

.nav-list { padding: 8px 10px; }
.nav-list + .nav-list { padding-top: 0; }
.nav-item {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 40px; margin: 1px 0; padding: 4px 10px;
    border-radius: var(--radius-md);
    color: var(--text-nav);
    font-size: 14px; font-weight: 400; line-height: 1.3;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-item .icon { color: var(--gold); transition: transform var(--transition-fast); }
.nav-item::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; border-radius: 2px;
    background: var(--gold); transform: translateY(-50%) scaleY(0); transition: transform var(--transition-fast);
}
.nav-item:hover { background: var(--surface-2); color: var(--text-strong); }
.nav-item:hover .icon { transform: translateX(2px); }
.nav-item.is-active { background: var(--surface-2); color: var(--gold-hover); }
.nav-item.is-active::before { transform: translateY(-50%) scaleY(1); }
.nav-item__label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-divider { height: 1px; margin: 6px 16px 8px; background: var(--line); }

.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group .nav-group__chevron { color: var(--text-muted); transition: transform var(--transition); }
.nav-group[open] .nav-group__chevron { transform: rotate(180deg); }
.nav-group__list { padding: 2px 0 4px 44px; }
.nav-sub { display: block; padding: 7px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-secondary); transition: color var(--transition-fast); }
.nav-sub:hover { color: var(--text-strong); }

/* 6. Layout + titles ------------------------------------------------------------- */
.layout {
    display: flex; flex-direction: column;
    min-height: 100vh;
    padding: var(--header-h) 0 var(--bottom-bar-h);
}
.main { flex: 1 0 auto; min-width: 0; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 16px 20px 40px; }

/* Breadcrumb (sub pages: promotion, casino) */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--text-muted); }
.breadcrumb a { color: var(--text-secondary); transition: color var(--transition-fast); }
.breadcrumb a:hover { color: var(--gold-hover); }
.breadcrumb [aria-current="page"] { color: var(--gold); }
/* Small section title with a gold accent bar (game rows, provider strip, catalog). */
.section-title, .game-row__title {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-main); font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: .01em;
}
.section-title::before, .game-row__title::before {
    content: ""; flex: 0 0 auto; width: 3px; height: 16px; border-radius: 2px; background: var(--gold);
}

/* 7. Carousel + hero ---------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
    display: flex; gap: var(--gap);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.carousel__slide img { width: 100%; object-fit: cover; }
.carousel__slide picture { display: contents; }      /* hero: <picture> only picks the file, the <img> keeps its box */
.carousel__dots { display: flex; align-items: center; justify-content: center; min-height: 24px; margin-top: 2px; }
.carousel__dot { display: grid; place-items: center; width: 24px; height: 24px; }
.carousel__dot::before {
    content: ""; width: 16px; height: 3px; border-radius: 2px;
    background: var(--line-strong);
    transition: background var(--transition), transform var(--transition);
}
.carousel__dot:hover::before { background: var(--gold-muted); }
.carousel__dot[aria-current="true"]::before { background: var(--gold); transform: scaleX(1.25); }

.hero { display: flex; align-items: stretch; gap: var(--gap); }
.hero__main { position: relative; flex: 4; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); }
.hero__side { position: relative; flex: 3; min-width: 0; }
.carousel--hero { position: absolute; inset: 0; }
.carousel--hero .carousel__track { height: 100%; gap: 0; }
.carousel--hero .carousel__slide { height: 100%; }
.carousel--hero .carousel__dots { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2; margin: 0; }

.video-card { position: relative; width: 100%; height: 100%; min-height: 175px; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-1); }
/* The card keeps its place and ratio; a plain native <video controls> fills it (the browser draws the controls). */
/* Three steps, same picture: a 24px blurred copy of the first frame is inline here (visible at first paint, no request),
   then the poster file, then the video itself - the box is never black. */
.video-card { background: #0b0805 url("data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAACwBACdASoYABAAPsFOoEqnpCMhsAgA8BgJbACdMoAC/CV/7zrG25qNOOhSv6gAAP72169MLER+GvIGqC6Nk7ZwQTU0GHVEMHDB23EmdMdue6ZNsAqLa2ve24M417OEUz2o6BRKN4ySNLGFVbnt6RoVfP52ZgmwIvffXEDuFEiHWb0Vhe654OTI1SwAyLcrkvO7pzFMGyDwRYnKqZoI9c0FAAA=") center / cover no-repeat; }
.home-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: none; }

/* H1 strip under the hero: one line of text + the two main CTAs */
.intro {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
    margin-top: 14px; padding: 14px 18px;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface-1);
}
.intro__title { flex: 1 1 auto; min-width: 0; color: var(--text-main); font-size: 18px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; text-wrap: balance; }
.intro__actions { display: flex; flex: 0 0 auto; gap: 8px; }

.promo-strip { margin-top: var(--gap); }
.promo-strip__slide { flex-basis: calc((100% - 2 * var(--gap)) / 3); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-1); transition: border-color 220ms ease, transform 220ms ease; }
.promo-strip__slide:hover { border-color: rgba(224, 183, 71, .5); transform: scale(1.008); }
/* No layout shift: every banner is 1905x590, so the box has that ratio before the image arrives; the dots row is 24px from the start. */
.promo-strip__slide img { display: block; height: auto; aspect-ratio: 1905 / 590; }
.promo-strip .carousel__dots { height: 24px; }

/* 8. Category tiles ------------------------------------------------------------------ */

/* 9. Game cards / rows / grid, provider strip, services --------------------------------- */
.game-row { margin-top: var(--section-gap); }
.game-row + .game-row { margin-top: 24px; }
.game-row__bar { display: flex; align-items: center; gap: 8px; }
.game-row__title { flex: 1 1 auto; min-width: 0; }
.game-row__actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.row-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 34px; height: 34px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface-1); color: var(--text-secondary);
    font-size: 13px; font-weight: 400; line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}
.row-btn .icon { width: 18px; height: 18px; transition: transform var(--transition-fast); }
.row-btn:hover { border-color: var(--border-hover); color: var(--gold-hover); }
.row-btn[data-row-next]:hover .icon, .row-btn--all:hover svg.icon { transform: translateX(2px); }
.row-btn .icon-3d { margin-right: 4px; }
.row-btn[data-row-prev]:hover .icon { transform: translateX(-2px); }
.row-btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.game-row__track {
    display: flex; gap: var(--gap);
    padding-top: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scroll-behavior: smooth;
    scrollbar-width: none;
}
.game-row__track::-webkit-scrollbar { display: none; }
.game-row__track > .game-card { flex: 0 0 150px; scroll-snap-align: start; }
/* a row with a single card: nothing to scroll, the card keeps its normal size at the left */
.game-row__track--static { overflow: visible; scroll-snap-type: none; }

.game-card { min-width: 0; }
.game-card__thumb {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: 326 / 440;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface-1);
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.game-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition), opacity .3s ease; }
.game-card__overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--overlay-soft); opacity: 0; transition: opacity var(--transition-fast); }
.game-card__play {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--gold); color: var(--on-gold);
    transform: scale(.94); transition: transform var(--transition-fast);
}
.game-card__thumb:hover, .game-card__thumb:focus-visible { transform: translateY(-3px); border-color: rgba(224, 183, 71, .5); }
.game-card__thumb:hover img { transform: scale(1.018); }
.game-card__thumb:hover .game-card__overlay, .game-card__thumb:focus-visible .game-card__overlay { opacity: 1; }
.game-card__thumb:hover .game-card__play { transform: scale(1); }
.game-card__meta { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.game-card__name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin-right: -4px; border-radius: 50%; color: var(--text-muted); transition: color var(--transition-fast), transform var(--transition-fast); }
.fav:hover { color: var(--gold-hover); transform: scale(1.1); }
.fav[aria-pressed="true"] { color: var(--gold); }
.fav[aria-pressed="true"] path { fill: currentColor; }
.game-card.is-found .game-card__thumb { border-color: var(--gold); }
/* "HOT" label on the first five cards of a row marked .game-row--hot. Pure CSS: no markup or data per card. */
.game-row--hot .game-row__track > .game-card:nth-child(-n+5) .game-card__thumb::before,
.game-row--hot .game-card.is-hot-copy .game-card__thumb::before {
    content: "HOT"; position: absolute; top: 6px; left: 6px; z-index: 2;
    padding: 1px 7px; border-radius: 4px;
    background: linear-gradient(180deg, #f0c43c, #c99518); color: #111;
    font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .06em;
    pointer-events: none;
    transform-origin: left top;
}

.provider-strip { margin-top: var(--section-gap); }
.provider-strip__list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 12px; }
.provider-box {
    display: flex; align-items: center; justify-content: center;
    height: 56px; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--surface-1);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.provider-box:hover { border-color: var(--border-hover); background: var(--surface-2); }
.provider-box img { width: auto; height: 100%; max-height: 36px; object-fit: contain; opacity: .82; transition: opacity var(--transition-fast); }
.provider-box:hover img { opacity: 1; }

/* Auto-scrolling card rows (.auto-card-carousel > .auto-card-track) -------------------------
   Every card row uses this one component. theme.js sets .has-marquee before first paint (not with
   prefers-reduced-motion, not without the needed browser features): without it the rows stay
   natively scrollable / the provider logos stay a grid.
   Motion = one compositor-only transform keyframe; app.js appends the hidden copies, measures the
   real width of one set (--marquee-set) and derives the duration from the speed in px per second. */
@keyframes cardMarquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(var(--marquee-set, 0px) * -1), 0, 0); }
}
.has-marquee .auto-card-carousel { overflow: hidden; overflow: clip visible; touch-action: pan-y; }
.has-marquee .auto-card-track { width: max-content; overflow: visible; scroll-snap-type: none; }
.has-marquee .auto-card-track.is-ready { animation: cardMarquee var(--marquee-duration, 60s) linear infinite; }
.has-marquee .auto-card-carousel.is-offscreen > .auto-card-track,
.has-marquee .auto-card-carousel.is-held > .auto-card-track { animation-play-state: paused; }
@media (hover: hover) {
    .has-marquee .auto-card-carousel:hover > .auto-card-track { animation-play-state: paused; }
}
.has-marquee .provider-strip__list { display: flex; }
.has-marquee .provider-strip__list > .provider-box { flex: 0 0 clamp(116px, 14vw, 168px); }

.services { margin-top: var(--section-gap); }
.services__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.service { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); }
.service .icon { color: var(--gold); }
.service__text { display: block; min-width: 0; }
.service__title { display: block; color: var(--text-main); font-size: 15px; font-weight: 400; line-height: 1.35; }
.service__desc { display: block; color: var(--text-muted); font-size: 13px; line-height: 1.4; }

/* 10. Catalog + content pages (PHP version) ---------------------------------------------- */
.catalog { margin-top: 20px; }

.search-field {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 12px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-md);
    background: var(--surface-1); color: var(--text-muted);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-field:focus-within { border-color: var(--gold); box-shadow: var(--focus-ring); }
.search-field input { flex: 1 1 auto; min-width: 0; height: 42px; border: 0; outline: 0; background: transparent; color: var(--text-main); font-size: 14px; font-weight: 300; }
.search-field input::placeholder { color: var(--text-muted); opacity: 1; }
.search-field .btn { height: 32px; }

.panel { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); }

.accordion { border-bottom: 1px solid var(--line); }
.accordion:last-of-type { border-bottom: 0; }

/* 11. SEO content (editorial, lower part of the home page) ---------------------------------- */
.article {
    max-width: 980px; margin: 56px auto 0; padding-top: 40px;
    border-top: 1px solid var(--line);
}
.article__lead { color: var(--text-article); font-size: 16px; line-height: 1.8; }
.article__lead p + p { margin-top: 12px; }
.article__section { margin-top: 40px; }
.article__section > h2 {
    position: relative; margin-bottom: 14px; padding-bottom: 10px;
    color: var(--text-main); font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: .01em;
}
.article__section > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; border-radius: 2px; background: var(--gold); }
.article__section > p { color: var(--text-article); font-size: 16px; line-height: 1.8; }
.article__section > p + p { margin-top: 12px; }
.article strong { color: var(--text-main); font-weight: 400; }
.article a:not(.btn):not(.feature__link) { color: var(--gold); font-weight: 400; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--transition), color var(--transition-fast); }
.article a:not(.btn):not(.feature__link):hover { color: var(--gold-hover); background-size: 100% 1px; }

.provider-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; margin: 18px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.provider-group__title { margin-bottom: 8px; color: var(--text-main); font-size: 14px; font-weight: 400; letter-spacing: .02em; }
.provider-group__list { display: flex; flex-wrap: wrap; gap: 6px; }
.provider-group__list li { padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 13px; }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 16px; }
.feature { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); transition: border-color var(--transition-fast); }
.feature:hover { border-color: var(--border-hover); }
.feature__title { display: flex; align-items: center; gap: 8px; color: var(--text-main); font-size: 15px; font-weight: 400; }
.feature__title .icon { color: var(--gold); }
.feature p { flex: 1 1 auto; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.feature__link { display: inline-flex; align-items: center; gap: 2px; min-height: 24px; color: var(--gold); font-size: 14px; }
.feature__link .icon { transition: transform var(--transition-fast); }
.feature__link:hover { color: var(--gold-hover); }
.feature__link:hover .icon { transform: translateX(3px); }

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__question { font-size: 16px; font-weight: 400; }
.faq__button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 12px 0; color: var(--text-main); font-size: 16px; font-weight: 400; line-height: 1.5; text-align: left; transition: color var(--transition-fast); }
.faq__button:hover, .faq__button[aria-expanded="true"] { color: var(--gold-hover); }
.faq__button .icon { color: var(--gold); transition: transform var(--transition); }
.faq__button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__panel { padding: 0 0 14px; color: var(--text-article); font-size: 15px; line-height: 1.75; animation: fade-down var(--transition) both; }

.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-1); }
.cta__text { color: var(--text-main); font-size: 16px; font-weight: 400; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 12. Forms, dialogs, dropdowns --------------------------------------------------------------- */
.form { display: grid; gap: 12px; }

.modal {
    width: 100%; max-width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    margin: auto; padding: 0; border: 0;
    background: transparent; color: var(--text-main);
    overflow: visible;
}
.modal--search { max-width: min(540px, calc(100vw - 24px)); }
.modal::backdrop { background: var(--overlay); }
.modal[open] .modal__panel { animation: pop-in var(--transition) both; }
.modal__panel {
    position: relative; display: grid; gap: 14px;
    max-height: calc(100dvh - 24px); overflow-y: auto;
    padding: 22px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-pop);
}
.modal__close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); }
.modal__close:hover { background: var(--surface-3); color: var(--text-strong); }
.modal__title { padding-right: 40px; font-size: 17px; font-weight: 500; }
.modal__hint { color: var(--text-secondary); font-size: 14px; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg-sunken); }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text-nav); font-size: 13px; transition: border-color var(--transition-fast), color var(--transition-fast); }
.chip .icon { color: var(--gold); }
.chip:hover { border-color: var(--border-hover); color: var(--text-strong); }

.dropdown__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-nav); font-size: 14px; font-weight: 400; text-align: left; transition: background var(--transition-fast), color var(--transition-fast); }
.dropdown__item:hover { background: var(--surface-3); color: var(--text-strong); }
.dropdown__item.is-active { color: var(--gold-hover); }
.dropdown__item .icon { margin-left: auto; }

.toast {
    position: fixed; left: 50%; bottom: calc(var(--bottom-bar-h) + 24px); z-index: 4000;
    max-width: calc(100vw - 32px); padding: 10px 16px;
    border: 1px solid var(--border-hover); border-radius: var(--radius-md);
    background: var(--surface-3); color: var(--text-main);
    box-shadow: var(--shadow-pop);
    font-size: 14px;
    transform: translateX(-50%);
}

/* 13. Footer, bottom bar, floating ----------------------------------------------------------- */
.footer { margin-top: 56px; border-top: 1px solid var(--line); background: var(--bg-header); color: var(--text-main); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 24px; max-width: var(--container); margin: 0 auto; padding: 22px 16px 0; font-size: 14px; }
.footer__links a { position: relative; display: inline-flex; align-items: center; min-height: 32px; color: var(--text-secondary); transition: color var(--transition-fast); }
.footer__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); }
.footer__links a:hover { color: var(--text-strong); }
.footer__links a:hover::after { transform: scaleX(1); }
.footer__contact { max-width: var(--container); margin: 0 auto; padding: 22px 16px 26px; text-align: center; }
.footer__title { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text-main); }
.footer__subtitle { margin-bottom: 12px; color: var(--text-muted); font-size: 13px; }
.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.contact-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-main); font-size: 14px; font-weight: 400; transition: border-color var(--transition-fast); }
.contact-chip .icon { color: var(--gold); }
.contact-chip:hover { border-color: var(--border-hover); }
.contact-chip__handle { color: var(--text-muted); }

.footer__bottom { border-top: 1px solid var(--line); }
.trust-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 36px; max-width: var(--container); min-height: 76px; margin: 0 auto; padding: 16px 24px; }
.trust-age { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text-secondary); font-size: 14px; font-weight: 500; line-height: 1; }
.trust-age sup { margin-left: 1px; font-size: .6em; }
.trust-note { color: var(--text-muted); font-size: 13px; }

.footer__payment { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--container); margin: 0 auto; padding: 20px 24px 26px; border-top: 1px solid var(--line); }
.payment { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.payment__label { font-size: 13px; font-weight: 400; letter-spacing: .04em; color: var(--text-secondary); }
.payment__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.payment__list img { width: 32px; height: 32px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 50%; object-fit: contain; }
.footer__copyright { color: var(--text-muted); font-size: 13px; text-align: right; }

/* Shortcut navigation (.sitenav): one <nav> in the footer, five items, the header logo in the middle.
   Here (desktop): a centred, static row between the footer content and the copyright line - never fixed.
   Below 960px the same element becomes the fixed bottom bar (responsive.css). */
.sitenav {
    --sitenav-accent: #e0b747;
    display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 2.6vw, 44px);
    max-width: var(--container); margin: 0 auto; padding: 16px 16px 12px;
    border-top: 1px solid rgba(213, 169, 47, .15);
}
.sitenav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
    min-width: 92px; padding: 2px 6px 9px;
    color: #b9b9b9; font-size: 13px; font-weight: 400; line-height: 1.3; white-space: nowrap;
    transition: color 180ms ease;
}
.sitenav__item .icon { flex: 0 0 auto; width: 24px; height: 24px; color: #c8c8c8; transition: transform 180ms ease, color 180ms ease; }
.sitenav__item::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px; background: var(--sitenav-accent); transform: scaleX(0); transition: transform 180ms ease; }
.sitenav__item:hover, .sitenav__item.is-active, .sitenav__item--register { color: var(--sitenav-accent); }
.sitenav__item:hover .icon, .sitenav__item.is-active .icon { color: var(--sitenav-accent); }
.sitenav__item:hover .icon { transform: translateY(-2px); }
.sitenav__item:hover::after, .sitenav__item.is-active::after { transform: scaleX(1); }
.sitenav__item:focus-visible { outline: 2px solid var(--sitenav-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* centre item: the logo of the header (same file, a plain <img>) above "สมัครสมาชิก", slightly raised.
   The box has a fixed size so it can never collapse; nothing here depends on mask / background images. */
.sitenav__logo {
    display: flex; align-items: center; justify-content: center;
    width: 82px; height: 20px; min-width: 82px; margin: 0 auto 2px; overflow: visible;
    transform: translateY(-2px);
    transition: transform 180ms ease;
    animation: registerFloat 2.8s ease-in-out infinite;
}
.sitenav__logo img { display: block; width: 100%; height: auto; max-width: none; object-fit: contain; }
@media (max-width: 767px) { .sitenav__logo { width: 72px; height: 18px; min-width: 72px; } }
.sitenav__item--register:hover .sitenav__logo { transform: translateY(-4px); }
.sitenav__item--register:active .sitenav__logo { transform: translateY(-2px) scale(.97); }
/* the floating buttons sit at the right edge: keep the copyright line clear of them on desktop */
@media (min-width: 960px) { .footer__payment { padding-right: 84px; } }

.floating { position: fixed; right: 16px; bottom: calc(var(--bottom-bar-h) + 16px); z-index: 1002; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fab { display: grid; place-items: center; border-radius: 50%; transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); }
.fab:hover { transform: translateY(-2px); }
.fab--top { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 40px; height: 40px; margin-left: -20px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--gold); }
.fab--top:hover { border-color: var(--border-hover); }
.fab--chat { width: 46px; height: 46px; background: var(--button-primary); color: var(--on-gold); }
.fab--chat:hover { background: var(--button-primary-hover); }
/* entrance of the floating contact button: once, after the page is up (fill "backwards", so hover still moves it afterwards) */
.fab--chat { animation: fab-in 420ms ease 500ms backwards; }

/* 14. Motion: reveal on scroll, image fade-in, small keyframes ---------------------------------- */
/* .reveal is added by app.js only (so content is never hidden without JavaScript). */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
img[loading="lazy"] { transition: opacity .3s ease; }
.img-fade { opacity: 0; }
@keyframes fab-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
:target { scroll-margin-top: calc(var(--header-h) + 12px); }

/* 15. Depth + light -----------------------------------------------------------------------------
   Black + two golds + one wine accent:
     bright gold (--gold / --gold-bright)  CTA, active state, hover highlight
     muted gold  (--gold-muted, low alpha) borders, dividers, small detail
     wine        (--wine)                  HOT badge only
   Everything here is static paint (gradients, borders, one shadow per element) or a short
   transform / opacity transition; no animated background, blur or shadow. */

/* -- header */
.appbar {
    border-bottom-color: rgba(228, 184, 63, .2);
    background:
        radial-gradient(ellipse 36% 150% at 50% 0%, rgba(228, 184, 63, .1), transparent 72%),
        linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
}
.appbar.is-scrolled { border-bottom-color: rgba(228, 184, 63, .32); }
.appbar__logo img { filter: brightness(1.08) contrast(1.06) drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.mainnav { border-bottom-color: rgba(228, 184, 63, .2); background: linear-gradient(180deg, #111010, #0a0a0a); }
.mainnav__list { justify-content: center; gap: 10px; }
.mainnav__link { color: #c9c9c9; }
.mainnav__link:hover { color: #ffffff; }
.mainnav__link.is-active { color: var(--gold); }
.mainnav__link::after { border-radius: 2px; background: linear-gradient(90deg, var(--gold-bright), var(--gold-muted)); }
@media (min-width: 1280px) {
    /* one row, three zones: [logo] [menu, centred on the bar itself] [login / register] */
    :root { --mainnav-h: 0px; }
    .mainnav {
        top: 0; left: 50%; right: auto; z-index: 1007;
        height: var(--appbar-h); padding: 0;
        border-bottom: 0; background: none;
        transform: translateX(-50%);
    }
    .mainnav__link::after { bottom: 0; }
}

/* -- login / register */
.auth-actions .btn, .register-cta { border-radius: 10px; }
.register-cta {
    --register-face: linear-gradient(180deg, #ffe49a 0%, #e4b83f 48%, #b98213 100%);
    border-color: rgba(255, 228, 154, .85); color: #16120a;
    box-shadow: 0 6px 18px rgba(204, 153, 32, .18), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.register-cta--shine::before, .register-cta--shine::after {
    width: 38%;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 246, 214, .14) 22%, rgba(255, 251, 232, .92) 50%, rgba(255, 246, 214, .16) 78%, transparent 100%);
}
.auth-actions .btn--secondary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.auth-actions .btn--secondary:hover { transform: translateY(-1px); }
.auth-actions .btn--secondary:hover .icon { transform: none; }
@media (min-width: 960px) {
    .auth-actions .btn { height: 42px; }
    .auth-actions .register-cta { padding: 0 20px; }
}

/* -- page: a faint static gold light at the top of the main content + a very soft vignette at the sides */
.main {
    background:
        radial-gradient(ellipse 80% 720px at 50% 0%, rgba(228, 184, 63, .07), transparent 45%) no-repeat,
        linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 13%, transparent 87%, rgba(0, 0, 0, .3)) no-repeat top / 100% 900px;
}

/* -- announcement ticker (home page): a full-width strip between the header and the hero, outside .container.
      Secondary information: translucent face, soft lines, text quieter than titles / CTAs; only the label is gold. */
.ticker {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: none; height: 34px; margin: 0; padding: 0 0 0 12px; overflow: hidden;
    border-top: 1px solid rgba(220, 175, 50, .1); border-bottom: 1px solid rgba(220, 175, 50, .12);
    background: linear-gradient(90deg, rgba(18, 15, 9, .68), rgba(11, 11, 11, .72));
    color: rgba(224, 213, 188, .78); font-size: 13px; line-height: 1.5;
}
.ticker + .container { padding-top: 0; }           /* the hero starts right under the strip */
.ticker__label {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    height: 22px; padding: 0 8px;
    border-radius: 5px;
    background: linear-gradient(180deg, #c69a27, #9a741b); color: #17120a; font-size: 12px; font-weight: 500;
}
.ticker__label .icon { width: 14px; height: 14px; }
.ticker__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.ticker__track { display: flex; width: max-content; }
.ticker__text { flex: 0 0 auto; white-space: nowrap; }
.ticker__text span::after { content: "\2022"; margin: 0 15px; opacity: .55; }      /* 15px + dot + 15px between messages, also where the loop joins */
.has-marquee .ticker__track.is-ready { animation: cardMarquee var(--marquee-duration, 22s) linear infinite; }
@media (hover: hover) {
    .ticker:hover .ticker__track { animation-play-state: paused; }
}
@media (max-width: 959px) {
    .ticker { gap: 8px; height: 32px; padding-left: 8px; font-size: 12px; }
    .ticker__label { height: 20px; padding: 0 7px; font-size: 11px; }
}
/* no motion (reduced motion / old browser): the text stays in place, one line, cut off with an ellipsis */
html:not(.has-marquee) .ticker { padding-right: 12px; }
html:not(.has-marquee) .ticker__track { display: block; width: auto; }
html:not(.has-marquee) .ticker__text { overflow: hidden; text-overflow: ellipsis; }

/* -- hero / video frame, intro strip, promotion banners */
.hero__main, .video-card { border-color: rgba(228, 184, 63, .24); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.hero__main::after, .video-card::after {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; z-index: 3; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 207, 104, .8), transparent);
    pointer-events: none;
}
.intro {
    position: relative;
    border-color: rgba(228, 184, 63, .16);
    background: linear-gradient(90deg, rgba(228, 184, 63, .07), transparent 46%), linear-gradient(180deg, #171511, #0f0e0c);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.intro__title { color: #f1eee8; font-size: 19px; }
.intro__title::before {          /* small label above the headline: decoration, not part of the heading text */
    content: "MARUAY888 \2022  ONLINE ENTERTAINMENT"; display: block; margin-bottom: 3px;
    color: #a8842e; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .14em;
}
.intro__key { color: var(--gold-bright); }
.promo-strip__slide { border-color: rgba(228, 184, 63, .22); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .34); }
.promo-strip__slide:hover { border-color: var(--border-hover); transform: translateY(-2px) scale(1.004); }

/* -- sections: every card row is a full-width band with its own tone, a muted gold line and a short warm light on top.
      The band is a pseudo-element behind the content, so nothing in the layout moves and no box is drawn around it. */
.game-row, .provider-strip, .proof, .game-row + .game-row {
    --band: var(--bg-section);
    position: relative; isolation: isolate;
    margin-top: 0; padding: 26px 0 30px;
}
.promo-strip + .game-row, .promo-strip + .proof { margin-top: 34px; }
.game-row::before, .provider-strip::before, .proof::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1;
    width: 100vw; margin-left: -50vw;
    border-top: 1px solid rgba(228, 184, 63, .16);
    background: linear-gradient(180deg, rgba(228, 184, 63, .055), transparent 130px), var(--band);
}
#casino, #sport { --band: #0f0e0c; }
#slot, #keno { --band: #11100d; }
.provider-strip, .proof, #fishing, #lotto { --band: #0b0b0b; }
.provider-strip::before, .proof::before, #fishing::before, #lotto::before { background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 110px), var(--band); border-top-color: rgba(255, 255, 255, .07); }

/* section title: gold bar | name + small English label (data-en), short gold line that fades out */
.section-title, .game-row__title {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 11px;
    padding-bottom: 9px;
    color: #f1eee8; font-size: 19px; line-height: 1.3;
    background: linear-gradient(90deg, var(--gold), rgba(228, 184, 63, .35) 55%, transparent) no-repeat left bottom / 86px 2px;
}
.section-title::before, .game-row__title::before {
    grid-row: 1 / 3; align-self: center;
    width: 3px; height: 22px; background: linear-gradient(var(--gold-bright), var(--gold-deep));
}
.section-title[data-en]::after, .game-row__title[data-en]::after {
    content: attr(data-en); grid-column: 2;
    color: var(--text-muted); font-size: 10.5px; font-weight: 400; line-height: 1.4; letter-spacing: .16em;
}
.section-title[data-en]::before, .game-row__title[data-en]::before { height: 34px; }
.row-btn { border-color: rgba(255, 255, 255, .1); background: linear-gradient(180deg, #1a1a1a, #121212); color: #d6d0c4; }
.row-btn:hover { border-color: var(--border-hover); color: var(--gold-bright); }

/* -- withdrawal reviews (home page): real pictures from the old site, five square tiles.
      >= 1200px all five in one row; below that a native swipe row (scroll-snap), no script. */
.proof__bar { display: flex; align-items: center; gap: 8px; }
.proof__bar .section-title { flex: 1 1 auto; min-width: 0; }
.proof__bar .row-btn { flex: 0 0 auto; padding: 0 6px 0 12px; }
.proof__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); margin-top: 14px; list-style: none; }
.proof__item {
    overflow: hidden;
    border: 1px solid rgba(228, 184, 63, .2); border-radius: 10px;
    background: #101010;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .34);
    transition: border-color 200ms ease, transform 200ms ease;
}
.proof__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (hover: hover) {
    .proof__item:hover { border-color: var(--border-hover); transform: translateY(-3px); }
}
@media (max-width: 1199px) {
    .proof__list {
        display: flex; padding: 4px 0 6px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .proof__list::-webkit-scrollbar { display: none; }
    .proof__item { flex: 0 0 250px; scroll-snap-align: start; }
}
@media (max-width: 599px) {
    .proof__item { flex-basis: 80vw; }
}

/* -- cards: quiet when idle (no gold frame), gold only on hover */
.game-card__thumb {
    border-color: rgba(255, 255, 255, .06); border-radius: 8px;
    background: linear-gradient(180deg, #171717, #101010);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
}
.game-card__thumb:hover, .game-card__thumb:focus-visible { border-color: rgba(240, 207, 104, .55); }
.game-card__overlay { background: rgba(0, 0, 0, .2); }          /* the picture stays the star */
.game-card__meta { position: relative; z-index: 1; }             /* the name stays above the card's shadow */
.game-card__name { color: #c4bcae; transition: color 200ms ease; }
.game-card__thumb::after {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; z-index: 2; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(240, 207, 104, .6), transparent);
    opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
/* provider logos: dark tiles, logos slightly dimmed and desaturated until hover; a muted gold line fades in below */
.provider-box {
    position: relative;
    border-color: rgba(255, 255, 255, .055); border-radius: 8px;
    background: #141414;
    transition: border-color 200ms ease;
}
.provider-box img { opacity: .7; filter: grayscale(.4); transition: opacity 200ms ease, filter 200ms ease; }
.provider-box::after {
    content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-muted), var(--gold), var(--gold-muted), transparent);
    opacity: 0; transition: opacity 200ms ease; pointer-events: none;
}
.provider-box:hover { border-color: rgba(140, 106, 32, .75); background: #171614; }
.provider-box:hover img { opacity: 1; filter: none; }
.provider-box:hover::after { opacity: 1; }
/* HOT: the one wine accent */
.game-row--hot .game-row__track > .game-card:nth-child(-n+5) .game-card__thumb::before,
.game-row--hot .game-card.is-hot-copy .game-card__thumb::before {
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, #9c2e32, #68191d); color: #fff;
    box-shadow: none; font-weight: 500;
}
@media (hover: hover) {
    .game-card__thumb:hover::after { opacity: 1; }
    .game-card__thumb:hover img { filter: brightness(1.03); }
    .game-card:hover .game-card__name { color: var(--gold); }
    .fab--chat:hover { transform: scale(1.04); }
}
.fab--chat { box-shadow: 0 6px 16px rgba(0, 0, 0, .42); }
.reveal { transform: translateY(8px); }

/* HOT label: a very small pulse, desktop only, and only while its row is on screen */
@keyframes hotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@media (hover: hover) and (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .game-row--hot .game-row__track > .game-card:nth-child(-n+5) .game-card__thumb::before,
    .game-row--hot .game-card.is-hot-copy .game-card__thumb::before { animation: hotPulse 3s ease-in-out infinite; }
    .auto-card-carousel.is-offscreen .game-card__thumb::before { animation-play-state: paused; }
}

/* -- desktop dock: the same five items as the mobile bottom bar, fixed and centred at the bottom */
@media (min-width: 960px) {
    .sitenav {
        --sitenav-accent: var(--gold);
        position: fixed; left: 50%; bottom: 14px; z-index: 1000;
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; gap: 0;
        width: min(700px, calc(100vw - 48px)); max-width: none; min-height: 64px; margin: 0; padding: 0 18px;
        border: 1px solid rgba(228, 184, 63, .24); border-radius: 14px;
        background: linear-gradient(180deg, #171511, #0d0d0d);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .55);
        transform: translateX(-50%);
    }
    .sitenav__item { justify-content: center; gap: 3px; min-width: 0; padding: 8px 4px 7px; color: #aaaaaa; font-size: 12px; letter-spacing: .01em; }
    .sitenav__item .icon { width: 22px; height: 22px; color: #aaaaaa; }
    .sitenav__item::after { top: 0; bottom: auto; width: 28px; margin-left: -14px; }
    /* centre item: the logo, a little larger and brighter than its neighbours */
    .sitenav__item--register { color: var(--gold-bright); font-weight: 500; }
    .sitenav__logo { width: 100px; height: 22px; min-width: 100px; margin-bottom: 0; transform: translateY(-5px); }
    .sitenav__item--register:hover .sitenav__logo { transform: translateY(-7px); }
    .sitenav__item--register:active .sitenav__logo { transform: translateY(-5px) scale(.97); }
    /* room for the dock: nothing at the end of the page is covered, and the floating buttons sit above it */
    .footer { padding-bottom: 96px; }
    .floating { bottom: 96px; }
}

/* -- phones / tablets: fewer layers - no card shadows, no desaturation filter, reveal without movement */
@media (max-width: 959px) {
    .game-card__thumb, .promo-strip__slide, .intro, .proof__item { box-shadow: none; }
    .hero__main, .video-card { box-shadow: 0 6px 14px rgba(0, 0, 0, .34); }
    .provider-box img { filter: none; }
    .reveal { transform: none; }
    .game-row, .provider-strip, .proof, .game-row + .game-row { padding: 20px 0 22px; }
    .promo-strip + .game-row, .promo-strip + .proof { margin-top: 24px; }
    .intro__title { font-size: 17px; }
}

/* 16. Shared page components -------------------------------------------------------------------
   The home page is the reference. Sub pages (promotion, casino, review, affiliate) get the same frame,
   page head, card, image frame and heading from here; their own CSS files only hold layout. */
.subpage { max-width: var(--page); margin: 0 auto; }

/* page head: same surface as the home page's intro strip */
.page-head, .review-head, .casino-hero, .affiliate-hero {
    margin-top: var(--space-sm); padding: 22px 24px;
    border: 1px solid rgba(228, 184, 63, .16); border-radius: var(--radius-lg);
    background: linear-gradient(90deg, rgba(228, 184, 63, .07), transparent 46%), linear-gradient(180deg, #171511, #0f0e0c);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
.page-head__title, .review-head__title, .casino-hero__title, .affiliate-hero__title {
    color: var(--text-main); font-size: 26px; font-weight: 500; line-height: 1.4; letter-spacing: .01em; text-wrap: balance;
}
h1[data-en]::before {            /* small label above the page title: decoration, not part of the heading text */
    content: "MARUAY888 \2022  " attr(data-en); display: block; margin-bottom: 4px;
    color: #a8842e; font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .14em;
}
.page-head__intro, .review-head__intro, .casino-hero__intro, .affiliate-hero__intro {
    max-width: 820px; margin-top: 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.75;
}
.casino-hero__actions, .affiliate-hero__actions, .page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }

/* base card: quiet when idle, gold line on hover (same treatment as the game cards) */
.promo-card, .review-card, .step, .feature {
    border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px;
    background: linear-gradient(180deg, #171717, #101010);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
    transition: transform 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
    .promo-card:hover, .review-card:hover, .step:hover, .feature:hover { border-color: var(--border-hover); transform: translateY(-3px); }
}
/* picture frame: muted gold line, same radius and shadow as the hero / video frame */
.casino-hero__media, .provider__media, .affiliate-figure img, .promo-detail__media {
    border: 1px solid rgba(228, 184, 63, .22); border-radius: var(--radius-lg);
    background: var(--bg-header);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .34);
}
/* content heading (article H2 on every page, provider titles): gold bar + a short gold line that fades out */
.article__section > h2, .provider__title {
    position: relative; margin-bottom: 14px; padding: 0 0 10px 14px;
    color: var(--text-main); font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: .01em;
    background: linear-gradient(90deg, var(--gold), rgba(228, 184, 63, .35) 55%, transparent) no-repeat left bottom / 86px 2px;
}
.article__section > h2::before, .provider__title::before {
    content: ""; position: absolute; left: 0; top: .28em; width: 3px; height: 1.02em; border-radius: 2px;
    background: linear-gradient(var(--gold-bright), var(--gold-deep));
}
.article__section > h2::after { content: none; }
/* dot list used in article sections */
.review-points, .affiliate-points { display: grid; gap: 8px; max-width: 820px; margin-top: var(--space-sm); }
.review-points li, .affiliate-points li { position: relative; padding-left: 18px; color: var(--text-article); font-size: 16px; line-height: 1.75; }
.review-points li::before, .affiliate-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.cta { border-color: rgba(228, 184, 63, .16); background: linear-gradient(180deg, #171511, #0f0e0c); }
.modal__close:hover { color: var(--gold-bright); }

@media (max-width: 959px) {
    .page-head, .review-head, .casino-hero, .affiliate-hero { padding: 16px; box-shadow: none; }
    .page-head__title, .review-head__title, .casino-hero__title, .affiliate-hero__title { font-size: 22px; }
    .promo-card, .review-card, .step, .feature, .casino-hero__media, .provider__media, .affiliate-figure img { box-shadow: none; }
    .subpage .article { padding-left: 6px; padding-right: 6px; }      /* 12px page gutter + 6px = 18px for long text */
    .casino-hero__actions .btn, .affiliate-hero__actions .btn, .page-head__actions .btn { flex: 1 1 0; }
}
@media (max-width: 599px) {
    .page-head__title, .review-head__title, .casino-hero__title, .affiliate-hero__title { font-size: 20px; }
    .page-head__intro, .review-head__intro, .casino-hero__intro, .affiliate-hero__intro { font-size: 14px; }
    .review-points li, .affiliate-points li { font-size: 15px; }
}

/* 17. Icons -------------------------------------------------------------------------------------
   One set (tools/icons.py): line icons, stroke 2, round caps, colour = currentColor.
   Buttons: .icon--start / .icon--end (size + gap in section 3). Menus and channels below. */
.mainnav__link { gap: 7px; padding: 0 10px; }
.mainnav__link::after { left: 10px; right: 10px; }
.mainnav__link .icon { width: 18px; height: 18px; color: #c7c7c7; transition: color var(--transition-fast); }
.mainnav__link:hover .icon { color: #ffffff; }
.mainnav__link.is-active .icon { color: var(--gold); }
.mainnav__menu .dropdown__item .icon { width: 17px; height: 17px; color: #c7c7c7; transition: color var(--transition-fast); }
.mainnav__menu .dropdown__item:hover .icon { color: var(--gold); }
.nav-sub { display: flex; align-items: center; gap: 8px; }
.nav-sub .icon { width: 16px; height: 16px; color: var(--gold); }
@media (min-width: 1280px) and (max-width: 1399px) {
    /* one row with icons on a 1280 - 1399px screen: a slightly tighter menu keeps clear of the buttons */
    .mainnav__list { gap: 4px; }
    .mainnav__link { gap: 6px; padding: 0 8px; font-size: 14px; }
    .mainnav__link::after { left: 8px; right: 8px; }
    .mainnav__link .icon { width: 17px; height: 17px; }
}
.promo-card__actions .btn { gap: 6px; }
.promo-card__actions .btn .icon { width: 16px; height: 16px; }
@media (max-width: 599px) {
    /* phone header: both buttons keep their icon, just smaller */
    .auth-actions .btn { gap: 4px; padding: 0 7px; }
    .auth-actions .btn .icon { display: block; width: 15px; height: 15px; }
    .auth-actions .btn .icon--end { margin-left: 0; }
}
@media (max-width: 389px) {
    .appbar .appbar__logo img { max-width: 88px; }      /* smallest phones: a slightly smaller logo keeps the two buttons (with icons) clear of it */
}

/* Dock / bottom-bar logo: the box adapts to the file - the one-line header logo or the stacked logo -
   so it is never stretched and never taller than the bar has room for. */
.sitenav__logo { height: auto; min-height: 18px; }
.sitenav__logo img { width: auto; height: auto; max-width: 100%; max-height: 28px; }
.notfound { margin-bottom: var(--space-xl); }

/* 3D black/gold icons (WebP, public/images/icons/3d/, made by tools/icons-3d/). Decorative: alt="" + aria-hidden.
   Resting slightly dimmed; hover / current page: full brightness and a 1px lift. Arrows keep their own slide. */
.icon-3d { flex: 0 0 auto; object-fit: contain; filter: brightness(.9); transition: filter 180ms ease, transform 180ms ease; }
.icon-3d[src$="-dark.webp"] { filter: none; }
a:hover > .icon-3d:not(.icon--arrow), button:hover > .icon-3d, summary:hover > .icon-3d,
.is-active > .icon-3d, [aria-current="page"] > .icon-3d,
.nav-item:hover .icon-3d, .sitenav__item:hover .icon-3d { filter: brightness(1); transform: translateY(-1px); }

/* Welcome popup (home page, once per session; opened by app.js section 18).
   The <dialog> itself is the full-screen backdrop, so a click on it (outside the panel) closes it.
   Closed: the browser keeps <dialog> at display:none, so without JS nothing is shown or blocked. */
/* Performance: opened with dialog.show() (not showModal - that re-styles the whole page, measured 30-130 ms on a
   phone); app.js keeps it modal (focus trap, ESC, aria-modal). No backdrop blur, a static shadow, and only opacity +
   transform are animated. While it is open the page behind holds still: video paused, marquees / ticker / CTA
   effects paused (animation-play-state, so everything continues from the same spot afterwards). */
html.welcome-open { overflow: hidden; }
html.welcome-open .auto-card-track, html.welcome-open .ticker__track, html.welcome-open .fab--chat,
html.welcome-open :not(.welcome__actions) > .register-cta,
html.welcome-open :not(.welcome__actions) > .register-cta::before,
html.welcome-open :not(.welcome__actions) > .register-cta::after { animation-play-state: paused !important; }
.welcome {
    position: fixed; inset: 0; z-index: 5000;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0; padding: 12px 14px; border: 0;
    background: rgba(0, 0, 0, .8); color: var(--text-main);
    overscroll-behavior: contain; touch-action: none;       /* a swipe on the dark area never scrolls the page (iOS too) */
}
.welcome[open] { display: flex; align-items: center; justify-content: center; animation: welcome-fade-in 200ms ease both; }
.welcome__panel {
    position: relative; display: grid; gap: 14px;
    width: 100%; max-width: 430px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    padding: 14px 14px 16px;
    border: 1px solid rgba(228, 184, 63, .45); border-radius: 16px;
    background: linear-gradient(180deg, #19160f 0%, #0d0d0d 100%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
@media (min-width: 600px) { .welcome__panel { max-width: 520px; padding: 16px 18px 20px; } }
.welcome[open] .welcome__panel { animation: welcome-in 200ms ease both; }
.welcome.is-closing { animation: welcome-fade-out 170ms ease both; }
.welcome.is-closing .welcome__panel { animation: welcome-out 170ms ease both; }
.welcome.is-opening .welcome__panel, .welcome.is-closing .welcome__panel { will-change: transform, opacity; }   /* only while it moves */
@media (max-width: 768px) {
    .welcome__panel { box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
    .welcome[open] .welcome__panel { animation-name: welcome-in-sm; }
    .welcome.is-closing .welcome__panel { animation-name: welcome-out-sm; }
}
.welcome__panel::before {
    content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, #e4b83f, #f2d476, #e4b83f, transparent);
    pointer-events: none;
}
.welcome__x {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid rgba(228, 184, 63, .35); border-radius: 50%;
    background: rgba(13, 13, 13, .78); color: #e6dfd2;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.welcome__x:hover { border-color: var(--gold-bright); color: var(--gold-bright); }
.welcome__x:focus-visible, .welcome__close:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 2px; }
/* The picture (square, 1040 px) is the LINE link: the link is exactly as big as the picture (no empty clickable
   margin) and never taller than 58% of the screen, so the X, the text and the buttons always fit on a phone.
   aspect-ratio keeps the space reserved before the file arrives (no jump). */
.welcome__media {
    display: block; width: 100%; max-width: 58vh; max-width: 58dvh; margin: 0 auto;
    border-radius: 10px; background: #0d0d0d; -webkit-tap-highlight-color: transparent;
}
.welcome__media[hidden] { display: none; }
.welcome__media[hidden] + .welcome__body { padding: 6px 48px 0; }      /* picture failed: keep the text clear of the X */
.welcome__media:focus-visible { outline: 2px solid var(--gold-hover); outline-offset: 3px; }
.welcome__image {
    display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
    object-fit: contain; border-radius: 10px;
}
.welcome__body .welcome__line { color: #e4b83f; font-weight: 500; letter-spacing: .02em; }
.welcome__body { display: grid; gap: 6px; padding: 0 4px; text-align: center; }
.welcome__title { margin: 0; color: #f1eee8; font-size: 20px; font-weight: 500; line-height: 1.35; }
.welcome__text { margin: 0; color: #c9c1b2; font-size: 14.5px; font-weight: 400; line-height: 1.65; }
.welcome__note { margin: 2px 0 0; color: #9a917f; font-size: 13px; line-height: 1.5; }
.welcome__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.welcome__actions .btn { width: 100%; min-height: 46px; height: auto; }
.welcome__close { background: #141210; border-color: rgba(228, 184, 63, .3); color: #d9d2c4; }
.welcome__close:hover { border-color: rgba(228, 184, 63, .6); color: #f1eee8; }
@media (max-width: 359px) { .welcome__actions { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .welcome__title { font-size: 18px; } .welcome__text { font-size: 14px; } }
@keyframes welcome-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes welcome-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes welcome-in { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes welcome-out { from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 0; transform: translate3d(0, 6px, 0) scale(.985); } }
@keyframes welcome-in-sm { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes welcome-out-sm { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, 6px, 0); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal, .img-fade { opacity: 1; transform: none; }
    .register-cta, .register-cta--shine::before, .register-cta--shine::after, .sitenav__logo, .fab--chat, .game-card__thumb::before { animation: none; }
    .reveal { transition: none; }
    .register-cta--shine::before { display: none; }
}

/* ==========================================================================================
   Responsive rules (formerly responsive.css - merged here: one render-blocking file less, same order)
   ========================================================================================== */
/* ==========================================================================
   responsive.css — breakpoints
     >=  960  desktop: logo + centred .mainnav + login / register (one row from 1200px), no sidebar, fixed dock; content capped at 1440px
     <= 1279  narrower grids; slide-over sidebar rules (the sidebar is only shown below 960px)
     <=  959  tablet: slide-over sidebar + bottom bar, stacked hero (768, phones)
     <=  599  phone: app-like UI               (430, 390, 375)
   Colours come from the tokens in style.css.
   ========================================================================== */

/* ---- <= 1279px: slide-over sidebar ----------------------------------------- */
@media (max-width: 1279px) {
    .layout { padding-left: 0; }
    .drawer {
        width: min(264px, 86vw);
        transform: translateX(-105%);
        box-shadow: var(--shadow-pop);
        visibility: hidden;
        transition: transform var(--transition), visibility 0s linear .22s;
    }
    .drawer-open .drawer { transform: none; visibility: visible; transition-delay: 0s; }
    .drawer-open body { overflow: hidden; }
    .provider-strip__list { grid-template-columns: repeat(6, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__inner { gap: 24px; }
}

/* ---- <= 959px: tablet ------------------------------------------------------ */
@media (max-width: 959px) {
    :root { --bottom-bar-h: calc(66px + env(safe-area-inset-bottom, 0px)); --appbar-h: 60px; --mainnav-h: 0px; --section-gap: 28px; }
    .mainnav { display: none; }

    .container { padding: 12px 12px 32px; }

    /* hero: video card only */
    .hero { flex-direction: column; }
    .hero__main { display: none; }
    .hero__side { flex: 1 1 100%; }
    .video-card { height: auto; aspect-ratio: 1106 / 720; }      /* the real ratio of the video: the box is reserved before anything loads, nothing is cropped */

    .intro { flex-direction: column; align-items: stretch; margin-top: 12px; padding: 14px; }
    .intro__title { font-size: 16px; }      /* overridden for the home strip in style.css section 15 */
    .intro__actions .btn { flex: 1 1 0; }
    /* touch target of the register CTA (the login button next to it in the header follows) */
    .register-cta, .auth-actions .btn { min-height: 42px; }

    .promo-strip__slide { flex-basis: calc((100% - var(--gap)) / 2); }

                
            .provider-strip__list { grid-template-columns: repeat(4, 1fr); }
    .services__list { grid-template-columns: repeat(2, 1fr); }

    .article { margin-top: 40px; padding: 28px 24px 0; }   /* side room for the text only: the article is the only padded block */
    .article__section { margin-top: 32px; }
    .article__section > h2 { font-size: 19px; }
    .provider-groups { grid-template-columns: 1fr; gap: 14px; }

                        
    .footer { margin-top: 40px; }
    .trust-strip__inner { gap: 16px; padding: 16px; }
                    .footer__payment { flex-direction: column; gap: 14px; padding: 18px 16px 24px; text-align: center; }
    .payment, .payment__list { justify-content: center; }
    .footer__copyright { text-align: center; }

    /* .sitenav as the fixed bottom bar: 5 equal columns, the header logo in the middle (register) */
    .layout { padding-bottom: calc(var(--bottom-bar-h) + 14px); }
    .sitenav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: grid; grid-template-columns: repeat(5, 20%); align-items: stretch; gap: 0;
        max-width: none; height: var(--bottom-bar-h); margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0px);
        background: var(--bg-header);
    }
    .sitenav__item { justify-content: center; gap: 3px; min-width: 0; padding: 0; font-size: 11px; line-height: 1.2; }
    .sitenav__item .icon { width: 22px; height: 22px; }
    .sitenav__item:hover .icon { transform: none; }
    .sitenav__item::after { top: 0; bottom: auto; width: 24px; margin-left: -12px; }
    .sitenav__item:hover::after { transform: scaleX(0); }
    .sitenav__item.is-active::after { transform: scaleX(1); }
    .sitenav__item--register { gap: 4px; }
    .sitenav__logo { transform: translateY(-5px); }
    .sitenav__item--register:hover .sitenav__logo { transform: translateY(-5px); }
    .sitenav__item--register:active .sitenav__logo { transform: translateY(-5px) scale(.96); }
}

/* ---- <= 599px: phone ---------------------------------------------------------- */
@media (max-width: 599px) {
    :root { --gap: 10px; --appbar-h: 56px; }

    .appbar { gap: 6px; padding: 0 10px 0 8px; }
    .appbar__logo { width: auto; padding: 4px 0; }
    .appbar__logo img { width: auto; max-height: 26px; max-width: clamp(80px, 26vw, 110px); }
    .appbar__actions, .auth-actions { gap: 6px; }
    .appbar__search { display: none; }
    .icon-btn { width: 40px; height: 40px; border-color: transparent; background: transparent; }
    .icon-btn .icon { width: 22px; height: 22px; }
    .auth-actions .btn { height: 40px; padding: 0 10px; font-size: 13px; }

    .promo-strip__slide { flex-basis: 86%; }
    .video-card { min-height: 0; }

                
    .section-title, .game-row__title { font-size: 17px; }
    .section-title[data-en]::before, .game-row__title[data-en]::before { height: 30px; }
    .row-btn { min-width: 40px; height: 40px; }
    .game-row__track { scroll-snap-type: x mandatory; }
    .game-row__track > .game-card { flex-basis: 116px; }
                .provider-strip__list { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .provider-box { height: 48px; }
    .services__list { grid-template-columns: 1fr 1fr; }
    .service { padding: 12px; gap: 10px; }
    .service__title { font-size: 14px; }
    .service__desc { font-size: 12px; }

    .article { padding-left: 18px; padding-right: 18px; }
    .article__lead, .article__section > p { font-size: 15px; line-height: 1.75; }
    .article__lead p + p, .article__section > p + p { margin-top: 14px; }
    .article__section { margin-top: 28px; }
    .article__section > h2 { margin-bottom: 12px; font-size: 18px; }
    .feature-grid { grid-template-columns: 1fr; }
    .cta { padding: 14px; }
    .cta__actions { width: 100%; }
    .cta__actions .btn { flex: 1 1 0; }

    .footer__links { gap: 0 18px; }
    .payment__list img { width: 30px; height: 30px; }

    /* dialogs become bottom sheets */
    .modal { max-width: 100vw; margin: auto 0 0; }
    .modal__panel { padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; max-height: 92dvh; }

    .floating { right: 12px; }
}

/* ---- touch devices: no hover lift --------------------------------------------- */
@media (hover: none) {
    .game-card__thumb:hover, .promo-strip__slide:hover, .btn--primary:hover { transform: none; }
    .game-card__thumb:hover img { transform: none; }
}

/* ---- touch devices: every main control is at least 44px tall (finger size) ------ */
@media (pointer: coarse) {
    .icon-btn { width: 44px; height: 44px; }
    .row-btn { min-width: 44px; height: 44px; }
    .btn, .contact-chip { min-height: 44px; }
    .btn, .auth-actions .btn { height: auto; min-height: 44px; }
    .search-field .btn { min-height: 32px; }       /* sits inside the 44px search field */
}

/* ---- Rendering performance (phones / tablets, below 960px): content below the first screen ----------------
   content-visibility:auto = the browser skips style / layout / paint of these parts (and does not fetch their
   images yet) until they come near the screen; the content stays in the page for search engines, find-in-page
   and screen readers. contain-intrinsic-size = the measured height, "auto" remembers the real one after the first
   render, so the scrollbar does not jump. Desktop is left as it was (there the browser would draw that text with
   grayscale instead of ClearType anti-aliasing).
   Card rows: set on the carousel, not on the section - the section's full-width band (::before, 100vw) would be
   clipped otherwise. The 10px padding / -10px margin keeps room for the hover lift and shadow without moving
   anything. NOT used on .footer__bottom: it holds the fixed bottom bar. */
@media (max-width: 959px) {
    .auto-card-carousel, .services, .article, .footer__links, .footer__contact { content-visibility: auto; }
    .auto-card-carousel { padding-block: 10px; margin-block: -10px; contain-intrinsic-size: auto 199px; }
    .provider-strip .auto-card-carousel { contain-intrinsic-size: auto 48px; }
    .services { contain-intrinsic-size: auto 150px; }
    .article { contain-intrinsic-size: auto 3700px; }
    .footer__links { contain-intrinsic-size: auto 86px; }
    .footer__contact { contain-intrinsic-size: auto 147px; }
}
@media (min-width: 600px) and (max-width: 959px) {
    .auto-card-carousel { contain-intrinsic-size: auto 244px; }
    .provider-strip .auto-card-carousel { contain-intrinsic-size: auto 56px; }
    .article { contain-intrinsic-size: auto 2800px; }
}