/* ═══════════════════════════════════════════════════════════════
   ⚔️ TON ARENA — Colosseum
   Bright sky photograph behind, navy-and-gold game panels on top.
   The roulette is built entirely in CSS — no wheel images needed.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@600;700;800&family=Cairo:wght@600;700;900&display=swap');

:root {
    /* Panels */
    --navy:        #16224A;
    --navy-deep:   #0E1836;
    --navy-soft:   #223268;
    --navy-line:   #2E4080;

    /* Gold */
    --gold:        #F5C244;
    --gold-hi:     #FFD966;
    --gold-dark:   #C8860D;
    --gold-deep:   #8A5C06;

    /* Stone */
    --stone:       #C4A87C;
    --stone-dark:  #7A6242;

    /* Metal */
    --steel:       #D9E4EC;
    --steel-dark:  #8FA3B8;

    /* Signals */
    --win:         #6BBF3A;
    --win-dark:    #4A8A22;
    --alert:       #E8524A;
    --alert-dark:  #B2332C;
    --grape:       #8B5CF6;
    --grape-dark:  #6B34E0;

    /* Text */
    --ink:         #F2F6FF;
    --ink-dim:     #9FB0D8;

    /* Roundness scales with the box. A chip and a full-width panel sharing
       one radius is the fastest way to make an interface look templated. */
    --r-xl: 30px;   /* largest surfaces */
    --r-lg: 24px;   /* panels, cards */
    --r-md: 17px;   /* rows, list items */
    --r-sm: 12px;   /* inputs, small buttons */
    --r-xs: 8px;    /* chips, badges */
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Cairo', system-ui, sans-serif;
    color: var(--ink);
    min-height: 100vh;
    padding: 12px 12px 14px;
    max-width: 480px;
    margin: 0 auto;
    overflow-x: hidden;

    /* `fixed` forces the browser to rasterise against the viewport on every
       scroll, which softens the image on mobile. Anchoring it to the element
       and pinning the top keeps the castle sharp and stops the characters
       drifting under the controls. */
    background: var(--navy-deep) url('assets/app-bg.webp') no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: scroll;
    /* Render the source at its own resolution rather than smoothing it up */
    image-rendering: -webkit-optimize-contrast;
}

/* Scrim so panels always sit on something readable */
/* The artwork is the point — barely touch the top, and only deepen at the
   very bottom where nothing is drawn anyway. Panels carry their own contrast. */
/* The artwork stays as painted. Nothing is dimmed over it — every panel
   carries its own solid background, so text never has to fight the scene. */
/* No overlay at all. Every panel is opaque, so the artwork can simply be
   the artwork. */

h1, h2, h3, .display {
    font-family: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
    font-weight: 800; line-height: 1.25;
}

/* ─────────────────────────────────────────────
   Loading
   ───────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   Loading screen
   The percentage reflects real work — see BOOT_STAGES in app.js — so the
   bar is allowed to pause. That honesty is the point.
   ═══════════════════════════════════════════════════════════════ */

.loading-screen {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 9vh;
    background: var(--navy-deep) url('assets/loading-bg.webp') center / cover no-repeat;
    transition: opacity .5s ease, transform .5s ease;
}
/* A vignette instead of a flat wash: the artwork stays clear in the middle
   and only darkens where the text and bar actually sit. */
.loading-screen::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(11,19,48,.15) 0%,
        transparent 22%,
        transparent 58%,
        rgba(11,19,48,.82) 88%,
        rgba(11,19,48,.94) 100%);
}
.loading-screen.gone { opacity: 0; transform: scale(1.05); pointer-events: none; }

/* A slow breathing glow behind the crest */
.ls-glow {
    position: absolute; top: 42%; left: 50%;
    width: 340px; height: 340px; transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245,194,68,.28), transparent 68%);
    animation: ls-breathe 4s ease-in-out infinite;
}
@keyframes ls-breathe {
    0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.12); }
}

.ls-body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 0 28px; width: 100%; max-width: 380px;
}

.ls-crest {
    width: clamp(96px, 30vw, 128px); aspect-ratio: 1;
    border-radius: 28px; overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 6px 0 var(--gold-deep), 0 18px 44px rgba(0,0,0,.65);
    animation: ls-in .7s cubic-bezier(.2,1.3,.35,1);
}
.ls-crest img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes ls-in {
    from { transform: scale(.62) translateY(24px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

.ls-title {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: clamp(1.9rem, 8vw, 2.4rem); font-weight: 800;
    letter-spacing: 3px; color: var(--gold-hi);
    text-shadow: 0 2px 0 var(--gold-deep), 0 5px 0 rgba(0,0,0,.55),
                 0 0 34px rgba(245,194,68,.5);
    animation: ls-in .7s .1s backwards cubic-bezier(.2,1.3,.35,1);
}
.ls-sub {
    font-size: 0.78rem; font-weight: 600; letter-spacing: 1px;
    color: var(--ink-dim); margin-top: -6px;
    animation: ls-in .7s .18s backwards cubic-bezier(.2,1.3,.35,1);
}

/* ─── Progress ─── */
.ls-bar {
    position: relative; width: 100%; height: 12px;
    margin-top: 14px; border-radius: 20px; overflow: hidden;
    background: rgba(0,0,0,.55);
    border: 2px solid var(--gold-deep);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
.ls-bar i {
    display: block; height: 100%; width: 0; border-radius: 20px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-hi));
    box-shadow: none;
    transition: width .25s ease-out;
}
/* A highlight travelling along the track */
.ls-sheen {
    position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%,
                rgba(255,255,255,.42) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: ls-sheen 1.7s linear infinite;
}
@keyframes ls-sheen { to { transform: translateX(100%); } }

.ls-pct {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.06rem; font-weight: 800; color: var(--gold-hi);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .ls-glow, .ls-sheen { animation: none; }
    .ls-crest, .ls-title, .ls-sub { animation: none; }
}
.spin-coin {
    width: 72px; height: 72px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--gold-hi), var(--gold) 48%, var(--gold-dark));
    border: 4px solid var(--gold-deep);
    display: grid; place-items: center; font-size: 2rem;
    box-shadow: 0 0 34px rgba(245,194,68,.65), inset 0 -4px 8px rgba(138,92,6,.5);
    animation: flip 1.15s ease-in-out infinite;
}
@keyframes flip { 0%,100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }

body.loading::after {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: sweep 1s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ─────────────────────────────────────────────
   Header
   ───────────────────────────────────────────── */
.hero { text-align: center; padding: 4px 0 12px; }

.logo-badge {
    width: 104px; height: 104px; margin: 0 auto 8px;
    border-radius: 26px; overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 5px 0 var(--gold-deep), 0 12px 26px rgba(0,0,0,.5);
}
.logo-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes bob {
    0%,100% { transform: translateY(0) rotate(-1deg); }
    50%     { transform: translateY(-6px) rotate(1deg); }
}

.hero h1 {
    font-size: 2rem; letter-spacing: 1px; color: var(--gold-hi);
    text-shadow: 0 2px 0 var(--gold-deep), 0 4px 0 rgba(0,0,0,.45), 0 8px 20px rgba(0,0,0,.6);
}
.tagline {
    display: inline-block; margin-top: 4px;
    background: rgba(22,34,74,.8);
    border: 1.5px solid var(--navy-line);
    border-radius: 30px; padding: 4px 14px;
    font-size: 0.78rem; font-weight: 700; color: var(--ink-dim);
}

/* ─────────────────────────────────────────────
   Panels
   ───────────────────────────────────────────── */
.panel {
    background: linear-gradient(168deg, #223268, #16224A 55%, #0E1836);
    border: 2.5px solid var(--gold-dark);
    border-radius: var(--r-lg);
    padding: 16px;
    margin: 10px 0;
    box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 14px 28px rgba(0,0,0,.42),
                inset 0 1px 0 rgba(255,255,255,.12);
}
.panel.center { text-align: center; }

.panel-title {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; font-weight: 800; color: var(--gold);
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.panel-title::after {
    content: ''; flex: 1; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-dark), transparent);
}

/* Gold banner heading */
/* A gold slab across ten pages made every screen look identical. Keep the
   material, lose the width: it now sits inline like a real sign. */
.signboard {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding-inline: 24px;
}
.signboard-legacy {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dark));
    border: 2.5px solid var(--gold-deep);
    border-radius: var(--r-md);
    padding: 10px 16px; margin: 12px 0 10px;
    text-align: center;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.06rem; font-weight: 800; color: #4A3000;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
    box-shadow: 0 4px 0 var(--gold-deep), inset 0 2px 0 rgba(255,255,255,.4);
}

/* ─────────────────────────────────────────────
   Coin purse
   ───────────────────────────────────────────── */
.purse {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--gold);
    border-radius: var(--r-lg); padding: 12px 14px;
    box-shadow: 0 5px 0 var(--gold-deep), 0 12px 22px rgba(0,0,0,.45);
}
.purse-coin {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--gold-hi), var(--gold) 52%, var(--gold-dark));
    border: 3px solid var(--gold-deep);
    display: grid; place-items: center; font-size: 1.2rem;
    box-shadow: inset 0 -3px 6px rgba(138,92,6,.55);
}
.purse-body { flex: 1; text-align: start; }
.purse-body span { display: block; font-size: 0.7rem; font-weight: 700; color: var(--ink-dim); letter-spacing: .4px; }
.purse-body b {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.38rem; color: var(--gold-hi); line-height: 1.2;
}

/* ─────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────── */
.btn {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-weight: 700; font-size: 0.95rem;
    border: none; border-radius: var(--r-md);
    padding: 12px 20px; cursor: pointer; color: #fff;
    text-decoration: none; display: inline-block; text-align: center;
    transition: transform .1s, box-shadow .1s, filter .12s;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); }

.btn-gold {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dark));
    box-shadow: 0 5px 0 var(--gold-deep), 0 10px 20px rgba(0,0,0,.4);
    color: #4A3000; text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.btn-gold:active { box-shadow: 0 1px 0 var(--gold-deep); }

.btn-grass {
    background: linear-gradient(180deg, #8FDA5E, var(--win));
    box-shadow: 0 5px 0 var(--win-dark), 0 10px 20px rgba(0,0,0,.35);
}
.btn-grass:active { box-shadow: 0 1px 0 var(--win-dark); }

.btn-grape {
    background: linear-gradient(180deg, #A57BFF, var(--grape));
    box-shadow: 0 5px 0 var(--grape-dark), 0 10px 20px rgba(0,0,0,.35);
}
.btn-grape:active { box-shadow: 0 1px 0 var(--grape-dark); }

.btn-berry {
    background: linear-gradient(180deg, #F4776F, var(--alert));
    box-shadow: 0 5px 0 var(--alert-dark), 0 10px 20px rgba(0,0,0,.35);
}
.btn-berry:active { box-shadow: 0 1px 0 var(--alert-dark); }

.btn-wood {
    background: linear-gradient(180deg, var(--navy-soft), var(--navy));
    border: 2px solid var(--gold-dark);
    box-shadow: 0 5px 0 rgba(0,0,0,.5);
    color: var(--gold);
}
.btn-wood:active { box-shadow: 0 1px 0 rgba(0,0,0,.5); }

.btn-ghost {
    background: rgba(34,50,104,.75);
    border: 2px solid var(--navy-line);
    color: var(--ink-dim);
    box-shadow: 0 4px 0 rgba(0,0,0,.4);
    text-shadow: none;
}
.btn-ghost:active { box-shadow: 0 1px 0 rgba(0,0,0,.4); }

.btn-block { display: block; width: 100%; margin: 8px 0; }
.btn-big { font-size: 1.06rem; padding: 14px; }
.btn-sm { font-size: 0.78rem; padding: 8px 14px; border-radius: var(--r-sm); box-shadow: 0 3px 0 rgba(0,0,0,.4); }

/* ─────────────────────────────────────────────
   Mode cards — one icon, three tints
   ───────────────────────────────────────────── */
.modes { display: grid; gap: 10px; }

.mode-card {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--tint, var(--gold));
    border-radius: var(--r-lg); padding: 12px 14px;
    cursor: pointer; font-family: inherit; text-align: start;
    box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 11px 20px rgba(0,0,0,.35);
    transition: transform .12s, box-shadow .12s;
}
.mode-card:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.mode-card::after {
    content: ''; position: absolute; inset-inline-end: -34px; top: -34px;
    width: 100px; height: 100px; border-radius: 50%;
    background: var(--tint, var(--gold)); opacity: .22; filter: blur(6px);
}

.mode-icon {
    width: 58px; height: 58px; flex-shrink: 0;
    border-radius: 15px;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--tint) 42%, transparent), transparent 68%);
    display: grid; place-items: center;
    position: relative;
}
.mode-icon::before {
    content: ''; position: absolute; inset: 0; border-radius: 15px;
    border: 2px solid var(--tint); opacity: .55;
}
.mode-icon img {
    width: 42px; height: 42px; object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
}

