/* Win Popup: global overlay positioned above bet panels */
.win-toast {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -100%) scale(0.85);
    opacity: 0;
    z-index: 1000;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
    max-width: calc(100vw - 32px); /* Prevent cutoff with 16px margin on each side */
    width: auto;
}

.win-toast.global.error {
    z-index: 1001;
}

/* Auto Play Options Popup */
.autoplay-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 2px 14px 2px;
    position: relative;
}

/* Auto Play Options: use the same table look as Game Help / Round Data */
#auto-play-options-popup .info-table {
  table-layout: fixed;
}

#auto-play-options-popup [data-i18n="autoplay_rounds_label"] {
  display: block;
  text-align: center;
  font-weight: 800;
  margin: 2px 0 10px 0;
}

#auto-play-options-popup .info-table tbody tr > td:first-child:not([colspan]) {
  width: 50%;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: top;
}

#auto-play-options-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
  width: 50%;
  white-space: normal;
  word-wrap: break-word;
}

#auto-play-options-popup .info-table tr:not(.sub-section-header) td:nth-child(2):not([colspan]) {
  background: rgba(12, 18, 32, 0.55);
  color: #e2e8f0;
  border-radius: 8px;
}

/* Keep the rounds and stop controls nicely centered inside the value cell */
#auto-play-options-popup .autoplay-rounds-options {
  justify-content: center;
}

#auto-play-options-popup .autoplay-stop-right {
  justify-content: center;
}

.autoplay-popup-title {
    font-weight: 800;
    font-size: 1rem;
    color: #e5e7eb;
    text-transform: none;
}

/* Auto Play Options: enforce title styling regardless of translation casing */
#auto-play-options-popup .popup-title-cell > span[data-i18n="autoplay_popup_title"] {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.4px;
}

.autoplay-section {
    background: rgba(12, 18, 32, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
}

.autoplay-rounds-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
    text-align: center;
}

.autoplay-rounds-options {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.autoplay-round-btn {
    min-width: 72px;
    height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(226, 232, 240, 0.95);
    font-weight: 900;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Auto Play Options: make the infinity rounds option more legible */
#auto-play-options-popup .autoplay-round-btn[data-value="Infinity"] {
    font-size: 1.50rem;
    line-height: 1;
}

.autoplay-round-btn:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.06);
}

.autoplay-round-btn.selected {
    color: #ffffff;
    background: #1b2f5b;
    box-shadow: inset 0 0 0 1px #3067e2;
}

.autoplay-stop-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.autoplay-stop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(12, 18, 32, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 10px;
}

.autoplay-stop-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.autoplay-stop-left input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #22c55e;
}

.autoplay-stop-text {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 650;
    font-size: 0.85rem;
    line-height: 1.2;
}

.autoplay-stop-right {
    display: grid;
    grid-template-columns: 36px 140px 36px;
    align-items: center;
    column-gap: 8px;
}

.autoplay-stop-input {
    height: 34px;
    border-radius: 10px;
    background: rgba(12, 18, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-weight: 800;
    text-align: center;
    box-sizing: border-box;
}

.chat-emoji-top .chat-emoji-search {
    flex: 1 1 auto;
    min-width: 0;
}

.chat-emoji-picker .chat-emoji-close {
    position: static;
    flex: 0 0 26px;
}

.chat-emoji-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(12, 18, 32, 0.55);
    color: rgba(226, 232, 240, 0.95);
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
}

.chat-emoji-close:hover {
    background: rgba(12, 18, 32, 0.65);
}

/* Emoji picker: when used inside the picker header row, do not absolutely position the close button */
.chat-emoji-picker .chat-emoji-close {
    position: static;
    top: auto;
    right: auto;
}

.autoplay-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 6px;
}

.autoplay-inline-error {
    margin: 8px 0 10px 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fecaca;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
}

.autoplay-btn {
    height: 44px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 0.3px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.autoplay-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(0,0,0,0.35); }
.autoplay-btn:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0,0,0,0.25); }

.autoplay-btn-reset {
    background: linear-gradient(135deg,#f97316,#ea580c);
    color: #ffffff;
}

.autoplay-btn-start {
    background: linear-gradient(135deg,#38bdf8,#0ea5e9);
    color: #ffffff;
}

@media (max-width: 560px) {
    #auto-play-options-popup .autoplay-rounds-options {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
        gap: 6px;
        overflow: hidden;
    }
    #auto-play-options-popup .autoplay-round-btn {
        min-width: 0;
        width: 100%;
        height: 34px;
        padding: 6px 8px;
    }

    #auto-play-options-popup .autoplay-stop-right {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    #auto-play-options-popup .autoplay-stop-right .bet-control-btn {
        display: none;
    }
    #auto-play-options-popup .autoplay-stop-input {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 400px) {
    #auto-play-options-popup .autoplay-rounds-options {
        gap: 6px;
    }
    #auto-play-options-popup .autoplay-round-btn {
        min-width: 48px;
        height: 34px;
        padding: 6px 8px;
    }
}

.chat-avatar.chat-avatar-img {
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
}

/* Mobile range (<=1099px): keep three individual tiles; no container border */
@media (max-width: 1099px) {
    .header-controls .balance-grid,
    .balance-grid {
        gap: 4px !important; /* keep small spacing to avoid visual overlap */
        background: transparent !important;
        padding: 0 5px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .balance-grid .balance-item {
        background: rgba(15, 23, 42, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px !important; /* slightly smaller radius to reduce corner clash */
        box-shadow: none !important;
    }
}

/* Very small phones: Rock-It BETTING layout spacing tweaks */
@media (max-width: 420px) {
    body.variant-rockit #game-logo-overlay {
        height: 44px !important;
        top: 29% !important;
    }

    body.variant-rockit #phase-display {
        font-size: 0.85rem !important;
    }
}

/* Mobile layout (<1100px): scrollable content below display */
@media (max-width: 1099px) {
    .game-layout { min-height: 100dvh !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; gap: 8px !important; }
    .game-data-area { display: none !important; }
    .main-game-area { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; }
    .betting-area { flex: 0 0 auto !important; order: 2 !important; position: static !important; }
    /* Mobile header sizing/centering */
    .header-area { flex: 0 0 76px !important; min-height: 76px !important; max-height: 76px !important; padding: 3px 0 !important; gap: 6px !important; display: grid !important; grid-template-rows: 32px 32px !important; align-content: center !important; justify-items: stretch !important; overflow: visible !important; }
    .header-logo { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; flex: 0 0 auto !important; height: 32px !important; grid-row: 1 !important; }
    .header-logo .logo-image { max-height: 18px !important; height: 18px !important; width: auto !important; display: block !important; }
    .header-controls { width: 100% !important; flex: 0 0 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; display: block !important; position: static !important; margin-top: 0 !important; overflow: visible !important; grid-row: 2 !important; justify-self: stretch !important; }
    .balance-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: 1fr !important; gap: 4px !important; background: transparent !important; padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: blur(4px) !important; margin: 0 !important; align-items: center !important; justify-items: center !important; position: relative !important; height: 32px !important; min-height: 32px !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; overflow: visible !important; }
    .balance-grid .balance-item { display: grid !important; grid-row: 1 !important; align-content: center !important; justify-items: center !important; row-gap: 0 !important; grid-auto-rows: min-content !important; }
    .menu-container { position: absolute !important; right: 8px !important; top: 6px !important; transform: none !important; z-index: 2147483646 !important; }
    /* Mobile: show all balance tiles */
    .balance-grid .balance-item { display: grid !important; }
    .balance-grid .balance-item:nth-child(n+2) { display: grid !important; }
}


/* ==============================
   Game Help: indent first column labels
   ============================== */
#game-help-popup .info-table tbody tr > td:first-child:not([colspan]) {
    padding-left: 24px !important; /* align with bullet rows */
}

.win-toast.global { position: fixed; }

/* Mobile portrait: Use absolute positioning so popups scroll with content */
@media (max-width: 1099px) and (orientation: portrait) {
    .win-toast.global {
        position: absolute;
    }
}

.win-toast.visible {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.win-toast .win-toast-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 180px;
    max-width: 100%; /* Respect parent max-width */
    padding: 12px 16px;
    border-radius: 12px;
    background: #1f773e; /* Exact green fill */
    border: 1px solid transparent; /* keep thickness, hide frame */
    box-shadow:
        inset 0 0 0 2px #2ff25a, /* Exact green ring */
        0 14px 36px rgba(0,0,0,0.45),
        0 0 28px rgba(34, 197, 94, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    box-sizing: border-box;
}

/* Error variant (e.g., LOW BALANCE) */
.win-toast.error .win-toast-inner {
    background: #591b25;
    border-color: #ff0000;
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    z-index: 2147483647;
}

.win-toast .win-title {
    color: #ffffff; /* White title per spec */
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(0,0,0,0.25);
}

/* LOW BALANCE: force white text on error variant */
.win-toast.error .win-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #ffffff;
    text-shadow: 0 0 18px var(--color-error-glow, rgba(239,68,68,0.35));
}

.win-toast .win-amount {
    color: #ffffff;
    font-weight: 400; /* Not bold - normal weight */
    font-size: 1.05rem;
    margin-top: 2px;
}

@media (max-width: 600px) {
    .win-toast .win-toast-inner { min-width: 160px; padding: 9px 12px; }
    .win-toast .win-amount { font-size: 0.98rem; }
}

/* Very narrow phones: reduce popup size further to prevent cutoff */
@media (max-width: 400px) {
    .win-toast {
        max-width: calc(50vw - 20px); /* Each popup takes half screen minus margins */
    }
    .win-toast .win-toast-inner { 
        min-width: 140px;
        padding: 8px 10px;
    }
    .win-toast .win-title {
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }
    .win-toast .win-amount {
        font-size: 0.9rem;
    }
}
/* Basic Setup */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1a1a1a;
    color: #f0f0f0;
    height: 100%;
}

@font-face {
    font-family: 'RockItMultiplier';
    src: url('/assets/fonts/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'RockItPhase';
    src: url('/assets/fonts/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* Win message styling: green with white stroke on left label in win state */
.bet-panel.win-state .bet-prefix {
    color: #22c55e !important; /* green */
    -webkit-text-stroke: 1px #ffffff; /* white stroke for WebKit */
    text-shadow:
        0 0 1px rgba(255,255,255,0.9),
        0 0 2px rgba(255,255,255,0.8); /* fallback for non-WebKit */
}

/* --- Auto Controls Sizing (ensure room for 9999x) --- */
/* Applies to the small toggle buttons under the BET button */
.toggle-switch {
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.75rem; /* Standard size for desktop */
    font-weight: 500; /* Lighter weight for all sizes */
    line-height: 1.0;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bet amount input - handle large values like USD 10,000.00 */
input[id^="bet-amount-"],
.bet-amount-label {
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* allow flexbox to shrink if needed */
}

/* iPad Air landscape and similar tablets: reduce font size for large bet amounts */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: landscape) {
    input[id^="bet-amount-"],
    .bet-amount-label {
        font-size: 0.65rem !important; /* smaller to fit USD 20,000.00 */
    }
}

/* Very small tablets in landscape */
@media (max-width: 900px) and (orientation: landscape) {
    input[id^="bet-amount-"],
    .bet-amount-label {
        font-size: 0.6rem !important; /* even smaller for tight spaces */
    }
}

/* Auto Cashout numeric input should fit up to 10000x comfortably */
.auto-cashout-input {
    font-size: 0.9rem; /* match .bet-amount */
    line-height: 1.2;
    font-variant-numeric: tabular-nums; /* fixed-width numerals to avoid jitter */
    text-align: center;
    padding: 2px 6px; /* balanced padding */
    width: var(--ac-input-ch, 12ch); /* fits up to 10000x comfortably */
    min-width: var(--ac-input-ch, 12ch);
    white-space: nowrap; /* prevent wrap */
    overflow: visible; /* avoid clipping of glyphs */
    flex: 0 0 auto; /* prevent flexbox from shrinking the input */
    box-sizing: content-box; /* width based on content size */
}

/* Ensure the container around +/- and input doesn't squash the input */
.cashout-value-control {
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    column-gap: 6px;
    align-items: center;
    width: 100%;
}

/* Ensure wrapper doesn't clip shadows or text */
.auto-cashout-controls {
    overflow: visible;
    /* Removed flex: 0 0 auto to allow proper width */
}

/* Compact +/- buttons in the auto-cashout control to free space */
.cashout-value-control .bet-control-btn {
    width: 32px; /* Match the width used in .auto-cashout-controls */
    height: 32px;
    padding: 0;
    line-height: 32px;
    font-size: 16px;
    flex: 0 0 32px;
}

/* Remove native number input spinners for consistent look with bet input */
.auto-cashout-input[type="number"]::-webkit-outer-spin-button,
.auto-cashout-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.auto-cashout-input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    appearance: none; /* Standard */
}

/* Ensure phase stays under centered multiplier on mobile too */
@media (max-width: 1099px) {
    #multiplier-display.multiplier-centered ~ #phase-display {
        top: calc(50% + 2rem - 8px);
    }
}

/* Ensure centered position wins on mobile as well */
@media (max-width: 1099px) {
    #multiplier-display.multiplier-centered {
        top: calc(50% - 8px);
    }
}

/* Remove default border from p */
p {
    margin: 0;
    padding: 10px;
    text-align: center;
}

/* Layout elements styling */
.header-area,
.game-data-area,
.recent-results-area,
.bet-panel {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Game Window Area
 * This is the main container for the game canvas and its overlays.
 * It uses flexbox to manage its layout and has overflow hidden to clip any content
 * that might otherwise spill out, ensuring a clean, contained game view.
 * The min-height: 0 is a critical fix for flexbox items that might otherwise
 * refuse to shrink below their content's intrinsic size.
 */
.game-window-area {
    position: relative; /* Establishes a containing block for absolute children like the canvas. */
    display: flex;
    flex: 1; /* Allows the game window to grow and fill available space. */
    overflow: hidden; /* Clips the canvas and prevents it from overflowing. */
    border-radius: 12px; /* Matches the overall design aesthetic. */
    min-height: 0; /* Prevents flexbox sizing issues. */
}

#multiplier-display {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* ensure Noto Sans */
    font-weight: 900; /* Extra Bold for active crash value */
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    -webkit-text-stroke: 2px black;
    pointer-events: none; /* Clicks pass through to canvas */
    z-index: 10;
    transition: color 0.3s ease;
}

body.variant-rockit #multiplier-display {
    font-family: 'RockItMultiplier', 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-kerning: none;
    display: inline-block;
    overflow: visible;
    padding-left: 0.08em;
    padding-right: 0.12em;
    background: linear-gradient(180deg, #ffec49 0%, #fbcf3d 55%, #fe8b22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
}

body.variant-rockit #multiplier-display.crashed {
    background: linear-gradient(180deg, #ffec49 0%, #fbcf3d 55%, #fe8b22 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
}

body.variant-rockit .game-window-area #phase-display {
    font-family: 'RockItPhase', 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    font-style: italic;
    font-weight: 700 !important;
    color: #ffffff !important;
}

body.variant-rockit .game-window-area #betting-countdown .bar {
    background: #e10507 !important;
}

/* Centered logo overlay to replace multiplier during BETTING */
#game-logo-overlay {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 90px; /* slightly larger for better prominence */
    width: auto;
    display: none; /* shown only during BETTING */
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    z-index: 10;
}

/* When animations are disabled, we center the multiplier at 50% (see .multiplier-centered).
   During RECEIVING BETS (logo shown), place the logo just above the centered multiplier
   so it sits nicely in the middle of the screen. */
body.no-animations #game-logo-overlay {
    top: 48%; /* even closer to the centered multiplier */
}

@media (max-width: 1099px) {
    body.no-animations #game-logo-overlay {
        top: 44%; /* closer on small screens too */
        height: 48px; /* scale up on mobile as well */
    }
}

/* Center the multiplier when animations are disabled */
#multiplier-display.multiplier-centered {
    top: 50%;
}

/* When multiplier is centered, place Status (phase-display) just below it */
#multiplier-display.multiplier-centered ~ #phase-display {
    top: calc(50% + 2.2rem); /* avoid overlap with large digits while still tight */
}

