@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=JetBrains+Mono&display=swap');

:root {
    --bg: #000;
    --fg: #e0f7ff;
    --muted: #707c91;
    --accent: #00c8ff;
    --up: #00ff9d;
    --down: #ff2965;
    --card: #0a0a0f;
    --pending:#3a3a52;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body::before {
    content: '';
    position: fixed; inset: 0;
    background: url('https://media.giphy.com/media/xT9IgzoKnwFNmISR8I/giphy.gif');
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
    mix-blend-mode: screen;
}

input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

.console {
    position: relative;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    z-index: 1;
}

.panel {
    background: var(--card);
    border: 1px solid rgba(0,200,255,.2);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0,200,255,.08);
    padding: 16px;
}

h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 0 0 12px;
    text-shadow: 0 0 8px var(--accent);
    display:flex;
    align-items:center;
    gap:10px;
}

.pill {
    font-size: 12px;
    border:1px solid rgba(0,200,255,.25);
    border-radius:999px;
    padding:4px 10px;
    background:#0d0d18;
    color:var(--accent);
    position:relative;
    overflow: visible;
    animation: pillGoldGlow 3s ease-in-out infinite;
    perspective: 800px;
    transform-style: preserve-3d;
    box-shadow:
    0 0 6px rgba(255, 215, 0, 0.25),
    inset 0 0 4px rgba(255, 215, 0, 0.15);
}
/* Golden slow breathing animation */
@keyframes pillGoldGlow {
    0% {
        box-shadow:
            0 0 4px rgba(255, 215, 0, 0.25),
            0 0 10px rgba(255, 215, 0, 0.15),
            inset 0 0 2px rgba(255, 215, 0, 0.15);
        border-color: rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow:
            0 0 10px rgba(255, 215, 0, 0.55),
            0 0 18px rgba(255, 215, 0, 0.35),
            inset 0 0 5px rgba(255, 215, 0, 0.35);
        border-color: rgba(255, 215, 0, 0.9);
    }
    100% {
        box-shadow:
            0 0 4px rgba(255, 215, 0, 0.25),
            0 0 10px rgba(255, 215, 0, 0.15),
            inset 0 0 2px rgba(255, 215, 0, 0.15);
        border-color: rgba(255, 215, 0, 0.4);
    }
}

.cube-number {
    font-size: 64px;
    font-weight: 800;
    text-align: center;
    margin: 20px 0;
    text-shadow: 0 0 12px var(--accent);
    background: none; /* default */
    transition: all 0.3s ease;
}
.cube-number.pos {
    color: var(--up);
    text-shadow: 0 0 15px var(--up);
}
.cube-number.neg {
    color: var(--down);
    text-shadow: 0 0 15px var(--down);
}
.cube-number.scramble {
    opacity: 0.85;
    transform: scale(1.05);
}

.ticker {
    font-size: 14px;
    color: var(--muted);
    height: 120px;
    overflow: hidden;
    background: #050509;
    border: 1px solid rgba(0,200,255,.2);
    border-radius: 10px;
    padding: 10px;
    font-family: monospace;
}

.log-line { opacity: 0.8; margin: 2px 0; }
.log-line.win { color: var(--up); }
.log-line.lose { color: var(--down); }
.log-line.sys { color: var(--accent); }

.timer {
    font-size: 32px;
    text-align: center;
    margin: 12px 0;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent);
}

.cube-number.final {
    animation: settlePulse 1s ease-out 1, settleGlow 2s ease-out 1;
}
@keyframes settlePulse {
    0% { transform: scale(0.8); opacity: 0.5; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes settleGlow {
    0% { text-shadow: 0 0 0 transparent; }
    100% { text-shadow: 0 0 25px currentColor, 0 0 50px currentColor; }
}

.cube-number.empty {
    background: none !important;
    color: var(--accent);
    font-weight: 800;
}
    
/* Wallet Pocket Card */
.wallet-pocket {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 340px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(0, 255, 200, 0.2);
    border-radius: 16px;
    padding: 24px;
    color: #fff;
    font-family: "Orbitron", "Roboto Mono", monospace; /* 🚀 futuristic font */
    font-size: 14px;
    box-shadow: 0 0 12px rgba(0, 255, 200, 0.3),
                0 0 40px rgba(0, 255, 200, 0.1);
    backdrop-filter: blur(8px);
    cursor: move;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 1000;
}

.wallet-pocket:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 16px rgba(0, 255, 200, 0.5),
                0 0 50px rgba(0, 255, 200, 0.2);
}

.wallet-pocket h3 {
    font-size: 17px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #00ffe0;
    text-shadow: 0 0 6px rgba(0,255,220,0.7);
    letter-spacing: 1px;
}

#walletInfo div {
    margin: 6px 0 16px 0;
    color: #bbb;
    margin: 10px 0 20px 0; /* 👈 har line thoda aur spaced */

}

.wallet-controls button {
    background: #222;
    color: #0ff;
    border: 1px solid #0ff;
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 6px;
    margin-left: 4px;
}

.wallet-controls button:hover {
    background: #0ff;
    color: #000;
}

/* Wallet header layout */
.wallet-header {
    display: flex;
    justify-content: space-between; /* 👈 title left, buttons right */
    align-items: center;
    margin-bottom: 10px;
}

/* Adjust h3 inside header (override old) */
.wallet-header h3 {
    font-size: 17px;
    margin: 0;
    padding: 0;
    border-bottom: none; /* 👈 remove line under title, since full header has line */
    color: #00ffe0;
    text-shadow: 0 0 6px rgba(0,255,220,0.7);
    letter-spacing: 1px;
}


/* Balance Styling + Animation */
.balance {
    font-size: 1.6rem;
    font-weight: bold;
    color: #00ffe0;
    text-shadow: 0 0 8px rgba(0,255,220,0.7);
    display: inline-block;
    transition: transform 0.2s ease;
}

.balance.animate {
    animation: coinDrop 0.6s ease forwards;
}

@keyframes coinDrop {
    0% { transform: scale(1.3) translateY(-10px); opacity: 0.7; }
    50% { transform: scale(0.9) translateY(4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); }
}

/* PnL */
.pnl-positive {
    color: #00ff66;
    text-shadow: 0 0 6px rgba(0,255,100,0.7);
}

.pnl-negative {
    color: #ff3366;
    text-shadow: 0 0 6px rgba(255,50,100,0.7);
}

#walletContent > div {
    margin-bottom: 12px; /* spacing for each info row */
}

/* ----- Magical Pulse Animation (runs on update) ----- */
.pulse-animate {
    animation: pulseFlash 0.7s ease-out;
}

@keyframes pulseFlash {
    0% {
        transform: scale(1);
        text-shadow: 0 0 12px rgba(255,255,255,0.7);
    }
    40% {
        transform: scale(1.08);
        text-shadow: 0 0 22px rgba(255,255,255,1);
    }
    100% {
        transform: scale(1);
        text-shadow: 0 0 6px rgba(255,255,255,0.3);
    }
}

#pnlChart {
    margin-top: 7px;
}

.cube-history {
    margin-top: 16px;
    padding: 10px;
    background: #0d0d18; /* same as console */
    border: 1px solid rgba(0,200,255,.15);
    border-radius: 8px;
    font-size: 13px;
    color: var(--fg);
    max-height: 110px;
    overflow-y: hidden;
}

.cube-history h3 {
    margin: 0 0 6px 0;
    font-size: 13px;
    color: var(--accent);
}

.cube-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;     /* ← SCROLL HERE */
    padding-right: 6px;   /* space for scrollbar */
    max-height: 90px;     /* scroll height */
}

.cube-history-item {
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
    background: #fff;      /* white background */
    color: #000;           /* black text */
    border: 1px solid #aaa;
}

.cube-history-item.pos {
    background: #d4ffd4;   /* light green */
    color: #080;
    border-color: #080;
}

.cube-history-item.neg {
    background: #ffd4d4;   /* light red */
    color: #800;
    border-color: #800;
}

/* === Fancy Neon Scrollbar === */

/* Chrome, Edge, Safari */
.cube-history::-webkit-scrollbar {
    width: 8px;
}

