/* ════════════════════════════════════════════════════════════
   RUMMY SUPREME — CASINO CHIP THEME
   Complete visual redesign: From poker-felt → Casino Chips
   Design language: ClubGG × Real casino chip aesthetic
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CHIP COLOR SYSTEM ───────────────────────────────────────
   Real casino chip denominations → App color language
   ₪1    White/Ivory   #E8E3D6
   ₪5    Red           #C8191E
   ₪25   Green         #1A7A3A
   ₪100  Black/Onyx    #1C1A28
   ₪500  Purple        #6B1EA8
   ₪1000 Orange        #D4620E
   ─────────────────────────────────────────────────────────── */

:root {
    /* Base palette */
    --c-void:    #060510;
    --c-deep:    #0D0B18;
    --c-surface: #141228;
    --c-card:    #1A1830;
    --c-card2:   #201E38;
    --c-border:  rgba(255,255,255,.07);
    --c-border2: rgba(255,255,255,.12);

    /* Chip colors */
    --chip-red:    #C8191E;
    --chip-blue:   #1450A8;
    --chip-green:  #1A7A3A;
    --chip-black:  #1C1A28;
    --chip-purple: #6B1EA8;
    --chip-orange: #D4620E;
    --chip-white:  #E8E3D6;
    --chip-gold:   #D4A820;

    /* Edge stripe pattern colors per chip */
    --stripe-red:    #F54048;
    --stripe-blue:   #4A90E8;
    --stripe-green:  #3ABA60;
    --stripe-gold:   #F0C840;

    /* Text */
    --t-bright:  #F0EEF8;
    --t-main:    #C8C4E0;
    --t-dim:     rgba(200,196,224,.45);
    --t-gold:    #D4A820;
    --t-red:     #F54048;
    --t-green:   #3ABA60;
    --t-blue:    #4A90E8;

    /* Glow */
    --glow-gold: 0 0 20px rgba(212,168,32,.25);
    --glow-red:  0 0 20px rgba(200,25,30,.3);

    /* Radius */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;

    /* Shadows */
    --shadow-deep: 0 8px 32px rgba(0,0,0,.6);
    --shadow-card: 0 4px 16px rgba(0,0,0,.45);
}

/* ══ GLOBAL RESET ════════════════════════════════════════════ */
html, body {
    background: var(--c-void) !important;
    color: var(--t-main) !important;
    font-family: 'Inter', 'Noto Sans Hebrew', sans-serif !important;
}

/* Chip-felt noise texture on body */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(100,60,200,.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(200,25,30,.06) 0%, transparent 60%);
    pointer-events: none; z-index: 0;
}

/* Chip-grid texture overlay */
body::after {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='rgba(255,255,255,0.018)' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='20' fill='none' stroke='rgba(255,255,255,0.012)' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    pointer-events: none; z-index: 0; opacity: 0.5;
}

body > * { position: relative; z-index: 1; }
body.in-game::before, body.in-game::after { display: none; }

/* ══ CHIP STRIPE MIXIN (via pseudo-element trick) ════════════
   Used on buttons and cards for authentic chip edge feel
═══════════════════════════════════════════════════════════════ */
.chip-stripe-red, .chip-stripe-blue, .chip-stripe-green, .chip-stripe-gold {
    position: relative; overflow: hidden;
}
.chip-stripe-red::before    { background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(245,64,72,.45) 4px, rgba(245,64,72,.45) 6px); }
.chip-stripe-blue::before   { background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(74,144,232,.45) 4px, rgba(74,144,232,.45) 6px); }
.chip-stripe-green::before  { background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(58,186,96,.45) 4px, rgba(58,186,96,.45) 6px); }
.chip-stripe-gold::before   { background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(240,200,64,.45) 4px, rgba(240,200,64,.45) 6px); }
.chip-stripe-red::before, .chip-stripe-blue::before, .chip-stripe-green::before, .chip-stripe-gold::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    pointer-events: none; z-index: 2;
}

