/* css/responsive.css */

/*
  Responsive Design Breakpoints:
  - Small devices (phones, 0-640px)
  - Medium devices (tablets, 641px-1024px)
  - Large devices (desktops, 1025px-1400px+)

  Using a mobile-first approach.
*/

/* ===== GENERAL MOBILE OPTIMIZATIONS (0 - 768px) ===== */
@media (max-width: 768px) {
  /* Adjust base font size for better readability on smaller screens */
  html {
    font-size: 14px;
  }

  /* Reduce overall container padding */
  .container {
    padding: 0 var(--space-md);
  }

  /* Header adjustments for mobile */
  .header-content {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md); /* Smaller gap when stacked */
  }

  .main-nav {
    width: 100%;
    order: 3; /* Move navigation to bottom when stacked */
  }

  .nav-list {
    flex-wrap: wrap; /* Allow nav items to wrap */
    justify-content: center;
    gap: var(--space-md);
  }

  .nav-link {
    padding: var(--space-sm) var(--space-lg);
  }

  .header-controls {
    order: 2; /* Place controls below logo on small screens */
    margin-top: var(--space-sm);
  }

  .logo-group {
    order: 1;
    margin-bottom: var(--space-sm);
  }

  .site-title {
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  /* Section Headers */
  .section-title {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
    flex-direction: column; /* Stack icon and text for smaller titles */
    gap: var(--space-xs);
  }

  .section-title .title-icon {
    font-size: 1em; /* Keep icon size relative */
  }

  .section-subtitle {
    font-size: 0.95rem;
  }

  /* Button adjustments */
  .btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.95rem;
    min-height: 44px;
  }

  .btn-large {
    padding: var(--space-md) var(--space-xl);
    font-size: 1rem;
    min-height: 50px;
  }

  .btn-xl {
    padding: var(--space-lg) var(--space-2xl);
    font-size: 1.1rem;
    min-height: 56px;
  }

  .cta-actions {
    flex-direction: column; /* Stack CTA buttons */
  }

  .cta-actions .btn {
    width: 100%;
  }

  /* Card layouts */
  .features-grid,
  .stats-grid,
  .mission-cards,
  .team-grid,
  .tech-grid,
  .contact-info,
  .privacy-highlights,
  .data-categories,
  .third-party-services,
  .rights-grid,
  .personal-stats-grid,
  .hall-of-fame-grid,
  .strategies-grid,
  .mistakes-grid,
  .controls-grid,
  .powerups-grid,
  .game-summary-grid {
    grid-template-columns: 1fr; /* Single column layout for most grids */
  }

  .hero-stats {
    flex-direction: column; /* Stack hero stats */
    gap: var(--space-md);
  }

  .stat-card,
  .highlight-item,
  .data-category,
  .record-card,
  .strategy-item,
  .mistake-item,
  .control-category,
  .powerup-card,
  .summary-card {
    padding: var(--space-lg); /* Slightly smaller padding */
    text-align: left; /* Align text left in stacked cards */
  }

  .hero-stats .stat-item,
  .community-stats .stat-card {
    min-width: unset; /* Remove min-width for stacking */
  }

  .leaderboard-controls .controls-row {
    flex-direction: column;
    gap: var(--space-lg);
  }

  .filter-group {
    width: 100%;
    justify-content: space-between; /* Space out label and select */
  }

  .filter-select {
    flex-grow: 1; /* Allow select to fill space */
  }

  .your-rank {
    width: 100%;
    justify-content: center;
  }

  /* Game specific layouts */
  .main-game-area .container {
    flex-direction: column; /* Stack game layout elements */
    gap: var(--space-xl);
  }

  .game-layout {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .game-main {
    order: 1; /* Game canvas first */
    width: 100%;
  }

  .game-sidebar {
    width: 100%;
    order: 2; /* Sidebars below canvas */
    flex-direction: row; /* Turn sidebars into horizontal rows */
    flex-wrap: wrap; /* Allow content to wrap */
    justify-content: center;
    padding: var(--space-lg);
  }

  .game-sidebar section {
    width: 100%;
    padding-bottom: var(--space-md);
    border-bottom: 1px dashed var(--border-primary);
  }

  .game-sidebar section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .game-sidebar .section-title {
    justify-content: flex-start; /* Align titles left in horizontal sidebars */
    font-size: 1.2rem;
  }

  .game-sidebar .powerup-list,
  .game-sidebar .target-info,
  .game-sidebar .achievement-progress-list,
  .game-sidebar .stats-grid,
  .game-sidebar .level-progress,
  .game-sidebar .settings-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
  }

  .game-sidebar .powerup-section,
  .game-sidebar .target-section,
  .game-sidebar .achievements-mini,
  .game-sidebar .stats-section,
  .game-sidebar .level-section,
  .game-sidebar .quick-settings {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
  }

  .game-sidebar .stat-item.mini,
  .game-sidebar .setting-item.mini {
    width: calc(50% - var(--space-sm)); /* Two columns for mini-stats */
    padding: var(--space-sm);
  }

  .game-sidebar .stat-item.mini .stat-content {
    align-items: center;
  }

  .game-info-bottom {
    order: 3; /* Info tabs below sidebars */
  }

  .info-tabs {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .info-tab {
    flex-basis: auto; /* Allow tabs to size based on content */
    min-width: unset;
    padding: var(--space-sm) var(--space-md);
  }

  .info-tab-content {
    padding: var(--space-lg); /* Smaller padding for content */
  }

  .info-tab-content h3 {
    font-size: 1.3rem;
  }

  .powerup-info-grid,
  .controls-info-grid {
    grid-template-columns: 1fr;
  }

  .control-group-info {
    text-align: left;
  }

  /* Game Modals */
  .modal-content {
    max-width: 95%; /* Make modals almost full width */
    margin: var(--space-md); /* Add some margin from edges */
    max-height: 90vh; /* Allow more vertical space */
  }

  .modal-header,
  .modal-footer {
    padding: var(--space-md);
  }

  .modal-title {
    font-size: 1.5rem;
  }

  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .new-highscore {
    font-size: 1rem;
    padding: var(--space-md);
  }

  /* Help Page specific */
  .help-layout {
    flex-direction: column; /* Stack main content and sidebar */
    gap: var(--space-xl);
  }

  .help-main {
    order: 1;
    width: 100%;
    max-width: unset; /* Remove max-width */
  }

  .help-sidebar {
    order: 2;
    width: 100%;
    padding: var(--space-lg);
  }

  .quick-nav, .tutorial-video, .common-mistakes, .powerup-strategies {
    padding: var(--space-md); /* Adjust padding */
  }
}