.cube-history::-webkit-scrollbar-track {
    background: rgba(0, 255, 255, 0.08);
    border-radius: 10px;
}

.cube-history::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff, #006aff);
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0,200,255,0.6);
}

.cube-history::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #33f6ff, #0a84ff);
}

/* Firefox */
.cube-history {
    scrollbar-width: thin;
    scrollbar-color: #00d4ff rgba(0,255,255,0.08);
}


/* Betting tab - more transparent */
/* Betting tab with blue glow */
.betting-tab {
    position: fixed;
    bottom: -330px;
    left: 0;
    width: 60%;
    height: 310px;  /* pehle 200px tha */
    padding-top: 50px; 

    background: linear-gradient(180deg, rgba(58, 58, 58, 0.4), rgba(28, 28, 28, 0.2));
    border-radius: 15px 15px 0 0;
    box-shadow: 
        0 -10px 25px rgba(0, 150, 255, 0.9),   /* glowing edge */
        0 20px 30px rgba(0, 0, 0, 0.8),        /* big ground shadow */
        inset 0 6px 10px rgba(255, 255, 255, 0.05); /* top light bevel */

    border-top: 3px solid rgba(0, 150, 255, 0.9);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 20px rgba(0, 150, 255, 0.8),
                inset 0 4px 10px rgba(255, 255, 255, 0.05);

    color: white;
    text-align: center;
    padding: 10px 20px;

    transition: bottom 0.5s ease;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;  /* prevents horizontal scroll */
}

.betting-tab.active {
    bottom: 0;
}
/* Right-side thick border extrusion */
/* Right-side thick border extrusion with neon glow */
.betting-tab::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;   /* thickness of wall */
    height: 100%;

    background: linear-gradient(180deg, #2b2b2b, #111); /* dark side wall */
    box-shadow:
        -4px 0 6px rgba(0,0,0,0.1);  /* inner hard shadow to separate */

    border-radius: 0 10px 0 0; /* smooth top corner */
}
.betting-content {
    position: relative;
    top: -1px; /* shift content slightly up */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index : 500000;
}

/* Buttons grid */
.betting-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 10px;
    z-index : 500000;
}

/* Base button style (Glassy 3D key look) */
.bet-btn {
    background: linear-gradient(145deg, rgba(70, 70, 80, 0.3), rgba(20, 20, 25, 0.3)); /* change */
    border: 2px solid rgba(200, 100, 255, 0.8);
    border-radius: 6px;
    font-family: 'Orbitron', sans-serif; /* 👈 new font */
    padding: 8px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    position: relative;  /* required for pseudo-element positioning */
    overflow: hidden;    /* keeps star inside edges */

    box-shadow: 
        0 8px 0 rgba(50, 20, 100, 1),             /* thicker base */
        0 12px 18px rgba(0, 0, 0, 0.85),          /* deeper drop shadow */
        inset 0 3px 5px rgba(255, 255, 255, 0.15),/* stronger highlight */
        inset 0 -4px 8px rgba(0, 0, 0, 0.7);      /* stronger bottom inset */
        transition: all 0.15s ease;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap : 2px;
    z-index : 500000;
}
.bet-btn::after {
    content: "✦";  /* white star */
    position: absolute;
    font-size: 5px; /* size of star */
    color: white;
    text-shadow: 0 0 8px white;
    top: 0;
    left: 0;
    animation: orbitStar 30s linear infinite;
    opacity: 0.6;
}
.bet-btn::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;

    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0) 70%
    );

    transform: rotate(25deg);
    animation: none;
    opacity: 0.15; /* static faint shine */
}

/* Hover/press effects */
.bet-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.7),
                0 0 10px rgba(200, 100, 255, 0.6);
}

.bet-btn:active {
    transform: translateY(3px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6),
            0 0 6px rgba(200, 100, 255, 0.8);
}

/* Alternating neon color styles */
.bet-btn:nth-child(odd) {
    border-color: rgba(200, 100, 255, 0.9);
    color: #66e0ff; /* cyan text */
    text-shadow: 0 0 6px rgba(102, 224, 255, 0.8);
}

.bet-btn:nth-child(even) {
    border-color: #00ff88;
    color: #ffd966; /* gold text */
    text-shadow: 0 0 6px rgba(255, 217, 102, 0.8);
}


.bet-btn:nth-child(even) .amount-input {
    border: 1px solid #00ff88;
    color: #00ffcc;
    box-shadow: inset 0 0 6px rgba(0, 255, 136, 0.5);
}

/* Layout areas */
.betting-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 0.6fr; /* squares | odd/even | spacebars */
    gap: 12px;
    margin-bottom: 12px;
}

.odd-even-packet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spacebar-packet {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: -80px; 
}

.other-contracts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bottom-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Spacebar 3D look */
.spacebar {
    width: 400px;
    height: 60px;
    font-size: 0.85rem;
    padding: 4px;

    background: linear-gradient(145deg, rgba(70, 70, 80, 0.3), rgba(20, 20, 25, 0.3));
    backdrop-filter: blur(6px);
    border: 2px solid currentColor;
    border-radius: 8px;

    box-shadow:
        0 8px 0 rgba(50, 20, 100, 1),             /* bottom base */
        0 12px 18px rgba(0, 0, 0, 0.85),          /* drop shadow */
        inset 0 3px 5px rgba(255, 255, 255, 0.15),/* top highlight */
        inset 0 -4px 8px rgba(0, 0, 0, 0.7);      /* bottom inset */

    transition: all 0.15s ease;
}

.spacebar:hover {
    transform: translateY(-2px);
    box-shadow:
        0 7px 16px rgba(0, 0, 0, 0.7),
        0 0 10px currentColor;
}

.spacebar:active {
    transform: translateY(3px);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.6),
        0 0 6px currentColor;
}


/* Odd/Even circle buttons 3D */
.bet-btn.hex {
    width: 100px;
    height: 70px;
    border-radius: 50%;
    font-size: 0.8rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: linear-gradient(145deg, rgba(70, 70, 80, 0.3), rgba(20, 20, 25, 0.3));
    backdrop-filter: blur(6px);
    border: 2px solid currentColor;

    box-shadow:
        0 6px 0 rgba(50, 20, 100, 1),             /* bottom base */
        0 10px 16px rgba(0, 0, 0, 0.8),           /* drop shadow */
        inset 0 3px 5px rgba(255, 255, 255, 0.15),/* top highlight */
        inset 0 -3px 6px rgba(0, 0, 0, 0.7);      /* bottom inset */

    transition: all 0.15s ease;
}

.bet-btn.hex:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        0 0 10px currentColor;
}

.bet-btn.hex:active {
    transform: translateY(3px);
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.6),
        0 0 6px currentColor;
}

@keyframes orbitStar {
    0%   { top: 0; left: 0; transform: translate(0, -50%); }          /* top-left corner */
    25%  { top: 0; left: 100%; transform: translate(-100%, -50%); }   /* top-right corner */
    50%  { top: 100%; left: 100%; transform: translate(-100%, -50%); }/* bottom-right */
    75%  { top: 100%; left: 0; transform: translate(0, -50%); }       /* bottom-left */
    100% { top: 0; left: 0; transform: translate(0, -50%); }          /* back to start */
}

@keyframes shineMove {
    0%   { transform: translateX(-150%) rotate(25deg); }
    100% { transform: translateX(150%) rotate(25deg); }
}

.betting-tab:not(.active) .bet-btn::after,
.betting-tab:not(.active) .bet-btn::before {
    animation: none !important;
}

.mouse-tab {
    position: fixed;
    bottom: -250px;   /* hidden off screen */
    right: 220px;
    width: 200px;
    height: 250px;

    background: linear-gradient(180deg, rgba(50,50,60,0.8), rgba(20,20,25,0.95));
    border: 3px solid rgba(0, 150, 255, 0.9);

    /* 👇 mouse shape */
    border-radius: 100px 100px 80px 80px / 120px 120px 60px 60px;

    box-shadow: 
        0 -8px 25px rgba(0, 150, 255, 0.9),
        inset 0 6px 12px rgba(255,255,255,0.08),
        inset 0 -8px 15px rgba(0,0,0,0.7);

    transition: bottom 0.6s ease;
    z-index: 9999;
    text-align: center;
    color: white;
    padding: 15px;
}

