/* =============================================
   BetPro - Responsive Stylesheet
   Mobile-first: base = <400px, then scale up
   ============================================= */

/* ----- Base: Extra Small < 400px (e.g. 360px) ----- */
/* Default rules live here — no media query needed */

/* Header: ultra compact */
#mainHeader {
  padding: 0 8px;
  height: 52px;
}
.header-left { gap: 6px; }
.header-right { gap: 6px; }
.header-center { display: none; }
.menu-btn { padding: 6px; font-size: 1rem; }
.logo { font-size: 1rem; gap: 4px; }
.logo-icon { width: 22px; height: 22px; }
.logo-text-ext { display: none; } /* hides "Bet" */
.wallet-display { padding: 4px 8px; gap: 4px; }
.wallet-display span { font-size: 0.7rem; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-display i { font-size: 0.85rem; }
.user-actions { gap: 4px; }
.user-actions .btn { padding: 4px 8px; font-size: 0.7rem; }
.user-avatar { padding: 2px 8px 2px 2px; gap: 4px; }
.user-avatar img { width: 24px; height: 24px; }
.user-avatar span { font-size: 0.7rem; }

/* App layout */
#app {
  grid-template-rows: 52px 1fr;
}

/* Main content */
#mainContent {
  padding: 10px;
  padding-bottom: calc(52px + 10px);
}

/* Bottom nav */
.bottom-nav {
  height: 52px;
  padding: 0 4px;
}
.bottom-nav-item { padding: 4px 6px; min-width: 44px; }
.bottom-nav-item span { font-size: 0.55rem; }
.bottom-nav-item i { font-size: 1.1rem; }

/* Grids */
.game-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.game-card { min-height: 120px; }
.game-card-content { padding: 12px 8px; }
.game-card i { font-size: 1.8rem; margin-bottom: 8px; }
.game-card h3 { font-size: 0.8rem; }
.game-card p { font-size: 0.7rem; display: none; }
.game-card-svg { width: 40px; height: 40px; }

.casino-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.casino-card-img { height: 60px; }
.casino-card-body { padding: 0 8px 12px; }
.casino-card .game-icon { font-size: 1.8rem; margin-bottom: 6px; }

.stats-row {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.stat-card { padding: 12px; }
.stat-card .stat-value { font-size: 1.1rem; }
.stat-card .stat-label { font-size: 0.65rem; }
.stat-card i { font-size: 1.1rem; margin-bottom: 4px; }

.virtual-grid { grid-template-columns: 1fr; gap: 10px; }
.virtual-card img { height: 100px; }
.virtual-card-body { padding: 12px; }
.virtual-card-body h3 { font-size: 0.9rem; }
.virtual-card-body p { font-size: 0.75rem; }

/* Hero */
.hero-carousel { height: 200px; border-radius: 12px; margin-bottom: 16px; }
.hero-slide { padding: 24px 20px; align-items: flex-end; }
.hero-slide-content { padding: 18px 20px; border-radius: 12px; max-width: 100%; }
.hero-slide h2 { font-size: 1.1rem; margin-bottom: 4px; }
.hero-slide p { font-size: 0.75rem; margin-bottom: 14px; max-width: 100%; }
.hero-dots { bottom: 12px; left: 20px; }
.hero-dot { width: 6px; height: 6px; }
.hero-dot.active { width: 20px; }
.btn-hero { padding: 10px 20px; font-size: 0.78rem; }
.hero-badge { padding: 2px 10px; font-size: 0.6rem; margin-bottom: 10px; }
.hero-accent-line { width: 32px; height: 2px; margin-bottom: 10px; }
.hero-orb-1 { width: 120px; height: 120px; }
.hero-orb-2 { width: 80px; height: 80px; }
.hero-orb-3 { width: 60px; height: 60px; }
.hero-slide-pattern { background-size: 24px 24px; }

/* Section */
.section { margin-bottom: 16px; }
.section-header { margin-bottom: 10px; }
.section-title { font-size: 1rem; }
.section-link { font-size: 0.75rem; }

/* Page header */
.page-header { margin-bottom: 14px; padding-bottom: 10px; }
.page-header h1 { font-size: 1.2rem; }
.page-header p { font-size: 0.75rem; }

/* Cards / Containers */
.card { padding: 14px; }
.modal { margin: 0 8px; max-width: 100%; }
.modal-header { padding: 16px 16px 0; }
.modal-header h3 { font-size: 1rem; }
.modal-body { padding: 16px; }
.modal-footer { padding: 12px 16px; gap: 8px; }
.toast { min-width: auto; max-width: calc(100vw - 32px); padding: 10px 14px; }
#toastContainer { right: 12px; left: 12px; top: 60px; }

/* Bet slip */
.bet-slip { width: 100%; right: -100%; }
.bet-slip-header { padding: 12px 16px; }
.bet-slip-items { padding: 12px 16px; }
.bet-slip-footer { padding: 12px 16px; }
.bet-slip-summary { margin-bottom: 12px; }
.summary-row { padding: 4px 0; font-size: 0.8rem; }
.summary-row .form-input { width: 80px; height: 32px; font-size: 0.8rem; }

/* Tables */
.table-responsive { margin: 0 -10px; padding: 0 10px; }
.table th, .table td { padding: 8px 10px; font-size: 0.75rem; }

/* Match cards */
.match-card { padding: 12px; margin-bottom: 8px; }
.match-odds { grid-template-columns: repeat(3, 1fr); gap: 5px; }
.match-teams { gap: 10px; }
.match-team { font-size: 0.75rem; }
.team-badge { width: 34px; height: 34px; font-size: 0.65rem; }
.odds-btn { padding: 8px 6px; }
.odds-btn .odds-value { font-size: 0.8rem; }

/* Number grid */
.number-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 5px; }
.number-cell { width: 36px; height: 36px; font-size: 0.75rem; }

