/* ==========================================================================
   style.css — NAKHON365: the green and the gold of the logo on dark green. Green runs the interface, gold marks the CTA.
   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;

    /* LOGO COLOURS - the source of truth. Sampled from public/images/log-Nakhon365.png
       (opaque, saturated pixels; green hue 154 deg, gold hue 34 - 59 deg; lightness percentiles).
       Everything green or gold below is one of these values or an alpha of it. */
    --logo-green-deep: #0E5736;                  /* p10  shadow side of "365" */
    --logo-green-dark: #117348;                  /* p30 */
    --logo-green-main: #138153;                  /* p50  the green of the logo */
    --logo-green-light: #17A267;                 /* p90  lit side of "365" */
    --logo-green-glow: #3FD694;                  /* same hue, lighter: text / icons / light on dark (derived, not in the file) */
    --logo-gold-dark: #C18432;                   /* p10 */
    --logo-gold-main: #E6A949;                   /* p30 */
    --logo-gold-light: #FAE271;                  /* p50  the gold of the logo */
    --logo-gold-soft: #FDF583;                   /* p70 */

    /* surfaces: dark green of the same hue, so the logo colours stand out on them */
    --bg-deep: #031611;                          /* header, top bar, sidebar, dock: opaque */
    --bg-main: #06231B;                          /* colour under the background picture */
    --bg-footer: rgba(3, 22, 17, .88);
    --bg-strip: rgba(8, 43, 33, .92);            /* announcement bar */
    --bg-section: rgba(3, 22, 17, .38);          /* section band */
    --bg-section-alt: rgba(11, 53, 40, .46);
    --panel-face: linear-gradient(135deg, rgba(8, 43, 33, .92), rgba(3, 22, 17, .9));   /* welcome panel, page heads */
    --bg-card: #082B21;                          /* game / review / provider cards: solid */
    --bg-raised: #0B3528;
    --bg-active: #0E4533;
    --bg-input: #031611;

    --green-face: linear-gradient(180deg, var(--logo-green-main), var(--logo-green-dark));   /* green button */
    --active-face: linear-gradient(180deg, rgba(23, 162, 103, .26), rgba(14, 87, 54, .26));  /* active menu item */
    --gold-face: linear-gradient(180deg, var(--logo-gold-light) 0%, var(--logo-gold-main) 52%, var(--logo-gold-dark) 100%);   /* register CTA */
    --on-gold: #1B1608;

    --accent: var(--logo-green-glow);            /* icons, links, active */
    --accent-hover: #7BE7B6;
    --accent-muted: var(--logo-green-light);     /* markers, focused input border */
    --accent-soft: rgba(63, 214, 148, .1);
    --on-accent: #031611;
    --hot: #9E3A32;                              /* HOT badge only */
    --error: #E58A78;

    --text-primary: #F8FBF8;
    --text-secondary: #D5E1DA;
    --text-body: #C4D3CA;                        /* long text: one step under headings */
    --text-nav: #E4ECE7;
    --text-muted: #93AA9E;
    --text-en: #8AA596;                          /* small English label under a heading */
    --text-strong: #FFFFFF;

    --border: rgba(63, 214, 148, .12);
    --border-strong: rgba(63, 214, 148, .22);
    --border-hover: rgba(63, 214, 148, .34);
    --border-input: var(--logo-green-main);
    --border-gold: rgba(250, 226, 113, .42);

    --overlay: rgba(1, 10, 7, .78);
    --overlay-soft: rgba(0, 0, 0, .2);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lift: 0 12px 30px rgba(0, 0, 0, .34);
    --shadow-pop: 0 10px 28px rgba(0, 0, 0, .42);
    --glow: 0 0 16px rgba(63, 214, 148, .1);         /* soft logo-green light: frames, green button */
    --glow-hover: 0 0 18px rgba(63, 214, 148, .14);  /* cards / tiles while hovered */
    --glow-gold: 0 0 14px rgba(250, 226, 113, .12);  /* register CTA and the register tile only */

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 8px;
    --radius-card: 10px;
    --radius-panel: 10px;       /* welcome panel, page heads, hero / banner frames */
    --radius-btn: 8px;
    --radius-pill: 999px;

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

    --topbar-h: 0px;            /* desktop utility bar; 32px from 960px (section 18) */
    --appbar-h: 64px;
    --mainnav-h: 48px;          /* desktop menu row; 0 below 960px */
    --header-h: calc(var(--topbar-h) + 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;
}

/* phones / tablets: the same picture, panels a little more opaque so text stays easy to read */
@media (max-width: 959px) {
    :root {
        --bg-section: rgba(3, 22, 17, .52);
        --bg-section-alt: rgba(11, 53, 40, .6);
        --panel-face: linear-gradient(135deg, rgba(8, 43, 33, .96), rgba(3, 22, 17, .95));
    }
}

/* 2. Fonts + base ------------------------------------------------------------ */
/* Kanit (SIL Open Font License), self-hosted, light weights only: 300 / 400 / 500.
   font-display: optional + <link rel=preload> = no late swap, so no layout shift. */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 300; font-display: optional; 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: optional; 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: optional; 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: optional; 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: optional; 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: optional; 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: 400;
    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 */
    scrollbar-color: var(--bg-active) var(--bg-deep);
}

