/* ==========================================================================
   Public site styles. Self-hosted on purpose: no CDN, no build step.
   The palette below mirrors the design prototype.
   ========================================================================== */

:root {
    --bg-page: #080312;
    --bg-shell: #0c0418;
    --bg-appbar: #1b1928;
    --bg-masthead: #150729;
    --bg-panel: #170a2b;
    --bg-card: #1a0f2e;
    --bg-card-foot: #130822;
    --bg-input: #11091f;
    --bg-nav: #130623;

    --line: #2a1347;
    --line-strong: #3b1763;
    --line-panel: #2b134d;
    --line-input: #2d1e40;

    --gold: #facc15;
    --gold-strong: #ffcc00;
    --pink: #ec4899;
    --violet: #a855f7;
    --green: #4ade80;
    --red: #f87171;

    --text: #ffffff;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;

    --shell-width: 440px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    color-scheme: dark;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    /* Belongs here, not on .app-shell below -- an overflow value on any axis
       turns an element into a scroll container, and a sticky descendant
       sticks to its nearest scroll container. Set on .app-shell, it silently
       stopped the appbar and masthead from sticking to the real viewport;
       the page still visibly scrolled correctly, so nothing looked broken
       until you watched the header scroll away with everything else. */
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
        'Noto Sans Bengali', 'Noto Sans Devanagari', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg-page);
    /* Starfield over a darkened banner, as in the prototype. */
    background-image:
        radial-gradient(#fff, rgba(255, 255, 255, .2) 2px, transparent 4px),
        radial-gradient(#fff, rgba(255, 255, 255, .15) 1px, transparent 2px),
        radial-gradient(#fff, rgba(255, 255, 255, .1) 2px, transparent 3px),
        linear-gradient(rgba(8, 3, 18, .93), rgba(8, 3, 18, .93));
    background-size: 550px 550px, 350px 350px, 250px 250px, cover;
    background-position: 0 0, 40px 60px, 130px 270px, center;
    background-attachment: scroll, scroll, scroll, fixed;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
    cursor: pointer;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
}

svg {
    display: block;
    flex: none;
}

.is-hidden,
[hidden] {
    display: none !important;
}

/* --- Floating support buttons (desktop only) ----------------------------- */

.side-actions {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 60;
}

.side-actions__btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    transition: transform .18s ease;
}

.side-actions__btn:hover {
    transform: scale(1.08);
}

.side-actions__btn--light {
    background: #fff;
    color: #3b82f6;
    border: 1px solid #60a5fa;
}

.side-actions__btn--telegram {
    background: #0088cc;
    color: #fff;
}

@media (min-width: 900px) {
    .side-actions {
        display: flex;
    }
}

/* --- App shell ----------------------------------------------------------- */

.app-shell {
    position: relative;
    width: 100%;
    max-width: var(--shell-width);
    min-height: 100vh;
    padding-bottom: 112px;
    background: var(--bg-shell);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    box-shadow: 0 0 60px rgba(0, 0, 0, .6);
}

/* --- Header (appbar + masthead) ------------------------------------------ */

/*
 * The one sticky element. appbar and masthead below stack inside it in plain
 * document flow -- see the comment in home.php for why this replaced two
 * independently-sticky bars with a hardcoded offset between them.
 */
.header-sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

.appbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-appbar);
    font-size: 11px;
}

.appbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.appbar__logo {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #a855f7, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

.appbar__logo--image {
    background: none;
    object-fit: contain;
}

/* --- Brand lockup -------------------------------------------------------- */

/*
 * Rendered by partials/brand-mark.php. An uploaded logo replaces the wordmark
 * and tagline; height is capped so any source image slots in cleanly.
 *
 * The cap is generous because the shape of an uploaded logo is not knowable.
 * A wide wordmark is limited by max-width and never reaches the height cap; a
 * square or circular badge is limited by the height instead, and a tight cap
 * leaves one of those looking marooned in a slot sized for the other.
 */
.brand-mark {
    width: auto;
    object-fit: contain;
}

/* Lower than it was: the masthead is a single row now, and a 52px logo next
   to 34px controls made the bar taller than everything it contained. It gets
   the width the hamburger used to occupy instead. */
.brand-mark--masthead { max-height: 42px; max-width: 100%; }
.brand-mark--auth { max-height: 72px; max-width: 80%; }

.appbar__name {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar__stars {
    display: flex;
    gap: 1px;
    color: var(--gold);
}

.appbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.appbar__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .06);
}

.appbar__close:hover { color: #fff; }

.appbar__download {
    flex: none;
    background: var(--gold);
    color: #000;
    font-weight: 700;
    font-size: 10px;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    transition: background .18s ease;
}

.appbar__download:hover {
    background: #eab308;
}

/* --- Masthead ------------------------------------------------------------ */

/*
 * Everything on one row, brand hard left. Centring the brand only reads as
 * centred when both sides weigh the same, and nothing balances an account
 * chip, a sign-out button and a language picker -- trying to hold the centre
 * is what pushed those controls into two ragged stacked rows.
 *
 * The left slot used to hold a hamburger opening a drawer whose every entry
 * was already in the bottom nav, which is fixed and always on screen. The
 * logo has the space now.
 */
.masthead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--bg-masthead);
    border-bottom: 1px solid var(--line-strong);
}

.masthead__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Shrinks before the account chip does: a squeezed logo is still a logo,
       a truncated balance is a wrong number. */
    min-width: 0;
    flex: 0 1 auto;
    margin-right: auto;
}

.masthead__wordmark {
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .05em;
    background: linear-gradient(90deg, #ec4899, #c084fc, #facc15);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.masthead__tagline {
    margin-top: -2px;
    font-size: 8px;
    letter-spacing: .18em;
    color: var(--gold);
}

.masthead__right {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.masthead__auth {
    display: flex;
}

.masthead__auth .pill:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.masthead__auth .pill:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Name over balance, behind one tap to the profile tab. */
.account {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 9px 4px 4px;
    max-width: 148px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    transition: border-color .18s ease, background .18s ease;
}

.account:hover {
    background: rgba(255, 255, 255, .1);
    border-color: var(--violet);
}

.account__avatar {
    width: 26px;
    height: 26px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    font-size: 12px;
    font-weight: 800;
    color: #fff;
}

.account__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

.account__name {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account__balance {
    font-size: 12px;
    font-weight: 800;
    color: var(--gold);
    white-space: nowrap;
}

/* Square icon-only button, sized to stay a comfortable tap target. */
.iconbtn {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .08);
    color: var(--text-muted);
    transition: background .18s ease, color .18s ease;
}

.iconbtn:hover {
    background: rgba(248, 113, 113, .18);
    color: var(--red);
}

/* --- Pills & buttons ----------------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transition: filter .18s ease, background .18s ease;
    white-space: nowrap;
}

.pill:hover { filter: brightness(1.1); }
.pill--gold { background: linear-gradient(180deg, #fde047, #ca8a04); color: #000; }
.pill--violet { background: linear-gradient(180deg, #a855f7, #db2777); color: #fff; }
.pill--ghost { background: rgba(255, 255, 255, .1); color: #fff; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    transition: filter .18s ease, background .18s ease;
}

.btn--block { width: 100%; }
.btn:hover { filter: brightness(1.08); }

.btn--gold {
    background: var(--gold-strong);
    color: #000;
    box-shadow: 0 0 18px rgba(250, 204, 21, .25);
}

.btn--violet {
    background: linear-gradient(90deg, #a855f7, #db2777);
    color: #fff;
}

.btn--outline {
    border: 1px solid #4b5563;
    color: #d1d5db;
    background: transparent;
}

.btn--outline:hover {
    background: rgba(255, 255, 255, .05);
}

/* --- Language picker ----------------------------------------------------- */

.langpicker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.langpicker select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    height: 32px;
    padding: 0 18px 0 7px;
    cursor: pointer;
}

.langpicker__caret {
    position: absolute;
    right: 4px;
    pointer-events: none;
    color: var(--text-dim);
}

/* --- Catalogue search ---------------------------------------------------- */

/*
 * Sits under the masthead inside the same sticky wrapper, so it follows the
 * player between tabs. Distinct from .searchbox further down, which is the
 * small per-section filter an admin can switch on for one grid.
 */
.gamesearch {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-masthead);
    border-bottom: 1px solid var(--line-strong);
}

