/* ============================================
   WPMRace — Responsive Styles
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
  :root {
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.5rem;
    --fs-5xl: 3rem;
  }

  .container { padding: 0 var(--space-4); }
  .header { flex-wrap: wrap; gap: var(--space-3); }

  .mode-bar {
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .mode-group { flex-wrap: wrap; justify-content: center; }

  .test-area { padding: var(--space-6); min-height: 150px; }

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

  .result-card { padding: var(--space-6); }
  .result-actions { gap: var(--space-2); }

  .live-stats { gap: var(--space-4); }
}

/* Mobile */
@media (max-width: 480px) {
  :root {
    --fs-xl: 1.1rem;
    --fs-2xl: 1.25rem;
    --fs-3xl: 1.5rem;
    --fs-5xl: 2.5rem;
  }

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

  .logo-text { font-size: var(--fs-lg); }

  .mode-bar { gap: var(--space-2); }
  .mode-group { padding: 2px; }
  .mode-btn { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); }
  .mode-label { display: none; }

  .test-area { padding: var(--space-4); min-height: 130px; }

  .words-container { font-size: var(--fs-md); line-height: 2; }

  .result-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .result-stat-item { padding: var(--space-3); }
  .result-stat-value { font-size: var(--fs-lg); }

  .result-card { padding: var(--space-4); }

  .live-stats { gap: var(--space-3); }
  .live-stat-value { font-size: var(--fs-2xl); }

  .btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--fs-xs);
  }

  .header-actions { gap: var(--space-1); }
  .icon-btn { width: 36px; height: 36px; }

  .footer-links { flex-wrap: wrap; gap: var(--space-2); }
  .ad-container { padding: var(--space-2); margin-top: var(--space-4); }
  .ad-content { min-height: 75px; font-size: var(--fs-xs); padding: var(--space-2); }
}

/* Hover only on non-touch */
@media (hover: none) {
  .test-area:hover { border-color: var(--glass-border); }
  .test-area.focused { border-color: var(--accent); }
  .icon-btn:hover { transform: none; }
  .btn-primary:hover { transform: none; }
  .btn-secondary:hover { transform: none; }
  .result-stat-item:hover { transform: none; }
}