/* MOBILE — narrow viewport rules. Keeps desktop aesthetic untouched, overrides
   only what would overflow or be too small to tap on a phone (<720px wide). */
@media (max-width: 720px){
  #title h1{font-size:2.1rem}
  #title .sub{font-size:.95rem;max-width:90%}
  #briefing .brief-text{font-size:.92rem;max-width:90%}
  .demo-panel{width:min(300px, 90vw);height:160px}
  .brief-task-name{font-size:1.15rem}
  .brief-instruction{font-size:.75rem;max-width:90%}
  /* N-back display */
  #nback-display{font-size:3.6rem;min-height:80px}
  .nback-btn,.signal-btn{width:72px;height:72px}
  /* Focus dot canvas — let it shrink */
  #focus-canvas{width:min(380px, 90vw) !important;height:240px !important}
  /* Pattern grid */
  .grid-4{width:min(280px, 80vw)}
  /* Phrase shell */
  .phrase-shell{max-width:92vw}
  .phrase-display{font-size:1.15rem}
  .phrase-input{width:min(320px, 90vw)}
  .phrase-choice{font-size:.8rem;padding:.6rem .8rem}
  /* Signal display */
  .signal-display{font-size:3.4rem;min-height:70px}
  .signal-target-symbol{font-size:1.4rem}
  /* Rate screen */
  #rate-screen h2{font-size:1.25rem}
  .rate-options{gap:.6rem;flex-wrap:wrap;justify-content:center;max-width:100%}
  .rate-btn{width:30%;min-width:96px;padding:.85rem .75rem}
  .rate-btn .rate-icon{font-size:1.4rem}
  /* Reveal + profile scroll inside the screen container (the .screen is
     position:absolute inside #game{overflow:hidden}, so page-level scroll
     is impossible — overflow:auto here gives a working scroll on mobile). */
  #reveal-screen,#profile-screen{padding:1.25rem 1.25rem 2rem;max-height:none;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .reveal-title{font-size:1rem}
  .calibration-badge{font-size:.65rem;padding:.32rem .65rem}
  .score-row{flex-wrap:wrap;gap:.6rem}
  .score-box{min-width:30%;flex:1 1 30%;padding:.6rem}
  .score-val{font-size:1.3rem}
  .profile-stats{grid-template-columns:1fr 1fr;gap:8px}
  .p-stat{padding:.75rem .5rem}
  .p-stat-val{font-size:1.5rem}
  .profile-header h2{font-size:1.4rem}
  .profile-type-desc{font-size:.8rem;max-width:92%}
  .weakness-name{width:90px;font-size:.7rem}
  .cadence-bridge{padding:1.1rem;margin-top:1rem}
  .bridge-quote{font-size:.85rem;line-height:1.6}
  #share-canvas{max-width:100%;height:auto}
  /* HUD shrinks + reflows */
  .hud-stack{top:auto;bottom:.5rem;right:.5rem;left:.5rem;flex-direction:row;align-items:center;justify-content:flex-end;gap:.5rem}
  .score-chip{padding:.25rem .55rem;font-size:.75rem}
  /* Briefing demo panel margin */
  #briefing{padding-top:3.5rem}
  .round-indicator{margin-bottom:1rem}
  .btn{font-size:.8rem;padding:.7rem 1.5rem}
  /* Tap targets ≥44px so thumbs can actually hit them. Padding + font bumped
     so the visible label fills the hitbox instead of leaving a tiny inner blob. */
  .restart-game,.restart-round,.skip-round,.mute-toggle{
    min-height:44px;min-width:44px;font-size:11px;padding:8px 10px;
    display:inline-flex;align-items:center;justify-content:center;
  }
  /* Pin a width to skip + restart so the "Sure?" confirm text doesn't grow the
     button and shift the layout out from under the user's second tap. Width is
     sized for the longer label, so the small label just sits centered. */
  .skip-round{min-width:118px}
  .restart-round{min-width:140px}
  /* Above-distraction layer so .notif (z-index 50) can't visually obscure the
     action buttons even when it overlaps the top-right zone. */
  .mute-toggle,.restart-round,.skip-round{position:relative;z-index:60}
  /* Inner button row inside the task header: wrap so the timer-bar can drop to
     a new line on narrow phones instead of being pushed off-screen, and give
     buttons more breathing room from each other to reduce mis-taps. */
  .task-header > div{flex-wrap:wrap;gap:.5rem .75rem;justify-content:flex-end}
  /* Header is taller now (wrapped row); push task content down so it doesn't
     collide with the second row of controls. */
  .task-center{padding-top:9rem}
}
/* Very small phones */
@media (max-width: 380px){
  #nback-display{font-size:3rem}
  .signal-display{font-size:2.8rem}
  .grid-4{gap:6px}
  .rate-btn{width:45%}
}