/* =============================================================================
   Casino lobby — shared base for the lobby, play and sign-in pages
   -----------------------------------------------------------------------------
   Layout and components only. Every colour and the UI font are tokens the
   request's skin stylesheet (/skin/skin.css, linked after this file) defines;
   a skin may also restyle any component below.
   ========================================================================== */

:root {
    /* Geometry */
    --r-sm:  8px;
    --r-md:  12px;
    --r-lg:  16px;

    /* Motion */
    --ease: .2s cubic-bezier(.4,0,.2,1);

    /* Site-header height — single source of truth so the play-stage iframe
       calc(100dvh - var(--header-h)) stays correct when the header reflows. */
    --header-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--font-ui);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.45;
    min-height: 100vh;
}

a { color: inherit; }

/* ── Header ──────────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    height: var(--header-h);
    background: var(--bg-glass);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(.85rem, 2.5vw, 1.75rem);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.3px;
    color: var(--text);
    text-decoration: none;
}

.logo__mark {
    width: 24px; height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--accent), var(--gold));
    display: inline-grid;
    place-items: center;
    color: var(--mark-ink);
    font-weight: 800;
    font-size: .82rem;
}

.env-badge {
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--accent-2);
    background: var(--accent-dim);
    border: 1px solid rgba(var(--accent-rgb), .35);
    border-radius: 999px;
    padding: .15rem .5rem;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1rem;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid transparent;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: filter var(--ease), background var(--ease), transform var(--ease);
    white-space: nowrap;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

.btn-play {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    box-shadow: 0 4px 14px var(--accent-glow);
}

.btn-outline {
    background: transparent;
    color: var(--accent-2);
    border-color: var(--accent);
}
.btn-outline:hover { background: var(--accent-dim); filter: none; }

.btn-signin {
    padding: .3rem .85rem;
    font-size: .78rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: 0;
}

/* ── Main content ────────────────────────────────────────────────────── */

.main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem clamp(.85rem, 2.5vw, 1.75rem) 3rem;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 1.25rem;
    min-height: 200px;
    display: flex;
    align-items: stretch;
    background: var(--hero-bg, var(--hero-fallback));
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.hero__inner {
    position: relative;
    z-index: 2;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .5rem;
    max-width: 520px;
}

.hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--shade-rgb), .92) 0%, rgba(var(--shade-rgb), .55) 60%, transparent 100%),
                linear-gradient(0deg,  rgba(var(--shade-rgb), .5),  transparent 60%);
    z-index: 1;
}

.hero__title {
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.15;
}

.hero__sub {
    color: var(--text-2);
    font-size: .88rem;
    margin-bottom: .35rem;
}

.hero .btn-play { align-self: flex-start; }

/* ── Category strip — buttons that filter the grid client-side ──────── */

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: .55rem;
    margin-bottom: 1.25rem;
}

.promo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1rem;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text-2);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ease);
}
.promo-card:hover { color: var(--text); border-color: var(--accent-2); transform: translateY(-1px); }

.promo-card.is-on {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px var(--accent-glow);
}

.promo-card__icon  { font-size: 1.05rem; line-height: 1; }
.promo-card__title { letter-spacing: -.1px; }

/* Client-side filter — when <body data-promo-type=…>, hide off-type cards. */
body[data-promo-type] .game-card                                     { display: none; }
body[data-promo-type="slot"]    .game-card[data-type="slot"]         { display: flex; }
body[data-promo-type="live"]    .game-card[data-type="live"]         { display: flex; }
body[data-promo-type="crash"]   .game-card[data-type="crash"]        { display: flex; }
body[data-promo-type="jackpot"] .game-card[data-type="jackpot"]      { display: flex; }
body[data-promo-type="jackpot"] .game-card[data-feature-jackpot="1"] { display: flex; }

/* ── Toolbar (search + sort + count) ─────────────────────────────────── */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.toolbar__search {
    position: relative;
    flex: 1 1 280px;
    max-width: 400px;
    display: flex;
    align-items: center;
}
.toolbar__search input {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: 999px;
    padding: .55rem 2.2rem .55rem 2.4rem;
    font: inherit;
    font-size: .88rem;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.toolbar__search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.toolbar__search-icon {
    position: absolute;
    left: .9rem;
    color: var(--text-dim);
    font-size: .95rem;
    line-height: 1;
}
.toolbar__clear {
    position: absolute;
    right: .65rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--border-2);
    color: var(--text);
    display: inline-grid;
    place-items: center;
    font-size: .9rem;
    line-height: 1;
    text-decoration: none;
    transition: background var(--ease);
}
.toolbar__clear:hover { background: var(--bad); color: #fff; }

.toolbar__meta {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}
.toolbar__count {
    font-size: .82rem;
    color: var(--text-dim);
}
.toolbar__sort select {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: .4rem .7rem;
    font: inherit;
    font-size: .82rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--ease);
}
.toolbar__sort select:hover { border-color: var(--accent); }