.gamesearch__input {
    width: 100%;
    height: 36px;
    background: var(--bg-input);
    border: 1px solid var(--line-input);
    border-radius: 999px;
    padding: 0 36px;
    font-size: 12px;
    color: var(--text);
    outline: none;
    transition: border-color .18s ease;
}

.gamesearch__input::placeholder { color: var(--text-dim); }
.gamesearch__input:focus { border-color: var(--violet); }

/* The browser's own control duplicates ours and cannot be styled to match. */
.gamesearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.gamesearch__icon {
    position: absolute;
    left: 22px;
    display: flex;
    color: var(--text-dim);
    pointer-events: none;
}

.gamesearch__clear {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: var(--text-muted);
}

.gamesearch__clear:hover { background: rgba(255, 255, 255, .2); }
.gamesearch__clear[hidden] { display: none; }

/* Results replace the browsing view, so they open at the very top with no
   banner above them to scroll past. */
.panel--results { margin-top: 12px; }

/* --- Flash messages ------------------------------------------------------ */

.flash-stack {
    padding: 10px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 11px;
    line-height: 1.4;
    border: 1px solid;
}

.flash--success {
    background: rgba(16, 185, 129, .16);
    border-color: rgba(16, 185, 129, .4);
    color: #a7f3d0;
}

.flash--error {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .4);
    color: #fecaca;
}

.flash__icon { flex: none; }

.flash__close {
    margin-left: auto;
    display: flex;
    opacity: .7;
}

.flash__close:hover { opacity: 1; }

/* --- Hero slider --------------------------------------------------------- */

.hero-wrap {
    position: relative;
    margin: 12px;
}

.hero {
    position: relative;
    height: 176px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    background: #150729;
}

.hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease-in-out;
    pointer-events: none;
}

.hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 2;
}

.hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .4);
    transition: background .2s ease, width .2s ease;
}

.hero__dot.is-active {
    background: #fff;
    width: 18px;
}

/* --- Marquee notice ------------------------------------------------------ */

.notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px;
    padding: 7px 10px;
    background: #1e0e3b;
    border: 1px solid #371b68;
    border-radius: var(--radius-sm);
}

.notice__icon {
    color: #eab308;
    display: flex;
    flex: none;
}

.notice__viewport {
    flex: 1;
    overflow: hidden;
}

.notice__text {
    display: inline-block;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
    color: #d1d5db;
    padding-left: 100%;
    animation: notice-scroll 22s linear infinite;
}

.notice:hover .notice__text {
    animation-play-state: paused;
}

@keyframes notice-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
    .notice__text {
        animation: none;
        padding-left: 0;
        white-space: normal;
    }
}

/* --- Category chips ------------------------------------------------------ */

.chips-wrap {
    padding: 16px 12px 0;
}

.chips {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.chips::-webkit-scrollbar { display: none; }

.chip {
    flex: none;
    min-width: 85px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 9px 6px;
    background: #180a2b;
    border: 1px solid rgba(168, 85, 247, .3);
    border-radius: var(--radius);
    transition: border-color .18s ease, background .18s ease;
}

.chip:hover { border-color: var(--gold); }

.chip.is-active {
    border-color: var(--gold);
    background: #21103a;
}

.chip__icon { display: flex; }

.chip__label {
    font-size: 9px;
    font-weight: 700;
    color: #e5e7eb;
    text-transform: uppercase;
}

/* --- Panels -------------------------------------------------------------- */

.panel {
    margin: 16px 8px;
    padding: 12px;
    background: var(--bg-panel);
    border: 1px solid var(--line-panel);
    border-radius: var(--radius-lg);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.panel__title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.panel__title-icon { display: flex; }

.panel__action {
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
}

.panel__empty {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    padding: 14px 0;
}

/* --- Search box ---------------------------------------------------------- */

.searchbox {
    position: relative;
    width: 128px;
    flex: none;
}

.searchbox input {
    width: 100%;
    background: #0d0516;
    border: 1px solid #3c1d68;
    border-radius: 999px;
    padding: 5px 26px 5px 12px;
    font-size: 10px;
    color: #fff;
    outline: none;
}

.searchbox input::placeholder { color: var(--text-dim); }
.searchbox input:focus { border-color: var(--violet); }

.searchbox__icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    display: flex;
    pointer-events: none;
}

/* --- Game cards ---------------------------------------------------------- */

.game-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.game-card {
    background: var(--bg-card);
    border: 1px solid #2c184c;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, border-color .18s ease;
}

.game-card:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, .6);
}

.game-card__art {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

.game-card__art--image {
    background-size: cover;
    background-position: center;
}

.game-card__label {
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.15;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}

.game-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-card-foot);
}

.game-card__provider {
    margin: 0;
    font-size: 8px;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-card__play {
    flex: none;
    font-size: 9px;
    font-weight: 700;
    color: var(--gold);
}

.game-card__play:hover { text-decoration: underline; }

.game-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.game-card__art { position: relative; }

.game-card.is-locked { opacity: .82; }

.game-card__soon {
    flex: none;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 2px 7px;
}

/* ==========================================================================
   Full-screen game view
   ========================================================================== */

.game-body {
    display: block;
    background-attachment: scroll;
}

.game-shell {
    width: 100%;
    max-width: var(--shell-width);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--bg-shell);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.game-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-masthead);
    border-bottom: 1px solid var(--line-strong);
}

.game-bar__back {
    display: flex;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
}

.game-bar__back:hover { background: rgba(255, 255, 255, .12); }

.game-bar__title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.game-bar__name {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-bar__provider {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-dim);
}

.game-bar__wallet { text-align: right; flex: none; }

.game-bar__label {
    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.game-bar__balance {
    font-size: 14px;
    font-weight: 800;
    color: var(--gold);
}

.game-frame {
    flex: 1;
    display: flex;
}

.game-frame iframe {
    flex: 1;
    width: 100%;
    border: 0;
    min-height: calc(100vh - 56px);
}

.game-main { padding: 14px 12px 32px; }

.game-alert {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, .05);
    color: #e5e7eb;
}

.game-alert--error { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .4); color: #fecaca; }
.game-alert--win   { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .4); color: #bbf7d0; }
.game-alert--info  { background: rgba(168, 85, 247, .16); border-color: rgba(168, 85, 247, .35); color: #e9d5ff; }

.game-controls { margin-top: 18px; }

/* One row, not two: six presets stacked into two rows cost a whole row of
   vertical space on a screen that is already tight. */
.bet-presets {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    margin-top: 8px;
}

.bet-presets__item {
    padding: 7px 2px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e5e7eb;
    transition: background .15s ease, border-color .15s ease;
}

.bet-presets__item:hover { background: rgba(255, 255, 255, .12); }

.bet-presets__item.is-active {
    background: rgba(250, 204, 21, .18);
    border-color: var(--gold);
    color: var(--gold);
}

.field__chip {
    flex: none;
    margin-left: 6px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .07);
    font-size: 11px;
    font-weight: 700;
    color: #e5e7eb;
}

