/* ================================================================
   BEYOND THE PHONE — the rest of "any device"
   -----------------------------------------------------------------
   responsive-orientation.css handles a phone turned sideways.
   This file rounds out the other ends of the size spectrum so the
   app holds together everywhere in between too: foldables and very
   small/narrow phones, and large desktop or ultrawide monitors.
   Loaded last (after screens.css) so these additive rules can win
   the cascade for selectors screens.css also sets unconditionally.
   ================================================================ */

/* --- foldables & very narrow phones (Galaxy Fold cover screen,
   iPhone SE/5-width devices, split-screen multitasking) --- */
@media(max-width:359px){
  .app{padding-left:var(--sp-3);padding-right:var(--sp-3)}
  .hero h1{font-size:clamp(28px,9vw,36px);max-width:100%}
  .hero-sub{font-size:13.5px}
  .hero-cta{gap:var(--sp-2)}
  .btn{padding:11px 16px;font-size:13px}
  .academy-h{font-size:22px}
  .academy-sub{font-size:13.5px}
  .oq-options{max-width:100%}
  .oq-ask{font-size:22px}
  .chip{padding:10px 14px;font-size:13px}
  .chip-tray{gap:8px}
  .stage-pills .pill{padding:5px 10px;font-size:9.5px}
  .term-reveal{font-size:36px}
  .world-reward-card{padding:24px 16px 18px}
  .world-reward-stats{grid-template-columns:1fr}
  .world-reward-stats>div{justify-content:flex-start}
}

/* --- large desktops / ultrawide monitors: keep the ledger from
   feeling lost in empty space without changing its proportions --- */
@media(min-width:1900px){
  .app{max-width:1680px}
  .hero h1{font-size:clamp(46px,4.6vw,76px)}
  .hero-sub{font-size:18.5px}
  .learning-shell{max-width:1640px;gap:28px}
  .academy-grid{gap:var(--sp-6)}
  .world-reward-card{width:min(760px,calc(100vw - 34px))}
}
@media(min-width:2400px){
  .app{max-width:1880px}
  html{font-size:17px}
}

/* Very large / high-density displays sometimes report a device pixel
   ratio that makes hairline borders vanish; nudge them back to a
   crisp single pixel rather than a sub-pixel line that anti-aliases
   away. */
@media(min-width:1900px) and (min-resolution:1.5dppx){
  .card,.record-card,.statement-card,.mastery-panel{border-width:1px}
}