/* ===========================================
   Super Maths Hero - Responsive CSS
   iOS Native Design - Media Queries
   =========================================== */

/* ===== Base Mobile First (320px+) ===== */
/* Default styles in main.css and components.css */

/* ===== Combo Message Responsive Adjustments ===== */
@media screen and (max-height: 600px) {
  .combo-container {
    top: 18%;
  }
}

@media screen and (max-height: 500px) {
  .combo-container {
    top: 15%;
  }
}

/* ===== Stars Counter & Daily Challenge Responsive ===== */
@media screen and (max-width: 375px) {

  .stars-counter-home,
  .stars-counter-game {
    font-size: var(--font-size-footnote);
    padding: var(--space-xs) var(--space-sm);
  }

  .daily-challenge-card {
    padding: var(--space-sm);
    max-width: 280px;
  }

  .daily-challenge-icon {
    font-size: 1.2rem;
  }

  .daily-challenge-title {
    font-size: var(--font-size-footnote);
  }

  .daily-challenge-desc {
    font-size: var(--font-size-footnote);
  }

  .powerups-bar {
    gap: var(--space-xs);
    padding: var(--space-xs);
  }

  .powerup-btn {
    min-width: 50px;
    padding: var(--space-xs);
  }

  .powerup-btn .powerup-icon {
    font-size: 1.2rem;
  }
}

/* ===== Tablet Constraints (481px to 1023px) ===== */
/* Centered layout on tablets for app-like feel */
@media screen and (min-width: 481px) and (max-width: 1023px) {
  .home-container {
    max-width: 600px;
    margin: 0 auto;
  }

  .screen-content {
    max-width: 700px;
    margin: 0 auto;
  }

  .badges-screen-content {
    max-width: 100%;
    padding: 0 var(--space-xl);
  }

  .settings-scroll {
    max-width: 700px;
    margin: 0 auto;
  }
}

/* ===== All Mobile Phones (up to 480px) ===== */
@media screen and (max-width: 480px) {

  /* Settings screen - full width layout */
  #settings-screen .screen-content {
    padding: 0;
    max-width: 100%;
  }

  .settings-scroll {
    padding: var(--space-sm);
  }

  .screen-header-fixed,
  .screen-header-centered {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border-radius: var(--radius-lg);
  }

  /* Cards full width with proper padding */
  .settings-content .card {
    border-radius: var(--radius-lg);
    margin: 0;
  }

  /* Difficulty buttons responsive */
  .difficulty-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .difficulty-btn {
    flex: 1 1 calc(33.33% - var(--space-sm));
    min-width: 0;
    text-align: center;
    white-space: nowrap;
  }

  /* Timer options responsive grid */
  .timer-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: var(--space-sm);
    width: 100%;
  }

  .timer-btn {
    min-width: 0;
    padding: var(--space-sm) var(--space-xs);
  }

  /* Input method full width */
  .input-method-btn {
    min-width: 0;
  }

  /* Slider full width */
  .form-range {
    width: 100%;
  }

  /* Toggle full width */
  .toggle {
    width: 100%;
    justify-content: space-between;
  }

  /* Reset card */
  .card-danger {
    margin-bottom: var(--space-md);
  }
}

