/* ==========================================================================
   DonutMoon — space layer (loaded after style.css)
   Starfield, nebula glow, glass cards, neon accents and phone fixes.
   Everything uses the theme variables, so it follows the active colour theme.
   ========================================================================== */
:root {
    --cosmic: #7c5cff;
    --glow: color-mix(in srgb, var(--accent) 55%, transparent);
    --glass: color-mix(in srgb, var(--panel) 78%, transparent);
    --glass-line: color-mix(in srgb, var(--accent) 20%, var(--line));
    --vh: 100vh;
}

@supports (height: 100dvh) {
    :root { --vh: 100dvh; }
}

/* --- Starfield + nebula ---------------------------------------------------------- */
body {
    background: var(--bg);
    background-attachment: scroll;
    -webkit-tap-highlight-color: transparent;
}

/* Static nebula + tiny stars (3 tiles of different prime sizes look random). */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 70%),
        radial-gradient(700px 520px at -5% 105%, color-mix(in srgb, var(--cosmic) 18%, transparent), transparent 70%),
        radial-gradient(520px 380px at 45% 55%, color-mix(in srgb, var(--cosmic) 6%, transparent), transparent 75%),
        radial-gradient(1.1px 1.1px at 23px 41px, rgba(255,255,255,.75), transparent 100%),
        radial-gradient(1px 1px at 97px 133px, rgba(190,215,255,.65), transparent 100%),
        radial-gradient(1.3px 1.3px at 161px 67px, rgba(255,255,255,.8), transparent 100%),
        radial-gradient(1px 1px at 59px 181px, rgba(210,190,255,.6), transparent 100%);
    background-size: auto, auto, auto, 211px 197px, 173px 229px, 257px 241px, 139px 191px;
}

/* Brighter stars that twinkle. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1.8px 1.8px at 70px 90px, #fff, transparent 100%),
        radial-gradient(1.5px 1.5px at 190px 40px, #cfe1ff, transparent 100%),
        radial-gradient(2px 2px at 130px 210px, #fff, transparent 100%),
        radial-gradient(1.5px 1.5px at 30px 150px, #e0d4ff, transparent 100%);
    background-size: 283px 251px, 317px 271px, 349px 307px, 233px 263px;
    animation: twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
    from { opacity: .25; }
    to { opacity: 1; }
}

/* Occasional shooting star. */
html::after {
    content: '';
    position: fixed;
    top: -10px;
    right: 8%;
    width: 140px;
    height: 2px;
    z-index: -1;
    pointer-events: none;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(160,200,255,.9));
    transform: translate3d(0, 0, 0) rotate(215deg);
    transform-origin: right center;
    opacity: 0;
    animation: shoot 14s linear infinite;
}

@keyframes shoot {
    0%, 86% { opacity: 0; transform: translate3d(0, 0, 0) rotate(215deg); }
    88% { opacity: 1; }
    97% { opacity: 0; transform: translate3d(-520px, 380px, 0) rotate(215deg); }
    100% { opacity: 0; transform: translate3d(-520px, 380px, 0) rotate(215deg); }
}

/* --- Glass surfaces ---------------------------------------------------------------- */
.topbar {
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    border-bottom-color: var(--glass-line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 10%, transparent), 0 8px 30px rgba(0, 0, 0, .25);
}

.panel,
.stat-card,
.modal,
.reward-card,
.faq {
    background: linear-gradient(155deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel) 70%, transparent));
    border-color: var(--glass-line);
}

.modal {
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 60px color-mix(in srgb, var(--cosmic) 14%, transparent);
    max-height: calc(var(--vh) - 32px);
}

.chat {
    background: color-mix(in srgb, var(--bg2) 92%, transparent);
    border-right-color: var(--glass-line);
}

.footer {
    border-top-color: var(--glass-line);
}

@media (hover: hover) and (pointer: fine) {
    .panel,
    .game-card,
    .case-card,
    .stat-card {
        transition: transform .2s, box-shadow .25s, border-color .25s;
    }

    .panel:hover,
    .stat-card:hover,
    .case-card:hover {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 10px 40px color-mix(in srgb, var(--accent) 16%, transparent);
    }

    .game-card:hover {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), 0 14px 44px color-mix(in srgb, var(--cosmic) 30%, transparent);
    }

    /* Blur only where it is cheap (desktop). Phones keep the plain translucent look. */
    .topbar,
    .modal-back {
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}

/* --- Neon accents -------------------------------------------------------------------- */
.btn.primary {
    box-shadow: inset 0 -3px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.3), 0 0 22px color-mix(in srgb, var(--accent) 38%, transparent);
}

.nav-link.active {
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 12%, transparent));
    box-shadow: inset 0 -2px 0 var(--accent), 0 8px 18px -10px var(--accent);
}

h1, h2 {
    text-shadow: 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent);
}

.logo img,
.logo svg {
    filter: drop-shadow(0 0 10px var(--glow));
}

