/* ==========================================================================
   LUCKY550 — Casino / Lottery Board Theme
   Gold / Red / Green · Maximum motion · CSS-only (zero markup changes)
   ========================================================================== */

:root {
    /* Casino palette */
    --bg:           #0a0506;
    --bg-2:         #150708;
    --felt:         #0e3a2a;
    --felt-2:       #082018;
    --gold:         #f5c542;
    --gold-2:       #ffd76e;
    --gold-deep:    #c89623;
    --red:          #d62029;
    --red-deep:     #8e0e15;
    --green:        #1fa45f;
    --green-deep:   #0b6b3a;
    --cream:        #fff5dc;
    --ink:          #0d0608;
    --muted:        #b8a07a;
    --accent:       var(--gold);
    --accent-2:     var(--red);
    --radius:       14px;
    --radius-lg:    20px;
    --ease:         cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--cream);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--gold-2); text-decoration: none; }
a:hover { color: var(--gold); }

/* ============== Ambient stage lights ============== */
.ambient {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 197, 66, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 40% at 0% 30%, rgba(214, 32, 41, 0.15), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 30%, rgba(31, 164, 95, 0.13), transparent 60%),
        radial-gradient(ellipse 90% 60% at 50% 110%, rgba(245, 197, 66, 0.10), transparent 70%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    animation: ambient-pulse 9s ease-in-out infinite alternate;
}
.ambient::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        radial-gradient(rgba(245,197,66,.04) 1px, transparent 1px),
        radial-gradient(rgba(245,197,66,.025) 1px, transparent 1px);
    background-size: 22px 22px, 13px 13px;
    background-position: 0 0, 7px 11px;
    opacity: .55;
    animation: drift 60s linear infinite;
}
@keyframes ambient-pulse {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    100% { filter: hue-rotate(8deg) brightness(1.07); }
}
@keyframes drift {
    from { background-position: 0 0, 7px 11px; }
    to   { background-position: 200px 100px, 207px 111px; }
}

/* ============== Header ============== */
.app-header {
    position: sticky; top: 0; z-index: 50;
    padding: 0;
    background: linear-gradient(180deg, rgba(20,7,9,.95), rgba(15,5,7,.85));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(245, 197, 66, 0.25);
    box-shadow: 0 6px 28px rgba(0,0,0,.55), 0 1px 0 rgba(245, 197, 66, 0.15) inset;
    display: flex;
    flex-direction: column;   /* ← stack hdr-inner / game-pills / ticker vertically */
    align-items: stretch;
}
.app-header::after {
    content: ''; position: absolute;
    left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-deep) 15%, var(--gold) 50%, var(--gold-deep) 85%, transparent 100%);
    opacity: .6;
    background-size: 200% 100%;
    animation: shimmer-line 4s linear infinite;
}
@keyframes shimmer-line {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Cinzel', 'Inter', serif;
    font-weight: 900; font-size: 22px;
    letter-spacing: .12em;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(245, 197, 66, .55), 0 0 22px rgba(245, 197, 66, .25);
    text-transform: uppercase;
}
.brand .dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 12px var(--green), 0 0 22px rgba(31,164,95,.6);
    animation: dot-pulse 1.6s ease-in-out infinite;
}
.brand.standby .dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); animation-duration: 2.4s; }
.brand.offline .dot { background: var(--red);  box-shadow: 0 0 12px var(--red);  animation: none; opacity: .7; }
@keyframes dot-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.35); opacity: .6; }
}

.nav-links { display: flex; gap: 6px; }
.nav-links a {
    padding: 8px 14px; border-radius: 10px;
    color: var(--cream); font-weight: 600; font-size: 14px;
    letter-spacing: .04em;
    border: 1px solid transparent;
    transition: all .25s var(--ease);
}
.nav-links a:hover {
    border-color: rgba(245, 197, 66, 0.45);
    background: rgba(245, 197, 66, 0.08);
    color: var(--gold-2);
    text-shadow: 0 0 8px rgba(245, 197, 66, .5);
}

/* ============== Ticker / marquee ============== */
.ticker {
    overflow: hidden;
    background: linear-gradient(90deg, var(--red-deep), #4a0b10, var(--red-deep));
    border-top: 1px solid rgba(245, 197, 66, 0.4);
    border-bottom: 1px solid rgba(245, 197, 66, 0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -8px 20px rgba(0,0,0,.4);
    position: relative;
}
.ticker::before, .ticker::after {
    content: ''; position: absolute;
    top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--red-deep), transparent); }
.ticker::after  { right: 0; background: linear-gradient(-90deg, var(--red-deep), transparent); }

.ticker-track {
    display: inline-flex; gap: 50px;
    padding: 10px 0;
    white-space: nowrap;
    animation: ticker-scroll 38s linear infinite;
    font-weight: 600; font-size: 13.5px;
    color: var(--gold-2);
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.ticker-track span { display: inline-flex; align-items: center; gap: 8px; }
.ticker-track span::before {
    content: '★'; color: var(--gold); margin-right: 4px;
    text-shadow: 0 0 6px var(--gold);
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ============== Layout ============== */
.wrap, .container, main { max-width: 1280px; margin: 0 auto; padding: 18px; }
.section { margin: 32px 0; }
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding: 0 4px;
}
.section-head h3 {
    margin: 0;
    font-family: 'Cinzel', 'Inter', serif;
    font-weight: 700;
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--gold); font-size: 18px;
    text-shadow: 0 0 12px rgba(245, 197, 66, .35);
}
.section-head h3::before {
    content: '◆'; color: var(--red); margin-right: 10px; font-size: 14px;
}
.section-head .more {
    color: var(--gold-2); font-size: 13px; font-weight: 600;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid rgba(245, 197, 66, .35);
    transition: all .25s var(--ease);
}
.section-head .more:hover {
    background: rgba(245, 197, 66, .1);
    box-shadow: 0 0 18px rgba(245, 197, 66, .35);
}

/* ============== HERO board ============== */
.hero {
    position: relative;
    margin: 24px 0 8px;
    padding: 28px 24px 32px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 197, 66, .14), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(214, 32, 41, .14), transparent 65%),
        linear-gradient(180deg, var(--felt), var(--felt-2));
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 30px 90px rgba(0,0,0,.6),
        0 0 0 1px rgba(245, 197, 66, .25) inset,
        0 0 80px rgba(214, 32, 41, .15) inset;
    overflow: hidden;
    isolation: isolate;
}
.hero::before {
    content: ''; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        var(--gold) 0deg, var(--gold-deep) 60deg,
        var(--red) 120deg, var(--gold-deep) 180deg,
        var(--gold) 240deg, var(--green) 300deg, var(--gold) 360deg);
    animation: hero-spin 12s linear infinite;
    filter: blur(.5px);
}
.hero::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 215, 110, .07), transparent 40%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
    pointer-events: none; z-index: 0;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }

.hero-head {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.hero-title {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 14px; font-weight: 700;
    letter-spacing: .35em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 14px rgba(245, 197, 66, .55);
}

.studio-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--green), var(--green-deep));
    border: 2px solid rgba(255, 215, 110, .55);
    box-shadow: 0 4px 18px rgba(31, 164, 95, .5), inset 0 1px 0 rgba(255,255,255,.25);
    font-weight: 800; font-size: 12.5px;
    letter-spacing: .15em; text-transform: uppercase;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5);
    animation: pill-glow 2.5s ease-in-out infinite alternate;
}
.studio-pill.standby {
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    box-shadow: 0 4px 18px rgba(245, 197, 66, .55), inset 0 1px 0 rgba(255,255,255,.3);
    color: var(--ink); text-shadow: none;
}
.studio-pill.offline {
    background: linear-gradient(180deg, #555, #2a2a2a);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
    border-color: rgba(180,180,180,.3); animation: none;
}
@keyframes pill-glow {
    from { filter: brightness(1)    drop-shadow(0 0 6px rgba(31, 164, 95, .4)); }
    to   { filter: brightness(1.15) drop-shadow(0 0 16px rgba(31, 164, 95, .8)); }
}
.studio-pill .blip {
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 16px rgba(255,255,255,.7);
    animation: blip-flash 1s ease-in-out infinite;
}
@keyframes blip-flash {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .4; transform: scale(.7); }
}

.hero-board {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 900px) {
    .hero-board { grid-template-columns: 1.4fr 1fr; }
}