/* ===== iPhone SE / Small Phones (320-375px) ===== */
@media screen and (max-width: 375px) {
  :root {
    --font-size-hero: 36px;
    --font-size-large-title: 28px;
    --font-size-title1: 24px;
    --font-size-title2: 20px;
  }

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

  .problem-display {
    font-size: 32px;
    padding: var(--space-md);
  }

  .numpad {
    max-width: 240px;
    gap: 10px;
  }

  .numpad-btn {
    min-height: 48px;
    font-size: 24px;
  }

  .choice-btn {
    min-height: 54px;
    font-size: var(--font-size-body);
  }

  .btn-xl {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-title3);
  }

  .mode-card {
    padding: var(--space-md);
    min-height: 120px;
  }

  .mode-card .mode-icon {
    font-size: 2rem;
  }

  .badge {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }

  .stat-box {
    min-width: 60px;
    padding: var(--space-sm);
  }

  .stat-value {
    font-size: var(--font-size-title3);
  }

  /* Settings screen adaptations */
  .settings-scroll {
    padding: var(--space-sm);
  }

  .settings-content {
    gap: var(--space-sm);
  }

  .settings-content .card {
    padding: var(--space-sm);
  }

  .card-title {
    font-size: var(--font-size-caption1);
    margin-bottom: var(--space-xs);
  }

  /* Difficulty buttons - full width grid */
  .difficulty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  .difficulty-btn {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-footnote);
  }

  /* Operations grid - single column */
  .operations-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .operation-checkbox {
    padding: var(--space-sm);
  }

  .operation-label {
    font-size: var(--font-size-footnote);
  }

  #select-all-ops {
    width: 100%;
    font-size: var(--font-size-footnote);
  }

  /* Timer buttons - compact grid */
  .timer-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }

  .timer-btn {
    padding: var(--space-sm);
    font-size: var(--font-size-footnote);
    min-width: auto;
  }

  /* Input method buttons */
  .input-method-btn {
    padding: var(--space-sm);
    font-size: var(--font-size-footnote);
  }

  /* Range slider */
  .range-value {
    font-size: var(--font-size-title2);
  }

  /* Toggle switches */
  .toggle-label {
    font-size: var(--font-size-subhead);
  }

  /* Back button compact */
  .btn-back {
    padding: var(--space-xs);
  }

  .btn-back-text {
    display: none;
  }

  .screen-header-fixed .screen-title {
    font-size: var(--font-size-subhead);
  }

  /* Home screen */
  .home-container {
    gap: var(--space-sm);
  }

  .home-stats {
    padding: var(--space-sm);
    max-width: 280px;
  }

  .mascot-img {
    width: clamp(100px, 30vw, 160px);
  }

  .btn-play {
    max-width: 280px;
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-title3);
  }

  .home-actions {
    max-width: 280px;
  }
}

/* ===== iPhone Standard (376-414px) ===== */
@media screen and (min-width: 376px) and (max-width: 414px) {
  :root {
    --font-size-hero: 42px;
  }

  .problem-display {
    font-size: 36px;
  }

  .numpad {
    max-width: 260px;
  }

  /* Settings screen adaptations */
  .settings-scroll {
    padding: var(--space-sm) var(--space-md);
  }

  .settings-content {
    gap: var(--space-md);
  }

  .settings-content .card {
    padding: var(--space-md);
  }

  /* Difficulty buttons - full width */
  .difficulty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  .difficulty-btn {
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--font-size-subhead);
  }

  /* Operations grid - 2 columns */
  .operations-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .operation-checkbox {
    padding: var(--space-sm);
  }

  .operation-label {
    font-size: var(--font-size-footnote);
  }

  #select-all-ops {
    width: 100%;
  }

  /* Timer buttons grid */
  .timer-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
  }

  .timer-btn {
    padding: var(--space-sm);
    font-size: var(--font-size-footnote);
    min-width: auto;
  }

  /* First timer button (Désactivé) on its own row */
  .timer-options .timer-btn:first-child {
    grid-column: 1 / -1;
  }
}

/* ===== iPhone Plus / Max (415-480px) ===== */
@media screen and (min-width: 415px) and (max-width: 480px) {
  :root {
    --font-size-hero: 44px;
  }

  .problem-display {
    font-size: 38px;
  }

  .numpad {
    max-width: 300px;
  }

  .choices-grid {
    max-width: 360px;
  }
}

/* ===== Small Tablets / Large Phones (481-767px) ===== */
@media screen and (min-width: 481px) and (max-width: 767px) {
  :root {
    --font-size-hero: 48px;
  }

  .screen {
    padding: var(--space-lg);
    max-width: 540px;
    margin: 0 auto;
  }

  .problem-display {
    font-size: 44px;
  }

  .numpad {
    max-width: 320px;
  }

  .choices-grid {
    max-width: 400px;
  }

  .mode-card {
    padding: var(--space-lg);
    min-height: 150px;
  }
}