/* Active state */
.mouse-tab.active {
    bottom: 0;  /* slide up */
}

/* Split buttons like left/right mouse click */
.mouse-buttons {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 15px;
    margin-top: 20px;   /* 👈 add this to push buttons downward */
}

.mouse-btn {
    flex: 1;
    padding: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(145deg, #3a3a3a, #1e1e1e);
    border: 2px solid rgba(0, 150, 255, 0.9);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;

    box-shadow: 0 4px 0 rgba(0,0,0,0.6),
                0 6px 12px rgba(0,0,0,0.8);
}

.mouse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(0,0,0,0.6),
                0 10px 15px rgba(0,0,0,0.9);
}

.mouse-btn:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 rgba(0,0,0,0.6),
                0 6px 10px rgba(0,0,0,0.7);
}

.mouse-extra {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;  /* spacing below main mouse buttons */
}

.mouse-btn.green {
    border-color: #00ff66;
    color: #00ff66;
    text-shadow: 0 0 6px #00ff66;
}

.mouse-btn.red {
    border-color: #ff4444;
    color: #ff4444;
    text-shadow: 0 0 6px #ff4444;
}

.mouse-btn.left.active {
    background: #0affef;
    color: #000;
    box-shadow: 0 0 10px #0affef, 0 0 20px #00ffff;
    transform: scale(1.05);
}

.sticker {
    display: inline-block;
    animation: floatSticker 0.5s ease-in-out infinite;
}

@keyframes floatSticker {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes neonPulse {
    0%, 50% {
        box-shadow:
            0 0 12px rgba(0, 150, 255, 0.9),
            0 0 24px rgba(0, 150, 255, 0.6),
            inset 0 0 10px rgba(0, 150, 255, 0.8),
            inset 0 0 20px rgba(0, 150, 255, 0.5);
}
10% {
    box-shadow:
        0 0 18px rgba(0, 200, 255, 1),
        0 0 36px rgba(0, 200, 255, 0.8),
        inset 0 0 16px rgba(0, 200, 255, 1),
        inset 0 0 28px rgba(0, 200, 255, 0.7);
}
}

.betting-tab::after {
    animation: neonPulse 20s ease-in-out infinite;
}

/* Spacebar style (Bearish / Bullish) */
.bet-btn.spacebar.red {
    border-color: #ff4444 !important;
    color: #ff4444 !important;
    text-shadow: 0 0 6px #ff4444 !important;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
}

.bet-btn.spacebar.green {
    border-color: #00ff66 !important;
    color: #00ff66 !important;
    text-shadow: 0 0 6px #00ff66 !important;
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.6) !important;
}

.jackpot-tab {
    margin-top: 10px;
    padding: 5px; /* 👈 pehle 20px tha */
    background: rgba(30, 30, 30, 0.2); /* semi-transparent glass */
    backdrop-filter: blur(8px);        /* frosted glass effect */
    border-radius: 12px;
    border: 2px solid rgba(255, 215, 0, 0.5); /* golden glass border */
    text-align: center;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.1),         /* depth shadow */
        inset 0 2px 4px rgba(255, 255, 255, 0.1), /* subtle top highlight */
        inset 0 -3px 6px rgba(0, 0, 0, 0.6);      /* subtle bottom depth */
}

/* Jackpot input */
.cube-input {
    width: 140px;
    padding: 10px;
    font-size: 1rem;
    text-align: center;
    margin: 10px 0;
    border-radius: 8px;
    border: 2px solid #ffcc33;
    background: linear-gradient(145deg, #111, #222);
    color: #fff;
    font-weight: bold;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.8),
        inset 0 -3px 6px rgba(255, 215, 0, 0.2);
}

/* Jackpot Button */
.jackpot-btn {
    margin-top: 12px;
    padding: 8px 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;

    background: linear-gradient(145deg, #ffcc00, #ff9900);
    border: 2px solid #ffd700;
    border-radius: 10px;

    box-shadow:
        0 6px 0 #b38300,                  /* thick bottom base (3D key look) */
        0 10px 20px rgba(0,0,0,0.6),      /* deep shadow */
        inset 0 3px 5px rgba(255,255,255,0.4), /* top glossy highlight */
        inset 0 -4px 8px rgba(0,0,0,0.4);      /* bottom depth */

    cursor: pointer;
    transition: all 0.15s ease;
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
}

/* Hover effect */
.jackpot-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 0 #b38300,
        0 14px 24px rgba(0,0,0,0.7),
        inset 0 3px 6px rgba(255,255,255,0.5),
        inset 0 -5px 10px rgba(0,0,0,0.5);
}

/* Active (pressed) effect */
.jackpot-btn:active {
    transform: translateY(3px);
    box-shadow:
        0 3px 0 #b38300,
        0 6px 12px rgba(0,0,0,0.7),
        inset 0 2px 4px rgba(255,255,255,0.3),
        inset 0 -3px 6px rgba(0,0,0,0.6);
}

.jackpot-tab label {
    display: block;
    font-size: 1rem;            /* same size */
    font-weight: bold;
    color: #ffd700;             /* golden base */
    text-transform: uppercase;
    letter-spacing: 1px;

    /* 3D text effect */
    text-shadow:
        0 1px 0 #b38300,          /* bottom hard edge */
        0 2px 0 #8c6a00,          /* deeper edge */
        0 3px 3px rgba(0,0,0,0.6),/* soft shadow */
        0 0 8px rgba(255,215,0,0.6); /* glowing gold aura */

    position: relative;
    overflow: hidden;           /* for shine animation */
}

/* Shine sweep animation */
.jackpot-tab label::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 70%
    );
    transform: skewX(-20deg);
    animation: shineLabel 4s infinite;
}

@keyframes shineLabel {
    0% { left: -100%; }
    60% { left: 120%; }
    100% { left: 120%; }
}

.cube-input::-webkit-outer-spin-button,
.cube-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cube-input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* Amount (smaller sibling input) */
.cube-amount {
    width: 80px;
    padding: 8px;
    font-size: 0.9rem;
    text-align: center;
    border-radius: 6px;
    border: 2px solid #ffcc33;
    background: linear-gradient(145deg, #111, #222);
    color: #fff;
    font-weight: bold;
    box-shadow:
        inset 0 3px 6px rgba(0,0,0,0.8),
        inset 0 -3px 6px rgba(255, 215, 0, 0.2);
}

.bet-multiplier-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 15px 0;

    background: rgba(30, 30, 30, 0.4);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 215, 0, 0.5);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow:
        0 6px 12px rgba(0,0,0,0.6),
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -3px 6px rgba(0,0,0,0.5);
}