body { margin: 0; color: var(--text-primary); overflow-x: hidden; }
/* Page background: one picture (public/images/bg_gen-min.jpg, 51 KB) on a fixed full-viewport layer
   behind the page, under a light dark veil. A fixed element instead of background-attachment: fixed:
   it also works on iOS Safari and the long page never stretches the picture. Veil: raise the two
   alphas by .05 - .1 if the picture competes with the banners, lower them if it is hardly visible. */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background:
        linear-gradient(rgba(3, 22, 17, .24), rgba(3, 22, 17, .4)),
        url("../images/bg_gen-min.jpg") center top / cover no-repeat var(--bg-main);
    filter: hue-rotate(-13deg) saturate(1.05);      /* the picture is teal (168 deg): bring it to the logo green (154 deg). Static layer, painted once */
    pointer-events: none;
}

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
h1, h2, h3 { font-weight: 600; }      /* Kanit ships up to 500: 600 resolves to that file, never a faux bold */
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(--accent); }

:focus-visible { outline: 2px solid var(--accent); 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(--accent); color: var(--on-accent); font-weight: 500;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 10px; }

.link { color: var(--accent); font-weight: 400; }
.link:hover { color: var(--accent-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-btn);
    font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: .01em; white-space: nowrap;
    cursor: pointer; user-select: none;
    transition: transform 200ms ease-out, background 200ms ease-out, filter 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
/* gold: the register CTA - the only gold face on the site */
.btn--primary {
    border-color: rgba(255, 255, 255, .1);
    background: var(--gold-face); color: var(--on-gold);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .24), var(--glow-gold);
}
.btn--primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
/* emerald: login and every ordinary action */
.btn--secondary { border-color: rgba(63, 214, 148, .3); background: var(--green-face); color: var(--text-strong); box-shadow: var(--glow); }
.btn--secondary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn--secondary:active { transform: translateY(0); }
.btn:disabled, .btn[aria-disabled="true"] {
    background: var(--bg-active); border-color: var(--border); 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; }
.btn--block { display: flex; width: 100%; }

/* Line sweep on the gold button: a thin bright line crosses it once, in 500ms,
   only while it is hovered or focused with the keyboard. Nothing moves by itself. Transform only. */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 18%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42) 45%, rgba(255, 255, 255, .42) 55%, transparent);
    transform: translateX(-160%) skewX(-22deg); pointer-events: none;
}
.btn--primary:focus-visible::after { transform: translateX(720%) skewX(-22deg); transition: transform 500ms ease-out; }
@media (hover: hover) {
    .btn--primary:hover::after { transform: translateX(720%) skewX(-22deg); transition: transform 500ms ease-out; }
}

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

/* 4. App bar ------------------------------------------------------------------ */
.appbar {
    position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 1006;
    display: flex; align-items: center; gap: 6px;
    height: var(--appbar-h);
    padding: 0 16px 0 12px;
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    transition: border-color var(--transition);
}
.appbar.is-scrolled { border-bottom-color: var(--border-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: calc(var(--topbar-h) + 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-deep);
}
.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; isolation: isolate; display: flex; align-items: center; gap: 7px; padding: 0 10px;
    color: var(--text-nav); font-size: 15px; font-weight: 500; white-space: nowrap;
    transition: color var(--transition-fast);
}
/* hover / active: a quiet solid tile behind the label (no underline) */
.mainnav__link::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; z-index: -1; height: 36px; margin-top: -18px; border-radius: var(--radius-md); background: rgba(63, 214, 148, .08); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.mainnav__link:hover { color: var(--text-strong); }
.mainnav__link:hover::after { opacity: 1; }
.mainnav__link.is-active { color: var(--text-strong); }
.mainnav__link.is-active::after { background: var(--active-face); box-shadow: inset 0 0 0 1px rgba(63, 214, 148, .28), inset 0 0 12px rgba(63, 214, 148, .1); opacity: 1; }
.mainnav__link:focus-visible, .mainnav__caret:focus-visible { outline: 2px solid var(--accent-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: -28px; }      /* the tile also sits behind the caret */
.mainnav__caret { position: relative; z-index: 1; 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(--accent); }
.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(--bg-card);
    box-shadow: var(--shadow-pop);
    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-deep);
    border-right: 1px solid var(--border);
    transition: width var(--transition), transform var(--transition);
}
.drawer__scroll { height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bg-active) 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(--bg-card);
    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-primary); }
.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(--border-strong); border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--bg-active);
}
.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(--accent); }
.app-card__tiles { display: flex; gap: 3px; }
.app-card__tiles i { flex: 1; height: 12px; border-radius: 2px; background: var(--border-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(--accent); transition: transform var(--transition-fast); }
.nav-item::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; border-radius: 2px;
    background: var(--logo-green-light); transform: translateY(-50%) scaleY(0); transition: transform var(--transition-fast);
}
.nav-item:hover { background: var(--bg-raised); color: var(--text-strong); }
.nav-item:hover .icon { transform: translateX(2px); }
.nav-item.is-active { background: var(--bg-raised); color: var(--accent-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(--border); }

.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(--accent-hover); }
.breadcrumb [aria-current="page"] { color: var(--accent); }
/* Small section title with an accent bar (game rows, provider strip, catalog). */
.section-title, .game-row__title, .catalog__title {
    display: flex; align-items: center; gap: 10px;
    color: var(--text-primary); font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: .01em;
}
.section-title::before, .game-row__title::before, .catalog__title::before {
    content: ""; flex: 0 0 auto; width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(var(--logo-green-glow), var(--logo-green-main)); box-shadow: 0 0 8px rgba(63, 214, 148, .25);
}

