/* =============================================================
   GAME: Air Hockey
   ============================================================= */
.board-airhockey { display: flex; flex-direction: column; align-items: center; outline: none; }
.ah-stage { position: relative; touch-action: none; }
.ah-canvas {
  display: block; height: min(calc(100vh - 250px), 760px, calc((100vw - 60px) * 5 / 3)); min-height: 360px; aspect-ratio: 3 / 5; max-width: calc(100vw - 60px);
  border-radius: 26px; background: #040d1f; cursor: none; touch-action: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 2px #3dc8ff, 0 0 30px rgba(61, 200, 255, .35);
}
.board-airhockey:focus-visible .ah-canvas { box-shadow: 0 0 0 3px #fff, 0 0 30px rgba(61, 200, 255, .55); }
.ah-msg {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: max-content; max-width: 80%;
  padding: 10px 16px; border-radius: 12px; background: rgba(4, 13, 31, .86); color: #d8f6ff; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(61, 200, 255, .55); pointer-events: none;
}
.ah-msg[hidden] { display: none; }
.ah-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.ah-num { font-variant-numeric: tabular-nums; }
.ah-to { color: var(--muted); font-size: .85rem; }
@media (max-width: 600px) { .ah-wins { display: none; } }
@media (pointer: coarse) { .ah-canvas { height: min(calc(100vh - 290px), 760px, calc((100vw - 48px) * 5 / 3)); max-width: calc(100vw - 48px); } }
@media (max-width: 600px) { .ah-canvas { height: min(calc(100vh - 310px), calc((100vw - 48px) * 5 / 3)); min-height: 320px; } }
/* 2 players: a hint line on the halves of the table */
.board-airhockey.ah-2p .ah-msg { top: 50%; }