.banner {
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    box-shadow: 0 0 40px -12px color-mix(in srgb, var(--cosmic) 45%, transparent);
}

/* Little stars on the promo banners so they match the welcome card. */
.banner::before {
    background:
        radial-gradient(1.4px 1.4px at 20px 24px, rgba(255,255,255,.85), transparent 100%),
        radial-gradient(1px 1px at 70px 70px, rgba(200,220,255,.7), transparent 100%),
        radial-gradient(1.2px 1.2px at 120px 36px, rgba(255,255,255,.75), transparent 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 22px);
    background-size: 151px 97px, 109px 131px, 181px 83px, auto;
}

/* --- Welcome-back banner ----------------------------------------------------------------- */
.hero.welcome {
    isolation: isolate;
    min-height: 150px;
    background: #070b1f;
    border-color: rgba(90, 140, 255, .4);
    box-shadow: 0 0 50px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* The space picture lives on a pseudo-element so it can drift slowly (transform = cheap). */
.hero.welcome::before {
    content: '';
    position: absolute;
    inset: -3%;
    z-index: -2;
    background: url('/casino/img/space-bg-new.webp') center 20% / cover no-repeat;
    animation: space-drift 40s ease-in-out infinite alternate;
}

.hero.welcome::after {
    display: block;
    z-index: -1;
    background: linear-gradient(90deg, rgba(5, 8, 24, .65) 0%, rgba(5, 8, 24, .2) 55%, transparent 100%);
}

.hero.welcome h1 {
    text-shadow: 0 0 18px rgba(80, 150, 255, .75), 0 2px 10px rgba(0, 0, 0, .7);
}

@keyframes space-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
}

/* --- Phones & tablets ---------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
}

img, svg, video, canvas {
    max-width: 100%;
}

.chat {
    height: calc(var(--vh) - var(--top));
}

@media (max-width: 920px), (pointer: coarse) {
    button, .btn, .nav-link, a.btn, [data-wallet], select {
        touch-action: manipulation;
    }

    .btn { min-height: 44px; }
    .btn.sm { min-height: 38px; }
    .nav-link { min-height: 46px; }

    /* iOS: no zoom on focus, keep the notch/home-bar clear. */
    .topbar { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
    .footer { padding-bottom: max(26px, env(safe-area-inset-bottom)); }
    .modal-back { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    #toasts:not([data-pos^="t"]) { bottom: max(12px, env(safe-area-inset-bottom)); }

    /* Wide things scroll inside themselves instead of the whole page. */
    table, .table-wrap { max-width: 100%; }
    .table-wrap, .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .table-wrap::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
    body { font-size: 14px; }
    .page { padding: 12px 12px 28px; }
    h1 { font-size: 22px; }

    .hero.welcome { min-height: 140px; padding: 20px 16px; }
    .hero.welcome::before { background-position: 72% center; }
    /* Buttons stay compact so the donut on the right stays visible. */
    .hero.welcome .hero-body { max-width: 62%; }
    .hero.welcome .hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .hero.welcome h1 { font-size: 20px; }

    .modal { width: 100%; border-radius: 16px 16px 0 0; }
    .modal-back { align-items: flex-end; padding: 0; }

    .footer { grid-template-columns: 1fr 1fr; padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 380px) {
    .game-card { border-radius: 10px; }
    .nav-link { font-size: 13px; }
}

/* Fewer things moving on slow/low-power devices and for people who ask for less motion. */
@media (prefers-reduced-motion: reduce), (update: slow) {
    body::after,
    html::after,
    .hero.welcome::before {
        animation: none;
    }

    html::after { display: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 640px) {
    /* Shooting star is decoration; skip it on small screens to save battery. */
    html::after { display: none; }
}

/* --- Navbar polish (desktop): compact pill links ------------------------------------- */
@media (min-width: 921px) {
    .nav { gap: 4px; }

    .nav-link {
        height: 40px;
        padding: 0 14px;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .07em;
        border-radius: 999px;
        transition: background .15s, color .15s, box-shadow .15s;
    }

    .nav-link .ic { width: 18px; height: 18px; }
    .nav-link .caret { width: 14px; height: 14px; transition: transform .15s; }
    .nav-games.open .caret, .nav-games:hover .caret { transform: rotate(180deg); }

    .nav-link:hover { background: rgba(255,255,255,.06); }

    .nav-link.active {
        color: var(--text);
        background: color-mix(in srgb, var(--accent) 16%, transparent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
    }

    .dropdown { top: 46px; }
}

/* --- Home: trustworthy hero ------------------------------------------------------------ */
.hero.hero-pro {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 36px;
    align-items: center;
    padding: 40px 44px;
    background:
        radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
        radial-gradient(420px 240px at 100% 100%, color-mix(in srgb, var(--cosmic, var(--accent)) 18%, transparent), transparent 70%),
        linear-gradient(155deg, color-mix(in srgb, var(--panel) 92%, transparent), color-mix(in srgb, var(--bg2) 90%, transparent));
}
.hero.hero-pro::after { display: none; }
.hero-pro h1 {
    font-size: clamp(30px, 4.2vw, 50px);
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: none;
    margin: 6px 0 14px;
}
.hero-pro h1 span {
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
.hero-pro p.muted { font-size: 16px; line-height: 1.55; max-width: 560px; }
.hero-pro .hero-cta { margin-top: 22px; }
.hp-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 20px 0 0;
    padding: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}
.hp-chips li { display: inline-flex; align-items: center; gap: 6px; }
.hp-chips .ic { width: 16px; height: 16px; color: var(--green); }

.hp-proof {
    padding: 18px;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hp-proof-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.hp-proof-head .ic { width: 18px; height: 18px; color: var(--accent2); }
.hp-proof-head em {
    margin-left: auto;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dim);
    border: 1px solid var(--line2);
    border-radius: 999px;
    padding: 2px 8px;
}
.hp-proof dl { margin: 14px 0; display: grid; gap: 10px; }
.hp-proof dl > div {
    padding: 10px 12px;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
}
.hp-proof dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.hp-proof dd { margin: 2px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; color: var(--text); }
.hp-proof small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.hp-proof-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--green);
}
.hp-proof-foot .ic { flex: none; width: 15px; height: 15px; }
.hp-proof-foot:hover { text-decoration: underline; }

/* Trust bar + steps as clean cards */
.trust-bar li { transition: border-color .2s, transform .2s; }
.trust-bar li:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-2px); }
.steps.steps-cards { margin: 0; gap: 12px; }
.steps.steps-cards li {
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    align-items: center;
}
.steps.steps-cards b { font-size: 14px; }
.home .section { margin-top: 30px; }
.home .section-head h2 { display: flex; align-items: center; gap: 10px; }
.home .section-head h2::before {
    content: '';
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(var(--accent2), var(--accent));
}

