/* =========================================================
   CLOVERDONUT CASINO - COMPLETE GAMES & MARKETS STYLES
   ========================================================= */

/* Common Game Layout */
.game-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    min-height: 480px;
}

.game-control-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.panel-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.panel-header h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

.custom-input, .custom-select {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: var(--font-main);
    font-weight: 500;
    outline: none;
    width: 100%;
    transition: border-color 0.15s ease;
}

.custom-input:focus, .custom-select:focus {
    border-color: var(--border-focus);
}

.input-with-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.quick-bet-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
}

.btn-quick {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-quick:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.btn-action {
    width: 100%;
    padding: 11px;
    border-radius: var(--radius-sm);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
    text-align: center;
}

.btn-play {
    background: var(--accent);
    color: #060b13;
}

.btn-play:hover {
    background: var(--accent-hover);
}

.btn-cashout {
    background: var(--color-success);
    color: #060b13;
    font-weight: 700;
}

.btn-secondary {
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.btn-disabled {
    background: var(--bg-surface);
    color: var(--text-muted);
    cursor: not-allowed;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.stat-row span {
    color: var(--text-muted);
}

/* Game Stage */
.game-stage {
    display: flex;
    flex-direction: column;
    background: var(--bg-void);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    position: relative;
    overflow: hidden;
}

/* =========================================================
   EUROPEAN ROULETTE STYLES
   ========================================================= */
.roulette-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 18px;
}

.roulette-wheel-container {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.roulette-ball-pointer {
    position: absolute;
    top: -2px;
    font-size: 16px;
    color: var(--accent);
    z-index: 20;
}

.roulette-center-hub {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #090e1a;
    border: 2px solid var(--border-color);
    z-index: 10;
}

.hub-label {
    font-size: 8.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.hub-val {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent);
}

.roulette-felt-board {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #091a14;
    border: 2px solid #134e4a;
    border-radius: var(--radius-md);
    padding: 8px;
}

.felt-grid {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 4px;
}

.felt-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    user-select: none;
    transition: transform 0.1s ease, filter 0.1s ease;
}

.felt-cell:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

.cell-zero {
    background: #059669;
    border: 1px solid #10b981;
}

.felt-numbers-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(3, 30px);
    gap: 3px;
}

.felt-red {
    background: #be123c;
    border: 1px solid #e11d48;
}

.felt-black {
    background: #1e293b;
    border: 1px solid #334155;
}

.felt-outside-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.felt-outside-row:last-child {
    grid-template-columns: repeat(6, 1fr);
}

.felt-outside-cell {
    position: relative;
    background: #042f2e;
    border: 1px solid #115e59;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 700;
    padding: 7px 2px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}

.felt-outside-cell:hover {
    background: #134e4a;
    color: #fff;
}

.cell-red-bet {
    background: #881337;
    border-color: #be123c;
}

.cell-black-bet {
    background: #0f172a;
    border-color: #334155;
}

.chip-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent);
    color: #060b13;
    font-size: 9px;
    font-weight: 900;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    border: 1px dashed #000;
}

.roulette-history-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.r-hist-pill {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================================
   BACCARAT (PUNTO BANCO) STYLES
   ========================================================= */
.baccarat-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 24px;
}

.bac-table-banner {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.bac-bet-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}

.bac-bet-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    transition: all 0.12s ease;
}

.bac-bet-card:hover {
    border-color: var(--border-hover);
}