/* Leaderboard: highlight current logged-in user's winning entries (light purple to match Game Data) */
.leaderboard-row.self-entry td {
    background: rgba(167, 139, 250, 0.20) !important; /* light purple tint */
}
.leaderboard-row.self-entry {
    box-shadow: inset 2px 0 0 0 #a78bfa !important; /* light purple accent bar on left */
}
/* Ensure highlight is visible when rows contain a card element */
.leaderboard-row.self-entry .lb-card {
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.24), rgba(167, 139, 250, 0.14)) !important;
    border-left: 3px solid #a78bfa !important;
}

/* Apply the same highlight to Live/Previous bet rows in Game Data tables */
.live-bet-row.self-entry td,
.previous-bet-row.self-entry td {
    background: rgba(167, 139, 250, 0.20) !important; /* light purple tint */
}
.live-bet-row.self-entry,
.previous-bet-row.self-entry {
    box-shadow: inset 2px 0 0 0 #a78bfa; /* light purple accent bar on left */
}

/* When animations are OFF and multiplier is centered, give 'CRASHED' a bit more space.
   In animation mode, use default position (same as RECEIVING BETS). */
body.no-animations #multiplier-display.crashed ~ #phase-display {
    top: calc(50% + 2.6rem);
}

/* Mobile responsive multiplier */
@media (max-width: 1099px) {
    #multiplier-display {
        font-size: 3.5rem; /* Smaller on mobile */
        top: calc(28% - 8px); /* Push down to avoid overlapping Round ID */
    }
    
    #phase-display {
        font-size: 1rem; /* Smaller phase text */
        top: calc(28% + 1.2rem - 8px); /* Keep spaced below multiplier on mobile */
    }
    
    #game-identifier-display {
        font-size: 1.5rem; /* Smaller game ID */
        bottom: 5px; /* Move closer to bottom */
    }
}

/* Mobile: also push the logo overlay lower during BETTING so bar and status sit below it */
@media (max-width: 1099px) {
    #game-logo-overlay {
        top: 28%;
    }
}

#multiplier-display.crashed {
    color: var(--color-multiplier-crashed, #ff4d4d); /* default crash red */
}

#phase-display {
    position: absolute;
    top: calc(25% + 3rem); /* Position directly underneath the multiplier */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: normal;
    color: #ccc;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Clicks pass through */
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Round ID Display - Top Left */
#round-id-display {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    /* Subtle grey panel-like background to match menu panel theme */
    background: rgba(30, 41, 59, 0.5);
    padding: 4px 10px;
    /* Remove window/button appearance */
    border-radius: 0;
    border: none;
    backdrop-filter: none;
    box-shadow: none;
    cursor: default;
    pointer-events: none;
    z-index: 10;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1099px) {
    #round-id-display {
        font-size: 0.75rem;
        padding: 5px 10px;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
    }
}

#game-identifier-display {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.1);
    pointer-events: none; /* Clicks pass through */
    z-index: 5; /* Below multiplier but above canvas */
}

/*
 * Game Canvas
 * The canvas is positioned absolutely to fill its parent (.game-window-area).
 * This ensures it scales correctly without pushing other elements around.
 * Width and height are set to 100% to make it responsive, and object-fit: cover
 * ensures the canvas content covers the entire area without distortion,
 * which is ideal for background animations.
 */
#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the animation covers the area, may crop edges. */
    z-index: 1; /* Places it behind UI overlays. */
}

/* Version badge */
#version-badge {
    position: fixed;
    left: 8px;
    top: 8px;
    font-size: 10px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 3px 6px;
    border-radius: 0;
    z-index: 2147483647;
    pointer-events: none;
}

/* Popup Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647; /* Maximum z-index to ensure it's on top */
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

/* Hide header and menu when body has popup-active class */
body.popup-active .header-area,
body.popup-active .menu-container {
    display: none !important;
}

.popup-content {
  background: #1e283c;
  padding: 20px;
  border-radius: 12px;
  position: relative; /* allow absolute children like in-modal overlays */
  box-sizing: border-box; /* include padding in width to avoid overflow */
  width: min(95vw, 900px);
  max-width: 900px; /* cap width on large screens */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  /* Keep the popup content interactive even when overlay ignores pointer events */
  pointer-events: auto;
  /* Contain the inner scroll area so sticky headers pin to it */
  overflow: hidden;
}

/* Prevent table content from causing overflow inside popups */
.popup-content .info-table { width: 100%; table-layout: fixed; margin: 0 auto; }
.info-table th, .info-table td { word-break: break-word; }

#replay-multiplier-display {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-kerning: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    line-height: 1;
    letter-spacing: 0.02em;
    max-width: 100%;
}

@media (max-width: 560px) {
    #replay-multiplier-display {
        font-size: clamp(2.8rem, 12vw, 4.1rem);
    }
}

/* Sticky header support inside popup scroll areas */
.popup-scrollable-content .info-table {
  border-collapse: separate; /* sticky can be unreliable with collapsed borders */
  border-spacing: 0; /* preserve look of collapsed borders */
}
.popup-scrollable-content .info-table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}
.popup-scrollable-content .info-table thead th {
  position: sticky; /* keep each header cell pinned */
  top: 0;
  z-index: 5; /* above body rows */
  background-color: #0f172a; /* solid background while scrolling */
}

/* Tighten padding on very small screens for extra room */
@media (max-width: 560px) {
  .popup-content { padding: 14px; }
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    z-index: 2147483648;
}

.popup-close:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 1));
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.popup-header {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
}

.popup-scrollable-content {
    /* Make this the actual scroll area inside the popup */
    flex: 1 1 auto;
    min-height: 0; /* allow flex child to shrink so scrolling activates */
    overflow-y: auto;
    padding-right: 15px; /* for scrollbar spacing */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}

.popup-scrollable-content::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

.popup-scrollable-content h2, .popup-scrollable-content h3, .popup-scrollable-content h4 {
    color: #a0aec0;
    margin-top: 1.5em;
}

.popup-scrollable-content p, .popup-scrollable-content li {
    color: #e2e8f0;
    line-height: 1.6;
}

.popup-scrollable-content .copyright {
    text-align: center;
    font-size: 0.8rem;
    color: #718096;
    margin-bottom: 20px;
}

.placeholder {
    color: var(--color-placeholder, #ff4d4d); /* Red for placeholder text */
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    color: #e2e8f0;
}

.info-table th, .info-table td {
    border: 1px solid #374151;
    padding: 8px 12px;
    text-align: left;
}

.info-table thead th {
    background-color: #111827;
    color: #9ca3af;
    font-weight: bold;
}

.info-table .copyright-cell {
    text-align: right;
    font-size: 0.8rem;
}

.info-table .section-header td {
    background-color: #162033;
    font-weight: bold;
    text-align: center;
}

.info-table .sub-section-header td {
    background-color: #253147;
    font-weight: bold;
}

.info-table .placeholder-row td:first-child {
    font-weight: bold;
}

.info-table .placeholder-row .placeholder {
    color: #ff4d4d;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Round Data and Verification Tool popup enhancements */
.info-table .placeholder-row td {
    vertical-align: top;
}

/* Description text styling */
.rd-desc {
    display: block;
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 400;
    margin-bottom: 6px;
    line-height: 1.4;
}

/* Data values styling */
.info-table .placeholder-row span:not(.rd-desc) {
    display: block;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.9rem;
    color: #e2e8f0;
    word-break: break-all;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1.5;
}

/* Specific styling for Round Data IDs */
#rd-round-id,
#rd-date-time,
#rd-nonce,
#rd-result {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    font-weight: 700;
}

/* Hash values get special treatment */
#rd-hash,
#rd-server-seed,
#rd-client-seed-1,
#rd-client-seed-2,
#rd-client-seed-3 {
    font-size: 0.8rem;
    letter-spacing: -0.02em;
}

/* Verification Tool output styling */
.output-mono {
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    word-break: break-all;
    background: rgba(255, 255, 255, 0.06);
    padding: 8px 10px;
    border-radius: 6px;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.08);
    line-height: 1.5;
    font-size: 0.85rem;
    color: #e2e8f0;
}

#vt-result-text {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
    color: #86efac;
    font-weight: 800;
    font-size: 1rem;
}

/* Sub-section headers */
.info-table .sub-section-header td {
    background-color: #1e293b;
    font-weight: 800;
    color: #cbd5e1;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    padding: 10px 12px;
}

#chat-rules-popup .info-table .sub-section-header td {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Table header styling */
.info-table thead th {
    background-color: #0f172a;
    color: #cbd5e1;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 14px 12px;
}

/* Inline close button in any popup title row, pinned right */
.popup-title-cell {
    position: relative; 
    padding-right: 48px !important; /* room for the button */
}
.popup-title-cell .popup-close {
    position: absolute !important; 
    top: 50% !important; 
    right: 10px !important; 
    transform: translateY(-50%) !important; 
    margin: 0 !important; 
    z-index: 1 !important; 
    width: 32px !important; 
    height: 32px !important; 
}

/* Help row styling */
.info-table .help-row td {
    padding: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Game Help: force indent on first column labels to align with bullet text */
#game-help-popup .info-table tbody tr > td:first-child:not([colspan]) {
    padding-left: 44px !important; /* increased indent to align with bullet text */
}

/* Mobile phone formatting for all popup tables */
@media (max-width: 560px) {
  /* Keep tables centered inside popup */
  .popup-content .info-table {
    width: 100%;
    margin: 0 auto;
    table-layout: auto; /* allow content-based column sizing on phones */
  }

  /* Prevent vertical letter-wrapping of labels; reserve space for label column */
  .popup-overlay .info-table tbody tr > td:first-child:not([colspan]) {
    width: 120px;           /* reasonable label width on phones */
    min-width: 120px;
    white-space: nowrap;    /* keep words on one line */
    word-break: normal;     /* override global break-word */
  }

  /* Game Help: reduce left indent on phones to free column space */
  #game-help-popup .info-table tbody tr > td:first-child:not([colspan]) {
    padding-left: 16px !important;
    width: 50% !important; /* Maintain 50:50 split on mobile */
    white-space: normal !important; /* Allow wrapping on mobile */
  }
  
  /* Game Help: ensure second column also maintains 50% on mobile */
  #game-help-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
    width: 50% !important; /* Maintain 50:50 split on mobile */
  }
  
  /* Game Help: maintain fixed layout on mobile */
  #game-help-popup .info-table {
    table-layout: fixed !important; /* Keep fixed layout on mobile for 50:50 split */
  }
}

/* Game Help: 50:50 column split with text wrapping */
#game-help-popup .info-table {
  table-layout: fixed; /* Enable fixed layout for equal columns */
}

#game-help-popup .info-table tbody tr > td:first-child:not([colspan]) {
  width: 50%; /* First column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

#game-help-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
  width: 50%; /* Second column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

/* Game Help: style value cells to match placeholder boxes */
#game-help-popup .info-table tr:not(.sub-section-header) td:nth-child(2):not([colspan]) {
  background: rgba(12, 18, 32, 0.55);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Game Help: vertically center column 1 labels for standard 2-column rows */
#game-help-popup .info-table tbody tr:not(.sub-section-header):not(.section-header):not(.help-row) > td:first-child:not([colspan]) {
  vertical-align: middle;
}

/* Slightly tighten label/value spacing on phones */
@media (max-width: 560px) {
  #game-help-popup .info-table tr:not(.sub-section-header) td:nth-child(2):not([colspan]) {
    padding: 8px 10px; /* mimic span box padding */
  }
}

/* Round Data: 50:50 column split with text wrapping */
#round-data-popup .info-table {
  table-layout: fixed; /* Enable fixed layout for equal columns */
}

#round-data-popup .info-table tbody tr > td:first-child:not([colspan]) {
  width: 50%; /* First column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

#round-data-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
  width: 50%; /* Second column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

/* Round Data: style value cells to match placeholder boxes */
#round-data-popup .info-table tr:not(.sub-section-header) td:nth-child(2):not([colspan]) {
  background: rgba(12, 18, 32, 0.55);
  color: #e2e8f0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 10px 12px;
}

/* Round Data: vertically center column 1 labels for standard 2-column rows */
#round-data-popup .info-table tbody tr:not(.sub-section-header):not(.section-header):not(.help-row) > td:first-child:not([colspan]) {
  vertical-align: middle;
}

/* Round Data: mobile responsiveness */
@media (max-width: 560px) {
  #round-data-popup .info-table tbody tr > td:first-child:not([colspan]) {
    width: 50% !important; /* Maintain 50:50 split on mobile */
    white-space: normal !important; /* Allow wrapping on mobile */
  }
  
  #round-data-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
    width: 50% !important; /* Maintain 50:50 split on mobile */
    padding: 8px 10px; /* Tighter spacing on phones */
  }
  
  #round-data-popup .info-table {
    table-layout: fixed !important; /* Keep fixed layout on mobile for 50:50 split */
  }
}

/* Verification Tool: 50:50 column split with text wrapping */
#verification-tool-popup .info-table {
  table-layout: fixed; /* Enable fixed layout for equal columns */
}

#verification-tool-popup .info-table tbody tr > td:first-child:not([colspan]) {
  width: 50%; /* First column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

#verification-tool-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
  width: 50%; /* Second column takes 50% */
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word;
  vertical-align: top;
}

/* Verification Tool: style value cells to match placeholder boxes */
#verification-tool-popup .info-table tr:not(.sub-section-header) td:nth-child(2):not([colspan]) {
  background: rgba(12, 18, 32, 0.55);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* Verification Tool: mobile responsiveness */
@media (max-width: 560px) {
  #verification-tool-popup .info-table tbody tr > td:first-child:not([colspan]) {
    width: 50% !important; /* Maintain 50:50 split on mobile */
    white-space: normal !important; /* Allow wrapping on mobile */
  }
  
  #verification-tool-popup .info-table tbody tr > td:nth-child(2):not([colspan]) {
    width: 50% !important; /* Maintain 50:50 split on mobile */
    padding: 8px 10px; /* Tighter spacing on phones */
  }
  
  #verification-tool-popup .info-table {
    table-layout: fixed !important; /* Keep fixed layout on mobile for 50:50 split */
  }
}

/* Asterisk bullet list styling (Game Information popup) */
.asterisk-list {
    list-style: disc;              /* standard bullet points */
    list-style-position: outside;  /* hang marker outside so wraps align with text */
    margin: 6px 0;                 /* compact vertical spacing */
    padding-left: 24px;            /* space for the bullet gutter */
}

.asterisk-list li {
    position: static;            /* no custom marker positioning */
    padding-left: 0;             /* no extra padding needed */
    color: #e2e8f0;              /* table body text color */
    line-height: 1.5;            /* readable spacing */
}

.asterisk-list li::before {
    content: none;               /* remove asterisk marker */
}

/* Numbered list styling (for ordered steps) */
.numbered-list {
    list-style: decimal;
    list-style-position: outside;  /* hang marker outside for proper wrap */
    margin: 6px 0;
    padding-left: 24px;            /* space for the number gutter */
}

.numbered-list li {
    color: #e2e8f0;
    line-height: 1.5;
}

/* Chat Rules popup: table layout (match Game Help) */
#chat-rules-popup .info-table {
  table-layout: fixed;
}

#chat-rules-popup .numbered-list {
  margin: 8px 0 0 0;
  padding-left: 22px;
}

#chat-rules-popup .numbered-list > li {
  padding: 2px 0;
  color: #e2e8f0;
  line-height: 1.5;
}

#chat-rules-popup .help-row td > div {
  color: #e2e8f0;
  line-height: 1.5;
}

#chat-rules-popup .chat-rule-placeholder {
  color: #ef4444;
  font-weight: 800;
}

/* Sound Prompt Popup */
.popup-content-small {
    background: #1e283c;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px; /* Smaller width */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid #374151;
    /* Keep the small popup content interactive as well */
    pointer-events: auto;
}

.popup-logo {
    height: 40px;
    margin-bottom: 20px;
}

.popup-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 25px;
}

.popup-button-group {
    display: flex;
    gap: 20px;
    width: 100%;
}