/* ══ HEADER ══════════════════════════════════════════════════ */
.g-header {
    background: linear-gradient(180deg, rgba(10,8,22,.98) 0%, rgba(10,8,22,.96) 100%) !important;
    border-bottom: 1px solid rgba(212,168,32,.12) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.6) !important;
    backdrop-filter: blur(12px) !important;
}
/* Top accent: chip stripe line */
.g-header::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
    background: repeating-linear-gradient(
        90deg,
        #C8191E 0px, #C8191E 18px,
        #0D0B18 18px, #0D0B18 22px,
        #D4A820 22px, #D4A820 40px,
        #0D0B18 40px, #0D0B18 44px,
        #1450A8 44px, #1450A8 62px,
        #0D0B18 62px, #0D0B18 66px,
        #6B1EA8 66px, #6B1EA8 84px,
        #0D0B18 84px, #0D0B18 88px
    ) !important;
    pointer-events: none !important;
}
.g-header::after { display: none !important; }

/* Logo button */
.g-header-btn {
    background: linear-gradient(145deg, #1A1830, #0D0B18) !important;
    border: 1px solid rgba(212,168,32,.25) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
    padding: 5px 14px !important;
}
.g-header-btn::after { display: none !important; }
.g-header-btn span {
    font-family: 'Chakra Petch', sans-serif !important;
    font-size: 11px !important; letter-spacing: 2.5px !important;
    color: var(--t-gold) !important;
    text-shadow: 0 0 12px rgba(212,168,32,.4) !important;
}

/* Avatar */
.g-avatar {
    background: radial-gradient(circle at 40% 35%, #2A2548, #141228) !important;
    border: 2px solid rgba(212,168,32,.2) !important;
    color: var(--t-gold) !important;
}
.g-avatar-ring {
    background: conic-gradient(#C8191E 0%, #D4A820 25%, #1450A8 50%, #6B1EA8 75%, #C8191E 100%) !important;
}
.g-user-name { color: var(--t-bright) !important; }
.g-user-level { color: var(--t-gold) !important; opacity: .8 !important; }

/* Balance pill */
.g-balance {
    background: rgba(212,168,32,.08) !important;
    border: 1px solid rgba(212,168,32,.2) !important;
    border-radius: var(--r-lg) !important;
}
.g-balance-coin {
    background: conic-gradient(from 30deg, #F0C840, #A87820, #F0C840, #805810, #F0C840) !important;
    color: #3A1800 !important;
    font-size: 9px !important;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.3), 0 2px 6px rgba(0,0,0,.5) !important;
}
.g-balance-amount {
    font-family: 'Chakra Petch', monospace !important;
    color: var(--t-gold) !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
}

/* ══ FOOTER NAV ══════════════════════════════════════════════ */
.g-footer-bar {
    background: linear-gradient(0deg, rgba(8,6,18,.99) 0%, rgba(12,10,22,.97) 100%) !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 0 -6px 30px rgba(0,0,0,.5) !important;
}
/* Bottom chip stripe */
.g-footer-glow {
    height: 2px !important;
    background: repeating-linear-gradient(
        90deg,
        #C8191E 0px, #C8191E 18px,
        #0D0B18 18px, #0D0B18 22px,
        #D4A820 22px, #D4A820 40px,
        #0D0B18 40px, #0D0B18 44px,
        #1450A8 44px, #1450A8 62px,
        #0D0B18 62px, #0D0B18 66px,
        #6B1EA8 66px, #6B1EA8 84px,
        #0D0B18 84px, #0D0B18 88px
    ) !important;
    opacity: .7 !important;
}
.g-nav-btn { padding: 6px 8px 4px !important; min-width: 52px !important; }
.g-nav-ico { color: rgba(200,196,224,.22) !important; }
.g-nav-txt { color: rgba(200,196,224,.22) !important; font-family: 'Inter', sans-serif !important; font-size: 9px !important; letter-spacing: .5px !important; }
.g-nav-dot { width: 5px !important; height: 5px !important; border-radius: 50% !important; }
.g-nav-btn.active .g-nav-ico { color: var(--chip-gold) !important; filter: drop-shadow(0 0 6px rgba(212,168,32,.5)) !important; }
.g-nav-btn.active .g-nav-txt { color: var(--chip-gold) !important; font-weight: 700 !important; }
.g-nav-btn.active .g-nav-dot { background: var(--chip-gold) !important; box-shadow: 0 0 8px rgba(212,168,32,.6) !important; }

/* ══ LOBBY CONTENT ═══════════════════════════════════════════ */
body {
    background-color: var(--c-void) !important;
    background-image: none !important;
}

/* === PLAY HERO — Chip-Stack CTA === */
.g-play-hero {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(200,25,30,.12) 0%, transparent 55%),
        linear-gradient(160deg, #1E1A32 0%, #131128 60%, #0D0B1A 100%) !important;
    border: 1.5px solid rgba(212,168,32,.18) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-deep), var(--glow-gold) !important;
    min-height: 120px !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Chip stripe top/bottom */
.g-play-hero::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
    background: repeating-linear-gradient(90deg, #C8191E 0, #C8191E 8px, #0D0B18 8px, #0D0B18 11px, #D4A820 11px, #D4A820 19px, #0D0B18 19px, #0D0B18 22px, #1450A8 22px, #1450A8 30px, #0D0B18 30px, #0D0B18 33px) !important;
    opacity: .9 !important; z-index: 2 !important;
}
.g-play-hero::after {
    content: '' !important;
    position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
    background: repeating-linear-gradient(90deg, #1450A8 0, #1450A8 8px, #0D0B18 8px, #0D0B18 11px, #D4A820 11px, #D4A820 19px, #0D0B18 19px, #0D0B18 22px, #C8191E 22px, #C8191E 30px, #0D0B18 30px, #0D0B18 33px) !important;
    opacity: .9 !important; z-index: 2 !important;
    animation: none !important;
}
.g-play-text {
    font-family: 'Chakra Petch', serif !important;
    font-size: clamp(24px, 6.5vw, 36px) !important;
    letter-spacing: 6px !important;
    background: linear-gradient(180deg, #FFE070 0%, #D4A820 40%, #F0C840 55%, #A07818 75%, #D4A820 90%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 0 16px rgba(212,168,32,.45)) !important;
}
.g-play-dice { font-size: 32px !important; filter: drop-shadow(0 4px 10px rgba(200,25,30,.4)) !important; }
.g-play-sub { color: rgba(200,196,224,.35) !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; }

/* === ACTION GRID — Chip-styled mini cards === */
.g-actions { gap: 8px !important; }
.g-action {
    background: linear-gradient(160deg, var(--c-card) 0%, var(--c-surface) 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 14px 6px 12px !important;
    position: relative !important; overflow: hidden !important;
}
/* Left chip stripe per action card */
.g-action::after {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 3px !important;
    border-radius: var(--r-md) 0 0 var(--r-md) !important;
}
.g-action:nth-child(1)::after { background: var(--chip-red) !important; }
.g-action:nth-child(2)::after { background: var(--chip-blue) !important; }
.g-action:nth-child(3)::after { background: var(--chip-purple) !important; }
.g-action-label { color: var(--t-bright) !important; font-family: 'Inter', sans-serif !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: .5px !important; }

/* === BET ROW — Chip selector === */
.g-bet-row {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-card) !important;
}
.g-bet-label { color: var(--t-dim) !important; font-size: 11px !important; letter-spacing: .5px !important; }
/* Individual chips */
.g-chip {
    border-radius: 20px !important;
    font-family: 'Chakra Petch', monospace !important;
    font-size: 12px !important; font-weight: 700 !important;
    padding: 5px 13px !important;
    position: relative !important;
    transition: all .15s !important;
}
/* Chip denomination colors */
.g-chip[data-v="25"], .g-chip:nth-child(1)  { background: rgba(26,122,58,.2) !important; border: 1.5px solid rgba(58,186,96,.3) !important; color: #3ABA60 !important; }
.g-chip[data-v="50"], .g-chip:nth-child(2)  { background: rgba(20,80,168,.2) !important; border: 1.5px solid rgba(74,144,232,.3) !important; color: #4A90E8 !important; }
.g-chip[data-v="100"],.g-chip:nth-child(3)  { background: rgba(200,25,30,.2) !important; border: 1.5px solid rgba(245,64,72,.3) !important; color: #F54048 !important; }
.g-chip[data-v="200"],.g-chip:nth-child(4)  { background: rgba(107,30,168,.2) !important; border: 1.5px solid rgba(160,100,230,.3) !important; color: #A064E6 !important; }
.g-chip[data-v="500"],.g-chip:nth-child(5)  { background: rgba(212,98,14,.2) !important; border: 1.5px solid rgba(240,140,40,.3) !important; color: #F08828 !important; }
.g-chip.active {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 2px rgba(212,168,32,.5) !important;
    background: rgba(212,168,32,.25) !important;
    border-color: rgba(212,168,32,.6) !important;
    color: var(--t-gold) !important;
}

/* === ROOM LIST — Casino table cards === */
.g-room {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-card) !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    position: relative !important; overflow: hidden !important;
}
.g-room::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; bottom: 0 !important; width: 4px !important;
    border-radius: var(--r-lg) 0 0 var(--r-lg) !important;
}
/* Chip color coding by bet amount */
.g-room[data-bet="25"]::before, .g-room[data-bet="0"]::before { background: var(--chip-green) !important; }
.g-room[data-bet="50"]::before  { background: var(--chip-blue) !important; }
.g-room[data-bet="100"]::before { background: var(--chip-red) !important; }
.g-room[data-bet="200"]::before { background: var(--chip-purple) !important; }
.g-room[data-bet="500"]::before, .g-room[data-bet="1000"]::before { background: var(--chip-orange) !important; }
.g-room-bet {
    font-family: 'Chakra Petch', monospace !important;
    font-size: 18px !important; font-weight: 700 !important;
    color: var(--t-gold) !important;
    min-width: 54px !important;
}
.g-room-host { color: var(--t-bright) !important; font-size: 13px !important; font-weight: 600 !important; }
.g-room-sub { color: var(--t-dim) !important; font-size: 10px !important; }
.g-room-status {
    border-radius: 10px !important; font-size: 9px !important; font-weight: 700 !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    background: rgba(58,186,96,.1) !important; color: #3ABA60 !important;
    border: 1px solid rgba(58,186,96,.2) !important;
    padding: 3px 10px !important;
}
.g-room-status.playing { background: rgba(212,168,32,.1) !important; color: var(--t-gold) !important; border-color: rgba(212,168,32,.2) !important; }

/* === SECTION TITLES === */
.section-title, .g-section-title, .section-title-fancy, .g-lb-title {
    font-family: 'Chakra Petch', sans-serif !important;
    color: var(--t-main) !important;
    font-size: 12px !important; font-weight: 600 !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
    opacity: .7 !important;
    text-shadow: none !important;
}

/* === STATS BAR === */
.g-stat {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-sm) !important;
}
.g-stat b { color: var(--t-bright) !important; font-family: 'Chakra Petch', monospace !important; }
.g-stat span:last-child { color: var(--t-dim) !important; }

/* === LEADERBOARD === */
.g-lb-row {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.g-lb-rank { color: var(--t-gold) !important; font-family: 'Chakra Petch', monospace !important; }
.g-lb-avatar {
    background: radial-gradient(circle at 35% 35%, #2A2548, #141228) !important;
    border: 1.5px solid rgba(212,168,32,.15) !important;
}
.g-lb-name { color: var(--t-bright) !important; }
.g-lb-elo { color: var(--t-gold) !important; font-family: 'Chakra Petch', monospace !important; }

/* === ONLINE BAR === */
.g-online-row { color: var(--t-dim) !important; }

/* ══ BUTTONS ══════════════════════════════════════════════════ */
.btn {
    font-family: 'Inter', 'Noto Sans Hebrew', sans-serif !important;
    font-weight: 700 !important;
    border-radius: var(--r-md) !important;
    transition: all .15s !important;
    position: relative !important;
    overflow: hidden !important;
}
.btn::after {
    content: '' !important;
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 50%) !important;
    pointer-events: none !important;
}
.btn-primary {
    background: linear-gradient(145deg, #E82828, #C8191E 40%, #9A1218) !important;
    color: #fff !important;
    border: 1px solid rgba(245,64,72,.3) !important;
    box-shadow: 0 3px 14px rgba(200,25,30,.35), inset 0 1px 0 rgba(255,255,255,.1) !important;
}
.btn-primary:active { transform: scale(.97) !important; }
.btn-secondary {
    background: var(--c-card) !important;
    color: var(--t-main) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
}
.btn-danger {
    background: rgba(200,25,30,.08) !important;
    color: #F54048 !important;
    border: 1px solid rgba(200,25,30,.2) !important;
}
/* Chip-edge stripe on primary buttons */
.btn-primary::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0px, rgba(255,255,255,.3) 5px, transparent 5px, transparent 8px) !important;
    pointer-events: none !important; z-index: 2 !important;
}

/* ══ MODALS ═══════════════════════════════════════════════════ */
.modal { background: rgba(0,0,0,.7) !important; backdrop-filter: blur(8px) !important; }
.modal-content {
    background: linear-gradient(160deg, var(--c-card) 0%, var(--c-surface) 100%) !important;
    border: 1.5px solid rgba(212,168,32,.14) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.65) !important;
    border-radius: var(--r-xl) !important;
    position: relative !important; overflow: hidden !important;
}
/* Modal top chip stripe */
.modal-content::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
    background: repeating-linear-gradient(90deg, #C8191E 0px, #C8191E 8px, #1A1830 8px, #1A1830 11px, #D4A820 11px, #D4A820 19px, #1A1830 19px, #1A1830 22px, #1450A8 22px, #1450A8 30px, #1A1830 30px, #1A1830 33px) !important;
    pointer-events: none !important;
}
.modal-header { color: var(--t-bright) !important; font-family: 'Chakra Petch', sans-serif !important; font-weight: 600 !important; letter-spacing: 1px !important; }
.modal-body { color: var(--t-dim) !important; }
.modal-body input {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: var(--t-bright) !important;
    border-radius: var(--r-sm) !important;
    font-family: 'Inter', sans-serif !important;
}
.modal-body input:focus { border-color: var(--t-gold) !important; outline: none !important; }

/* ══ TOASTS ═══════════════════════════════════════════════════ */
.toast-container .toast {
    background: rgba(20,18,40,.95) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: var(--t-bright) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
    backdrop-filter: blur(12px) !important;
    font-family: 'Inter', sans-serif !important;
}

/* ══ PROFILE PAGE ═════════════════════════════════════════════ */
.profile-card {
    background: linear-gradient(160deg, var(--c-card) 0%, var(--c-surface) 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: var(--shadow-deep) !important;
    position: relative !important; overflow: hidden !important;
}
.profile-card::before {
    content: '' !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
    background: repeating-linear-gradient(90deg, #C8191E 0px, #C8191E 8px, #1A1830 8px, #1A1830 11px, #D4A820 11px, #D4A820 19px, #1A1830 19px, #1A1830 22px, #1450A8 22px, #1450A8 30px, #1A1830 30px, #1A1830 33px) !important;
}
.profile-avatar-large {
    background: radial-gradient(circle at 35% 35%, #2A2548, #141228) !important;
    border: 3px solid rgba(212,168,32,.25) !important;
    color: var(--t-gold) !important;
}
.pstat-val { color: var(--t-gold) !important; font-family: 'Chakra Petch', monospace !important; }
.pstat-lbl { color: var(--t-dim) !important; }

/* ══ ADMIN / MANAGER PANEL ════════════════════════════════════ */
.admin-stats-grid .admin-stat, .stat-card {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.admin-stat-num { color: var(--t-bright) !important; font-family: 'Chakra Petch', monospace !important; }
.admin-stat.green .admin-stat-num { color: #3ABA60 !important; }
.admin-stat.blue  .admin-stat-num { color: #4A90E8 !important; }
.admin-stat.warn  .admin-stat-num { color: #F08828 !important; }
.admin-stat-label { color: var(--t-dim) !important; }
.stat-num { color: var(--t-gold) !important; font-family: 'Chakra Petch', monospace !important; }
.stat-label { color: var(--t-dim) !important; }
.admin-tabs {
    background: var(--c-surface) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-lg) !important;
}
.admin-tab {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.05) !important;
    color: var(--t-dim) !important;
    border-radius: var(--r-sm) !important;
    font-family: 'Inter', sans-serif !important; font-size: 11px !important;
}
.admin-tab.active {
    background: linear-gradient(145deg, rgba(200,25,30,.3), rgba(200,25,30,.15)) !important;
    border-color: rgba(200,25,30,.3) !important;
    color: #F54048 !important;
    box-shadow: none !important;
}
.admin-card {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
}
.admin-input {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: var(--t-bright) !important;
    border-radius: var(--r-sm) !important;
}
.admin-label { color: var(--t-dim) !important; }
.admin-user-card {
    background: var(--c-card) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: var(--r-md) !important;
}
.admin-user-name { color: var(--t-gold) !important; }
.admin-user-balance { color: #3ABA60 !important; }
.admin-user-meta, .admin-user-detail, .admin-user-stats { color: var(--t-dim) !important; }

/* ══ LOGIN PAGE ═══════════════════════════════════════════════ */
.login-card {
    background: linear-gradient(160deg, var(--c-card) 0%, var(--c-surface) 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: var(--r-xl) !important;
}
.login-card input {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: var(--t-bright) !important;
}
.login-card input::placeholder { color: var(--t-dim) !important; }
.login-card input:focus { border-color: var(--t-gold) !important; }
.login-card p { color: var(--t-dim) !important; }
.lobby-title { color: var(--t-bright) !important; text-shadow: none !important; }
.lobby-title .gold { color: var(--t-gold) !important; -webkit-text-fill-color: var(--t-gold) !important; }
.lobby-sub { color: var(--t-dim) !important; }

/* ══ PRELOADER ════════════════════════════════════════════════ */
#appPreloader {
    background: var(--c-void) !important;
    background-color: #060510 !important;
}
#appPreloader > div:nth-child(1) svg { color: var(--chip-gold) !important; }
#appPreloader > div:nth-child(2) { color: var(--t-gold) !important; font-family: 'Chakra Petch', sans-serif !important; }
#appPreloader > div:nth-child(3) { color: rgba(212,168,32,.5) !important; }
#preloadBar { background: linear-gradient(90deg, #C8191E, #D4A820) !important; }

/* ══ GAME BOARD — Casino Chip theme overlay ═══════════════════ */
/* Action buttons chip-colored */
#rmBtnDiscard {
    background: linear-gradient(145deg, #E82828, #C8191E 40%, #9A1218) !important;
    border: 1px solid rgba(245,64,72,.3) !important;
    box-shadow: 0 2px 10px rgba(200,25,30,.25) !important;
    color: #fff !important;
}
#rmBtnMeld {
    background: linear-gradient(145deg, rgba(212,168,32,.35), rgba(212,168,32,.18)) !important;
    border: 1.5px solid rgba(212,168,32,.45) !important;
    color: var(--t-gold) !important;
}
#rmBtnAdd {
    background: rgba(20,80,168,.18) !important;
    border: 1px solid rgba(74,144,232,.25) !important;
    color: #4A90E8 !important;
}

/* LANDSCAPE MODE — compact, no upward growth */
@media (orientation: landscape), (max-height: 500px) {
    /* Table: fixed height, stretch sideways */
    #rmScene {
        top: 20px !important;
        bottom: calc(100% - 190px) !important; /* scene height = 170px, NOT upward */
        overflow: visible !important;
    }
    /* #rmGameArea handled in board3d.js */
    #rmMySection {
        top: 190px !important;
        padding: 3px 0 max(3px, env(safe-area-inset-bottom, 3px)) !important;
        gap: 1px !important;
    }
    #rmHandArea {
        height: 60px !important;
    }
    /* More compact info strip in landscape */
    #rmInfoStrip {
        padding: 2px 8px !important;
        gap: 4px !important;
    }
    .rm-timer { width: 24px !important; height: 24px !important; }
    .rm-ab { padding: 4px 8px !important; font-size: 8px !important; }
    .rm-my-info { padding: 2px 8px 2px 3px !important; }
    .rm-sc-val { font-size: 11px !important; }
    .rm-pill-log { width: 72px !important; height: 22px !important; }
}

/* ══ WAITING ROOM OVERLAY ════════════════════════════════════ */
#rmWaitingRoom {
    position: fixed; inset: 0; z-index: 450;
    background: rgba(6,5,16,.95);
    backdrop-filter: blur(12px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    font-family: 'Inter', 'Noto Sans Hebrew', sans-serif;
}
.rw-title {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 22px; font-weight: 700;
    color: var(--t-gold); letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 8px;
}
.rw-sub { font-size: 12px; color: var(--t-dim); letter-spacing: 1px; margin-bottom: 32px; }
.rw-seats {
    display: flex; gap: 16px; justify-content: center;
    margin-bottom: 28px;
}
.rw-seat {
    width: 64px; height: 64px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    transition: all .3s;
}
.rw-seat.filled {
    background: radial-gradient(circle, rgba(212,168,32,.15), rgba(212,168,32,.05));
    border: 2px solid rgba(212,168,32,.4);
    box-shadow: 0 0 20px rgba(212,168,32,.15);
}
.rw-seat.empty {
    background: rgba(255,255,255,.03);
    border: 2px dashed rgba(255,255,255,.12);
}
.rw-seat.me {
    border-color: rgba(58,186,96,.5);
    background: radial-gradient(circle, rgba(58,186,96,.15), rgba(58,186,96,.05));
    box-shadow: 0 0 20px rgba(58,186,96,.15);
}
.rw-seat-avatar { font-size: 20px; }
.rw-seat-name { font-size: 9px; color: var(--t-dim); letter-spacing: .5px; text-align: center; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Progress track */
.rw-progress-wrap {
    width: min(280px, 80vw); margin-bottom: 24px;
}
.rw-progress-label {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--t-dim); margin-bottom: 6px;
}
.rw-progress-track {
    height: 6px; border-radius: 3px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}
.rw-progress-bar {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--chip-red), var(--chip-gold));
    transition: width .4s cubic-bezier(.34,1.56,.64,1);
}

/* Chip stripe decoration above progress */
.rw-stripe {
    width: min(280px, 80vw); height: 3px; border-radius: 2px; margin-bottom: 20px;
    background: repeating-linear-gradient(90deg, #C8191E 0px, #C8191E 8px, #1A1830 8px, #1A1830 11px, #D4A820 11px, #D4A820 19px, #1A1830 19px, #1A1830 22px, #1450A8 22px, #1450A8 30px, #1A1830 30px, #1A1830 33px);
    opacity: .7;
}
.rw-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.rw-btn {
    padding: 12px 24px; border-radius: 20px;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer; border: none;
    transition: all .15s;
    position: relative; overflow: hidden;
}
.rw-btn.start {
    background: linear-gradient(145deg, #E82828, #C8191E, #9A1218);
    color: #fff;
    box-shadow: 0 4px 16px rgba(200,25,30,.35);
}
.rw-btn.start::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0px, rgba(255,255,255,.35) 5px, transparent 5px, transparent 8px);
}
.rw-btn.start:active { transform: scale(.97); }
.rw-btn.cancel {
    background: rgba(255,255,255,.05);
    color: var(--t-dim);
    border: 1px solid rgba(255,255,255,.1);
}
.rw-waiting-pulse {
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--t-dim);
    margin-bottom: 20px;
    letter-spacing: 1px;
}
.rw-waiting-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #3ABA60;
    box-shadow: 0 0 8px #3ABA60;
    animation: rwPulse 1.4s ease infinite;
}
@keyframes rwPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }



/* ══ MP CREATE ROOM BUTTONS ══════════════════════════════════ */
#mpButtons { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.mp-btn {
    padding: 8px 18px; border-radius: 20px;
    font-family: 'Chakra Petch', monospace; font-size: 13px; font-weight: 700;
    background: var(--c-card); color: var(--t-dim);
    border: 1.5px solid rgba(255,255,255,.1);
    cursor: pointer; transition: all .15s;
}
.mp-btn.active, .mp-btn[data-active="true"] {
    background: rgba(200,25,30,.2) !important;
    border-color: var(--chip-red) !important;
    color: #F54048 !important;
    box-shadow: 0 0 12px rgba(200,25,30,.25) !important;
}