/* ============== Studio stage ============== */
.studio-stage {
    position: relative;
    padding: 32px 22px 28px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 215, 110, .12), transparent 65%),
        linear-gradient(180deg, #1a0a0c, #0c0405);
    border: 2px solid var(--gold-deep);
    box-shadow:
        0 0 0 6px var(--bg-2),
        0 0 0 8px var(--gold-deep),
        0 0 40px rgba(245, 197, 66, .25),
        inset 0 4px 12px rgba(0,0,0,.6);
    text-align: center;
}
/* Marquee bulb ring */
.studio-stage::before {
    content: ''; position: absolute; inset: -4px;
    border-radius: inherit; pointer-events: none;
    background-image: radial-gradient(circle, var(--gold) 0 2.5px, transparent 3px);
    background-size: 18px 18px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    padding: 8px;
    filter: drop-shadow(0 0 4px var(--gold));
    animation: bulbs-chase 1.6s steps(9) infinite;
    opacity: .9;
}
@keyframes bulbs-chase {
    0%   { background-position: 0   0; filter: drop-shadow(0 0 4px var(--gold))   brightness(1); }
    50%  { filter: drop-shadow(0 0 7px var(--gold-2)) brightness(1.4); }
    100% { background-position: 18px 0; filter: drop-shadow(0 0 4px var(--gold)) brightness(1); }
}

.studio-stage h2 {
    margin: 0 0 22px;
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 22px; font-weight: 800;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--gold);
    text-shadow:
        0 0 8px rgba(245, 197, 66, .6),
        0 0 18px rgba(245, 197, 66, .3),
        0 2px 0 rgba(0,0,0,.7);
}

/* ============== Digit cells (casino balls) ============== */
.digits {
    display: flex; justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0 22px;
    perspective: 800px;
}
/* Force a single row (used by JS-managed digit containers).
   Cells shrink uniformly so any digit length fits on one line. */
.digits.one-row,
.gc-digits.one-row {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
}
.digits.one-row .digit-cell,
.gc-digits.one-row .digit-cell {
    flex: 1 1 0;
    min-width: 0;
}

/* Rolling state — digit is currently spinning */
.digit-cell.rolling {
    color: var(--gold-2);
    text-shadow:
        0 0 12px rgba(245, 197, 66, .95),
        0 0 24px rgba(245, 197, 66, .55),
        0 2px 0 #000;
    animation: roll-pulse .35s ease-in-out infinite alternate;
    border-color: var(--gold);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.7),
        inset 0 -8px 16px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255, 215, 110, .25),
        0 6px 16px rgba(0,0,0,.5),
        0 0 22px rgba(245, 197, 66, .45);
}
@keyframes roll-pulse {
    from { filter: brightness(1.0); }
    to   { filter: brightness(1.3); }
}
.digit-cell.rolling::after {
    /* faster shine while rolling */
    animation-duration: .9s !important;
}

.digit-cell {
    position: relative;
    width: clamp(34px, 11vw, 56px);
    height: clamp(48px, 15vw, 76px);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-weight: 800;
    font-size: clamp(22px, 7.5vw, 38px);
    line-height: 1;
    color: var(--cream);
    background:
        radial-gradient(ellipse 80% 40% at 50% 20%, rgba(255, 215, 110, .22), transparent 60%),
        linear-gradient(180deg, #2b0a0d, #0d0405);
    border: 2px solid var(--gold-deep);
    border-radius: 12px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.7),
        inset 0 -8px 16px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255, 215, 110, .18),
        0 6px 16px rgba(0,0,0,.5),
        0 0 14px rgba(245, 197, 66, .18);
    text-shadow:
        0 0 8px rgba(245, 197, 66, .65),
        0 0 18px rgba(245, 197, 66, .35),
        0 2px 0 #000;
    transition: transform .25s var(--ease);
    transform-style: preserve-3d;
}
.digit-cell::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 215, 110, .14) 50%, transparent 60%);
    background-size: 200% 200%;
    background-position: 100% 100%;
    pointer-events: none;
    animation: cell-shine 5s ease-in-out infinite;
}
@keyframes cell-shine {
    0%, 100% { background-position: 200% 200%; opacity: 0; }
    50%      { background-position: -50% -50%; opacity: 1; }
}

/* Result reveal: flip + gold burst */
.digit-cell.fresh {
    animation: digit-flip 700ms var(--ease) both;
}
@keyframes digit-flip {
    0%   { transform: rotateX(-90deg) scale(.9);  filter: brightness(2);   color: var(--gold-2); }
    35%  { transform: rotateX(20deg)  scale(1.12); filter: brightness(1.7); color: var(--gold-2); }
    65%  { transform: rotateX(-8deg)  scale(1.05); filter: brightness(1.3); }
    100% { transform: rotateX(0)      scale(1);   filter: brightness(1);   color: var(--cream); }
}
.digit-cell.fresh::before {
    content: ''; position: absolute; inset: -6px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(245, 197, 66, .65), transparent 70%);
    animation: digit-burst 700ms ease-out forwards;
    pointer-events: none;
}
@keyframes digit-burst {
    0%   { opacity: 1; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.8); }
}

.stage-meta {
    color: var(--muted); font-size: 13px;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 16px;
}
.stage-banner {
    display: inline-block; margin-top: 8px;
    padding: 9px 22px; border-radius: 999px;
    background: linear-gradient(180deg, #1a0a0c, #0d0405);
    border: 1px solid rgba(245, 197, 66, .45);
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: .25em; text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(245, 197, 66, .5);
    box-shadow: 0 4px 12px rgba(0,0,0,.5), inset 0 0 12px rgba(245, 197, 66, .08);
}

/* ============== Countdown card ============== */
.countdown-card {
    position: relative;
    padding: 26px 22px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214, 32, 41, .22), transparent 65%),
        linear-gradient(180deg, #1a0708, #0a0304);
    border: 2px solid var(--red-deep);
    box-shadow:
        0 0 0 6px var(--bg-2),
        0 0 0 8px var(--red-deep),
        0 0 40px rgba(214, 32, 41, .3),
        inset 0 4px 12px rgba(0,0,0,.6);
    text-align: center;
    overflow: hidden;
}
.countdown-card::before {
    content: ''; position: absolute;
    width: 200%; height: 200%;
    left: -50%; top: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(245, 197, 66, .12) 30deg, transparent 60deg, transparent 360deg);
    animation: hero-spin 8s linear infinite;
    pointer-events: none;
}
.countdown-card > * { position: relative; z-index: 1; }

.countdown-card .label {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 12px; font-weight: 700;
    letter-spacing: .35em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 14px;
    text-shadow: 0 0 10px rgba(245, 197, 66, .5);
}
.countdown-card .timer {
    font-family: 'JetBrains Mono', monospace;
    font-size: 54px; font-weight: 800;
    letter-spacing: .05em; line-height: 1;
    color: var(--gold);
    text-shadow:
        0 0 12px rgba(245, 197, 66, .85),
        0 0 28px rgba(245, 197, 66, .5),
        0 0 50px rgba(245, 197, 66, .25),
        0 3px 0 #000;
    margin: 6px 0 14px;
    animation: timer-pulse 1s ease-in-out infinite alternate;
}
@keyframes timer-pulse {
    from { filter: brightness(1);    }
    to   { filter: brightness(1.18); }
}
@media (min-width: 720px) {
    .countdown-card .timer { font-size: 64px; }
}
.countdown-card .sub {
    color: var(--muted);
    font-size: 13px; letter-spacing: .1em;
    text-transform: uppercase;
}

/* ============== GAME GRID (casino table cards) ============== */
.game-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 720px)  { .game-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(3, 1fr); } }

.game-card {
    position: relative;
    --card-color: var(--gold);
    padding: 20px 18px 18px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--card-color) 22%, transparent), transparent 65%),
        linear-gradient(180deg, #1a0a0c, #0a0405);
    border: 2px solid color-mix(in srgb, var(--card-color) 45%, var(--gold-deep));
    box-shadow:
        0 12px 30px rgba(0,0,0,.55),
        0 0 22px color-mix(in srgb, var(--card-color) 20%, transparent),
        inset 0 1px 0 rgba(255, 215, 110, .12);
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    isolation: isolate;
}
.game-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 38px rgba(0,0,0,.65),
        0 0 30px color-mix(in srgb, var(--card-color) 30%, transparent),
        inset 0 1px 0 rgba(255, 215, 110, .18);
}
.game-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--card-color), transparent);
    box-shadow: 0 0 12px var(--card-color);
    animation: card-led 3s ease-in-out infinite;
}
@keyframes card-led {
    0%, 100% { opacity: .6; transform: scaleX(.95); }
    50%      { opacity: 1;  transform: scaleX(1); }
}