/* Input */
.mult-input {
    width: 40px;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid #ffd700;
    border-radius: 6px;
    background: linear-gradient(145deg, #111, #222);
    color: #fff;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.8),
        inset 0 -2px 4px rgba(255,215,0,0.2);
    
    -moz-appearance: textfield;	
}

/* Plus & Minus buttons */
.mult-btn {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    background: linear-gradient(145deg, #ffcc00, #ff9900);
    border: 2px solid #ffd700;
    border-radius: 50%;
    cursor: pointer;

    box-shadow:
        0 4px 0 #b38300,
        0 6px 12px rgba(0,0,0,0.6),
        inset 0 2px 4px rgba(255,255,255,0.4),
        inset 0 -3px 6px rgba(0,0,0,0.4);

    transition: all 0.15s ease;
}

.mult-btn:hover {
    transform: translateY(-2px);
}

.mult-btn:active {
    transform: translateY(2px);
}

.mult-input::-webkit-outer-spin-button,
.mult-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mult-label {
    margin-left: 12px;
    font-size: 0.95rem;
    font-weight: bold;
    color: #ffd700; /* gold casino style */
    font-family: 'Orbitron', sans-serif; /* digital/casino font */
    text-shadow:
        0 1px 0 #000,
        0 0 6px rgba(255,215,0,0.7);
    white-space: nowrap; /* prevent wrapping */
}

.bet-screen {
    margin-top: 6px;
    width: 50px;
    height: 16.9px;
    line-height: 26px;
    font-size: 0.69rem;
    font-weight: bold;
    text-align: center;
    border-radius: 4px;

    background: 
        repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 2px,
        transparent 2px,
        transparent 6px
        ),
        rgba(15, 15, 15, 0.95); /* dark with subtle diagonal lines */

    border: 1px solid #000;  /* thinner border */
    color: #fff;             /* white numbers */
    font-family: 'Courier New', monospace; /* terminal font */
}

:root{
    --accent: #00d2ff;
    --muted: #98a3b3;
    --bg-panel: rgba(10,10,14,0.6);
    --glass: rgba(255,255,255,0.03);
}

/* Upper Mood Tab (duplicate of mood-tab) */
.mood-tab-secondary {
    position: fixed;
    left: 8px;
    top: 16%;              /* ⬆️ ABOVE the main one */
    transform: translateY(-50%);
    width: 34px;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: width 300ms cubic-bezier(.2,.9,.2,1);
    border-radius: 12px;
    overflow: visible;
}

.mood-tab-secondary.expanded {
    width: 110px;
}

/* === Mood Tab (viewport-scaled) === */
.mood-tab {
    position: fixed;
    left: 8px;
    top: 48%;
    transform: translateY(-50%);
    width: 34px;   /* collapsed width */
    height: 220px; /* height fixed */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    isolation: isolate;   /* 🔥 VERY IMPORTANT */
    transition: width 300ms cubic-bezier(.2,.9,.2,1);
    border-radius: 12px;
    overflow: visible;
}
.mood-tab.expanded { width: 110px; }

.mood-card {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,var(--bg-panel), rgba(7,7,12,0.7));
    border: 1px solid rgba(0,200,255,0.12);
    box-shadow: 0 6px 26px rgba(0,200,255,0.04);
    border-radius: 12px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center; /* gauge centered */
}

/* NEW CYLINDRICAL GAUGE */
.mood-gauge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(0,0,0,0.2));
    mix-blend-mode: overlay; /* glossy look */
    pointer-events: none;
    z-index: 1;
}

/* toggle button (small vertical tab) */
.mood-toggle {
    position: absolute;
    right: -34px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 80px;
    border-radius: 8px;
    border: 1px solid rgba(0,200,255,0.08);
    background: linear-gradient(180deg, rgba(10,10,12,0.9), rgba(8,8,14,0.95));
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    color:var(--accent);
    font-family: 'Orbitron',sans-serif;
    font-size: 12px;
    writing-mode: vertical-rl;
    letter-spacing: 1px;
    z-index: 1;
}

/* collapsed visual tweaks */
.mood-tab.collapsed .gauge-label { display:none; }
.mood-characteristic {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    text-align: center;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0,210,255,0.25);
    background: rgba(10, 10, 18, 0.55);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(0,200,255,0.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.status-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: flex-start;
}

.status-block, .stats-block {
    flex: 1;
}

.stats-block h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    color: var(--accent);
    letter-spacing: 2px;
    margin: 0 0 12px;
    text-shadow: 0 0 8px var(--accent);
}

.stats-list {
    font-size: 13px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-item span {
    color: #fff;
    font-weight: bold;
}

/* ===== Retro Active Phase ===== */
.status-item {
    position: relative;
    padding: 6px 10px;
    font-family: 'Orbitron', sans-serif;
    color: var(--muted);
    transition: all 0.25s ease;
    overflow: hidden;
    border-radius: 4px;
}

/* White glowing rectangle when active */
.status-item.active {
    color: #000;
    background: rgba(255,255,255,0.9);
    box-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 20px rgba(255,255,255,0.3);
    text-shadow: 0 0 3px #000;
    transform: scale(1.03);
}

/* optional arcade flicker effect */
@keyframes arcadePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}
.status-item.active {
    animation: arcadePulse 1s infinite;
}

.top-players {
    margin-top: 16px;
    padding: 10px;
    background: rgba(5,5,9,0.85);
    border: 1px solid rgba(0,200,255,.2);
    border-radius: 10px;
}

.top-players h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    margin: 0 0 10px;
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent);
}

.player-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 150px; /* keeps it compact */
    overflow-y: auto;  /* scroll if more players */
}

.player-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--muted);
    padding: 4px 12px 4px 0; /* 👈 added right padding */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.player-item:last-child {
    border-bottom: none;
}

.player-id {
    font-weight: 600;
    color: #ccc;
}

.player-amount {
    font-family: 'Orbitron', sans-serif;
    color: #00ffae; /* neon green for amounts */
}

/* Stylish scrollbar for player list */
.player-list::-webkit-scrollbar {
    width: 6px;                /* thin scrollbar */
}

.player-list::-webkit-scrollbar-track {
    background: rgba(0, 200, 255, 0.05); /* faint neon glow track */
    border-radius: 6px;
}

.player-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d2ff, #0077ff);
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.6);
}

.player-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ffea, #0088ff);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.9);
}

/* Firefox scrollbar (experimental, works in newer versions) */
.player-list {
    scrollbar-width: thin;
    scrollbar-color: #00d2ff rgba(0, 200, 255, 0.05);
}

/* Base floating tab */
.insurance-tab {
    position: fixed;
    bottom: 230px;
    left: 150px;
    width: 240px;
    background: rgba(10, 10, 15, 0.95);
    border: 1px solid rgba(0, 200, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    z-index: 9999;
    cursor: grab;
    user-select: none;
}

/* Header (always visible) */
.insurance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: bold;
    background: linear-gradient(90deg, rgba(0,200,255,0.15), rgba(0,200,255,0.05));
    border-bottom: 1px solid rgba(0,200,255,0.3);
    border-radius: 12px 12px 0 0;
}

