/**
 * Clean Market Ghana - Responsive Stylesheet
 * Version 1.1.0
 * Supports: Desktop (1366x768), Tablets (768x1024), Mobile (360x800+)
 */

/* ===== Large Desktop (1920+) ===== */
@media (min-width: 1600px) {
  #game-container {
    max-width: 1400px;
  }

  .dashboard-stats {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ===== Standard Desktop (1366x768) ===== */
@media (min-width: 1024px) and (max-width: 1599px) {
  #game-container {
    max-width: 1366px;
  }
}

/* ===== Small Desktop / Large Tablet (1024x768) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  .dashboard-stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .dashboard-middle {
    flex-direction: column;
  }

  .dashboard-character {
    flex: auto;
  }

  .sorting-bins {
    grid-template-columns: repeat(4, 1fr);
  }

  .shop-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inspection-market {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Desktop (≥769px): viewport-locked container, touch hidden ===== */
@media (min-width: 769px) {
  #game-container {
    height: 100vh;
    overflow: hidden;
  }

  .game-screen {
    min-height: 0;
  }

  .sanitation-touch-controls.active {
    display: none;
  }
}

/* ===== Mobile & Tablet (≤768px) ===== */
@media (max-width: 768px) {

  /* === Container: natural scroll on mobile === */
  #game-container {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  /* === Screens: grow to fit content, page scrolls naturally === */
  .game-screen {
    flex: none;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: visible;
    padding: 12px;
  }

  /* === Sanitation screen: fills viewport for gameplay === */
  .screen-sanitation {
    height: 100vh;
    height: 100dvh;
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  /* === Canvas: prevent browser scroll/zoom === */
  #sanitation-canvas {
    touch-action: none;
    width: 100% !important;
    max-width: 100%;
    height: auto;
  }

  /* === Breadcrumb compact === */
  .breadcrumb-bar {
    font-size: 0.75rem;
    padding: 4px 10px;
    min-height: 24px;
  }

  /* === Splash === */
  .splash-title { font-size: 1.8rem; }
  .splash-subtitle { font-size: 1rem; }
  .splash-logo { width: 140px; height: 140px; }

  /* === Menu === */
  .menu-title { font-size: 1.6rem; }
  .menu-buttons { max-width: 100%; }
  .btn { padding: 10px 20px; font-size: 0.95rem; }
  .btn-action { font-size: 1rem; padding: 12px 20px; }

  /* === Remove center-justify on tall screens so content scrolls naturally === */
  .screen-main-menu,
  .screen-setup,
  .screen-introduction {
    justify-content: flex-start;
    padding-top: 24px;
  }

  /* === Dashboard === */
  .dashboard-header { padding: 8px 12px; }
  .dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .stat-card { padding: 8px 6px; }
  .stat-value { font-size: 0.95rem; }
  .stat-label { font-size: 0.7rem; }
  .dashboard-middle {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
  }
  .market-map { min-height: 200px; padding: 12px; }
  .market-visual { height: 180px; }
  .dashboard-character { flex: auto; padding: 12px; }

  /* === Dashboard Actions stacked === */
  .dashboard-actions {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }
  .btn-sanitation-primary { font-size: 1.1rem; padding: 12px 20px; }

  /* === Sorting === */
  .sorting-bins { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .sorting-bin { padding: 8px; }
  .sorting-item { padding: 16px; min-width: 140px; }

  /* === Shop / Report / Inspection === */
  .shop-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .inspection-market { grid-template-columns: 1fr; }

  /* === Difficulty === */
  .difficulty-options { flex-direction: column; }

  /* === Screen title === */
  .screen-title { font-size: 1.3rem; }

  /* === HUD === */
  .hud-row { flex-wrap: wrap; gap: 4px; }
  .hud-feedback { font-size: 0.75rem; max-height: 30px; }
  .hud-objective { font-size: 0.7rem; }
  .minimap { width: 100px; height: 66px; }

  /* === Touch controls: smaller on mobile === */
  .touch-dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
  }
  .touch-dpad-btn {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 1.2rem;
  }
  .touch-action-btn { padding: 8px 12px; font-size: 0.8rem; }

  /* === Character select === */
  .char-select-grid { flex-direction: column; gap: 10px; }
  .char-select-card { padding: 12px; }

  /* === Market zones === */
  .market-zone { font-size: 0.65rem; padding: 4px; }
}