/* ===== SMALL MOBILE DEVICES (0 - 480px) ===== */
@media (max-width: 480px) {
  html {
    font-size: 13px; /* Even smaller base font for very small screens */
  }

  .container {
    padding: 0 var(--space-sm);
  }

  /* Header and navigation */
  .header {
    padding: var(--space-sm) 0;
  }

  .site-title {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  .nav-list {
    flex-direction: column; /* Stack nav items vertically */
    gap: var(--space-sm);
    align-items: flex-start; /* Align text left */
  }

  .nav-link {
    width: 100%; /* Full width nav links */
    justify-content: flex-start;
  }

  .language-switcher,
  .theme-toggle {
    margin: 0 auto; /* Center these elements */
  }

  .header-stats {
    flex-direction: column; /* Stack game header stats vertically */
    gap: var(--space-sm);
  }

  .header-stats .stat-item {
    padding: var(--space-sm);
  }

  .stat-card .stat-number {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  /* CTA Sections */
  .cta-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }

  .cta-subtitle {
    font-size: 0.9rem;
  }

  /* Modals */
  .modal-content {
    margin: var(--space-sm);
    border-radius: var(--radius-lg);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-md);
  }

  .modal-title {
    font-size: 1.3rem;
  }

  .score-value {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .game-summary-grid, .pause-stats-grid {
    grid-template-columns: 1fr; /* Single column for game summary */
  }

  .settings-group-title {
    flex-direction: column; /* Stack title and icon */
    align-items: flex-start;
  }

  .setting-item {
    flex-direction: column; /* Stack settings controls */
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .setting-label {
    width: 100%;
    margin-bottom: var(--space-xs);
  }

  .setting-select,
  .setting-input[type="range"] {
    width: 100%;
    min-width: unset;
    text-align: left;
  }

  .volume-control,
  .sensitivity-control {
    flex-direction: column;
    align-items: flex-start;
  }

  .volume-value, .sensitivity-value {
    width: 100%;
    text-align: left;
    margin-top: var(--space-xs);
  }

  /* Mobile Controls (game.html) */
  .mobile-controls {
    display: block; /* Show mobile controls by default on small screens */
    margin-top: var(--space-xl);
  }

  .dpad-container {
    padding: var(--space-lg); /* Smaller d-pad padding */
  }

  .dpad-btn {
    width: 50px; /* Smaller d-pad buttons */
    height: 50px;
    font-size: 1.5rem;
  }

  .dpad-icon {
    width: 20px;
    height: 20px;
  }

  .dpad-center {
    width: 38px;
    height: 38px;
  }

  .touch-actions {
    flex-direction: column; /* Stack touch action buttons */
  }

  .touch-btn {
    width: 100%;
  }

  /* Footer adjustments */
  .footer-content {
    grid-template-columns: 1fr; /* Stack footer sections */
    gap: var(--space-lg);
  }
}

/* ===== MEDIUM DEVICES (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
  html {
    font-size: 15px; /* Slightly larger base font for tablets */
  }

  .container {
    padding: 0 var(--space-lg);
  }

  .header-content {
    flex-wrap: wrap; /* Allow content to wrap in header */
    justify-content: center;
    gap: var(--space-lg);
  }

  .main-nav {
    flex-basis: 100%; /* Nav takes full width */
    margin-top: var(--space-md);
  }

  .nav-list {
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  .nav-item {
    flex-grow: 1; /* Distribute nav items evenly */
  }

  .header-controls {
    margin-top: var(--space-md);
  }

  .game-layout {
    grid-template-columns: 1fr 2fr 1fr; /* Maintain 3 column layout for game */
    gap: var(--space-lg);
  }

  .game-sidebar {
    width: auto; /* Let grid handle width */
    padding: var(--space-md);
  }

  .game-sidebar section {
    flex-wrap: wrap; /* Allow sections in sidebar to wrap */
    justify-content: center;
  }

  .game-sidebar .section-title {
    font-size: 1.1rem;
  }

  .game-sidebar .stat-item.mini,
  .game-sidebar .setting-item.mini {
    flex-basis: 100%; /* Stack mini items in sidebar */
    text-align: center;
  }

  .info-tab {
    padding: var(--space-md) var(--space-lg);
  }

  .powerup-info-grid,
  .controls-info-grid {
    grid-template-columns: repeat(2, 1fr); /* Two columns for powerup info */
  }

  .help-layout {
    flex-direction: row; /* Keep sidebar next to main content */
    gap: var(--space-xl);
  }
}

/* ===== LARGE DEVICES (1025px and up) ===== */
@media (min-width: 1025px) {
  html {
    font-size: 17px; /* Larger base font for large screens */
  }

  .container {
    padding: 0 var(--space-xl);
  }

  .header-content {
    flex-direction: row; /* Ensure horizontal layout */
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .main-nav {
    flex-grow: 1;
    text-align: center;
  }

  .nav-list {
    justify-content: center;
    gap: var(--space-2xl);
  }

  .main-content {
    padding-top: var(--space-3xl); /* More top padding */
    padding-bottom: var(--space-3xl);
  }

  .section-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .section-subtitle {
    font-size: 1.25rem;
  }

  .btn {
    min-height: 52px;
  }

  .btn-large {
    min-height: 60px;
  }

  .btn-xl {
    min-height: 72px;
  }

  .hero-section {
    flex-direction: row;
    text-align: left;
    padding: var(--space-3xl) 0;
  }

  .hero-content {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3xl);
  }

  .hero-text {
    flex: 1;
    text-align: left;
    margin-bottom: 0;
  }

  .hero-visual {
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    margin-top: 0;
  }

  .hero-actions {
    justify-content: flex-start; /* Align buttons left in hero */
  }

  /* Specific game layout for large screens */
  .game-layout {
    display: grid;
    grid-template-columns: 250px 1fr 250px; /* Fixed width sidebars, flexible main */
    gap: var(--space-2xl);
    align-items: flex-start; /* Align items to the top */
  }

  .game-main {
    order: 2; /* Main game content in the middle */
  }

  .sidebar-left {
    order: 1;
  }

  .sidebar-right {
    order: 3;
  }

  .game-sidebar {
    width: 250px; /* Fixed width */
    position: sticky; /* Keep sidebars in view */
    top: calc(var(--z-header-height) + var(--space-xl)); /* Space below header */
    max-height: calc(100vh - var(--z-header-height) - var(--space-3xl)); /* Limit height */
    overflow-y: auto; /* Allow scrolling within sidebar */
    flex-direction: column; /* Stack content vertically */
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
  }

  .game-sidebar section {
    border-bottom: 1px dashed var(--border-primary);
    padding-bottom: var(--space-lg);
  }

  .game-sidebar section:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .game-sidebar .section-title {
    justify-content: flex-start;
    font-size: 1.15rem;
  }

  .game-sidebar .powerup-list,
  .game-sidebar .target-info,
  .game-sidebar .achievement-progress-list,
  .game-sidebar .stats-grid,
  .game-sidebar .level-progress,
  .game-sidebar .settings-list {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }

  .game-sidebar .stat-item.mini,
  .game-sidebar .setting-item.mini {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
  }

  .game-sidebar .stat-item.mini .stat-content {
    align-items: flex-start;
  }

  .mobile-controls-section {
    display: none !important; /* Hide mobile controls on large screens */
  }

  .help-layout {
    display: grid;
    grid-template-columns: 1fr 300px; /* Main content and sidebar */
    gap: var(--space-2xl);
    align-items: flex-start;
  }

  .help-main {
    order: 1;
  }

  .help-sidebar {
    order: 2;
    position: sticky;
    top: calc(var(--z-header-height) + var(--space-xl));
    max-height: calc(100vh - var(--z-header-height) - var(--space-3xl));
    overflow-y: auto;
  }

  /* Footer layout */
  .footer-content {
    grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
    text-align: left;
  }

  .footer-logo, .footer-links {
    justify-content: flex-start; /* Align footer content left */
  }
}

/* Fallback for header height in sticky calculation */
:root {
  --z-header-height: 80px; /* Approximate header height, adjust as needed */
}