@media (max-width: 920px) {
    .hero.hero-pro { grid-template-columns: 1fr; padding: 26px 20px; gap: 24px; }
    .trust-bar { grid-template-columns: 1fr 1fr; }
    .steps.steps-cards { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .trust-bar { grid-template-columns: 1fr; }
    .hero-pro .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
}

/* --- Navbar v3: plain links, no boxes ---------------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.topbar {
    gap: 28px;
    padding: 0 28px;
}

.topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, color-mix(in srgb, var(--cosmic) 55%, transparent) 70%, transparent);
    pointer-events: none;
}

/* Logo: just the picture, top left */
.logo .logo-wide,
.logo img.logo-wide {
    width: auto;
    height: 56px;
    max-width: none;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent));
}

.footer .logo .logo-wide {
    height: 64px;
}

/* Right side: see "Account menu & balance" at the end of this file. */

.top-right {
    gap: 22px;
}

.top-right .icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--muted);
}

.top-right .icon-btn:hover {
    color: var(--text);
    background: none;
}

/* Referrals: only bolder and bigger than the other links. */
.nav-link.nav-ref {
    font-weight: 900;
    font-size: 1.15em;
}

@media (min-width: 921px) {
    .nav {
        gap: 6px;
        margin-left: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .nav-link {
        position: relative;
        height: 56px;
        padding: 0 14px;
        gap: 6px;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--muted);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .01em;
        text-transform: none;
        transition: color .15s;
    }

    /* Text only on desktop; the icons come back in the phone menu. */
    .nav-link > .ic:not(.caret) {
        display: none;
    }

    .nav-link:hover,
    .nav-link.active {
        color: var(--text);
        background: none;
        box-shadow: none;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 8px;
        height: 2px;
        border-radius: 2px;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent);
        transform: scaleX(0);
        transition: transform .2s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after,
    .nav-games.open .nav-link::after {
        transform: scaleX(1);
    }

    .nav-link.nav-ref {
        font-size: 17px;
        font-weight: 900;
        color: var(--text);
    }

    .dropdown {
        top: 58px;
        min-width: 340px;
        padding: 10px;
        border-radius: 16px;
    }
}

@media (max-width: 1180px) and (min-width: 921px) {
    .topbar { gap: 16px; padding: 0 16px; }
    .nav-link { padding: 0 9px; font-size: 14px; }
    .nav-link::after { left: 9px; right: 9px; }
    .nav-link.nav-ref { font-size: 15.5px; }
    .top-right { gap: 14px; }
}

@media (max-width: 920px) {
    .topbar { gap: 12px; padding: 0 12px; }
    .logo .logo-wide { height: 46px; }
    .nav-link.nav-ref { font-size: 17px; }
    .balance .coin { width: 22px; height: 22px; }
    #bal { font-size: 15px; }
    .top-right { gap: 10px; }
}

/* --- Provably fair: small icon box in every game header ---------------------------------- */
.fair-btn {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--accent2);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--line2));
    transition: background .15s, box-shadow .15s, transform .15s;
}

.fair-btn .ic {
    width: 20px;
    height: 20px;
}

