/* ---------------------------------------------------------------------------
   Responsive rules. The page has to hold up on a 360px phone: the four
   countdown rings become a 2x2 block, the two motifs stack, and the type and
   stage heights come down with them.
   --------------------------------------------------------------------------- */

/* Tablet: two rings per row, motifs still side by side. */
@media (max-width: 1000px) {
  .gauge-ring { max-width: 156px; }
  .gauge-value b { font-size: 1.3rem; }
  .sky-stage, .moon-stage { height: 300px; }
}

/* Portrait tablet / large phone: motifs stack, rings go 2x2. */
@media (max-width: 860px) {
  .gauges {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    padding: 0.5rem 0.25rem 0;
  }
  .gauge-ring { max-width: 168px; }
}

@media (max-width: 620px) {
  header { padding: 1.5rem 1.1rem 1rem; }
  h1 { font-size: 1rem; }
  .header-sub { font-size: 0.68rem; }
  main { padding: 0 1.1rem 3rem; }

  .panel { padding: 1rem 0.9rem 1.15rem; border-radius: 14px; }

  .gauges { gap: 1.25rem 0.6rem; padding: 0.35rem 0 0; }
  .gauge-ring { max-width: 142px; }
  .gauge-value b { font-size: 1.18rem; }
  .gauge-value span { font-size: 0.55rem; }
  .gauge-name { font-size: 0.62rem; }
  .gauge-meta { font-size: 0.58rem; }

  .warmline { font-size: 0.72rem; }

  .sky-stage, .moon-stage { height: 248px; }
}

/* Small phones: one ring per row would make the block very tall, so keep 2x2
   but shrink further, and reduce the stage to a comfortable band. */
@media (max-width: 400px) {
  .gauge-ring { max-width: 124px; }
  .gauge-value b { font-size: 1.05rem; }
  .gauge-value span { font-size: 0.52rem; }
  .sky-stage, .moon-stage { height: 224px; }
  .header-controls { gap: 0.4rem; }
  button { padding: 0.45rem 0.7rem; font-size: 0.68rem; }
}

/* Touch devices: no hover states, and give controls a real tap target. */
@media (hover: none) {
  .panel:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .gauge-ring .arc { transition: none; }
}