.game-card .gc-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 10px;
}
.game-card .gc-name {
    font-family: 'Cinzel', 'Inter', serif;
    font-weight: 700; font-size: 17px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold-2);
    text-shadow: 0 0 8px color-mix(in srgb, var(--card-color) 50%, transparent);
}
.game-card .gc-meta {
    font-size: 11.5px; letter-spacing: .15em;
    color: var(--muted); text-transform: uppercase;
    margin-top: 2px;
}
.game-card .gc-status {
    font-size: 10px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid currentColor;
}
.game-card .gc-status.live      { color: var(--green);  background: rgba(31, 164, 95, .12);  box-shadow: 0 0 12px rgba(31, 164, 95, .4); animation: pill-glow 1.8s ease-in-out infinite alternate; }
.game-card .gc-status.scheduled { color: var(--gold);   background: rgba(245, 197, 66, .12); }
.game-card .gc-status.published { color: var(--gold-2); background: rgba(245, 197, 66, .12); }
.game-card .gc-status.closed    { color: #999;          background: rgba(255,255,255,.04); }

.game-card .digits,
.game-card .gc-digits {
    margin: 8px 0 14px;
    gap: 5px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    perspective: 800px;
}
.game-card .digit-cell {
    width: clamp(22px, 7vw, 38px);
    height: clamp(32px, 9vw, 50px);
    font-size: clamp(15px, 4.5vw, 24px);
    border-radius: 8px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 42px;
}

.game-card .gc-foot {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; color: var(--muted);
    margin-bottom: 12px; letter-spacing: .08em;
}
.game-card .gc-foot .timer {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800; font-size: 15px;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(245, 197, 66, .5);
}
.game-card .gc-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}

/* ============== Buttons ============== */
.btn {
    appearance: none; border: none; cursor: pointer;
    padding: 10px 16px; border-radius: 10px;
    font-family: inherit; font-weight: 700;
    font-size: 13px; letter-spacing: .08em;
    text-transform: uppercase;
    transition: all .22s var(--ease);
    text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn.ghost {
    background: rgba(255, 215, 110, .06);
    color: var(--gold-2);
    border: 1px solid rgba(245, 197, 66, .35);
}
.btn.ghost:hover {
    background: rgba(245, 197, 66, .15);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(245, 197, 66, .35);
}
.btn.primary {
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: var(--ink);
    border: 1px solid var(--gold-2);
    box-shadow: 0 4px 14px rgba(245, 197, 66, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(245, 197, 66, .65), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn.danger {
    background: linear-gradient(180deg, var(--red), var(--red-deep));
    color: #fff; border: 1px solid #ff5159;
    box-shadow: 0 4px 14px rgba(214, 32, 41, .5);
}

/* ============== Notice board ============== */
.notice-board { display: grid; gap: 10px; }
.notice {
    padding: 12px 16px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(20, 7, 9, .85), rgba(10, 5, 7, .85));
    border-left: 4px solid var(--gold);
    color: var(--cream); font-size: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 18px rgba(245, 197, 66, .12);
    backdrop-filter: blur(6px);
}
.notice.success { border-left-color: var(--green); box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 18px rgba(31,164,95,.18); }
.notice.warning { border-left-color: #f0a020; }
.notice.danger  { border-left-color: var(--red);   box-shadow: 0 6px 14px rgba(0,0,0,.4), 0 0 18px rgba(214, 32, 41, .18); }

/* ============== Lists (today / history) ============== */
.list-card {
    padding: 18px; border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(26, 10, 12, .92), rgba(10, 4, 5, .92));
    border: 1px solid rgba(245, 197, 66, .25);
    box-shadow: 0 10px 24px rgba(0,0,0,.5), 0 0 24px rgba(245, 197, 66, .08);
    margin-bottom: 18px;
}
.list-card h3 {
    margin: 0 0 14px;
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 15px; letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(245, 197, 66, .35);
}
.list-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 4px;
    border-bottom: 1px dashed rgba(245, 197, 66, .15);
}
.list-row:last-child { border-bottom: none; }
.list-row .lr-time {
    font-family: 'JetBrains Mono', monospace;
    color: var(--muted); font-size: 13px;
}
.list-row .lr-result {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800; font-size: 17px;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(245, 197, 66, .45);
    letter-spacing: .08em;
}
.list-row .lr-game { font-weight: 600; color: var(--cream); }

/* ============== Forms ============== */
.filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px; margin-bottom: 16px;
}
.filter-form select,
.filter-form input {
    padding: 10px 12px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(245, 197, 66, .35);
    border-radius: 10px; color: var(--cream);
    font-family: inherit; font-size: 14px;
}
.filter-form select:focus,
.filter-form input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .18);
}

/* ============== Footer ============== */
.app-footer {
    margin-top: 60px;
    padding: 30px 18px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    border-top: 1px solid rgba(245, 197, 66, .2);
    background: linear-gradient(180deg, transparent, rgba(10, 5, 7, .8));
}
.app-footer .brand-line {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 14px; color: var(--gold);
    letter-spacing: .25em; text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 10px rgba(245, 197, 66, .4);
}

/* ============== Mobile tuning ============== */
@media (max-width: 720px) {
    .app-header { padding: 12px 14px; }
    .brand { font-size: 18px; letter-spacing: .1em; }
    .nav-links a { padding: 6px 10px; font-size: 13px; }
    .hero { padding: 22px 16px 26px; }
    .studio-stage { padding: 26px 14px 22px; }
    .studio-stage h2 { font-size: 17px; letter-spacing: .18em; }
    .countdown-card .timer { font-size: 44px; }
    .section-head h3 { font-size: 15px; }
    .filter-form { grid-template-columns: 1fr; }
    .digits.one-row { gap: 4px; }
    .game-card .gc-digits.one-row { gap: 3px; }
}

/* ============== Reduced motion ============== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .digit-cell.fresh { animation: none; }
}

/* ============================================================
   New components (clock, pill bar, hub, game-board)
   ============================================================ */

/* ---- Header inner row + clock ---- */
.hdr-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px;
    padding: 12px 18px 12px;
    width: 100%; box-sizing: border-box;
}
.hdr-clock {
    display: flex; flex-direction: column;
    align-items: center;
    line-height: 1.1;
    flex: 1;
}
.hdr-clock-date {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 11px;
    letter-spacing: .25em;
    color: var(--muted);
    text-transform: uppercase;
}
.hdr-clock-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(245, 197, 66, .5);
    letter-spacing: .05em;
    margin-top: 2px;
}

/* ---- Game pill bar ---- */
.game-pills {
    display: flex; gap: 8px;
    padding: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    background: linear-gradient(180deg, rgba(20,7,9,.4), rgba(10,5,7,.6));
    border-top: 1px solid rgba(245, 197, 66, 0.18);
    border-bottom: 1px solid rgba(245, 197, 66, 0.18);
}
.game-pills::-webkit-scrollbar { height: 4px; }
.game-pills::-webkit-scrollbar-thumb { background: rgba(245, 197, 66, .3); border-radius: 99px; }

.gp {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    letter-spacing: .05em;
    color: var(--cream);
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(245, 197, 66, .25);
    white-space: nowrap;
    flex-shrink: 0;
    transition: all .2s var(--ease);
}
.gp:hover {
    background: rgba(245, 197, 66, .12);
    border-color: rgba(245, 197, 66, .5);
    color: var(--gold-2);
}
.gp.active {
    background: linear-gradient(180deg, var(--gold), var(--gold-deep));
    color: var(--ink);
    border-color: var(--gold-2);
    box-shadow: 0 4px 14px rgba(245, 197, 66, .4), inset 0 1px 0 rgba(255,255,255,.4);
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.gp-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pill-color, var(--gold));
    box-shadow: 0 0 6px var(--pill-color, var(--gold));
}
.gp.active .gp-dot { box-shadow: 0 0 8px var(--pill-color, var(--gold)), 0 0 14px var(--pill-color, var(--gold)); }

/* ---- Hub overview (homepage) ---- */
.hub-overview {
    margin: 22px 0 12px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 197, 66, .12), transparent 60%),
        linear-gradient(180deg, var(--felt), var(--felt-2));
    border: 2px solid rgba(245, 197, 66, .3);
    box-shadow: 0 18px 50px rgba(0,0,0,.5), inset 0 0 60px rgba(214, 32, 41, .12);
}
.hub-status-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 16px;
}
.hub-title {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(245, 197, 66, .4);
}
.hub-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 720px) { .hub-stats { grid-template-columns: repeat(4, 1fr); } }
.hub-stat {
    text-align: center;
    padding: 14px 10px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(26, 10, 12, .85), rgba(10, 4, 5, .85));
    border: 1px solid rgba(245, 197, 66, .2);
}
.hub-stat .hs-num {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 28px;
    color: var(--gold);
    text-shadow: 0 0 10px rgba(245, 197, 66, .4);
    line-height: 1.1;
}
.hub-stat .hs-lbl {
    font-size: 10.5px;
    letter-spacing: .2em;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 6px;
}
.hub-stat-next {
    background: linear-gradient(180deg, rgba(40, 8, 10, .9), rgba(15, 4, 6, .9));
    border-color: rgba(214, 32, 41, .35);
    grid-column: span 2;
}
@media (min-width: 720px) { .hub-stat-next { grid-column: span 1; } }
.hub-stat-next .hs-timer {
    font-size: 24px;
    animation: timer-pulse 1s ease-in-out infinite alternate;
}
.hub-stat-next .hs-sub {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 6px;
}

/* ---- Game cards wrapped in anchors ---- */
.game-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.game-card-link:hover { color: inherit; }