/* ══════════════════════════════════════════════════════════════
   GAME LAYOUT — Ensure bottom panel never squishes table
══════════════════════════════════════════════════════════════ */

/* Default CSS variable for bottom panel height */
#rmRoot { --bottom-panel-h: 155px; }

/* The scene goes from top bar to where bottom panel starts */
#rmScene {
    position: absolute !important;
    top: 28px !important;
    left: 0 !important; right: 0 !important;
    bottom: var(--bottom-panel-h) !important;
    /* CRITICAL: scene uses bottom, not height, so it never pushes table */
}

/* Bottom panel: always fixed to bottom */
#rmBottomPanel {
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    bottom: 0 !important;
    top: auto !important;  /* Never use top */
    height: var(--bottom-panel-h) !important;
}

/* LANDSCAPE: smaller panel, table gets more room */
@media (max-height: 500px) {
    #rmRoot { --bottom-panel-h: 108px; }
    #rmScene { top: 22px !important; }
    #rmBottomPanel { height: 108px !important; }
    /* HUD panels smaller */
    #rmHudTimer { top: 26px !important; right: 6px !important; }
    #rmHudScores { top: 26px !important; left: 6px !important; padding: 3px 7px !important; }
    #rmHudLog { display: none !important; } /* hide log in landscape to save space */
}

/* Portrait: default is fine, table fills most of screen */
@media (orientation: portrait) {
    #rmRoot { --bottom-panel-h: 160px; }
    #rmBottomPanel { height: 160px !important; }
}

/* HUD: always floating, never in flow */
#rmHudTimer, #rmHudScores, #rmHudLog {
    position: absolute !important;
    z-index: 50 !important;
}