.fair-btn:hover {
    color: #fff;
    background: color-mix(in srgb, var(--accent) 30%, var(--panel));
    box-shadow: inset 0 0 0 1px var(--accent);
    transform: translateY(-1px);
}

.fair-btn:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
}

.page-head.has-fair {
    position: relative;
}

.page-head.has-fair .fair-btn {
    position: absolute;
    top: 0;
    right: 0;
}

.battle-head .fair-btn {
    margin-left: auto;
}

@media (max-width: 700px) {
    .game-head .fair-btn { width: 36px; height: 36px; }
}

/* --- Balance box + account menu ---------------------------------------------------------- */
.balance {
    height: 42px;
    gap: 9px;
    padding: 0 4px 0 12px;
    border-radius: 11px;
    cursor: pointer;
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel2) 92%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--line2));
    transition: box-shadow .15s;
}

.balance:hover,
.balance:focus-visible {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 65%, var(--line2)), 0 0 18px -6px var(--accent);
    outline: none;
}

.balance .coin {
    width: 24px;
    height: 24px;
}

#bal {
    font-size: 16px;
    font-weight: 800;
    min-width: 40px;
}

.wallet-btn {
    width: 40px;
    height: 34px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, var(--accent2), var(--accent) 60%);
    color: var(--on-accent);
    box-shadow: inset 0 -2px 0 var(--accent-d);
    transition: filter .15s;
}

.balance:hover .wallet-btn {
    filter: brightness(1.12);
}

.wallet-btn .ic {
    width: 18px;
    height: 18px;
}

.user-menu {
    position: relative;
}

.user-chip {
    height: 44px;
    padding: 0 6px 0 0;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.user-chip img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.user-chip .caret {
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: transform .15s;
}

.user-menu.open .caret {
    transform: rotate(180deg);
}

.user-chip:hover span {
    color: var(--accent2);
}

.um-pop {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 60;
    width: 244px;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(170deg, var(--panel2), var(--panel));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line2));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px -12px color-mix(in srgb, var(--accent) 40%, transparent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility .15s;
}

.user-menu.open .um-pop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.um-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.um-head img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    image-rendering: pixelated;
}

.um-head b {
    display: block;
    font-size: 16px;
    line-height: 1.2;
}

.um-head small {
    color: var(--muted);
    font-size: 12.5px;
}

.um-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.um-item {
    --tone: var(--accent2);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 11px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background .12s, color .12s;
}

.um-item:hover,
.um-item:focus-visible {
    background: color-mix(in srgb, var(--tone) 12%, transparent);
    color: var(--text);
    outline: none;
}

.um-ic {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 16%, transparent);
}

.um-ic .ic {
    width: 18px;
    height: 18px;
}

.um-item.t-accent { --tone: var(--accent2); }
.um-item.t-green { --tone: var(--green); }
.um-item.t-sky { --tone: #38d0ff; }
.um-item.t-violet { --tone: var(--cosmic); }
.um-item.t-gold { --tone: var(--gold); }
.um-item.t-red { --tone: #ff6b7a; }

/* Referrals has its own colour: gold, with a soft gold row. */
.um-item.um-ref {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
    margin: 2px 0;
}

.um-item.um-ref:hover {
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 18%, transparent);
}

@media (max-width: 920px) {
    .balance { height: 40px; padding-left: 10px; gap: 7px; }
    .balance .coin { width: 20px; height: 20px; }
    .wallet-btn { width: 34px; height: 30px; }
    #bal { font-size: 14px; min-width: 0; }
    .user-chip .caret { display: none; }
    .um-pop { position: fixed; top: calc(var(--top) + 6px); right: 10px; }
}

/* ==========================================================================
   Game controls: roomy rounded fields, tool chips (edge · rules · fair · live stats) and the
   Live stats window. Everything uses the active theme's colour variables.
   ========================================================================== */
.game-controls { padding: 16px; gap: 14px; }
.game-controls .field { gap: 8px; }
.game-controls .field-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; }

.game-controls .text-input,
.game-controls .select,
.game-controls .num-input,
.game-controls .amount-input { height: 48px; border-radius: 12px; }

.game-controls .amount-input { padding: 0 8px 0 12px; gap: 6px; }
.game-controls .amount-input input,
.game-controls .num-input input { font-weight: 600; font-size: 16px; }

.game-controls .amount-input button,
.game-controls .crash-presets button {
    height: 30px;
    min-width: 38px;
    padding: 0 9px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.game-controls .crash-presets { margin: -6px 0 0; gap: 8px; }
.game-controls .crash-presets button { flex: 1; height: 32px; }

.game-controls .mode-tabs,
.game-controls .seg,
.game-controls .stat { border-radius: 12px; }
.game-controls .mode-tabs { padding: 4px; }
.game-controls .mode-tabs button { height: 36px; border-radius: 9px; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 14px; }

/* Main button: same pressable block as everywhere, a bit taller and rounder. */
.game-controls > .btn.primary.lg { height: 54px; border-radius: 12px; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Tool chips row */
.gc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }

.gc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--muted);
    font: 600 13px var(--font);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s, box-shadow .15s;
}