.insurance-title {
    color: var(--accent, #00d2ff);
    text-shadow: 0 0 6px rgba(0, 210, 255, 0.5);
}

.insurance-toggle {
    color: #ff5555;
    background: rgba(255, 85, 85, 0.2);
    border: 1px solid rgba(255, 85, 85, 0.5);
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s ease;
}
.insurance-toggle.on {
    color: #00ff88;
    background: rgba(0, 255, 136, 0.2);
    border: 1px solid rgba(0, 255, 136, 0.5);
}

/* Body (hidden by default) */
.insurance-body {
    display: none;
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
    background: rgba(15,15,20,0.9);
    border-radius: 0 0 12px 12px;
}
.insurance-tab.open .insurance-body {
    display: block;
}

/* 1️⃣ PROFILE BUTTON (Nishad You!) */
.insurance-board {
    position: fixed !important;
    top: 20px !important; /* first button */
    right: 0 !important;
    width: 120px;
    height: 50px;
    background: rgba(20, 20, 35, 0.95);
    border: 2px solid rgba(150, 0, 255, 0.8);
    border-radius: 8px 0 0 8px;
    color: #c77dff;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(150, 0, 255, 0.7),
                0 0 20px rgba(150, 0, 255, 0.6),
                inset 0 0 10px rgba(150, 0, 255, 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 99999;
}
.insurance-board:hover {
    transform: translateX(-5px) rotate(-2deg);
    box-shadow: 0 0 20px rgba(180, 0, 255, 0.9),
                0 0 40px rgba(180, 0, 255, 0.8),
                inset 0 0 15px rgba(180, 0, 255, 0.6);
}
.insurance-board:active {
    transform: scale(0.95);
    box-shadow: 0 0 25px rgba(200, 0, 255, 1),
                0 0 50px rgba(200, 0, 255, 0.8),
                inset 0 0 20px rgba(200, 0, 255, 0.7);
}

/* 1️⃣ PROFILE BUTTON (Nishad You!) */
.nishad-board {
    position: fixed !important;
    top: 80px !important; /* first button */
    right: 0 !important;
    width: 120px;
    height: 50px;
    background: rgba(20, 20, 35, 0.95);
    border: 2px solid rgba(150, 0, 255, 0.8);
    border-radius: 8px 0 0 8px;
    color: #c77dff;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(150, 0, 255, 0.7),
                0 0 20px rgba(150, 0, 255, 0.6),
                inset 0 0 10px rgba(150, 0, 255, 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 99999;
}
.nishad-board:hover {
    transform: translateX(-5px) rotate(-2deg);
    box-shadow: 0 0 20px rgba(180, 0, 255, 0.9),
                0 0 40px rgba(180, 0, 255, 0.8),
                inset 0 0 15px rgba(180, 0, 255, 0.6);
}
.nishad-board:active {
    transform: scale(0.95);
    box-shadow: 0 0 25px rgba(200, 0, 255, 1),
                0 0 50px rgba(200, 0, 255, 0.8),
                inset 0 0 20px rgba(200, 0, 255, 0.7);
}

/* 2️⃣ WALLET BUTTON */
.numbers-board {
    position: fixed;
    top: 140px; /* directly below Nishad button (80 + 50 + 10 gap) */
    right: 0;
    width: 120px;
    height: 50px;
    background: rgba(20, 35, 20, 0.95);
    border: 2px solid rgba(0, 255, 100, 0.8);
    border-radius: 8px 0 0 8px;
    color: #00ff9d;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 255, 100, 0.7),
                0 0 20px rgba(0, 255, 100, 0.6),
                inset 0 0 10px rgba(0, 255, 100, 0.4);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    z-index: 9999;
}
.numbers-board:hover {
    transform: translateX(-5px) rotate(-2deg);
    box-shadow: 0 0 20px rgba(0, 255, 120, 0.9),
                0 0 40px rgba(0, 255, 120, 0.8),
                inset 0 0 15px rgba(0, 255, 120, 0.6);
}
.numbers-board:active {
    transform: scale(0.95);
    box-shadow: 0 0 25px rgba(0, 255, 120, 1),
                0 0 50px rgba(0, 255, 120, 0.8),
                inset 0 0 20px rgba(0, 255, 120, 0.7);
}

/* 3️⃣ LOGOUT BUTTON */
.logout-board {
    position: fixed !important;
    top: 200px !important; /* below Wallet (140 + 50 + 10 gap) */
    right: 0 !important;
    width: 120px;
    height: 50px;
    background: rgba(20, 20, 35, 0.95);
    border: 2px solid rgba(255, 0, 100, 0.8);
    border-radius: 8px 0 0 8px;
    color: #ff66cc;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 150, 0.7),
                0 0 20px rgba(255, 0, 150, 0.6),
                inset 0 0 10px rgba(255, 0, 150, 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 99999;
}
.logout-board:hover {
    transform: translateX(-5px) rotate(-2deg);
    box-shadow: 0 0 25px rgba(255, 0, 150, 0.9),
                0 0 50px rgba(255, 0, 150, 0.8),
                inset 0 0 15px rgba(255, 0, 150, 0.6);
}
.logout-board:active {
    transform: scale(0.95);
    box-shadow: 0 0 35px rgba(255, 0, 150, 1),
                0 0 60px rgba(255, 0, 150, 0.9),
                inset 0 0 25px rgba(255, 0, 150, 0.8);
}

.signup-board {
    position: fixed !important;
    top: 260px !important;
    right: 0 !important;
    width: 150px;
    height: 35px;
    background: rgba(20, 20, 35, 0.95);
    border: 2px solid rgba(255, 0, 100, 0.8);
    border-radius: 8px 0 0 8px;
    color: #ff66cc;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 0 10px rgba(255, 0, 150, 0.7),
                0 0 20px rgba(255, 0, 150, 0.6),
                inset 0 0 10px rgba(255, 0, 150, 0.4);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 99999;
}

.signup-board:hover {
    transform: translateX(-5px) rotate(-2deg);
    box-shadow: 0 0 25px rgba(255, 0, 150, 0.9),
                0 0 50px rgba(255, 0, 150, 0.8),
                inset 0 0 15px rgba(255, 0, 150, 0.6);
}
.signup-board:active {
    transform: scale(0.95);
    box-shadow: 0 0 35px rgba(255, 0, 150, 1),
                0 0 60px rgba(255, 0, 150, 0.9),
                inset 0 0 25px rgba(255, 0, 150, 0.8);
}

.signup-board{
    overflow: visible;
}

@keyframes signupGlow {
  0%,100% { 
    box-shadow: 0 0 10px rgba(255, 0, 150, 0.7),
                0 0 20px rgba(255, 0, 150, 0.6),
                inset 0 0 10px rgba(255, 0, 150, 0.4);
  }
  50% { 
    box-shadow: 0 0 20px rgba(255, 0, 150, 1),
                0 0 45px rgba(255, 0, 150, 0.9),
                0 0 70px rgba(255, 0, 150, 0.5),
                inset 0 0 20px rgba(255, 0, 150, 0.7);
  }
}

.signup-board {
  animation: signupGlow 3.0s ease-in-out infinite;
}

/* tooltip css styles up */
.tooltip-box {
    position: fixed; /* fixed to viewport */
    background: rgba(10, 10, 15, 0.95);
    color: #0ff;
    font-size: 12px;
    font-family: "Orbitron", monospace;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 255, 200, 0.4);
    box-shadow: 0 0 10px rgba(0,255,200,0.4);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    /* 🚀 always above everything */
    z-index: 999999;  
    white-space: nowrap;
}

/* Reuse your bet-screen but slightly taller */
#contractValueScreen.bet-screen {
    width: 90px;
    height: 30px;
    font-size: 1.1rem;
    line-height: 30px;
    border-radius: 4px;
    background: 
        repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05) 0px,
        rgba(255, 255, 255, 0.05) 2px,
        transparent 2px,
        transparent 6px
        ),
        rgba(15, 15, 15, 0.95);
    border: 1px solid #000;
    color: #00ffcc; /* neon cyan for digits */
    font-family: 'Courier New', monospace;
    text-align: center;
    box-shadow: 0 0 6px rgba(0, 255, 200, 0.4) inset;
}

.usdt-sticker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;   /* 👈 smaller than number */
    height: 14px;  /* same height as font */
    margin-left: 4px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0; /* prevent stretching */
    top: 1px; 
}

.usdt-sticker img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* NEW CYLINDRICAL GAUGE */
.mood-gauge {
    width: 50px;
    height: 160px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    background: #0a0a0a;
    box-shadow: inset 0 -6px 12px rgba(0,0,0,0.6),
                inset 0 6px 12px rgba(255,255,255,0.15);
    margin-top: 50px;
    transition: box-shadow 0.4s ease;
}

.gauge-frame {
    width: 100%;
    height: 100%;
    position: relative;
}

.gauge-red,
.gauge-green {
    width: 100%;
    transition: height 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth movement */
    position: absolute;
    left: 0;
}

.gauge-red {
    top: 0;
    background: linear-gradient(180deg, #ff5c5c, #cc0000);
    box-shadow: inset 0 -4px 6px rgba(0,0,0,0.4);
}

.gauge-green {
    bottom: 0;
    background: linear-gradient(180deg, #00e676, #009944);
    box-shadow: inset 0 4px 6px rgba(0,0,0,0.35);
}

/* Gloss overlay */
.gauge-overlay {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(0,0,0,0.25));
    mix-blend-mode: overlay;
    pointer-events: none;
}

.gauge-label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-size: 9px;
    text-shadow: 0 0 8px rgba(0,0,0,0.6);
    transition: opacity .3s ease;
}

/* Border glow animation */
@keyframes greenGlow {
    0% { box-shadow: 0 0 6px rgba(0,255,120,0.3), 0 0 12px rgba(0,255,120,0.3); }
    100% { box-shadow: 0 0 14px rgba(0,255,120,0.8), 0 0 30px rgba(0,255,120,0.9); }
}

@keyframes redGlow {
    0% { box-shadow: 0 0 6px rgba(255,80,80,0.3), 0 0 12px rgba(255,80,80,0.3); }
    100% { box-shadow: 0 0 14px rgba(255,80,80,0.8), 0 0 30px rgba(255,80,80,0.9); }
}