.mode-body { flex: 1; min-width: 0; }
.mode-body b {
    display: block; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.2rem; color: var(--gold-hi);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.mode-body small { font-size: 0.78rem; color: var(--ink-dim); font-weight: 600; }
.mode-count {
    display: inline-block; margin-top: 2px;
    background: var(--tint); color: #fff;
    border-radius: 20px; padding: 1px 8px;
    font-size: 0.7rem; font-weight: 800;
}
.mode-go { font-size: 1.6rem; color: var(--tint); flex-shrink: 0; }

/* ─────────────────────────────────────────────
   Stake tiles — bronze / silver / gold / jewelled
   ───────────────────────────────────────────── */
.stakes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stake {
    background: linear-gradient(170deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--tier, var(--gold-dark));
    border-radius: var(--r-lg);
    padding: 14px 10px 12px; text-align: center; cursor: pointer;
    box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 10px 18px rgba(0,0,0,.35);
    transition: transform .12s, box-shadow .12s;
}
.stake:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

.stake-coin {
    width: 50px; height: 50px; margin: 0 auto 8px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, var(--c-hi), var(--c-mid) 52%, var(--c-lo));
    border: 3px solid var(--c-lo);
    display: grid; place-items: center; font-size: 1.2rem;
    box-shadow: inset 0 -4px 7px rgba(0,0,0,.35), 0 0 16px var(--c-glow);
    position: relative;
}
/* laurel ring engraved on the coin face */
.stake-coin::before {
    content: ''; position: absolute; inset: 7px; border-radius: 50%;
    border: 1.5px dashed rgba(0,0,0,.28);
}
/* specular sweep */
.stake-coin::after {
    content: ''; position: absolute; top: 5px; left: 9px;
    width: 16px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.55); filter: blur(2px);
}

.tier-1 { --c-hi:#E8B98A; --c-mid:#B87333; --c-lo:#8C4F1F; --c-glow:rgba(184,115,51,.4);  --tier:#B87333; }
.tier-2 { --c-hi:#F2F7FC; --c-mid:#C9D6E3; --c-lo:#8FA3B8; --c-glow:rgba(201,214,227,.45); --tier:#C9D6E3; }
.tier-3 { --c-hi:#FFE9A8; --c-mid:#F5C244; --c-lo:#C8860D; --c-glow:rgba(245,194,68,.5);   --tier:#F5C244; }
.tier-4 { --c-hi:#FFF3C4; --c-mid:#FFD966; --c-lo:#C8860D; --c-glow:rgba(255,217,102,.75); --tier:#FFD966; }
/* top tier gets four gems around the rim */
.tier-4 .stake-coin {
    box-shadow: inset 0 -4px 7px rgba(0,0,0,.3), 0 0 26px rgba(255,217,102,.8),
        0 -21px 0 -18px #2E7FD4, 0 21px 0 -18px #2E7FD4,
        -21px 0 0 -18px #2E7FD4, 21px 0 0 -18px #2E7FD4;
}

.stake b {
    display: block; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.38rem; color: var(--gold-hi);
}
.stake small {
    display: inline-block; margin-top: 4px;
    background: rgba(107,191,58,.2); color: #A6E77C;
    border: 1px solid rgba(107,191,58,.45);
    border-radius: 20px; padding: 2px 10px;
    font-size: 0.7rem; font-weight: 800;
}

/* ─────────────────────────────────────────────
   Room cards
   ───────────────────────────────────────────── */
.rooms { display: grid; gap: 8px; }

.room {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--win);
    border-radius: var(--r-md); padding: 10px 12px; cursor: pointer;
    box-shadow: 0 4px 0 rgba(0,0,0,.5), 0 9px 16px rgba(0,0,0,.32);
    transition: transform .12s, box-shadow .12s;
}
.room:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.room.hot { border-color: var(--alert); }

.room-body { flex: 1; min-width: 0; }
.room-code {
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.06rem; letter-spacing: 3px; color: var(--gold-hi); display: block;
}
.room-body small { font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; }

.seat-dots { display: flex; gap: 4px; flex-shrink: 0; }
.seat-dots i {
    width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.16); display: block;
}
.seat-dots i.on { background: var(--win); box-shadow: 0 0 7px rgba(107,191,58,.75); }

.pip {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--alert); flex-shrink: 0; animation: pip 1.4s infinite;
}
@keyframes pip {
    0%,100% { box-shadow: 0 0 0 0 rgba(232,82,74,.65); }
    50%     { box-shadow: 0 0 0 8px rgba(232,82,74,0); }
}

/* ─────────────────────────────────────────────
   Avatars
   ───────────────────────────────────────────── */
.av {
    border-radius: 50%; background: var(--navy-soft);
    border: 2.5px solid var(--gold-dark); object-fit: cover;
    box-shadow: 0 2px 6px rgba(0,0,0,.5); flex-shrink: 0;
}
.av-sm { width: 30px; height: 30px; border-width: 2px; }
.av-md { width: 44px; height: 44px; }
.av-lg { width: 80px; height: 80px; border-width: 4px; border-color: var(--gold); }

.av-stack { display: flex; }
.av-stack .av { margin-inline-start: -9px; }
.av-stack .av:first-child { margin-inline-start: 0; }

/* Champion ring — four gems, pure CSS */
.av-ring {
    position: relative; display: inline-grid; place-items: center;
}
.av-ring::before {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    border: 2.5px solid var(--gold);
    box-shadow:
        0 0 14px rgba(245,194,68,.5),
        0 -3px 0 -1px #2E7FD4, 0 3px 0 -1px #2E7FD4,
        -3px 0 0 -1px #2E7FD4, 3px 0 0 -1px #2E7FD4;
}

/* ─────────────────────────────────────────────
   Seats
   ───────────────────────────────────────────── */
.seats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 12px 0; }
.seat { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.seat .av { width: 52px; height: 52px; }
.seat span {
    font-size: 0.7rem; font-weight: 700; color: var(--ink-dim);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seat.ready .av { border-color: var(--win); box-shadow: 0 0 0 3px rgba(107,191,58,.3), 0 2px 6px rgba(0,0,0,.5); }
.seat.ready span { color: #A6E77C; }
.seat.free .av-empty {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2.5px dashed var(--navy-line);
    background: rgba(14,24,54,.5);
    display: grid; place-items: center;
    font-size: 1.38rem; color: var(--navy-line);
}

/* ─────────────────────────────────────────────
   Countdown
   ───────────────────────────────────────────── */
.countdown-box { border-color: var(--gold); box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 16px 34px rgba(245,194,68,.22); }

.countdown-timer {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 4.4rem; font-weight: 800; line-height: 1;
    color: var(--gold-hi); margin: 4px 0;
    text-shadow: 0 3px 0 var(--gold-deep), 0 6px 0 rgba(0,0,0,.5), 0 0 34px rgba(245,194,68,.65);
    animation: tick 1s ease-in-out infinite;
}
@keyframes tick { 0%,100% { transform: scale(1); } 12% { transform: scale(1.1); } }

.countdown-bar-bg {
    height: 13px; border-radius: 20px;
    background: rgba(0,0,0,.42);
    border: 2px solid var(--gold-deep);
    overflow: hidden; margin: 10px 0 6px;
}
.countdown-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--win), var(--gold), var(--alert));
    border-radius: 20px; transition: width .25s linear;
    box-shadow: 0 0 12px rgba(245,194,68,.65);
}

/* ═══════════════════════════════════════════════════════════════
   🎡 THE ARENA WHEEL — the hero. All CSS, no images.
   ═══════════════════════════════════════════════════════════════ */

.wheel-stage {
    position: relative;
    margin: 14px 0;
    padding: 16px 20px 12px;
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(196,168,124,.16), transparent 30%),
        linear-gradient(180deg, var(--navy-soft), var(--navy-deep));
    border: 3px solid var(--gold-dark);
    box-shadow:
        0 6px 0 rgba(0,0,0,.55),
        0 18px 36px rgba(0,0,0,.5),
        inset 0 2px 0 rgba(255,255,255,.14);
    overflow: hidden;
}

/* Marquee bulbs along the top and bottom of the stage */
.wheel-stage::before,
.wheel-stage::after {
    content: ''; position: absolute; left: 10px; right: 10px; height: 8px;
    background: radial-gradient(circle, var(--gold-hi) 0 2.4px, transparent 2.8px) 0 0 / 19px 8px repeat-x;
    filter: drop-shadow(0 0 5px rgba(255,217,102,.9));
    animation: bulbs 1.6s steps(2) infinite;
}
.wheel-stage::before { top: 5px; }
.wheel-stage::after  { bottom: 5px; }
@keyframes bulbs { 0% { opacity: 1; } 50% { opacity: .45; } }

/* Stone pillars capping each end */
.wheel-pillar {
    position: absolute; top: 16px; bottom: 12px; width: 16px; z-index: 5;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold) 40%, var(--gold-deep));
    border: 2px solid var(--gold-deep);
    box-shadow: 0 0 14px rgba(0,0,0,.6);
}
.wheel-pillar.left  { left: 3px;  border-radius: 0 6px 6px 0; }
.wheel-pillar.right { right: 3px; border-radius: 6px 0 0 6px; }
/* gem in each capital */
.wheel-pillar::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #2E7FD4; box-shadow: 0 0 9px #4A9FE8;
}

/* The scrolling window */
.wheel-window {
    position: relative;
    height: 122px;
    overflow: hidden;
    direction: ltr;
    border-radius: var(--r-sm);
    background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 54px),
        linear-gradient(180deg, #0B1330, #16224A 50%, #0B1330);
    border-top: 2px solid var(--gold-deep);
    border-bottom: 2px solid var(--gold-deep);
    box-shadow: inset 0 6px 14px rgba(0,0,0,.7), inset 0 -6px 14px rgba(0,0,0,.7);
}
/* Vignettes so cells fade at the edges */
.wheel-window::before,
.wheel-window::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 62px; z-index: 3; pointer-events: none;
}
.wheel-window::before { left: 0;  background: linear-gradient(90deg, #0B1330, transparent); }
.wheel-window::after  { right: 0; background: linear-gradient(-90deg, #0B1330, transparent); }

.wheel-strip { display: flex; will-change: transform; height: 100%; }

.wheel-cell {
    width: 108px; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    border-inline-end: 1px solid rgba(245,194,68,.14);
}
.wheel-cell img {
    width: 54px; height: 54px; border-radius: 50%;
    border: 2.5px solid var(--gold-dark); object-fit: cover;
    box-shadow: 0 3px 8px rgba(0,0,0,.6);
}
.wheel-cell b {
    font-size: 0.7rem; font-weight: 700; color: var(--ink-dim);
    max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wheel-cell.is-winner img {
    border-color: var(--gold-hi);
    box-shadow: 0 0 0 4px rgba(245,194,68,.4), 0 0 24px rgba(255,217,102,.8);
}
.wheel-cell.is-winner b { color: var(--gold-hi); }

/* Centre marker: gold arrowheads top and bottom + light beam */
.wheel-marker {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; z-index: 4;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, var(--gold-hi) 18%, var(--gold-hi) 82%, transparent);
    box-shadow: 0 0 16px rgba(255,217,102,.95);
    pointer-events: none;
}
.wheel-marker::before, .wheel-marker::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    border-inline: 11px solid transparent;
    filter: drop-shadow(0 0 6px rgba(255,217,102,.9));
}
.wheel-marker::before { top: -2px;    border-top: 16px solid var(--gold-hi); }
.wheel-marker::after  { bottom: -2px; border-bottom: 16px solid var(--gold-hi); }

.wheel-caption {
    text-align: center; margin-top: 10px;
    font-family: 'Baloo Bhaijaan 2', sans-serif; font-weight: 700;
    font-size: 0.95rem; color: var(--gold);
    text-shadow: 0 2px 4px rgba(0,0,0,.6);
}

/* ─────────────────────────────────────────────
   Result
   ───────────────────────────────────────────── */
.result-win {
    border-color: var(--gold);
    box-shadow: 0 5px 0 rgba(0,0,0,.45), 0 18px 40px rgba(245,194,68,.3);
}
.trophy { font-size: 3.4rem; animation: pop .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop { 0% { transform: scale(0) rotate(-28deg); } 100% { transform: scale(1) rotate(0); } }

.prize-tag {
    display: inline-block; margin: 10px 0;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dark));
    border: 3px solid var(--gold-deep);
    border-radius: 30px; padding: 8px 24px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.6rem; color: #4A3000;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 4px 0 var(--gold-deep), 0 0 30px rgba(245,194,68,.5);
}

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
    position: absolute; top: -14px;
    width: 9px; height: 15px; border-radius: 2px;
    animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(105vh) rotate(760deg); opacity: 0; } }

/* ─────────────────────────────────────────────
   Live feed
   ───────────────────────────────────────────── */
.live-tag {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--alert); color: #fff;
    border-radius: 30px; padding: 4px 14px;
    font-size: 0.78rem; font-weight: 800;
    box-shadow: 0 3px 0 var(--alert-dark);
}
.live-tag i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pip 1.3s infinite; }