.gc-chip .ic { width: 17px; height: 17px; }
.gc-chip b { font-weight: 600; color: var(--text); }
.gc-edge { cursor: default; padding: 0 14px 0 12px; }
.gc-icon { width: 38px; padding: 0; }
.gc-icon:hover { background: var(--panel3); color: var(--text); }
.gc-icon.on { color: var(--accent2); background: color-mix(in srgb, var(--accent) 14%, var(--bg2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, var(--line2)); }
.gc-icon:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.gc-rules { line-height: 1.6; margin: 0 0 10px; }

/* Live stats window */
.game-wrap { position: relative; }

.ls-panel {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 268px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    color: var(--text);
    overflow: hidden;
    animation: ls-in .16s ease-out;
}

@keyframes ls-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }

.ls-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: grab; touch-action: none; user-select: none; }
.ls-head:active { cursor: grabbing; }
.ls-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.ls-title .ic { width: 16px; height: 16px; color: var(--accent2); }
.ls-tools { display: flex; gap: 4px; }
.ls-tools button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.ls-tools button:hover { background: var(--panel3); color: var(--text); }
.ls-tools .ic { width: 16px; height: 16px; }

.ls-body { padding: 14px; }
.ls-label { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ls-profit { display: flex; align-items: center; gap: 8px; margin: 8px 0 16px; font: 700 28px/1 var(--font); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ls-profit .coin { width: 22px; height: 22px; }
.ls-profit.pos { color: var(--green); }
.ls-profit.neg { color: var(--red); }
.ls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.ls-grid b { display: block; margin-top: 6px; font: 600 15px var(--font); font-variant-numeric: tabular-nums; }
.ls-grid .pos { color: var(--green); }
.ls-grid .neg { color: var(--red); }
.ls-foot { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ls-foot .ic { width: 15px; height: 15px; }

@media (max-width: 700px) {
    .ls-panel { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; z-index: 120; }
}

@media (prefers-reduced-motion: reduce) { .ls-panel { animation: none; } }


/* ==========================================================================
   Towers: flat board, multiplier chip per floor on the left, rounded tiles.
   Colours come from the active theme.
   ========================================================================== */
.game-stage .towers-stage { min-height: 0; padding: 8px 4px; border-radius: 0; overflow: visible; background: none; }

.game-stage .tower {
    width: min(560px, 100%);
    padding: 0;
    gap: 8px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.game-stage .tower::before,
.game-stage .tower::after { content: none; }

.game-stage .tower .t-row { gap: 8px; opacity: 1; }

.game-stage .tower .t-mult {
    display: grid;
    place-items: center;
    flex: none;
    width: 74px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--line));
    color: var(--text);
    font: 600 12px var(--font);
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: background .2s, box-shadow .2s, color .2s;
}

.game-stage .tower .t-row.active .t-mult {
    background: color-mix(in srgb, var(--accent) 34%, var(--bg2));
    box-shadow: inset 0 0 0 1px var(--accent);
    color: #fff;
}

.game-stage .tower .t-cells { gap: 8px; }

.game-stage .tower .t-cell {
    height: 44px;
    border-radius: 10px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: background .15s, box-shadow .15s, transform .12s, filter .15s;
}

.game-stage .tower .t-row:not(.active) .t-cell:disabled { background: var(--bg2); }

.game-stage .tower .t-row.active .t-cell:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 18%, var(--panel2));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line2));
    cursor: pointer;
}

.game-stage .tower .t-row.active .t-cell:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.2); }
.game-stage .tower .t-cell.dim { opacity: .55; }

@media (max-width: 700px) {
    .game-stage .tower { gap: 6px; }
    .game-stage .tower .t-row, .game-stage .tower .t-cells { gap: 6px; }
    .game-stage .tower .t-mult { width: 60px; height: 40px; font-size: 11px; }
    .game-stage .tower .t-cell { height: 40px; }
}

/* ==========================================================================
   Home: games first, with filter chips and a "continue playing" row
   ========================================================================== */
.home-games .section-head { margin-bottom: 12px; }
.home-filter { display: flex; width: max-content; max-width: 100%; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.home-filter::-webkit-scrollbar { display: none; }
.home-filter button { flex: none; white-space: nowrap; }

.recent-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.recent-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 6px;
    border-radius: 10px;
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--line);
    font-weight: 600;
    font-size: 13px;
    transition: background .15s, box-shadow .15s, transform .15s;
}

.recent-chip:hover { background: var(--panel2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, var(--line)); transform: translateY(-1px); }

.recent-chip .bg-art {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--c1), var(--c2));
}

.recent-chip .bg-art svg, .recent-chip .bg-art img { width: 16px; height: 16px; }

.home .home-promo { margin-top: 22px; }
.home .home-promo .carousel { margin-top: 0; }
.home .daily-state .pos { color: var(--green); }
.home .section-head a.muted { display: inline-flex; align-items: center; gap: 6px; }
.home .section-head a.muted .ic { width: 14px; height: 14px; }