/* ===== iPad Portrait (768-1023px) ===== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  :root {
    --font-size-hero: 56px;
    --font-size-large-title: 38px;
    --font-size-title1: 32px;
  }

  html {
    font-size: 17px;
  }

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

  .problem-display {
    font-size: 52px;
    padding: var(--space-xl);
  }

  .numpad {
    max-width: 360px;
    gap: var(--space-md);
  }

  .numpad-btn {
    font-size: 32px;
  }

  .choices-grid {
    max-width: 460px;
    gap: var(--space-md);
  }

  .choice-btn {
    font-size: var(--font-size-title1);
    padding: var(--space-lg);
  }

  .mode-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .mode-card {
    min-height: 180px;
  }

  .badge {
    width: 88px;
    height: 88px;
    font-size: 2.5rem;
  }

  .stat-box {
    min-width: 100px;
    padding: var(--space-md);
  }

  .stat-value {
    font-size: var(--font-size-title1);
  }

  /* Mascot larger on iPad */
  .mascot-image,
  .mascot-img {
    max-width: 280px;
  }

  /* Home container iPad - centered app-like layout */
  .home-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-xl);
  }

  .home-stats {
    max-width: 450px;
  }

  .home-actions {
    max-width: 450px;
  }

  .btn-play {
    max-width: 450px;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-size-title2);
  }

  /* Badges page iPad - centered */
  .badges-screen-content {
    max-width: 700px;
    margin: 0 auto;
  }

  .badges-summary {
    padding: var(--space-xl);
  }

  .badges-progress-circle {
    width: 120px;
    height: 120px;
  }

  .badges-unlocked {
    font-size: 48px;
  }

  .badge-category-card {
    padding: var(--space-lg);
  }

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

  .badge-card {
    padding: var(--space-md);
  }

  .badge-card .badge {
    width: 72px;
    height: 72px;
    font-size: 2rem;
  }
}

/* ===== iPad Landscape / Small Desktop (1024-1279px) ===== */
@media screen and (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --font-size-hero: 56px;
    --font-size-large-title: 40px;
  }

  html {
    font-size: 17px;
  }

  .screen {
    padding: var(--space-xl) var(--space-xxl);
    max-width: 100%;
  }

  /* Per-screen content widths */
  .screen-content {
    max-width: 900px;
    margin: 0 auto;
  }

  #game-screen .screen-content {
    max-width: 700px;
  }

  #results-screen .screen-content {
    max-width: 800px;
  }

  #badges-screen .screen-content {
    max-width: 100%;
  }

  /* Desktop app background */
  #app {
    background: var(--gradient-home);
  }

  .game-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
  }

  .game-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .game-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .problem-display {
    font-size: 48px;
  }

  .numpad {
    max-width: 360px;
  }

  .choices-grid {
    max-width: 480px;
  }

  .mode-cards-grid {
    max-width: 900px;
    margin: 0 auto;
  }

  /* Settings 2-column improvements */
  #settings-screen .screen-content {
    max-width: 900px;
  }

  .settings-content {
    gap: var(--space-xl);
  }

  /* Results stats row on desktop */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-lg);
    width: 100%;
    max-width: 700px;
  }

  /* Hover effects for desktop - subtle */
  .btn:hover:not(:disabled) {
    opacity: 0.9;
  }

  .card:hover {
    transform: translateY(-2px);
  }

  /* Home screen - full width layout */
  .home-container {
    max-width: 100%;
    padding: var(--space-xxl) var(--space-xl);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-xxl);
  }

  .home-header {
    width: 100%;
    order: 1;
  }

  .home-mascot {
    flex: 0 0 auto;
    order: 2;
  }

  .mascot-img {
    max-width: 280px;
  }

  .home-stats {
    max-width: 450px;
    padding: var(--space-lg);
    order: 3;
  }

  .home-actions {
    width: 100%;
    max-width: 450px;
    order: 4;
  }

  .btn-play {
    max-width: 450px;
    width: 100%;
    font-size: var(--font-size-title2);
  }

  /* Settings page desktop */
  .settings-scroll {
    max-width: 700px;
    margin: 0 auto;
  }

  /* Badges page desktop - full width */
  .badges-screen-content {
    max-width: 100%;
    padding: 0 var(--space-xl);
  }

  .badges-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .badges-summary {
    padding: var(--space-xl);
  }

  .badges-progress-circle {
    width: 140px;
    height: 140px;
  }

  .badges-unlocked {
    font-size: 56px;
  }

  .badge-category-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .badge-card .badge {
    width: 80px;
    height: 80px;
    font-size: 2.2rem;
  }
}