.winner-row {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 8px 12px; margin: 6px 0;
}
.winner-row .wr-body { flex: 1; min-width: 0; }
.winner-row b { font-size: 0.86rem; display: block; color: var(--ink); }
.winner-row small { font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; }
.winner-row .wr-prize {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; color: #A6E77C;
    background: rgba(107,191,58,.16);
    border: 1px solid rgba(107,191,58,.4);
    border-radius: 20px; padding: 4px 10px; flex-shrink: 0;
}

.ticker {
    background: linear-gradient(180deg, var(--navy-soft), var(--navy-deep));
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 8px 0; margin: 10px 0;
    overflow: hidden; position: relative;
    box-shadow: 0 4px 0 rgba(0,0,0,.45);
}
.ticker-track {
    display: flex; gap: 24px; white-space: nowrap;
    animation: slide 26s linear infinite;
    color: var(--gold-hi); font-size: 0.78rem; font-weight: 700;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─────────────────────────────────────────────
   Share
   ───────────────────────────────────────────── */
.share-card {
    background: linear-gradient(160deg, #33245E, #221847);
    border: 2.5px solid var(--grape);
    border-radius: var(--r-lg); padding: 14px; margin: 10px 0;
    box-shadow: 0 5px 0 var(--grape-dark), 0 12px 22px rgba(0,0,0,.4);
}
.share-card p { font-size: 0.78rem; font-weight: 600; color: #D6C6FF; margin-bottom: 10px; line-height: 1.6; }
.share-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

/* ─────────────────────────────────────────────
   Tiles
   ───────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.tile {
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 12px 8px; text-align: center;
}
.tile b {
    display: block; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.38rem; color: var(--ink); line-height: 1.3;
}
.tile span { font-size: 0.7rem; font-weight: 700; color: var(--ink-dim); }
.tile.gold b  { color: var(--gold-hi); }
.tile.grass b { color: #A6E77C; }
.tile.grape b { color: #C4A9FF; }

/* ─────────────────────────────────────────────
   Menu
   ───────────────────────────────────────────── */
.menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.menu button {
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 10px 2px 8px; cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 0.7rem; font-weight: 700; color: var(--gold);
    box-shadow: 0 4px 0 rgba(0,0,0,.5);
    transition: transform .1s, box-shadow .1s;
}
.menu button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.menu button i { display: block; font-style: normal; font-size: 1.38rem; margin-bottom: 2px; }

/* ─────────────────────────────────────────────
   Inputs
   ───────────────────────────────────────────── */
input, textarea {
    width: 100%;
    background: rgba(11,19,48,.85);
    border: 2.5px solid var(--navy-line);
    border-radius: var(--r-md); padding: 12px; margin: 8px 0;
    font-family: 'Cairo', sans-serif;
    font-size: 0.95rem; font-weight: 700; color: var(--ink);
    text-align: center;
}
input:focus, textarea:focus { outline: none; border-color: var(--gold); }
input::placeholder { color: #6B7CA8; font-weight: 600; }

.code-plate {
    display: inline-block;
    background: linear-gradient(180deg, #0B1330, #16224A);
    border: 3px solid var(--gold);
    border-radius: var(--r-md); padding: 10px 24px; margin: 10px 0;
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.6rem; letter-spacing: 7px; color: var(--gold-hi);
    box-shadow: 0 4px 0 var(--gold-deep), inset 0 2px 10px rgba(0,0,0,.6);
}

/* ─────────────────────────────────────────────
   Misc
   ───────────────────────────────────────────── */
.back {
    background: rgba(34,50,104,.8);
    border: 2px solid var(--gold-dark);
    border-radius: 30px; padding: 6px 16px; margin-bottom: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem; font-weight: 700; color: var(--gold);
    cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.5);
}
.back:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

.note { font-size: 0.78rem; font-weight: 600; color: var(--ink-dim); line-height: 1.7; margin-top: 8px; }
.note b { color: var(--gold); }
.pulse { animation: fade 1.7s ease-in-out infinite; }
@keyframes fade { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

.empty { text-align: center; padding: 24px 12px; }
.empty-icon {
    font-size: 2.6rem; opacity: .5; display: block; margin-bottom: 8px;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.empty p { font-size: 0.86rem; font-weight: 600; color: var(--ink-dim); line-height: 1.7; }

.divider {
    height: 2px; margin: 14px 0; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-dark), transparent);
}

.fair details summary {
    cursor: pointer; font-size: 0.78rem; font-weight: 700; color: var(--ink-dim);
    padding: 6px 0; list-style: none;
}
.fair code {
    display: block; word-break: break-all;
    font-size: 0.62rem; color: var(--gold);
    background: rgba(11,19,48,.8); border: 1px solid var(--navy-line);
    border-radius: 8px; padding: 6px; margin-top: 4px;
}

.wallet-addr {
    display: inline-block;
    background: rgba(11,19,48,.8);
    border: 2px solid var(--navy-line);
    border-radius: 20px; padding: 6px 14px; margin: 6px 0;
    font-size: 0.78rem; font-weight: 700; color: var(--gold);
}
.status-connected    { color: #A6E77C; font-weight: 800; font-size: 0.86rem; }
.status-disconnected { color: #FF9A93; font-weight: 800; font-size: 0.86rem; }

.fee-preview {
    display: flex; gap: 8px;
    background: rgba(11,19,48,.72);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 10px; margin: 8px 0;
}
.fee-preview:empty { display: none; }
.fee-preview span {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--ink-dim);
}
.fee-preview b { font-size: 0.95rem; color: var(--ink); }
.fee-red   { color: #FF9A93 !important; }
.fee-green { color: #A6E77C !important; }

.partner-badge {
    display: inline-block;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-dark));
    border: 2.5px solid var(--gold-deep);
    border-radius: 30px; padding: 8px 16px; margin-bottom: 12px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #4A3000;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 4px 0 var(--gold-deep);
}

.how-list { text-align: start; margin-top: 12px; }
.how-list li {
    list-style: none; display: flex; gap: 10px; align-items: flex-start;
    background: rgba(11,19,48,.6);
    border: 1px solid var(--navy-line);
    border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px;
    font-size: 0.78rem; font-weight: 600; color: var(--ink-dim);
}
.how-list li b { color: var(--gold); }
.how-list em { font-style: normal; font-size: 1.06rem; }

/* ─────────────────────────────────────────────
   Toast
   ───────────────────────────────────────────── */
.toast {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
    z-index: 999; max-width: 90%;
    border-radius: var(--r-md); padding: 12px 20px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; font-weight: 700; color: #fff;
    text-align: center;
    animation: drop .3s cubic-bezier(.2,1.4,.4,1);
    background: linear-gradient(180deg, #F4776F, var(--alert));
    box-shadow: 0 5px 0 var(--alert-dark), 0 12px 26px rgba(0,0,0,.5);
}
.toast.success {
    background: linear-gradient(180deg, #8FDA5E, var(--win));
    box-shadow: 0 5px 0 var(--win-dark), 0 12px 26px rgba(0,0,0,.5);
}
@keyframes drop {
    from { transform: translate(-50%, -130%); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

/* ─────────────────────────────────────────────
   Accessibility
   ───────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 3px solid var(--gold-hi); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    #app.leaving { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Wallet & referral pages
   ═══════════════════════════════════════════════════════════════ */

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

.ref-link {
    background: rgba(11,19,48,.85);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 10px 12px; margin-bottom: 10px;
    font-size: 0.7rem; font-weight: 600; color: var(--gold);
    word-break: break-all; text-align: center; line-height: 1.6;
}

.quick-amounts { display: flex; gap: 6px; margin-bottom: 4px; }
.chip {
    flex: 1;
    background: rgba(34,50,104,.8);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-sm);
    padding: 8px 4px; cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem; font-weight: 800; color: var(--gold);
    box-shadow: 0 3px 0 rgba(0,0,0,.45);
    transition: transform .1s, box-shadow .1s;
}
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }

.locked {
    background: rgba(11,19,48,.6);
    border: 2px dashed var(--navy-line);
    border-radius: var(--r-md);
    padding: 14px; text-align: center; margin-bottom: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   Screen transitions & loading skeletons
   ═══════════════════════════════════════════════════════════════ */

#app { transition: opacity .12s ease, transform .12s ease; }
#app.leaving  { opacity: 0; transform: translateY(6px); }
#app.entering { animation: screen-in .26s cubic-bezier(.2,.9,.3,1); }
@keyframes screen-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.skeleton { display: grid; gap: 10px; margin: 10px 0; }
.sk-bar {
    height: 68px; border-radius: var(--r-md);
    background: linear-gradient(100deg,
        rgba(34,50,104,.55) 30%, rgba(46,64,128,.85) 50%, rgba(34,50,104,.55) 70%);
    background-size: 220% 100%;
    animation: sk 1.3s linear infinite;
}
@keyframes sk { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* ═══════════════════════════════════════════════════════════════
   Join by code — six boxes + room preview
   ═══════════════════════════════════════════════════════════════ */

.code-boxes { display: flex; gap: 6px; justify-content: center; margin-bottom: 6px; }
.code-box {
    width: 46px; height: 58px; padding: 0; margin: 0;
    background: linear-gradient(180deg, #0B1330, #16224A);
    border: 2.5px solid var(--navy-line);
    border-radius: var(--r-sm);
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.6rem; font-weight: 800; color: var(--gold-hi);
    text-align: center; text-transform: uppercase;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.code-box:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245,194,68,.28), inset 0 2px 8px rgba(0,0,0,.5);
    transform: translateY(-2px);
}
.code-box:not(:placeholder-shown) { border-color: var(--gold-dark); }

.code-preview {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
    border-radius: var(--r-md); margin-top: 0;
}
.code-preview.show {
    max-height: 480px; opacity: 1; margin-top: 12px;
    padding: 14px; border: 2px solid var(--navy-line);
    background: rgba(11,19,48,.65);
}
.code-preview.good { border-color: var(--win); }
.code-preview.warn { border-color: var(--gold-dark); }
.code-preview.bad  { border-color: var(--alert); }

.preview-head {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 10px;
}
.preview-head b {
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.2rem; letter-spacing: 4px; color: var(--gold-hi);
}
.preview-chip {
    background: rgba(245,194,68,.16); border: 1px solid var(--gold-dark);
    border-radius: 20px; padding: 2px 10px;
    font-size: 0.7rem; font-weight: 800; color: var(--gold);
}
.preview-stats { display: flex; gap: 6px; }
.preview-stats span {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    background: rgba(22,34,74,.7); border-radius: var(--r-sm);
    padding: 8px 4px; text-align: center;
    font-size: 0.62rem; font-weight: 700; color: var(--ink-dim);
}
.preview-stats b { font-size: 1.06rem; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   Stake activity
   ═══════════════════════════════════════════════════════════════ */

.stake-live {
    display: block; margin-top: 6px; min-height: 15px;
    font-size: 0.62rem; font-weight: 800; color: var(--ink-dim);
}
.stake-live.on { color: #FFA48C; }

/* ═══════════════════════════════════════════════════════════════
   Result screen
   ═══════════════════════════════════════════════════════════════ */

.winner-portrait {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    margin: 14px 0;
}
.winner-portrait b { color: var(--gold-hi); font-size: 0.95rem; }
.winner-portrait.small {
    flex-direction: row; justify-content: center; gap: 10px;
    background: rgba(11,19,48,.55);
    border: 1px solid var(--navy-line);
    border-radius: var(--r-md); padding: 10px;
    font-size: 0.78rem; font-weight: 600; color: var(--ink-dim);
}
.winner-portrait.small b { font-size: 0.86rem; }

.near-miss { margin: 14px 0 16px; }
.near-miss p { font-size: 0.86rem; font-weight: 600; color: var(--ink-dim); margin-bottom: 8px; }
.near-miss b { color: var(--gold-hi); }
.odds-bar {
    height: 10px; border-radius: 20px; overflow: hidden;
    background: rgba(0,0,0,.4); border: 1.5px solid var(--navy-line);
}
.odds-bar i {
    display: block; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-hi));
    animation: odds-grow .7s cubic-bezier(.2,.9,.3,1);
}
@keyframes odds-grow { from { width: 0 !important; } }

/* ═══════════════════════════════════════════════════════════════
   Stats — rank ladder
   ═══════════════════════════════════════════════════════════════ */

.rank-badge {
    display: inline-block; margin-top: 8px;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-dark));
    border: 2.5px solid var(--gold-deep);
    border-radius: 30px; padding: 6px 16px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; color: #4A3000;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
    box-shadow: 0 4px 0 var(--gold-deep);
}
.rank-track {
    height: 10px; border-radius: 20px; margin-top: 14px;
    background: rgba(0,0,0,.4); border: 1.5px solid var(--navy-line);
    overflow: hidden;
}
.rank-fill {
    height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--grape), var(--gold));
    animation: odds-grow .8s cubic-bezier(.2,.9,.3,1);
}

.winrate { margin-top: 10px; }
.winrate-track {
    height: 9px; border-radius: 20px;
    background: rgba(0,0,0,.4); border: 1.5px solid var(--navy-line);
    overflow: hidden;
}
.winrate-fill {
    height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--win-dark), var(--win));
    animation: odds-grow .8s cubic-bezier(.2,.9,.3,1);
}
.winrate span {
    display: block; margin-top: 6px; text-align: center;
    font-size: 0.78rem; font-weight: 700; color: var(--ink-dim);
}
.winrate b { color: #A6E77C; }

.net-line {
    margin-top: 12px; border-radius: var(--r-md); padding: 10px;
    text-align: center; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; font-weight: 700;
}
.net-line.up   { background: rgba(107,191,58,.15); border: 2px solid var(--win);   color: #A6E77C; }
.net-line.down { background: rgba(232,82,74,.13);  border: 2px solid var(--alert); color: #FF9A93; }

.ref-example {
    background: rgba(11,19,48,.7);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 12px 14px; margin: 12px 0 4px;
    text-align: start;
}
.ref-example > b {
    display: block; margin-bottom: 6px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.78rem; color: var(--gold);
}
.ref-example p {
    font-size: 0.78rem; font-weight: 600; color: var(--ink-dim);
    line-height: 1.9; margin: 0;
}
.ref-example b { color: var(--gold-hi); }

/* ═══════════════════════════════════════════════════════════════
   Top bar, icons, settings, room type
   ═══════════════════════════════════════════════════════════════ */

.topbar { display: flex; justify-content: flex-end; padding: 2px 0 0; }

.icon-btn {
    width: 50px; height: 50px; padding: 10px;
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--gold);
    border-radius: 14px; cursor: pointer;
    box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(0,0,0,.5);
    transition: transform .1s, box-shadow .1s;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.icon-btn svg { width: 100%; height: 100%; fill: var(--gold); display: block; }

/* Menu buttons now carry inline SVG */
.menu button svg {
    width: 24px; height: 24px; display: block; margin: 0 auto 4px;
    fill: var(--gold);
}
.menu button span { display: block; }

.purse-coin svg { width: 24px; height: 24px; fill: #5B3B00; }

/* ─── Language picker ─── */
.lang-list { display: grid; gap: 8px; }
.lang-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: rgba(11,19,48,.7);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 12px 14px;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    font-size: 0.95rem; font-weight: 700; color: var(--ink);
    transition: border-color .15s, background .15s;
}
.lang-row.on { border-color: var(--gold); background: rgba(245,194,68,.1); }
.lang-flag { font-size: 1.38rem; }
.lang-name { flex: 1; text-align: start; }
.lang-check { color: var(--gold); font-size: 1.06rem; font-weight: 800; }

/* ─── Info rows ─── */
.info-rows { display: grid; gap: 6px; }
.info-rows > div {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(11,19,48,.6);
    border-radius: var(--r-sm); padding: 10px 12px;
    font-size: 0.78rem; font-weight: 600; color: var(--ink-dim);
}
.info-rows b { color: var(--gold-hi); font-size: 0.86rem; }

/* ─── Room type cards ─── */
.type-card {
    display: flex; align-items: center; gap: 14px; width: 100%;
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--navy-line);
    border-radius: var(--r-lg); padding: 14px;
    margin-bottom: 10px; cursor: pointer;
    font-family: 'Cairo', sans-serif; text-align: start;
    box-shadow: 0 5px 0 rgba(0,0,0,.5), 0 11px 20px rgba(0,0,0,.35);
    transition: transform .12s, box-shadow .12s, border-color .15s;
}
.type-card:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }

.type-icon {
    width: 52px; height: 52px; flex-shrink: 0; padding: 12px;
    border-radius: 15px; display: grid; place-items: center;
}
.type-icon svg { width: 100%; height: 100%; }
.type-icon.public  { background: rgba(107,191,58,.16); border: 2px solid var(--win); }
.type-icon.public svg { fill: var(--win); }
.type-icon.private { background: rgba(139,92,246,.16); border: 2px solid var(--grape); }
.type-icon.private svg { fill: #A57BFF; }

.type-body { flex: 1; min-width: 0; }
.type-body b {
    display: block; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.06rem; color: var(--gold-hi); margin-bottom: 2px;
}
.type-body small { font-size: 0.78rem; color: var(--ink-dim); font-weight: 600; line-height: 1.55; }

/* RTL flips the arrow padding naturally; nothing else needs mirroring */
[dir="rtl"] .lang-name, [dir="rtl"] .type-body { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   Home — crest / balance / settings, then the two doors
   ═══════════════════════════════════════════════════════════════ */

.crown-row {
    display: grid; grid-template-columns: 50px 1fr 50px;
    align-items: center; gap: 10px;
    margin: 2px 0 0;
}

.crest {
    width: 50px; height: 50px; border-radius: 14px; overflow: hidden;
    border: 2.5px solid var(--gold);
    box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(0,0,0,.5);
}
.crest img { width: 100%; height: 100%; object-fit: cover; display: block; }

.crown-balance {
    text-align: center;
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--gold);
    border-radius: 25px; padding: 4px 14px; height: 50px;
    display: flex; flex-direction: column; justify-content: center;
    box-shadow: 0 4px 0 var(--gold-deep), 0 8px 18px rgba(0,0,0,.45);
}
.crown-balance span {
    display: block; font-size: 0.62rem; font-weight: 800;
    color: var(--ink-dim); letter-spacing: .6px; text-transform: uppercase;
}
.crown-balance b {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.38rem; color: var(--gold-hi); line-height: 1.2;
}
.crown-balance i {
    font-style: normal; font-size: 0.7rem; color: var(--gold-dark);
    margin-inline-start: 4px;
}

/* ─── The two doors ─── */
.doors { display: grid; gap: 10px; margin-bottom: 12px; }

.door {
    display: flex; align-items: center; gap: 12px; width: 100%;
    border: none; border-radius: 18px;
    padding: 10px 12px; cursor: pointer;
    font-family: 'Cairo', sans-serif; text-align: start;
    transition: transform .09s cubic-bezier(.3,.9,.4,1),
                box-shadow .09s, filter .14s;
}
.door:hover { filter: brightness(1.06); }
.door:active { transform: translateY(4px); }

.door-gold {
    background: linear-gradient(177deg, #FFE9A8 0%, var(--gold-hi) 18%,
                var(--gold) 52%, var(--gold-dark) 100%);
    box-shadow: 0 5px 0 var(--gold-deep),
                0 10px 22px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.65),
                inset 0 -2px 4px rgba(138,92,6,.35);
    outline: 2px solid rgba(138,92,6,.55);
    outline-offset: -2px;
}
.door-gold:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold-deep); }
.door-gold .door-body b { color: #4A3000; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.door-gold .door-body small { color: #7A5200; }
.door-gold .door-icon svg { fill: #5B3B00; }

.door-blue {
    background: linear-gradient(177deg, #7FC4F5 0%, #4A9FE8 20%,
                #2C7FCC 55%, #145A9E 100%);
    box-shadow: 0 5px 0 #0E4C8A,
                0 10px 22px rgba(0,0,0,.5),
                inset 0 1px 0 rgba(255,255,255,.55),
                inset 0 -2px 4px rgba(10,58,105,.4);
    outline: 2px solid rgba(14,76,138,.6);
    outline-offset: -2px;
}
.door-blue:active { transform: translateY(4px); box-shadow: 0 1px 0 #0E4C8A; }
.door-blue .door-body b { color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.door-blue .door-body small { color: #CFE6FA; }
.door-blue .door-icon svg { fill: #fff; }

.door-icon {
    width: 52px; height: 52px; flex-shrink: 0; padding: 10px;
    border-radius: 15px; display: grid; place-items: center;
}
.door-icon svg { width: 100%; height: 100%; }

.door-body { flex: 1; min-width: 0; }
.door-body b {
    display: block; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.2rem; line-height: 1.15; letter-spacing: .2px;
}
.door-body small {
    font-size: 0.7rem; font-weight: 700; opacity: .82;
    display: block; margin-top: 1px;
}

/* Mode cards now carry inline SVG */
.mode-icon svg { width: 34px; height: 34px; fill: var(--tint); display: block; }

/* ═══════════════════════════════════════════════════════════════
   Friends list
   ═══════════════════════════════════════════════════════════════ */

.friend-list { display: grid; gap: 6px; }

.friend {
    display: flex; align-items: center; gap: 10px;
    background: rgba(11,19,48,.6);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 8px 10px;
}
.friend.on { border-color: rgba(107,191,58,.5); }

.friend-rank {
    width: 22px; flex-shrink: 0; text-align: center;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.78rem; color: var(--ink-dim);
}
.friend-body { flex: 1; min-width: 0; }
.friend-body b {
    display: block; font-size: 0.86rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friend-body small { font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; }

.friend-earned {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #A6E77C;
    background: rgba(107,191,58,.14);
    border: 1px solid rgba(107,191,58,.35);
    border-radius: 20px; padding: 4px 10px;
}
.friend-earned.dim { color: var(--ink-dim); background: rgba(255,255,255,.05); border-color: var(--navy-line); }

.pager {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 12px;
}
.pager button[disabled] { opacity: .35; pointer-events: none; }
.pager-count { font-size: 0.7rem; font-weight: 700; color: var(--ink-dim); }

/* ═══════════════════════════════════════════════════════════════
   Home layout — artwork on top, controls anchored below
   ═══════════════════════════════════════════════════════════════ */

/* Home fills the viewport: header pinned at the top, controls pinned at the
   bottom, and the artwork gets everything in between — however tall the
   phone happens to be. */
.home {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 50px);
    min-height: calc(100dvh - 50px);
}
.home-spacer { flex: 1 1 auto; min-height: 40px; }
.home-foot { flex: 0 0 auto; padding-bottom: 10px; }

/* ─── Four-up navigation, one row ─── */
.quad-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; margin-top: 10px;
}
.quad {
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 10px 2px 8px; cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-size: 0.62rem; font-weight: 800; color: var(--gold);
    box-shadow: 0 4px 0 rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.35);
    transition: transform .1s, box-shadow .1s;
}
.quad:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.55); }
.quad svg { width: 24px; height: 24px; fill: var(--gold); display: block; margin: 0 auto 4px; }
.quad span { display: block; line-height: 1.2; }

/* ─── Admin — its own strip, quieter than the game controls ─── */
.admin-strip {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px; padding: 12px;
    background: rgba(11,19,48,.85);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    text-decoration: none;
    font-family: 'Cairo', sans-serif;
    font-size: 0.78rem; font-weight: 700; color: var(--ink-dim);
    box-shadow: 0 3px 0 rgba(0,0,0,.5);
    transition: transform .1s, box-shadow .1s, border-color .15s;
}
.admin-strip:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.admin-strip svg { width: 19px; height: 19px; fill: var(--ink-dim); }

/* ─── Door icons: give them a real plate instead of a pale square ─── */
/* No plate behind the icon. The artwork already carries its own colour and
   shading, so a tinted box just boxes it in and shrinks it. */
.door-icon {
    width: 58px; height: 58px; flex-shrink: 0; padding: 0;
    background: none; border: none; box-shadow: none;
    display: grid; place-items: center;
}

.door-icon img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    /* Full opacity always — the artwork carries its own shading, and fading
       it here just makes it look washed out against the button. */
    opacity: 1;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,.45));
}

/* Bigger touch target and a firmer edge on the two main doors */
.door { padding: 16px; border: 2.5px solid rgba(0,0,0,.18); }

/* ═══════════════════════════════════════════════════════════════
   Toggle switch
   ═══════════════════════════════════════════════════════════════ */

.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; gap: 12px;
    background: rgba(11,19,48,.7);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 12px 14px;
    cursor: pointer; font-family: 'Cairo', sans-serif;
    font-size: 0.86rem; font-weight: 700; color: var(--ink);
    transition: border-color .15s;
}
.toggle-row.on { border-color: var(--gold); }

.switch {
    width: 48px; height: 27px; flex-shrink: 0;
    background: rgba(0,0,0,.5);
    border: 2px solid var(--navy-line);
    border-radius: 20px; position: relative;
    transition: background .2s, border-color .2s;
}
.toggle-row.on .switch { background: rgba(245,194,68,.28); border-color: var(--gold); }
.switch i {
    position: absolute; top: 2px; inset-inline-start: 2px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--ink-dim);
    transition: transform .2s cubic-bezier(.3,1.4,.5,1), background .2s;
}
.toggle-row.on .switch i {
    background: var(--gold-hi);
    transform: translateX(21px);
    box-shadow: 0 0 10px rgba(245,194,68,.7);
}
[dir="rtl"] .toggle-row.on .switch i { transform: translateX(-21px); }