.field__chip:hover { background: rgba(255, 255, 255, .14); }

.btn.is-busy { opacity: .6; pointer-events: none; }

/*
 * A disabled control has to look disabled. Crash spends most of its cycle with
 * betting closed, and a full-brightness button that silently ignores clicks is
 * indistinguishable from a broken one.
 */
.btn:disabled { opacity: .42; cursor: not-allowed; filter: none; }
.btn:disabled:hover { filter: none; }

.field__chip:disabled { opacity: .35; pointer-events: none; }

.field__control input:disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* --- Dice ---------------------------------------------------------------- */

.dice__readout {
    text-align: center;
    padding: 18px 0 14px;
}

.dice__roll {
    display: block;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.dice__roll.is-win  { color: var(--green); }
.dice__roll.is-loss { color: var(--red); }

.dice__caption {
    font-size: 11px;
    color: var(--text-muted);
}

.dice__track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    margin-bottom: 6px;
}

.dice__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #a855f7, #facc15);
    transition: left .15s ease, width .15s ease;
}

.dice__marker {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 16px;
    background: #fff;
    transform: translateX(-1px);
}

.dice__scale {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 12px;
}

.seg__item {
    padding: 10px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 700;
}

.seg__item.is-active {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--gold);
}

.seg--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg--four  { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wallet-toggle { margin: 0 0 16px; }
.wallet-panel .section-label { margin-top: 0; }

/* --- Payout strips (Wheel, Plinko) --------------------------------------- */

.payout-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin: 12px 0 16px;
}

.payout-strip--buckets {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.payout-strip--buckets::-webkit-scrollbar { display: none; }

.payout-chip {
    flex: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #e5e7eb;
    transition: background .18s ease, color .18s ease;
}

.payout-chip.is-zero { color: var(--text-dim); }

.payout-chip.is-hit {
    background: var(--gold);
    color: #000;
}

/* --- Wheel --------------------------------------------------------------- */

.wheel__stage {
    position: relative;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    margin: 8px auto 16px;
}

.wheel__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #2a1347;
    /* Long, eased spin so the landing segment reads as a result, not a jump. */
    transition: transform 3.2s cubic-bezier(.16, .84, .3, 1);
}

/* Multiplier labels, painted over the gradient and spinning with the disc. */
.wheel__marks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wheel__marks text {
    fill: #f8fafc;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-anchor: middle;
    dominant-baseline: middle;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .55);
    stroke-width: .7;
}

.wheel__marks text.is-zero { fill: rgba(248, 250, 252, .38); }

.wheel__hub {
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: var(--bg-shell);
    border: 2px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.wheel__hub .is-win  { color: var(--green); }
.wheel__hub .is-loss { color: var(--red); }

.wheel__pointer {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 16px solid var(--gold);
    z-index: 2;
}

/* --- Playing cards (shared by Hi-Lo and Poker) --------------------------- */

.card--face {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    aspect-ratio: 5 / 7;
    padding: 0;
    border-radius: var(--radius-sm);
    background: #f8fafc;
    color: #0f172a;
    font-size: 19px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
    transition: transform .18s ease, box-shadow .18s ease;
}

.card--face.is-red { color: #dc2626; }
.card--face.is-win { box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0, 0, 0, .4); }
.card--face.is-dealing { animation: card-deal .4s ease-out infinite alternate; }

@keyframes card-deal {
    from { transform: translateY(0) rotate(0); }
    to   { transform: translateY(-6px) rotate(-2deg); }
}

/* --- Rocket Dice --------------------------------------------------------- */

.rdice__felt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 128px;
    margin-bottom: 10px;
    padding: 14px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% 20%, #1c6b45 0%, #0f4a30 55%, #08301f 100%);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, .55);
}

.rdice__dice { display: flex; gap: 14px; }

