/* touch devices: swap the control hint */
@media (hover: none) and (pointer: coarse) {
  .only-key { display: none; }
  .only-touch { display: inline; }
}

/* short viewports (landscape phones, small embeds) */
@media (max-height: 640px) {
  :root { --dash-h: 72px; }
  .speed b { font-size: 34px; }
  .screen { gap: 9px; padding-top: 23dvh; }
  .title { font-size: clamp(40px, 13vh, 64px); }
  .btn-main { padding: 12px 16px; font-size: 15px; }
  .stats dd, .result dd { font-size: 14px; }
  .result .wide dd { font-size: 26px; }
  .hint { display: none; }
  .screen-crash { padding-top: 3dvh; }
  .zeus-big { width: min(52%, 220px); }
}

@media (max-height: 480px) {
  .tagline, .stats { display: none; }
}

/* desktop: frame the portrait stage like an arcade cabinet */
@media (min-width: 720px) {
  .stage { box-shadow: 0 0 0 1px rgba(232,184,74,.35), 0 0 120px rgba(80,120,255,.18); }
}