/* ═════════════════════════════════════════════════════════════════════════
   GIGS PESA CASH — MOBILE NATIVE APP RESPONSIVENESS & COMPACT FIT STYLESHEET
   Ensures perfect fit on mobile phones, prevents zoom-out/overflow, and
   scales captions, cards, grids, and game arenas like a native mobile app.
   ═════════════════════════════════════════════════════════════════════════ */

/* 1. Universal Layout & Viewport Lock */
html, body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  -webkit-text-size-adjust: 100% !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

*, *::before, *::after {
  box-sizing: inherit !important;
}

/* Fix any container width leaks */
img, svg, video, canvas, iframe {
  max-width: 100% !important;
}

/* 2. Mobile Screen Adjustments (max-width: 768px) */
@media screen and (max-width: 768px) {
  /* Container Padding Compactness */
  body {
    padding-bottom: 80px !important; /* Space for Mobile Bottom Nav */
  }

  .container, 
  .dashboard-container, 
  .login-wrapper, 
  .main-content,
  .game-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header & Navigation Adjustments */
  .header-container {
    padding: 10px 12px !important;
  }
  .brand-name {
    font-size: 1.15rem !important;
  }
  .logo {
    height: 34px !important;
    width: auto !important;
  }

  /* Casino Hero Banner Fit */
  .casino-hero {
    min-height: auto !important;
    padding: 16px 14px !important;
    border-radius: 16px !important;
    margin-bottom: 14px !important;
  }
  .casino-hero-content {
    max-width: 100% !important;
    padding: 0 !important;
  }
  .casino-hero h1 {
    font-size: 1.35rem !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
  .casino-hero p {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  .casino-hero-kicker {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
  }
  .casino-btn {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
  }

  /* Member & Wallet Card Fit */
  .member-card, .profile-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }
  .member-card .profile-avatar {
    width: 68px !important;
    height: 68px !important;
    font-size: 1.8rem !important;
    margin: 0 auto !important;
  }
  .wallet-hero {
    flex-direction: column !important;
    align-items: center !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .wallet-hero .wallet-amount {
    font-size: 1.5rem !important;
  }
  .wallet-hero-actions {
    width: 100% !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .wallet-chip {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
    justify-content: center !important;
  }

  /* Stats Grid Compactness */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
  .stat-value {
    font-size: 1.25rem !important;
    margin: 2px 0 !important;
  }
  .stat-label {
    font-size: 0.72rem !important;
  }

  /* Featured Games Grid (2-Column Compact Layout) */
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .feature-card {
    min-height: 94px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }
  .fc-badge {
    font-size: 0.55rem !important;
    padding: 2px 6px !important;
    top: 6px !important;
    right: 6px !important;
  }
  .fc-emoji {
    font-size: 1.6rem !important;
  }
  .fc-name {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-top: 4px !important;
  }
  .fc-sub {
    font-size: 0.65rem !important;
    opacity: 0.8 !important;
  }

  /* Quick Action Menu Grid (2-Column Compact Layout) */
  .menu-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .menu-grid > div {
    font-size: 0.76rem !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }
  .menu-grid > div i {
    font-size: 0.9rem !important;
  }

  /* Casino All Games Arena Grid (3-Column Compact Layout) */
  .arena-grid, .cg-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }
  .arena-grid > div, .cg-card {
    min-height: 76px !important;
    padding: 8px 4px !important;
    border-radius: 10px !important;
    font-size: 0.65rem !important;
    text-align: center !important;
  }
  .arena-grid > div i, .cg-card .cg-icon {
    font-size: 1.4rem !important;
    margin-bottom: 2px !important;
  }

  /* Cards, Modals, Forms & Inputs Fit */
  .white-card, .login-card, .panel-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    margin-bottom: 12px !important;
  }
  .white-card h3, .white-card h4, .modal-title {
    font-size: 1.1rem !important;
    margin-bottom: 10px !important;
  }
  .modal-content {
    width: 95% !important;
    padding: 16px 14px !important;
    margin: 10px auto !important;
    border-radius: 16px !important;
  }

  input, select, textarea, .form-control {
    font-size: 0.88rem !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-radius: 8px !important;
  }

  /* Game Canvas & Controls Scaling */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
  .game-controls, .controls-card {
    padding: 10px !important;
    gap: 8px !important;
  }
  .bet-btn, .btn-action {
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    border-radius: 10px !important;
  }
}

/* 3. Small Phone Adjustments (max-width: 480px) */
@media screen and (max-width: 480px) {
  .casino-hero h1 {
    font-size: 1.2rem !important;
  }
  .featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .feature-card {
    min-height: 84px !important;
    padding: 8px 6px !important;
  }
  .fc-name {
    font-size: 0.75rem !important;
  }
  .fc-sub {
    font-size: 0.6rem !important;
  }
  .stat-value {
    font-size: 1.1rem !important;
  }
  .wallet-hero .wallet-amount {
    font-size: 1.35rem !important;
  }
}

/* 4. Aviator Mobile App Compact Layout & Auto-Fit (0 Overflow Guaranteed) */
@media screen and (max-width: 900px) {
  .aviator-container {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .canvas-card {
    height: 210px !important;
    border-radius: 12px !important;
  }
  .multiplier-overlay {
    font-size: 2.6rem !important;
  }
  .telemetry-overlay {
    top: 6px !important;
    left: 8px !important;
    gap: 6px !important;
    font-size: 0.6rem !important;
  }
  .dual-controls-wrapper {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .bet-panel-card {
    padding: 8px !important;
    gap: 6px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .bet-panel-header {
    font-size: 0.72rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .panel-title {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }
  .auto-cashout-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 2px 5px !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    max-width: 65% !important;
    overflow: hidden !important;
    border-radius: 6px !important;
  }
  .auto-cashout-label {
    font-size: 0.62rem !important;
  }
  .auto-cashout-input {
    width: 36px !important;
    min-width: 30px !important;
    max-width: 40px !important;
    font-size: 0.75rem !important;
    padding: 0 1px !important;
    text-align: center !important;
  }
  .bet-input-row {
    width: 100% !important;
  }
  .bet-input-box {
    width: 100% !important;
  }
  .bet-input {
    font-size: 0.95rem !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  .chips-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .chip-btn {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 5px 1px !important;
    font-size: 0.68rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 6px !important;
  }
  .bet-item {
    padding: 4px 6px !important;
    font-size: 0.7rem !important;
  }
}

@media screen and (max-width: 480px) {
  .canvas-card {
    height: 190px !important;
  }
  .multiplier-overlay {
    font-size: 2.2rem !important;
  }
  .auto-cashout-label {
    font-size: 0.6rem !important;
  }
  .auto-cashout-input {
    width: 32px !important;
    font-size: 0.72rem !important;
  }
  .chip-btn {
    font-size: 0.64rem !important;
    padding: 5px 0px !important;
  }
}

@media screen and (max-width: 360px) {
  .bet-panel-card {
    padding: 6px 4px !important;
  }
  .auto-cashout-input {
    width: 30px !important;
    font-size: 0.75rem !important;
  }
  .panel-title {
    font-size: 0.7rem !important;
  }
}

/* 5. Laptop & Wide Screen Desktop Optimization (min-width: 992px) */
@media screen and (min-width: 992px) {
  .dashboard-container {
    max-width: 1400px !important;
    padding: 28px 40px !important;
  }

  /* Header Top Bar Spacing */
  .header-container {
    padding: 14px 40px !important;
  }

  .brand-name {
    font-size: 1.5rem !important;
  }

  .logo {
    height: 44px !important;
  }

  .action-buttons-container {
    gap: 16px !important;
  }

  .profile-avatar-mini {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.15rem !important;
  }

  /* Profile & Member Cards Desktop Grid */
  .member-card, .profile-card {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 24px 32px !important;
    border-radius: 20px !important;
  }

  /* Dashboard Stats Grid Desktop scaling */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  .stat-card {
    padding: 18px 20px !important;
    border-radius: 16px !important;
  }

  .stat-value {
    font-size: 1.7rem !important;
  }

  /* Featured Casino Games Desktop Grid (4-Column Layout) */
  .featured-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
  }

  .feature-card {
    min-height: 130px !important;
    padding: 18px 16px !important;
  }

  .fc-emoji {
    font-size: 2.2rem !important;
  }

  .fc-name {
    font-size: 1.05rem !important;
  }

  /* Casino All Games Arena Desktop Grid (6 to 8 Column Layout) */
  .arena-grid, .cg-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 14px !important;
  }

  .arena-grid > div, .cg-card {
    min-height: 105px !important;
    padding: 14px 10px !important;
    font-size: 0.82rem !important;
  }

  .arena-grid > div i, .cg-card .cg-icon {
    font-size: 2.2rem !important;
  }

  /* Quick Action Menu Desktop Grid (4 Column Layout) */
  .menu-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
  }

  .menu-grid > div {
    font-size: 0.92rem !important;
    padding: 14px 16px !important;
  }
}

/* Large Laptop Screens (min-width: 1400px) */
@media screen and (min-width: 1400px) {
  .arena-grid, .cg-grid {
    grid-template-columns: repeat(8, 1fr) !important;
  }
}