/* Slots */
.slot-reel { width: 50px; height: 70px; font-size: 1.8rem; }
.slot-machine { padding: 16px 12px; }
.slot-reels { gap: 10px; margin-bottom: 16px; }
.slot-spin-btn { padding: 12px 32px; font-size: 1rem; }

/* Quick actions */
.quick-actions { gap: 8px; margin-bottom: 16px; }
.quick-action { padding: 12px 16px; min-width: 80px; font-size: 0.75rem; }
.quick-action i { font-size: 1.2rem; }

/* Buttons */
.btn-sm { padding: 4px 10px; font-size: 0.75rem; }
.btn-lg { padding: 12px 20px; font-size: 0.9rem; }
.btn { padding: 8px 14px; font-size: 0.8rem; }

/* Tabs */
.tabs { margin-bottom: 14px; }
.tab { padding: 8px 12px; font-size: 0.78rem; }

/* 404 */
.page-404 h1 { font-size: 4rem; }
.page-404 { padding: 40px 12px; }
.page-404 h2 { font-size: 1.2rem; }

/* Empty state */
.empty-state { padding: 36px 12px; }
.empty-state i { font-size: 2rem; }
.empty-state h3 { font-size: 1rem; }

/* Skeleton */
.skeleton-card { height: 120px; }

/* Sidebar - narrower on small screens */
#sidebar { width: 240px; }
.nav-item { padding: 10px 16px; font-size: 0.85rem; }

/* Featured banner */
.featured-banner img { height: 120px; }
.featured-overlay { padding: 16px; }
.featured-overlay h2 { font-size: 1.1rem; }

/* Games page full grid */
.games-grid-full { grid-template-columns: 1fr; gap: 8px; }
.game-card-wide { padding: 10px; gap: 10px; }
.game-card-wide-icon { width: 44px; height: 44px; font-size: 1.2rem; flex-shrink: 0; }
.game-card-wide-icon img { width: 24px; height: 24px; }
.game-card-wide-body h3 { font-size: 0.85rem; }
.game-card-wide-body p { font-size: 0.72rem; }
.game-cat-tab { padding: 6px 10px; font-size: 0.72rem; }
.game-cat-tabs { gap: 4px; }
.game-search-bar { margin-bottom: 10px; }
.game-search-input { height: 36px; font-size: 0.8rem; }

/* Search highlight */
.search-highlight { padding: 0 1px; }

/* Wallet / Payment page */
.wallet-balance-card { padding: 20px 16px; }
.wallet-balance-amount { font-size: 1.8rem; }
.wallet-avatar { width: 40px; height: 40px; font-size: 1.1rem; }
.deposit-step-content { padding: 14px; }
.amount-input { font-size: 1.4rem; }
.quick-amount { padding: 6px 12px; font-size: 0.78rem; }
.qr-frame { padding: 12px; }
.qr-frame-inner img { width: 140px; height: 140px; }
.qr-panel { flex-direction: column; align-items: center; }
.upi-display-box { padding: 8px 14px; font-size: 0.85rem; }
.txn-card { padding: 16px; }
.txn-item { padding: 12px 0; gap: 10px; }
.txn-item-amount { font-size: 0.85rem; }
.wallet-tab { padding: 10px 8px; font-size: 0.8rem; gap: 6px; }
.wallet-tab i { font-size: 0.85rem; }