/* ═══════════════════════════════════════════════════════════════
   Welcome
   ═══════════════════════════════════════════════════════════════ */

.welcome { text-align: center; padding-top: 8vh; }

.welcome-crest {
    width: 96px; height: 96px; margin: 0 auto 14px;
    border-radius: 24px; overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 5px 0 var(--gold-deep), 0 14px 30px rgba(0,0,0,.55);
    animation: crest-in .6s cubic-bezier(.2,1.3,.35,1);
}
.welcome-crest img { width: 100%; height: 100%; object-fit: cover; display: block; }

.welcome h1 {
    font-size: 1.6rem; color: var(--gold-hi); margin-bottom: 16px;
    text-shadow: 0 2px 0 var(--gold-deep), 0 5px 0 rgba(0,0,0,.5);
}

.welcome-list { margin-bottom: 20px; }
.welcome-list li {
    list-style: none; display: flex; align-items: center; gap: 12px;
    background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 8px;
    text-align: start;
    font-size: 0.86rem; font-weight: 600; color: var(--ink);
    animation: step-in .45s backwards cubic-bezier(.2,.9,.3,1);
}
.welcome-list li:nth-child(1) { animation-delay: .10s; }
.welcome-list li:nth-child(2) { animation-delay: .18s; }
.welcome-list li:nth-child(3) { animation-delay: .26s; }
.welcome-list li:nth-child(4) { animation-delay: .34s; }
@keyframes step-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.welcome-list em {
    width: 30px; height: 30px; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-dark));
    border: 2px solid var(--gold-deep);
    border-radius: 50%;
    font-style: normal; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #4A3000;
}