/* 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__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: rgba(198, 216, 211, .25);
    transition: background var(--transition), transform var(--transition);
}
.carousel__dot:hover::before { background: var(--logo-green-light); }
.carousel__dot[aria-current="true"]::before { background: var(--logo-green-glow); box-shadow: 0 0 8px rgba(63, 214, 148, .25); transform: scaleX(1.25); }


.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(--bg-card); }
/* 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: var(--bg-deep) 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 {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
    margin-top: 14px; padding: 24px 26px;
    border: 1px solid rgba(63, 214, 148, .13); border-radius: var(--radius-panel);
    background: var(--panel-face);
}
.intro__title { color: var(--text-primary); font-size: 24px; font-weight: 600; line-height: 1.4; letter-spacing: .01em; text-wrap: balance; }
.intro__text { max-width: 600px; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.intro__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.promo-strip__slide { flex-basis: 100%; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); transition: border-color 200ms ease, transform 200ms ease; }
.promo-strip__slide:hover { border-color: var(--border-hover); }      /* no lift: the slide sits in a scrolling track that would clip it */
/* Every banner is shown whole, at the real ratio of its own file: full width of the slide, height from the picture.
   Nothing here fixes a height or a ratio and nothing crops (the generic .carousel__slide img rule uses cover: undone here).
   Before a picture has loaded, its width / height attributes reserve the right box, so nothing jumps. */
.promo-strip .carousel { width: 100%; height: auto; min-height: 0; }
.promo-strip .carousel__track { align-items: flex-start; height: auto; }      /* a slide is as tall as its own banner, never stretched to the tallest */
.promo-strip__slide { display: block; width: 100%; height: auto; }
.promo-strip__slide img {
    display: block; width: 100%; height: auto; max-width: 100%; max-height: none;
    aspect-ratio: auto; object-fit: contain; object-position: center;
}
.promo-strip .carousel__dots { height: 24px; margin-top: 0; }      /* the 3px dots sit in a 24px row: about 10px of air under the banner */

/* 8. Category tiles ------------------------------------------------------------------ */
.home-menu { display: grid; grid-template-columns: .4fr 1fr; gap: var(--gap); margin-top: 6px; }
.home-menu__hero { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.home-menu__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.menu-card {
    position: relative; display: block; overflow: hidden;
    min-height: 112px; height: 100%; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-raised);
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.menu-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.menu-card__img { position: absolute; right: 0; bottom: 0; z-index: 0; width: auto; height: 100%; max-width: 72%; object-fit: contain; object-position: right bottom; transition: transform var(--transition); }
.menu-card:hover .menu-card__img { transform: scale(1.02); }
.menu-card__title { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--text-primary); font-weight: 500; letter-spacing: .01em; }
.menu-card__title .icon { color: var(--accent); }
.menu-card--hero .menu-card__title { font-size: 17px; }
.menu-card--mini .menu-card__title { font-size: 15px; }

/* 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(--border-strong); border-radius: var(--radius-sm);
    background: var(--bg-card); 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(--accent-hover); }
.row-btn[data-row-next]:hover .icon, .row-btn--all:hover .icon { transform: translateX(2px); }
.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; }
.game-row__track--wide > .game-card { flex-basis: 230px; }
/* 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-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    transition: transform 200ms ease, border-color 200ms ease;
}
.game-card--wide .game-card__thumb { aspect-ratio: 1035 / 660; }
.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(--logo-green-light); color: var(--on-accent);
    transform: scale(.94); transition: transform var(--transition-fast);
}
.game-card__thumb:hover, .game-card__thumb:focus-visible { transform: translateY(-2px); border-color: var(--border-hover); }
.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 { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; margin-top: 6px; }      /* the name stays above the card's shadow */
.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; transition: color 200ms ease; }
.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(--accent-hover); transform: scale(1.1); }
.fav[aria-pressed="true"] { color: var(--logo-green-glow); }
.fav[aria-pressed="true"] path { fill: currentColor; }
.game-card.is-found .game-card__thumb { border-color: var(--accent); }
/* "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: var(--hot); color: var(--text-strong);
    font-size: 10px; font-weight: 500; line-height: 1.6; letter-spacing: .06em;
    pointer-events: none;
    transform-origin: left top;
}

.game-grid { display: grid; gap: var(--gap); }
.game-grid--vertical { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.game-grid--horizontal { grid-template-columns: repeat(4, 1fr); }

.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(--border); border-radius: var(--radius-md);
    background: var(--bg-card);
    transition: border-color 200ms ease, background 200ms ease;
}
.provider-box:hover { border-color: var(--border-hover); background: var(--bg-raised); }
/* logos slightly dimmed and desaturated until hover */
.provider-box img { width: auto; height: 100%; max-height: 36px; object-fit: contain; opacity: .7; filter: grayscale(.4); transition: opacity 200ms ease, filter 200ms ease; }
.provider-box:hover img { opacity: 1; filter: none; }

/* 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); }
/* Provider logos: two rows, the second one runs the other way. Same engine and keyframe as every card row;
   only the direction (reverse) and the time of one loop are set here. One loop = one set of 12 logos.
   The !important is deliberate: app.js writes --marquee-duration inline from its px-per-second speed,
   and these two rows are timed in seconds per loop instead. */
.provider-strip__row + .provider-strip__row .provider-strip__list { margin-top: 8px; }
.has-marquee .provider-strip__row .auto-card-track { --marquee-duration: 32s !important; }
.has-marquee .provider-strip__row--reverse .auto-card-track { --marquee-duration: 34s !important; }
.has-marquee .provider-strip__row--reverse .auto-card-track.is-ready { animation-direction: reverse; }
@media (hover: none) {
    /* touch: the logos are not links, so the rows just run; a finger scrolls the page straight through them */
    .has-marquee .provider-strip__row { pointer-events: none; }
}