/* ===== Desktop (1280px+) ===== */
@media screen and (min-width: 1280px) {
  :root {
    --font-size-hero: 64px;
    --font-size-large-title: 48px;
    --font-size-title1: 36px;
  }

  html {
    font-size: 18px;
  }

  .screen {
    padding: var(--space-xxl) clamp(40px, 5vw, 80px);
    max-width: 100%;
  }

  .screen-content {
    max-width: 1000px;
  }

  #game-screen .screen-content {
    max-width: 750px;
  }

  #results-screen .screen-content {
    max-width: 900px;
  }

  #settings-screen .screen-content {
    max-width: 1000px;
  }

  .game-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: var(--space-xxl);
    max-width: 1100px;
    margin: 0 auto;
  }

  .problem-display {
    font-size: 60px;
    padding: var(--space-xl);
  }

  .numpad {
    max-width: 380px;
    gap: var(--space-md);
  }

  .numpad-btn {
    font-size: 32px;
  }

  .choices-grid {
    max-width: 520px;
    gap: var(--space-md);
  }

  .choice-btn {
    font-size: var(--font-size-title1);
    padding: var(--space-lg);
  }

  .mode-cards-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    max-width: 1000px;
    margin: 0 auto;
  }

  .mode-card {
    min-height: 220px;
    padding: var(--space-xl);
  }

  .badge {
    width: 100px;
    height: 100px;
    font-size: 3rem;
  }

  /* Home screen - side by side layout */
  .home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-xxl) clamp(40px, 5vw, 80px);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px;
  }

  .home-header {
    width: 100%;
    order: 1;
  }

  .home-mascot {
    flex: 0 0 auto;
    order: 2;
  }

  .mascot-image,
  .mascot-img {
    max-width: 320px;
  }

  .home-stats {
    max-width: 500px;
    padding: var(--space-xl);
    order: 3;
    flex: 1;
    min-width: 350px;
  }

  .stats-card-title {
    font-size: var(--font-size-subhead);
  }

  .stat-number {
    font-size: var(--font-size-title1);
  }

  .home-actions {
    width: 100%;
    max-width: 800px;
    order: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .btn-play {
    max-width: 500px;
    padding: var(--space-lg) var(--space-xxl);
    font-size: var(--font-size-title2);
  }

  .secondary-actions {
    gap: var(--space-lg);
  }

  .btn-secondary-action {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-body);
  }

  /* Settings page desktop */
  .settings-scroll {
    max-width: 800px;
    margin: 0 auto;
  }

  /* Badges page - full width grid */
  .badges-screen-content {
    max-width: 100%;
  }

  .badges-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .badges-summary {
    padding: var(--space-xxl);
  }

  .badges-progress-circle {
    width: 180px;
    height: 180px;
  }

  .badges-unlocked {
    font-size: 72px;
  }

  .badge-category-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }

  .badge-card {
    padding: var(--space-md);
  }

  .badge-card .badge {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
  }
}

/* ===== Large Desktop (1440px+) ===== */
@media screen and (min-width: 1440px) {
  :root {
    --font-size-hero: 72px;
    --font-size-large-title: 52px;
    --font-size-title1: 40px;
  }

  .screen {
    padding: var(--space-xxl) clamp(60px, 6vw, 120px);
    max-width: 100%;
  }

  .screen-content {
    max-width: 1100px;
  }

  #settings-screen .screen-content {
    max-width: 1100px;
  }

  .game-layout {
    grid-template-columns: 1fr 480px;
    max-width: 1200px;
  }

  /* Home container - side by side with centered max-width */
  .home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(32px, 4vh, 60px) clamp(40px, 5vw, 100px);
    gap: 80px;
  }

  .mascot-img {
    max-width: 380px;
  }

  .home-stats {
    max-width: 550px;
    min-width: 400px;
    padding: var(--space-xl) var(--space-xxl);
  }

  .stat-number {
    font-size: 42px;
  }

  .home-actions {
    max-width: 900px;
  }

  .btn-play {
    max-width: 550px;
    font-size: var(--font-size-title1);
    padding: var(--space-xl) var(--space-xxl);
  }

  .btn-secondary-action {
    padding: var(--space-lg) var(--space-xl);
  }

  /* Settings page */
  .settings-scroll {
    max-width: 1000px;
  }

  /* Mode selection */
  .mode-cards-grid {
    max-width: 1100px;
    gap: var(--space-xxl);
  }

  .mode-card {
    min-height: 260px;
    padding: var(--space-xxl);
  }

  .mode-icon {
    font-size: 4rem;
  }

  .mode-title {
    font-size: var(--font-size-title2);
  }

  /* Badges page - 3 column grid */
  .badges-screen-content {
    max-width: 100%;
  }

  .badges-content {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }

  .badges-progress-circle {
    width: 200px;
    height: 200px;
  }

  .badges-unlocked {
    font-size: 80px;
  }

  .badge-category-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  .badge-card .badge {
    width: 88px;
    height: 88px;
    font-size: 2.75rem;
  }
}