/* Round meta row inside cards */
.gc-result-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 6px 2px 10px;
    font-size: 11.5px;
    color: var(--muted);
}
.round-tag {
    font-family: 'JetBrains Mono', monospace;
    color: var(--gold-2);
    letter-spacing: .04em;
}
.round-tag.muted { color: var(--muted); }
.round-time {
    color: var(--muted);
    letter-spacing: .05em;
}

/* ---- Game board (game.php main panel) ---- */
.game-board {
    margin: 18px 0 24px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, color-mix(in srgb, var(--card-color, var(--gold)) 22%, transparent), transparent 60%),
        linear-gradient(180deg, var(--felt), var(--felt-2));
    border: 2px solid color-mix(in srgb, var(--card-color, var(--gold)) 50%, var(--gold-deep));
    box-shadow:
        0 24px 60px rgba(0,0,0,.55),
        0 0 50px color-mix(in srgb, var(--card-color, var(--gold)) 20%, transparent) inset;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Big clock card (game pages) */
.big-clock-card {
    text-align: center;
    padding: 16px 14px;
    margin-bottom: 18px;
    border-radius: var(--radius);
    background: linear-gradient(180deg, #1a0708, #0a0304);
    border: 1px solid rgba(245, 197, 66, .35);
    box-shadow: 0 8px 20px rgba(0,0,0,.5), inset 0 0 24px rgba(245, 197, 66, .07);
}
.bc-date {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 13px; letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(245, 197, 66, .4);
}
.bc-time {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 38px;
    color: var(--gold);
    text-shadow:
        0 0 12px rgba(245, 197, 66, .75),
        0 0 28px rgba(245, 197, 66, .45),
        0 2px 0 #000;
    margin: 4px 0;
    letter-spacing: .05em;
}
.bc-tz {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: .2em;
    text-transform: uppercase;
}
@media (min-width: 720px) {
    .bc-time { font-size: 48px; }
}

/* Title bar inside game board */
.gb-title-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    margin-bottom: 18px;
}
.gb-titles h1 {
    margin: 0;
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 24px; font-weight: 800;
    letter-spacing: .15em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(245, 197, 66, .5);
}
.gb-sub {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 4px;
}
.game-hero-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 900px) {
    .game-hero-board { grid-template-columns: 1.4fr 1fr; }
}

/* Studio stage meta — round number + time */
.stage-meta {
    display: flex; align-items: center; justify-content: center;
    gap: 14px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.stage-meta .round-tag {
    background: rgba(245, 197, 66, .14);
    color: var(--gold-2);
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    border: 1px solid rgba(245, 197, 66, .35);
    letter-spacing: .05em;
}

/* ---- List rows: new two-column shape (left meta / right result+pill) ---- */
.list-card { display: block; }
.list-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px dashed rgba(245, 197, 66, .15);
}
.list-row:last-child { border-bottom: none; }
.lr-left, .lr-right {
    display: flex; align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lr-right { gap: 12px; }
.lr-time {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cream);
    font-size: 14px;
    font-weight: 600;
}
.lr-game {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lr-round-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    background: rgba(0, 0, 0, .35);
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid rgba(245, 197, 66, .2);
    letter-spacing: .04em;
}
.lr-date {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
}
.lr-result {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 18px;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(245, 197, 66, .45);
    letter-spacing: .1em;
}
.lr-status-pill {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    border: 1px solid currentColor;
}
.lr-status-pill.scheduled { color: var(--gold);  background: rgba(245, 197, 66, .1); }
.lr-status-pill.live      { color: var(--green); background: rgba(31, 164, 95, .15); animation: pill-glow 1.8s ease-in-out infinite alternate; }
.lr-status-pill.published { color: var(--gold-2);background: rgba(245, 197, 66, .12); }
.lr-status-pill.closed    { color: #999;         background: rgba(255, 255, 255, .04); }

.empty-row {
    padding: 24px 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---- Form-fields used on history.php ---- */
.form-field label {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.form-field select,
.form-field input {
    width: 100%;
    padding: 10px 12px;
    height: 42px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(245, 197, 66, .35);
    border-radius: 10px;
    color: var(--cream);
    font-family: inherit;
    font-size: 14px;
}
.form-field select:focus,
.form-field input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245, 197, 66, .18);
}

/* ---- Mobile responsive tightening ---- */
@media (max-width: 720px) {
    .hdr-inner { padding: 0 12px 12px; gap: 8px; flex-wrap: wrap; }
    .brand { font-size: 16px; }
    .hdr-clock { order: 3; width: 100%; flex-direction: row; justify-content: center; gap: 12px; padding-top: 4px; border-top: 1px dashed rgba(245, 197, 66, .15); }
    .hdr-clock-date { font-size: 10.5px; }
    .hdr-clock-time { font-size: 14px; }
    .nav-links { order: 2; }
    .game-pills { padding: 8px 12px; }
    .gp { padding: 6px 12px; font-size: 12px; }
    .hub-overview { padding: 14px; }
    .hub-stat .hs-num { font-size: 22px; }
    .hub-stat-next .hs-timer { font-size: 20px; }
    .game-board { padding: 14px; }
    .gb-titles h1 { font-size: 18px; letter-spacing: .12em; }
    .bc-time { font-size: 32px; }
    .stage-meta { gap: 8px; font-size: 11.5px; }
    .lr-left, .lr-right { gap: 7px; }
    .lr-time { font-size: 13px; }
    .lr-game { font-size: 12px; }
    .lr-result { font-size: 15px; }
    .lr-round-tag { font-size: 10px; }
}

/* ==========================================================================
   Header clock + game pills (canonical desktop definitions)
   ========================================================================== */

/* Header clock — right side of hdr-inner */
.hdr-clock {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    padding: 6px 14px;
    border: 1px solid rgba(245, 197, 66, 0.35);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    font-family: 'JetBrains Mono', monospace;
    box-shadow: inset 0 0 14px rgba(245, 197, 66, .06);
    min-width: 130px;
    flex-shrink: 0;
}
.hdr-clock-date {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hdr-clock-time {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-2);
    text-shadow: 0 0 8px rgba(245, 197, 66, .45);
    letter-spacing: .04em;
}

/* Game pill bar — full-width row below hdr-inner */
.game-pills {
    display: flex;
    gap: 8px;
    padding: 8px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-top: 1px solid rgba(245, 197, 66, .12);
    background: linear-gradient(180deg, rgba(20,7,9,.6), rgba(15,5,7,.3));
}
.game-pills::-webkit-scrollbar { display: none; }

.game-pills .gp {
    --pill-color: var(--gold);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(245, 197, 66, .22);
    color: var(--cream);
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .25s var(--ease);
    white-space: nowrap;
}
.game-pills .gp:hover {
    border-color: var(--pill-color);
    color: var(--gold-2);
    box-shadow: 0 0 14px color-mix(in srgb, var(--pill-color) 35%, transparent);
}
.game-pills .gp.active {
    background: linear-gradient(180deg, color-mix(in srgb, var(--pill-color) 22%, transparent), rgba(0,0,0,.4));
    border-color: var(--pill-color);
    color: var(--gold-2);
    box-shadow: 0 0 18px color-mix(in srgb, var(--pill-color) 38%, transparent);
}
.game-pills .gp .gp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--pill-color);
    box-shadow: 0 0 8px var(--pill-color);
}
.game-pills .gp[href="/"] .gp-dot {
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
}

/* ==========================================================================
   Game page (game.php) — big clock card + title bar + result panel polish
   ========================================================================== */
.page-game .game-board { padding: 0; }