/* ── Game grid + cards ───────────────────────────────────────────────── */

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .9rem;
}

.game-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--ease), border-color var(--ease);
    display: flex;
    flex-direction: column;
}
.game-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-2);
}

.game-card__thumb {
    aspect-ratio: 16 / 10;
    position: relative;
    background-color: var(--bg-2);
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}
.game-icon {
    font-size: 2.2rem;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}

/* Hover overlay with the play CTA */
.game-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--shade-rgb), .35) 0%, rgba(var(--shade-rgb), .85) 100%);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--ease);
}
.game-card:hover .game-card__overlay { opacity: 1; }
.game-card__overlay .btn { min-width: 100px; }

.game-card__body {
    padding: .65rem .8rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.game-card__name {
    font-size: .88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.game-card__provider {
    font-size: .72rem;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Star button on each card — Favorites toggle */
.fav-btn {
    position: absolute;
    top: .45rem;
    right: .45rem;
    z-index: 2;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(var(--shade-rgb), .55);
    color: var(--text-dim);
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: all var(--ease);
}
.fav-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: all var(--ease); }
.fav-btn:hover { background: rgba(var(--shade-rgb), .85); color: var(--gold); }
.fav-btn.is-on {
    color: var(--gold);
    background: var(--gold-dim);
}
.fav-btn.is-on svg { fill: var(--gold); stroke: var(--gold); }

/* ── Pagination ──────────────────────────────────────────────────────── */

.pagination {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .85rem;
    flex-wrap: wrap;
}
.pagination__btn {
    padding: .45rem 1rem;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    color: var(--text);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    border: 1px solid var(--border-2);
    transition: all var(--ease);
}
.pagination__btn:hover { border-color: var(--accent); color: var(--accent-2); }
.pagination__btn.is-disabled { opacity: .35; pointer-events: none; }
.pagination__status { font-size: .82rem; color: var(--text-dim); }
.pagination__status strong { color: var(--text); font-weight: 700; }

/* ── Banners + empty state ───────────────────────────────────────────── */

.error-banner {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    background: rgba(255,92,92,.08);
    border: 1px solid rgba(255,92,92,.3);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.error-banner__icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--bad);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    flex-shrink: 0;
}
.error-banner strong { color: #ffb3b3; display: block; font-size: .9rem; margin-bottom: .15rem; }
.error-banner p      { color: var(--text-2); font-size: .85rem; }

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.empty-state h3 { color: var(--text); font-weight: 700; font-size: 1rem; }
.empty-state p  { font-size: .88rem; }
.empty-state .btn { margin-top: .85rem; }

/* ── Header pickers (currency / language / user-menu dropdowns) ──────── */

.picker { position: relative; }

.picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: 999px;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.picker__trigger:hover { border-color: var(--accent-2); background: rgba(var(--accent-rgb), .08); }
.picker.is-open .picker__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.picker__flag { font-size: .95rem; line-height: 1; }
.picker__code { font-weight: 700; letter-spacing: .3px; }
.picker__chev { color: var(--text-dim); font-size: .58rem; transition: transform var(--ease); }
.picker.is-open .picker__chev { transform: rotate(180deg); color: var(--accent-2); }

.picker__menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    min-width: 200px;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-md);
    box-shadow: 0 14px 36px rgba(0,0,0,.5);
    padding: .3rem;
    list-style: none;
    margin: 0;
    z-index: 300;
}

.picker__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: var(--r-sm);
    color: var(--text-2);
    font-size: .82rem;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.picker__item:hover     { background: var(--hover-wash); color: var(--text); }
.picker__item.is-active { background: var(--accent-dim); color: var(--accent-2); font-weight: 700; }
.picker__item .picker__flag { font-size: 1.05rem; }
.picker__item .picker__name { color: var(--text-dim); font-size: .76rem; margin-left: auto; }
.picker__item.is-active .picker__name { color: var(--accent-2); }