@media (max-width: 900px) { .home .reward-row { grid-template-columns: repeat(2, 1fr); } }

/* --- Settings page: tidy layout ------------------------------------------------------------------------ */
.settings .set-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.settings .set-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.settings .set-card { padding: 18px 20px; margin: 0; min-width: 0; }
.settings .set-card[hidden] { display: none; }
.settings .set-notify { margin-top: 14px; }
.settings .panel:hover { box-shadow: none; border-color: var(--glass-line, var(--line)); }

/* One heading style for every card, including the ones in the theme editor */
.settings .set-card h3, .settings .admin-card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.settings .section { margin-top: 32px; }
.settings .section-head h2 { margin: 0 0 4px; }
.settings .admin-card { padding: 18px 20px; }

/* Rows: text takes the free space, the control keeps its size and never stretches */
.settings .set-row { gap: 18px; padding: 14px 0; }
.settings .set-row > :first-child { flex: 1; min-width: 0; }
.settings label.set-row { cursor: pointer; }
.settings .set-row small { font-size: 12.5px; }
.settings .set-row input[type="range"] { width: 150px; flex: none; }
.settings .set-row .btn { flex: none; white-space: nowrap; }
.settings .set-row .admin-btns { flex: none; flex-wrap: nowrap; }
.settings .set-row .admin-btns .btn { flex: none; }
.settings .set-row-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.settings .set-row-stack .admin-btns { flex-wrap: wrap; }
.settings .set-row .badge { vertical-align: 1px; margin-left: 4px; }
.settings .a-2fa-on { margin-top: 2px; }
.settings .s-account .muted.small { margin-top: 8px; }

/* Notifications picker */
.settings .nt-live { gap: 28px; align-items: flex-start; margin: 8px 0 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); }
.settings .nt-pos { width: 210px; height: 128px; }
.settings .nt-opts { justify-content: flex-start; gap: 14px; min-width: 220px; }
.settings .nt-seg { flex-wrap: wrap; }

/* Theme editor */
.settings .theme-editor { gap: 14px; }
.settings .color-row { padding: 2px 0; }
.settings .set-savebar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 12px 16px; background: var(--panel2); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.settings .set-savebar:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.settings .set-savebar .admin-btns { flex-wrap: nowrap; }
.settings .set-savebar .admin-btns .btn { flex: none; }

@media (max-width: 820px) {
    .settings .set-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .settings .set-card, .settings .admin-card { padding: 16px; }
    .settings .set-row { gap: 12px; }
    .settings .set-row:has(> .admin-btns), .settings .set-row:has(> .btn) { flex-wrap: wrap; }
    .settings .set-row .admin-btns { flex-wrap: wrap; }
    .settings .set-row input[type="range"] { width: 120px; }
    .settings .nt-live { padding: 12px; gap: 16px; }
    .settings .nt-pos { width: 100%; }
    .settings .nt-group { width: 100%; }
    .settings .nt-opts { min-width: 0; width: 100%; }
    .settings .set-savebar { flex-direction: column; align-items: stretch; }
    .settings .set-savebar .admin-btns .btn { flex: 1; }
}

/* --- Mines + Towers: custom gem and bomb artwork -------------------------------------------------------
   The icons use fixed pixel sizes (percentages did not resolve inside the span, so the images rendered at
   their natural size and spilled out of the cells). The cells clip anything that still tries to escape. */