/* ===== Small Phone (≤480px) ===== */
@media (max-width: 480px) {
  html { font-size: 14px; }

  .game-screen { padding: 8px; }

  /* === Breadcrumb === */
  .breadcrumb-bar { font-size: 0.7rem; padding: 3px 8px; min-height: 22px; }

  /* === Splash === */
  .splash-title { font-size: 1.5rem; }
  .splash-subtitle { font-size: 0.85rem; }
  .splash-logo { width: 110px; height: 110px; }
  .splash-logo-text { font-size: 1.4rem; }

  /* === Menu === */
  .menu-title { font-size: 1.3rem; }
  .menu-buttons { max-width: 100%; }
  .btn { padding: 10px 14px; font-size: 0.9rem; }
  .btn-action { font-size: 0.85rem; padding: 10px 14px; }

  /* === Dashboard === */
  .dashboard-header {
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 6px 10px;
  }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .stat-card { padding: 6px 4px; }
  .stat-value { font-size: 0.85rem; }
  .stat-label { font-size: 0.65rem; }
  .stat-bar { height: 4px; }
  .market-map { min-height: 160px; padding: 8px; }
  .market-visual { height: 140px; }
  .dashboard-character { padding: 10px; }
  .character-avatar { width: 48px; height: 48px; font-size: 1.2rem; }

  .dashboard-actions { flex-direction: column; gap: 6px; padding: 10px; }
  .btn-sanitation-primary { font-size: 1rem; padding: 12px 16px; }

  /* === Sorting === */
  .sorting-bins { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .sorting-bin { padding: 6px; }
  .bin-icon { font-size: 1.5rem; }
  .bin-name { font-size: 0.65rem; }
  .bin-label { display: none; }
  .sorting-item { padding: 12px; min-width: 100px; }
  .sorting-item-icon { font-size: 2rem; }
  .sorting-item-name { font-size: 0.95rem; }

  .choice-text { font-size: 0.85rem; }
  .shop-grid { grid-template-columns: 1fr; }
  .report-grid { grid-template-columns: 1fr; }
  .inspection-market { grid-template-columns: 1fr; }
  .difficulty-options { flex-direction: column; }

  .intro-panel { padding: 20px; }
  .intro-icon { font-size: 2rem; }
  .intro-text { font-size: 0.95rem; }
  .final-score-number { font-size: 2rem; }
  .rank-icon { font-size: 2.5rem; }
  .modal-dialog { width: 95%; padding: 16px; }

  .notification { max-width: 220px; padding: 10px 14px; font-size: 0.8rem; }
  #notification-container { top: 8px; right: 8px; }
  .principle-card { flex-direction: column; text-align: center; }
  .objective-number { width: 28px; height: 28px; font-size: 0.8rem; }
  .screen-actions { flex-direction: column; gap: 8px; }

  /* === HUD compact === */
  .sanitation-hud { font-size: 0.75rem; padding: 4px 6px; }
  .hud-objective { font-size: 0.65rem; }
  .hud-feedback { font-size: 0.7rem; max-height: 24px; }
  .minimap { display: none; }

  /* === Touch controls smaller === */
  .sanitation-touch-controls { padding: 6px 10px; }
  .touch-dpad {
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 40px);
    gap: 3px;
  }
  .touch-dpad-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1rem;
  }
  .touch-action-btn { padding: 7px 10px; font-size: 0.75rem; }

  .market-zone { font-size: 0.55rem; padding: 2px; }
  .setup-form { padding: 20px; }
}

/* ===== Very Small Phone (≤360px) ===== */
@media (max-width: 360px) {
  html { font-size: 13px; }
  .breadcrumb-bar { font-size: 0.65rem; padding: 2px 6px; min-height: 20px; }
  .sorting-bins { grid-template-columns: repeat(2, 1fr); }
  .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 3px; }

  .touch-dpad {
    grid-template-columns: repeat(3, 36px);
    grid-template-rows: repeat(3, 36px);
    gap: 2px;
  }
  .touch-dpad-btn {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 0.9rem;
  }
  .touch-action-btn { padding: 6px 8px; font-size: 0.7rem; }
}

/* ===== Print ===== */
@media print {
  * {
    color: black !important;
    background: white !important;
    box-shadow: none !important;
  }

  .game-screen {
    display: block !important;
    padding: 0 !important;
  }

  .btn, .dashboard-actions, .screen-actions,
  .menu-extras, #notification-container, #modal-overlay,
  .rain-overlay {
    display: none !important;
  }
}