/* ── Responsive layout ──────────────────────────────────────────────────
   Breakpoints (progressive, mobile-first):
   Phone portrait   < 480px wide                   (default)
   Phone landscape  max-height 500px + landscape
   Tablet portrait  ≥ 600px wide
   Tablet landscape ≥ 900px wide, < 1280px
   Desktop 16:9     ≥ 1280px wide
   Desktop 3:4      ≥ 1024px wide, tall (height ≥ 900px)
────────────────────────────────────────────────────────────────────── */

/* ── PHONE LANDSCAPE — compact column, scrollable if needed ── */
@media (max-height: 500px) and (orientation: landscape) {
  /* Stronger gradient to fill wide background */
  body::before {
    background: radial-gradient(70% 100% at 50% 50%, rgba(172,212,207,.22), transparent 68%);
  }

  body { justify-content: flex-start; overflow-y: auto; }

  #app { padding-bottom: 44px; }

  /* Compact screen — override inline styles from views */
  .screen {
    gap: 8px !important;
    padding: 10px 20px 8px !important;
    justify-content: flex-start !important;
    max-width: 540px;
    /* Subtle card so content stands out on wide bg */
    background: rgba(255,255,255,.38);
    border-radius: 20px;
    margin-top: 8px;
    box-shadow: 0 8px 32px -8px rgba(80,100,120,.10);
  }

  .big   { font-size: 1.5rem; }
  .title { font-size: 1.25rem; }
  .sub   { font-size: .88rem; max-width: 100%; }
  .lead  { font-size: .88rem; }
  .fine  { font-size: .78rem; }

  .scale { gap: 6px; }
  .opt   { padding: 9px 14px; }
  .opt .lab { font-size: .93rem; }
  .opt .bead { width: 13px; height: 13px; }

  .orbWrap { width: min(32vw, 150px); }
  .go { width: 88px; height: 88px; font-size: .9rem; }

  .pill { padding: 10px 18px; font-size: .93rem; }
  .col  { gap: 7px; }
  .dots { display: none; }

  .help { bottom: 4px; font-size: .75rem; }
  .backbtn { top: 4px; width: 36px; height: 36px; }
}

/* ── TABLET PORTRAIT ≥ 600px ── */
@media (min-width: 600px) {
  .screen {
    max-width: 480px; gap: 32px;
    /* On larger screens, center instead of flex-end (mobile thumb-zone hack) */
    justify-content: center !important;
    padding-bottom: 52px !important;
  }
  .big    { font-size: 2.2rem; }
  .title  { font-size: 1.7rem; }
  .sub    { font-size: 1.05rem; max-width: 380px; }
  .opt .lab { font-size: 1.1rem; }
  .go     { width: 168px; height: 168px; font-size: 1.1rem; }
}

/* ── TABLET LANDSCAPE / SMALL DESKTOP ≥ 900px ── */
@media (min-width: 900px) {
  .screen { max-width: 520px; }

  /* Subtle card lift on wider screens */
  .screen {
    background: rgba(255,255,255,.28);
    border-radius: 32px;
    box-shadow: 0 24px 80px -20px rgba(80,100,120,.10);
    padding: 48px 40px 64px;
  }
}

/* ── DESKTOP 16:9 ≥ 1280px ── */
@media (min-width: 1280px) {
  body::before {
    /* Wider gradient to fill horizontal space */
    background: radial-gradient(55% 55% at 50% 44%, rgba(172,212,207,.12), transparent 70%);
  }

  .screen {
    max-width: 560px;
    padding: 52px 48px 72px;
  }

  .big   { font-size: 2.4rem; }
  .title { font-size: 1.85rem; }
  .sub   { font-size: 1.1rem; max-width: 400px; }
  .scale { max-width: 440px; }
  .go    { width: 176px; height: 176px; }

  /* Larger orb on desktop */
  .orbWrap { width: min(40vw, 340px); }
}

/* ── DESKTOP 3:4 — tall narrow (e.g., 1024×1366 iPad Pro landscape-ish) ── */
@media (min-width: 1024px) and (min-height: 900px) {
  .screen { max-width: 540px; gap: 38px; }
  .big    { font-size: 2.3rem; }
}

/* ── ULTRA-WIDE ≥ 1600px — two-column hint background ── */
@media (min-width: 1600px) {
  body::before {
    background: radial-gradient(38% 48% at 50% 44%, rgba(172,212,207,.10), transparent 68%);
  }
  .screen { max-width: 580px; }
}

/* ── CARD on screen — shared layout token for ≥ 900px ── */
@media (min-width: 900px) {
  .card { max-width: 420px; }
}

/* ── SAFE AREA adjustments for notched landscape phones ── */
@media (max-height: 500px) and (orientation: landscape) {
  .screen { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
}