.t-cell, .mine-tile { position: relative; overflow: hidden; padding: 0; }
.t-cell span { display: grid; place-items: center; width: 100%; height: 100%; line-height: 0; }
.t-cell .mine-ico { display: block; width: 30px; height: 30px; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; user-select: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.mine-tile .mine-ico { display: block; width: 74%; height: 74%; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4)); }
.mine-tile.bomb .mine-ico { width: 78%; height: 78%; }
.game-stage .tower .t-cell.bomb { background: linear-gradient(180deg, #2c1519, #1a0b0e) !important; }
.t-cell.safe .mine-ico, .t-cell.hit .mine-ico { animation: mineIcoPop .28s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mineIcoPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 700px) { .t-cell .mine-ico { width: 26px; height: 26px; } }

/* --- Towers: clearer progress ------------------------------------------------------------------------------ */
.game-stage .tower .t-row.cleared .t-mult { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.game-stage .tower .t-row.active .t-mult { color: #fff; background: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: inset 0 0 0 1px var(--accent2); }
.t-hint { margin: 2px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.t-hint kbd { padding: 1px 6px; border-radius: 5px; background: var(--panel3, var(--panel2)); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 11px; color: var(--text); }

/* --- General feel ------------------------------------------------------------------------------------------ */
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
html { scroll-behavior: smooth; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
button:disabled, .btn:disabled { cursor: not-allowed; }
.mine-tile:disabled, .t-cell:disabled { cursor: default; }
.mine-tile, .t-cell, .t-mult { user-select: none; -webkit-user-select: none; }
.mine-tile:focus-visible, .t-cell:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .t-cell.safe .mine-ico, .t-cell.hit .mine-ico { animation: none; }
}

/* ---- Levels & ranks (Rewards page) ---------------------------------------------------------- */
.ranks-panel { margin-top: 16px; padding: 18px; --rk: #c9a27a; }
.ranks-panel[hidden] { display: none; }
.lv-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.lv-badge { flex: none; width: 72px; height: 72px; border-radius: 18px; display: grid; place-content: center; text-align: center;
    background: color-mix(in srgb, var(--rk) 16%, #0d0b14); border: 1px solid color-mix(in srgb, var(--rk) 60%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--rk) 28%, transparent); }
.lv-badge b { font-size: 26px; line-height: 1; color: var(--rk); }
.lv-badge small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.lv-main { flex: 1; min-width: 0; }
.lv-main h3 { margin: 0 0 8px; font-size: 18px; }
.lv-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.lv-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rk), color-mix(in srgb, var(--rk) 55%, #fff)); transition: width .5s ease; }
.lv-sub { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; }
.lv-main p { margin: 6px 0 0; }
.rk-title { margin: 6px 0 4px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.rk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(5, auto); gap: 8px 16px; margin-top: 12px; }
.rk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid transparent; --rk: #c9a27a; }
.rk-item > div { flex: 1; min-width: 0; display: grid; }
.rk-item b { font-size: 14px; }
.rk-item small { font-size: 11px; opacity: .6; }
.rk-item .rk-from { font-size: 12px; opacity: .6; white-space: nowrap; }
.rk-item .rk-rate { min-width: 52px; text-align: right; }
.rk-item .rk-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-content: center; background: color-mix(in srgb, var(--rk) 22%, transparent); }
.rk-item .rk-ic i { width: 12px; height: 12px; border-radius: 50%; background: var(--rk); box-shadow: 0 0 10px var(--rk); }
.rk-item.done { opacity: .55; }
.rk-item.current { background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--rk) 70%, transparent); }
.rk-0 { --rk: #b08968; } .rk-1 { --rk: #f472b6; } .rk-2 { --rk: #60a5fa; } .rk-3 { --rk: #ec4899; } .rk-4 { --rk: #facc15; }
.rk-5 { --rk: #38bdf8; } .rk-6 { --rk: #4ade80; } .rk-7 { --rk: #22d3ee; } .rk-8 { --rk: #f87171; } .rk-9 { --rk: #a78bfa; }
.ranks-panel:has(.lv-badge.rk-0) { --rk: #b08968; } .ranks-panel:has(.lv-badge.rk-1) { --rk: #f472b6; } .ranks-panel:has(.lv-badge.rk-2) { --rk: #60a5fa; }
.ranks-panel:has(.lv-badge.rk-3) { --rk: #ec4899; } .ranks-panel:has(.lv-badge.rk-4) { --rk: #facc15; } .ranks-panel:has(.lv-badge.rk-5) { --rk: #38bdf8; }
.ranks-panel:has(.lv-badge.rk-6) { --rk: #4ade80; } .ranks-panel:has(.lv-badge.rk-7) { --rk: #22d3ee; } .ranks-panel:has(.lv-badge.rk-8) { --rk: #f87171; }
.ranks-panel:has(.lv-badge.rk-9) { --rk: #a78bfa; }
@media (max-width: 720px) {
    .rk-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
    .lv-head { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .lv-bar i { transition: none; } }

/* ---- Rewards page polish ---------------------------------------------------------------------- */
/* Equal-height cards; the rain card no longer picks up the chat widget's .rain styles (renamed .rw-rain). */
.rewards-grid { align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rw .rw-action, .rw .promo-form { margin-top: auto; }
.promo-form input, .promo-form .btn { height: 44px; box-sizing: border-box; }
.promo-form .btn { padding-top: 0; padding-bottom: 0; }
.rw p.muted { color: color-mix(in srgb, var(--text) 72%, transparent); font-size: 14px; line-height: 1.45; }

/* Daily case: clearly "waiting", countdown readable */
.rw .btn.is-wait { opacity: .6; cursor: not-allowed; pointer-events: none; }
.rw .btn.is-wait b { font-variant-numeric: tabular-nums; }
.rw-cd { display: grid; gap: 10px; }

/* Rakeback card rate row */
.rb-stats .rb-rate { font-variant-numeric: tabular-nums; }
.rb-stats .rb-rate small { font-weight: 600; margin-left: 4px; }

/* Rain card status */
.rain-wait { display: grid; gap: 4px; text-align: center; }
.rain-wait b { font-size: 20px; font-variant-numeric: tabular-nums; }

/* Level / rank section */
.lv-sub { font-size: 13px; color: color-mix(in srgb, var(--text) 78%, transparent); }
.lv-sub b { color: var(--text); }
.lv-next { margin: 8px 0 0; color: color-mix(in srgb, var(--text) 78%, transparent); }
.lv-next b { color: var(--text); }
.rk-gain { margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #4ade80; background: rgba(74,222,128,.12); }
.rk-rules { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; color: color-mix(in srgb, var(--text) 72%, transparent); }
.rk-item small { font-size: 12px; opacity: .8; }
.rk-item .rk-from { font-size: 13px; opacity: .8; }
.rk-item.next { border-color: color-mix(in srgb, var(--rk) 40%, transparent); border-style: dashed; }
.rk-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--rk); background: color-mix(in srgb, var(--rk) 18%, transparent); }
.rk-tag.nx { color: var(--text); background: rgba(255,255,255,.1); }

/* Verify bar: shown while the signed-in player has not linked a Minecraft account yet */
.verify-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 12px 10px 16px;border-radius:999px;background:var(--panel2);border:1px solid var(--gold);color:var(--text);
  box-shadow:0 8px 30px rgba(0,0,0,.45);font-weight:600;font-size:14px;max-width:calc(100vw - 24px)}
.verify-bar[hidden]{display:none}
.verify-modal .v-card{padding:14px}
.verify-modal .v-intro{margin:0 0 10px}

/* Cloudflare Turnstile slot in the sign-in dialog (empty when the check is off) */
.captcha-slot { display: flex; justify-content: center; }
.captcha-slot:not(:empty) { margin: 4px 0 12px; min-height: 65px; }

/* --- Mines Duel -------------------------------------------------------------------------------------------
   Reuses the Mines board (.mines-grid / .mine-tile). Everything below is the player bar, pot, turn timer and room list. */
.dl-stage { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; position: relative; }
.dl-players { width: min(560px, 100%); display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.dl-p { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 14px; background: var(--panel2); border: 2px solid transparent; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.dl-p.opp { flex-direction: row-reverse; text-align: right; }
.dl-p img { flex: none; width: 40px; height: 40px; border-radius: 10px; image-rendering: pixelated; background: var(--panel3); object-fit: cover; }
.dl-p img.ghost { image-rendering: auto; object-fit: contain; padding: 6px; opacity: .35; filter: grayscale(1); }
.dl-p div { min-width: 0; }
.dl-p b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dl-p small { color: var(--muted); font-size: 12px; }
.dl-p.empty { opacity: .6; border-style: dashed; border-color: var(--line); }
.dl-p.turn.me { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.dl-p.turn.opp { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.dl-p.won { border-color: var(--green); } .dl-p.lost { border-color: var(--red); }
.dl-pot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; }
.dl-pot small { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--muted); }
.dl-pot b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }
.dl-status { width: min(560px, 100%); min-height: 24px; text-align: center; font-weight: 700; font-size: 16px; text-wrap: balance; }
.dl-status.you { color: var(--accent2); } .dl-status.win { color: var(--green); } .dl-status.lose { color: var(--red); }
.dl-timer { width: min(560px, 100%); height: 22px; position: relative; border-radius: 8px; background: var(--panel2); overflow: hidden; opacity: .35; transition: opacity .2s; }
.dl-timer.on { opacity: 1; }
.dl-timer i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); transition: background .2s; }
.dl-timer.opp i { background: var(--gold); } .dl-timer.low i { background: var(--red); }
.dl-timer span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.dl-grid.dl-shake { animation: dlShake .45s; }
@keyframes dlShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.mine-tile.gem.by-me { background: color-mix(in srgb, var(--blue) 38%, var(--panel)); box-shadow: inset 0 0 0 2px var(--accent); }
.mine-tile.gem.by-opp { background: color-mix(in srgb, var(--gold) 26%, var(--panel)); box-shadow: inset 0 0 0 2px var(--gold); }
.mine-tile.hit { box-shadow: 0 0 0 3px var(--red), 0 0 22px var(--red); }
.dl-code { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px dashed var(--accent); background: var(--bg); }
.dl-code span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-code b { font-size: 26px; letter-spacing: .22em; color: var(--accent2); user-select: all; }
.dl-rooms { width: min(560px, 100%); }
.dl-rooms h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-room-list { display: flex; flex-direction: column; gap: 6px; }
.dl-room { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: var(--panel2); }
.dl-room .player { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-room-m { color: var(--muted); font-size: 13px; } .dl-room-m b { color: var(--text); }
.dl-empty { margin: 0; padding: 14px; text-align: center; border-radius: 12px; background: var(--panel2); }
.dl-join { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.dl-join input { text-transform: uppercase; letter-spacing: .2em; font-weight: 700; }
.dl-join .btn { width: auto; padding-inline: 18px; }
@media (max-width: 520px) {
  .dl-players { grid-template-columns: 1fr 1fr; } .dl-pot { grid-column: 1 / -1; grid-row: 1; flex-direction: row; gap: 10px; }
  .dl-room { grid-template-columns: minmax(0, 1fr) auto auto; } .dl-room-m { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dl-grid.dl-shake { animation: none; } }