.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(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.service .icon { color: var(--accent); }
.service__text { display: block; min-width: 0; }
.service__title { display: block; color: var(--text-primary); 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; }
.catalog__title { margin-bottom: 12px; }
.catalog__search { margin-bottom: 10px; }
.catalog__controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.catalog__more { display: flex; justify-content: center; margin-top: 20px; }

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

.toolbar-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--bg-card); color: var(--text-primary);
    font-size: 14px; font-weight: 400; white-space: nowrap;
    transition: border-color var(--transition-fast);
}
.toolbar-btn .icon { color: var(--accent); }
.toolbar-btn:hover { border-color: var(--border-hover); }
.toolbar-btn__label { color: var(--text-muted); }
.toolbar-btn__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; }
.provider-filter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 10px; }

.content-page { display: grid; gap: 16px; margin-top: 8px; }
.content-hero { padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.content-hero__eyebrow { margin-bottom: 2px; color: var(--accent); font-size: 12px; font-weight: 400; letter-spacing: .1em; }
.content-hero__title { font-size: 24px; line-height: 1.3; }
.content-hero__desc { max-width: 720px; margin-top: 6px; color: var(--text-secondary); font-size: 14px; }
.content-hero__stat { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 3px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 13px; color: var(--text-secondary); }
.content-hero__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.content-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.content-card:hover { transform: translateY(-2px); border-color: var(--border-hover); }
.content-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-raised); overflow: hidden; }
.content-card__media--square { aspect-ratio: 1 / 1; }
.content-card__media img { width: 100%; height: 100%; object-fit: cover; }
.content-card__badge { position: absolute; top: 10px; left: 10px; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--overlay); border: 1px solid var(--border-hover); color: var(--accent-hover); font-size: 12px; }
.content-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 6px; padding: 14px 16px 16px; }
.content-card__title { font-size: 16px; line-height: 1.4; }
.content-card__excerpt { flex: 1 1 auto; color: var(--text-secondary); font-size: 14px; }
.content-card__date { color: var(--text-muted); font-size: 12px; }
.content-card__cta { align-self: flex-start; margin-top: 6px; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; }
.empty-state .icon { color: var(--accent); }
.empty-state__title { color: var(--text-primary); font-size: 18px; font-weight: 500; }
.empty-state__text { font-size: 14px; }
.empty-state--page { margin-top: 24px; border: 0; padding: 64px 16px; }
.empty-state--page .btn { margin-top: 12px; }
.empty-state__code { font-size: 64px; font-weight: 500; line-height: 1; color: var(--accent); }

.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.channel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-secondary); transition: border-color var(--transition-fast), transform var(--transition-fast); }
.channel:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.channel__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
.channel__text { flex: 1 1 auto; min-width: 0; }
.channel__label { display: block; color: var(--text-primary); font-size: 15px; font-weight: 400; }
.channel__handle { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.panel { padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.panel__title { margin-bottom: 10px; font-size: 17px; }

.accordion { border-bottom: 1px solid var(--border); }
.accordion:last-of-type { border-bottom: 0; }
.accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 400; cursor: pointer; list-style: none; transition: color var(--transition-fast); }
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary:hover { color: var(--accent-hover); }
.accordion__summary .icon { color: var(--accent); transition: transform var(--transition); }
.accordion[open] > .accordion__summary .icon { transform: rotate(180deg); }
.accordion__body { padding: 0 0 12px; color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
ul.accordion__body { padding-left: 18px; list-style: disc; }

.notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border: 1px solid var(--border-hover); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text-primary); font-size: 14px; }
.notice .icon { color: var(--accent); margin-top: 2px; }

.auth-page { display: flex; justify-content: center; padding: 24px 0 40px; }
.auth-card { display: grid; gap: 14px; width: 100%; max-width: 420px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); }
.auth-card__logo { width: 140px; margin: 0 auto; }
.auth-card__title { font-size: 20px; text-align: center; }
.auth-card__switch { color: var(--text-secondary); font-size: 14px; text-align: center; }

/* 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(--border);
}
.article__lead { color: var(--text-secondary); 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: 0 0 4px 14px;
    color: var(--text-primary); font-size: 21px; font-weight: 500; line-height: 1.45; letter-spacing: .01em;
}
.article__section > p { color: var(--text-secondary); font-size: 16px; line-height: 1.8; }
.article__section > p + p { margin-top: 12px; }
.article strong { color: var(--text-primary); font-weight: 400; }
.article a:not(.btn):not(.feature__link) { color: var(--accent); 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(--accent-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(--border); border-bottom: 1px solid var(--border); }
.provider-group__title { margin-bottom: 8px; color: var(--text-primary); 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(--border-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(--border); border-radius: var(--radius-md); background: var(--bg-card); 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-primary); font-size: 15px; font-weight: 400; }
.feature__title .icon { color: var(--accent); }
.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(--accent); font-size: 14px; }
.feature__link .icon { transition: transform var(--transition-fast); }
.feature__link:hover { color: var(--accent-hover); }
.feature__link:hover .icon { transform: translateX(3px); }

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.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-primary); 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(--accent-hover); }
.faq__button .icon { color: var(--accent); transition: transform var(--transition); }
.faq__button[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__panel { padding: 0 0 14px; color: var(--text-secondary); 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(--bg-card); }
.cta__text { color: var(--text-primary); font-size: 16px; font-weight: 400; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* 12. Forms, dialogs, dropdowns --------------------------------------------------------------- */
.form { display: grid; gap: 12px; }
.form__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.field__label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 400; color: var(--text-secondary); }
.field__optional { color: var(--text-muted); }
.field__control {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 0 12px;
    border: 1px solid var(--border-input); border-radius: var(--radius-md);
    background: var(--bg-input); color: var(--text-muted);
    transition: border-color var(--transition-fast);
}
.field__control:focus-within { border-color: var(--accent-muted); color: var(--accent); }
.field__control input, .field__control textarea { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 16px; font-weight: 300; }
.field__control input { height: 42px; }
.field__control--area { padding: 10px 12px; }
.field__control textarea { resize: vertical; min-height: 96px; }
.field__control input::placeholder, .field__control textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field__control:has(:user-invalid) { border-color: var(--error); }
.field__toggle { display: grid; place-items: center; width: 32px; height: 32px; margin-right: -4px; border-radius: var(--radius-sm); color: var(--text-muted); transition: color var(--transition-fast); }
.field__toggle:hover { color: var(--accent-hover); }