.picker__item--header {
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    padding: .55rem .65rem;
    cursor: default;
    border-bottom: 1px solid var(--border);
    margin-bottom: .25rem;
}
.picker__item--header:hover { background: transparent; color: var(--text-2); }
.user-menu__hello { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.picker__item--header strong { color: var(--text); font-weight: 700; }

.picker__item--action { font-weight: 600; color: var(--text); }
.user-menu__link { color: inherit; text-decoration: none; display: block; width: 100%; }

/* ── User menu (logged-in trigger) ───────────────────────────────────── */

.user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem .25rem .25rem;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: 999px;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.user-menu__trigger:hover { border-color: var(--accent-2); background: rgba(var(--accent-rgb), .08); }
.user-menu .picker__chev { color: var(--text-dim); font-size: .58rem; transition: transform var(--ease); }
.user-menu.is-open .user-menu__trigger {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.user-menu.is-open .picker__chev { transform: rotate(180deg); }

.user-menu__avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: var(--mark-ink);
    font-weight: 800;
    display: grid;
    place-items: center;
    font-size: .72rem;
}
.user-menu__name { font-weight: 700; }
.user-menu__menu { min-width: 200px; }

/* ── Balance badge (header) ──────────────────────────────────────────── */

.balance-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(74,222,128,.16), rgba(74,222,128,.04));
    border: 1px solid rgba(74,222,128,.4);
    font-size: .8rem;
    font-weight: 700;
    color: var(--good);
    cursor: default;
}
.balance-badge__icon    { font-size: .78rem; }
.balance-badge__amount  {
    color: #fff;
    font-variant-numeric: tabular-nums;
    transition: color .35s var(--ease), transform .35s var(--ease);
    display: inline-block;
}
.balance-badge__amount.is-up   { color: var(--good); transform: scale(1.06); }
.balance-badge__amount.is-down { color: var(--bad);  transform: scale(0.96); }
.balance-badge__currency {
    color: var(--good);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .7px;
    opacity: .85;
}

/* ── Auth (login) page ───────────────────────────────────────────────── */

.auth-body {
    background: var(--bg-0);
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
}

.auth-wrap {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.auth-mark {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -.3px;
}

.auth-card {
    width: 100%;
    background: var(--bg-1);
    border: 1px solid var(--border-2);
    border-radius: var(--r-lg);
    padding: 2rem 1.85rem;
    box-shadow: 0 16px 48px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    gap: .9rem;
}
.auth-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -.3px;
    text-align: center;
}
.auth-card__sub {
    color: var(--text-2);
    font-size: .85rem;
    text-align: center;
    line-height: 1.55;
}
.auth-card__sub code {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: .05rem .35rem;
    font-size: .8rem;
    color: var(--gold);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.auth-card__error {
    background: rgba(255,92,92,.08);
    border: 1px solid rgba(255,92,92,.3);
    color: #ffb3b3;
    border-radius: var(--r-sm);
    padding: .55rem .8rem;
    font-size: .82rem;
    text-align: center;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.auth-field__label {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}
.auth-field input {
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: var(--r-sm);
    padding: .6rem .8rem;
    font: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.auth-field input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.auth-card__submit { width: 100%; margin-top: .35rem; }
.auth-card__hint {
    color: var(--text-dim);
    font-size: .76rem;
    text-align: center;
    line-height: 1.5;
}
.auth-card__hint em { color: var(--accent-2); font-style: normal; font-weight: 600; }

/* ── Play stage (iframe + slim in-game bar) ──────────────────────────── */

.play-stage {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-h));
    background: #000;
    overflow: hidden;
    width: 100%;
}

.play-bar {
    flex-shrink: 0;
    height: 40px;
    background: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 .85rem;
    gap: .75rem;
}
.play-bar__exit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--text-2);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    padding: .3rem .6rem;
    border-radius: var(--r-sm);
    transition: all var(--ease);
}
.play-bar__exit:hover { color: var(--accent-2); background: rgba(var(--accent-rgb), .08); }
.play-bar__title {
    flex: 1;
    overflow: hidden;
}
.play-bar__game {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.play-bar__action {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid var(--border-2);
    color: var(--text-2);
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--ease);
    display: grid;
    place-items: center;
}
.play-bar__action:hover {
    color: var(--text);
    background: var(--hover-wash);
    border-color: var(--accent-2);
}
.play-stage__frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: #000;
    display: block;
}
.play-stage__error {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: var(--bg-1);
}

/* The .main wrapper drops its padding when it's hosting a play-stage so the
   iframe reaches the viewport edges. */
.main:has(> .play-stage) { padding: 0 !important; max-width: none; }

/* ── Error card (shared by Play / Error pages) ───────────────────────── */

.error-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2.25rem 2rem;
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.error-card .icon {
    font-size: 1.85rem;
    margin: 0 auto .85rem;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(255,92,92,.12);
    color: var(--bad);
    display: grid;
    place-items: center;
}
.error-card h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.error-card p  { color: var(--text-2); font-size: .88rem; line-height: 1.6; }
.error-card .btn { margin-top: 1.25rem; }

