/* OVERRIDE v8/v9 // phone responsiveness — loaded AFTER style.css + alarm.css.
   The quiz panel/inputs are desktop-sized by default; these overrides fit a narrow
   portrait phone (Android Samsung ~360-412px, iPhone 11 ~414px). Setup screen
   (alarm.css) is already fluid; this mainly reflows the reused quiz DOM. */

@media (max-width: 640px) {
  /* --- quiz panel --- */
  #panel { width: 96%; max-width: 96%; padding-bottom: 18px; }
  #topbar { padding: 10px 14px; font-size: 11px; letter-spacing: 2px; }
  #clock { font-size: 16px; }
  #body { padding: 14px 16px 0; }
  h1, #title { font-size: 22px; letter-spacing: 0.5px; }
  .sub { font-size: 12px; margin-bottom: 12px; }
  #prog { font-size: 11px; margin: 8px 0 14px; }
  .dot { width: 22px; margin-right: 6px; }
  .cat { font-size: 11px; }
  #qtext { font-size: 24px; min-height: 34px; margin-bottom: 14px; }
  /* stack the answer box + submit button vertically so nothing overflows */
  #ansrow { margin: 6px 0 4px; }
  input#ans { width: 100%; box-sizing: border-box; font-size: 22px; display: block; }
  #go { width: 100%; box-sizing: border-box; margin: 10px 0 0; display: block; }
  #hint { font-size: 11px; }
  #msg { font-size: 15px; margin-top: 10px; }

  /* --- victory screen --- */
  #done { padding: 22px 16px 10px; }
  #done h1 { font-size: 34px; }
  #quote { font-size: 17px; }
  #stamp { font-size: 13px; letter-spacing: 2px; }

  /* --- fake error dialog: fit the screen instead of overflowing --- */
  #err { width: 92vw; left: 4vw; margin-left: 0; top: 16%; }

  /* --- crt theme: shrink the bezel inset so the panel isn't squeezed --- */
  .t-crt #crtwrap { top: 8px; left: 8px; right: 8px; bottom: 8px; border-radius: 26px/22px; }
  .t-crt #panel { width: 96%; }

  /* --- setup screen polish --- */
  #ovr { padding-left: 14px; padding-right: 14px; }
  #ovr .logo { font-size: 26px; letter-spacing: 4px; }
  #ovr input[type=time] { font-size: 46px; }
  #ovr .cd .num { font-size: 64px; }
  #ovr .chip { font-size: 13px; padding: 8px 10px; }
}

/* landscape / very short phones */
@media (max-height: 500px) and (max-width: 900px) {
  #qtext { font-size: 20px; min-height: 26px; }
  h1, #title { font-size: 18px; }
  #topbar { padding: 6px 12px; }
  #body { padding: 8px 14px 0; }
}