/* =========================================================
   Responsive rules
   Desktop  : landscape, mouse controls, full-screen viewport
   Tablet   : medium tubes
   Mobile   : vertical layout, touch controls, fullscreen button
   ========================================================= */

/* ---- large desktop polish ---- */
@media (min-width: 1400px) {
  .tube { --tube-w: 78px; --tube-h: 270px; }
  .hud-center { max-width: 560px; }
  .board { gap: 28px; }
}

@media (min-width: 1000px) and (max-width: 1399px) {
  .tube { --tube-w: 68px; --tube-h: 250px; }
  .hud-center { max-width: 520px; }
  .board { gap: 22px; }
}

/* ---- tablet ---- */
@media (max-width: 999px) {
  .tube { --tube-w: 60px; --tube-h: 210px; }
  .board { gap: 16px; }
  .home-card { min-height: 360px; padding: 34px 30px; }
}

/* ---- mobile / small screens ---- */
@media (max-width: 640px) {
  .tube { --tube-w: 54px; --tube-h: 180px; }
  .board { gap: 10px; row-gap: 16px; }
  .hud-stat-label { font-size: 8px; }
  .hud-stat-value { font-size: 13px; }
  .hud-center { padding: 5px 8px; gap: 4px; }
  .hud-btn { width: 38px; height: 38px; }
  .btn-fullscreen-mobile.show-on-mobile { display: inline-flex; }
  .board-actions .btn { padding: 10px 16px; font-size: 13px; height: 44px; }
  .home-secondary { flex-direction: row; }
  .logo { font-size: 44px; }
  .home-card { min-height: 320px; padding: 26px 22px; }
}

@media (max-width: 380px) {
  .tube { --tube-w: 46px; --tube-h: 156px; }
  .board { gap: 7px; row-gap: 12px; }
  .home-card { min-height: 280px; padding: 20px 16px; }
}

/* Full screen mobile button visibility is controlled via JS + this class */
.btn-fullscreen-mobile { display: none; }
@media (max-width: 640px) {
  .btn-fullscreen-mobile.mobile-visible { display: inline-flex; }
}

/* landscape phones: shrink vertical chrome */
@media (max-height: 480px) and (orientation: landscape) {
  .tube { --tube-h: 130px; --tube-w: 42px; }
  .hud { padding: 2px; }
  .board-actions { padding: 4px 0; }
  .logo { font-size: 30px; }
  .home-card { gap: 8px; min-height: 0; max-height: calc(100vh - 40px); padding: 16px 20px; }
}

/* very tall narrow phones give board more room */
@media (max-width: 480px) and (min-height: 780px) {
  .tube { --tube-h: 190px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* focus visibility for accessibility */
button:focus-visible, .tube:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}