.die {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(150deg, #fff, #dbe1e8);
    box-shadow: 0 5px 12px rgba(0, 0, 0, .45), inset 0 -3px 6px rgba(0, 0, 0, .12);
}

/* Pips are positioned per face by the client, so a die is a real face rather
   than a picture of one. */
.die i {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: #16202e;
}

.die.is-rolling { animation: die-roll .42s cubic-bezier(.4, 0, .6, 1) infinite; }

@keyframes die-roll {
    0%   { transform: translateY(0) rotate(0); }
    35%  { transform: translateY(-13px) rotate(105deg); }
    70%  { transform: translateY(0) rotate(200deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

.rdice__total {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #d1fae5;
    text-transform: capitalize;
}

.rdice__controls {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.rdice__dir { display: flex; flex-direction: column; gap: 6px; }

.rdice__dirbtn {
    padding: 9px 6px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 700;
    color: #e5e7eb;
}

.rdice__dirbtn.is-active {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
}

.rdice__target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.rdice__step {
    width: 34px;
    height: 22px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .08);
    color: #e5e7eb;
    font-size: 10px;
    line-height: 1;
}

.rdice__step:hover { background: rgba(255, 255, 255, .16); }

.rdice__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 26px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, .18);
}

.rdice__odds { text-align: right; }

.rdice__odds-label {
    display: block;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.rdice__odds-value {
    margin: 1px 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.rdice__odds-chance {
    margin: 1px 0 0;
    font-size: 13px;
    font-weight: 700;
    color: #86efac;
    font-variant-numeric: tabular-nums;
}

/* An unwinnable call disables the button rather than letting a player stake
   on something that cannot pay. */
.btn.is-impossible { opacity: .4; }

.rdice__log {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.rdice__log-head,
.rdice__log-row {
    display: grid;
    grid-template-columns: 1fr .8fr .6fr 1fr;
    gap: 6px;
    padding: 6px 9px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.rdice__log-head {
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
}

.rdice__log-head span:not(:first-child),
.rdice__log-row span:not(:first-child) { text-align: right; }

.rdice__log-body { max-height: 132px; overflow-y: auto; }
.rdice__log-row { border-bottom: 1px solid rgba(255, 255, 255, .04); }
.rdice__log-row .is-win  { color: #4ade80; font-weight: 700; }
.rdice__log-row .is-loss { color: #f87171; }

/* --- Keno ---------------------------------------------------------------- */

.keno__board {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
    margin: 8px 0 12px;
}

.keno__cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    color: #e5e7eb;
    transition: background .15s ease, border-color .15s ease;
}

.keno__cell.is-picked { background: rgba(168, 85, 247, .45); border-color: #a855f7; }
/* Drawn but not picked: shown so the player can see the whole draw. */
.keno__cell.is-drawn  { border-color: rgba(255, 255, 255, .5); }
.keno__cell.is-hit    { background: var(--gold); color: #1a1025; border-color: var(--gold); }

.keno__bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

.keno__bar .field__chip { margin-left: 0; }
.keno__bar span { margin-right: auto; }

/* --- Hi-Lo --------------------------------------------------------------- */

.hilo__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 10px 0 16px;
}

.hilo__stage .card--face { min-width: 82px; font-size: 28px; }

.hilo__caption {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

/* Secondary line inside a segmented button: the price of a Hi-Lo call, the
   empty-net odds on a Fishing depth. */
#hilo-calls .seg__item small,
.fishing .seg__item small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    font-weight: 600;
    opacity: .75;
}

/* --- Chicken Road -------------------------------------------------------- */

.croad { position: relative; }

/*
 * Horizontal and scrollable rather than fitted. Easy is twenty lanes, and
 * squeezing those into a phone's width leaves each one a few pixels across
 * with its multiplier illegible -- which is the single number the decision to
 * step again rests on. Scrolling keeps every lane readable, and the script
 * keeps the chicken in view as it advances.
 */
.croad__track {
    margin: 8px 0 14px;
    padding: 12px 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line-panel);
    background:
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(255, 255, 255, .05) 26px 28px),
        linear-gradient(180deg, #1a1622, #0f0d16);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.croad__track::-webkit-scrollbar { display: none; }

.croad__lanes {
    display: flex;
    gap: 4px;
    padding: 0 12px;
    width: max-content;
}

.croad__lane {
    flex: none;
    width: 62px;
    height: 96px;
    border-radius: var(--radius);
    background: #262c3a;
    border: 1px solid rgba(255, 255, 255, .05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-bottom: 8px;
    position: relative;
    transition: background .18s ease, transform .18s ease;
}

/* The lane the chicken is standing in front of — the one a step commits to. */
.croad__lane.is-next {
    background: #303849;
    border-color: rgba(74, 222, 128, .5);
    transform: translateY(-3px);
}

.croad__lane.is-crossed {
    background: rgba(34, 197, 94, .14);
    border-color: rgba(74, 222, 128, .35);
}

.croad__lane.is-hit {
    background: rgba(239, 68, 68, .2);
    border-color: rgba(248, 113, 113, .6);
}

/* Revealed at settlement: where the traffic actually was. Dimmed, because the
   player never had to walk into these — only the one that stopped them. */
.croad__lane.is-danger::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: repeating-linear-gradient(45deg,
        rgba(248, 113, 113, .18) 0 6px, transparent 6px 12px);
}

.croad__step {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.croad__rung {
    font-size: 11px;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.croad__lane.is-crossed .croad__rung { color: #4ade80; }

.croad__bird {
    position: absolute;
    top: 8px;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    transition: transform .22s ease;
}

.croad__bird.is-hopping { animation: croad-hop .22s ease; }

@keyframes croad-hop {
    0%   { transform: translateY(0) scale(1); }
    45%  { transform: translateY(-12px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
}

.croad__bird.is-dead {
    filter: grayscale(1) brightness(.7);
    transform: rotate(90deg);
}

.croad__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* --- Tower --------------------------------------------------------------- */

.tower {
    position: relative;
}

.tower__grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 14px;
}

.tower__row {
    position: relative;
    display: grid;
    grid-template-columns: 46px repeat(var(--tower-width, 3), minmax(0, 1fr));
    gap: 6px;
    align-items: center;
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    opacity: .5;
    transition: opacity .18s ease, border-color .18s ease;
}

/*
 * Only the row being climbed is live. The ring is the single strongest signal
 * on the board -- without it a player has to work out which row is theirs from
 * which tiles happen to be blank.
 */
.tower__row.is-current {
    opacity: 1;
    border-color: rgba(74, 222, 128, .85);
}

/* A row already climbed stays readable, just quieter than the live one. */
.tower__row.is-done { opacity: .85; }

.tower__rung {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: right;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

.tower__row.is-current .tower__rung { color: #4ade80; }

.tower__tile {
    position: relative;
    height: 34px;
    border-radius: var(--radius-sm);
    background: #1f2430;
    border: 1px solid rgba(255, 255, 255, .05);
    font-size: 16px;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.tower__row.is-current .tower__tile { background: #262c3a; cursor: pointer; }
.tower__row.is-current .tower__tile:hover { background: #303849; transform: translateY(-1px); }

/*
 * Marks are drawn from state rather than written into the DOM, so the same
 * classes describe a tile whether it was revealed by a pick or by the
 * end-of-round reveal.
 */
.tower__tile.is-safe::after { content: '✔'; color: #4ade80; }
.tower__tile.is-trap::after { content: '✘'; color: #f87171; }

.tower__tile.is-safe::after,
.tower__tile.is-trap::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* The tile the player actually chose, as opposed to one merely revealed. */
.tower__tile.is-picked {
    background: #05070b;
    border-color: rgba(74, 222, 128, .8);
    box-shadow: 0 0 12px rgba(74, 222, 128, .35);
}

.tower__tile.is-picked.is-trap {
    border-color: rgba(248, 113, 113, .85);
    box-shadow: 0 0 12px rgba(248, 113, 113, .4);
}

.tower__tile.is-picked::after { font-size: 19px; }

/* Tiles revealed only because the round ended are dimmed, so the player's own
   path still reads as the story of the round. */
.tower__tile.is-revealed::after { opacity: .38; }

/*
 * The path connector: an L drawn between one pick and the next, positioned by
 * JS because only it knows which columns were chosen.
 */
.tower__link {
    position: absolute;
    left: var(--link-left, 0);
    width: var(--link-width, 0);
    bottom: -6px;
    height: 2px;
    background: #4ade80;
    pointer-events: none;
}

.tower__link::before,
.tower__link::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 6px;
    background: #4ade80;
}

.tower__link::before { left: 0; bottom: 0; }
.tower__link::after { right: 0; top: 0; }

.is-disabled { opacity: .5; pointer-events: none; }

/* --- Win overlay (Tower) -------------------------------------------------- */

.win-pop {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    min-width: 190px;
    border-radius: var(--radius);
    overflow: hidden;
    background: #16281c;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    animation: win-pop-in .22s ease-out;
}

.win-pop__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #22c55e;
    color: #052e12;
    font-size: 15px;
    font-weight: 800;
}

.win-pop__body { padding: 14px 16px 16px; text-align: center; }

.win-pop__amount {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 900;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
}

.win-pop__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    color: var(--text-muted);
}

.win-pop__row b { color: #fff; font-variant-numeric: tabular-nums; }

@keyframes win-pop-in {
    from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.94); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* --- Roulette ------------------------------------------------------------ */

.roulette__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 6px 0 10px;
}

/*
 * The wheel: a conic-gradient rim carrying the real pocket order, an SVG
 * number overlay that turns with it, and a ball on its own counter-rotating
 * track. All CSS transforms -- no sprite sheet, no canvas.
 */
.wheel-rig {
    position: relative;
    width: 100%;
    /* Sized against the viewport, not a fixed pixel width, so the wheel and
       the betting controls can share one screen on a phone instead of the
       wheel pushing everything below the fold. */
    max-width: min(200px, 42vh);
    aspect-ratio: 1;
    margin: 0 auto;
}

.wheel-rig__pointer {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid var(--gold);
    z-index: 4;
}

.wheel-rig__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #3f2a12;
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .75), 0 8px 26px rgba(0, 0, 0, .5);
    /* Long ease-out so it reads as losing momentum, not stopping dead. */
    transition: transform 3.1s cubic-bezier(.17, .78, .28, 1);
}

.wheel-rig__marks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.wheel-rig__marks text {
    fill: #fff;
    font-size: 4.4px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* The ball rides its own track so it can spin the opposite way. */
.wheel-rig__ballpath {
    position: absolute;
    inset: 0;
    z-index: 3;
    transition: transform 3.1s cubic-bezier(.2, .74, .3, 1);
}

.wheel-rig__ball {
    position: absolute;
    top: 7%;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, #cbd5e1 60%, #94a3b8);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .6);
}

.wheel-rig__hub {
    position: absolute;
    inset: 30%;
    z-index: 2;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #2a1a0c, #140c05);
    border: 3px solid #4a3116;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wheel-rig__result {
    font-size: 26px;
    font-weight: 900;
    color: #e5e7eb;
    font-variant-numeric: tabular-nums;
}

.wheel-rig__result.is-red   { color: #f87171; }
.wheel-rig__result.is-black { color: #e5e7eb; }
.wheel-rig__result.is-green { color: #4ade80; }

/* While spinning, the hub number is meaningless -- fade it rather than show a
   stale result from the previous round. */
.wheel-rig.is-spinning .wheel-rig__result { opacity: .25; }

.roulette__history {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 10px;
    min-height: 20px;
}

.roulette__history .crash__chip { min-width: 20px; text-align: center; }

/* --- Roulette betting table ---------------------------------------------- */

.roulette__table {
    display: flex;
    gap: 3px;
    margin-top: 8px;
}

.roulette__nums {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 3px;
    flex: 1;
}

.roulette__num {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.roulette__num.is-red   { background: #b3261e; }
.roulette__num.is-black { background: #1c1c22; }
.roulette__num.is-green { background: #15803d; }

.roulette__num--zero {
    aspect-ratio: auto;
    width: 26px;
    align-self: stretch;
}

.roulette__num.is-chosen {
    border-color: var(--gold);
    box-shadow: 0 0 8px rgba(250, 204, 21, .55);
}

/*
 * Short screens: squeeze the shared game furniture so a wheel-and-controls
 * layout fits without scrolling. Scoped to height rather than width, because
 * the problem is vertical -- a wide phone in landscape has the same shortage
 * a narrow one does.
 */
@media (max-height: 780px) {
    .game-main { padding: 10px 12px 24px; }
    .game-alert { margin-bottom: 8px; padding: 8px 10px; }
    .game-controls { margin-top: 10px; }
    .field { margin-bottom: 10px; }
    .field__label { margin-bottom: 4px; }

    .roulette__history { margin-bottom: 6px; }
    .roulette__stage { margin: 2px 0 8px; }
    .roulette__caption { font-size: 11px; }
    .roulette__bet { padding: 6px 4px; }

    .fishing__stage { min-height: 168px; }
    .slots__grid { gap: 5px; }
    .tower__tile { height: 28px; }
}

.roulette__caption {
    margin: 0;
    font-size: 12px;
    text-transform: capitalize;
    color: var(--text-muted);
}

.roulette__bets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 6px;
}

/*
 * Label and price on one line rather than stacked. Stacking read well but
 * cost ~24px per row across four rows, which was most of the reason the
 * wheel scrolled off screen.
 */
.roulette__bet {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    padding: 7px 4px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
    font-size: 11px;
    font-weight: 700;
    color: #e5e7eb;
}

.roulette__bet small {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
}

.roulette__bet.is-active {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
}

.roulette__bet.is-active small { color: rgba(255, 255, 255, .85); }
.roulette__bet--straight { grid-column: span 3; }

/* --- Poker --------------------------------------------------------------- */

.poker__hand {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px 0 12px;
}

.poker__caption {
    margin: 0 0 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
}

/* The poker table is long, so it stacks rather than scrolling sideways. */
.payout-strip--stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.payout-strip--stack .payout-chip {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* --- Slots --------------------------------------------------------------- */

.slots__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 8px 0 12px;
}

.slots__cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .05);
    border: 2px solid transparent;
    font-size: 30px;
    line-height: 1;
    transition: border-color .18s ease, background .18s ease;
}

/* A cell on a paying line. Cells can sit on two lines at once, so this is a
   single state rather than something that stacks. */
.slots__cell.is-win {
    border-color: var(--gold);
    background: rgba(250, 204, 21, .16);
}

.slots__cell.is-spinning span {
    animation: slot-spin .45s linear infinite;
    display: inline-block;
}

@keyframes slot-spin {
    0%   { transform: translateY(-40%); opacity: .25; }
    50%  { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(40%);  opacity: .25; }
}

.slots__caption {
    margin: 0 0 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Fishing ------------------------------------------------------------- */

/*
 * The scene is built from layers rather than an image: a depth gradient, a
 * shaft of surface light, drifting bubbles and a seabed silhouette. No
 * illustration to license, nothing extra to download, and it recolours with
 * the theme.
 */
.fishing__stage {
    position: relative;
    min-height: 210px;
    margin: 8px 0 16px;
    padding: 14px;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        linear-gradient(180deg, #12557f 0%, #0b2e4a 45%, #04101f 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Surface light, angled so it reads as coming from above and to one side. */
.fishing__rays {
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 90%;
    pointer-events: none;
    background:
        linear-gradient(104deg, transparent 42%, rgba(186, 230, 253, .13) 46%, transparent 50%),
        linear-gradient(96deg, transparent 60%, rgba(186, 230, 253, .09) 64%, transparent 69%),
        linear-gradient(112deg, transparent 20%, rgba(186, 230, 253, .07) 25%, transparent 29%);
}

/* Seabed silhouette: a couple of soft mounds, no image needed. */
.fishing__bed {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -28px;
    height: 76px;
    pointer-events: none;
    background:
        radial-gradient(ellipse 42% 100% at 22% 100%, #04121f 60%, transparent 62%),
        radial-gradient(ellipse 55% 100% at 68% 100%, #051726 58%, transparent 60%);
}

.fishing__water {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 30%, rgba(186, 230, 253, .16) 0 2.5px, transparent 3.5px),
        radial-gradient(circle at 72% 58%, rgba(186, 230, 253, .12) 0 2px, transparent 3px),
        radial-gradient(circle at 44% 82%, rgba(186, 230, 253, .10) 0 3px, transparent 4px),
        radial-gradient(circle at 86% 24%, rgba(186, 230, 253, .10) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 32% 62%, rgba(186, 230, 253, .08) 0 2px, transparent 3px);
    /* Bubbles always drift, not only while casting -- a still scene reads as
       a broken one. */
    animation: fishing-drift 7s linear infinite;
}

.fishing__stage.is-casting .fishing__water { animation-duration: 1.3s; }
.fishing__stage.is-casting .fishing__rays  { animation: fishing-shimmer .9s ease-in-out infinite alternate; }

@keyframes fishing-drift {
    from { transform: translateY(14px); opacity: .55; }
    50%  { opacity: 1; }
    to   { transform: translateY(-16px); opacity: .55; }
}

@keyframes fishing-shimmer {
    from { opacity: .7; transform: translateX(0); }
    to   { opacity: 1;  transform: translateX(8px); }
}

.fishing__history {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: 8px;
    min-height: 22px;
}

.fishing__round {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 9px;
    letter-spacing: .04em;
    color: rgba(186, 230, 253, .55);
    font-variant-numeric: tabular-nums;
}

.fishing__catch {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
}

.fishing__fish {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 30px;
    line-height: 1;
    animation: fishing-surface .35s ease-out;
}

.fishing__fish small {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
}

@keyframes fishing-surface {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.fishing__caption {
    position: relative;
    font-size: 12px;
    color: #bae6fd;
}

/* --- Coin flip ----------------------------------------------------------- */

.coin__stage {
    display: flex;
    justify-content: center;
    padding: 24px 0 12px;
}

.coin__disc {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fde047, #ca8a04);
    border: 4px solid #713f12;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 900;
    color: #713f12;
    box-shadow: 0 10px 30px rgba(250, 204, 21, .25);
}

.coin__disc.is-spinning { animation: coin-spin .5s linear infinite; }
.coin__disc.is-win  { border-color: var(--green); }
.coin__disc.is-loss { border-color: var(--red); }

@keyframes coin-spin {
    0%   { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

.coin__caption {
    margin: 0 0 14px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}

/* --- Plinko -------------------------------------------------------------- */

.plinko__board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 14px 0 10px;
}

.plinko__row {
    display: flex;
    gap: 9px;
}

.plinko__peg {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

/* --- Crash --------------------------------------------------------------- */

.crash__history {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.crash__history::-webkit-scrollbar { display: none; }

.crash__chip {
    flex: none;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, .16);
    color: #fca5a5;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.crash__chip.is-high {
    background: rgba(34, 197, 94, .16);
    color: #86efac;
}

/* A nothing result: distinct from a small win, which the red chip implies. */
.crash__chip.is-zero {
    background: rgba(255, 255, 255, .06);
    color: var(--text-muted);
}

.crash__stage {
    position: relative;
    height: 200px;
    margin: 10px 0 16px;
    border-radius: var(--radius-lg);
    /* The dot grid gives the climb something to be measured against — without
       it the curve reads as a static shape rather than a plane gaining height. */
    background:
        radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 36px 34px,
        linear-gradient(180deg, #12071f, #1c0f2e);
    border: 1px solid var(--line-panel);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--gold);
}

/* One colour drives the line, the fill and the plane, so the crashed state is
   a single class rather than four separate repaints. */
.crash__stage.is-crashed { color: var(--red); }

.crash__plot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.crash__area {
    fill: url(#crash-fill);
    stroke: none;
}

.crash__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px currentColor);
}

.crash__plane {
    position: absolute;
    left: 0;
    top: 0;
    /* Pulled back by half its own size so the JS transform can place the
       aircraft's centre exactly on the tip of the curve. */
    margin: -15px 0 0 -15px;
    display: flex;
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(250, 204, 21, .65));
    will-change: transform;
}

/* Waiting on the runway between rounds. */
.crash__plane.is-idle { animation: crash-hover 1.9s ease-in-out infinite; }

@keyframes crash-hover {
    0%, 100% { margin-top: -15px; }
    50%      { margin-top: -21px; }
}

.crash__boom {
    position: absolute;
    left: 0;
    top: 0;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 999px;
    opacity: 0;
    background: radial-gradient(circle, #fff 0%, #fde047 28%, #f97316 55%, rgba(239, 68, 68, 0) 72%);
    pointer-events: none;
    /* Where the plane died, written by the script. The keyframes below scale
       around it — the position has to travel in the same transform, because an
       animated transform replaces an inline one outright rather than composing
       with it, which would detonate every round at the top-left corner. */
    --boom-x: 0px;
    --boom-y: 0px;
    transform: translate(var(--boom-x), var(--boom-y)) scale(.4);
}

/* Restarted by removing and re-adding the class, so a second crash in the same
   session still plays — an animation that has already finished will not replay
   just because the element became visible again. */
.crash__boom.is-on { animation: crash-boom .72s ease-out forwards; }

@keyframes crash-boom {
    0%   { opacity: 1; transform: translate(var(--boom-x), var(--boom-y)) scale(.4); }
    45%  { opacity: 1; transform: translate(var(--boom-x), var(--boom-y)) scale(5.5); }
    100% { opacity: 0; transform: translate(var(--boom-x), var(--boom-y)) scale(8.5); }
}

.crash__multiplier {
    position: relative;
    font-size: 44px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    /* The flight path crosses the middle of the stage, so the readout needs to
       stay legible with the plane and the line passing behind it. */
    text-shadow: 0 2px 14px rgba(12, 4, 24, .95), 0 0 26px rgba(12, 4, 24, .8);
}

.crash__multiplier.is-running { color: var(--green); }
.crash__multiplier.is-loss    { color: var(--red); }

.crash__phase {
    position: relative;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
    text-shadow: 0 1px 8px rgba(12, 4, 24, .95);
}

@media (prefers-reduced-motion: reduce) {
    .crash__plane.is-idle { animation: none; }
    .crash__boom.is-on    { animation-duration: .01ms; }
}

/* --- Crash live board ---------------------------------------------------- */

.board {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.board__totals {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.board__total {
    padding: 9px 10px;
    background: rgba(168, 85, 247, .10);
    text-align: center;
}

.board__label {
    display: block;
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.board__value {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.board__head,
.crash__player {
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr 1fr;
    gap: 6px;
    align-items: center;
    padding: 7px 10px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.board__head {
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
}

.board__head span:not(:first-child),
.crash__player span:not(:first-child) { text-align: right; }

.board__empty {
    padding: 16px 10px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

.crash__players {
    display: flex;
    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
}

.crash__player {
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.crash__player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
}

.crash__player .is-win  { color: var(--green); font-weight: 700; }
.crash__player .is-loss { color: var(--red); }

/* --- Mines --------------------------------------------------------------- */

.mines__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.mines__grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.mines__tile {
    aspect-ratio: 1;
    border-radius: var(--radius);
    background: #1f1035;
    border: 1px solid rgba(168, 85, 247, .25);
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, background .12s ease;
}

.mines__tile:not(:disabled):hover {
    background: #2c184c;
    transform: translateY(-2px);
}

.mines__tile.is-safe {
    background: rgba(34, 197, 94, .18);
    border-color: rgba(34, 197, 94, .45);
    color: #86efac;
}

.mines__tile.is-mine {
    background: rgba(239, 68, 68, .16);
    border-color: rgba(239, 68, 68, .4);
    color: #fca5a5;
}

.mines__tile.is-hit {
    background: rgba(239, 68, 68, .4);
    border-color: #ef4444;
}

.is-dim { opacity: .45; pointer-events: none; }

/* --- Fairness panel ------------------------------------------------------ */

.fair {
    margin-top: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--line-panel);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.fair__summary {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold);
}

.fair__blurb {
    margin: 12px 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-muted);
}

.fair__blurb code {
    font-size: 10px;
    color: #e9d5ff;
    word-break: break-all;
}

.fair__grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: 10px;
}

.fair__grid dt { color: var(--text-dim); }

.fair__grid dd {
    margin: 0;
    font-family: ui-monospace, Consolas, monospace;
    word-break: break-all;
    color: #d1d5db;
}

/* --- Round history ------------------------------------------------------- */

.game-history { margin-top: 22px; }

.game-history__title {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.game-history__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-history__item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .04);
    font-size: 11px;
}

.game-history__item .is-win  { color: var(--green); font-weight: 700; }
.game-history__item .is-loss { color: var(--red); }

/* --- Section headings ---------------------------------------------------- */

.view-section--pad { padding: 12px; }

.section-heading {
    margin: 4px 0 12px;
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: linear-gradient(90deg, #ec4899, #facc15);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-label {
    margin: 0 0 12px 4px;
    font-size: 13px;
    font-weight: 700;
}

/* --- Promotions ---------------------------------------------------------- */

/* --- Bonus state --------------------------------------------------------- */

.bonus-card {
    margin-bottom: 14px;
    padding: 14px;
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(168, 85, 247, .16), rgba(76, 29, 149, .1));
    border: 1px solid var(--line-panel);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bonus-card--cashback {
    background: linear-gradient(180deg, rgba(37, 99, 235, .16), rgba(30, 58, 138, .1));
}

.bonus-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.bonus-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bonus-card__amount {
    font-size: 20px;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
}

.bonus-card__terms,
.bonus-card__note {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
}

.bonus-card__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.bonus-card__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #a855f7, #facc15);
    transition: width .3s ease;
}

.bonus-card__progress {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: #e9d5ff;
    font-variant-numeric: tabular-nums;
}

.bonus-card__pct {
    font-weight: 800;
    color: var(--gold);
}

.bonus-card__form { margin: 0; }

.promo {
    background: var(--bg-card);
    border: 1px solid rgba(236, 72, 153, .5);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 12px;
}

.promo__banner {
    position: relative;
    min-height: 96px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.promo__watermark {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .2;
    display: flex;
}

.promo__badge {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fde047;
}

.promo__title {
    margin: 2px 0 0;
    font-size: 16px;
    font-weight: 900;
    position: relative;
}

.promo__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card-foot);
}

.promo__desc {
    margin: 0;
    font-size: 10px;
    color: #d1d5db;
}

/* --- Invite -------------------------------------------------------------- */

.invite {
    background: linear-gradient(180deg, #2a1347, #150729);
    border: 1px solid var(--violet);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.invite__title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 900;
    color: var(--gold);
}

.invite__lead {
    margin: 0 0 16px;
    font-size: 11px;
    color: #d1d5db;
}

.invite__box {
    background: var(--bg-input);
    border: 1px solid rgba(168, 85, 247, .3);
    border-radius: var(--radius);
    padding: 12px;
    text-align: left;
    margin-bottom: 16px;
}

.invite__label {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.invite__link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1c0f2e;
    border: 1px solid #374151;
    border-radius: var(--radius-sm);
    padding: 8px;
}

.invite__url {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: #fde047;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invite__note {
    margin: -6px 0 14px;
    font-size: 10px;
    color: var(--text-dim);
}

.invite__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}

.invite__stats .stat { padding: 10px 8px; }
.invite__stats .stat__value { font-size: 13px; }

.invite__rate {
    margin: 10px 0 0;
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-muted);
}

.invite__rate strong { color: var(--gold); }

.invite__claim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    background: var(--bg-input);
    border: 1px solid rgba(168, 85, 247, .3);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 14px;
}

.invite__claim .btn { padding: 10px 16px; font-size: 12px; }
.invite__claim .btn[disabled] { opacity: .45; pointer-events: none; }

/* --- Deposit ------------------------------------------------------------- */

.methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.method input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.method__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    transition: border-color .18s ease;
}

.method input:checked + .method__body {
    border-color: var(--gold);
}

.method input:focus-visible + .method__body {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.method__icon { display: flex; align-items: center; justify-content: center; }

.method__icon--logo {
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
}

.method__icon--logo img { height: 20px; width: auto; max-width: 64px; object-fit: contain; }

.method__name { font-size: 10px; }

.card {
    background: var(--bg-card);
    border: 1px solid #2c184c;
    border-radius: var(--radius-lg);
    padding: 16px;
}

/* --- Fields -------------------------------------------------------------- */

.field {
    display: block;
    margin-bottom: 14px;
}

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.field__control {
    position: relative;
    display: flex;
    align-items: stretch;
}

.field__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    display: flex;
    pointer-events: none;
}

.field__control .field__icon ~ input {
    padding-left: 36px;
}

.field__toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    display: flex;
}

.field__toggle:hover { color: #fff; }

.field__prefix {
    display: flex;
    align-items: center;
    padding: 0 8px;
    background: var(--bg-input);
    border: 1px solid var(--line-input);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
}

.field__control--prefixed input {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- Country dial-code picker -------------------------------------------- */

.field__control--phone {
    align-items: stretch;
}

.phone-country {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: none;
    padding: 0 20px 0 8px;
    background: var(--bg-input);
    border: 1px solid var(--line-input);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.phone-country:focus-within {
    border-color: var(--violet);
}

.phone-country__flag {
    display: none;
    flex: none;
    line-height: 0;
}

.phone-country__flag.is-active {
    display: block;
}

.phone-country .flag {
    border-radius: 2px;
}

/* The real control: transparent, sized to its text, sitting over the row so
   the native dropdown and keyboard behaviour are kept intact. */
.phone-country select {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    outline: none;
}

.phone-country select option {
    background: #1a1030;
    color: #fff;
}

.phone-country__caret {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    display: flex;
    pointer-events: none;
}

.field__control--phone input[type="tel"] {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    min-width: 0;
}

/* The picker plus a 10-digit number does not fit in half a card. */
.field--full {
    grid-column: 1 / -1;
}

.field input,
.field textarea,
.field select {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--line-input);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    font-size: 13px;
    color: #fff;
    outline: none;
    transition: border-color .18s ease;
}

.field input:focus,
.field textarea:focus {
    border-color: var(--violet);
}

.field input::placeholder { color: #4b5563; }

.field__hint {
    margin: -6px 0 12px;
    font-size: 9px;
    font-style: italic;
    color: var(--text-dim);
}

/* Sits directly under its own control rather than pulling up into it. */
.field__hint--inline {
    display: block;
    margin: 6px 0 0;
    font-style: normal;
}

/*
 * Where to actually send the money. Set off from the ordinary italic hints
 * because missing it means a player has no way to complete the deposit at
 * all -- it has to read as an instruction, not a footnote.
 */
.field__hint--callout {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: rgba(250, 204, 21, .14);
    border: 1px solid rgba(250, 204, 21, .45);
    font-size: 13px;
    font-style: normal;
    line-height: 1.6;
    color: #fff7d6;
    white-space: pre-line;
}

/*
 * The number itself, wrapped by JS so it stands apart from the surrounding
 * sentence -- it is the one piece of the callout a player actually has to
 * copy correctly, and it was reading as regular text.
 */
.field__hint--callout .paynum {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 2px;
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    background: rgba(250, 204, 21, .95);
    color: #1a1025;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.field__hint--callout .paynum:hover { filter: brightness(1.06); }
.field__hint--callout .paynum svg { width: 12px; height: 12px; opacity: .7; flex: none; }
.field__hint--callout .paynum.is-copied svg { opacity: 1; }

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
}

.checkbox input {
    width: 14px;
    height: 14px;
    accent-color: var(--gold);
}

/* --- Profile ------------------------------------------------------------- */

.profile {
    background: linear-gradient(180deg, #2a1347, var(--bg-shell));
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
}

.profile__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.profile__avatar {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 999px;
    border: 2px solid var(--gold);
    background: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.profile__name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.profile__vip {
    display: inline-block;
    background: #eab308;
    color: #000;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.profile__subhead {
    margin: 18px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.profile__note {
    margin: 0 0 12px;
    font-size: 11px;
    color: var(--text-dim);
}

.profile__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stat {
    background: #180a2b;
    border: 1px solid rgba(168, 85, 247, .3);
    border-radius: var(--radius);
    padding: 12px;
}

.stat__label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.stat__value {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 900;
}

.stat__value--gold { color: var(--gold); }
.stat__value--green { color: var(--green); }

.history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #180a2b;
    border: 1px solid rgba(168, 85, 247, .2);
    border-radius: var(--radius);
    padding: 10px 12px;
}

.history__method {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.history__date {
    margin: 2px 0 0;
    font-size: 9px;
    color: var(--text-dim);
}

.history__right { text-align: right; }

.history__amount {
    margin: 0 0 3px;
    font-size: 12px;
    font-weight: 700;
}

.tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 7px;
    border-radius: 999px;
}

.tag--pending  { background: rgba(250, 204, 21, .18); color: #fde047; }
.tag--approved { background: rgba(34, 197, 94, .18); color: #86efac; }
.tag--rejected { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.tag--active   { background: rgba(34, 197, 94, .18); color: #86efac; }
.tag--suspended{ background: rgba(239, 68, 68, .18); color: #fca5a5; }

.rowlink {
    width: 100%;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px;
    background: #1f1035;
    border: 1px solid rgba(168, 85, 247, .2);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 700;
    color: #e5e7eb;
    transition: background .18s ease;
}

.rowlink:hover { background: #2c184c; }

.rowlink__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rowlink__icon {
    display: flex;
    color: var(--red);
}

.rowlink__chevron { color: var(--text-dim); }

/* --- Footer -------------------------------------------------------------- */

.footer {
    margin: 16px 8px;
    padding: 16px;
    background: #15072c;
    border: 1px solid #431668;
    border-radius: var(--radius-xl);
}

.footer__block { margin-bottom: 16px; }

.footer__label {
    margin: 0 0 12px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer__row {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.footer__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.footer__card {
    background: #190b26;
    border: 1px solid #2d144e;
    border-radius: var(--radius-lg);
    padding: 14px;
}

.footer__card--center { text-align: center; }

.footer__card--links p {
    margin: 0 0 6px;
    font-size: 10px;
    font-weight: 600;
}

.footer__card--links p:last-child { margin-bottom: 0; }

.paygrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.paygrid__item {
    background: #1a0f2f;
    border-radius: var(--radius);
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}

.paygrid__icon { display: flex; align-items: center; }

.paygrid__icon--logo img { height: 16px; width: auto; max-width: 44px; object-fit: contain; }

.paygrid__name {
    font-size: 9px;
    line-height: 1.2;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
}

.badge--outline {
    border: 1px solid #4b5563;
    color: #d1d5db;
}

.badge--solid {
    background: linear-gradient(90deg, #a855f7, #ec4899);
    color: #fff;
}

.socials {
    display: flex;
    gap: 12px;
}

.socials__link {
    display: flex;
    color: #fff;
    transition: color .18s ease;
}

.socials__link:hover { color: var(--gold); }

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #1b0d2a;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12px;
    transition: background .18s ease;
}

.download-btn:hover { background: #2d1453; }

.colophon {
    padding: 0 12px 24px;
    text-align: center;
    font-size: 10px;
    color: #d1d5db;
}

.colophon p { margin: 0 0 4px; }

.colophon__strong {
    font-weight: 700;
    color: #fff;
}

/* --- Bottom navigation --------------------------------------------------- */

.bottomnav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--shell-width);
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 10px;
    background: var(--bg-nav);
    border-top: 2px solid #3d186b;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -10px 30px rgba(168, 85, 247, .3);
    z-index: 45;
}

.bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-top: 4px;
    color: var(--text-muted);
    transition: color .18s ease;
}

.bottomnav__item.is-active { color: #fbbf24; }

.bottomnav__icon { display: flex; }

.bottomnav__label {
    font-size: 9px;
    font-weight: 500;
}

.bottomnav__item--center {
    flex: 1.4;
    justify-content: flex-start;
    position: relative;
    top: -24px;
}

.bottomnav__coin {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fef08a, #facc15 45%, #ca8a04);
    border: 4px solid var(--bg-shell);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #713f12;
    box-shadow: 0 0 25px rgba(250, 204, 21, .6);
    transition: transform .18s ease;
}

.bottomnav__item--center:hover .bottomnav__coin { transform: scale(1.05); }

.bottomnav__item--center .bottomnav__label {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
}

/*
 * Six entries, which is what happens once a sportsbook is live.
 *
 * At 360px the bar has ~340px of usable width. Five items plus the 1.4-wide
 * centre slot leaves the coin 74px to sit in; a sixth entry cuts that to
 * roughly 54px, which the full-size 68px coin would overflow — straight over
 * the labels either side of it. Shrinking the coin keeps it inside its own
 * slot instead of letting it cover its neighbours.
 */
.bottomnav--wide { padding: 0 6px; }

.bottomnav--wide .bottomnav__item { gap: 1px; }

.bottomnav--wide .bottomnav__item--center {
    flex: 1.3;
    top: -18px;
}

.bottomnav--wide .bottomnav__coin {
    width: 52px;
    height: 52px;
    border-width: 3px;
}

.bottomnav--wide .bottomnav__label { font-size: 8px; }

.bottomnav--wide .bottomnav__item--center .bottomnav__label {
    margin-top: 2px;
    font-size: 9px;
}

/* --- Sportsbook ---------------------------------------------------------- */

.sports-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 28px 64px;
    text-align: center;
}

.sports-empty__icon { color: var(--text-muted); }

.sports-empty__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.sports-empty__text {
    margin: 0;
    max-width: 30ch;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.sports-empty .btn { margin-top: 8px; }

/* --- Auth overlay -------------------------------------------------------- */

.auth {
    position: absolute;
    inset: 0;
    z-index: 55;
    min-height: 100vh;
    background: rgba(12, 4, 24, .97);
    padding: 28px 16px 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth__head {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

.auth__back {
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--text-muted);
    display: flex;
}

.auth__back:hover { color: #fff; }

.auth__wordmark {
    font-size: 34px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: .04em;
    background: linear-gradient(90deg, #ec4899, #c084fc, #facc15);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth__tagline {
    margin-top: -2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    color: var(--gold);
}

.auth__section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth__title {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.auth__lead {
    margin: 0 0 22px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.auth__card {
    width: 100%;
    background: #1e152d;
    border: 1px solid var(--line-input);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/*
 * Single column: the country picker needs the full card width, and a
 * half-width username beside a full-width phone row reads as a mistake.
 */
.auth__grid {
    display: grid;
    grid-template-columns: 1fr;
}

.auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.auth__link {
    font-size: 11px;
    font-weight: 700;
    color: #eab308;
}

.auth__link:hover { color: var(--gold); }

.auth__foot {
    margin-top: 22px;
    text-align: center;
}

.auth__foot p {
    margin: 0 0 4px;
    font-size: 10px;
    color: var(--text-muted);
}

.auth__cta {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #eab308;
    border-bottom: 1px solid rgba(234, 179, 8, .5);
    padding-bottom: 2px;
}

.auth__return {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.auth__return:hover { color: #fff; }

.auth .btn--outline { margin-top: 12px; }

/* --- Error page ---------------------------------------------------------- */

.error-page {
    align-items: center;
    padding: 24px;
}

.error-card {
    max-width: 420px;
    margin: auto;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--line-panel);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
}

.error-card__code {
    margin: 0;
    font-size: 52px;
    font-weight: 900;
    color: var(--gold);
    line-height: 1;
}

.error-card__title {
    margin: 12px 0 8px;
    font-size: 19px;
}

.error-card__detail {
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--text-muted);
}

/* --- Narrow phones ------------------------------------------------------- */

@media (max-width: 360px) {
    .masthead__wordmark { font-size: 19px; }
    .paygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__row--3 { grid-template-columns: 1fr; }
}