/* ============================= */
/* Reconnect Overlay */
/* ============================= */
.reconnect-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnect-overlay.hidden {
    display: none;
}

.reconnect-box {
    background: rgba(20, 20, 20, 0.85);
    border-radius: 12px;
    padding: 28px 36px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);

    min-width: 420px;   /* 👈 ADD THIS */
}

.reconnect-text {
    font-size: 18px;
    font-weight: 600;
    margin-top: 14px;
}

.reconnect-sub {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 6px;
}

.reconnect-sub2 {
    font-size: 13px;
    font-style: italic;     /* italic */
    font-weight: 600;       /* bold but not too heavy */
    opacity: 0.75;
    margin-top: 8px;        /* pushes it slightly below reconnect-sub */
}

.reconnect-fact {
    margin-top: 14px;
    font-size: 13px;
    opacity: 0.85;
    color: #66e0ff;
}


/* ============================= */
/* Cu.e Brand Loader */
/* ============================= */

.cube-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    margin: 0 auto;

    font-size: 28px;
    font-weight: 800;
    font-family: "Orbitron", "Inter", system-ui, sans-serif;
    letter-spacing: 0.5px;
}

.cube-loader span {
    color: #e5e7eb;
    opacity: 0;
    transform: translateY(6px) scale(0.95);

    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.35),
        0 0 14px rgba(0, 255, 204, 0.55),
        0 0 28px rgba(0, 255, 204, 0.35);

    animation: cubeLetter 2.4s ease-in-out infinite;
}

/* Sequential delays */
.cube-loader span:nth-child(1) { animation-delay: 0s; }
.cube-loader span:nth-child(2) { animation-delay: 0.15s; }
.cube-loader span:nth-child(3) { animation-delay: 0.3s; }
.cube-loader span:nth-child(4) { animation-delay: 0.45s; }

@keyframes cubeLetter {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.95);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80% {
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
    }
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.price-move {
    font-weight: 600;
    transition: color 0.3s ease;
    display: inline-block;            /* 🔥 REQUIRED */
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.price-up {
    color: #22c55e; /* green */
}

.price-down {
    color: #ef4444; /* red */
}

.price-flat {
    color: #9ca3af; /* gray */
}

.pop {
    animation: popOut 0.45s ease-out;
}

@keyframes popOut {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }
    60% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
    }
}

/* ===============================
Ingame Stats Overlay
================================ */
.ingame-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 16px 0;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    transition: all 0.35s ease;
}

.ingame-stats.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ingame-stats.hidden {
    display: none;
}

/* Individual stat box */
.stat-box {
    height: 50px;
    border-radius: 10px;
    padding: 4px 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.6)),
        #070711;
    border: 1px solid rgba(255,255,255,0.18);

    box-shadow:
        0 0 14px rgba(0,0,0,0.8),
        inset 0 0 8px rgba(255,255,255,0.08);

    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: monospace;
    text-align: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}


/* Title */
.stat-title {
    font-size: 10px;
    letter-spacing: 0.8px;
    opacity: 0.75;
    text-transform: uppercase;
}

.stat-value {
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
    text-shadow: 0 0 6px currentColor;
}

/* Color themes */
.stat-box.gold {
    color: #ffd700;
    border-color: rgba(255,215,0,0.8);
    box-shadow:
        0 0 12px rgba(255,215,0,0.35),
        inset 0 0 8px rgba(255,215,0,0.25);
}

.stat-box.red {
    color: #ff4d4d;
    border-color: rgba(255,80,80,0.8);
    box-shadow:
        0 0 12px rgba(255,80,80,0.35),
        inset 0 0 8px rgba(255,80,80,0.25);
}

.stat-box.blue {
    color: #4db8ff;
    border-color: rgba(80,160,255,0.8);
    box-shadow:
        0 0 12px rgba(80,160,255,0.35),
        inset 0 0 8px rgba(80,160,255,0.25);
}

.stat-box.purple {
    color: #c77dff;
    border-color: rgba(180,100,255,0.85);
    box-shadow:
        0 0 14px rgba(180,100,255,0.4),
        inset 0 0 8px rgba(180,100,255,0.3);
}

.stat-box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.12),
        transparent 70%
    );
    opacity: 0.2;
    pointer-events: none;
}

@keyframes neonBreath {
    0% {
        filter: brightness(1) saturate(1.1);
        box-shadow:
        0 0 12px rgba(0,0,0,0.8),
        inset 0 0 8px rgba(255,255,255,0.15);
    }
    50% {
        filter: brightness(1.45) saturate(1.3);
        box-shadow:
        0 0 22px currentColor,
        0 0 40px rgba(255,255,255,0.25),
        inset 0 0 14px currentColor;
    }
    100% {
        filter: brightness(1) saturate(1.1);
        box-shadow:
        0 0 12px rgba(0,0,0,0.8),
        inset 0 0 8px rgba(255,255,255,0.15);
    }
}
.stat-box {
    animation: neonBreath 6.4s ease-in-out infinite;
}

.cube-exit {
    animation: cubeFadeOut 0.45s ease forwards;
}

@keyframes cubeFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.85);
        filter: blur(6px);
    }
}

.ingame-stats.enter {
    animation: statsEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes statsEnter {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.92);
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
        filter: blur(1px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.ingame-stats.exit {
    animation: statsExit 0.4s ease forwards;
}

@keyframes statsExit {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(6px);
    }
}

.price-fly {
    animation: priceFlyIn 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes priceFlyIn {
    0% {
        transform: translateZ(-360px) scale(0.65);
        opacity: 0;
    }
    60% {
        transform: translateZ(260px) scale(1.28);
        opacity: 1;
    }
    100% {
        transform: translateZ(0) scale(1);
        opacity: 1;
    }
}

/* =========================
    SESSION OVERLAY
========================= */

.session-overlay {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(0,200,255,0.08), transparent 40%),
        rgba(5,5,15,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    overflow: hidden;
    pointer-events: auto;
}

.session-overlay.hidden {
    display: none;
}

.overlay-container {

    width: min(1100px, 92vw);
    background: #070711;
    border-radius: 18px;
    border: 1px solid rgba(0,200,255,0.25);
    box-shadow: 0 0 40px rgba(0,200,255,0.2);
    padding: 26px;
    animation: overlayIn 0.6s ease-out;
    position: relative;
    z-index: 2;
    pointer-events: auto;

}

@keyframes overlayIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Header */
.overlay-header {
    text-align: center;
    margin-bottom: 20px;
}

.overlay-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    letter-spacing: 3px;
    color: #00c8ff;
    text-shadow: 0 0 12px #00c8ff;
}

.overlay-subtitle {
    font-size: 14px;
    color: #9ca3af;
    margin-top: 6px;
}

/* Grid */
.overlay-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Panels */
.overlay-panel {
    background: #0a0a16;
    border-radius: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
}

.panel-title {
    font-size: 15px;
    letter-spacing: 1px;
    color: #facc15;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* Tables */
.data-table {

    display: block;
    grid-template-columns: 1fr auto;
    row-gap: 10px;
    column-gap: 10px;
    font-family: monospace;
}

.data-row {
    display: contents;
}

.data-key {
    color: #e5e7eb;
}

.data-value {
    color: #22c55e;
    font-weight: 700;
}

/* Footer */
.overlay-footer {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.glow-pill {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,215,0,0.6);
    color: gold;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

/* High payout highlight ( >10x ) */
.data-row.high-risk .data-key {
    color: #ffb703;
    text-shadow: 0 0 6px rgba(255, 183, 3, 0.6);
}

.data-row.high-risk .data-value {
    color: #ffb703;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(255, 183, 3, 0.8);
}

/* Insurance premium (cost / penalty) */
.data-row.insurance .data-key {
    color: #f87171; /* soft red */
}

.data-row.insurance .data-value {
    color: #b91c1c; /* dark red */
    font-weight: 800;
    text-shadow: 0 0 6px rgba(185, 28, 28, 0.6);
}

/* =========================
    BASS-REACTIVE BACKGROUND
========================= */

.session-overlay::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 0;
    pointer-events: none;

    background:
        radial-gradient(
        circle at 20% 30%,
        rgba(0, 255, 255, 0.55),
        transparent 35%
        ),
        radial-gradient(
        circle at 80% 70%,
        rgba(180, 80, 255, 0.55),
        transparent 40%
        ),
        radial-gradient(
        circle at 50% 50%,
        rgba(0, 255, 180, 0.45),
        transparent 50%
        );

    animation: bassPulseVivid 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    mix-blend-mode: screen;
    filter: blur(2px);
}

@keyframes bassPulseVivid {
    0% {
        transform: scale(1) translateY(0);
        opacity: 0.45;
        filter: brightness(1.1) saturate(1.4);
    }

    30% {
        transform: scale(1.12) translateY(-3%);
        opacity: 0.95;
        filter: brightness(1.9) saturate(2.1);
    }

    55% {
        transform: scale(1.08) translateY(2%);
        opacity: 0.75;
        filter: brightness(1.5) saturate(1.8);
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 0.45;
        filter: brightness(1.1) saturate(1.4);
    }
}

.stats-btn {
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 1px;
    border-radius: 999px;
    border: 1px solid rgba(0,200,255,0.6);
    background: rgba(0,200,255,0.08);
    color: #00eaff;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 0 12px rgba(0,200,255,0.25);
}

.stats-btn:hover {
    background: rgba(0,200,255,0.18);
    box-shadow: 0 0 18px rgba(0,200,255,0.45);
    transform: translateY(-1px);
}

.stats-btn.secondary {
    border-color: rgba(255,255,255,0.25);
    color: #e5e7eb;
    background: rgba(255,255,255,0.05);
}

/* ==============================
CONTRACT SUMMARY CONTAINER
============================== */

.contract-table-wrapper {

    display: block;      /* 🔥 force vertical flow */
    height: 220px;       /* 🔥 fixed viewport */
    max-height: 220px;

    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 6px;
    box-sizing: border-box;

}

/* ==============================
CONTRACT ROW GRID
============================== */

#contractSummaryTable {
    width: 100%;
    box-sizing: border-box;
    display: block;     
}

.contract-row {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr;
    align-items: center;
    gap: 8px;

    width: 100%;
    box-sizing: border-box;

    padding: 6px 4px;
    font-size: 12px;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: #ddd;
}

/* Header */
.contract-header {
    font-size: 11px;
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    padding-bottom: 8px;
}

/* Prevent wrap + overlap */
.contract-row span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Alignment */
.contract-name {
    text-align: left;
}

.contract-amount {
    text-align: center;
    color: #ffffff;
}

.contract-pnl {
    text-align: right;
    font-weight: 600;
}

/* PnL colors */
.pnl-positive {
    color: #2ecc71;
}

.pnl-negative {
    color: #ff5c5c;
}

/* ==============================
SCROLLBAR — DARK TERMINAL STYLE
============================== */

.contract-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.contract-table-wrapper::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
}