/* Big clock card on game pages */
.big-clock-card {
    position: relative;
    margin: 18px 0 22px;
    padding: 18px 22px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245, 197, 66, .14), transparent 65%),
        linear-gradient(180deg, #1a0a0c, #0a0405);
    border: 2px solid var(--gold-deep);
    box-shadow:
        0 0 0 4px var(--bg-2),
        0 0 0 5px var(--gold-deep),
        0 0 30px rgba(245, 197, 66, .2),
        inset 0 2px 8px rgba(0,0,0,.6);
    text-align: center;
    overflow: hidden;
}
.big-clock-card::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
    pointer-events: none;
}
.bc-date {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 13px;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(245, 197, 66, .4);
}
.bc-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(28px, 7vw, 44px);
    font-weight: 800;
    color: var(--gold-2);
    letter-spacing: .08em;
    text-shadow:
        0 0 12px rgba(245, 197, 66, .8),
        0 0 28px rgba(245, 197, 66, .4),
        0 2px 0 #000;
    animation: timer-pulse 1.2s ease-in-out infinite alternate;
}
.bc-tz {
    margin-top: 4px;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* Game title bar */
.gb-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    padding: 0 6px;
}
.gb-titles h1 {
    margin: 0 0 4px;
    font-family: 'Cinzel', 'Inter', serif;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow:
        0 0 10px rgba(245, 197, 66, .6),
        0 0 22px rgba(245, 197, 66, .3),
        0 2px 0 #000;
}
.gb-sub {
    font-size: 12.5px;
    color: var(--muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* Round tag + meta for the latest result on a game page */
.stage-meta .round-tag {
    display: inline-block;
    margin-right: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .12);
    border: 1px solid rgba(245, 197, 66, .35);
    color: var(--gold-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
}
.stage-meta .round-time {
    display: inline-block;
    color: var(--muted);
}

/* Today list rows on game page */
.list-row.published .lr-result { color: var(--gold-2); }
.list-row.scheduled .lr-result { color: var(--muted); opacity: .7; }
.list-row.live      .lr-result { color: var(--green); animation: pill-glow 1.5s ease-in-out infinite alternate; }

.lr-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lr-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lr-round-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .08);
    border: 1px solid rgba(245, 197, 66, .22);
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .05em;
}
.lr-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
    border: 1px solid currentColor;
}
.lr-status-pill.published { color: var(--gold-2); background: rgba(245, 197, 66, .08); }
.lr-status-pill.scheduled { color: var(--gold);   background: rgba(245, 197, 66, .08); }
.lr-status-pill.live      { color: var(--green);  background: rgba(31, 164, 95, .12); box-shadow: 0 0 10px rgba(31, 164, 95, .35); }
.lr-status-pill.closed    { color: #888; background: rgba(255,255,255,.04); }

.empty-row {
    text-align: center;
    color: var(--muted);
    padding: 22px;
    font-style: italic;
    letter-spacing: .1em;
}

/* ==========================================================================
   Mobile tuning for new components
   ========================================================================== */
@media (max-width: 720px) {
    .hdr-inner { flex-wrap: wrap; gap: 10px; }
    .hdr-clock {
        order: 3;
        flex: 1 0 100%;
        align-items: center;
        flex-direction: row;
        gap: 8px;
        justify-content: center;
        padding: 4px 10px;
    }
    .hdr-clock-date { font-size: 10.5px; }
    .hdr-clock-time { font-size: 13px; }
    .nav-links a { padding: 6px 9px; font-size: 12px; }
    .game-pills { padding: 8px 12px; gap: 6px; }
    .game-pills .gp { padding: 6px 11px; font-size: 11.5px; letter-spacing: .08em; }
    .gb-title-bar { gap: 8px; }
    .lr-left, .lr-right { gap: 7px; }
    .lr-round-tag { font-size: 10px; padding: 1px 6px; }
    .lr-status-pill { font-size: 9px; padding: 1px 6px; }
}

/* ==========================================================================
   Homepage hub overview
   ========================================================================== */
.hub-overview {
    position: relative;
    margin: 24px 0 22px;
    padding: 22px 22px 24px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 197, 66, .12), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(214, 32, 41, .1), transparent 65%),
        linear-gradient(180deg, var(--felt), var(--felt-2));
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 20px 60px rgba(0,0,0,.5),
        0 0 0 1px rgba(245, 197, 66, .22) inset;
    overflow: hidden;
    isolation: isolate;
}
.hub-overview::before {
    content: ''; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        var(--gold) 0deg, var(--gold-deep) 90deg,
        var(--red) 180deg, var(--gold-deep) 270deg, var(--gold) 360deg);
    animation: hero-spin 15s linear infinite;
    filter: blur(.5px);
    opacity: .75;
}

.hub-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.hub-title {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--gold);
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(245, 197, 66, .55);
}

.hub-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 720px) {
    .hub-stats { grid-template-columns: repeat(4, 1fr); }
}
.hub-stat {
    background: linear-gradient(180deg, #1a0a0c, #0a0405);
    border: 1px solid rgba(245, 197, 66, .28);
    border-radius: var(--radius);
    padding: 14px 14px 12px;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 215, 110, .1), 0 4px 14px rgba(0,0,0,.4);
}
.hs-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 12px rgba(245, 197, 66, .55), 0 2px 0 #000;
    line-height: 1.1;
}
.hs-lbl {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 4px;
}
.hub-stat-next {
    grid-column: 1 / -1;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(214, 32, 41, .18), transparent 65%),
        linear-gradient(180deg, #1a0708, #0a0304);
    border-color: rgba(214, 32, 41, .4);
}
@media (min-width: 720px) {
    .hub-stat-next { grid-column: auto; }
}
.hub-stat-next .hs-lbl { margin-bottom: 6px; margin-top: 0; }
.hub-stat-next .hs-timer {
    font-size: clamp(28px, 6vw, 42px);
    color: var(--gold);
    text-shadow:
        0 0 12px rgba(245, 197, 66, .85),
        0 0 24px rgba(245, 197, 66, .45),
        0 2px 0 #000;
    animation: timer-pulse 1.1s ease-in-out infinite alternate;
}
.hs-sub {
    margin-top: 5px;
    font-size: 11.5px;
    letter-spacing: .12em;
    color: var(--muted);
    text-transform: uppercase;
}

/* Game-card link wrapper (full-card click target) */
.game-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.game-card-link .game-card {
    cursor: pointer;
}

/* In-card round meta (homepage) */
.gc-result-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: -6px 0 10px;
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .08em;
}
.gc-result-meta .round-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(245, 197, 66, .08);
    border: 1px solid rgba(245, 197, 66, .22);
    color: var(--gold-2);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}
.gc-result-meta .round-tag.muted {
    color: var(--muted);
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.08);
    font-style: italic;
}
.gc-result-meta .round-time {
    font-family: 'JetBrains Mono', monospace;
    color: var(--cream);
    opacity: .8;
}

/* Bump CSS to v4 — done via _header.php cache-buster bump */

/* ==========================================================================
   Game page (v2 layout): title-bar at top, 3-col row below
   ========================================================================== */
.game-board {
    margin: 18px 0 8px;
}

/* The 3-col row: clock · result · countdown */
.game-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
    position: relative;
    padding: 22px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(245, 197, 66, .12), transparent 60%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(214, 32, 41, .12), transparent 65%),
        linear-gradient(180deg, var(--felt), var(--felt-2));
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(245, 197, 66, .22) inset;
    overflow: hidden;
    isolation: isolate;
}
.game-row::before {
    content: ''; position: absolute; inset: -2px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
        var(--gold) 0deg, var(--gold-deep) 80deg,
        var(--red) 160deg, var(--gold-deep) 240deg,
        var(--gold) 360deg);
    animation: hero-spin 14s linear infinite;
    filter: blur(.5px);
    opacity: .65;
}
@media (min-width: 980px) {
    .game-row { grid-template-columns: 1fr 1.6fr 1fr; }
}

/* Smaller clock card on game page (lives left of the result) */
.game-clock-card {
    position: relative;
    padding: 20px 16px;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 197, 66, .14), transparent 60%),
        linear-gradient(180deg, #1a0a0c, #0a0405);
    border: 2px solid var(--gold-deep);
    box-shadow:
        0 0 0 4px var(--bg-2),
        0 0 0 5px var(--gold-deep),
        0 0 25px rgba(245, 197, 66, .2),
        inset 0 2px 8px rgba(0,0,0,.6);
    text-align: center;
    overflow: hidden;
}
.game-clock-card::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px);
    pointer-events: none;
}
.game-clock-card .bc-date {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 11px;
    letter-spacing: .28em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 5px;
    text-shadow: 0 0 7px rgba(245, 197, 66, .4);
}
.game-clock-card .bc-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 800;
    color: var(--gold-2);
    letter-spacing: .06em;
    text-shadow:
        0 0 10px rgba(245, 197, 66, .75),
        0 0 22px rgba(245, 197, 66, .35),
        0 2px 0 #000;
    animation: timer-pulse 1.2s ease-in-out infinite alternate;
}
.game-clock-card .bc-tz {
    margin-top: 4px;
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .15em;
    text-transform: uppercase;
}