/* Demo badge — kept for the play-bar (referenced from Play.cshtml). */
.demo-badge {
    flex-shrink: 0;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1px solid rgba(var(--gold-rgb), .4);
    border-radius: 999px;
    padding: .15rem .5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    :root        { --header-h: 52px; }
    .site-header { padding-inline: .85rem; }
    .header-tools .picker__code,
    .header-tools .user-menu__name,
    .header-tools .picker__chev,
    .header-tools .balance-badge__currency { display: none; }
    .picker__menu { right: -.5rem; min-width: 180px; }

    .hero          { min-height: 160px; }
    .hero__title   { font-size: 1.3rem; }

    .promo-grid    { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .promo-card    { padding: .55rem .75rem; font-size: .8rem; }

    .game-grid     { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .65rem; }
    .game-card__name { font-size: .82rem; }
}

/* Reduced motion respects user pref. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   Featured-studio rail (e.g. Big Wave Gaming)
   Sits between hero and the category-chip strip on the Index page.
   Wrapped in its own container so the surrounding outline doesn't bleed
   into the rest of the lobby layout — only the featured rail gets the
   accent border + label chip.
   ────────────────────────────────────────────────────────────────────── */
.featured-studio {
    margin: 1.5rem 0 1.75rem;
    padding: 1rem 1.1rem 1.2rem;
    border: 1px solid rgba(var(--accent-2-rgb), .4);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(var(--accent-2-rgb), .08) 0%, rgba(var(--accent-2-rgb), .02) 100%);
}
.featured-studio__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}
.featured-studio__title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -.01em;
}
.featured-studio__tagline {
    margin: .2rem 0 0;
    color: var(--text-dim);
    font-size: .85rem;
}
.featured-studio__badge {
    align-self: flex-start;
    padding: .25rem .55rem;
    border: 1px solid rgba(var(--accent-2-rgb), .4);
    border-radius: 999px;
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--accent);
    background: rgba(var(--accent-2-rgb), .1);
    white-space: nowrap;
}
.game-grid--featured {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* ──────────────────────────────────────────────────────────────────────
   Demo button — visual variant of .btn used alongside .btn-play on cards
   that advertise HasDemoMode. Outline-style (less prominent than the
   primary Play CTA) so the player's eye lands on real-money first while
   demo stays one click away.
   ────────────────────────────────────────────────────────────────────── */
.btn-demo {
    background: transparent;
    border: 1px solid currentColor;
    color: var(--accent);
}
.btn-demo:hover { background: rgba(var(--accent-2-rgb), .14); filter: none; }

/* Stacked overlay — two CTAs (Play + Demo) instead of one centered button.
   Switches the default place-items:center grid layout to a flex column so the
   buttons stack vertically. Padding gives the buttons breathing room against
   the thumb edges; the tighter .btn padding override stops the 16:10 thumb
   (≈112px tall at the default 180px column) from squeezing the two stacked
   buttons into each other — previously the base .btn (.5rem 1rem) + the gap
   exceeded the available height by a few pixels and the CTAs visually merged. */
.game-card__overlay--stacked {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    align-items: center;
    justify-content: center;
    padding: .65rem .8rem;
}
.game-card__overlay--stacked .btn {
    width: 100%;
    max-width: 140px;
    min-width: 0;             /* clear base .game-card__overlay .btn { min-width: 100px } */
    padding: .38rem .8rem;    /* tighter than base .btn .5rem 1rem — fits two-up cleanly */
    font-size: .8rem;
    line-height: 1.25;
}

/* ──────────────────────────────────────────────────────────────────────
   DEMO badge — sits on the card thumbnail (when game.HasDemoMode) and in
   the Play page's title bar (when launched in demo mode). Same visual
   token in both places so players recognise the marker across the lobby
   → play transition.
   ────────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .45rem;
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .1em;
    line-height: 1.4;
}
.badge--demo {
    /* Position on the card thumb's top-left; the favorites star is top-right. */
    position: absolute;
    top: .55rem;
    left: .55rem;
    background: rgba(34, 197, 94, 0.85);  /* emerald — distinct from any accent */
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    pointer-events: none;
}
/* When the badge appears inside the play-bar title group, drop the absolute
   positioning — the title's flex layout owns placement. */
.play-bar__title .badge--demo {
    position: static;
    margin-left: .55rem;
}

/* Hero CTA wrapper — used on the standalone /BigWaveGaming lobby where the hero shows
   two buttons (Play + Try Demo) side-by-side. The base .hero only ever rendered one
   button (.hero .btn-play { align-self: flex-start; }), so a flex row wrapper is
   the simplest way to keep both buttons left-aligned without disturbing that
   single-CTA case elsewhere. */
.hero__ctas {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-self: flex-start;
}