.contract-table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(0,255,200,0.7),
        rgba(0,180,255,0.7)
    );
    border-radius: 6px;
}

.contract-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(0,255,220,0.9),
        rgba(0,200,255,0.9)
    );
}

/* Entire panel must not grow */
.overlay-panel {

    display: flex;
    flex-direction: column;
    min-height: 0; /* 🔥 VERY IMPORTANT */
}

.hidden {
    display: none !important;
}

.signup-btn {
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7f00ff, #e100ff);
    color: white;
    font-weight: 600;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(127, 0, 255, 0.4);
}

.signup-btn:hover {
    transform: scale(1.05);
}

/* ================================
🧠 AI CORE (Nishad / Regime)
================================ */

#ai-core {

    position: fixed;
    top: 18px;
    left:  calc(100vw - 150px - 96px); /* ⬅️ initial visual position */
    width: 96px;
    height: 96px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;

    /* 👇 NEW */
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

#ai-core:active {
    cursor: grabbing;
}

.core-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 30%,
            #475569 0%,     /* highlight */
            #1e293b 50%,    /* body */
            #0f172a 75%,    /* depth */
            #020617 100%    /* edge */
        );

    box-shadow:
        inset 0 0 0 1px rgba(148, 163, 184, 0.22),
        inset 0 -6px 14px rgba(255, 255, 255, 0.05);
}

.core-glow {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    opacity: 0;
    filter: blur(18px);

    background: radial-gradient(
        circle,
        rgba(248, 250, 252, 0.75),   /* near-white center */
        rgba(226, 232, 240, 0.35),   /* soft silver */
        rgba(148, 163, 184, 0.15),   /* faint steel */
        transparent 72%
    );

    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;

}

/* 🔊 ACTIVE STATE */
#ai-core.active .core-glow {
    opacity: 0.5;
    transform: scale(2.08);
}

#ai-core.active .core-inner {
    filter: brightness(2.52) contrast(1.16);
}

.core-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.22);
    pointer-events: none;
}