/* Form adjustments */
.form-row { flex-direction: column; }
.form-input { height: 38px; font-size: 0.85rem; padding: 6px 12px; }
.form-select { height: 38px; font-size: 0.85rem; padding: 6px 12px; }
.form-group { margin-bottom: 10px; }
.form-label { font-size: 0.8rem; }

/* Quick actions scrollable */
.quick-actions {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.quick-actions::-webkit-scrollbar { display: none; }
.quick-actions .btn { white-space: nowrap; flex-shrink: 0; }

/* Hide desktop-only elements */
.desktop-only { display: none !important; }

/* Admin page mobile */
.admin-layout { grid-template-columns: 1fr; }
.admin-sidebar { margin-bottom: 12px; }
.admin-nav-item { padding: 10px 14px; font-size: 0.8rem; }
.admin-content { padding: 0; }
.admin-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Games page category full width games grid */
.game-cat-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.game-cat-tabs::-webkit-scrollbar { display: none; }

/* ----- WinGo mobile ----- */
.wingo-round-panel { padding: 20px 16px; flex-direction: column; gap: 14px; }
.wingo-timer-wrap { width: 80px; height: 80px; }
.wingo-timer-value { font-size: 1rem; }
.wingo-result-card { width: 72px; height: 72px; }
.wingo-result-number { font-size: 1.6rem; }
.wingo-color-grid { gap: 6px; }
.wingo-color-card { padding: 10px 6px; }
.wingo-color-circle { width: 32px; height: 32px; }
.wingo-num-grid { gap: 4px; }
.wingo-num-card { padding: 6px 2px; }
.wingo-num-circle { width: 32px; height: 32px; font-size: 0.9rem; }
.wingo-stake-row { flex-direction: column; gap: 8px; }
.wingo-stake-input-wrap { flex: none; width: 100%; }
.wingo-quick-chips { width: 100%; }
.wingo-tab { padding: 6px 12px; font-size: 0.72rem; }
.wingo-hist-item { width: 24px; height: 24px; font-size: 0.6rem; }
.wingo-map-grid { grid-template-columns: repeat(5, 1fr); gap: 3px; }
.wingo-ref-item { font-size: 0.68rem; padding: 4px; }

/* ----- 4D mobile ----- */
.g4d-digit-slot { width: 44px; height: 52px; font-size: 1.2rem; }
.g4d-numpad { gap: 4px; }
.g4d-numpad button { padding: 10px; font-size: 0.9rem; }

/* ----- K3 mobile ----- */
.k3-dice { width: 56px; height: 56px; font-size: 1.6rem; }

/* ----- Dragon Tiger mobile ----- */
.dt-card { width: 64px; height: 90px; font-size: 1.2rem; }

/* ----- Andar Bahar mobile ----- */
.ab-center-card { width: 56px; height: 78px; font-size: 1rem; }
.ab-mini-card { width: 18px; height: 26px; }

/* ----- Aviator mobile ----- */
.aviator-canvas-wrap { height: 250px; }
.aviator-controls { padding: 12px; gap: 8px; }
.aviator-bet-input { height: 40px; font-size: 1rem; }

/* ----- Mines mobile ----- */
.mines-grid { gap: 4px; }
.mines-cell { height: 50px; font-size: 1.1rem; }

/* ----- Plinko mobile ----- */
.plinko-canvas-wrap { height: 300px; }
.plinko-controls { padding: 12px; }

/* ----- Roulette mobile ----- */
.roulette-wheel-wrap { height: 250px; }
.roulette-controls { padding: 12px; }

/* ----- Wheel mobile ----- */
.wheel-canvas-wrap { height: 250px; }

/* ----- Scrollable containers on mobile ----- */
.match-odds { grid-template-columns: repeat(3, 1fr); gap: 5px; }

/* Fix for anything that might overflow */
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }
input, button, select, textarea { max-width: 100%; }