/* The game page's status badge (LIVE RUNNING / DRAWING / OFFLINE) */
.game-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    font-family: 'Cinzel', 'Inter', serif;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    transition: all .35s var(--ease);
}
.game-badge .blip {
    width: 9px; height: 9px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #fff, 0 0 16px rgba(255,255,255,.7);
}
.game-badge.running {
    background: linear-gradient(180deg, var(--green), var(--green-deep));
    box-shadow: 0 4px 16px rgba(31, 164, 95, .55), inset 0 1px 0 rgba(255,255,255,.22);
    border-color: rgba(255, 215, 110, .45);
    animation: pill-glow 2.2s ease-in-out infinite alternate;
}
.game-badge.running .blip { animation: blip-flash 1.4s ease-in-out infinite; }
.game-badge.drawing {
    background: linear-gradient(180deg, var(--red), var(--red-deep));
    box-shadow: 0 4px 18px rgba(214, 32, 41, .7), inset 0 1px 0 rgba(255,255,255,.22);
    border-color: rgba(255, 215, 110, .55);
    animation: drawing-flash .6s ease-in-out infinite alternate;
}
.game-badge.drawing .blip { animation: blip-flash .4s ease-in-out infinite; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
@keyframes drawing-flash {
    from { filter: brightness(1)    drop-shadow(0 0 6px rgba(214, 32, 41, .6)); }
    to   { filter: brightness(1.25) drop-shadow(0 0 20px rgba(214, 32, 41, 1)); }
}
.game-badge.offline {
    background: linear-gradient(180deg, #555, #2a2a2a);
    border-color: rgba(180,180,180,.3);
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.game-badge.offline .blip { background: #888; box-shadow: none; opacity: .6; animation: none; }

/* Game-card status pills using new tokens */
.game-card .gc-status.running {
    color: var(--green); background: rgba(31, 164, 95, .12);
    border-color: var(--green);
    box-shadow: 0 0 12px rgba(31, 164, 95, .35);
    animation: pill-glow 2s ease-in-out infinite alternate;
}
.game-card .gc-status.drawing {
    color: #fff; background: var(--red);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(214, 32, 41, .8);
    animation: drawing-flash .6s ease-in-out infinite alternate;
}
.game-card .gc-status.offline {
    color: #999; background: rgba(255,255,255,.04); border-color: rgba(180,180,180,.3);
}

/* Status pills in lists */
.lr-status-pill.running {
    color: var(--green);
    background: rgba(31, 164, 95, .12);
    box-shadow: 0 0 10px rgba(31, 164, 95, .35);
    animation: pill-glow 2s ease-in-out infinite alternate;
}

/* Extra rolling state polish: while .digit-cell is rolling, slow the cell shine
   to feel like a deliberate tumble, not a frantic flicker. */
.digit-cell.rolling {
    animation: roll-pulse .9s ease-in-out infinite alternate;
}
.digit-cell.rolling::after {
    animation-duration: 1.4s !important;
}

/* ==========================================================================
   Mobile tuning for game-row
   ========================================================================== */
@media (max-width: 720px) {
    .game-row { padding: 14px; gap: 12px; }
    .gb-title-bar { flex-direction: column; align-items: flex-start; }
    .game-badge { font-size: 11px; padding: 6px 12px; letter-spacing: .12em; }
    .game-clock-card { padding: 14px 12px; }
    .game-clock-card .bc-time { font-size: 22px; }
}

/* ==========================================================================
   MOBILE HEADER FIX — final override (max-width: 600px)
   • Header scrolls with the page (not sticky) — never covers content
   • Single-row layout: brand left, nav right, clock below
   • Game pills stay horizontal-scroll
   • Ticker slim
   ========================================================================== */
@media (max-width: 640px) {

    /* ---- Header: not sticky on mobile, scrolls away ---- */
    .app-header {
        position: static !important;
        top: auto !important;
        padding: 0;
    }

    /* ---- hdr-inner: explicit 3-row grid on mobile
            Row 1: brand (left) + nav (right)
            Row 2: clock (full width)
            No more flex-wrap fighting with game pills              ---- */
    .hdr-inner {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "brand  nav"
            "clock  clock" !important;
        align-items: center;
        gap: 0;
        padding: 10px 12px 6px !important;
    }

    .brand {
        grid-area: brand;
        font-size: 17px !important;
        letter-spacing: .08em !important;
        gap: 7px !important;
        align-self: center;
    }
    .brand .dot { width: 9px !important; height: 9px !important; }

    .nav-links {
        grid-area: nav;
        gap: 4px !important;
        align-self: center;
    }
    .nav-links a {
        padding: 5px 9px !important;
        font-size: 11.5px !important;
        letter-spacing: 0 !important;
    }

    /* Clock: full-width second row, horizontal layout, slim */
    .hdr-clock {
        grid-area: clock !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 5px 0 2px !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
        min-width: unset !important;
        border-top: 1px dashed rgba(245, 197, 66, .15);
        margin-top: 4px;
    }
    .hdr-clock-date { font-size: 10px !important; letter-spacing: .1em !important; }
    .hdr-clock-time { font-size: 13.5px !important; }

    /* Game pills: full-width scrollable strip, no overlap */
    .game-pills {
        display: flex !important;
        padding: 6px 12px !important;
        gap: 5px !important;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    .game-pills .gp {
        flex: 0 0 auto;
        padding: 5px 10px !important;
        font-size: 11px !important;
        letter-spacing: .06em !important;
    }
    .game-pills .gp-dot { width: 6px !important; height: 6px !important; }

    /* Ticker: slim */
    .ticker-track {
        padding: 7px 0 !important;
        font-size: 12.5px !important;
    }

    /* ---- Main content ---- */
    main.container, .wrap, .container { padding-top: 12px !important; }

    /* ---- Game page 3-col → 1-col ---- */
    .game-row {
        grid-template-columns: 1fr !important;
        padding: 14px 12px !important;
        gap: 12px !important;
    }
    .game-clock-card { padding: 14px 12px !important; }
    .game-clock-card .bc-time { font-size: 20px !important; }

    /* ---- Game page title bar ---- */
    .gb-title-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .gb-titles h1 { font-size: 20px !important; }
    .game-badge { font-size: 11px !important; padding: 6px 12px !important; }

    /* ---- Digit cells ---- */
    .digit-cell {
        width: clamp(28px, 10vw, 46px) !important;
        height: clamp(38px, 13vw, 60px) !important;
        font-size: clamp(18px, 6.5vw, 28px) !important;
    }
    .game-card .digit-cell {
        width: clamp(18px, 6.5vw, 32px) !important;
        height: clamp(26px, 9vw, 42px) !important;
        font-size: clamp(12px, 4vw, 20px) !important;
    }

    /* ---- Misc ---- */
    .section-head h3 { font-size: 13px !important; letter-spacing: .12em !important; }
    .filter-form { grid-template-columns: 1fr !important; gap: 8px !important; }
    .hub-stats { grid-template-columns: repeat(2, 1fr) !important; }
    .hub-stat-next { grid-column: 1 / -1 !important; }
    .hub-overview { padding: 14px 12px 16px !important; }
    .hs-num { font-size: 22px !important; }
    .hub-stat-next .hs-timer { font-size: 26px !important; }
}

/* Tablet: sticky, compact */
@media (min-width: 641px) and (max-width: 900px) {
    .app-header { padding: 10px 16px 0; }
    .hdr-clock { min-width: 110px; padding: 5px 10px; }
    .hdr-clock-date { font-size: 10px; }
    .hdr-clock-time { font-size: 13px; }
    .nav-links a { padding: 6px 10px; font-size: 12.5px; }
    .game-pills { padding: 8px 14px; }
    .game-pills .gp { padding: 5px 10px; font-size: 11.5px; }
}


/* ==========================================================================
   NEW GAME TYPES — Colour Prediction, K3 Dice, Spin Wheel, Andar Bahar
   ========================================================================== */

/* ---- Shared: derived label badges ---- */
.derived-badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: var(--cream);
}
.sum-badge    { background: rgba(245,197,66,.12); border-color: rgba(245,197,66,.35); color: var(--gold); }
.triple-badge { background: rgba(214,32,41,.14);  border-color: rgba(214,32,41,.4);  color: #ff8da0; }

/* ---- COLOUR PREDICTION ---- */
.colour-result { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 0 6px; }
.colour-ball {
    width: 110px; height: 110px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 52px; font-weight: 900; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    box-shadow: 0 0 0 4px rgba(255,255,255,.12), 0 0 30px currentColor, 0 8px 24px rgba(0,0,0,.5);
    animation: ball-breathe 3s ease-in-out infinite alternate;
    position: relative; overflow: hidden; transition: background .4s ease;
}
.colour-ball::after {
    content: ''; position: absolute; top: 10%; left: 20%;
    width: 35%; height: 30%; background: rgba(255,255,255,.25);
    border-radius: 50%; filter: blur(4px);
}
@keyframes ball-breathe {
    from { transform: scale(1); filter: brightness(1); }
    to   { transform: scale(1.05); filter: brightness(1.18); }
}
.colour-ball.colour-red           { background: radial-gradient(circle at 40% 35%, #ef5350, #b71c1c); }
.colour-ball.colour-green         { background: radial-gradient(circle at 40% 35%, #66bb6a, #1b5e20); }
.colour-ball.colour-violet-red    { background: radial-gradient(circle at 40% 35%, #ab47bc, #6a1b9a); border: 3px solid #e53935; }
.colour-ball.colour-violet-green  { background: radial-gradient(circle at 40% 35%, #ab47bc, #6a1b9a); border: 3px solid #43a047; }
.colour-badge { padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); display: inline-block; }
.colour-badge.colour-red           { background: rgba(229,57,53,.2);  color: #ef9a9a; border-color: #e53935; }
.colour-badge.colour-green         { background: rgba(67,160,71,.2);   color: #a5d6a7; border-color: #43a047; }
.colour-badge.colour-violet-red    { background: rgba(171,71,188,.2);  color: #ce93d8; border-color: #ab47bc; }
.colour-badge.colour-violet-green  { background: rgba(171,71,188,.2);  color: #ce93d8; border-color: #ab47bc; }
.colour-labels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lr-colour-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; margin-right: 4px; border: 1px solid rgba(255,255,255,.3); }
.lr-colour-dot.lr-colour-red           { background: #e53935; }
.lr-colour-dot.lr-colour-green         { background: #43a047; }
.lr-colour-dot.lr-colour-violet-red    { background: linear-gradient(135deg,#8e24aa 50%,#e53935 50%); }
.lr-colour-dot.lr-colour-violet-green  { background: linear-gradient(135deg,#8e24aa 50%,#43a047 50%); }

/* ---- K3 DICE — 3×3 dot-grid dice ---- */
.dice-result { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0 6px; }
.dice-row    { display: flex; gap: 14px; justify-content: center; }

.die {
    width: 72px; height: 72px; border-radius: 14px;
    background: linear-gradient(145deg, #fafafa, #e0e0e0);
    border: 2px solid rgba(255,255,255,.3);
    box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 18px rgba(245,197,66,.25),
                inset 0 2px 4px rgba(255,255,255,.8), inset 0 -2px 4px rgba(0,0,0,.12);
    padding: 9px;
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
.die.fresh-reveal {
    box-shadow: 0 6px 20px rgba(0,0,0,.5), 0 0 30px rgba(245,197,66,.7),
                inset 0 2px 4px rgba(255,255,255,.8);
}
.die-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 5px;
    width: 100%; height: 100%;
}
.die-dot {
    width: 100%; aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: transparent;
}
.die-dot.on {
    background: radial-gradient(circle at 35% 35%, #444, #0a0a0a);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.25);
}
.dice-labels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* List-row dice: compact white square */
.lr-die {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
    background: linear-gradient(145deg, #fafafa, #e0e0e0);
    font-size: 13px; font-weight: 900; color: #222;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 2px rgba(255,255,255,.7);
    margin: 0 1px; vertical-align: middle; border: 1px solid rgba(0,0,0,.15);
}
.lr-derived { font-size: 11px; color: var(--muted); letter-spacing: .08em; margin-left: 4px; }

/* ---- SPIN WHEEL ---- */
.wheel-result { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 10px 0 6px; }
.wheel-wrapper {
    position: relative; width: 220px; height: 220px;
    display: flex; align-items: center; justify-content: center;
}
.wheel-svg {
    width: 220px; height: 220px;
    filter: drop-shadow(0 0 20px rgba(245,197,66,.35)) drop-shadow(0 8px 24px rgba(0,0,0,.6));
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Static by default — JS adds .wheel-spinning class during shuffle */
    animation: none;
    transition: none;
}
/* CSS animation ONLY during the 5-second shuffle window */
.wheel-svg.wheel-spinning {
    animation: wheel-idle-spin 1.8s linear infinite !important;
    transition: none !important;
}
@keyframes wheel-idle-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.wheel-result-num {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px; font-weight: 900; color: var(--gold);
    text-shadow: 0 0 8px rgba(245,197,66,.8);
    background: #0a0506;
    border: 2px solid var(--gold);
    z-index: 2;
    pointer-events: none;
}
.wheel-labels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.derived-badge.wheel-colour-red   { background: rgba(229,57,53,.14);  border-color: rgba(229,57,53,.4);  color: #ef9a9a; }
.derived-badge.wheel-colour-green { background: rgba(67,160,71,.14);   border-color: rgba(67,160,71,.4);  color: #a5d6a7; }
.derived-badge.wheel-colour-gold  { background: rgba(245,197,66,.14);  border-color: rgba(245,197,66,.4); color: var(--gold); }
.lr-wheel-seg { display: inline-block; min-width: 28px; padding: 3px 10px; border-radius: 999px; text-align: center; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
.lr-wheel-red   { background: rgba(229,57,53,.18); color: #ef9a9a; border: 1px solid rgba(229,57,53,.4); }
.lr-wheel-green { background: rgba(67,160,71,.18);  color: #a5d6a7; border: 1px solid rgba(67,160,71,.4); }
.lr-wheel-gold  { background: rgba(245,197,66,.18); color: var(--gold); border: 1px solid rgba(245,197,66,.4); }

/* ---- ANDAR BAHAR — full card table ---- */
.ab-result { width: 100%; }
.ab-table {
    display: flex; gap: 12px; align-items: flex-start; justify-content: center;
    flex-wrap: wrap; width: 100%; padding: 10px 0;
}
/* Andar / Bahar zones */
.ab-zone {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    flex: 1; min-width: 90px; max-width: 130px;
    padding: 12px 8px;
    border-radius: 14px;
    background: rgba(255,255,255,.03);
    border: 2px solid rgba(255,255,255,.08);
    transition: all .4s ease;
}
.ab-zone.ab-winner {
    background: rgba(245,197,66,.06);
    border-color: rgba(245,197,66,.4);
    box-shadow: 0 0 20px rgba(245,197,66,.2);
}
.ab-zone-andar.ab-winner { background: rgba(21,101,192,.12); border-color: rgba(100,181,246,.5); box-shadow: 0 0 20px rgba(21,101,192,.3); }
.ab-zone-bahar.ab-winner { background: rgba(229,57,53,.12);  border-color: rgba(239,154,154,.5); box-shadow: 0 0 20px rgba(229,57,53,.3); }

.ab-zone-label, .ab-joker-label {
    font-family: 'Cinzel', 'Inter', serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.ab-zone-andar .ab-zone-label { color: #90caf9; }
.ab-zone-bahar .ab-zone-label { color: #ef9a9a; }

/* Joker zone (center) */
.ab-joker-zone {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    flex: 0 0 auto;
}

/* Card stack (face-down pile) */
.ab-card-stack {
    position: relative; width: 60px; height: 80px;
}
.ab-card-back, .ab-card-back-main, .ab-card-front {
    width: 60px; height: 80px; border-radius: 8px;
    position: absolute; top: 0; left: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.ab-back-2 { transform: translate(4px, 4px) rotate(3deg); background: linear-gradient(135deg, #1a237e, #283593); border: 1px solid rgba(255,255,255,.15); }
.ab-back-1 { transform: translate(2px, 2px) rotate(1.5deg); background: linear-gradient(135deg, #1a237e, #283593); border: 1px solid rgba(255,255,255,.15); }
.ab-card-back-main { background: linear-gradient(135deg, #1a237e, #283593); border: 1px solid rgba(255,255,255,.15); }

/* Front card */
.ab-card-front {
    background: linear-gradient(145deg, #fffde7, #fff8e1);
    border: 2px solid rgba(245,197,66,.6);
    display: flex; flex-direction: column;
    padding: 4px; position: relative;
    overflow: hidden;
}
.ab-card-front::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(245,197,66,.04) 0 1px, transparent 1px 5px);
}
.ab-corner {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; font-weight: 900; line-height: 1.1;
    position: relative; z-index: 1;
}
.ab-corner.br { position: absolute; bottom: 4px; right: 4px; transform: rotate(180deg); }
.ab-center    { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 22px; position: relative; z-index: 1; }
.ab-center-big { font-size: 28px; }

/* Red/black suits */
.ab-card-front.red-suit   .ab-corner,
.ab-card-front.red-suit   .ab-center   { color: #c62828; }
.ab-card-front.black-suit .ab-corner,
.ab-card-front.black-suit .ab-center   { color: #1a1a1a; }

/* Joker card is bigger */
.ab-joker-card { width: 72px; height: 100px; position: relative; }
.ab-joker-card .ab-corner { font-size: 13px; }
.ab-joker-card .ab-center-big { font-size: 34px; }

/* Side badges */
.ab-side-badge {
    padding: 8px 20px; border-radius: 999px;
    font-family: 'Cinzel', 'Inter', serif; font-size: 14px; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 4px 16px rgba(0,0,0,.4); color: #fff;
    transition: all .3s ease;
}
.ab-side-badge.ab-andar { background: linear-gradient(135deg,#1565c0,#0d47a1); box-shadow: 0 4px 16px rgba(21,101,192,.5); border-color: rgba(100,181,246,.4); }
.ab-side-badge.ab-bahar { background: linear-gradient(135deg,#e53935,#b71c1c); box-shadow: 0 4px 16px rgba(229,57,53,.5);  border-color: rgba(239,154,154,.4); }

/* List row AB */
.lr-card { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 14px; padding: 2px 7px; border-radius: 6px; background: rgba(255,248,240,.08); border: 1px solid rgba(245,197,66,.3); }
.lr-card.red-suit   { color: #ef9a9a; }
.lr-card.black-suit { color: var(--cream); }
.ab-side-sm { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ab-side-sm.ab-andar { background: #1565c0; }
.ab-side-sm.ab-bahar { background: #e53935; }

/* Fresh reveal animation */
.fresh-reveal { animation: fresh-pop .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fresh-pop {
    0%   { transform: scale(.5);  filter: brightness(2.5); }
    40%  { transform: scale(1.15); filter: brightness(1.5); }
    100% { transform: scale(1);   filter: brightness(1); }
}


/* Wheel active segment highlight */
.wheel-seg { transition: opacity .3s ease; }
.wheel-seg.active-seg { filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,255,255,.6)); }

/* Andar Bahar shuffle animation */
@keyframes ab-card-flip {
    0%   { transform: rotateY(0deg); }
    50%  { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}
.ab-shuffling {
    animation: ab-card-flip .3s ease-in-out;
}

/* Fixed wheel pointer — stays at top while wheel spins */
.wheel-wrapper {
    position: relative !important;
}
.wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    color: var(--gold);
    text-shadow: 0 0 12px var(--gold), 0 0 24px rgba(245,197,66,.6);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.8));
    z-index: 10;
    pointer-events: none;
    line-height: 1;
}

/* ====== Mobile performance optimisations ====== */

/* Dice — promote to GPU layer */
.die {
    will-change: contents;
    backface-visibility: hidden;
}

/* Colour ball — GPU compositing */
.colour-ball {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Prevent animations running when tab is hidden (saves battery) */
@media (prefers-reduced-motion: reduce) {
    .wheel-svg,
    .colour-ball,
    .die { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   PARITY game type
   ========================================================================== */
.parity-result {
    display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 14px 0 6px;
}
.parity-ring {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 6px solid currentColor;
    box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 30px currentColor, 0 8px 24px rgba(0,0,0,.5);
    transition: all .4s ease;
    animation: ball-breathe 3s ease-in-out infinite alternate;
    position: relative;
}
.parity-ring::after {
    content: ''; position: absolute; top: 8%; left: 18%;
    width: 32%; height: 28%; background: rgba(255,255,255,.2);
    border-radius: 50%; filter: blur(4px); pointer-events: none;
}
.parity-digit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 52px; font-weight: 900; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    position: relative; z-index: 1;
}
/* Colour variants for parity (reuse colour- classes for the ring) */
.parity-ring.parity-red           { color: #e53935; background: rgba(229,57,53,.18); }
.parity-ring.parity-green         { color: #43a047; background: rgba(67,160,71,.18); }
.parity-ring.parity-violet-red    { color: #ab47bc; background: rgba(171,71,188,.18); border-color: #e53935; }
.parity-ring.parity-violet-green  { color: #ab47bc; background: rgba(171,71,188,.18); border-color: #43a047; }
.parity-labels { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ==========================================================================
   5D LOTTERY game type
   ========================================================================== */
.lottery5d-result {
    display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 6px;
}
/* Digit cells with Big/Small colour hints */
.lottery5d-cell.sz-big   {
    border-color: var(--green) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 0 16px rgba(31,164,95,.45) !important;
}
.lottery5d-cell.sz-small {
    border-color: var(--red) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 0 16px rgba(214,32,41,.35) !important;
}
.lottery5d-derived {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 6px;
}
.derived-badge.lottery5d-colour-red           { background: rgba(229,57,53,.14);  border-color: rgba(229,57,53,.4);  color: #ef9a9a; }
.derived-badge.lottery5d-colour-green         { background: rgba(67,160,71,.14);   border-color: rgba(67,160,71,.4);  color: #a5d6a7; }
.derived-badge.lottery5d-colour-violet-red    { background: rgba(171,71,188,.14);  border-color: rgba(171,71,188,.4); color: #ce93d8; }
.derived-badge.lottery5d-colour-violet-green  { background: rgba(171,71,188,.14);  border-color: rgba(171,71,188,.4); color: #ce93d8; }

/* 5D list row cells */
.lr-5d {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px;
    background: linear-gradient(145deg, #fafafa, #e0e0e0);
    font-size: 13px; font-weight: 900; color: #222;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    margin: 0 1px; vertical-align: middle;
}
.lr-5d.lr-5d-big   { background: linear-gradient(145deg, #a5d6a7, #66bb6a); color: #fff; }
.lr-5d.lr-5d-small { background: linear-gradient(145deg, #ef9a9a, #e53935); color: #fff; }

/* ==========================================================================
   CRASH MULTIPLIER game type
   ========================================================================== */
.crash-result {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 10px 0 6px;
    position: relative;
}
.crash-multiplier {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(44px, 10vw, 72px);
    font-weight: 900;
    letter-spacing: .04em;
    line-height: 1;
    text-align: center;
    transition: color .3s ease, text-shadow .3s ease;
}
.crash-multiplier.crash-low {
    color: #66bb6a;
    text-shadow: 0 0 16px rgba(102,187,106,.85), 0 0 32px rgba(102,187,106,.45), 0 3px 0 #000;
}
.crash-multiplier.crash-mid {
    color: var(--gold);
    text-shadow: 0 0 16px rgba(245,197,66,.85), 0 0 32px rgba(245,197,66,.45), 0 3px 0 #000;
}
.crash-multiplier.crash-high {
    color: #ef5350;
    text-shadow: 0 0 16px rgba(239,83,80,.85), 0 0 32px rgba(239,83,80,.45), 0 3px 0 #000;
    animation: crash-high-pulse .5s ease-in-out infinite alternate;
}
@keyframes crash-high-pulse {
    from { filter: brightness(1);    }
    to   { filter: brightness(1.25); }
}

/* CRASHED banner */
.crash-bang {
    display: none;
    font-family: 'Cinzel', 'Inter', serif;
    font-size: clamp(18px, 5vw, 26px);
    font-weight: 900;
    letter-spacing: .3em;
    text-transform: uppercase;
    padding: 10px 28px;
    border-radius: 999px;
    border: 2px solid currentColor;
}
.crash-bang.crash-low  { color: #66bb6a; background: rgba(102,187,106,.14); box-shadow: 0 0 20px rgba(102,187,106,.4); }
.crash-bang.crash-mid  { color: var(--gold); background: rgba(245,197,66,.14); box-shadow: 0 0 20px rgba(245,197,66,.4); }
.crash-bang.crash-high { color: #ef5350;   background: rgba(239,83,80,.14);   box-shadow: 0 0 20px rgba(239,83,80,.5); }
.crash-bang-anim { animation: fresh-pop .7s cubic-bezier(.2,.7,.2,1) both; }

/* Crash tier badge */
.derived-badge.crash-tier-low  { background: rgba(102,187,106,.14); border-color: rgba(102,187,106,.4); color: #a5d6a7; }
.derived-badge.crash-tier-mid  { background: rgba(245,197,66,.14);  border-color: rgba(245,197,66,.4);  color: var(--gold); }
.derived-badge.crash-tier-high { background: rgba(239,83,80,.14);   border-color: rgba(239,83,80,.4);   color: #ef9a9a; }

/* Crash list row result */
.lr-crash {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900; font-size: 16px;
    padding: 2px 8px; border-radius: 6px;
}
.lr-crash.lr-crash-low  { color: #a5d6a7; }
.lr-crash.lr-crash-mid  { color: var(--gold); }
.lr-crash.lr-crash-high { color: #ef9a9a; }


/* ==========================================================================
   PWA Install Banner
   ========================================================================== */
.pwa-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    background: linear-gradient(135deg, #1a0a0c, #0d0607);
    border-top: 2px solid rgba(245, 197, 66, 0.5);
    box-shadow: 0 -8px 30px rgba(0,0,0,.6), 0 -1px 0 rgba(245,197,66,.15);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    backdrop-filter: blur(12px);
    animation: banner-slide-up .4s cubic-bezier(.2,.7,.2,1);
}
@keyframes banner-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.pwa-banner-content {
    display: flex; align-items: center; gap: 12px;
}
.pwa-banner-content img {
    border-radius: 10px;
    border: 1px solid rgba(245,197,66,.3);
    flex-shrink: 0;
}
.pwa-banner-text {
    display: flex; flex-direction: column; gap: 2px;
}
.pwa-banner-text strong {
    font-size: 14px; font-weight: 700; color: var(--cream);
    letter-spacing: .04em;
}
.pwa-banner-text span {
    font-size: 12px; color: var(--muted);
}
.pwa-banner-actions {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.pwa-install-btn {
    padding: 8px 18px !important;
    font-size: 13px !important;
    white-space: nowrap;
}
.pwa-dismiss {
    appearance: none; background: none; border: none; cursor: pointer;
    color: var(--muted); font-size: 18px; padding: 4px 8px;
    border-radius: 6px; transition: color .2s ease;
}
.pwa-dismiss:hover { color: var(--cream); }

@media (max-width: 480px) {
    .pwa-banner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pwa-banner-actions { width: 100%; justify-content: flex-end; }
}