.checkbox { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--accent); }

.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-primary);
    overflow: visible;
}
.modal--search, .modal--promo { max-width: min(540px, calc(100vw - 24px)); }
.modal--video { max-width: min(820px, 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(--bg-card);
    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(--bg-active); color: var(--text-strong); }
.modal__logo { width: 140px; margin: 0 auto; }
.modal__title { padding-right: 40px; font-size: 17px; font-weight: 500; }
.modal__text, .modal__hint { color: var(--text-secondary); font-size: 14px; }
.modal__media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-raised); }
.modal__video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); background: var(--bg-input); }
.modal__video--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 1px dashed var(--border-strong); color: var(--text-secondary); font-size: 14px; text-align: center; }

.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-input); }
.tabs__tab { height: 38px; border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; font-weight: 400; transition: background var(--transition-fast), color var(--transition-fast); }
.tabs__tab:hover { color: var(--text-strong); }
.tabs__tab.is-active { background: var(--bg-active); color: var(--logo-green-glow); }

.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(--border-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(--accent); }
.chip:hover { border-color: var(--border-hover); color: var(--text-strong); }

.dropdown { position: relative; }
.dropdown__menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100;
    min-width: 180px; padding: 5px;
    border: 1px solid var(--border-strong); border-radius: var(--radius-md);
    background: var(--bg-raised);
    box-shadow: var(--shadow-pop);
    animation: fade-down var(--transition-fast) both;
}
.dropdown__menu--right { left: auto; right: 0; }
.dropdown__menu--wide { width: 300px; padding: 12px; }
.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(--bg-active); color: var(--text-strong); }
.dropdown__item.is-active { color: var(--accent-hover); }
.dropdown__item .icon { margin-left: auto; }
.dropdown__code { display: grid; place-items: center; width: 28px; height: 20px; border: 1px solid var(--border-hover); border-radius: 4px; color: var(--accent); font-size: 11px; font-weight: 500; }

.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(--bg-active); color: var(--text-primary);
    box-shadow: var(--shadow-pop);
    font-size: 14px;
    transform: translateX(-50%);
}

/* 13. Footer, bottom bar, floating ----------------------------------------------------------- */
.footer { margin-top: 56px; border-top: 1px solid rgba(63, 214, 148, .14); background: var(--bg-footer); color: var(--text-primary); }
.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(--logo-green-light); 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-primary); }
.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(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font-size: 14px; font-weight: 400; transition: border-color var(--transition-fast); }
.contact-chip .icon { color: var(--accent); }
.contact-chip:hover { border-color: var(--border-hover); }
.contact-chip__handle { color: var(--text-muted); }

.footer__bottom { border-top: 1px solid var(--border); }
.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-label { font-size: 13px; font-weight: 400; letter-spacing: .04em; line-height: 1.5; white-space: nowrap; color: var(--text-secondary); }
.trust-logo { display: inline-flex; align-items: center; justify-content: center; }
.trust-logo img { width: auto; height: auto; max-width: 140px; max-height: 34px; opacity: .7; transition: opacity var(--transition-fast); }
.trust-logo:hover img { opacity: 1; }
.trust-divider { flex: 0 0 auto; width: 1px; height: 28px; background: var(--border-strong); }
.trust-age { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 6px; border: 1px solid var(--border-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(--border); }
.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(--border-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: var(--logo-green-glow);
    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(63, 214, 148, .16);
}
.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: var(--text-muted); font-size: 13px; font-weight: 400; line-height: 1.3; white-space: nowrap;
    transition: color 180ms ease;
}
.sitenav__item .navicon { flex: 0 0 auto; width: 24px; height: 24px; opacity: .66; transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease; }
.sitenav__item:hover .navicon, .sitenav__item.is-active .navicon, .sitenav__item--register .navicon { opacity: 1; }
.sitenav__item--register .navicon { filter: brightness(1.1) drop-shadow(0 0 6px rgba(250, 226, 113, .2)); }      /* the brightest icon of the bar */
.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 { color: var(--sitenav-accent); }
.sitenav__item--register, .sitenav__item--register:hover { color: var(--logo-gold-light); }      /* the one gold item of the bar */
.sitenav__item:hover .navicon { 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;
}
.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(--border-strong); background: var(--bg-raised); color: var(--accent); }
.fab--top:hover { border-color: var(--border-hover); }
.fab--chat { width: 46px; height: 46px; background: var(--logo-green-main); color: var(--text-strong); box-shadow: 0 0 16px rgba(63, 214, 148, .18); }
.fab--chat:hover { background: var(--logo-green-light); }