.popup-button-no,
.popup-button-yes {
    flex-grow: 1;
    border: none !important;
    outline: none !important;
    border-radius: 10px;
    padding: 18px;
    font-size: 36px; /* larger for stronger visual weight */
    font-weight: 900; /* extra bold */
    color: #ffffff; /* pure white glyphs */
    cursor: pointer;
    transition: transform 0.1s ease;
    /* Bold white appearance: remove dark strokes/shadows */
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
}

.popup-button-no {
    background-color: var(--color-popup-no, #d9534f); /* Red */
}

.popup-button-yes {
    background-color: #5cb85c; /* Green */
}

.popup-button-no:hover,
.popup-button-yes:hover {
    transform: scale(1.05);
}


/* Mobile-First Layout (Default) */
.app-shell {
    display: block;
}

.game-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Changed from height to min-height */
    overflow-y: auto; /* Allow vertical scrolling */
    overflow-x: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f0f0f0;
    padding: 6px;
    box-sizing: border-box;
    gap: 4px; /* Reduced gap between layout elements */
}


.game-data-area {
    display: none; /* Hide sidebar on mobile by default */
}

.header-area {
    flex: 0 0 80px; /* Taller to fit bigger logo comfortably */
    justify-content: center; /* Center logo + balance as a group */
    padding: 0 20px;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    align-items: center;
}

.header-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* center balance relative to logo */
    flex: 0 0 auto; /* don't consume extra space; allows centering */
    padding-left: 20px;
    gap: 10px; /* keep a small gap between balance grid and menu */
    position: static; /* allow absolute children (menu) to anchor to header-area */
}

/* Ensure header stacks above main UI */
.header-area {
    position: relative;
    z-index: 2147483646; /* top-level stacking context for dropdown */
}

/* Header Hamburger Menu */
.menu-container {
    position: absolute; /* pin burger to far right of header */
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.chat-open .game-layout {
    margin-right: 420px;
}

.chat-toggle-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    position: relative;
}

.chat-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.chat-toggle-icon svg {
    display: block;
}

.chat-toggle-btn svg {
    width: 16px;
    height: 16px;
}

.chat-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.chat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: -10px 0 30px rgba(0,0,0,0.55);
    transform: translateX(100%);
    transition: transform 0.2s ease;
    z-index: 2147483647;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@supports (height: 100dvh) {
    .chat-drawer {
        height: 100dvh;
    }
}

body.chat-open .chat-drawer {
    transform: translateX(0);
}

.chat-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 12px 12px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
}

.chat-rules-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.55);
    color: rgba(226, 232, 240, 0.95);
    cursor: pointer;
}

.chat-rules-btn svg {
    width: 24px;
    height: 24px;
}

.chat-online {
    justify-self: center;
    text-align: center;
    font-weight: 900;
    letter-spacing: 0.3px;
    color: rgba(226, 232, 240, 0.95);
}

#chat-online-count {
    color: #22c55e;
}

.chat-jump-latest {
    margin: 10px 12px 0 12px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(30, 41, 59, 0.55);
    color: #e5e7eb;
    cursor: pointer;
}

.chat-title {
    font-weight: 900;
    letter-spacing: 0.3px;
}

.chat-close-btn {
    position: static;
    top: auto;
    right: auto;
    justify-self: end;
}

#chat-drawer #chat-close.popup-close {
    position: static !important;
    top: auto !important;
    right: auto !important;
    z-index: auto !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
}

.chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.chat-local-gate {
    margin: 10px 12px 12px 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(127, 29, 29, 0.22);
    color: rgba(254, 226, 226, 0.95);
    font-weight: 800;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.chat-local-gate.visible {
    opacity: 1;
    transform: translateY(0);
}

.chat-restriction-popup {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 6px;
}

.chat-restriction-title {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.chat-restriction-body {
    font-size: 12px;
    font-weight: 800;
}

.chat-restriction-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25rem;
}

.chat-local-gate-text {
    font-size: 12px;
    line-height: 1.25rem;
}

.chat-messages::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chat-message {
    display: block;
}

.chat-message.chat-message-betcard {
    display: block;
}

.chat-message-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(20, 27, 41, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 10px 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.30);
}

.chat-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.chat-message-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.chat-message-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chat-message-name {
    font-size: 12px;
    font-weight: 800;
    color: rgba(226, 232, 240, 0.95);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.chat-message-time {
    font-size: 10px;
    color: rgba(226, 232, 240, 0.65);
    line-height: 1.1;
    white-space: nowrap;
}

.chat-like-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 28px;
    width: 34px;
    min-width: 34px;
    padding: 0;
    border-radius: 9999px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(226, 232, 240, 0.8);
    cursor: pointer;
    line-height: 0;
    overflow: visible;
}

.chat-like-btn.has-count {
    width: auto;
    min-width: 34px;
    padding: 0 8px;
}

.chat-like-heart {
    display: block;
    overflow: visible;
}

.chat-like-btn .chat-like-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.85);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.chat-like-btn .chat-like-count:empty {
    display: none;
}

.chat-like-btn.liked {
    background: rgba(59, 130, 246, 0.30);
    border-color: rgba(59, 130, 246, 0.60);
    color: rgba(255, 255, 255, 0.98);
}

.chat-like-btn.liked .chat-like-count {
    color: rgba(255, 255, 255, 0.98);
}

.chat-message-body {
    display: block;
    margin-left: 44px;
}

.chat-message.chat-message-betcard .chat-message-body {
    margin-left: 0;
}

.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    color: rgba(255,255,255,0.92);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 6px 16px rgba(0,0,0,0.35);
    user-select: none;
}

.chat-bubble {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

.cbc-spacer {
    flex: 1 1 auto;
}

.chat-bet-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}

 .chat-bet-card.self-entry {
     background: linear-gradient(145deg, #14532d, #166534);
     border: 1px solid rgba(34, 197, 94, 0.45);
     box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 10px rgba(34, 197, 94, 0.18);
 }

 .chat-bet-card.self-entry .leaderboard-shield {
     background: rgba(34, 197, 94, 0.14);
     border: 1px solid rgba(34, 197, 94, 0.35);
     color: rgba(255,255,255,0.85);
 }

 .chat-bet-card.self-entry .leaderboard-shield:hover {
     background: rgba(34, 197, 94, 0.22);
     color: rgba(255,255,255,0.95);
 }

.cbc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cbc-icons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cbc-username {
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    line-height: 1.1;
    font-size: 14px;
}

.cbc-datetime {
    margin-top: 4px;
    font-size: 10px;
    color: rgba(226, 232, 240, 0.75);
}

.chat-betcard-icon,
.chat-betcard-shield {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(226, 232, 240, 0.95);
}

.cbc-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}

.cbc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cbc-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(226, 232, 240, 0.75);
    line-height: 1.1;
}

.cbc-value {
    font-weight: 800;
    color: rgba(255,255,255,0.95);
    font-size: 14px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cbc-value.is-empty {
    color: rgba(226, 232, 240, 0.75);
}

.cbc-value.is-mult {
    color: #22c55e;
}

.cbc-value.is-crash.multiplier-low {
    color: #60a5fa;
}

.cbc-value.is-crash.multiplier-medium {
    color: #e879f9;
}

.cbc-value.is-crash.multiplier-high {
    color: #ef4444;
}


.chat-message-system .chat-message-box {
    background: rgba(51, 65, 85, 0.35);
    border-color: rgba(148, 163, 184, 0.18);
}

.chat-message-system .text {
    color: #ef4444;
}

.chat-message-system .meta {
    color: rgba(226, 232, 240, 0.7);
}

.chat-message .meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: #9ca3af;
}

.chat-message .text {
    margin-top: 0;
    color: #e5e7eb;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.25rem;
}

.chat-message.chat-message-system .text {
    color: #ef4444;
}

.chat-input {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    align-items: center;
    position: relative;
}

.chat-emoji-wrap {
    position: static;
    display: none;
    align-items: center;
    justify-content: center;
}

.chat-emoji-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(30, 41, 59, 0.55);
    color: #f1f5f9;
    cursor: pointer;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 20px;
    line-height: 1;
    box-sizing: border-box;
    padding: 0;
}

.chat-emoji-picker {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    width: auto;
    max-height: 240px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.55);
    padding: 10px;
    display: none;
    z-index: 2147483647;
    -ms-overflow-style: none;
    scrollbar-width: none;
    box-sizing: border-box;
}

.chat-emoji-picker::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chat-emoji-picker.open {
    display: flex;
    flex-direction: column;
}

.chat-emoji-top {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat-emoji-search {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(2, 6, 23, 0.55);
    color: #f1f5f9;
    outline: none;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.chat-emoji-scroll {
    margin-top: 8px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.chat-emoji-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.chat-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 6px;
}

.chat-emoji-btn {
    width: 100%;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(2, 6, 23, 0.35);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.chat-emoji-btn:hover {
    background: rgba(51, 65, 85, 0.45);
    border-color: rgba(255, 255, 255, 0.12);
}

.chat-text {
    width: 100%;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(2, 6, 23, 0.6);
    color: #f1f5f9;
    outline: none;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    resize: none;
    min-height: 40px;
    height: 40px;
    max-height: 120px;
    overflow-y: auto;
    box-sizing: border-box;
    line-height: 20px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.chat-send-btn {
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(59, 130, 246, 0.4);
    background: linear-gradient(145deg, rgba(59, 130, 246, 0.85), rgba(124, 58, 237, 0.85));
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
    box-sizing: border-box;
}

@media (max-width: 560px) {
    body.chat-open .game-layout {
        margin-right: 0;
    }
    .chat-drawer {
        width: 100vw;
    }

    /* Mobile: show emoji toggle and keep input bar visible */
    .chat-emoji-wrap {
        display: flex;
    }
    .chat-input {
        grid-template-columns: 1fr auto auto;
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98));
    }
}

@media (min-width: 561px) {
    .chat-input {
        grid-template-columns: 1fr auto auto;
    }

    .app-shell {
        display: flex;
        width: 100%;
        height: 100vh;
        min-height: 100vh;
        align-items: stretch;
    }

    .chat-emoji-wrap {
        display: flex;
    }

    .game-layout {
        flex: 1 1 auto;
        margin-right: 0;
        min-width: 0;
        height: 100%;
    }

    .chat-drawer {
        position: relative;
        top: auto;
        right: auto;
        height: 100%;
        align-self: stretch;
        transform: none;
        width: 0;
        overflow: hidden;
        border-left: none;
        box-shadow: none;
        min-height: 0;
    }

    body.chat-open .chat-drawer {
        width: 420px;
        border-left: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: -10px 0 30px rgba(0,0,0,0.55);
        overflow: visible;
    }

    body.chat-open .game-layout {
        margin-right: 0;
    }
}

.hamburger-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
}

.hamburger-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

.menu-dropdown {
    position: fixed; /* escape any overflow/stacking contexts */
    top: auto; /* set by JS */
    left: auto; /* set by JS */
    min-width: 220px;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.95), rgba(30, 41, 59, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.2s ease, visibility 0.15s ease;
    z-index: 2147483647; /* ensure on top of any app elements */
}

.menu-dropdown.show {
    display: block; /* ensure visible in all contexts */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-user-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(20, 27, 41, 0.45);
}

.menu-user-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.menu-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    object-fit: cover;
}

.menu-user-name {
    font-weight: 800;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    flex: 1 1 auto;
    min-width: 0;
    /* Ensure the 3…3 formatted name can render fully */
    min-inline-size: 7ch;
}

.menu-user-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9999px;
    flex: 0 0 auto;
    min-width: 72px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(2, 6, 23, 0.35);
    color: #e5e7eb;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.menu-user-action:hover {
    background: rgba(2, 6, 23, 0.55);
    border-color: rgba(255, 255, 255, 0.22);
}

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 2px 14px 2px;
}

@media (max-width: 560px) {
    .avatar-picker-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.avatar-picker-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(15, 23, 42, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}

.avatar-picker-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.72);
}

.avatar-picker-item.selected {
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.65), 0 0 0 2px rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.55);
}

.avatar-picker-item img {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

@media (orientation: landscape) {
    .menu-dropdown {
        position: absolute;
    }
}

.menu-item {
    display: flex;
    align-items: center;
    /* ... */
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(20, 27, 41, 0.45);
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer; /* Show hand cursor for clickable menu items */
}

.menu-item + .menu-item {
    margin-top: 8px;
}

.menu-item:hover {
    background: rgba(33, 43, 64, 0.75);
    border-color: rgba(255, 255, 255, 0.12);
}

/* Plain text (non-clickable) line used for Round ID in menu */
.menu-plain {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-left: 12px !important; /* match .menu-item left padding */
    margin: 2px 0 0 0 !important;
    color: #9ca3af !important; /* subtle grey text */
    cursor: default !important;
    pointer-events: none !important;
    display: block !important;
}

/* Plain text Round ID entry: remove dark block styles */
#menu-round-id {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    padding-left: 12px !important; /* match .menu-item left padding */
    margin: 2px 0 0 0 !important;
    color: #9ca3af !important; /* subtle grey text */
    cursor: default !important;
    pointer-events: none !important;
    display: block !important;
}
#menu-round-id:hover {
    background: transparent !important;
    border-color: transparent !important;
}