.core-logo {

    position: absolute;
    inset: 8%;               /* controls logo size */
    border-radius: 50%;
    background-image: url("/assets/images/NV1.0.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;

    /* Premium integration */
    opacity: 0.9;
    filter: drop-shadow(0 0 6px rgba(248, 250, 252, 0.25));
    mix-blend-mode: screen;
}

.ai-tooltip {
    position: absolute;
    right: 110%;
    top: 50%;
    transform: translateY(-50%) translateX(6px);

    padding: 6px 12px;
    border-radius: 8px;

    background: rgba(15, 23, 42, 0.95);
    color: #e5e7eb;

    font-size: 12px;
    font-family: "Inter", "Roboto Mono", system-ui, monospace;
    letter-spacing: 0.3px;
    white-space: nowrap;

    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow:
        0 0 12px rgba(148, 163, 184, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

#ai-core:hover .ai-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

.reconnect-text .dots::after {
    content: "";
    display: inline-block;
    width: 1em;
    text-align: left;
    animation: dots 1.4s infinite steps(4);
}

@keyframes dots {
    0%   { content: ""; }
    25%  { content: "."; }
    50%  { content: ".."; }
    75%  { content: "..."; }
    100% { content: ""; }
}

.high-multiplier {
    color: #00e676;
    font-weight: 700;
}

.insurance-value {
    color: #ffb300;
    font-weight: 600;
}

.stat-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.usdt-sticker img {
    width: 16px;
    height: 16px;
    display: block;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* VERY IMPORTANT */
.pill-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
    transform: scale(1.4);   /* visually larger */
    display: inline-block;
}

.mult-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mult-usdt-icon {
    width: 21px;   /* Bigger than previous 16px */
    height: 21px;
    object-fit: contain;
    display: inline-block;
}

.start-board {
    position: fixed !important;
    top: 400px !important;
    right: 0 !important;
    width: 120px;
    height: 50px;
    background: rgba(35, 25, 5, 0.95);
    border: 2px solid rgba(255, 190, 0, 0.9);
    border-radius: 8px 0 0 8px;
    color: #ffcc33;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    box-shadow:
        0 0 12px rgba(255, 200, 0, 0.8),
        0 0 25px rgba(255, 180, 0, 0.7),
        inset 0 0 12px rgba(255, 180, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 99999;
    animation: startGlow 2.5s ease-in-out infinite;
}

.start-board:hover {
    transform: translateX(-6px) rotate(-2deg);
    box-shadow:
        0 0 20px rgba(255, 210, 0, 1),
        0 0 40px rgba(255, 180, 0, 0.9),
        inset 0 0 15px rgba(255, 200, 0, 0.7);
}

.start-board:active {
    transform: scale(0.95);
}

@keyframes startGlow {
    0% { box-shadow: 0 0 8px rgba(255,200,0,0.6); }
    50% { box-shadow: 0 0 22px rgba(255,200,0,1); }
    100% { box-shadow: 0 0 8px rgba(255,200,0,0.6); }
}

/* ============================
EXPOSURE PANEL (Bloomberg)
============================ */

.exposure-panel {
    margin-top: 18px;
    background: #0a1118;
    border: 1px solid rgba(0, 200, 255, 0.18);
    padding: 14px;
}

/* Header */
.exposure-header {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #4db8ff;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Scroll wrapper */
.exposure-table-wrapper {
    max-height: 140px;
    overflow-y: auto;
}

/* Table */
.exposure-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-family: 'Courier New', monospace;
}


/* Header row */
.exposure-table thead th {
    position: sticky;
    top: 0;                 /* 🔥 REQUIRED */
    background: #0a1118;    /* 🔥 REQUIRED (same as panel bg) */
    z-index: 3;             /* 🔥 REQUIRED */

    text-align: left;
    padding: 6px 4px;
    font-weight: 600;
    color: #8fdcff;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Body rows */
.exposure-table tbody td {
    padding: 6px 4px;
    color: #d9f7ff;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Subtle hover */
.exposure-table tbody tr:hover {
    background: rgba(0, 200, 255, 0.04);
}

/* Footer */
.exposure-footer {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    color: #ffffff;
}

/* Scrollbar (optional subtle styling) */
.exposure-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.exposure-table-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 200, 255, 0.2);
    border-radius: 4px;
}

/* 🔵 Exposure Specific USDT Sticker */
.usdt-sticker-exposure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;   /* 👈 fine tune 1px–3px if needed */
}

.usdt-sticker-exposure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============================= */
/* WALLET OVERLAY */
/* ============================= */

.wallet-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
}

.wallet-overlay.active {
  display: flex;
}

.wallet-frame {
  width: 440px;
  height: 800px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  background: transparent;
}

/* ========================= */
/* TOP RETURNS PANEL */
/* ========================= */

.top-returns {
    margin-top: 16px;
    padding: 10px;
    background: rgba(5,5,9,0.85);
    border: 1px solid rgba(0,255,170,.25);
    border-radius: 10px;
}

.top-returns h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    margin: 0 0 10px;
    color: #00ffae;
    text-shadow: 0 0 8px rgba(0,255,170,0.8);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.round-badge {
    font-size: 11px;
    color: #00d2ff;
    text-shadow: 0 0 6px #00d2ff;
}

.returns-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px; /* Slightly taller than heavy weights */
    overflow-y: auto;
}

.return-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 13px;
    color: var(--muted);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.return-item:last-child {
    border-bottom: none;
}

.return-item:hover {
    transform: translateY(-2px);
}

/* LEFT SIDE */
.return-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rank-badge {
    font-size: 14px;
}

.return-user {
    display: flex;
    flex-direction: column;
}

.return-id {
    font-weight: 600;
    color: #fff;
}

@keyframes contractGlowPulse {
    0% { text-shadow: 0 0 4px rgba(0,210,255,0.6); }
    50% { text-shadow: 0 0 10px rgba(0,255,255,1); }
    100% { text-shadow: 0 0 4px rgba(0,210,255,0.6); }
}

.return-contract {
    font-size: 10px;
    color: #00d2ff;
    animation: contractGlowPulse 2.5s infinite ease-in-out;
}

/* RIGHT SIDE */
.return-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.return-roi {
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    color: #00ffae;
    text-shadow: 0 0 6px rgba(0,255,170,0.6);
}

.return-net {
    font-size: 11px;
    color: #ccc;
}

/* Rank Highlights */
.rank-1 .return-roi {
    color: #ffd700;
    text-shadow: 0 0 10px #ffd700;
}

.rank-2 .return-roi {
    color: #c0c0c0;
    text-shadow: 0 0 8px #c0c0c0;
}

.rank-3 .return-roi {
    color: #cd7f32;
    text-shadow: 0 0 8px #cd7f32;
}

/* Stylish scrollbar for Top Returns */
.returns-list::-webkit-scrollbar {
    width: 6px;
}

.returns-list::-webkit-scrollbar-track {
    background: rgba(0, 255, 170, 0.05);
    border-radius: 6px;
}

.returns-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00ffae, #00d2ff);
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0, 255, 170, 0.7);
}

.returns-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00ffea, #0088ff);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.9);
}

/* Firefox */
.returns-list {
    scrollbar-width: thin;
    scrollbar-color: #00ffae rgba(0, 255, 170, 0.05);
}

.player-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2147483647; /* max safe */
}

.player-overlay.hidden {
    display: none;
}

/* =========================
   WALLET OVERLAY
========================= */

#walletOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999999;
}

#walletOverlay.active {
  display: flex;
}

#walletFrame {
  width: 440px;
  height: 650px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  background: #0d0d18;
}



.player-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: #1c1c1c;
    padding: 28px 32px;
    border-radius: 14px;
    text-align: center;
    color: #fff;
    width: 360px;
}

.player-medal {
    font-size: 60px;
    margin-bottom: 10px;
}

.player-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 14px;
}

.player-sign {
    font-size: 14px;
    margin: 6px 0;
    opacity: 0.85;
}

/* Attractive but light button */
.astro-btn {
    margin-top: 18px;
    padding: 10px 14px;
    width: 100%;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;

    background: linear-gradient(90deg, #6a5cff, #00d4ff);
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.astro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.4);
}

.astro-btn:active {
    transform: translateY(1px);
}

.player-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.player-overlay:not(.hidden) {
    opacity: 1;
}


.campaigns {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-card {
    position: relative;
    border-radius: 10px;
    padding: 12px 14px;
    text-align: left;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.25s ease;
    animation: floatCard 5s ease-in-out infinite;
}

@keyframes floatCard {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-3px); }
    100% { transform: translateY(0px); }
}

.campaign-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.25),
        transparent
    );
    transform: skewX(-20deg);
    animation: shimmer 6s infinite;
}

@keyframes shimmer {
    0% { left: -120%; }
    100% { left: 120%; }
}

.campaign-card:hover {
    transform: translateY(-2px);
}

.campaign-title {
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.campaign-title span {
    animation: bounceIcon 2s infinite;
}

@keyframes bounceIcon {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.campaign-desc {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 4px;
}

/* Special colors */

.campaign-card.welcome {
    border-left: 4px solid #ffd54a;
    background: rgba(255,213,74,0.08);
    box-shadow: 0 0 10px rgba(255,213,74,0.25);
}

.campaign-card.deposit {
    border-left: 4px solid #66e0ff;
    background: rgba(102,224,255,0.08);
    box-shadow: 0 0 10px rgba(102,224,255,0.25);
}

.round-timer {
    margin-top: 16px;
    font-size: 13px;
    opacity: 0.75;
}

#roundCountdown {
    font-size: 28px;
    font-weight: 700;
    margin-top: 4px;
    color: #0aff99;
    letter-spacing: 2px;
}

/* CTA SECTION */

.cta-section{
    margin-top: 18px;
    text-align:center;
    animation: fadeSlideUp 0.8s ease;
}

.cta-line{
    font-size: 20px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

.cta-line .highlight{
    color:#00e5ff;
    font-weight:800;
}

.cta-line .btc{
    color:#f7931a;
    font-weight:800;
}

/* BUTTON */

.cta-button{

    background:linear-gradient(135deg,#00e5ff,#00bcd4);
    border:none;
    color:#021014;

    font-weight:800;
    padding:13px 30px;

    border-radius:8px;
    cursor:pointer;

    font-size:15px;
    letter-spacing:1px;

    animation:pulseGlow 2.2s infinite;

    transition:all .2s ease;
}

.cta-button:hover{
    transform:translateY(-2px) scale(1.03);
}

@keyframes pulseGlow{

    0%{
        box-shadow:0 0 8px rgba(0,229,255,.3);
    }

    50%{
        box-shadow:0 0 22px rgba(0,229,255,.9);
    }

    100%{
        box-shadow:0 0 8px rgba(0,229,255,.3);
    }

}

/* animation */

@keyframes fadeSlideUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.live-traders{
    margin-top:10px;
    font-size:13px;
    color:#9aa4ad;
}

.live-dot{
    display:inline-block;
    width:8px;
    height:8px;
    background:#00ff6a;
    border-radius:50%;
    margin-right:6px;
    animation:livePulse 1.6s infinite;
}

@keyframes livePulse{
    0%{opacity:1}
    50%{opacity:.3}
    100%{opacity:1}
}

.cta-trust{
    margin-top:6px;
    font-size:12px;
    color:#6c7885;
}