/* 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: 1; }      /* scroll reveal is switched off: sections are simply there (app.js still adds the class) */
.reveal.is-visible { opacity: 1; transform: none; }
img[loading="lazy"] { transition: opacity .3s ease; }
.img-fade { opacity: 0; }
@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. Layers --------------------------------------------------------------------------------------
   Depth comes from solid greens one step apart (page, band, card, raised), not from light:
   no gradients, glow, blur or animated paint. One thin shadow on cards, desktop only. */

/* -- header */
.mainnav__list { justify-content: center; gap: 10px; }
@media (min-width: 1280px) {
    /* one row, three zones: [logo] [menu, centred between the two] [login / register] */
    :root { --mainnav-h: 0px; }
    .mainnav {
        /* 54px left of the bar's centre = the middle of the free space between the logo and the (wider) buttons */
        top: var(--topbar-h); left: calc(50% - 54px); right: auto; z-index: 1007;
        width: max-content;                /* with left: 50% the box would otherwise stop at half the screen and squeeze the labels */
        height: var(--appbar-h); padding: 0;
        border-bottom: 0; background: none;
        transform: translateX(-50%);
    }
}

/* -- login / register */
.auth-actions .btn--secondary:hover { transform: translateY(-1px); }
.auth-actions .btn--secondary:hover .icon { transform: none; }
@media (min-width: 960px) {
    .auth-actions .btn { height: 38px; }
    .auth-actions .register-cta { padding: 0 20px; }
}

/* -- announcement ticker (home page): a full-width strip between the header and the hero, outside .container.
      Secondary information: band colour, one soft line, text quieter than titles / CTAs. */
.ticker {
    display: flex; align-items: center; gap: 10px;
    width: 100%; max-width: none; height: 28px; margin: 0; padding: 0 0 0 12px; overflow: hidden;
    border-top: 1px solid rgba(63, 214, 148, .08); border-bottom: 1px solid rgba(63, 214, 148, .1);
    background: var(--bg-strip);
    color: var(--text-secondary); font-size: 12.5px; line-height: 1.5;
}
.ticker + .container { padding-top: 10px; }
.ticker__label {
    display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
    height: 20px; padding: 0 7px;
    border-radius: 5px;
    background: var(--bg-card); color: var(--text-primary); font-size: 11.5px; font-weight: 500;
}
.ticker__label .icon { width: 14px; height: 14px; color: var(--logo-green-glow); }
.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; padding-left: 8px; font-size: 12px; }
    .ticker__label { height: 18px; padding: 0 6px; 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 */
.video-card { box-shadow: var(--shadow-lift), var(--glow); }
.intro__title::before {          /* small label above the headline: decoration, not part of the heading text */
    content: "NAKHON365 \2022  ONLINE ENTERTAINMENT"; display: block; margin-bottom: 10px; padding-left: 9px;
    border-left: 3px solid var(--logo-green-light);         /* the marker of the label */
    color: var(--text-muted); font-size: 11px; font-weight: 400; line-height: 1.25; letter-spacing: .08em;
}
.intro__key { color: var(--logo-gold-light); }
.promo-strip__slide { border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* -- sections: every card row is a full-width band in its own solid green; the change of tone is the divider (no lines).
      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;
}
.welcome + .game-row, .welcome + .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;
    background: var(--band);
}
/* A main / B section / A / D panel ... : neighbours never share a level */
#casino, #slot, #sport, #keno { --band: transparent; }
.provider-strip { --band: var(--bg-section-alt); }
.proof::before, .provider-strip::before { border-top: 1px solid rgba(63, 214, 148, .08); }

/* section title: accent bar | name + small English label (data-en) */
.section-title, .game-row__title, .catalog__title {
    display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 11px;
    padding-bottom: 2px;
    font-size: 21px; line-height: 1.3;
}
.section-title::before, .game-row__title::before, .catalog__title::before {
    grid-row: 1 / 3; align-self: center;
    width: 3px; height: 22px;
}
.section-title[data-en]::after, .game-row__title[data-en]::after {
    content: attr(data-en); grid-column: 2;
    color: var(--text-en); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: .08em;
}
.section-title[data-en]::before, .game-row__title[data-en]::before { height: 34px; }

/* -- 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, .game-row__actions .row-btn--all { 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 var(--border); border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    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(-2px); }
}
@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: hover detail (devices with a pointer only) */
@media (hover: hover) {
    .game-card:hover .game-card__name { color: var(--text-strong); }
    .fab--chat:hover { transform: scale(1.04); }
}

/* -- desktop dock: the same five items as the mobile bottom bar, as one slim bar attached to the bottom edge.
      It is page chrome like the header (not an island floating over the cards): the page ends above it
      and the floating buttons sit 20px above it. */
@media (min-width: 960px) {
    :root { --dock-h: 50px; }
    .sitenav {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: grid; grid-template-columns: repeat(5, minmax(0, 136px)); justify-content: center; align-items: stretch; gap: 0;
        max-width: none; height: var(--dock-h); margin: 0; padding: 0 16px;
        border-top: 1px solid rgba(63, 214, 148, .16);
        background: var(--bg-deep);
    }
    .sitenav__item { flex-direction: row; align-items: center; justify-content: center; gap: 8px; min-width: 0; padding: 0 6px; font-size: 13px; letter-spacing: .01em; }
    .sitenav__item .navicon { width: 21px; height: 21px; }
    .sitenav__item:hover .navicon { transform: none; }
    .sitenav__item::after { top: 0; bottom: auto; width: 28px; margin-left: -14px; }
    .sitenav__item--register { font-weight: 500; }
    .sitenav .sitenav__logo { width: auto; min-width: 0; min-height: 0; margin: 0; transform: none; }
    .sitenav .sitenav__logo img { max-height: 22px; }
    .footer { padding-bottom: calc(var(--dock-h) + 28px); }
    .floating { bottom: calc(var(--dock-h) + 20px); }
    .toast { bottom: calc(var(--dock-h) + 24px); }
}