.tile-player:hover { border-color: #38bdf8; }
.tile-tie:hover { border-color: #10b981; }
.tile-banker:hover { border-color: #f43f5e; }

.bac-bet-title {
    font-size: 11.5px;
    font-weight: 800;
}

.tile-player .bac-bet-title { color: #38bdf8; }
.tile-tie .bac-bet-title { color: #10b981; }
.tile-banker .bac-bet-title { color: #f43f5e; }

.bac-bet-odds {
    font-size: 9.5px;
    color: var(--text-muted);
}

.bac-bet-amt {
    font-size: 11.5px;
    color: var(--text-primary);
    font-weight: 700;
}

.bead-plate-grid {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.bead-item {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.bead-p { background: #0284c7; }
.bead-b { background: #e11d48; }
.bead-t { background: #059669; }

.bac-hands-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    width: 100%;
}

.bac-side-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bac-side-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 12px;
}

.bac-tag-player { color: #38bdf8; }
.bac-tag-banker { color: #f43f5e; }

.bac-vs-divider {
    font-size: 16px;
    font-weight: 900;
    color: var(--text-muted);
}

/* =========================================================
   TOWER CLIMB STYLES
   ========================================================= */
.tower-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tower-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 380px;
}

.tower-floor-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.tower-floor-row.active-floor {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.tower-floor-row.cleared-floor {
    opacity: 0.6;
    border-color: rgba(16, 185, 129, 0.4);
}

.tower-floor-row.locked-floor {
    opacity: 0.4;
}

.tower-mult-tag {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent);
    min-width: 50px;
}

.tower-tiles-row {
    display: flex;
    gap: 8px;
    flex: 1;
}

.tower-tile {
    flex: 1;
    height: 38px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s ease;
}

.active-floor .tower-tile:hover {
    border-color: var(--accent);
    background: var(--bg-surface);
    transform: scale(1.05);
}

.tower-tile.tile-gem {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.tower-tile.tile-trap {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* =========================================================
   $CLOVER STOCKS STYLING
   ========================================================= */
.stock-live-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-success);
    background: rgba(16, 185, 129, 0.1);
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.stock-portfolio-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 10px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.stock-port-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.stock-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stock-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.stock-price-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stock-sym-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.stock-symbol-tag {
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
}

.stock-price-big {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.stock-change-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.badge-up {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
}

.badge-down {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger);
}

.stock-meta-details {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: var(--text-muted);
}

.stock-meta-details strong {
    color: var(--text-secondary);
}

.stock-canvas-wrapper {
    flex: 1;
    position: relative;
    min-height: 320px;
    width: 100%;
}

#stockCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================================
   BLACKJACK & TEXAS HOLD'EM POKER
   ========================================================= */
.holdem-stage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    gap: 12px;
}

.holdem-player-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.holdem-avatar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

.dealer-tag {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.player-tag {
    color: var(--accent);
    background: rgba(0, 229, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.poker-hand-name {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
}

.holdem-board-felt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #092019;
    border: 2px solid #134e4a;
    border-radius: var(--radius-md);
    padding: 12px 20px;
    width: 100%;
    max-width: 520px;
}

.pot-badge-pill {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: center;
}

.pot-badge-pill strong {
    color: var(--accent);
    font-weight: 800;
}

.community-cards-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 112px;
}

.card-slot-placeholder {
    width: 76px;
    height: 106px;
    border: 2px dashed #1e3a35;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3a35;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.poker-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.bj-table-stage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px 16px;
    min-height: 400px;
}

.bj-hand-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.bj-area-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bj-score-badge {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 800;
}

.bj-cards-row {
    display: flex;
    gap: 10px;
    min-height: 115px;
    align-items: center;
    justify-content: center;
}

.bj-card {
    width: 80px;
    height: 112px;
    background: #ffffff;
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    animation: cardPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardPop {
    0% { transform: scale(0.8) translateY(-10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.bj-card.card-red {
    color: #e11d48;
}

.bj-card.card-black {
    color: #0f172a;
}

.bj-card.card-hidden {
    background: #1e293b;
    border: 2px solid #334155;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-pattern {
    font-size: 32px;
    opacity: 0.8;
}

.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.card-val {
    font-size: 13px;
    font-weight: 800;
}

.card-suit {
    font-size: 12px;
}

.card-center-suit {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
}

.card-corner.bottom-right {
    transform: rotate(180deg);
}

.bj-status-banner, .poker-banner {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    min-height: 24px;
}

/* =========================================================
   COINFLIP GAME
   ========================================================= */
.side-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.btn-side {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: left;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.btn-side.active {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.side-preview {
    font-size: 20px;
}

.coin-arena {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    perspective: 1000px;
}

.coin-container {
    width: 120px;
    height: 120px;
    perspective: 1000px;
}

.coin-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s ease;
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
}

.coin-front {
    border-color: var(--accent);
}

.coin-back {
    border-color: #3b82f6;
    transform: rotateY(180deg);
}

.coin-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.coin-emoji { font-size: 32px; }
.coin-label { font-size: 11px; font-weight: 700; color: var(--text-primary); }

.flip-status-message {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.pvp-lobbies-section {
    border-top: 1px solid var(--border-color);
    padding-top: 14px;
    margin-top: 16px;
}

.lobbies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.lobbies-header h4 {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

.lobbies-count {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
}

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

.lobby-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.lobby-user {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.lobby-user img {
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

.btn-join-lobby {
    background: var(--accent);
    color: #060b13;
    border: none;
    font-weight: 600;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* =========================================================
   CRATES / CASES
   ========================================================= */
.crates-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crates-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.section-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.crates-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.crate-select-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.crate-select-card:hover {
    border-color: var(--border-hover);
}

.crate-select-card.active {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
}

.crate-icon-box {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-surface);
}

.crate-emoji { font-size: 18px; }

.crate-info h4 {
    font-size: 12.5px;
    color: var(--text-primary);
    font-weight: 600;
}

.crate-price {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 600;
}

.crate-stage-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spinner-viewport {
    position: relative;
    height: 130px;
    background: var(--bg-void);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.spinner-selector-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--accent);
    transform: translateX(-50%);
    z-index: 10;
}

.spinner-track {
    display: flex;
    gap: 8px;
    padding: 0 16px;
    position: absolute;
    left: 0;
    will-change: transform;
}

.reel-item {
    width: 110px;
    height: 110px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.reel-item .item-icon { font-size: 28px; }
.reel-item .item-name { font-size: 10px; font-weight: 600; color: var(--text-primary); text-align: center; }
.reel-item .item-val { font-size: 9.5px; color: var(--text-muted); }

.crate-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crate-selected-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.crate-badge-tag {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.crate-cost-tag {
    font-size: 12px;
    color: var(--text-muted);
}

.loot-table-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
}

.loot-table-section h4 {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 10px;
}

.loot-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.loot-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.loot-icon { font-size: 24px; }
.loot-name { font-size: 11px; font-weight: 600; color: var(--text-primary); text-align: center; }
.loot-value { font-size: 10px; color: var(--text-secondary); }
.loot-chance { font-size: 9.5px; font-weight: 500; color: var(--text-muted); }

/* =========================================================
   JACKPOT & WHEEL
   ========================================================= */
.jackpot-wheel-container, .wheel-canvas-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 320px;
}

.jackpot-pointer, .wheel-pointer {
    position: absolute;
    top: 4px;
    font-size: 20px;
    color: var(--accent);
    z-index: 20;
}

.chips-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.btn-chip {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 11px;
    padding: 6px 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-chip.active {
    border-color: var(--border-focus);
    background: var(--accent-subtle);
    color: var(--accent);
}

.wheel-bet-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.bet-tile {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.12s ease;
}

.bet-tile:hover {
    border-color: var(--border-hover);
}

.tile-top {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
}

.tile-bet-val {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 700;
}

/* =========================================================
   PLINKO & SLOTS
   ========================================================= */
.plinko-canvas-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#plinkoCanvas {
    width: 100%;
    height: 330px;
}

.plinko-buckets-row {
    display: flex;
    width: 100%;
    gap: 3px;
    margin-top: 4px;
}

.plinko-bucket {
    flex: 1;
    text-align: center;
    padding: 4px 1px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    transition: transform 0.12s ease;
}

.paytable-mini-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
}

.paytable-title {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.paytable-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-secondary);
}

.slot-machine-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.slot-header-glow {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.slot-reels-container {
    display: flex;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 12px;
    border-radius: var(--radius-md);
}

.slot-reel {
    width: 88px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reel-symbol {
    height: 72px;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid var(--border-color);
}

.symbol-icon { font-size: 26px; }
.symbol-label { font-size: 9px; font-weight: 500; color: var(--text-muted); }

.slot-result-banner {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-height: 20px;
}

/* =========================================================
   HOST / ADMIN DASHBOARD
   ========================================================= */
.admin-dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.host-badge {
    background: rgba(192, 132, 252, 0.1);
    color: #c084fc;
    border: 1px solid rgba(192, 132, 252, 0.3);
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.admin-stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.admin-stat-val {
    font-size: 15px;
    font-weight: 700;
}

.admin-card-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
}

.admin-section-header h4 {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.admin-table-container {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.admin-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.admin-table td {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.admin-action-btns {
    display: flex;
    gap: 4px;
}

.btn-admin-approve {
    background: var(--color-success);
    color: #060b13;
    border: none;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 10.5px;
    cursor: pointer;
}

.btn-admin-reject {
    background: transparent;
    color: var(--color-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 10.5px;
    cursor: pointer;
}

.btn-copy-cmd {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--accent);
    font-family: monospace;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-admin-save-bal {
    background: var(--accent);
    color: #060b13;
    border: none;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
}

/* =========================================================
   INVENTORY & LEADERBOARD
   ========================================================= */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.inv-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.inv-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
}

.inv-icon { font-size: 32px; }
.inv-name { font-weight: 600; font-size: 12px; text-align: center; color: var(--text-primary); }
.inv-value { font-size: 11px; color: var(--text-muted); }

.inv-actions {
    display: flex;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
}

.btn-inv-sell, .btn-inv-sell-all {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 600;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-inv-sell:hover, .btn-inv-sell-all:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.leaderboard-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
}

.lb-row {
    display: grid;
    grid-template-columns: 50px 2fr 1fr 1fr;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 500;
}

.lb-row-self {
    border: 1px solid var(--border-focus);
}

.lb-rank {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

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

.lb-user img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.lb-badge {
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
}

/* =========================================================
   MULTI-ASSET MARKET STYLES
   ========================================================= */
.asset-selector-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.btn-asset-tab {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.12s ease;
}

.btn-asset-tab strong {
    font-size: 11.5px;
}

.btn-asset-tab small {
    font-size: 10.5px;
    color: var(--text-muted);
}

.btn-asset-tab:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.btn-asset-tab.active {
    background: var(--accent-subtle);
    border-color: var(--border-focus);
    color: var(--accent);
}

/* =========================================================
   VIP CLUB & RAKEBACK STYLES
   ========================================================= */
.vip-club-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vip-hero-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    gap: 16px;
}

.vip-hero-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.vip-tier-icon {
    font-size: 40px;
}

.vip-tier-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.vip-hero-info h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
}

.vip-hero-info p {
    font-size: 12px;
    color: var(--text-secondary);
}

.vip-rakeback-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}

.vip-progress-bar-container {
    height: 12px;
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
    border: 1px solid var(--border-color);
}

.vip-progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.vip-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.vip-tier-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.vip-tier-card.tier-current {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.tier-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tier-rb-badge {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    background: var(--bg-input);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.tier-current-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: 800;
    color: var(--accent);
    background: rgba(0, 229, 255, 0.1);
    padding: 2px 5px;
    border-radius: 3px;
}

/* =========================================================
   STAKING VAULT STYLES
   ========================================================= */
.staking-stage {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.vault-hero-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #091f1a;
    border: 2px solid #134e4a;
    border-radius: var(--radius-md);
    padding: 20px;
}

.vault-icon {
    font-size: 44px;
}

.vault-meta h2 {
    font-size: 26px;
    font-weight: 900;
    color: #10b981;
    letter-spacing: -0.02em;
}

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

/* =========================================================
   CASE BATTLES STYLES
   ========================================================= */
.battle-cases-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.battle-crate-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
}

.crate-qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-qty-minus, .btn-qty-plus {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn-qty-minus:hover, .btn-qty-plus:hover {
    border-color: var(--border-hover);
    color: var(--accent);
}

.qty-num {
    font-size: 12px;
    font-weight: 700;
    min-width: 16px;
    text-align: center;
}

.battle-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 480px;
}

.battle-arena-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 10px 16px;
    border-radius: var(--radius-sm);
}

.battle-player-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
}

.battle-player-tag img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.p1-tag strong { color: #10b981; }
.p2-tag strong { color: #f43f5e; }

.battle-vs-badge {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-muted);
}

.battle-rounds-track {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.battle-round-row {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.round-number {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
}

.battle-duel-cards {
    display: grid;
    grid-template-columns: 1fr 30px 1fr;
    align-items: center;
    gap: 8px;
}

.duel-item-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
}

.duel-item-card strong {
    flex: 1;
    font-size: 11px;
}

.duel-item-card small {
    color: var(--text-secondary);
    font-weight: 600;
}

.duel-icon { font-size: 18px; }
.battle-vs-mini { text-align: center; font-size: 11px; font-weight: 800; color: var(--text-muted); }

/* Dual Unboxing Reels in Case Battles */
.battle-round-badge {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 4px 12px;
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
}

.battle-reels-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
}

.battle-reel-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.battle-reel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
}

.battle-spinner-viewport {
    height: 110px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.battle-spinner-viewport .reel-item {
    min-width: 110px;
    max-width: 110px;
    height: 95px;
    padding: 6px;
    gap: 2px;
}

.battle-spinner-viewport .reel-item .item-icon {
    font-size: 26px;
}

.battle-spinner-viewport .reel-item .item-name {
    font-size: 10px;
}

.battle-spinner-viewport .reel-item .item-val {
    font-size: 9.5px;
}

.p1-selector-line {
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
}

.p2-selector-line {
    background: #f43f5e;
    box-shadow: 0 0 10px #f43f5e;
}

/* =========================================================
   ITEM UPGRADER STYLES
   ========================================================= */
.upgrader-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
}

.upgrader-selected-source-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

.upgrader-inv-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 140px;
    overflow-y: auto;
}

.upgrader-mini-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.upgrader-mini-card:hover {
    border-color: var(--border-hover);
    color: var(--accent);
}

.upgrader-mini-card.active {
    border-color: var(--accent);
    background: var(--accent-subtle);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15);
}

.upgrader-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
}

.upgrader-dial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 10px;
}

.upgrader-canvas-box {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrader-center-card {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.upg-target-icon { font-size: 28px; }
.upg-target-name { font-size: 10.5px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.upg-target-val { font-size: 10px; color: var(--accent); font-weight: 600; }

.upgrader-targets-section {
    width: 100%;
}

.upgrader-targets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
}

.upg-target-choice {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    padding: 8px;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
}

.upg-target-choice:hover {
    border-color: var(--border-hover);
}

.upg-target-choice.active {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.target-choice-icon { font-size: 22px; }
.target-choice-name { font-size: 10px; font-weight: 700; }
.target-choice-val { font-size: 9.5px; color: var(--text-muted); }

/* =========================================================
   DAILY QUESTS STYLES
   ========================================================= */
.quests-page {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.quest-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quest-card.quest-ready {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.04);
}

.quest-card.quest-claimed {
    opacity: 0.6;
}

.quest-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quest-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.quest-rewards {
    display: flex;
    gap: 4px;
}

.quest-reward-pill {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.quest-xp-pill {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.quest-desc {
    font-size: 11.5px;
    color: var(--text-secondary);
}

.quest-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.quest-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.quest-claimed-badge {
    font-size: 10px;
    font-weight: 800;
    color: #10b981;
}

.quest-locked-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: 3px;
}

.btn-claim-quest {
    padding: 5px 12px;
    font-size: 11px;
}

/* =========================================================
   ELYTRA TURN-BASED FLIGHT STYLES
   ========================================================= */
.elytra-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
}

.elytra-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.elytra-status-banner {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.elytra-canvas-container {
    width: 100%;
    background: #020617;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#elytraCanvas {
    width: 100%;
    height: 240px;
    display: block;
}

.elytra-waypoints-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    gap: 4px;
}

.elytra-wp-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.wp-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.wp-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
}

.elytra-wp-node.wp-passed .wp-dot {
    background: #065f46;
    border-color: #10b981;
    color: #fff;
}
.elytra-wp-node.wp-passed .wp-label {
    color: #10b981;
}

.elytra-wp-node.wp-current .wp-dot {
    background: var(--accent);
    border-color: #fff;
    color: #060b13;
    box-shadow: 0 0 10px var(--accent);
    transform: scale(1.15);
}
.elytra-wp-node.wp-current .wp-label {
    color: var(--accent);
    font-weight: 800;
}

.elytra-wp-node.wp-finish .wp-dot {
    border-color: #f59e0b;
}

/* =========================================================
   SMP JACKPOT LOTTERY STYLES
   ========================================================= */
.lottery-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 16px;
}

.lottery-stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.lottery-banner {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-align: center;
}

.lottery-pool-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px;
}

.lottery-tickets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 6px;
}

.lottery-entry-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
}

.lottery-entry-card.entry-self {
    border-color: var(--accent);
    background: var(--accent-subtle);
}

.lottery-avatar {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.lottery-recent-winners-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 6px;
}

.lottery-winner-pill {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    white-space: nowrap;
}

/* =========================================================
   TRANSACTION HISTORY & AUDIT LEDGER STYLES
   ========================================================= */
.ledger-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ledger-table-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ledger-table-header {
    display: grid;
    grid-template-columns: 180px 100px 1fr 140px 100px;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ledger-rows-list {
    max-height: 420px;
    overflow-y: auto;
}

.ledger-row {
    display: grid;
    grid-template-columns: 180px 100px 1fr 140px 100px;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    font-size: 11.5px;
    transition: background 0.12s ease;
}

.ledger-row:hover {
    background: var(--bg-card);
}

.ledger-col-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ledger-badge {
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

.badge-win { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.badge-bet { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-deposit { background: rgba(0, 229, 255, 0.15); color: var(--accent); }
.badge-withdraw { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.amt-green { color: #10b981; font-weight: 700; }
.amt-red { color: #ef4444; font-weight: 700; }

.status-pill {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.pill-completed { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.pill-pending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }

/* =========================================================
   GLOBAL SERVER-WIDE LIVE ANNOUNCEMENT BANNER
   ========================================================= */
.global-announcement-banner {
    background: linear-gradient(90deg, #059669 0%, #10b981 50%, #06b6d4 100%);
    color: #ffffff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
    z-index: 1000;
    position: relative;
    animation: pulseBanner 2.5s infinite;
}

@keyframes pulseBanner {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4)); }
    50% { filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.6)); }
}

.announcement-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.announcement-icon {
    font-size: 18px;
    animation: bounce 1.2s infinite;
}

.btn-close-announcement {
    background: rgba(0, 0, 0, 0.25);
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.btn-close-announcement:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* =========================================================
   HI-LO FAST CARD GAME (13% HOUSE EDGE)
   ========================================================= */
.hilo-game-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    min-height: 520px;
}

.hilo-sidebar {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hilo-active-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-hilo-high {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #34d399;
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn-hilo-low {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: 1px solid #f87171;
    color: #ffffff;
    padding: 12px 14px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.15s;
}

.btn-hilo-high:hover, .btn-hilo-low:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.btn-hilo-skip {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 9px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.hilo-btn-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hilo-dir { font-size: 13px; }
.hilo-rate { font-size: 12px; background: rgba(0, 0, 0, 0.25); padding: 2px 8px; border-radius: 4px; }

.hilo-table-felt {
    background: radial-gradient(circle at center, #0f2b1d 0%, #06170e 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.hilo-multiplier-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
}

.hilo-cards-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
}

.hilo-card-container {
    perspective: 800px;
}

.hilo-playing-card {
    width: 170px;
    height: 240px;
    background: #ffffff;
    border-radius: 12px;
    border: 3px solid #cbd5e1;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    position: relative;
    user-select: none;
    animation: flipIn 0.3s ease-out;
}

@keyframes flipIn {
    0% { transform: scale(0.85) rotateY(90deg); opacity: 0; }
    100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.card-corner {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 18px;
    line-height: 1;
}

.card-center-suit {
    font-size: 56px;
    text-align: center;
    line-height: 1;
}

.card-corner.bottom-right {
    transform: rotate(180deg);
}

.hilo-history-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 14px;
    border-radius: 8px;
    overflow-x: auto;
}

.history-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
}

.hilo-history-cards {
    display: flex;
    gap: 6px;
}

.hilo-history-pill {
    background: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 12px;
}

/* =========================================================
   AFFILIATES & REFERRAL DASHBOARD
   ========================================================= */
.affiliates-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.affiliate-hero-banner {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.affiliate-hero-text h2 {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.affiliate-hero-text p {
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 600px;
}

.affiliate-badge-highlight {
    background: var(--accent);
    color: #03131a;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 900;
    font-size: 14px;
    white-space: nowrap;
}

.affiliate-link-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.affiliate-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aff-label {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
}

.aff-input-copy-group {
    display: flex;
    gap: 8px;
}

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

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

.aff-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aff-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.aff-stat-val {
    font-size: 18px;
    font-weight: 800;
}

.affiliate-claim-banner {
    background: var(--bg-surface);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 12px;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.affiliate-claim-banner h4 {
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.affiliate-claim-banner p {
    font-size: 13px;
    color: var(--text-secondary);
}

/* =========================================================
   HOST / ADMIN DASHBOARD STYLES
   ========================================================= */
.admin-dashboard-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.admin-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 24px;
}

.admin-header-row h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-warning);
}

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

.admin-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-stat-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.admin-stat-val {
    font-size: 20px;
    font-weight: 800;
    font-family: var(--font-mono);
}

.admin-card-section {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-section-header h4 {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.admin-table-container {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    text-align: left;
}

.admin-table th {
    background: var(--bg-input);
    padding: 10px 14px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color);
}

.admin-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.admin-table tr:hover td {
    background: var(--bg-surface-elevated);
}

.empty-admin-table {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.admin-action-btns {
    display: flex;
    gap: 6px;
}

.btn-approve-deposit {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid #10b981;
    color: #34d399;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-approve-deposit:hover {
    background: #10b981;
    color: #fff;
}

.btn-reject-deposit {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #f87171;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-reject-deposit:hover {
    background: #ef4444;
    color: #fff;
}

.btn-copy-pay {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--action-accent);
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-copy-pay:hover {
    background: var(--action-accent);
    color: #0a0e17;
}

.admin-access-denied {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}