/* Mobile layout safeguards shared across picker home pages. */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .neo-nav.active, .nav-menu.active { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav-translate, .nav-translate:hover { transform: none !important; }
  .gt_black_overlay { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; margin: 0 !important; transform: none !important; z-index: 100004 !important; background: rgba(0, 0, 0, .58) !important; }
  .gt_white_content.notranslate { position: fixed !important; z-index: 100005 !important; width: calc(100vw - 2rem) !important; max-width: 420px !important; max-height: calc(100vh - 2rem) !important; top: 50vh !important; right: auto !important; bottom: auto !important; left: 50vw !important; margin: 0 !important; transform: translate(-50%, -50%) !important; border-radius: 14px !important; overflow: auto !important; box-sizing: border-box !important; }
  main, .home-container { min-width: 0; }
  /*
   * The header is fixed on mobile. Keep every page—not only hero pages—below it.
   * env() also accounts for devices with a top display cutout.
   */
  .neo-main {
    margin: 0 !important;
    padding: calc(80px + env(safe-area-inset-top, 0px) + 20px) 0 0 !important;
  }
  .home-container { margin: 0 !important; padding: 0 !important; border-radius: 0 !important; }
  .neo-hero { margin-top: 0 !important; }
  .neo-hero, .hero, .hero-section, .hero-content { padding: 2rem 1rem !important; }
  /* The fixed header clearance belongs to .neo-main.  Do not add it again
     inside each tool page, otherwise the tool heading is pushed far down. */
  .tool-page { padding: 2rem 1rem 3rem !important; }
  .tool-hero { padding-top: 0 !important; }
  .tool-hero-section { padding-inline: .5rem !important; }
  .neo-hero h1, .hero h1, .hero-section h1, .hero-content h1, .page-hero h1,
  .home-container h1 { font-size: clamp(1.9rem, 8vw, 2.8rem) !important; line-height: 1.12 !important; }
  .neo-hero p, .hero p, .hero-section p, .hero-content p, .home-container > p,
  .section-subtitle { font-size: 1rem !important; line-height: 1.6 !important; }
  .neo-text-box, .fancy-text-box { margin: 1rem .75rem !important; padding: 1.15rem !important; }
  .neo-text-box-title, .section-title { font-size: clamp(1.45rem, 6vw, 2rem) !important; line-height: 1.2 !important; }
  .neo-features-grid, .features-grid, .steps-grid, .trust-bar-inner, .cta-banner-inner,
  .tools-grid, .content-grid, .results-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .trust-bar-inner, .cta-banner-inner { gap: 1rem !important; }
  .trust-divider { display: none !important; }
  .step-card, .neo-card, .feature-card, .picker-card { min-width: 0; }
  .cta-banner, .how-it-works-section, .features-section { padding-inline: 1rem !important; }
  input, select, textarea, button { max-width: 100%; }

  /* Wheel tools: keep every control, card and canvas inside the viewport. */
  .tool-page, .tool-hero, .tool-hero-inner,
  .wheel-picker-widget, .wheel-split-grid, .wheel-stage-column,
  .wheel-stage-card, .wheel-canvas-container, .wheel-actions-bar,
  .wheel-top-bar, .wheel-top-actions, .wheel-top-buttons-row,
  .neo-card, .neo-card-body, .wheel-input-row {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .wheel-split-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; }
  .wheel-top-bar { padding: .75rem !important; align-items: stretch !important; }
  .wheel-top-actions, .wheel-top-buttons-row { width: 100% !important; flex-wrap: wrap !important; }
  .wheel-presets-pills { width: 100% !important; }
  .wheel-stage-card { padding: .75rem !important; }
  .wheel-canvas-container { width: min(100%, calc(100vw - 3.5rem)) !important; height: auto !important; }
  .wheel-input-row { flex-wrap: wrap !important; }
  .wheel-text-input { min-width: 0 !important; }
  .wheel-actions-bar { flex-wrap: wrap !important; }
  .wheel-actions-bar > * { min-width: 0 !important; }
  /* A full spin label and three quick actions cannot share a 375px row. */
  .wheel-actions-bar {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .wheel-btn-spin-hero {
    width: 100% !important;
    flex: none !important;
    padding: .9rem 1rem !important;
  }
  .wheel-quick-controls {
    width: 100%;
    justify-content: center;
  }
  .spin-key-hint { display: none; }
  .wheel-modal-card { max-width: calc(100vw - 2rem) !important; padding: 1.1rem !important; }

  /* Stopwatch digits must scale down instead of widening the page. */
  .timer-display-box,
  #stopwatchDisplay,
  #countdownDisplay {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem .35rem !important;
    font-size: clamp(1.55rem, 8.5vw, 2.5rem) !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  /* Match Tools and Login to the other bordered mobile sidebar items. */
  .neo-nav .neo-nav-dropdown-trigger,
  .neo-nav .neo-nav-button {
    border: 1px solid rgba(230, 0, 35, .22) !important;
    border-radius: 10px !important;
    background: #fffafa !important;
    color: #334155 !important;
    padding: .8rem 1rem !important;
    margin: 0 0 .5rem !important;
  }
  .neo-nav .neo-nav-button { color: #e60023 !important; }
  .neo-nav .neo-nav-dropdown-trigger:hover,
  .neo-nav .neo-nav-button:hover {
    border-color: #e60023 !important;
    background: #fff1f3 !important;
    color: #e60023 !important;
  }
}
@media (max-width: 420px) {
  .neo-hero, .hero, .hero-section, .hero-content { padding: 5.5rem .75rem !important; }
  .tool-page { padding: 1.5rem .75rem 2.5rem !important; }
  .tool-hero { padding-top: 0 !important; }
  .neo-hero h1, .hero h1, .hero-section h1, .hero-content h1, .page-hero h1,
  .home-container h1 { font-size: clamp(1.75rem, 9vw, 2.25rem) !important; }
  .neo-text-box, .fancy-text-box { margin-inline: .5rem !important; padding: 1rem !important; }
}