.menu-separator {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 8px 0;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(55, 65, 81, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: .2s;
    border-radius: 9999px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 1.5px;
    top: 1.5px;
    background: linear-gradient(145deg, #ffffff, #e5e7eb);
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

.switch input:checked + .slider {
    background: linear-gradient(145deg, #3b82f6, #7c3aed);
}

.switch input:checked + .slider:before {
    transform: translateX(18px);
}

/* Balance Grid in Header */
.balance-grid {
    display: grid;
    /* Exactly three compact columns for the three items */
    grid-template-columns: repeat(3, max-content);
    gap: 8px;
    /* Frameless: no background */
    background: transparent !important;
    padding: 6px 12px;
    border-radius: 0;
    border: none !important;
    outline: none !important;
    /* No shadows to avoid frame appearance */
    box-shadow: none !important;
    backdrop-filter: none !important;
    /* Let the grid be only as wide as needed and stick to the right */
    min-width: unset;
    max-width: unset;
    margin-left: auto; /* push the group to the far right */
    justify-content: end; /* align grid content to the right edge */
}

.balance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Vertically center label and value */
    gap: 2px;
    padding: 6px 10px; /* slightly more vertical space for better centering */
    /* Frameless: fully transparent tile */
    background: rgba(15, 23, 42, 0.5) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* single subtle border per tile */
    outline: none !important;
    box-shadow: none !important;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 32px;
}

/* Remove decorative top accent line to avoid frame-like appearance */
.balance-item::before { display: none; }

/* No moving accent line */
.balance-item:hover::before { display: none; }

.balance-item:hover {
    background: rgba(15, 23, 42, 0.5) !important; /* maintain same background on hover */
    transform: translateY(-1px);
    box-shadow: none !important;
}

.balance-label {
    font-size: 0.6rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
    white-space: nowrap;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Force Noto */
    text-align: center;
}

.balance-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Force Noto */
    font-variant-numeric: tabular-nums;
    text-align: center;
    line-height: 1; /* keep compact */
    min-height: 14px;
    transition: all 0.3s ease;
    /* Reserve enough horizontal space to fit up to 9,999,999.99 (12 chars).
       Using a slightly larger width (13ch) prevents layout shifts as values change. */
    width: 17ch;
}

.balance-value.animating {
    color: #3b82f6;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
    transform: scale(1.05);
}

/* Responsive balance grid removed - using mobile breakpoint defined elsewhere */

.header-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.logo-image {
    height: 76px !important; /* Slightly bigger again */
    width: auto !important;
    max-width: 240px; /* allow a bit more width if aspect ratio needs */
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.header-menu {
    font-size: 24px;
    cursor: pointer;
}

/* Recent Results Area */
.recent-results-area {
    position: relative;
    flex: 0 0 50px;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: visible;
    z-index: 10000;
}

/* Recent Results Container */
.recent-results-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16px;
    gap: 12px;
    position: relative;
    z-index: 300;
}

/* Position toggle button to align under hamburger menu */
.recent-results-toggle {
    position: absolute;
    right: 8px; /* Move closer to right edge */
    top: 50%;
    transform: translateY(-50%);
}

/* Recent Results List */
.recent-results-list {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
    transition: opacity 0.3s ease;
}

/* Hide collapsed list when expanded */
.recent-results-area.expanded .recent-results-list {
    opacity: 0;
    pointer-events: none;
}

/* Hide the original toggle button when dropdown is expanded */
.recent-results-area.expanded .recent-results-toggle {
    opacity: 0;
    pointer-events: none;
}

/* Recent Results Toggle: add 2px inset ring without changing size */
.recent-results-toggle {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Individual Result Item */
.recent-result-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 32px;
    padding: 0 8px;
    background: linear-gradient(145deg, #27344a, #182131); /* Subtle dark gradient */
    color: #ffffff; /* Default text color; overridden by value classes below */
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box; /* include border in fixed height to avoid row overlap */
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.recent-result-item:hover {
    background: linear-gradient(145deg, #334155, #212b3c); /* Brighter gradient on hover */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* Color classes for multipliers */
.recent-result-item.low {
    background: #1b2f5b !important; /* Blue fill */
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #3067e2 !important; /* Blue ring */
}

.recent-result-item.medium {
    background: #372a5d !important; /* Purple fill */
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #8b52da !important; /* Purple ring */
}

.recent-result-item.high {
    background: #591b25 !important; /* Red fill */
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #ff0000 !important; /* Red ring */
    text-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
}

/* Maintain colored rings on hover */
.recent-result-item.low:hover { box-shadow: inset 0 0 0 1px #3067e2, 0 4px 8px rgba(0,0,0,0.3); }
.recent-result-item.medium:hover { box-shadow: inset 0 0 0 1px #8b52da, 0 4px 8px rgba(0,0,0,0.3); }
.recent-result-item.high:hover { box-shadow: inset 0 0 0 1px #ff0000, 0 4px 8px rgba(0,0,0,0.3); }

.recent-results-toggle:hover {
    background: rgba(40, 51, 69, 0.9);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Ensure toggle button stays visible when dropdown is open */
.recent-results-area.expanded .recent-results-toggle {
    background: rgba(40, 51, 69, 0.95);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.4);
}

/* Dropdown Panel */
.recent-results-dropdown {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 10001;
    max-height: 400px;
    overflow: hidden;
}

.recent-results-area.expanded .recent-results-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown Header */
.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #f1f5f9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Close Button - Match popup close button styling */
.dropdown-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match popup close button size */
    width: 32px;
    height: 32px;
    /* Match popup close button red gradient */
    background: linear-gradient(145deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.12); /* White frame */
    border-radius: 6px; /* Slightly less rounded to match popup */
    color: #ffffff; /* White cross */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    flex-shrink: 0;
}

.dropdown-close-btn:hover {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 1)); /* Brighter red on hover */
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

/* Dropdown Grid */
.dropdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    grid-auto-rows: 32px; /* align row height with item height */
}

.dropdown-grid::-webkit-scrollbar {
    display: none;
}

.dropdown-grid .recent-result-item {
    min-width: 60px;
    height: 32px;
    font-size: 0.85rem;
    padding: 0 6px;
}

/* Dropdown Menu */
.dropdown-menu {
    display: block;
    position: absolute;
    top: 60px; /* Position below the header */
    right: 8px; /* Align with the right side of the header */
    background-color: #2c2c2c;
    border: 1px solid #444;
    border-radius: 4px;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000; /* Ensure it's on top of other elements */
}

.dropdown-menu.hidden {
    display: none;
}

.dropdown-section {
    padding: 0 15px;
    margin-bottom: 5px;
}

.dropdown-section-title {
    font-size: 0.8rem;
    font-weight: bold;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 5px;
}

.dropdown-item {
    display: block;
    padding: 10px 15px;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s ease;
    cursor: pointer; /* Hand cursor for dropdown items */
}

.dropdown-item:hover {
    background-color: #444;
}

.game-data-area {
    display: none; /* Hidden on mobile */
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    flex-direction: column;
    /* Important: allow inner flex children to define their own scroll areas */
    min-height: 0;
    height: 100%;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Force Noto in Game Data */
}

.game-data-header {
    padding: 12px 15px;
    border-bottom: 1px solid #374151;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    width: 100%;
    box-sizing: border-box; /* Include padding/border in width to match aside exactly */
    flex: 0 0 auto; /* Do not shrink */
}

/* Bet Statistics Section */
.bet-stats-section {
    margin-bottom: 12px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bet-stats {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* center content horizontally */
    gap: 4px;
    flex: 1;
    text-align: center; /* ensure text centered */
}

.stat-label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.stat-value {
    color: #f9fafb;
    font-size: 0.85rem; /* match Total Balance numbers */
    font-weight: 700;
    line-height: 1;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Responsive size to mirror Total Balance scaling */
@media (max-width: 1099px) {
    .stat-value { font-size: 0.75rem; }
}

/* Menu Panel */
.menu-panel {
    display: flex;
    gap: 2px;
    background: #374151;
    border-radius: 6px;
    padding: 2px;
}

.menu-btn {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.menu-btn:hover {
    background: #4b5563;
    color: #f9fafb;
}

.menu-btn.active {
    background: #3b82f6;
    color: #ffffff;
    font-weight: 600;
}

.menu-btn.active:hover {
    background: #2563eb;
}

.game-data-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* Critical for child scroll containers inside flex parents */
    min-height: 0;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.game-data-table-container {
    flex: 1;
    min-height: 0; /* allow scrolling inside this flex child */
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 10px 0 0;
    /* Smooth scrolling on touch devices */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    position: relative;
}

.game-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    /* Inherit touch-action from container */
    touch-action: inherit;
}

/* My Bets: 2-line row layout */
#my-history-content .my-history-row-top td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 10px;
    padding-bottom: 8px;
}

#my-history-content .my-history-row-bottom td {
    padding-top: 8px;
    padding-bottom: 10px;
}

/* DateTime (top-left) should read as a header line */
#my-history-content .my-history-row-top td:first-child {
    color: rgba(226, 232, 240, 0.9);
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.15;
}

/* Empty cells in the two-line layout shouldn't visually eat padding */
#my-history-content .my-history-row-bottom td:first-child,
#my-history-content .my-history-row-bottom td:last-child {
    padding-top: 8px;
    padding-bottom: 10px;
}

/* My Bets header: keep headings separated (no overlap into next column) */
#my-history-content .game-data-table thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#my-history-content .game-data-table thead th:nth-child(3) {
    letter-spacing: 0.3px;
}

#my-history-content .game-data-table thead th:nth-child(2),
#my-history-content .game-data-table thead th:nth-child(3),
#my-history-content .game-data-table thead th:nth-child(4) {
    padding-left: 10px;
    padding-right: 10px;
}

/* Make the two-row layout read as a single block */
#my-history-content .my-history-row-top td {
    vertical-align: top;
}

#my-history-content .my-history-row-bottom td {
    vertical-align: bottom;
}

/* Align the action icons with the DateTime row */
#my-history-content .my-history-row-top td.pf-icon-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* My Bets action cell: keep icons visible and aligned */
.game-data-table td.pf-icon-cell {
    padding-right: 12px;
}

.game-data-table td.pf-icon-cell {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.game-data-table thead {
    position: sticky;
    top: 0;
    background: rgba(30, 41, 59, 0.95);
    z-index: 10;
}

.game-data-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #a0aec0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Table numeric columns (BET, MULTIPLIER, WIN) match Total Balance size */
.game-data-table tbody td:nth-child(2),
.game-data-table tbody td:nth-child(3),
.game-data-table tbody td:nth-child(4) {
    font-size: 0.85rem; /* match Total Balance numbers */
    font-variant-numeric: tabular-nums;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@media (max-width: 1099px) {
    .game-data-table tbody td:nth-child(2),
    .game-data-table tbody td:nth-child(3),
    .game-data-table tbody td:nth-child(4) {
        font-size: 0.75rem;
    }
}

#live-game-content .game-data-table th:nth-child(1),
#previous-round-content .game-data-table th:nth-child(1) { /* USER column */
    width: 25%;
    min-width: 80px;
}

#live-game-content .game-data-table th:nth-child(2),
#previous-round-content .game-data-table th:nth-child(2) { /* BET column */
    width: 25%;
    min-width: 70px;
}

#live-game-content .game-data-table th:nth-child(3),
#previous-round-content .game-data-table th:nth-child(3) { /* MULTIPLIER column */
    width: 25%;
}

#live-game-content .game-data-table th:nth-child(4),
#previous-round-content .game-data-table th:nth-child(4) { /* WIN column */
    width: 25%;
    min-width: 70px;
}

#my-history-content .game-data-table {
    table-layout: fixed;
}

#my-history-content .game-data-table th:nth-child(1),
#my-history-content .game-data-table td:nth-child(1) {
    width: calc((100% - 80px) * 0.28);
}

#my-history-content .game-data-table th:nth-child(2),
#my-history-content .game-data-table td:nth-child(2),
#my-history-content .game-data-table th:nth-child(3),
#my-history-content .game-data-table td:nth-child(3),
#my-history-content .game-data-table th:nth-child(4),
#my-history-content .game-data-table td:nth-child(4) {
    width: calc((100% - 80px) * 0.24);
}

#my-history-content .game-data-table th:nth-child(5),
#my-history-content .game-data-table td:nth-child(5) {
    width: 80px;
    min-width: 80px;
    text-align: right;
}

/* 5th column is used by My Bets for PF/Share action icons */
.game-data-table th:nth-child(5),
.game-data-table td:nth-child(5) {
    width: 80px;
    min-width: 80px;
    text-align: right;
}

.game-data-table td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-weight: 500;
    /* Inherit touch behavior from container */
    touch-action: inherit;
}

.game-data-table tbody {
    /* Inherit touch behavior from container */
    touch-action: inherit;
}

.game-data-table tbody tr {
    /* Inherit touch behavior from container */
    touch-action: inherit;
}

.game-data-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.game-data-table .user-cell {
    color: #60a5fa;
    font-weight: 600;
}

.game-data-table .bet-cell {
    color: #10b981;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant-numeric: tabular-nums;
}

.game-data-table .multiplier-cell {
    font-weight: 700;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant-numeric: tabular-nums;
}

.game-data-table .multiplier-low {
    color: #3b82f6 !important; /* Match Round History */
    text-shadow: 0 0 3px rgba(59, 130, 246, 0.3);
}

.game-data-table .multiplier-medium {
    color: #a855f7 !important; /* Match Round History */
    text-shadow: 0 0 3px rgba(139, 92, 246, 0.3);
}

.game-data-table .multiplier-high {
    color: #ef4444 !important; /* Match Round History */
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
    font-weight: 700;
}

.game-data-table .win-cell {
    color: #10b981;
    font-weight: 600;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-variant-numeric: tabular-nums;
}

.game-data-table .win-cell.no-win {
    color: #6b7280;
}

/* Scrollbar styling for the table container */
.game-data-table-container::-webkit-scrollbar {
    width: 6px;
}

.game-data-table-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.game-data-table-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.game-data-table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Live bet status styling */
.live-bet-row.status-active {
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
}

.live-bet-row.status-cashed_out {
    background: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3b82f6;
}

.live-bet-row.status-lost {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    opacity: 0.7;
}

.live-bet-row.status-active .multiplier-cell,
.live-bet-row.status-active .win-cell {
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

@keyframes pulse-glow {
    from {
        text-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
    }
    to {
        text-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
    }
}

.main-game-area {
    flex: 0 0 auto; /* Don't grow, fixed size based on content */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-height: 200px; /* Minimum height for game canvas */
}

.recent-results-area {
    position: relative; /* This is crucial for positioning the absolute child */
    flex: 0 0 46px; /* Slightly reduced height for results bar */
    height: 46px; /* Explicit height for mobile */
    justify-content: space-between; /* Override the generic center alignment */
    padding: 0 20px;
    margin-bottom: 4px; /* Add margin to maintain consistent spacing */
}

.recent-results-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20; /* Higher than other elements to appear on top */
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px; /* Increased padding for better spacing */
    max-height: 50px; /* Restore initial max-height for transition */
    border-radius: 12px; /* Rounded corners like bet panel */
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease-out,
                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping in collapsed view */
    gap: 10px; /* Increased gap for better spacing */
    align-items: center; /* Vertically center items */
    justify-content: flex-start; /* Left-align the items */
    box-sizing: border-box;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scaleY(1);
    transform-origin: top center;
    opacity: 1;
}

.recent-results-container.expanding .recent-result-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.recent-results-container.collapsing .recent-result-item {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
}