/* ═══════════════════════════════════════════════════════════════
   Rendered icons
   The artwork already carries its own colour and shading, so it needs a
   drop-shadow rather than a fill, and no tinted plate behind it.
   ═══════════════════════════════════════════════════════════════ */

.icon-btn img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}

.quad img {
    width: 30px; height: 30px; object-fit: contain;
    display: block; margin: 0 auto 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

.mode-icon img {
    width: 42px; height: 42px; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
/* The rendered art brings its own colour — drop the tinted ring behind it */
.mode-icon { background: none; }
.mode-icon::before { border-color: color-mix(in srgb, var(--tint) 45%, transparent); }

.door-icon img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    /* Two shadows: a tight one for definition, a soft one for weight */
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.45))
            drop-shadow(0 5px 9px rgba(0,0,0,.3));
}

/* ─── Header sits flush at the top of the artwork ─── */
.crown-row { margin: 0 0 8px; }

/* ─── The two doors, a touch more compact so the footer group fits ─── */
.doors { gap: 8px; margin-bottom: 8px; }
.door { padding: 12px 14px; }
.door-body b { font-size: 1.38rem; }
.door-icon { width: 50px; height: 50px; padding: 8px; }

/* ─── Footer bar ─── */
.quad-row { margin-top: 0; }
.admin-strip { margin-top: 8px; }

/* ═══════════════════════════════════════════════════════════════
   Page header — back arrow and title share one line
   ═══════════════════════════════════════════════════════════════ */

.page-head {
    display: flex; align-items: center; gap: 10px;
    margin: 2px 0 12px;
}
.page-head h2 {
    flex: 1;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.38rem; color: var(--gold-hi);
    text-shadow: 0 2px 0 var(--gold-deep), 0 4px 8px rgba(0,0,0,.55);
}

.back-round {
    width: 42px; height: 42px; flex-shrink: 0;
    background: linear-gradient(165deg, var(--navy-soft), var(--navy-deep));
    border: 2.5px solid var(--gold);
    border-radius: 13px; cursor: pointer;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.6rem; line-height: 1; color: var(--gold);
    box-shadow: 0 4px 0 var(--gold-deep), 0 8px 16px rgba(0,0,0,.45);
    transition: transform .1s, box-shadow .1s;
}
.back-round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }

/* ═══════════════════════════════════════════════════════════════
   TON coin artwork replaces the drawn discs
   ═══════════════════════════════════════════════════════════════ */

.purse-coin {
    background: none; border: none; box-shadow: none;
    padding: 0; overflow: visible;
}
.purse-coin img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

/* The coin is the same at every tier, so the ring around it carries the
   progression instead — bronze, silver, gold, then gold with gems. */
.stake-coin {
    background: none;
    border: 3px solid var(--c-lo);
    padding: 4px;
    box-shadow: 0 0 16px var(--c-glow);
}
.stake-coin::before,
.stake-coin::after { display: none; }
.stake-coin img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.tier-4 .stake-coin {
    box-shadow: 0 0 26px rgba(255,217,102,.8),
        0 -21px 0 -18px #2E7FD4, 0 21px 0 -18px #2E7FD4,
        -21px 0 0 -18px #2E7FD4, 21px 0 0 -18px #2E7FD4;
}

/* ═══════════════════════════════════════════════════════════════
   Your open room — full detail card
   ═══════════════════════════════════════════════════════════════ */

.notice {
    background: rgba(245,194,68,.12);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 10px 14px; margin-bottom: 10px;
    font-size: 0.78rem; font-weight: 700; color: var(--gold);
    text-align: center; line-height: 1.6;
}

.room-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 12px;
}
.room-plate {
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.38rem; letter-spacing: 5px; color: var(--gold-hi);
    background: rgba(11,19,48,.8);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-sm); padding: 4px 14px;
}
.room-pill {
    font-size: 0.7rem; font-weight: 800;
    border-radius: 20px; padding: 4px 10px;
    background: rgba(255,255,255,.08); color: var(--ink-dim);
    border: 1px solid var(--navy-line);
}
.room-pill.waiting   { background: rgba(255,255,255,.07); }
.room-pill.countdown { background: rgba(245,194,68,.16); color: var(--gold); border-color: var(--gold-dark); }
.room-pill.spinning  { background: rgba(232,82,74,.16);  color: #FF9A93; border-color: var(--alert); }

.room-facts { display: flex; gap: 6px; margin-bottom: 10px; }
.room-facts span {
    flex: 1; display: flex; flex-direction: column; gap: 2px;
    background: rgba(11,19,48,.6);
    border-radius: var(--r-sm); padding: 8px 4px; text-align: center;
    font-size: 0.62rem; font-weight: 700; color: var(--ink-dim);
}
.room-facts b { font-size: 0.95rem; color: var(--ink); }

.room-meta { display: grid; gap: 6px; }
.room-meta > div {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(11,19,48,.5);
    border-radius: var(--r-sm); padding: 8px 12px;
    font-size: 0.78rem; font-weight: 600; color: var(--ink-dim);
}
.room-meta b { color: var(--gold); font-size: 0.78rem; }

/* ─── Who joined ─── */
.joined-list { display: grid; gap: 6px; }
.joined {
    display: flex; align-items: center; gap: 10px;
    background: rgba(11,19,48,.55);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md); padding: 8px 10px;
}
.joined.on { border-color: rgba(107,191,58,.45); }
.joined.empty { border-style: dashed; opacity: .55; }

.joined-body { flex: 1; min-width: 0; }
.joined-body b {
    display: block; font-size: 0.78rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.joined-body small { font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; }

.joined-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: var(--navy-line);
}
.joined-dot.on { background: var(--win); box-shadow: 0 0 8px rgba(107,191,58,.7); }

.av-empty-sm {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    border: 2px dashed var(--navy-line);
    display: grid; place-items: center;
    font-size: 0.95rem; color: var(--navy-line);
}

/* ═══════════════════════════════════════════════════════════════
   Deposit memo code
   ═══════════════════════════════════════════════════════════════ */

.memo-box {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    background: rgba(11,19,48,.8);
    border: 2px dashed var(--gold-dark);
    border-radius: var(--r-md);
    padding: 10px 14px; margin-bottom: 4px;
}
.memo-box span { font-size: 0.7rem; font-weight: 700; color: var(--ink-dim); }
.memo-box b {
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.2rem; letter-spacing: 3px; color: var(--gold-hi);
    cursor: pointer; user-select: all;
}
.memo-box b:active { color: var(--gold); }

/* The stake prompt was colliding with the signboard's drop shadow */
.stake-prompt {
    text-align: center;
    margin: 14px 0 10px;
    position: relative;
    z-index: 1;
    color: var(--ink);
    font-weight: 700;
}

.task.done  { opacity: .5; }

.task-track {
    height: 6px; border-radius: 20px; margin-top: 6px;
    background: rgba(0,0,0,.45); overflow: hidden;
}
.task-track i {
    display: block; height: 100%; border-radius: 20px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-hi));
    transition: width .35s ease;
}
.task-count {
    font-size: 0.62rem; font-weight: 700; color: var(--ink-dim);
    display: block; margin-top: 2px;
}

/* ─── The crest is a button now ─── */
.crest {
    padding: 0; cursor: pointer;
    background: none;
    transition: transform .1s, box-shadow .1s;
}
.crest:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }

/* ─── Unclaimed-reward dot ─── */
.quad { position: relative; }
.quad-dot {
    position: absolute; top: 7px; inset-inline-end: 7px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--alert);
    box-shadow: 0 0 0 2px var(--navy-deep);
    animation: pip 1.5s infinite;
}
.quad-dot[hidden] { display: none; }

/* Channel icon on a task row */

.task.done 
.task.done 

/* ═══════════════════════════════════════════════════════════════
   Podium — final standings
   ═══════════════════════════════════════════════════════════════ */

.podium { display: grid; gap: 6px; margin: 14px 0; }

