/* ===== Responsive v3 ===== */

@media (max-width: 768px) {
  .mode-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto 20px; }
  .hero-title { font-size: 30px; letter-spacing: 6px; }
  .hero-subtitle { font-size: 12px; }
  .dial-knob { width: 60px; height: 60px; }
}

@media (max-width: 480px) {
  .page { padding: 12px; }
  .scanlines::after { display: none; }
  .hero { padding: 24px 0 16px; }
  .hero-title { font-size: 24px; letter-spacing: 4px; }
  .nav-bar { padding: 8px 12px; }
  .nav-title { font-size: 12px; letter-spacing: 3px; }

  .show-color { width: min(240px, 75vw); height: min(240px, 75vw); }
  .guess-preview { width: min(260px, 88vw); height: 170px; }
  .neon-slider { height: 20px; }
  .neon-slider::-webkit-slider-thumb { width: 40px; height: 40px; }
  .neon-slider::-moz-range-thumb { width: 40px; height: 40px; }
  .compare-swatch { width: min(110px, 32vw); height: min(110px, 32vw); }
  .compare-score { font-size: 36px; }

  .summary-actions { flex-direction: column; }
  .summary-actions .neon-btn { width: 100%; }

  .lang-switch { font-size: 9px; padding: 3px 8px; }
}