.recent-result-item:hover {
    background: linear-gradient(135deg, #5a5a7a, #4a4a6a);
    border-color: #7a7a9a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Color coding for multipliers */
.recent-result-item.low {
    background: linear-gradient(135deg, #1e40af, #3b82f6); /* Blue gradient for low multipliers (1.0x - 1.99x) */
    border-color: rgba(59, 130, 246, 0.3);
}

.recent-result-item.low:hover {
    background: linear-gradient(135deg, #2563eb, #60a5fa);
    border-color: rgba(96, 165, 250, 0.5);
}

.recent-result-item.medium {
    background: linear-gradient(135deg, #7c3aed, #a855f7); /* Purple gradient for medium multipliers (2.0x - 9.99x) */
    border-color: rgba(168, 85, 247, 0.3);
}

.recent-result-item.medium:hover {
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    border-color: rgba(192, 132, 252, 0.5);
}

.recent-result-item.high {
    background: linear-gradient(135deg, #dc2626, #ef4444); /* Red gradient for high multipliers (10.0x+) */
    border-color: rgba(239, 68, 68, 0.3);
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 12px rgba(239, 68, 68, 0.4);
}

.recent-result-item.high:hover {
    background: linear-gradient(135deg, #ef4444, #f87171);
    border-color: rgba(248, 113, 113, 0.5);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 16px rgba(239, 68, 68, 0.6);
}

.recent-results-toggle {
    /* Match hamburger menu button styling but smaller */
    width: 32px; /* Reduced from 36px */
    height: 32px; /* Reduced from 36px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 14px; /* Reduced from 16px */
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    padding: 0;
    line-height: 1;
}

.game-window-area {
    flex: 1; /* Takes remaining space in main area */
}

.betting-area {
    flex: 0 0 auto; /* Auto height based on content */
    order: 2; /* Place after main-game-area */
}

.game-data-area {
    order: 3; /* Place after betting-area */
    flex: 0 0 auto;
}

.bet-panels-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    height: 100%;
}

.bet-panel {
    height: auto; /* Auto height to fit content */
    min-height: 260px; /* Minimum height for all elements */
}

/* Action buttons (BET/CASH OUT) */
.action-btn {
    transition: background 0.3s ease, transform 0.2s ease;
}

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

.action-btn.bet-mode {
    background: linear-gradient(135deg, #28a745, #218838);
    color: white;
}
.action-btn.bet-mode:hover {
    background: linear-gradient(135deg, #2dbf4e, #28a745);
}

.action-btn.cancel-mode {
    background-color: #f0ad4e; /* Yellow for Cancel */
    color: white;
}

.action-btn.cancel-mode:hover {
    background-color: #eea236;
}

.action-btn.cashout-mode {
    background-color: #f08d4e; /* Orange for Cash Out */
    color: white;
}

.action-btn.cashout-mode:hover {
    background-color: #ec7a34;
}

.action-btn.payout-mode {
    background-color: #d9534f; /* Red for Payout */
    color: white;
}

.action-btn.payout-mode:hover {
    background-color: #c9302c;
}

.action-btn.pending-mode {
    background: linear-gradient(135deg, #dc2626, #ef4444); /* Red gradient for pending/cancel */
    color: #fff;
    border-color: rgba(239, 68, 68, 0.35);
}
.action-btn.pending-mode:hover {
    background: linear-gradient(135deg, #ef4444, #f87171);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Landscape Layout (>=1100px) */
@media (min-width: 1100px) {
    /* Lock the page to the viewport on desktop */
    html, body {
        overflow: hidden;
    }
    /* Ensure game canvas always squashes when height is limited */
    .game-layout {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden; /* Prevent stray scrollbars on desktop */
    }
    
    /* Force landscape layout for bet panels */
    .betting-area {
        width: 100%;
    }
    
    .main-game-area {
        flex: 1 1 auto; /* grow, shrink, and base size auto */
    }
    
    .game-window-area {
        flex: 1 1 auto; /* grow, shrink, and base size auto */
    }

    .game-data-area {
        display: flex; /* Show sidebar on desktop */
        min-height: 0; /* allow inner scroll areas to work inside CSS grid */
    }

    /* No need to override .recent-results-container positioning here */

    .game-layout {
        display: grid;
        grid-template-columns: 400px 1fr; /* Even wider left sidebar to prevent horizontal scroll */
        grid-template-rows: 60px 50px 1fr auto; /* Header, Results, Main Content (dynamic), Footer */
        grid-template-areas:
            "header header"
            "gamedata results"
            "gamedata maingame"
            "gamedata betting";
        gap: 8px;
        height: 100vh;
        padding: 8px;
        box-sizing: border-box;
    }

    .header-area { grid-area: header; }
    .recent-results-area { 
        grid-area: results;
        flex: none;
        margin-bottom: 0 !important; /* Grid gap handles spacing; avoid adding to total height */
    }
    .game-data-area { grid-area: gamedata; }
    .main-game-area { 
        grid-area: maingame;
        min-height: 0; /* Prevents overflow in grid row */
        overflow: hidden; /* Ensures canvas does not overflow its container */
        display: flex;
        flex-direction: column;
    }
    .betting-area { grid-area: betting; }

    /* Desktop-specific bet panels styling */
    .bet-panels-container {
        display: flex !important;
        flex-direction: row !important; /* Force side-by-side layout */
        gap: 8px !important; /* 8px gap for desktop view - forced with !important */
        width: 100%;
        align-items: stretch;
    }

    .bet-panel {
        flex: 1 1 calc(50% - 2px); /* Each panel takes half the space minus half the gap */
        max-width: calc(50% - 2px);
    }
}

/* Bet Panel Styling */
.bet-panel {
    /* sizing variables for compact mode */
    --quick-btn-height: 38px;
    --quick-grid-gap: 4px;
    --ac-input-ch: 12ch; /* width for input capable of 9999.00x */
    --action-btn-width: 150px; /* Fixed width for BET button and auto-cashout controls */
    --row-gap: 8px; /* matches .bet-buttons-row gap */
    /* width of the quick-bet area (left side of the row with two buttons) */
    --quick-area: calc(100% - var(--action-btn-width) - var(--row-gap));
    /* width of a single quick-bet button cell */
    --quick-cell-width: calc((var(--quick-area) - var(--quick-grid-gap)) / 2);

    background: linear-gradient(145deg, rgba(39, 52, 73, 0.85), rgba(30, 41, 59, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid #3a3a4a !important;
    box-sizing: border-box;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    display: flex;
    flex-direction: column;
}

/* WIN state: Vibrant fancy flash animation with color change only */
.bet-panel.win-state {
    background: linear-gradient(145deg, 
        rgba(34, 197, 94, 0.25), 
        rgba(16, 185, 129, 0.35),
        rgba(5, 150, 105, 0.25)) !important;
    animation: winFlashVibrant 2s ease-out forwards;
    border: 1px solid rgba(34, 197, 94, 0.6) !important;
}

.bet-panels-container .bet-panel.win-state .bet-amount-control .bet-prefix,
.bet-panel.win-state .bet-amount-control .bet-prefix,
.bet-panel.win-state .bet-prefix {
    color: #22c55e !important; /* green */
    -webkit-text-fill-color: #22c55e !important; /* ensure fill is green in WebKit */
    -webkit-text-stroke: 0.5px #ffffff !important; /* Thinner white stroke (WebKit) */
    /* Subtle glow fallback for non-WebKit browsers */
    text-shadow: 0 0 1.5px rgba(255, 255, 255, 0.8) !important;
}

/* Vibrant fancy flash animation - no dimension changes */
@keyframes winFlashVibrant {
    0% {
        background: linear-gradient(145deg, 
            rgba(34, 197, 94, 0.8), 
            rgba(16, 185, 129, 0.9),
            rgba(5, 150, 105, 0.7));
        border-color: rgba(34, 197, 94, 1);
    }
    15% {
        background: linear-gradient(145deg, 
            rgba(34, 197, 94, 0.9), 
            rgba(16, 185, 129, 1),
            rgba(5, 150, 105, 0.8));
        border-color: rgba(34, 197, 94, 1);
    }
    50% {
        background: linear-gradient(145deg, 
            rgba(34, 197, 94, 0.5), 
            rgba(16, 185, 129, 0.6),
            rgba(5, 150, 105, 0.4));
        border-color: rgba(34, 197, 94, 0.8);
    }
    100% {
        background: linear-gradient(145deg, 
            rgba(34, 197, 94, 0.25), 
            rgba(16, 185, 129, 0.35),
            rgba(5, 150, 105, 0.25));
        border-color: rgba(34, 197, 94, 0.6);
    }
}

/* Remove the disabled styling for +/- buttons in WIN state - they should be re-enabled after cashout */

.bet-panel-content {
    padding: 20px 12px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: space-between;
}

/* Bet amount control with - and + buttons */
.bet-amount-control {
    min-width: 200px; /* Set a fixed minimum width to prevent resizing */
    display: grid;
    grid-template-columns: minmax(7.8rem, 10rem) 36px 1fr 36px; /* BET/WIN (translation-safe) | - | value | + */
    align-items: center;
    justify-items: stretch; /* allow per-item alignment */
    column-gap: 10px; /* match horizontal padding so + has equal spacing to input and right edge */
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: visible;
    margin: 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: 44px; /* slightly taller to match design */
    padding: 0 10px; /* keep equal to column-gap for symmetry */
}

@media (max-width: 1220px) {
  .bet-amount-control {
    grid-template-columns: minmax(6.2rem, 8rem) 32px minmax(9ch, 1fr) 32px;
    column-gap: 6px;
    padding: 0 6px;
  }
  .bet-control-btn { width: 32px; height: 32px; }
  .bet-amount-control .bet-prefix { font-size: 0.85rem; }
  .bet-amount { font-size: 0.85rem; }
}

/* Label (BET/WIN) on the left with room for translations */
.bet-amount-control .bet-prefix {
    font-weight: 800;
    font-size: 0.9rem; /* Slightly larger for better visibility */
    color: #e5e7eb;
    display: flex; /* center the word BET within its cell */
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: 0.02em;
    min-width: 7.8rem; /* Enough for Greek: ΣΤΟΙΧΗΜΑ and Russian: ВЫИГРЫШ */
    white-space: nowrap;
}

@media (max-width: 480px) {
    .bet-amount-control .bet-prefix {
        min-width: 6.8rem; /* slightly tighter but still safe on narrow screens */
        font-size: 0.9rem; /* Slightly larger for better visibility */
    }
}

/* Currency suffix spacing */
.bet-amount-control .bet-suffix {
    color: #cbd5e1;
    font-weight: 800;
    font-size: 0.85rem;
    min-width: 42px;
    text-align: center;
    letter-spacing: 0.02em;
    pointer-events: none; /* purely decorative */
}

.bet-control-btn {
    width: 36px;
    height: 36px;
    background-color: rgba(12, 18, 32, 0.55); /* neutral grey, matches inputs */
    display: inline-flex; /* center glyphs */
    align-items: center;
    justify-content: center;
    line-height: 1; /* avoid vertical offset */
    border: 1px solid rgba(255, 255, 255, 0.12); /* white frame like hamburger */
    border-radius: 8px; /* match hamburger */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Draw the minus as a centered bar to avoid font baseline offset */
.bet-control-btn.decrease { position: relative; font-size: 0 !important; line-height: 0 !important; color: transparent !important; overflow: hidden; text-indent: -9999px !important; white-space: nowrap !important; }
.bet-control-btn.decrease::after {
    content: none !important; /* use background gradient instead to avoid glyph oddities */
}
.bet-control-btn.decrease:disabled::after { background: #9aa0a6; opacity: 0.85; }

/* Center +/- within their grid cells for symmetric spacing */
.bet-control-btn.decrease { justify-self: start; }
.bet-control-btn.increase { justify-self: end; }

/* Draw centered minus via background gradient (works across platforms) */
.bet-control-btn.decrease {
    background-image:
        linear-gradient(
            to bottom,
            transparent calc(50% - 1.5px),
            #ffffff       calc(50% - 1.5px),
            #ffffff       calc(50% + 1.5px),
            transparent   calc(50% + 1.5px)
        ) !important;
    background-repeat: no-repeat !important;
    background-size: 14px 100% !important; /* width x full height */
    background-position: center center !important;
}

/* Draw centered plus using two bars (match minus thickness/length) */
.bet-control-btn.increase {
    position: relative;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    background-image:
        linear-gradient(#ffffff, #ffffff), /* horizontal bar */
        linear-gradient(#ffffff, #ffffff) !important; /* vertical bar */
    background-repeat: no-repeat !important;
    background-position: center center, center center !important;
    background-size: 14px 3px, 3px 14px !important; /* match minus: 14x3 */
    background-color: rgba(12, 18, 32, 0.55) !important; /* base fill to match minus */
}

/* Greyed-out appearance when disabled */
.bet-control-btn:disabled,
.quick-bet-btn:disabled {
    background-color: rgba(60, 70, 85, 0.6) !important;
    color: #9aa0a6 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.65;
}

/* Prevent hover/active effects when disabled */
.bet-control-btn:disabled:hover,
.bet-control-btn:disabled:active,
.quick-bet-btn:disabled:hover,
.quick-bet-btn:disabled:active {
    background: rgba(60, 70, 85, 0.6) !important;
    box-shadow: none !important;
    transform: none !important;
}

.bet-control-btn:hover {
    background-color: rgba(12, 18, 32, 0.65); /* slightly lighter grey on hover */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.12); /* keep frame visible */
}

.bet-control-btn:active {
    background-color: rgba(12, 18, 32, 0.75); /* darker grey on press */
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.bet-amount {
    flex: 1;
    background: rgba(12, 18, 32, 0.55);
    color: #ffffff;
    border: 0; /* frameless */
    border-radius: 10px;
    text-align: center;
    font-weight: 800; /* Match auto-cashout-input */
    font-variant-numeric: tabular-nums; /* stable digit widths to avoid shifts */
    caret-color: #fff;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
    margin: 0;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
    justify-self: stretch; /* fill its grid cell so gaps equal column-gap */
    width: 100%;
    min-width: 0; /* allow grid child to shrink within cell */
    box-sizing: border-box;
}

.bet-amount:focus {
    outline: none;
    border-color: transparent;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Bet buttons row - horizontal layout */
/* Mobile layout (default) */
.bet-panels-container {
    display: flex;
    flex-direction: column; /* Stacked in mobile view */
    gap: 4px; /* 4px gap between panels for mobile */
    width: 100%;
}

.bet-buttons-row {
    display: grid;
    grid-template-columns: 1fr 1fr var(--action-btn-width); /* Two equal columns for quick bets, fixed width for BET button */
    grid-template-rows: var(--quick-btn-height) var(--quick-btn-height) var(--quick-btn-height);
    gap: var(--quick-grid-gap);
    align-items: stretch;
    margin: 0;
    /* Ensure full 3-row height is realized so the BET button can extend to the bottom */
    min-height: calc(var(--quick-btn-height) * 3 + var(--quick-grid-gap) * 2);
}

/* Make the vertical spacing between the quick bet row and auto options equal to quick button gaps */
.bet-buttons-row + .auto-options {
    /* Match the quick bet button grid gap exactly */
    margin-top: var(--quick-grid-gap);
}

/* Quick bet buttons grid */
.quick-bet-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--quick-grid-gap);
    flex: 1;
}

.quick-bet-btn {
    background: linear-gradient(135deg, #3b82f6, #1e40af); /* Blue gradient */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.85rem; /* Standardized */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    height: var(--quick-btn-height); /* compact blue button */
    padding: 0;
}

.quick-bet-btn:hover {
    background: linear-gradient(135deg, #60a5fa, #2563eb); /* Lighter blue gradient */
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.quick-bet-btn:active {
    background: linear-gradient(135deg, #1e3a8a, #2563eb); /* Darker blue gradient */
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Action buttons (BET/CASH OUT) */
.action-btn {
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    min-width: 150px;
    width: 150px;
    min-height: calc((var(--quick-btn-height) * 2) + var(--quick-grid-gap)); /* Allow button to grow for wrapped text */
    height: auto; /* Allow height to adjust for content */
}

/* Default two-line layout for action button content */
.action-btn .btn-label {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: normal !important; /* Allow text to wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* === Unified input styles for Bet and Auto Cash Out (enforce exact parity) === */
.bet-amount,
.auto-cashout-input {
    background: rgba(12, 18, 32, 0.55);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    height: 36px;
    line-height: 36px;
    padding: 0 8px;
    font-size: 0.9rem; /* Match size for both inputs */
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    caret-color: #fff;
    text-align: center;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.45);
    box-sizing: border-box;
}

.bet-amount:hover,
.auto-cashout-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(12, 18, 32, 0.65);
}

.bet-amount:focus,
.auto-cashout-input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(59, 130, 246, 0.15);
    background: rgba(12, 18, 32, 0.75);
}

.action-btn .bet-amount-label {
    font-size: 0.85rem; /* Reduced to fit wrapped text */
    font-weight: 800;
    line-height: 1.2; /* Slightly more spacing for wrapped lines */
    color: rgba(255, 255, 255, 0.9);
    font-variant-numeric: tabular-nums;
    text-align: center;
    display: block;
    margin-top: 4px;
    white-space: normal; /* Allow wrapping */
    word-wrap: break-word;
    overflow: visible; /* Show wrapped text */
    text-overflow: clip;
    max-width: 100%;
    padding: 0 4px; /* Small padding to prevent edge cutoff */
}

/* Grid placement within bet-buttons-row */
.bet-buttons-row > .quick-bet-buttons {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}

/* BET button defaults to occupy all three rows (full height) */
.bet-buttons-row > .action-btn {
    grid-column: 3;
    grid-row: 1 / span 3;
    width: 150px;
    justify-self: end; /* Pin to right side */
    align-self: stretch; /* fill the grid area vertically */
    height: 100%;
}

/* When Auto Cashout is active, lift BET up to span only the top two rows */
.bet-buttons-row.auto-cashout-active > .action-btn {
grid-row: 1 / span 2;
}

/* Bottom row: Auto Play (col 1), Auto Cashout (col 2), Controls (col 3) */
/* Target explicit IDs to avoid conflicts with other button elements in the row */
.bet-buttons-row > #auto-play-toggle-1,
.bet-buttons-row > #auto-play-toggle-2 {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    height: var(--quick-btn-height);
}

.bet-buttons-row > #auto-cashout-toggle-1,
.bet-buttons-row > #auto-cashout-toggle-2 {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    min-width: 0;
    height: var(--quick-btn-height);
}

.bet-buttons-row > .auto-cashout-controls {
    grid-column: 3;
    grid-row: 3;
    justify-self: stretch; /* Fill the full grid cell width to match BET button */
    align-self: stretch;
    width: 100% !important; /* Take full width of grid cell */
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Layout for the value + +/- inside auto cashout controls to avoid overflow */
.auto-cashout-controls .cashout-value-control {
    display: grid;
    grid-template-columns: 32px 1fr 32px; /* - | input | + */
    column-gap: 6px;
    align-items: center;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.auto-cashout-controls .bet-control-btn {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background-color: rgba(12, 18, 32, 0.55) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
}
/* Desktop: ensure minus uses pseudo-element only (hide text glyph) and draw gradient bar */
.auto-cashout-controls .bet-control-btn.decrease {
    font-size: 0 !important;
    /* Reapply centered minus bar as a background layer (overrides prior background shorthand) */
    background-image: linear-gradient(
        to bottom,
        transparent calc(50% - 1.5px),
        #ffffff       calc(50% - 1.5px),
        #ffffff       calc(50% + 1.5px),
        transparent   calc(50% + 1.5px)
    ) !important;
    background-repeat: no-repeat !important;
    background-size: 14px 100% !important;
    background-position: center center !important;
    background-color: rgba(12, 18, 32, 0.55) !important; /* base fill */
}
/* Desktop: ensure plus is drawn with bars and not text in auto cashout */
.auto-cashout-controls .bet-control-btn.increase {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff) !important;
    background-repeat: no-repeat !important;
    background-position: center center, center center !important;
    background-size: 14px 3px, 3px 14px !important; /* match minus: 14x3 */
    background-color: rgba(12, 18, 32, 0.55) !important;
}

.auto-cashout-controls .auto-cashout-input {
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 10px; /* match .bet-amount */
    border: 0; /* frameless, neutral */
    background: rgba(12, 18, 32, 0.55); /* neutral grey */
    color: #ffffff; /* neutral text */
    font-size: 0.9rem; /* Slightly smaller to fit 10000x */
    font-weight: 800; /* match .bet-amount */
    font-variant-numeric: tabular-nums; /* match .bet-amount */
    caret-color: #fff; /* match .bet-amount */
    padding: 0 8px; /* match .bet-amount */
    width: 100%;
    min-width: 60px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); /* match .bet-amount */
    transition: all 0.15s ease;
}

/* Standalone BET button (if not in horizontal layout) */
.bet-panel-content > .action-btn {
    width: 100%;
    margin-bottom: 12px;
}

.bet-mode {
    background: linear-gradient(135deg, #4CAF50, #388e3c); /* Green gradient for bet button */
    color: white;
    border-color: rgba(76, 175, 80, 0.3);
}

.bet-mode:hover {
    background: linear-gradient(135deg, #66bb6a, #43a047); /* Lighter green on hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(76, 175, 80, 0.5);
}

/* ==============================
   Leaderboard Unified Row Styles
   ============================== */
.game-data-table .leaderboard-row td {
    vertical-align: middle;
    padding: 8px 10px;
    background: rgba(12, 18, 32, 0.55) !important; /* Grey data background */
}
.lb-user-cell .lb-user-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lb-user-cell .lb-username {
    font-weight: 700;
    color: #e5e7eb;
}
.lb-user-cell .lb-date {
    font-size: 11px;
    color: #9ca3af;
}
.lb-bet-cell { color: #e2e8f0; font-weight: 700; }
.lb-mult-cell { color: #22c55e !important; font-weight: 800; }
.lb-mult-wrap { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: baseline; }
.lb-mult-wrap .lb-label { grid-column: 1/2; color: #9ca3af; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0.2px; }
.lb-mult-wrap .lb-value { grid-column: 2/3; font-weight: 900; color: #22c55e !important; }
.lb-win-cell {
    display: flex;
    align-items: center;
    justify-content: space-between; /* amount left, shield right */
    gap: 8px;
}
.lb-win-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.lb-win-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lb-win-top .amount { font-weight: 400; }
.lb-win-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lb-win-bottom .lb-sub-label { color: #9ca3af; font-size: 11px; font-weight: 600; }
.lb-win-bottom .lb-roundmax { color: #e879f9; font-weight: 800; }
.lb-win-cell .leaderboard-shield {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    cursor: pointer;
    /* Inherit touch behavior to allow scrolling */
    touch-action: inherit;
}
.lb-win-cell .leaderboard-shield .shield-svg {
    display: block;
}
.leaderboard-row.self-entry td {
    background: rgba(12, 18, 32, 0.55) !important; /* keep grey even when highlighted */
}
.leaderboard-row.self-entry {
    box-shadow: inset 3px 0 0 0 #22c55e !important; /* green left accent */
}

.bet-mode:active {
    background: linear-gradient(135deg, #2e7d32, #388e3c); /* Darker green when pressed */
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cashout-mode {
    background: linear-gradient(135deg, #ff9800, #f57c00); /* Orange gradient for cashout button */
    color: white;
    border-color: rgba(255, 152, 0, 0.3);
}

.cashout-mode:hover {
    background: linear-gradient(135deg, #ffb74d, #ff9800); /* Lighter orange on hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 152, 0, 0.5);
}

.cashout-mode:active {
    background: linear-gradient(135deg, #e65100, #f57c00); /* Darker orange when pressed */
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cancel-mode {
    background: linear-gradient(135deg, #f44336, #d32f2f); /* Red gradient for cancel button */
    color: white;
    border-color: rgba(244, 67, 54, 0.3);
}

.cancel-mode:hover {
    background: linear-gradient(135deg, #ef5350, #f44336); /* Lighter red on hover */
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(244, 67, 54, 0.5);
}

.cancel-mode:active {
    background: linear-gradient(135deg, #c62828, #d32f2f); /* Darker red when pressed */
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Auto options container */
.auto-options {
    display: flex;
    flex-direction: row;
    gap: 4px; /* Tighten spacing */
    margin: 0;
    padding: 0; /* let container align with panel padding */
    align-items: center; /* vertically center inline controls */
    flex-wrap: nowrap; /* keep inline on one line under bet buttons */
}

/* Make AUTO PLAY narrower to give more space to AUTO CASH OUT */
.auto-option:first-child {
    flex: 0 0 100px;
    max-width: 100px;
}

.auto-option:last-child {
    flex: 1;
    min-width: 0;
}

.auto-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.05);
    flex: 1;
    height: 48px;
    min-width: 0;
}

/* When the Auto Play button is a direct child (no wrapper), size it like the old first auto-option */
.auto-options > .toggle-switch {
    height: var(--quick-btn-height);
    /* Exactly match one quick bet button size */
    flex: 0 0 var(--quick-cell-width);
    width: var(--quick-cell-width);
    min-width: 0;
    max-width: none;
}

.auto-options > .toggle-switch.active {
    flex-basis: calc(var(--quick-cell-width) + 36px);
    width: calc(var(--quick-cell-width) + 36px);
}

.option-label {
    color: #aaa;
    font-size: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: 6px;
}

/* Checkboxes for auto options */
.auto-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    transform: scale(1.2);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent;
    border: 2px solid #666;
    border-radius: 3px;
    position: relative;
}

.auto-checkbox:checked {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.auto-checkbox:checked::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

/* Auto cashout controls within bet panels */
.auto-cashout-controls {
    display: flex;
    align-items: center;
    width: 100%; /* Ensure it takes full width of its container */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Wrap for auto cashout +/- and input */
.cashout-value-control {
    display: grid;
    grid-template-columns: 32px 1fr 32px; /* - | input | + */
    column-gap: 6px;
    align-items: center;
    width: 100%;
}

.auto-cashout-input {
    background: rgba(12, 18, 32, 0.55); /* match .bet-amount */
    color: #ffffff;
    border: 0; /* frameless */
    border-radius: 10px; /* match .bet-amount */
    padding: 0 8px; /* match .bet-amount */
    height: 36px; /* match .bet-amount */
    line-height: 36px; /* match .bet-amount */
    font-size: 0.9rem; /* match .bet-amount */
    font-weight: 800; /* match .bet-amount */
    font-variant-numeric: tabular-nums; /* match .bet-amount */
    caret-color: #fff; /* match .bet-amount */
    text-align: center;
    transition: all 0.15s ease;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); /* match .bet-amount */
    width: 100%;
    outline: none;
    box-sizing: border-box;
}

.auto-cashout-input:focus {
    outline: none;
    border-color: transparent;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.12); /* neutral glow */
    background: rgba(12, 18, 32, 0.75); /* neutral darker */
}

.auto-cashout-input:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(12, 18, 32, 0.65);
}

/* Disabled appearance for BET input: visibly greyed out */
.bet-amount:disabled {
    background: rgba(60, 70, 85, 0.6);
    color: #9aa0a6;
    -webkit-text-fill-color: #9aa0a6;
    opacity: 0.75;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.06);
}

/* Disabled appearance for Auto Cashout input: visibly greyed out */
.auto-cashout-input:disabled {
    background: rgba(60, 70, 85, 0.6);
    /* Keep text white; actual color is enforced later with !important override */
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    opacity: 1; /* do not dim the text */
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.06);
}

/* Readonly appearance should also look enabled (white) but be non-editable */
.auto-cashout-input[readonly] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff; /* Chrome/Safari */
    opacity: 1; /* avoid dimming */
    cursor: default; /* show non-editable cursor */
    user-select: none; /* prevent text selection to mimic disabled look */
    caret-color: transparent; /* hide caret */
}

/* Readonly state for bet input should also look enabled (white) but be non-editable */
.bet-amount[readonly] {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff; /* Chrome/Safari */
    opacity: 1; /* avoid dimming */
    cursor: default; /* show non-editable cursor */
    user-select: none; /* prevent text selection to mimic disabled look */
    caret-color: transparent; /* hide caret */
}

/* Toggle switch button styles */
.toggle-switch {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); /* match +/- buttons */
    border-radius: 8px; /* match +/- buttons */
    min-height: var(--quick-btn-height); /* match quick bet height */
    height: auto; /* Allow height to expand for wrapped text */
    padding: 4px 6px; /* Add padding for wrapped text */
    font-size: 0.75rem; /* Standard desktop size */
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #a78bfa, #8b5cf6); /* light purple inactive */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); /* match +/- */
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    white-space: nowrap; /* Prevent wrapping by default */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis for overflow */
    line-height: 1.2; /* Slightly more space for wrapped lines */
    word-wrap: break-word; /* Break long words if needed */
    text-align: center; /* center wrapped text */
    box-sizing: border-box; /* ensure padding stays within fixed 40px width */
    margin: 0; /* match increment buttons */
    display: inline-flex; /* center content like square buttons */
    align-items: center;
    justify-content: center;
}

.toggle-switch:hover {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed); /* darker purple on hover */
}

/* Mobile override for toggle-switch font size - must come after base rule */
@media (max-width: 600px) {
    .toggle-switch,
    button.toggle-switch,
    .bet-panel .toggle-switch,
    .bet-panel button.toggle-switch {
        font-size: 0.5rem !important;
        font-weight: 500 !important;
        padding: 2px 2px !important;
    }
}

/* Desktop landscape: allow wrapping again (>=1100px) */
@media (min-width: 1100px) {
    .bet-panel #auto-play-toggle-1,
    .bet-panel #auto-play-toggle-2,
    .bet-panel #auto-cashout-toggle-1,
    .bet-panel #auto-cashout-toggle-2,
    .bet-panel .toggle-switch,
    button.toggle-switch,
    .toggle-switch {
        white-space: normal; /* allow wrapping */
        overflow: visible;  /* show wrapped text */
        text-overflow: clip; /* no ellipsis on desktop */
        height: auto;       /* expand for wrapped text */
        line-height: 1.2;   /* spacing for two lines */
        padding: 4px 6px;   /* comfortable padding */
        font-size: 0.75rem; /* desktop size */
    }
}

.toggle-switch.active {
    background: #591b25; /* Exact red fill */
    border-color: #ff0000; /* Exact red border */
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #ff0000;
}

.toggle-switch.active:hover {
    background: #591b25;
    border-color: #ff0000;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px #ff0000;
}

/* Ensure stop state (used by Stop Auto Play / Stop Auto Cash Out) is exact red spec */
.toggle-switch.stop,
.toggle-switch.active-stop,
button.toggle-switch.stop,
button.toggle-switch.active-stop {
    background: #591b25 !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #ff0000 !important;
}

.toggle-switch.stop:hover,
.toggle-switch.active-stop:hover,
button.toggle-switch.stop:hover,
button.toggle-switch.active-stop:hover {
    background: #591b25 !important;
    border-color: #ff0000 !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px #ff0000 !important;
}

/* ==============================
   Game Data Panel Width Overrides
   Ensure the aside and its sections span full width and do not get centered
   ============================== */

.game-data-area {
    align-items: stretch !important;   /* override generic center alignment */
    justify-content: flex-start !important;
    width: 100%;
}

.game-data-header,
.game-data-content {
    width: 100%;
}

.game-data-content .game-data-table-container {
    width: 100%;
}

/* Make the menu buttons fill the row evenly */
.menu-panel {
    display: flex;
    width: 100%;
    gap: 8px;
    box-sizing: border-box;
}

.menu-panel .menu-btn {
    flex: 1 1 0;
}

/* ==============================
   Tabs UI (Game Data / Leaderboard)
   ============================== */

/* Leaderboard value colors */
/* Force multiplier value to green explicitly (use .is-mult marker) */
#leaderboard-content .lb-card-grid .lb-field .lb-value.is-mult {
    color: #22c55e !important; /* green */
}

/* Crashpoint color coding (blue/purple/red by tier) */
#leaderboard-content .lb-card-grid .lb-field .lb-value.is-crash.multiplier-low,
#leaderboard-content .lb-roundmax.is-crash.multiplier-low,
#leaderboard-content .lb-crashpoint.is-crash.multiplier-low {
    color: #60a5fa !important; /* blue */
}
#leaderboard-content .lb-card-grid .lb-field .lb-value.is-crash.multiplier-medium,
#leaderboard-content .lb-roundmax.is-crash.multiplier-medium,
#leaderboard-content .lb-crashpoint.is-crash.multiplier-medium {
    color: #e879f9 !important; /* purple */
}
#leaderboard-content .lb-card-grid .lb-field .lb-value.is-crash.multiplier-high,
#leaderboard-content .lb-roundmax.is-crash.multiplier-high,
#leaderboard-content .lb-crashpoint.is-crash.multiplier-high {
    color: #ef4444 !important; /* red */
}

.game-data-tabs-main,
.game-data-tabs-sub {
    display: flex;
    gap: 6px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px 8px; /* symmetric inline padding (slightly larger to balance edges) */
    margin-bottom: 8px;
    width: 100%; /* stretch full width like header */
    box-sizing: border-box; /* include padding in width */
    justify-content: center; /* center buttons when not stretching */
}

/* Leaderboard timeframe filters: hidden by default; JS toggles the 'active' class */
.leaderboard-filters {
    display: none;
    gap: 6px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 4px 8px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}
.leaderboard-filters.active { display: flex; }

.tab-main-btn,
.tab-sub-btn {
    flex: 1 1 0;
    padding: 7px 8px; /* balanced inner padding */
    font-size: 11px;  /* compact for fit */
    font-weight: 700;
    color: #94a3b8;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Sub-tab row: slightly smaller text and tighter line-height for 2-line labels */
.game-data-tabs-sub .tab-sub-btn {
    font-size: 10.5px;
    line-height: 1.15;
}

/* Leaderboard filters: compact text */
.leaderboard-filters .tab-sub-btn {
    font-size: 10.5px;
    line-height: 1.15;
}

.tab-main-btn:hover,
.tab-sub-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}


/* Active color by tab context (no layout changes) */
/* Main tabs: GAME DATA (purple), LEADERBOARD (blue) */
.game-data-tabs-main .tab-main-btn.active[data-tab="game-data"] {
    color: #ffffff;
    background: #372a5d;
    box-shadow: inset 0 0 0 1px #8b52da;
}
.game-data-tabs-main .tab-main-btn.active[data-tab="leaderboard"] {
    color: #ffffff;
    background: #1b2f5b;
    box-shadow: inset 0 0 0 1px #3067e2;
}

/* Sub-tabs within each group */
.game-data-tabs-sub .sub-tab-group[data-parent-tab="game-data"] .tab-sub-btn.active {
    color: #ffffff;
    background: #372a5d;
    box-shadow: inset 0 0 0 1px #8b52da;
}
.game-data-tabs-sub .sub-tab-group[data-parent-tab="leaderboard"] .tab-sub-btn.active {
    color: #ffffff;
    background: #1b2f5b;
    box-shadow: inset 0 0 0 1px #3067e2;
}

/* Leaderboard timeframe filters */
.leaderboard-filters .tab-sub-btn.active {
    color: #ffffff;
    background: #1b2f5b;
    box-shadow: inset 0 0 0 1px #3067e2;
}

.sub-tab-group { display: none; }
.sub-tab-group.active { display: flex; flex: 1 1 0; } /* make visible group fill row */

/* Keep consistent spacing between main and sub tabs */
.game-data-tabs-main + .game-data-tabs-sub { margin-top: 8px; }

/* When Leaderboard is active, place the filter row under the sub-tab row */
.game-data-tabs-sub + .leaderboard-filters {
    margin-top: 8px;
    width: 100%;
}

/* Content panes */
.tab-content { display: none; }
/* Make active pane a flex column so its inner table container can flex and scroll */
.tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* critical: allow inner scroll container to shrink and scroll */
}

#leaderboard-content {
    min-height: 0;
}

/* ==============================
   Context Subheader (Row 4)
   ============================== */
.game-data-subheader {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
}

.subheader-group { display: none; }
.subheader-group.active { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

/* Leaderboard: make the date range span full width */
.subheader-group.active[data-context="leaderboard:day-month"],
.subheader-group.active[data-context="leaderboard:year"] {
    display: block; /* override grid to single block */
}
.subheader-group.active[data-context="leaderboard:day-month"] .subheader-item,
.subheader-group.active[data-context="leaderboard:year"] .subheader-item {
    width: 100%;
    box-sizing: border-box;
}

/* Center the Leaderboard Date Range row */
.game-data-subheader .subheader-group[data-context="leaderboard:day-month"] .subheader-item,
.game-data-subheader .subheader-group[data-context="leaderboard:year"] .subheader-item {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.game-data-subheader .subheader-group[data-context="leaderboard:day-month"] .subheader-item .label,
.game-data-subheader .subheader-group[data-context="leaderboard:day-month"] .subheader-item .value,
.game-data-subheader .subheader-group[data-context="leaderboard:year"] .subheader-item .label,
.game-data-subheader .subheader-group[data-context="leaderboard:year"] .subheader-item .value {
    width: 100%;
    text-align: center !important;
}

.subheader-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

/* Vertically center label/value pairs inside Game Data subheader tiles */
.game-data-subheader .subheader-item {
    display: flex !important; /* override inline */
    flex-direction: column !important; /* ensure two-line stack */
    justify-content: center !important; /* vertical centering */
    align-items: flex-start !important; /* keep left-aligned text */
    gap: 2px !important; /* tight spacing between lines */
    text-align: left !important;
    height: 52px !important; /* consistent tile height for true vertical centering */
}
.game-data-subheader .subheader-item .label,
.game-data-subheader .subheader-item .value {
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.subheader-item .label {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.subheader-item .value {
    color: #f9fafb;
    font-size: 13px;
    font-weight: 700;
}

.round-data-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ==============================
   Table row highlight for winners
   ============================== */
/* Default rows remain neutral */
#live-game-content .game-data-table tbody tr.status-active,
#live-game-content .game-data-table tbody tr.status-lost,
#previous-round-content .game-data-table tbody tr.status-active,
#previous-round-content .game-data-table tbody tr.status-lost {
    background: transparent;
}

/* Highlight only winning rows */
#live-game-content .game-data-table tbody tr.status-cashed_out,
#previous-round-content .game-data-table tbody tr.status-cashed_out {
    background: rgba(34, 197, 94, 0.15); /* soft green */
}

/* Keep highlight on hover for winners, slightly stronger */
#live-game-content .game-data-table tbody tr.status-cashed_out:hover,
#previous-round-content .game-data-table tbody tr.status-cashed_out:hover {
    background: rgba(34, 197, 94, 0.22);
}

/* Round the green pill edges by rounding first/last cells */
#live-game-content .game-data-table tbody tr.status-cashed_out td:first-child,
#previous-round-content .game-data-table tbody tr.status-cashed_out td:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
#live-game-content .game-data-table tbody tr.status-cashed_out td:last-child,
#previous-round-content .game-data-table tbody tr.status-cashed_out td:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Leaderboard: do NOT highlight all winners; keep neutral by default */
#leaderboard-content .game-data-table tbody tr.status-cashed_out {
    background: transparent;
}
#leaderboard-content .game-data-table tbody tr.status-cashed_out:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* ==============================
   Force Auto Cashout input text color to white in all states
   This ensures visibility even when the input is disabled/readonly.
   ============================== */
.auto-cashout-input,
.auto-cashout-input:disabled,
.auto-cashout-input[readonly] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important; /* Chrome/Safari */
}

/* ==============================
   Leaderboard Card Layout (scoped)
   ============================== */
#leaderboard-content:not(.crashpoints-mode) .game-data-table thead { display: none; }
#leaderboard-content.crashpoints-mode .game-data-table thead { display: table-header-group; }
#leaderboard-content .game-data-table tbody td { border-bottom: none; padding: 8px 8px; }
/* In Crashpoints mode, right-align the last header to match the rightmost value cell */
#leaderboard-content.crashpoints-mode .game-data-table thead th:last-child {
    text-align: right;
    padding-right: 28px; /* leave space for the shield icon on the right */
}

#leaderboard-content .lb-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
}
#leaderboard-content .leaderboard-row.self-entry .lb-card {
    /* Entire panel green */
    background: linear-gradient(145deg, #14532d, #166534) !important; /* green fill */
    border-left: 0 !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important; /* green border */
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 10px rgba(34, 197, 94, 0.18) !important; /* subtle glow */
}
#leaderboard-content .leaderboard-row.self-entry {
    /* No side highlight */
    box-shadow: none !important;
}
#leaderboard-content .leaderboard-row.self-entry td {
    /* Keep grey background even when highlighted */
    background: rgba(12, 18, 32, 0.55) !important;
}
#leaderboard-content .leaderboard-row.self-entry .lb-username {
    /* Restore default username color (white) */
    color: #e5e7eb !important;
}
#leaderboard-content .lb-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#leaderboard-content .lb-card-user { display: flex; flex-direction: column; gap: 2px; }
#leaderboard-content .lb-username { font-weight: 800; color: #e5e7eb; }
#leaderboard-content .lb-date { font-size: 11px; color: #9ca3af; }

#leaderboard-content .leaderboard-shield {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 9999px;
    background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.08);
}

/* My Bets (History) action icons (PF + Share) */
.pf-icon-cell {
    white-space: nowrap;
}

.pf-icon-cell .leaderboard-shield,
.pf-icon-cell .chat-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0;
    cursor: pointer;
}

.pf-icon-cell .leaderboard-shield {
    margin-right: 8px;
}

.pf-icon-cell .leaderboard-shield:hover,
.pf-icon-cell .chat-share-btn:hover {
    background: rgba(0,0,0,0.5);
    color: rgba(255,255,255,0.85);
}

#leaderboard-content .lb-card-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
#leaderboard-content .lb-crashpoint {
    color: #e879f9;
    font-weight: 900;
}

#leaderboard-content .lb-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
@media (max-width: 560px) { #leaderboard-content .lb-card-grid { grid-template-columns: 1fr; } }

#leaderboard-content .lb-field { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#leaderboard-content .lb-field .lb-label { color: #9ca3af; font-size: 12px; font-weight: 600; }
#leaderboard-content .lb-field .lb-value { color: #e2e8f0; font-weight: 800; font-variant-numeric: tabular-nums; }
#leaderboard-content .lb-field .lb-roundmax { color: #e879f9; }

/* ==============================
   My Bets: reuse Leaderboard Card Layout
   ============================== */
#my-history-content .game-data-table thead { display: none; }
#my-history-content .game-data-table tbody td { border-bottom: none; padding: 8px 8px; }

#my-history-content .lb-card {
    background: rgba(17, 24, 39, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 12px;
}
#my-history-content .leaderboard-row.self-entry .lb-card {
    background: linear-gradient(145deg, #14532d, #166534) !important;
    border-left: 0 !important;
    border: 1px solid rgba(34, 197, 94, 0.45) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 10px rgba(34, 197, 94, 0.18) !important;
}
#my-history-content .leaderboard-row.self-entry { box-shadow: none !important; }
#my-history-content .leaderboard-row.self-entry td { background: rgba(12, 18, 32, 0.55) !important; }
#my-history-content .leaderboard-row.self-entry .lb-username { color: #e5e7eb !important; }

#my-history-content .lb-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#my-history-content .lb-card-user { display: flex; flex-direction: column; gap: 2px; }
#my-history-content .lb-username { font-weight: 800; color: #e5e7eb; }
#my-history-content .lb-date { font-size: 11px; color: #9ca3af; }

#my-history-content .lb-card-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

#my-history-content .leaderboard-shield {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 9999px;
    background: rgba(0,0,0,0.35); color: rgba(255,255,255,0.65);
    border: 1px solid rgba(255,255,255,0.08);
}

#my-history-content .lb-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
@media (max-width: 560px) { #my-history-content .lb-card-grid { grid-template-columns: 1fr; } }

#my-history-content .lb-field { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#my-history-content .lb-field .lb-label { color: #9ca3af; font-size: 12px; font-weight: 600; }
#my-history-content .lb-field .lb-value { color: #e2e8f0; font-weight: 800; font-variant-numeric: tabular-nums; }
#my-history-content .lb-field .lb-roundmax { color: #e879f9; }

/* My Bets: card rows are a single colspan cell, so disable column sizing */
#my-history-content .game-data-table { table-layout: auto !important; }
#my-history-content .game-data-table th,
#my-history-content .game-data-table td {
    width: auto !important;
    min-width: 0 !important;
}

/* Bet Panel: core visual styles only (no layout changes) */
.bet-panel .bet-prefix { color: #ffffff; font-weight: 700; }
.bet-panel .bet-control-btn { background-color: rgba(12, 18, 32, 0.55); color: #ffffff; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.bet-panel .bet-amount { background: rgba(12, 18, 32, 0.55); color: #ffffff; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); border: 0; }

/* Button variants by purpose */
.bet-panel .quick-bet-btn { background: #1b2f5b; color: #ffffff; border-radius: 10px; font-weight: 700; box-shadow: inset 0 0 0 1px #3067e2; }
.bet-panel .toggle-switch { background: #372a5d; color: #ffffff; border-radius: 10px; font-weight: 500; box-shadow: inset 0 0 0 1px #8b52da; }
.bet-panel .toggle-switch.stop, .bet-panel .toggle-switch.active-stop { background: #591b25; color: #ffffff; border: 1px solid #ff0000; box-shadow: inset 0 0 0 1px #ff0000; }
/* Keep purple on hover when inactive */
.bet-panel .toggle-switch:hover { background: #372a5d; box-shadow: inset 0 0 0 1px #8b52da; }
/* Active (stop) state stays red and does NOT change on hover */
.bet-panel .toggle-switch.active { background: #591b25; color: #ffffff; border: 1px solid #ff0000; box-shadow: inset 0 0 0 1px #ff0000; }
.bet-panel .toggle-switch.active:hover { background: #591b25; color: #ffffff; border: 1px solid #ff0000; box-shadow: inset 0 0 0 1px #ff0000; }

.bet-panel .action-btn { color: #ffffff; box-shadow: inset 0 0 0 1px transparent; }
.bet-panel .action-btn.bet-mode { background: #1f773e; box-shadow: inset 0 0 0 2px #2ff25a; }
.bet-panel .action-btn.cashout-mode { background: #886614; box-shadow: inset 0 0 0 2px #ffb400; }
.bet-panel .action-btn.cancel-mode, .bet-panel .action-btn.pending-mode { background: #591b25; color: #ffffff; border: 1px solid #ff0000; box-shadow: inset 0 0 0 2px #ff0000; }

.bet-panel .action-btn .btn-label { font-family: 'Noto Sans', sans-serif; font-weight: 800; text-transform: uppercase; }
.bet-panel .action-btn .bet-amount-label { font-family: 'Noto Sans', sans-serif; font-weight: 500; text-transform: none; }

/* Auto Cash Out numeric input adopts Blue style */
.bet-panel .auto-cashout-controls .auto-cashout-input { background: rgba(12, 18, 32, 0.55); color: #ffffff; border-radius: 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); border: 0; }

/* Mobile landscape toggle-switch sizing (<1100px landscape) */
@media (max-width: 1099px) and (orientation: landscape) {
    button.toggle-switch,
    .bet-panel button.toggle-switch,
    .auto-options button.toggle-switch,
    button.toggle-switch.active,
    .bet-panel button.toggle-switch.active,
    button.toggle-switch.stop,
    .bet-panel button.toggle-switch.stop,
    button#auto-cashout-toggle-1,
    button#auto-cashout-toggle-2,
    button[id*="auto-cashout-toggle"],
    button[id*="auto-play-toggle"],
    .toggle-switch,
    .bet-panel .toggle-switch,
    .auto-options .toggle-switch {
        font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.6rem !important;
        font-weight: 500 !important;
        padding: 2px 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.1 !important;
    }
}

/* Mobile portrait toggle-switch sizing (smaller for portrait) */
@media (max-width: 1099px) and (orientation: portrait) {
    button.toggle-switch,
    .bet-panel button.toggle-switch,
    .auto-options button.toggle-switch,
    button.toggle-switch.active,
    .bet-panel button.toggle-switch.active,
    button.toggle-switch.stop,
    .bet-panel button.toggle-switch.stop,
    button#auto-cashout-toggle-1,
    button#auto-cashout-toggle-2,
    button[id*="auto-cashout-toggle"],
    button[id*="auto-play-toggle"],
    .toggle-switch,
    .bet-panel .toggle-switch,
    .auto-options .toggle-switch {
        font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.55rem !important;
        font-weight: 500 !important;
        padding: 2px 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.1 !important;
    }
}

/* Fallback for all mobile widths if orientation doesn't match */
@media (max-width: 600px) {
    button.toggle-switch,
    .bet-panel button.toggle-switch,
    .auto-options button.toggle-switch,
    button.toggle-switch.active,
    .bet-panel button.toggle-switch.active,
    button.toggle-switch.stop,
    .bet-panel button.toggle-switch.stop,
    button#auto-cashout-toggle-1,
    button#auto-cashout-toggle-2,
    button[id*="auto-cashout-toggle"],
    button[id*="auto-play-toggle"],
    .toggle-switch,
    .bet-panel .toggle-switch,
    .auto-options .toggle-switch {
        font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
        font-size: 0.5rem !important;
        font-weight: 500 !important;
        padding: 2px 2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.1 !important;
    }
}

/* Portrait Mobile Layout: Compact header with balance panel under logo, fitting all greens */
@media (max-width: 1099px) and (orientation: portrait) {
    .game-layout {
        min-height: 100dvh; /* Allow content to extend beyond viewport */
        height: auto;
        overflow-y: auto; /* Enable scrolling */
        overflow-x: hidden;
        gap: 8px; /* Standardized gap between all major sections */
        display: flex;
        flex-direction: column;
    }

    .header-area {
        flex: 0 0 76px;
        min-height: 76px;
        max-height: 76px;
        padding: 3px 8px;
        gap: 6px; /* balanced spacing between logo and controls */
        box-sizing: border-box;
        display: grid !important;
        grid-template-rows: 32px 32px; /* logo row + controls row */
        align-content: center; /* center both rows vertically within 76px */
        justify-items: stretch; /* stretch controls row to full width */
        overflow: visible; /* allow content to be visible */
    }

    .header-logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        line-height: 0;
        flex-shrink: 0;
        flex: 0 0 auto; /* don't grow or shrink */
        height: 32px; /* fixed height for logo area */
        grid-row: 1;
    }

    .header-logo .logo-image {
        max-height: 18px; /* slightly smaller */
        height: 18px;
        width: auto;
        display: block;
    }

    .header-controls {
        width: 100%;
        flex: 0 0 32px; /* fixed row height */
        height: 32px;
        min-height: 32px;
        max-height: 32px;
        display: block !important;
        position: static !important; /* allow burger to anchor to header-area */
        margin-top: 0;
        overflow: visible; /* allow hamburger to be visible */
        grid-row: 2;
        justify-self: stretch; /* fill width of header-area */
        padding-left: 0 !important;
        gap: 0 !important;
    }

    .balance-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal width columns */
        grid-template-rows: 1fr; /* single row */
        gap: 4px !important; /* small spacing between tiles */
        background: transparent !important; /* frameless container */
        padding: 0 !important; /* full width */
        border: none !important; /* no outer frame */
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: blur(4px) !important;
        margin: 0 !important; /* use entire header-controls width */
        align-items: center !important;
        justify-items: center !important;
        position: relative !important; /* participate in flex centering */
        height: 32px !important; /* match header control row */
        min-height: 32px !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important; /* include padding in width calc */
        overflow: visible !important;
    }

    .balance-grid .balance-item { 
        display: grid !important;
        grid-row: 1 !important; /* force all items to row 1 */
        align-content: center !important; /* center the two rows vertically */
        justify-items: center !important;  /* center text horizontally */
        row-gap: 0 !important; /* eliminate extra spacing between label and value */
        grid-auto-rows: min-content !important; /* use tight row sizing */
        min-width: 0 !important; /* allow grid item to shrink */
        overflow: hidden !important; /* clip overflowing content */
        background: transparent !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        width: 100% !important;
    }
    .balance-item {
        display: grid !important;
        grid-auto-rows: min-content;
        place-content: center; /* center both rows within the 32px tile */
        row-gap: 0;
        padding: 0 6px; /* no vertical padding to center precisely */
        height: 32px; /* match hamburger */
        min-height: 32px; /* match hamburger */
        background: transparent; /* frameless */
        border: none; /* remove border */
        width: 100%; /* fill grid cell to avoid overlap */
        box-sizing: border-box;
    }
    /* Ensure values shrink and ellipsize instead of overlapping */
    .balance-value {
        width: auto !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 0.68rem !important; /* smaller for iPhone SE */
    }
    .balance-label { font-size: 0.5rem !important; /* smaller for iPhone SE */ }
    /* Ensure text lines themselves contribute no extra vertical spacing */
    .balance-grid .balance-item .balance-label,
    .balance-grid .balance-item .balance-value {
        display: block !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Nudge USD line down a touch for better optical centering */
    .balance-grid .balance-item .balance-label,
    .balance-grid .balance-item .balance-value { 
        transform: translateY(2px) !important;
    }

    .balance-label {
        font-size: 7px; /* slightly smaller to fit */
        color: rgba(255,255,255,0.75);
        text-transform: uppercase;
        letter-spacing: 0.25px; /* tighter tracking */
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .balance-value {
        font-size: 9px !important; /* smaller for iPhone SE */
        font-weight: 700 !important; /* lighter to reduce width */
        color: #ffffff;
        line-height: 1;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-variant-numeric: tabular-nums; /* compact uniform digits */
    }

    .balance-item::before { display: none !important; }

    .menu-container {
        position: absolute;
        right: 8px !important; /* align with recent results dropdown toggle */
        top: 6px;
        transform: none;
        z-index: 10;
    }

    .hamburger-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
    }

    .chat-toggle-btn {
        width: 32px !important;
        height: 32px !important;
    }

    .recent-results-area {
        flex: 0 0 50px;
        min-height: 50px;
        max-height: 50px;
        margin-bottom: 0 !important;
    }
    
    .recent-results-container {
        height: 50px !important;
    }

    /* Main game area takes remaining viewport space */
    .main-game-area {
        flex: 0 0 auto;
        height: calc(100dvh - 76px - 50px - 344px - 32px); /* viewport - header - results - betting(168+8+168) - gaps(8*4) */
        min-height: 200px; /* Minimum height for game canvas */
        display: flex;
        flex-direction: column;
        margin-top: 0 !important;
        padding-top: 0 !important;
        order: 1;
    }

    .bet-panels-container {
        display: flex;
        flex-direction: column;
        gap: 8px; /* Standardized gap between bet panels */
        height: auto;
    }

    .betting-area {
        flex: 0 0 auto;
        min-height: 344px; /* 168 + 8 + 168 */
        order: 2; /* Place after main-game-area */
    }
    
    /* Show game-data-area below betting panels */
    .game-data-area {
        display: flex !important; /* Override default hidden */
        flex-direction: column;
        order: 3; /* Place after betting-area */
        flex: 1 1 auto;
        min-height: 0;
        max-height: 80dvh;
        margin-top: 0; /* Gap handled by parent */
    }

    .bet-panel {
        /* Tighten internals to fit */
        --quick-btn-height: 32px;
        --quick-grid-gap: 4px; /* Increased from 3px */
        --row-gap: 4px; /* Increased from 3px */
        --action-btn-width: 150px; /* Fixed width for mobile - smaller than desktop 150px */
        --quick-cell-width: calc((100% - var(--action-btn-width) - var(--row-gap)) / 2 - var(--quick-grid-gap) / 2); /* Narrower quick buttons */
        height: 168px !important; /* Increased from 148px to allow more padding */
        min-height: 168px !important;
        max-height: 168px !important;
    }

    .bet-panel .bet-panel-content {
        padding: 16px 12px 16px 12px !important; /* Increased vertical padding */
        gap: 6px !important; /* Increased from 4px to match landscape */
    }

    .bet-panel .bet-amount-control { 
        height: 40px !important; 
        grid-template-columns: minmax(4.5rem, 6rem) 28px minmax(120px, 1fr) 28px !important;
    }
    
    /* Match auto-cashout-input font size for mobile */
    .bet-panel .bet-amount {
        font-size: 0.9rem !important; /* Match landscape and auto-cashout-input */
        min-width: 120px !important; /* Make input wider to prevent text cutoff */
    }
    
    .bet-panel .bet-amount-control .bet-prefix {
        min-width: 4.5rem !important;
    }

    .bet-panel .bet-control-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 24px !important; /* bigger +/- on mobile */
    }
    
    .bet-panel .quick-bet-btn { font-size: 0.85rem !important; } /* Standardized */
    .bet-panel .btn-label {
        font-size: 1.0rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
    }
    .bet-panel .action-btn.cancel-mode .btn-label,
    .bet-panel .action-btn.pending-mode .btn-label {
        font-size: 0.8rem !important;
        line-height: 1.0 !important;
    }
    .bet-panel .bet-amount-label { font-size: 0.9rem !important; } /* BET button amount */

    .bet-panel .action-btn.cancel-mode,
    .bet-panel .action-btn.pending-mode {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    /* Auto Play and Auto Cash Out buttons - mobile sizing WITH wrapping */
    .bet-panel #auto-play-toggle-1,
    .bet-panel #auto-play-toggle-2,
    .bet-panel #auto-cashout-toggle-1,
    .bet-panel #auto-cashout-toggle-2 {
        font-size: 0.6rem !important; /* slightly larger on mobile */
        padding: 2px 3px !important; /* a touch more horizontal room */
        white-space: normal !important; /* allow wrapping */
        overflow: visible !important; /* show wrapped text */
        text-overflow: clip !important; /* no ellipsis when wrapping */
        height: auto !important; /* allow height to expand for wrapped text */
        line-height: 1.2 !important; /* better spacing for wrapped lines */
        word-wrap: break-word !important; /* break long words */
    }
    
    /* Auto cashout controls - make more compact */
    .bet-panel .auto-cashout-controls {
        width: var(--action-btn-width) !important; /* Match BET button width */
    }
    
    .bet-panel .auto-cashout-controls .cashout-value-control {
        grid-template-columns: 28px 1fr 28px !important; /* Smaller buttons */
        column-gap: 4px !important; /* Tighter spacing */
    }
    
    .bet-panel .auto-cashout-controls .bet-control-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 24px !important; /* bigger +/- on mobile */
    }
    /* Mobile override: suppress text minus in auto cashout */
    .bet-panel .auto-cashout-controls .bet-control-btn.decrease { font-size: 0 !important; }
    
    .bet-panel .auto-cashout-controls .auto-cashout-input {
        height: 28px !important;
        line-height: 28px !important;
        font-size: 0.9rem !important; /* Match landscape and bet-amount */
        padding: 0 4px !important;
    }
    
    /* Mobile-specific: Reduce music popup size */
    .popup-content-small {
        padding: 20px !important;
        max-width: 280px !important;
    }
    
    .popup-logo {
        height: 30px !important;
        margin-bottom: 15px !important;
    }
    
    .popup-text {
        font-size: 1.1rem !important;
        margin-bottom: 20px !important;
    }
    
    .popup-button-group {
        gap: 12px !important;
    }
    
    .popup-button-no,
    .popup-button-yes {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobile-specific: Reduce logo size during receiving bets */
    #game-logo-overlay {
        height: 50px !important;
    }
    
    body.no-animations #game-logo-overlay {
        height: 40px !important;
    }
    
    /* Mobile-specific: Reduce phase display (loading bar text) size */
    #phase-display {
        font-size: 0.9rem !important;
        letter-spacing: 0.05em !important;
    }
    
    /* Mobile-specific: Fix menu dropdown visibility and sizing */
    .menu-dropdown {
        position: fixed !important;
        min-width: 200px !important;
        max-width: 280px !important;
        right: 8px !important;
        left: auto !important;
        z-index: 2147483647 !important;
    }
    
    .menu-dropdown.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menu-item {
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
    }
    
    /* Mobile-specific: Make popups fullscreen with safe areas */
    .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important; /* Use dynamic viewport height */
        max-height: 100dvh !important;
        padding: 60px 20px 20px 20px !important; /* Extra top padding for close button */
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    
    .popup-header {
        font-size: 1.2rem !important;
        margin-bottom: 12px !important;
    }
    
    .popup-scrollable-content {
        font-size: 0.9rem !important;
        padding-right: 10px !important;
    }
    
    .popup-scrollable-content h2 {
        font-size: 1.1rem !important;
    }
    
    .popup-scrollable-content h3 {
        font-size: 1rem !important;
    }
    
    .popup-scrollable-content h4 {
        font-size: 0.95rem !important;
    }
    
    .popup-close {
        position: fixed !important; /* Fixed positioning to stay visible */
        top: 10px !important;
        right: 10px !important;
        /* Match dropdown close button styling */
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(145deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.95)) !important; /* Red gradient */
        border: 1px solid rgba(255, 255, 255, 0.12) !important; /* White frame */
        border-radius: 6px !important; /* Match dropdown close button */
        color: #ffffff !important; /* White cross */
        font-size: 20px !important; /* Larger X to match Round History */
        font-weight: bold !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(6px) !important;
        z-index: 2147483648 !important; /* Higher than popup overlay */
    }
}

/* Landscape and low-resolution screen popup improvements */
@media (max-height: 1099px) and (min-width: 1100px) {
    /* Make popups take more screen space on low-res landscape screens */
    .popup-content {
        width: 95% !important;
        max-width: 95% !important;
        height: 95vh !important;
        max-height: 95vh !important;
        padding: 20px !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    #auto-play-options-popup .popup-content {
        width: auto !important;
        max-width: 520px !important;
        height: auto !important;
        max-height: calc(100vh - 40px) !important;
        margin: 20px auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    /* Avatar picker: keep it as a centered modal on desktop (do NOT go fullscreen) */
    #avatar-picker-overlay .popup-content {
        width: auto !important;
        max-width: 560px !important;
        height: auto !important;
        max-height: calc(100vh - 40px) !important;
        margin: 20px auto !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    #avatar-picker-overlay .popup-scrollable-content {
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }

    #auto-play-options-popup .popup-scrollable-content {
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    .popup-close {
        position: fixed !important; /* Fixed positioning to stay visible */
        top: 12px !important;
        right: 12px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: linear-gradient(145deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.95)) !important; /* Red gradient */
        border: 1px solid rgba(255, 255, 255, 0.12) !important; /* White frame */
        border-radius: 6px !important; /* Rectangular to match design */
        color: #ffffff !important; /* White cross */
        font-size: 24px !important;
        font-weight: bold !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
        backdrop-filter: blur(6px) !important;
        z-index: 2147483648 !important; /* Keep on top */
    }
    
    .popup-header {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
    }
}

/* Landscape header alignment (>=1100px): logo left, balance next to burger on right) */
@media (min-width: 1100px) {
    /* Place logo on left, balance on the right next to burger */
    .header-area { justify-content: space-between; }
    .header-controls { position: static; display: flex; align-items: center; justify-content: flex-end; flex: 1 1 auto; width: auto; min-width: 0; padding-right: 56px; }
    /* Balance tiles sit immediately left of burger */
    .header-controls .balance-grid { margin-right: 0 !important; margin-left: auto !important; }
    .menu-container {
        position: absolute;
        right: 8px; /* align above Recent Results toggle (right: 8px) */
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
    }
    /* Widen balance panels in landscape so large values fit comfortably */
    .balance-grid { 
        gap: 10px; 
        grid-template-columns: repeat(3, minmax(160px, max-content));
    }
    .balance-item { min-width: 160px; padding: 6px 12px; }
    .balance-value { width: 18ch; }
    /* Fix: iOS Safari treats fixed inside transformed parent as absolute;
       explicitly position dropdown relative to menu-container in landscape */
    #menu-container { position: absolute; }
    #menu-container .menu-dropdown {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 220px !important;
    }
    #menu-container .menu-dropdown.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    .hamburger-btn {
        width: 32px;  /* match recent results dropdown */
        height: 32px; /* match recent results dropdown */
        font-size: 16px;
    }

    .chat-toggle-btn {
        width: 32px;
        height: 32px;
    }
}

.rotate-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #0b1020;
    color: #ffffff;
    z-index: 2147483647;
    text-align: center;
    padding: 24px;
    box-sizing: border-box;
}
.rotate-overlay .rotate-card {
    max-width: 520px;
    width: 100%;
    padding: 20px 24px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.rotate-overlay .rotate-title {
    font-weight: 900;
    font-size: 18px;
    margin-bottom: 8px;
}
.rotate-overlay .rotate-subtitle {
    opacity: 0.85;
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 1099px) and (orientation: landscape) {
    .rotate-overlay { display: flex; }
    body > *:not(.rotate-overlay) { display: none !important; }
}

@media (orientation: landscape) and (max-height: 500px) {
    .rotate-overlay { display: flex; }
    body > *:not(.rotate-overlay) { display: none !important; }
}

/* Width-only mobile fallback: ensure header centering applies even if orientation query isn't matched */
@media (max-width: 1099px) {
    .header-area {
        flex: 0 0 76px;
        min-height: 76px;
        max-height: 76px;
        padding: 3px 0 !important;
        gap: 6px !important;
        display: grid !important;
        grid-template-rows: 32px 32px !important;
        align-content: center !important;
        justify-items: stretch !important;
    }
    .header-controls {
        width: 100% !important;
        flex: 0 0 32px !important;
        height: 32px !important; min-height: 32px !important; max-height: 32px !important;
        display: block !important;
        position: static !important;
        grid-row: 2 !important;
        justify-self: stretch !important;
        padding-left: 0 !important;
        gap: 0 !important;
    }
    .header-controls .balance-grid {
        position: relative !important;
        margin: 0 !important; /* full width */
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* three tiles spanning width */
        width: 100% !important;
    }
    /* Three separate tiles with spacing; no outer frame */
    .balance-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: 1fr !important;
        gap: 4px !important; /* spacing prevents overlap */
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: blur(4px) !important;
        overflow: visible !important;
        height: 32px !important;
        min-height: 32px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }
    .balance-grid .balance-item,
    .header-controls .balance-grid .balance-item {
        background: rgba(15, 23, 42, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 8px !important; /* smaller radius to avoid corner clash */
        box-shadow: none !important;
        padding: 0 6px !important;
    }
    /* Kill any decorative pseudo elements that might create tile outlines */
    .balance-grid .balance-item::before,
    .balance-grid .balance-item::after,
    .header-controls .balance-grid .balance-item::before,
    .header-controls .balance-grid .balance-item::after {
        content: none !important;
        display: none !important;
    }
    .header-controls .balance-grid {
        top: auto !important;
        transform: none !important;
        height: 32px !important;
        min-height: 32px !important;
        align-items: center !important;
    }
    .header-controls .balance-item {
        display: grid !important;
        place-content: center !important;
        grid-auto-rows: min-content !important;
        row-gap: 2px !important;
    }
}

/* iPad Air and tablets in landscape: reduce bet amount font size to fit USD 20,000.00 */
@media (max-width: 1220px) and (orientation: landscape) {
    input[id^="bet-amount-"],
    .bet-amount,
    .bet-amount-label,
    .action-btn .bet-amount-label {
        font-size: 0.65rem !important;
    }
}

/* Very small tablets in landscape */
@media (max-width: 900px) and (orientation: landscape) {
    input[id^="bet-amount-"],
    .bet-amount,
    .bet-amount-label,
    .action-btn .bet-amount-label {
        font-size: 0.6rem !important;
    }
}