.podium-row {
    display: flex; align-items: center; gap: 10px;
    background: rgba(11,19,48,.6);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 8px 10px;
    text-align: start;
}
.podium-row.me { border-color: var(--gold); background: rgba(245,194,68,.1); }
.podium-row b {
    flex: 1; min-width: 0; font-size: 0.86rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.podium-place {
    width: 26px; flex-shrink: 0; text-align: center;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; color: var(--ink-dim);
}
.podium-place.p1 { font-size: 1.2rem; }

.podium-amount {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #A6E77C;
    background: rgba(107,191,58,.14);
    border: 1px solid rgba(107,191,58,.35);
    border-radius: 20px; padding: 2px 10px;
}

/* A slice that has already taken a place drops out of the running */
.wheel-slice { transition: opacity .35s ease, filter .35s ease; }
.wheel-slice.won { opacity: .28; filter: grayscale(1); }

/* Places fill in one by one as the wheel resolves them */
.spin-board { display: grid; gap: 6px; margin-top: 12px; }

.spin-hit {
    display: flex; align-items: center; gap: 8px;
    background: rgba(245,194,68,.1);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    padding: 8px 12px;
    font-size: 0.86rem; color: var(--ink);
    animation: hit-in .4s cubic-bezier(.2,1.4,.4,1);
}
.spin-hit b { flex: 1; text-align: start; color: var(--gold-hi); }
.spin-hit span {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    color: #A6E77C; font-size: 0.86rem;
}
@keyframes hit-in {
    from { opacity: 0; transform: translateY(-10px) scale(.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* A slice that has already been claimed dims and stops competing for attention */
.wheel-svg .slice { transition: opacity .4s ease, filter .4s ease; }
.wheel-svg .slice.taken { opacity: .35; filter: saturate(.4); }

.wheel-svg .label { transition: opacity .4s ease; }
.wheel-svg .label.taken { opacity: .4; }

/* Running tally beneath the wheel, one line per place as it is decided */
.spin-board { display: grid; gap: 4px; margin: 10px 0 4px; }

.spin-row {
    display: flex; align-items: center; gap: 8px;
    background: rgba(11,19,48,.7);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    animation: step-in .35s cubic-bezier(.2,.9,.3,1);
}
.spin-row b {
    flex: 1; min-width: 0; text-align: start;
    font-size: 0.78rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spin-amount {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #A6E77C;
    background: rgba(107,191,58,.14);
    border: 1px solid rgba(107,191,58,.35);
    border-radius: 20px; padding: 2px 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Countdown — one big panel, so nothing has to be read off the artwork
   ═══════════════════════════════════════════════════════════════ */

.cd-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100dvh - 40px);
    padding: 8px 0;
}

.cd {
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: linear-gradient(168deg, #223268, #16224A 55%, #0E1836);
    border: 3px solid var(--gold);
    border-radius: var(--r-lg);
    padding: 20px 16px 20px;
    text-align: center;
    box-shadow: 0 6px 0 rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.55),
                inset 0 1px 0 rgba(255,255,255,.12);
}

.cd-head { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cd-badge {
    display: inline-block;
    background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-dark));
    border: 2.5px solid var(--gold-deep);
    border-radius: 30px; padding: 8px 24px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.06rem; font-weight: 800; color: #4A3000;
    text-shadow: 0 1px 0 rgba(255,255,255,.45);
    box-shadow: 0 4px 0 var(--gold-deep);
    animation: pop .5s cubic-bezier(.2,1.5,.4,1);
}
.cd-code {
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.06rem; letter-spacing: 6px; color: var(--gold-hi);
    background: rgba(11,19,48,.9);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-sm); padding: 4px 16px;
}

/* ─── The dial ─── */
.cd-dial {
    position: relative;
    width: min(66vw, 230px);
    aspect-ratio: 1;
}
.cd-dial svg { width: 100%; height: 100%; display: block; }
#cdRing { transition: stroke-dashoffset .12s linear; }

.cd-num {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: clamp(3.2rem, 17vw, 5.2rem); font-weight: 800; line-height: 1;
    color: var(--gold-hi);
    text-shadow: 0 4px 0 var(--gold-deep), 0 8px 0 rgba(0,0,0,.55);
}

.cd-dial.urgent .cd-num {
    color: #FF9A93;
    text-shadow: 0 4px 0 var(--alert-dark), 0 8px 0 rgba(0,0,0,.55);
    animation: tick .95s ease-in-out infinite;
}
.cd-dial.go { animation: dial-go .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes dial-go {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

.cd-label { font-size: 0.86rem; font-weight: 700; color: var(--ink-dim); margin: 0; }

/* ─── Seats ─── */
.cd-seats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cd-seat { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 66px; }
.cd-seat .av {
    width: 52px; height: 52px;
    border-color: var(--win);
    box-shadow: 0 0 0 3px rgba(107,191,58,.28);
}
.cd-seat span {
    font-size: 0.7rem; font-weight: 700; color: #A6E77C;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Prize ─── */
.cd-prize {
    display: flex; align-items: center; gap: 8px;
    background: rgba(11,19,48,.85);
    border: 2px solid var(--gold-dark);
    border-radius: 30px; padding: 8px 20px;
}
.cd-prize span { font-size: 0.7rem; font-weight: 700; color: var(--ink-dim); }
.cd-prize b {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.06rem; color: var(--gold-hi);
}

.cd-fair { max-width: 320px; width: 100%; }

/* The slice under the needle glows the instant it is decided */
.wheel-svg .won {
    filter: drop-shadow(0 0 14px rgba(255,217,102,.95));
    animation: slice-flash .6s ease-out;
}
/* Brightness only — scaling a slice would move it off the wheel */
@keyframes slice-flash {
    0%   { filter: drop-shadow(0 0 4px rgba(255,217,102,.5))  brightness(1); }
    30%  { filter: drop-shadow(0 0 20px rgba(255,217,102,1))  brightness(1.5); }
    100% { filter: drop-shadow(0 0 10px rgba(255,217,102,.8)) brightness(1); }
}

/* ═══════════════════════════════════════════════════════════════
   The wheel
   Everything here is drawn — no images. The slice count changes with the
   room size, so a fixed picture could never fit all three formats.
   ═══════════════════════════════════════════════════════════════ */

.wheel-panel { padding: 16px 12px 16px; }

.wheel-wrap {
    position: relative;
    width: 100%; max-width: 330px;
    margin: 12px auto 4px;
    aspect-ratio: 1;
}
.wheel-svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* The rotor is the only thing that turns; the frame, glass and hub sit still */
.wheel-svg #rotor { will-change: transform; }

/* Slices lose their colour once their place has been decided */
.wheel-svg .slice { transition: opacity .45s ease; }

/* Marquee bulbs chase in three offset groups */
.wheel-svg .bulb {
    filter: drop-shadow(0 0 4px rgba(255,217,102,.9));
    animation: bulb-chase 1.05s steps(1) infinite;
}
.wheel-svg .b0 { animation-delay: 0s; }
.wheel-svg .b1 { animation-delay: .35s; }
.wheel-svg .b2 { animation-delay: .7s; }
@keyframes bulb-chase {
    0%, 33%  { opacity: 1; }
    34%, 99% { opacity: .28; }
}

/* A brief smear while the wheel is at speed, cleared when it settles */
.wheel-wrap.fast .wheel-svg #rotor { filter: blur(.6px); }

/* ─── Needle ─── */
.wheel-needle {
    position: absolute; top: 2%; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-inline: 14px solid transparent;
    border-top: 30px solid #F5C244;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.75));
    z-index: 3;
}
.wheel-needle::before {
    content: ''; position: absolute;
    top: -30px; left: -14px;
    border-inline: 14px solid transparent;
    border-top: 30px solid rgba(255,255,255,.4);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 60%);
}
.wheel-needle::after {
    content: ''; position: absolute;
    top: -40px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #FFF3C4, #F5C244 55%, #9A6606);
    border: 3px solid #6E4604;
    box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 -2px 4px rgba(0,0,0,.3);
}
/* The needle kicks back each time a slice passes under it */
.wheel-needle.tick { animation: needle-kick .12s ease-out; }
@keyframes needle-kick {
    0%   { transform: translateX(-50%) rotate(0deg); }
    45%  { transform: translateX(-50%) rotate(-9deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}

/* ─── Winning slice ─── */
.wheel-svg .won { animation: slice-flash .65s ease-out; }
@keyframes slice-flash {
    0%   { filter: brightness(1)   drop-shadow(0 0 3px rgba(255,217,102,.5)); }
    28%  { filter: brightness(1.6) drop-shadow(0 0 22px rgba(255,217,102,1)); }
    100% { filter: brightness(1)   drop-shadow(0 0 8px rgba(255,217,102,.7)); }
}

.wheel-caption {
    margin-top: 8px;
    font-family: 'Baloo Bhaijaan 2', sans-serif; font-weight: 700;
    font-size: 0.95rem; color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   Home refinements — compact doors, more room for the artwork
   ═══════════════════════════════════════════════════════════════ */

.door { border: none; }
.doors { gap: 8px; margin-bottom: 8px; }

/* The plate rules this used to fight are gone, so no !important is needed */
.door-icon {
    width: 58px; height: 58px; flex-shrink: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    display: grid; place-items: center;
}

/* A soft sheen across the top half sells the moulded plastic look that
   premium mobile games use for primary buttons. */
.door { position: relative; overflow: hidden; }
.door::before {
    content: ''; position: absolute;
    inset: 0 0 52% 0;
    background: linear-gradient(180deg, rgba(255,255,255,.30), transparent);
    pointer-events: none;
}

/* Arena leads; Wallet supports. A faint gold halo does the ranking without
   making the second button look disabled. */
.door-gold { box-shadow: 0 5px 0 var(--gold-deep), 0 10px 22px rgba(0,0,0,.5),
             0 0 26px rgba(245,194,68,.22),
             inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -2px 4px rgba(138,92,6,.35); }
.door-blue .door-body b { font-size: 1.06rem; }

/* Tighter footer so the castle keeps more of the screen */
.quad { padding: 8px 2px 8px; font-size: 0.62rem; }
.quad img { width: 26px; height: 26px; margin-bottom: 4px; }
.quad-row {
    gap: 6px;
    /* Breathing room between the two big doors and the small nav row, so the
       artwork above is not cut off right at the buttons. */
    margin-top: 14px;
}
.admin-strip { margin-top: 8px; padding: 10px; font-size: 0.78rem; }

/* Never let the home screen scroll sideways on a narrow phone */
.home, .doors, .quad-row { max-width: 100%; }
.door-body { overflow: hidden; }
.door-body b, .door-body small {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   Manual deposit — address and memo carry equal weight, because a
   transfer without the memo cannot be attributed to anyone.
   ═══════════════════════════════════════════════════════════════ */

.dep-head { margin: 4px 0 8px; text-align: start; }
.dep-head b {
    display: block;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.95rem; color: var(--gold-hi);
}
.dep-head small { font-size: 0.7rem; color: var(--ink-dim); font-weight: 600; }

.dep-field { margin-bottom: 10px; text-align: start; }
.dep-label {
    display: block; margin-bottom: 4px;
    font-size: 0.7rem; font-weight: 800; color: var(--ink-dim);
    letter-spacing: .3px;
}

.dep-value {
    display: flex; align-items: center; gap: 8px;
    background: rgba(11,19,48,.9);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 10px 12px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.dep-value:active { border-color: var(--gold); background: rgba(245,194,68,.08); }
.dep-value code {
    flex: 1; min-width: 0;
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 0.7rem; color: var(--ink);
    word-break: break-all; line-height: 1.5;
}
.dep-value i { font-style: normal; font-size: 0.95rem; flex-shrink: 0; opacity: .8; }

.dep-field.warn .dep-value { border-color: var(--gold-dark); }
.dep-memo {
    font-size: 1.06rem !important;
    letter-spacing: 2px;
    color: var(--gold-hi) !important;
    font-weight: 800;
}
.dep-warn {
    margin: 6px 0 0;
    font-size: 0.7rem; font-weight: 700; color: #FFC98A; line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   Home doors — icon sits on the button, no plate behind it
   ═══════════════════════════════════════════════════════════════ */

.door {
    gap: 14px;
    padding: 12px 16px 12px;
    border-radius: 20px;
}

/* A thicker moulded edge, closer to the reference */
.door-gold {
    box-shadow: 0 6px 0 var(--gold-deep),
                0 12px 22px rgba(0,0,0,.5),
                inset 0 2px 0 rgba(255,255,255,.7),
                inset 0 -3px 6px rgba(138,92,6,.4);
}
.door-blue {
    box-shadow: 0 6px 0 #0E4C8A,
                0 12px 22px rgba(0,0,0,.5),
                inset 0 2px 0 rgba(255,255,255,.55),
                inset 0 -3px 6px rgba(10,58,105,.45);
}
.door-gold:active, .door-blue:active { transform: translateY(5px); }
.door-gold:active { box-shadow: 0 1px 0 var(--gold-deep); }
.door-blue:active { box-shadow: 0 1px 0 #0E4C8A; }

/* Titles centred against the icon, like the reference */
.door-body b { font-size: 1.38rem; letter-spacing: .3px; }
.door-body small { font-size: 0.7rem; margin-top: 2px; }

/* Nav tiles get the same treatment: bigger icon, no box */
.quad img {
    width: 34px; height: 34px; margin-bottom: 2px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.5))
            drop-shadow(0 4px 7px rgba(0,0,0,.3));
}
.quad { padding: 10px 2px 8px; }

/* Settings button in the header — same, unboxed */
.icon-btn img {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}

/* ═══════════════════════════════════════════════════════════════
   Home doors — icon sits on the button, nothing boxed in
   ═══════════════════════════════════════════════════════════════ */

.door {
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
}

/* The sheen must stay under the icon and the text */
.door::before { z-index: 1; }
.door-body { position: relative; z-index: 2; }

.door-icon { width: 58px; height: 58px; padding: 0; }
.door-icon img { width: 100%; height: 100%; }

.door-body b { font-size: 1.38rem; letter-spacing: .2px; }
.door-body small { font-size: 0.7rem; margin-top: 2px; opacity: .8; }
.door-blue .door-body b { font-size: 1.2rem; }

/* Text sits on a coloured surface, so a hard shadow keeps it legible */
.door-gold .door-body b { text-shadow: 0 2px 0 rgba(255,255,255,.4); }
.door-blue .door-body b { text-shadow: 0 2px 3px rgba(0,0,0,.4); }

/* Navigation icons, matching the doors — no plate, full opacity, bigger */
.quad {
    padding: 10px 2px 8px;
    font-size: 0.62rem;
}
.quad img {
    width: 34px; height: 34px;
    margin: 0 auto 4px;
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

/* Format icons on the Arena page */
.mode-icon { background: none; }
.mode-icon::before { display: none; }
.mode-icon img {
    width: 48px; height: 48px;
    opacity: 1;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}

/* The settings button keeps its frame — it is a control, not artwork */
.icon-btn img { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   Home buttons — icon sits on the button, nothing framing it
   ═══════════════════════════════════════════════════════════════ */

.door {
    gap: 14px;
    padding: 12px 16px 12px 12px;
    border-radius: 20px;
}
.door-icon { width: 58px; height: 58px; }

.door-body b { font-size: 1.2rem; letter-spacing: .1px; }
.door-body small { font-size: 0.7rem; opacity: .88; margin-top: 2px; }

/* Arena reads as the main door, Wallet a step behind it */
.door-gold .door-body b {
    color: #4A3000;
    text-shadow: 0 2px 0 rgba(255,255,255,.5);
}
.door-blue .door-body b {
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0,0,0,.4);
}

/* Bigger nav icons too — same reason, they were shrinking inside padding */
.quad { padding: 10px 2px 8px; }
.quad img {
    width: 32px; height: 32px; margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.quad span { font-size: 0.62rem; }

/* Settings button in the header, matched to the new weight */
.icon-btn img { filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }

/* Format icons on the Arena page */
.mode-icon { width: 52px; height: 52px; }
.mode-icon img {
    width: 48px; height: 48px;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}

/* ═══════════════════════════════════════════════════════════════
   Loading screen — the artwork stays visible; the panel earns its own
   contrast instead of dimming the whole image.
   ═══════════════════════════════════════════════════════════════ */

.ls-body {
    gap: 10px;
    padding: 16px 20px 20px;
    max-width: 340px;
    background: linear-gradient(168deg, rgba(34,50,104,.86), rgba(11,19,48,.94));
    border: 2.5px solid var(--gold-dark);
    border-radius: 26px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 34px rgba(0,0,0,.55),
                inset 0 1px 0 rgba(255,255,255,.14);
}

.ls-crest {
    width: clamp(84px, 26vw, 108px);
    border-radius: 24px;
    margin-bottom: 2px;
}

.ls-title { font-size: clamp(1.7rem, 7.5vw, 2.1rem); letter-spacing: 4px; }
.ls-sub { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; }

/* Track and fill */
.ls-bar { height: 14px; margin-top: 10px; border-radius: 20px; }
.ls-bar i {
    background: linear-gradient(90deg, #C8860D, #F5C244 45%, #FFE9A8);
    box-shadow: 0 0 16px rgba(245,194,68,.9),
                inset 0 1px 0 rgba(255,255,255,.5);
}

.ls-pct {
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 var(--gold-deep), 0 0 20px rgba(245,194,68,.5);
}

/* Sparks drifting up behind the panel — three, not a particle system */
.ls-spark {
    position: absolute; bottom: -10px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-hi);
    box-shadow: 0 0 8px rgba(255,217,102,.9);
    animation: ls-rise 5.5s linear infinite;
    opacity: 0;
}
.ls-spark:nth-child(1) { left: 22%; animation-delay: 0s; }
.ls-spark:nth-child(2) { left: 54%; animation-delay: 1.8s; }
.ls-spark:nth-child(3) { left: 78%; animation-delay: 3.4s; }
@keyframes ls-rise {
    0%   { transform: translateY(0) scale(.6); opacity: 0; }
    12%  { opacity: .9; }
    80%  { opacity: .5; }
    100% { transform: translateY(-58vh) scale(1.1); opacity: 0; }
}

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

/* Spinner shown while membership is being checked. Both buttons are gone at
   that moment, which is what makes a double claim impossible from the UI. */
.task.done  { opacity: .5; }
/* ═══════════════════════════════════════════════════════════════
   Tasks — one clean set, two-tier rows that never overflow
   ═══════════════════════════════════════════════════════════════ */
.page-sub {
    margin: -4px 0 14px;
    font-size: .78rem; font-weight: 600; color: var(--ink-dim);
    text-align: center;
}

.task-intro {
    background: linear-gradient(168deg, #223268, #16224A 60%, #0E1836);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 11px 14px; margin-bottom: 12px;
    text-align: center;
    font-size: .82rem; font-weight: 600; color: var(--ink-dim); line-height: 1.6;
}

.task-list { display: grid; gap: 9px; }
.task-list.dim { opacity: .5; }

.task {
    background: linear-gradient(168deg, #223268, #16224A 62%, #0E1836);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 12px 13px;
    box-shadow: 0 3px 0 rgba(0,0,0,.4);
}
.task.ready { border-color: var(--gold); box-shadow: 0 3px 0 var(--gold-deep), 0 0 18px rgba(245,194,68,.15); }
.task.done  { opacity: .55; }
.task.cooldown { border-color: rgba(139,92,246,.45); }

/* Header: icon · title+sub · reward */
.task-head { display: flex; align-items: flex-start; gap: 11px; }

.task-icon {
    width: 40px; height: 40px; flex-shrink: 0; padding: 8px;
    background: rgba(245,194,68,.12);
    border: 2px solid var(--gold-dark);
    border-radius: 11px;
    display: grid; place-items: center;
}
.task-icon svg { width: 100%; height: 100%; fill: var(--gold); }
.task.done .task-icon { border-color: var(--navy-line); background: rgba(255,255,255,.04); }
.task.done .task-icon svg { fill: var(--ink-dim); }

.task-body { flex: 1; min-width: 0; }
.task-body b {
    display: block; font-size: .88rem; color: var(--ink); line-height: 1.35;
}
.task-body small {
    display: block; margin-top: 3px;
    font-size: .7rem; color: var(--ink-dim); font-weight: 600; line-height: 1.4;
}

.task-reward {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .84rem; color: var(--gold-hi);
    background: rgba(245,194,68,.14);
    border: 1px solid var(--gold-dark);
    border-radius: 999px; padding: 3px 9px;
}
.task.done .task-reward { color: var(--ink-dim); background: rgba(255,255,255,.05); border-color: var(--navy-line); }

/* The tag to copy into a name */
.task-tag {
    display: block; margin: 9px 0 0;
    background: rgba(11,19,48,.9);
    border: 2px dashed var(--gold-dark);
    border-radius: var(--r-sm);
    padding: 7px 12px; cursor: pointer; text-align: center;
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: .82rem; color: var(--gold-hi); letter-spacing: .5px;
}
.task-tag:active { border-style: solid; background: rgba(245,194,68,.1); }

/* Action row — full width under the header, never overflows */
.task-action { margin-top: 10px; }
.task-btns { display: flex; gap: 7px; }
.task-btns .btn { flex: 1; }

.task-tick {
    display: block; text-align: center;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .8rem; color: var(--win);
    padding: 6px; opacity: .8;
}
.task-timer {
    display: block; text-align: center;
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: .95rem; color: #B79BF5;
    background: rgba(139,92,246,.12);
    border: 1px solid rgba(139,92,246,.4);
    border-radius: 999px; padding: 6px; letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.task-spin {
    display: block; width: 22px; height: 22px; margin: 4px auto;
    border: 2.5px solid rgba(245,194,68,.22);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: task-spin .8s linear infinite;
}
@keyframes task-spin { to { transform: rotate(360deg); } }

.daily-chip {
    display: inline-block; vertical-align: middle;
    margin-inline-start: 6px;
    background: linear-gradient(180deg, var(--grape), #6B46C1);
    border-radius: 999px; padding: 1px 8px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .58rem; color: #fff; letter-spacing: .5px; text-transform: uppercase;
}

.task-done-head {
    margin: 18px 0 9px;
    display: flex; align-items: center; gap: 10px;
}
.task-done-head span {
    background: rgba(11,19,48,.92);
    border: 1.5px solid var(--navy-line);
    border-radius: 999px; padding: 5px 14px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .72rem; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap;
}
.task-done-head::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--navy-line), transparent);
}

.task-empty {
    background: linear-gradient(168deg, #223268, #16224A 60%, #0E1836);
    border: 2.5px solid var(--navy-line);
    border-radius: var(--r-lg);
    padding: 34px 20px; text-align: center;
    box-shadow: 0 5px 0 rgba(0,0,0,.45);
}
.task-empty-mark {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(107,191,58,.14);
    border: 2.5px solid var(--win);
    font-size: 1.7rem; color: var(--win);
}
.task-empty p { font-size: .88rem; color: var(--ink-dim); font-weight: 600; }

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

/* ═══════════════════════════════════════════════════════════════
   Loading — no logo, no panel. Just the artwork, the name and the bar.
   ═══════════════════════════════════════════════════════════════ */

.ls-body {
    background: none;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    padding: 0 24px;
    gap: 8px;
    max-width: 380px;
}

.ls-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
    letter-spacing: 5px;
    text-shadow: 0 3px 0 var(--gold-deep), 0 6px 0 rgba(0,0,0,.6),
                 0 0 40px rgba(245,194,68,.55);
}
.ls-sub {
    font-size: 0.7rem; letter-spacing: 3px;
    color: rgba(255,255,255,.72);
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
    margin-top: -2px;
}

/* Track: thicker, with the gold frame the rest of the app uses */
.ls-bar {
    height: 16px;
    margin-top: 16px;
    border: 2.5px solid var(--gold-deep);
    background: rgba(6,12,30,.75);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.7),
                0 3px 0 rgba(0,0,0,.5);
}
.ls-bar i {
    background: linear-gradient(90deg, #C8860D, #F5C244 40%, #FFE9A8 75%, #FFF6D6);
    box-shadow: 0 0 18px rgba(245,194,68,.95),
                inset 0 1px 0 rgba(255,255,255,.6);
}

.ls-pct {
    font-size: 1.38rem;
    letter-spacing: 2px;
    text-shadow: 0 2px 0 var(--gold-deep), 0 4px 10px rgba(0,0,0,.7);
}

/* The glow belonged behind the logo; without one it just washes the scene */
.ls-glow { display: none; }

/* The exact text to copy into a Telegram name — tappable, monospaced */

/* A sponsored room reads as a giveaway, not a cheap stake */
.free-tag {
    display: inline-block;
    background: linear-gradient(180deg, var(--win), var(--win-dark));
    border: 1.5px solid rgba(0,0,0,.35);
    border-radius: 20px;
    padding: 1px 8px;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.7rem; color: #0E1836;
    letter-spacing: .5px;
    box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* ═══════════════════════════════════════════════════════════════
   Free rooms — its own entry under the three formats, because a
   giveaway is not a stake tier and does not belong beside them.
   ═══════════════════════════════════════════════════════════════ */

.free-card {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin-top: 14px; padding: 12px 14px;
    background: linear-gradient(160deg, #1E4A2E, #123A22 55%, #0B2416);
    border: 2.5px solid var(--win);
    border-radius: var(--r-lg);
    cursor: pointer; text-align: start;
    font-family: 'Cairo', sans-serif;
    box-shadow: 0 5px 0 #0A2413, 0 10px 22px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform .1s, box-shadow .1s;
}
.free-card:active { transform: translateY(4px); box-shadow: 0 1px 0 #0A2413; }

.free-icon {
    font-size: 2rem; flex-shrink: 0;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.5));
}
.free-body { flex: 1; min-width: 0; }
.free-body b {
    display: block;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.2rem; color: #C8F5A8;
    text-shadow: 0 2px 3px rgba(0,0,0,.5);
}
.free-body small {
    display: block; margin-top: 1px;
    font-size: 0.7rem; font-weight: 700; color: rgba(200,245,168,.72);
}

/* Count badge — hidden entirely when there is nothing to show */
.free-count {
    flex-shrink: 0; min-width: 26px; height: 26px;
    display: none; place-items: center;
    border-radius: 50%;
    background: var(--gold); border: 2px solid var(--gold-deep);
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 0.86rem; color: #4A3000;
}
.free-count.on { display: grid; animation: pop .4s cubic-bezier(.2,1.5,.4,1); }

/* Room cards in the list */
.free-room { border-color: rgba(107,191,58,.45); }
.free-room .room-plate { color: #C8F5A8; border-color: var(--win); }

/* ═══════════════════════════════════════════════════════════════
   Depth and rhythm
   Same palette throughout — what changes is how surfaces relate to each
   other. A flat interface where every box shares one radius and one shadow
   reads as generated; a real one has a clear order of importance.
   ═══════════════════════════════════════════════════════════════ */

/* Panels are the largest surface: roundest, deepest shadow */
.panel { border-radius: var(--r-lg); }

/* Rows inside a panel sit one level in: tighter, shallower */
.friend, .task, .joined, .podium-row, .spin-row,
.info-rows > div, .lang-row, .toggle-row, .dep-value {
    border-radius: var(--r-md);
}

/* Chips and badges are the smallest: barely rounded, no shadow of their own */
.chip, .task-tag, .room-plate, .preview-chip {
    border-radius: var(--r-sm);
}
.task-reward, .friend-earned, .podium-amount, .spin-amount,
.free-tag, .partner-badge, .live-tag {
    border-radius: 999px;   /* pills stay pills */
}

/* ── Typographic contrast ────────────────────────────────────── */
/* Display type was only ~1.3× body size. Widening that gap is what makes a
   screen feel designed rather than uniformly medium. */
.signboard {
    font-size: 1.32rem;
    letter-spacing: .3px;
}
.panel-title {
    font-size: .78rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    opacity: .85;
}
.note { line-height: 1.7; }

/* ── The divider inside panels ───────────────────────────────── */
/* A plain 1px line is the most generic separator there is. This one fades
   from the gold edge inward, matching the frames around it. */
.divider {
    height: 1px; border: none; margin: 14px 0;
    background: linear-gradient(90deg,
        transparent, rgba(200,134,13,.55) 22%,
        rgba(200,134,13,.55) 78%, transparent);
}

/* ── Spinners ────────────────────────────────────────────────── */
/* An emoji spun with a transform is a placeholder, not an interface. */

.spin-coin {
    width: 44px; height: 44px;
    border: 3px solid rgba(245,194,68,.2);
    border-top-color: var(--gold);
    border-radius: 50%;
    font-size: 0;
    animation: task-spin .9s linear infinite;
}

/* ── Empty states ────────────────────────────────────────────── */
/* A large emoji floating in space is the clearest tell of a generated
   screen. A framed mark reads as part of the same object as the rest. */
.empty-icon {
    display: grid; place-items: center;
    width: 66px; height: 66px; margin: 0 auto 14px;
    border: 2.5px dashed var(--navy-line);
    border-radius: 50%;
    font-size: 1.6rem;
    opacity: .75;
}

/* ── Motion ──────────────────────────────────────────────────── */
/* One easing curve everywhere makes every element feel like the same
   element. Entrances overshoot slightly; exits and progress do not. */
.panel { animation: none; }

/* Waiting on a payment: the TON mark held inside a turning ring, so the
   thing being waited for stays visible instead of being replaced by a
   generic spinner. */
.coin-wait {
    position: relative;
    width: 62px; height: 62px;
    margin: 0 auto 14px;
    display: grid; place-items: center;
}
.coin-wait::before {
    content: ''; position: absolute; inset: 0;
    border: 3px solid rgba(245,194,68,.18);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: task-spin .9s linear infinite;
}
.coin-wait img {
    width: 62%; height: 62%; object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}

@media (prefers-reduced-motion: reduce) {
    .coin-wait::before, .spin-coin, .task-spin { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Radius by role, not by habit
   Thirty-three different elements shared one value. Buttons, inputs and
   list rows are not the same kind of object and should not read as one.
   ═══════════════════════════════════════════════════════════════ */

/* Controls: crisper than content */
.btn            { border-radius: var(--r-sm); }
.btn-big        { border-radius: 14px; }
input, textarea { border-radius: var(--r-sm); }

/* Transient overlays sit above everything, so they are the roundest */
.toast          { border-radius: var(--r-xl); }

/* Selection targets stay in the middle band */
.tile, .menu button, .room, .lang-row { border-radius: var(--r-md); }

/* Read-only blocks are squarer — they are surfaces, not things to press */
.ref-link, .fee-preview, .code-plate, .locked,
.ref-example, .net-line, .sk-bar {
    border-radius: var(--r-sm);
}

/* The ticker is a thin strip; a large radius on it just looks like a mistake */
.ticker { border-radius: 10px; }

/* Page titles sit directly on the artwork, and the castle stone behind them
   is nearly the same value as the gold. A deeper shadow keeps them legible
   without putting a panel around every heading. */
.page-head h2 {
    text-shadow: 0 2px 0 var(--gold-deep),
                 0 3px 10px rgba(0,0,0,.85),
                 0 0 22px rgba(0,0,0,.65);
}
.signboard { text-shadow: 0 2px 0 var(--gold-deep), 0 4px 12px rgba(0,0,0,.8); }

/* ═══════════════════════════════════════════════════════════════
   Referral reward line — states the payout in one clear row
   ═══════════════════════════════════════════════════════════════ */
.ref-reward-line {
    display: flex; align-items: center; gap: 10px;
    margin-top: 11px; padding: 11px 13px;
    background: rgba(107,191,58,.1);
    border: 2px solid rgba(107,191,58,.4);
    border-radius: var(--r-md);
    font-size: .8rem; font-weight: 600; color: var(--ink-dim);
}
.rrl-amt {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .92rem; color: #A6E77C;
    background: rgba(107,191,58,.16);
    border: 1px solid var(--win);
    border-radius: 999px; padding: 3px 11px;
}

/* ═══════════════════════════════════════════════════════════════
   Daily task — badge and live countdown
   ═══════════════════════════════════════════════════════════════ */

/* A claimed daily task sits in a resting state, not the faded "done" one —
   it is coming back, so it should not look finished. */

/* ═══════════════════════════════════════════════════════════════
   Giveaway — creation and share
   ═══════════════════════════════════════════════════════════════ */

.giveaway-card {
    background: linear-gradient(160deg, #4A2E5E, #3A1E4E 55%, #2A1440);
    border-color: var(--grape);
    box-shadow: 0 5px 0 #1E0E30, 0 10px 22px rgba(0,0,0,.45),
                inset 0 1px 0 rgba(255,255,255,.14);
}
.giveaway-card:active { box-shadow: 0 1px 0 #1E0E30; }
.giveaway-card .free-body b { color: #E4C8F5; }
.giveaway-card .free-body small { color: rgba(228,200,245,.72); }
.free-go {
    margin-inline-start: auto; flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.6rem; color: rgba(255,255,255,.5);
}

.gv-hero {
    text-align: center; font-size: 2.8rem; margin: 4px 0 10px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
    animation: pop .5s cubic-bezier(.2,1.5,.4,1);
}

.gv-label {
    display: block; margin: 12px 0 6px;
    font-size: .74rem; font-weight: 800; color: var(--ink-dim);
    letter-spacing: .4px; text-transform: uppercase;
}
.gv-chips { display: flex; gap: 7px; margin-bottom: 8px; }

.gv-split {
    margin: 12px 0;
    padding: 11px 14px;
    background: rgba(245,194,68,.1);
    border: 2px solid var(--gold-dark);
    border-radius: var(--r-md);
    text-align: center;
    font-size: .85rem; font-weight: 600; color: var(--ink);
}
.gv-split b { color: var(--gold-hi); }
.gv-split:empty { display: none; }

/* Share screen */
.gv-share { text-align: center; }
.gv-code {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0;
    background: rgba(11,19,48,.9);
    border: 2px dashed var(--gold);
    border-radius: var(--r-md);
    padding: 12px 15px; cursor: pointer;
}
.gv-code span {
    font-size: .68rem; font-weight: 800; color: var(--ink-dim);
    text-transform: uppercase; letter-spacing: .5px;
}
.gv-code b {
    flex: 1; text-align: center;
    font-family: 'Baloo Bhaijaan 2', monospace;
    font-size: 1.5rem; letter-spacing: 6px; color: var(--gold-hi);
}
.gv-code i { font-style: normal; font-size: 1.1rem; opacity: .8; }
.gv-code:active { border-style: solid; background: rgba(245,194,68,.1); }

/* SVG icons on the Free / Giveaway cards, matched to the card's own colour */
.free-icon.svg {
    display: grid; place-items: center;
    width: 44px; height: 44px; flex-shrink: 0;
}
.free-icon.svg svg { width: 100%; height: 100%; }
.free-card .free-icon.svg svg { fill: #C8F5A8; }
.giveaway-card .free-icon.svg svg { fill: #E4C8F5; }

/* Giveaway → post into a channel */
.gv-channel { text-align: start; margin: 4px 0; }
.gv-chan-warn {
    margin-top: 10px; padding: 10px 13px;
    background: rgba(245,197,66,.1);
    border: 1.5px solid var(--gold-dark);
    border-radius: var(--r-sm);
    font-size: .78rem; color: #F5DFA0; line-height: 1.5;
}
.gv-chan-ok {
    margin-top: 10px; padding: 10px 13px;
    background: rgba(107,191,58,.12);
    border: 1.5px solid var(--win);
    border-radius: var(--r-sm);
    font-size: .82rem; color: #A6E77C; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   History lists — withdrawals and giveaways
   ═══════════════════════════════════════════════════════════════ */
.hist-list { display: grid; gap: 8px; }
.hist-row {
    display: flex; align-items: center; gap: 12px;
    background: rgba(11,19,48,.6);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 11px 13px;
}
.hist-main { flex: 1; min-width: 0; }
.hist-main b {
    display: block;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .95rem; color: var(--ink);
}
.hist-main small {
    display: block; margin-top: 2px;
    font-size: .68rem; color: var(--ink-dim); font-weight: 600;
}
.hist-badge {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .72rem; border-radius: 999px; padding: 4px 11px;
}
.hist-badge.ok   { color: #A6E77C; background: rgba(107,191,58,.14); border: 1px solid var(--win); }
.hist-badge.wait { color: var(--gold-hi); background: rgba(245,194,68,.12); border: 1px solid var(--gold-dark); }
.hist-badge.no   { color: #FF9A93; background: rgba(232,82,74,.12); border: 1px solid var(--alert); }

/* Tappable history rows — open the room to see who joined / won */
.hist-row.tappable { cursor: pointer; transition: border-color .15s, background .15s; }
.hist-row.tappable:active { border-color: var(--gold); background: rgba(245,194,68,.08); }
.hist-arrow {
    flex-shrink: 0; font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1.3rem; color: var(--ink-dim); opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════
   List draw — slot-machine reel for big rooms (11+ players)
   Only a window of rows is visible, so 100 players cost no more than 12.
   ═══════════════════════════════════════════════════════════════ */

.list-draw { padding: 16px 12px 18px; }

.reel-wrap {
    position: relative;
    width: 100%; max-width: 340px;
    height: 224px;                     /* 4 rows tall */
    margin: 12px auto 4px;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, #0B1330, #16224A 50%, #0B1330);
    border: 3px solid var(--gold);
    box-shadow: inset 0 0 30px rgba(0,0,0,.7), 0 6px 20px rgba(0,0,0,.5);
}

.reel { position: absolute; top: 0; left: 0; right: 0; will-change: transform; }

.reel-row {
    position: absolute; left: 0; right: 0; height: 56px;
    display: flex; align-items: center; gap: 12px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.reel-row .av { width: 36px; height: 36px; flex-shrink: 0; }
.reel-row b {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: 1rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel-row.reel-won {
    background: linear-gradient(90deg, rgba(245,194,68,.25), rgba(245,194,68,.05));
}
.reel-row.reel-won b { color: var(--gold-hi); }

/* Centre marker — the winning line */
.reel-marker {
    position: absolute; top: 50%; left: 0; right: 0; height: 56px;
    transform: translateY(-50%);
    border-top: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    background: rgba(245,194,68,.06);
    pointer-events: none; z-index: 3;
    box-shadow: 0 0 20px rgba(245,194,68,.3);
}
.reel-marker::before, .reel-marker::after {
    content: '\25c0'; position: absolute; top: 50%; transform: translateY(-50%);
    color: var(--gold-hi); font-size: .9rem;
}
.reel-marker::before { left: 6px; }
.reel-marker::after { right: 6px; content: '\25b6'; }

/* Fades top and bottom so rows appear to emerge and vanish */
.reel-fade {
    position: absolute; left: 0; right: 0; height: 70px;
    pointer-events: none; z-index: 2;
}
.reel-fade.top    { top: 0;    background: linear-gradient(180deg, #0B1330, transparent); }
.reel-fade.bottom { bottom: 0; background: linear-gradient(0deg, #0B1330, transparent); }

/* ═══════════════════════════════════════════════════════════════
   Channel gate — join required channels before a free entry
   ═══════════════════════════════════════════════════════════════ */
.gate-list { display: grid; gap: 9px; margin: 12px 0 4px; }
.gate-row {
    display: flex; align-items: center; gap: 11px;
    background: rgba(11,19,48,.7);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    padding: 10px 12px;
}
.gate-icon {
    width: 34px; height: 34px; flex-shrink: 0; padding: 7px;
    background: rgba(245,194,68,.12);
    border: 2px solid var(--gold-dark);
    border-radius: 10px;
    display: grid; place-items: center;
}
.gate-icon svg { width: 100%; height: 100%; fill: var(--gold); }
.gate-row b {
    flex: 1; min-width: 0;
    font-size: .86rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gate-row .btn { flex-shrink: 0; text-decoration: none; }

/* An unpaid seat — anonymous until the stake is paid */
.seat.joining { opacity: .6; }
.seat.joining .av-empty {
    border-style: solid;
    border-color: var(--gold-dark);
    color: var(--gold-dark);
}
.seat.joining span { color: var(--ink-dim); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   Free rooms — Live / History segmented tabs
   ═══════════════════════════════════════════════════════════════ */
.seg-tabs {
    display: flex; gap: 8px; margin-bottom: 14px;
}
.seg {
    flex: 1; padding: 10px; cursor: pointer;
    background: rgba(11,19,48,.7);
    border: 2px solid var(--navy-line);
    border-radius: var(--r-md);
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .85rem; color: var(--ink-dim);
    transition: all .15s;
}
.seg.on {
    background: linear-gradient(180deg, var(--gold-hi), var(--gold-dark));
    border-color: var(--gold-deep);
    color: #4A3000;
    box-shadow: 0 3px 0 var(--gold-deep);
}
.seg:active { transform: translateY(1px); }

/* Finished giveaway card — tappable, shows winners */
.free-room.done { cursor: pointer; transition: border-color .15s; }
.free-room.done:active { border-color: var(--gold); }

.fh-winners { display: grid; gap: 6px; margin-top: 10px; }
.fh-row {
    display: flex; align-items: center; gap: 9px;
    background: rgba(11,19,48,.5);
    border: 1.5px solid var(--navy-line);
    border-radius: var(--r-sm);
    padding: 7px 10px;
}
.fh-row.me { border-color: var(--gold); background: rgba(245,194,68,.1); }
.fh-place { width: 24px; text-align: center; font-size: 1rem; flex-shrink: 0; }
.fh-row b {
    flex: 1; min-width: 0; font-size: .84rem; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fh-amount {
    flex-shrink: 0;
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    font-size: .82rem; color: #A6E77C;
    background: rgba(107,191,58,.14);
    border: 1px solid var(--win);
    border-radius: 999px; padding: 2px 9px;
}

/* ═══════════════════════════════════════════════════════════════
   Referral gate — invite N friends to enter a free room
   ═══════════════════════════════════════════════════════════════ */
.ref-gate-count {
    font-family: 'Baloo Bhaijaan 2', sans-serif;
    margin: 8px 0 4px; line-height: 1;
}
.ref-gate-count b { font-size: 3rem; color: var(--gold-hi); }
.ref-gate-count span { font-size: 1.4rem; color: var(--ink-dim); margin-inline-start: 4px; }

.ref-gate-bar {
    height: 10px; margin: 14px 0 18px;
    background: rgba(11,19,48,.8);
    border: 1.5px solid var(--navy-line);
    border-radius: 999px; overflow: hidden;
}
.ref-gate-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold-hi));
    border-radius: 999px;
    transition: width .4s ease;
}