/* -- phones / tablets: no card shadows, no desaturation filter, reveal without movement */
@media (max-width: 959px) {
    .game-card__thumb, .promo-strip__slide, .proof__item, .video-card { box-shadow: none; }
    .provider-box img { filter: none; }
    .reveal { transform: none; }
    .game-row, .provider-strip, .proof, .game-row + .game-row { padding: 20px 0 22px; }
    .welcome + .game-row, .welcome + .proof { margin-top: 24px; }
}

/* 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, .affiliate-hero {
    margin-top: var(--space-sm); padding: 22px 24px;
    position: relative;
    border: 1px solid rgba(63, 214, 148, .13); border-radius: var(--radius-panel);
    background: var(--panel-face);
}
.page-head__title, .review-head__title, .affiliate-hero__title {
    color: var(--text-primary); font-size: 26px; font-weight: 600; 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: "NAKHON365 \2022  " attr(data-en); display: block; margin-bottom: 10px; padding-left: 9px;
    border-left: 3px solid var(--logo-green-light);         /* the marker of the label */
    color: var(--text-muted); font-size: 11px; font-weight: 400; line-height: 1.25; letter-spacing: .08em;
}
.page-head__intro, .review-head__intro, .affiliate-hero__intro {
    max-width: 820px; margin-top: 8px; color: var(--text-secondary); font-size: 15px; line-height: 1.75;
}
.affiliate-hero__actions, .page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-md); }

/* base card: solid face, a lighter border on hover (same treatment as the game cards) */
.promo-card, .review-card, .step, .feature {
    border: 1px solid var(--border); border-radius: var(--radius-card);
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
    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(-2px); }
}
/* picture frame: same border, radius and shadow as the hero / video frame */
.affiliate-figure img, .promo-detail__media {
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-deep);
    box-shadow: var(--shadow-card);
}
/* content heading (article H2 on every page): accent bar on the left */
.article__section > h2::before {
    content: ""; position: absolute; left: 0; top: .28em; width: 3px; height: 1.02em; border-radius: 2px;
    background: var(--accent-muted);
}
/* 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-secondary); 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(--accent-muted); }

@media (max-width: 959px) {
    .page-head, .review-head, .affiliate-hero { padding: 16px; }
    .page-head__title, .review-head__title, .affiliate-hero__title { font-size: 22px; }
    .promo-card, .review-card, .step, .feature, .affiliate-figure img { box-shadow: none; }
    .subpage .article { padding-left: 6px; padding-right: 6px; }      /* 12px page gutter + 6px = 18px for long text */
    .affiliate-hero__actions .btn, .page-head__actions .btn { flex: 1 1 0; }
}
@media (max-width: 599px) {
    .page-head__title, .review-head__title, .affiliate-hero__title { font-size: 20px; }
    .page-head__intro, .review-head__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 .navicon { width: 20px; height: 20px; opacity: .88; transition: opacity var(--transition-fast), filter var(--transition-fast); }
.mainnav__link:hover .navicon { opacity: 1; filter: brightness(1.08) drop-shadow(0 0 6px rgba(250, 226, 113, .14)); }
.mainnav__menu .dropdown__item .icon { width: 17px; height: 17px; color: var(--text-muted); transition: color var(--transition-fast); }
.mainnav__menu .dropdown__item:hover .icon { color: var(--accent); }
.nav-sub { display: flex; align-items: center; gap: 8px; }
.nav-sub .icon { width: 16px; height: 16px; color: var(--accent); }
@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 .navicon { width: 18px; height: 18px; }
}
@media (min-width: 1400px) {
    /* eight menu items: closer together, so the row keeps clear of the login / register buttons */
    .mainnav__list { gap: 4px; }
    .mainnav__link { padding: 0 9px; }
}
.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); }

/* 18. Composition ------------------------------------------------------------------------------------
   Top utility bar, home welcome panel + video, footer columns. */

/* -- top utility bar (desktop): one quiet line above the header */
.topbar { display: none; }
@media (min-width: 960px) {
    .topbar {
        position: fixed; top: 0; left: 0; right: 0; z-index: 1006;
        display: flex; align-items: center; justify-content: space-between; gap: 24px;
        height: var(--topbar-h);
        padding: 0 max(20px, calc((100% - var(--container)) / 2 + 20px));
        border-bottom: 1px solid var(--border);
        background: var(--bg-deep);
        color: var(--text-muted); font-size: 12.5px; line-height: 1;
    }
    .topbar__text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .topbar__text strong { color: var(--logo-gold-light); font-weight: 400; }
    .topbar__links { display: flex; align-items: center; flex: 0 0 auto; }
    .topbar__links a { display: inline-flex; align-items: center; height: var(--topbar-h); padding: 0 12px; color: var(--text-nav); transition: color var(--transition-fast); }
    .topbar__links a + a { background: linear-gradient(var(--border-strong), var(--border-strong)) no-repeat left center / 1px 11px; }
    .topbar__links a:hover { color: var(--logo-green-glow); }
    .topbar__links a:last-child { padding-right: 0; }
}
.appbar, .appbar.is-scrolled { border-bottom-color: rgba(63, 214, 148, .14); }