/* ----- Tablet (400px-767px) ----- */
@media (min-width: 400px) and (max-width: 767px) {
  #mainHeader { padding: 0 12px; height: 56px; }
  .logo { font-size: 1.15rem; }
  .logo-text-ext { display: inline; }
  .header-left { gap: 10px; }
  .header-right { gap: 8px; }
  .wallet-display { padding: 6px 12px; }
  .wallet-display span { font-size: 0.75rem; max-width: none; }
  .user-actions .btn { padding: 5px 10px; font-size: 0.75rem; }
  #app { grid-template-rows: 56px 1fr; }
  #mainContent { padding: 14px; padding-bottom: calc(var(--bottom-nav-height) + 14px); }
  .bottom-nav { height: var(--bottom-nav-height); }
  .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-card { min-height: 140px; }
  .game-card-content { padding: 16px 10px; }
  .game-card p { display: block; }
  .stats-row { gap: 10px; }
  .hero-carousel { height: 180px; }
  .games-grid-full { grid-template-columns: repeat(2, 1fr); }
  .wingo-stake-row { flex-direction: row; }
  .wingo-stake-input-wrap { flex: 0 0 100px; width: auto; }
  .wingo-quick-chips { width: auto; }
  .qr-panel { flex-direction: row; }
  .quick-amounts { grid-template-columns: repeat(3, 1fr); }
}

/* ----- Mobile proper (max 767px) ----- */
@media (max-width: 767px) {
  /* Sidebar: fixed overlay */
  #sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    z-index: 200;
    transition: none;
  }
  #sidebar.open { display: block; }
  .sidebar-overlay { display: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .sidebar-overlay.open { display: block; }
  .desktop-hidden { display: flex !important; }
}

/* ----- Tablet (768px - 991px) ----- */
@media (min-width: 768px) and (max-width: 991px) {
  #mainHeader { padding: 0 16px; }
  .logo { font-size: 1.25rem; }
  .logo-text-ext { display: inline; }
  .header-center { display: flex; max-width: 280px; margin: 0 12px; }
  #mainContent { padding: 18px; padding-bottom: calc(var(--bottom-nav-height) + 18px); }
  .game-grid { grid-template-columns: repeat(3, 1fr); }
  .casino-grid { grid-template-columns: repeat(3, 1fr); }
  .virtual-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(3, 1fr); }
  .hero-carousel { height: 220px; }
  .hero-slide h2 { font-size: 1.5rem; }
  .hero-slide p { font-size: 0.9rem; }
  .game-card { min-height: 160px; }
  .bottom-nav-item span { font-size: 0.6rem; }
  .games-grid-full { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Desktop (min 992px) ----- */
@media (min-width: 992px) {
  #app {
    grid-template-areas: "sidebar header" "sidebar main";
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: var(--header-height) 1fr;
    overflow: visible;
  }
  #sidebar {
    display: block;
    position: sticky;
    top: 0;
    left: auto;
    width: auto;
    transition: none;
    grid-area: sidebar;
  }
  #sidebar.open { display: block; left: auto; }
  .sidebar-overlay, .sidebar-overlay.open { display: none !important; }
  .menu-btn { display: none !important; }
  .bottom-nav { display: none !important; }
  #mainContent {
    padding: 24px;
    padding-bottom: 24px;
  }
  .header-center { display: flex; }
  .desktop-only { display: flex !important; }
  .desktop-hidden { display: none !important; }
  /* Reset mobile header */
  #mainHeader { padding: 0 24px; height: var(--header-height); overflow: visible; }
  .logo { font-size: 1.5rem; gap: 8px; }
  .logo-icon { width: 28px; height: 28px; }
  .logo-text-ext { display: inline; }
  .wallet-display { padding: 8px 16px; }
  .wallet-display span { font-size: 0.875rem; max-width: none; }
  .wallet-display i { font-size: 1rem; }
  .user-actions { gap: 8px; }
  .user-actions .btn { padding: 6px 14px; font-size: 0.8rem; }
  .games-grid-full { grid-template-columns: repeat(3, 1fr); }
  .game-cat-tabs { flex-wrap: wrap; }
  .admin-layout { grid-template-columns: 220px 1fr; }
}

/* ----- Large Desktop (min 1200px) ----- */
@media (min-width: 1200px) {
  .game-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .game-card { min-height: 200px; }
  .casino-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .virtual-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .games-grid-full { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Fix: constrain absolutely everything ----- */
#app, #mainHeader, #mainContent, .bottom-nav,
.game-grid, .casino-grid, .virtual-grid, .stats-row,
.hero-carousel, .match-card, .card, .modal,
.form-input, .form-select, .game-search-bar,
.wallet-balance-card, .deposit-step-content,
.wingo-round-panel, .bet-slip { box-sizing: border-box; }

/* Force app shell to never exceed viewport */
html, body { max-width: 100% !important; }
#app { max-width: 100% !important; overflow: hidden !important; }

/* Allow flex children to shrink below their content */
.header-left, .header-right, .wallet-display, .user-actions, .logo {
  min-width: 0;
  flex-shrink: 1;
}