/* ===== Extra Large Desktop (1680px+) ===== */
@media screen and (min-width: 1680px) {
  .screen {
    padding: var(--space-xxl) clamp(80px, 8vw, 160px);
  }

  .home-container {
    max-width: 1400px;
    padding: clamp(40px, 4vh, 70px) clamp(60px, 6vw, 140px);
    gap: 100px;
  }

  .mascot-img {
    max-width: 420px;
  }

  .home-stats {
    max-width: 600px;
    min-width: 450px;
  }

  .home-actions {
    max-width: 1000px;
  }

  .btn-play {
    max-width: 600px;
  }

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

  .badge-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .settings-scroll {
    max-width: 1100px;
  }

  .mode-cards-grid {
    max-width: 1300px;
  }
}

/* ===== Ultra Wide (1920px+) ===== */
@media screen and (min-width: 1920px) {
  .screen {
    padding: var(--space-xxl) clamp(100px, 10vw, 240px);
  }

  .home-container {
    max-width: 1500px;
    padding: clamp(48px, 5vh, 80px) clamp(80px, 8vw, 200px);
  }

  .mascot-img {
    max-width: 480px;
  }

  .home-stats {
    max-width: 700px;
  }

  .badges-content {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xxl);
  }

  .settings-scroll {
    max-width: 1200px;
  }
}

/* ===== Landscape Orientation for Mobile ===== */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .screen {
    padding: var(--space-sm);
    min-height: auto;
  }

  .home-screen .mascot-image {
    max-width: 100px;
  }

  .game-screen {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }

  .problem-display {
    font-size: 28px;
    padding: var(--space-sm);
  }

  .numpad {
    max-width: 180px;
  }

  .numpad-btn {
    font-size: var(--font-size-title3);
  }

  .choices-grid {
    max-width: 260px;
  }

  .choice-btn {
    padding: var(--space-sm);
    font-size: var(--font-size-title3);
  }

  /* Hide non-essential elements in landscape */
  .landscape-hide {
    display: none;
  }
}