/* -- video frame + home welcome row: [ headline, text, CTAs ] [ video ] */
.video-card { border-color: rgba(63, 214, 148, .2); border-radius: var(--radius-panel); }
.welcome { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap); margin-top: 14px; }
.welcome .intro { margin-top: 0; }
/* the home video beside the welcome panel: the frame has the ratio of the clip (1106x720), so nothing is cropped */
.welcome__video { align-self: center; min-width: 0; }
.welcome__video .video-card { height: auto; min-height: 0; aspect-ratio: 1106 / 720; }
@media (max-width: 959px) {
    .welcome { grid-template-columns: 1fr; margin-top: 12px; }
    .intro { gap: 12px; padding: 20px 16px 18px; }
    .intro__title { font-size: 20px; }
    .intro__text { font-size: 14px; }
    .intro__actions .btn { flex: 1 1 0; height: 44px; }
}

/* -- cards: one transition for lift + border */
.game-card__thumb, .proof__item, .promo-card, .review-card, .step, .feature, .promo-strip__slide { transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out; }

/* -- footer: brand | menu | contact, then the legal rows */
.footer__top {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px 56px; align-items: start;
    max-width: var(--container); margin: 0 auto; padding: 40px 24px 30px;
}
.footer__logo { width: 150px; height: auto; }
.footer__about { max-width: 400px; margin-top: 14px; color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.footer__top .footer__title { margin-bottom: 10px; }
.footer__top .footer__title::after { content: ""; display: block; width: 28px; height: 2px; margin-top: 8px; background: var(--logo-green-light); }
.footer__top .footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; gap: 0 40px; max-width: none; margin: 0; padding: 0; }
.footer__top .footer__contact { max-width: none; margin: 0; padding: 0; text-align: left; }
.footer__top .contact-list { justify-content: flex-start; }
@media (max-width: 959px) {
    .footer__top { grid-template-columns: 1fr; gap: 26px; padding: 30px 16px 24px; text-align: center; }
    .footer__logo, .footer__about { margin-left: auto; margin-right: auto; }
    .footer__top .footer__title::after { margin-left: auto; margin-right: auto; }
    .footer__top .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; }
    .footer__top .footer__contact { text-align: center; }
    .footer__top .contact-list { justify-content: center; }
}

/* 19. Finishing pass: hierarchy + depth ---------------------------------------------------------------
   Banner first, video second; a shorter top area; promotions as one featured + two secondary banners;
   the first withdrawal card a step larger; body text one step quieter than headings. */

/* -- top area: lower rows so the hero starts sooner */
@media (min-width: 960px) {
    :root { --topbar-h: 26px; --appbar-h: 58px; }
    .topbar { font-size: 12px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
    :root { --mainnav-h: 44px; }
}

/* -- typography: H1 and section headings a step up, long text a step quieter */
.intro__title { font-size: 28px; line-height: 1.36; }
.intro__text, .article__lead, .article__section > p, .faq__panel, .review-points li, .affiliate-points li { color: var(--text-body); }
@media (max-width: 959px) {
    .intro__title { font-size: 21px; line-height: 1.4; }
}

/* -- promotions: a single-banner slider on every screen - one banner per view, dots below, no heading */
.promo-strip { margin-top: 0; }      /* hero position: directly under the announcement bar */
@media (max-width: 959px) {
}

/* -- withdrawal proof (>= 1200px): the first card is a step larger and carries a brighter frame */
@media (min-width: 1200px) {
    .proof__list { grid-template-columns: minmax(0, 1.28fr) repeat(4, minmax(0, 1fr)); align-items: end; }
    .proof__item:first-child { position: relative; border-color: rgba(250, 226, 113, .32); }
    .proof__item:first-child::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 34px; height: 3px; background: var(--logo-gold-light); }      /* small gold marker of the featured card */
}

/* -- floating buttons never sit on content:
      >= 1568px  in the empty gutter beside the 1440px frame, 20px above the dock
      960 - 1567 inside the dock itself, at its right end (the gutter is too narrow there)
      <  960     only "back to top" floats; contact is the LINE item of the bottom bar and the drawer */
@media (min-width: 960px) and (max-width: 1567px) {
    .floating { right: 12px; bottom: 6px; flex-direction: row; }
    .floating .fab--top { position: static; margin: 0; }
    .floating .fab { width: 38px; height: 38px; box-shadow: none; }
    .floating .fab .icon { width: 20px; height: 20px; }
}
@media (max-width: 959px) {
    .floating .fab--chat { display: none; }
    .floating .fab--top { position: static; margin: 0; }
}

/* 20. Emerald light ---------------------------------------------------------------------------------
   The background picture carries the atmosphere. CSS only adds one soft teal light (--glow) on the hero
   frames and the green button, a slightly stronger one on hover (--glow-hover), and marks the active
   item. Nothing lights up or moves by itself. */
@media (hover: hover) and (min-width: 960px) {
    .promo-strip__slide:hover, .game-card__thumb:hover, .proof__item:hover, .promo-card:hover, .review-card:hover, .step:hover, .feature:hover, .provider-box:hover {
        box-shadow: var(--shadow-card), var(--glow-hover);
    }
}
.sitenav__item.is-active { text-shadow: 0 0 8px rgba(63, 214, 148, .2); }
.mainnav__link.is-active .navicon, .sitenav__item.is-active .navicon { opacity: 1; filter: brightness(1.06) drop-shadow(0 0 6px rgba(250, 226, 113, .16)); }      /* gold light only on the icons */

@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; }
    .btn--primary::after { display: none; }
    .reveal { transition: none; }
}