/* ===== iPad Landscape Specific ===== */
@media screen and (min-width: 1024px) and (max-height: 768px) and (orientation: landscape) {
  .screen {
    padding: var(--space-md);
  }

  .game-layout {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== Touch Device Detection ===== */
@media (hover: none) and (pointer: coarse) {

  /* Remove hover effects on touch devices */
  .btn:hover:not(:disabled) {
    opacity: 1;
    transform: none;
  }

  .card:hover {
    transform: none;
  }

  /* Ensure 44pt minimum touch targets */
  .btn {
    min-height: 44px;
  }

  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Toggle optimized for touch */
  .toggle-slider {
    width: 51px;
    height: 31px;
  }

  .toggle-slider::before {
    width: 27px;
    height: 27px;
  }

  .toggle-input:checked+.toggle-slider::before {
    transform: translateX(20px);
  }

  /* Numpad optimized for touch */
  .numpad-btn {
    min-height: 56px;
  }
}

/* ===== High Resolution / Retina Displays ===== */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

  /* Crisp hairline borders on retina */
  .ios-card-row:not(:last-child),
  .modal-header,
  .card-header,
  .card-footer {
    border-width: 0.5px;
  }
}

/* ===== Dark Mode Support ===== */
/* Only apply system dark mode when user hasn't forced a specific theme */
/* This matches the forced dark mode style from components.css */
@media (prefers-color-scheme: dark) {
  html:not(.light-mode):not(.dark-mode) {
    color-scheme: dark;

    /* Dark mode variables - More vibrant and depth */
    --bg-primary: #1A1A24;
    --bg-secondary: #12121A;
    --bg-grouped: #12121A;
    --bg-tertiary: #242432;

    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.85);
    --text-tertiary: rgba(235, 235, 245, 0.55);
    --text-quaternary: rgba(235, 235, 245, 0.3);

    --ios-fill: rgba(140, 140, 160, 0.25);
    --ios-fill-secondary: rgba(140, 140, 160, 0.2);
    --ios-fill-tertiary: rgba(140, 140, 160, 0.15);
    --ios-fill-quaternary: rgba(140, 140, 160, 0.1);

    --ios-separator: rgba(100, 100, 120, 0.3);
    --ios-separator-opaque: #38384A;

    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(176, 136, 249, 0.1);
    --shadow-elevated: 0 6px 20px rgba(0, 0, 0, 0.5);

    /* Dark mode gradients - More vibrant and depth */
    --gradient-home: linear-gradient(135deg, #1A1A2E 0%, #2D1B4E 50%, #16213E 100%);
    --gradient-game: linear-gradient(135deg, #1A2A2E 0%, #2A2040 50%, #162431 100%);
    --gradient-badges: linear-gradient(135deg, #2A2A1E 0%, #3D2B5E 50%, #1A2129 100%);
    --gradient-settings: linear-gradient(135deg, #2D1B3E 0%, #152238 100%);

    /* Keep accent colors vibrant in dark mode */
    --accent-purple: #C4A8FF;
    --accent-pink: #FF9FC4;
    --accent-blue: #7CC5FF;
    --accent-green: #7EEEB4;
    --accent-yellow: #FFE066;
    --accent-orange: #FFC466;
    --accent-red: #FF9999;
  }

  html:not(.light-mode):not(.dark-mode) body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  /* Screen backgrounds */
  html:not(.light-mode):not(.dark-mode) .screen,
  html:not(.light-mode):not(.dark-mode) #home-screen,
  html:not(.light-mode):not(.dark-mode) #mode-screen,
  html:not(.light-mode):not(.dark-mode) #results-screen {
    background: var(--gradient-home);
  }

  html:not(.light-mode):not(.dark-mode) #settings-screen {
    background: var(--gradient-settings);
  }

  html:not(.light-mode):not(.dark-mode) #badges-screen {
    background: var(--gradient-badges);
  }

  html:not(.light-mode):not(.dark-mode) #game-screen {
    background: var(--gradient-game);
  }

  /* Card styles */
  html:not(.light-mode):not(.dark-mode) .card {
    background: rgba(44, 44, 46, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  html:not(.light-mode):not(.dark-mode) .home-stats {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(255, 224, 102, 0.1) 100%);
    border-color: rgba(255, 224, 102, 0.3);
  }

  html:not(.light-mode):not(.dark-mode) .stats-card-title {
    color: var(--text-secondary);
  }

  html:not(.light-mode):not(.dark-mode) .stat-divider {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Buttons */
  html:not(.light-mode):not(.dark-mode) .btn-outline {
    border-color: var(--ios-separator);
    color: var(--text-primary);
    background: rgba(44, 44, 46, 0.6);
  }

  html:not(.light-mode):not(.dark-mode) .btn-secondary-action {
    background: rgba(44, 44, 46, 0.9);
    color: var(--text-primary);
  }

  /* Modals */
  html:not(.light-mode):not(.dark-mode) .modal {
    background: var(--bg-secondary);
  }

  html:not(.light-mode):not(.dark-mode) .modal-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  /* Game elements */
  html:not(.light-mode):not(.dark-mode) .numpad-btn {
    background: rgba(44, 44, 46, 0.9);
    color: var(--text-primary);
  }

  html:not(.light-mode):not(.dark-mode) .choice-btn {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(176, 136, 249, 0.1) 100%);
    border-color: rgba(176, 136, 249, 0.3);
    color: var(--text-primary);
  }

  html:not(.light-mode):not(.dark-mode) .problem-display {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(176, 136, 249, 0.1) 50%, rgba(126, 238, 180, 0.1) 100%);
    border-color: rgba(176, 136, 249, 0.3);
  }

  /* Navigation */
  html:not(.light-mode):not(.dark-mode) .header-bar,
  html:not(.light-mode):not(.dark-mode) .ios-nav,
  html:not(.light-mode):not(.dark-mode) .screen-header-fixed,
  html:not(.light-mode):not(.dark-mode) .screen-header-centered {
    background: rgba(28, 28, 30, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Toggle slider */
  html:not(.light-mode):not(.dark-mode) .toggle-slider {
    background-color: #39393D;
  }

  /* Mode cards */
  html:not(.light-mode):not(.dark-mode) .mode-card {
    background: rgba(36, 36, 50, 0.9);
    border-color: rgba(176, 136, 249, 0.2);
  }

  html:not(.light-mode):not(.dark-mode) .mode-card.card-success {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(126, 238, 180, 0.15) 100%);
  }

  html:not(.light-mode):not(.dark-mode) .mode-card.card-hero {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(124, 197, 255, 0.15) 100%);
  }

  html:not(.light-mode):not(.dark-mode) .mode-card.card-primary {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(255, 196, 102, 0.15) 100%);
  }

  /* Title colors stay vibrant */
  html:not(.light-mode):not(.dark-mode) .title-super {
    color: var(--accent-orange);
  }

  html:not(.light-mode):not(.dark-mode) .title-maths {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  html:not(.light-mode):not(.dark-mode) .title-hero {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Play button */
  html:not(.light-mode):not(.dark-mode) .btn-play {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 50%, var(--accent-yellow) 100%);
    box-shadow: 0 6px 20px rgba(196, 168, 255, 0.4);
  }

  /* Badges page */
  html:not(.light-mode):not(.dark-mode) .badges-progress-circle {
    background: linear-gradient(135deg, rgba(44, 44, 46, 0.9) 0%, rgba(255, 224, 102, 0.2) 100%);
    border-color: rgba(255, 224, 102, 0.4);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category {
    background: rgba(44, 44, 46, 0.9);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-card {
    background: rgba(44, 44, 46, 0.95);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-card .badge-category-header {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-card .category-name {
    color: var(--text-primary);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-card .category-progress {
    background: rgba(255, 255, 255, 0.1);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-title {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
  }

  html:not(.light-mode):not(.dark-mode) .badge-category-grid {
    background: rgba(44, 44, 46, 0.9);
  }

  html:not(.light-mode):not(.dark-mode) .badge-card .badge {
    background: rgba(60, 60, 67, 0.6);
  }

  html:not(.light-mode):not(.dark-mode) .badge-card:not(.locked) .badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  }

  html:not(.light-mode):not(.dark-mode) .badge-card .badge-name {
    color: var(--text-primary);
  }

  html:not(.light-mode):not(.dark-mode) .badge-card .badge-desc {
    color: var(--text-secondary);
  }

  /* Characters */
  html:not(.light-mode):not(.dark-mode) .character-card {
    background: rgba(44, 44, 46, 0.9);
  }

  /* Daily Challenge */
  html:not(.light-mode):not(.dark-mode) .daily-challenge-card {
    background: linear-gradient(135deg, rgba(30, 25, 45, 0.98) 0%, rgba(45, 35, 65, 0.95) 100%);
    border: 2px solid rgba(176, 136, 249, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-header {
    color: #FFFFFF;
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-title {
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-desc {
    color: rgba(255, 255, 255, 0.95);
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-counter {
    color: rgba(255, 255, 255, 0.9);
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-progress {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-status.in-progress {
    background: rgba(255, 217, 61, 0.9);
    color: #4a3c00;
  }

  html:not(.light-mode):not(.dark-mode) .daily-challenge-status.completed {
    background: rgba(126, 238, 180, 0.9);
    color: #1a4d2e;
  }

  html:not(.light-mode):not(.dark-mode) .character-card.selected {
    background: rgba(52, 199, 89, 0.2);
  }

  html:not(.light-mode):not(.dark-mode) .character-card.affordable {
    background: rgba(255, 149, 0, 0.2);
  }

  /* Progress bar */
  html:not(.light-mode):not(.dark-mode) .progress.xp-bar {
    background: rgba(255, 255, 255, 0.1);
  }

  /* Combo messages */
  html:not(.light-mode):not(.dark-mode) .combo-message {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }

  /* Settings specific */
  html:not(.light-mode):not(.dark-mode) .difficulty-btn,
  html:not(.light-mode):not(.dark-mode) .timer-btn,
  html:not(.light-mode):not(.dark-mode) .pause-btn,
  html:not(.light-mode):not(.dark-mode) .dark-mode-btn {
    background: rgba(44, 44, 46, 0.8);
    border-color: rgba(176, 136, 249, 0.2);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox {
    background: linear-gradient(135deg, rgba(36, 36, 50, 0.95) 0%, rgba(176, 136, 249, 0.15) 100%);
    border-color: rgba(176, 136, 249, 0.3);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox:hover {
    border-color: rgba(176, 136, 249, 0.5);
  }

  html:not(.light-mode):not(.dark-mode) .operation-label {
    color: var(--text-primary);
  }

  /* Auto dark mode operation checkbox checked states */
  html:not(.light-mode):not(.dark-mode) .operation-checkbox:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(102, 222, 147, 0.25) 0%, rgba(126, 238, 180, 0.15) 100%);
    border-color: var(--accent-green);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="+"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(102, 222, 147, 0.25) 0%, rgba(126, 238, 180, 0.15) 100%);
    border-color: var(--accent-green);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="-"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(255, 153, 153, 0.25) 0%, rgba(255, 133, 133, 0.15) 100%);
    border-color: var(--accent-red);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="×"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(124, 197, 255, 0.25) 0%, rgba(100, 181, 246, 0.15) 100%);
    border-color: var(--accent-blue);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="÷"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(255, 196, 102, 0.25) 0%, rgba(255, 179, 71, 0.15) 100%);
    border-color: var(--accent-orange);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="½"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(255, 159, 196, 0.25) 0%, rgba(255, 143, 177, 0.15) 100%);
    border-color: var(--accent-pink);
  }

  html:not(.light-mode):not(.dark-mode) .operation-checkbox[data-op="x"]:has(.operation-input:checked) {
    background: linear-gradient(135deg, rgba(196, 168, 255, 0.25) 0%, rgba(176, 136, 249, 0.15) 100%);
    border-color: var(--accent-purple);
  }

  html:not(.light-mode):not(.dark-mode) .range-value {
    background: rgba(44, 44, 46, 0.8);
  }
}

/* ===== Print Styles ===== */
@media print {
  .screen {
    display: block !important;
  }

  .btn,
  .numpad,
  .modal-overlay,
  .toast-container {
    display: none !important;
  }

  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===== Safe Area Insets (Notch phones) ===== */
@supports (padding: env(safe-area-inset-top)) {

  .ios-nav,
  .header-bar {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .screen {
    padding-left: calc(var(--space-md) + env(safe-area-inset-left));
    padding-right: calc(var(--space-md) + env(safe-area-inset-right));
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  }

  .modal {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .toast-container {
    top: calc(var(--space-lg) + env(safe-area-inset-top));
  }
}

/* ===== Grid Layouts ===== */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Responsive grid */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-md);
}

@media screen and (min-width: 768px) {
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* ===== Container Widths ===== */
.container-sm {
  max-width: 400px;
  margin: 0 auto;
}

.container-md {
  max-width: 540px;
  margin: 0 auto;
}

.container-lg {
  max-width: 720px;
  margin: 0 auto;
}

.container-xl {
  max-width: 960px;
  margin: 0 auto;
}

/* ===== Desktop Hover States ===== */
@media (min-width: 1024px) and (hover: hover) {
  .mode-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
  }

  .badge-card:hover {
    transform: scale(1.05);
  }

  .btn-secondary-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .operation-checkbox:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-sm);
  }

  .character-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .numpad-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
  }

  .choice-btn:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
  }

  .daily-challenge-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
  }
}

/* ===== Desktop macOS Layout ===== */
/* (max-width constraints moved to per-screen rules below) */

/* ===== iPad Game Layout ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .problem-display {
    font-size: 64px;
    padding: var(--space-xl) var(--space-xxl);
  }

  .numpad {
    max-width: 340px;
  }

  .numpad-btn {
    min-height: 60px;
    font-size: var(--font-size-title3);
  }

  .choices-grid {
    max-width: 420px;
  }

  .choice-btn {
    min-height: 60px;
    font-size: var(--font-size-title3);
  }

  .mascot-img,
  .mascot-game-img {
    max-width: 220px;
  }
}

/* ===== Settings & Mode 2-column grid (768px+) ===== */
@media (min-width: 768px) {
  .settings-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  /* Full-width cards */
  .settings-content > .card-danger,
  .settings-content > .card:has(.characters-grid) {
    grid-column: 1 / -1;
  }

  /* Mode select: horizontal cards */
  .mode-cards-grid {
    flex-direction: row;
  }

  .mode-card {
    flex: 1;
    min-height: 180px;
  }
}

/* ===== Desktop Keyboard Hints ===== */
@media (min-width: 1024px) and (hover: hover) {
  .numpad .btn-submit::after {
    content: 'Entrée';
    display: block;
    font-size: 9px;
    opacity: 0.5;
    font-weight: 400;
    margin-top: 2px;
  }

  .numpad .btn-clear::after {
    content: 'Suppr';
    display: block;
    font-size: 9px;
    opacity: 0.5;
    font-weight: 400;
    margin-top: 2px;
  }

  #pause-btn::after {
    content: ' (Esc)';
    font-size: 0.75em;
    opacity: 0.6;
  }
}