/* ==========================================================================
   Air Hockey — styles. Theme tokens and shared components come from
   shared/style.css.

   A match is drawn full-screen on a canvas; the exit button, the goal banner
   and the end card sit on top.
   ========================================================================== */

.hk-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.hk-center { text-align: center; }
.hk-center-btn { justify-self: center; }

/* ---------- Menu ---------- */

.hk-menu { display: grid; gap: .7rem; }
.hk-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.hk-label { margin-top: .4rem; font-weight: 900; text-align: center; }
.hk-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.hk-levels .btn { min-height: var(--tap); }
.hk-best { font-weight: 900; text-align: center; }
.howto { max-width: 30rem; margin: 1.5rem auto 0; padding: .25rem 1rem; }
.howto summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.howto ol { display: grid; gap: .5rem; padding: 0 0 1rem; padding-inline-start: 1.4rem; list-style: decimal; }

/* ---------- The table ---------- */

html.is-playing, html.is-playing body { overflow: hidden; overscroll-behavior: none; }

.hk-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #0b1218;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.hk-table { display: block; width: 100%; height: 100%; }

/* The exit button stays top-left in every language, out of the way of the score. */
.hk-exit {
  position: absolute;
  top: max(.5rem, env(safe-area-inset-top));
  left: max(.5rem, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font: inherit;
  font-weight: 900;
  color: var(--ink);
  background: rgb(255 250 240 / .92);
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
}

.hk-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: .3rem 1.2rem;
  font-size: clamp(2rem, 11vw, 3.4rem);
  font-weight: 900;
  color: #fff;
  background: var(--tomato);
  border: 3px solid var(--ink);
  border-radius: 18px 14px 20px 15px;
  box-shadow: 0 5px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-4deg);
  pointer-events: none;
  animation: hk-pop .35s cubic-bezier(.2, 1.6, .5, 1) both;
}
@keyframes hk-pop { from { transform: translate(-50%, -50%) scale(.3) rotate(-4deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hk-banner { animation: none; } }

.hk-note {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: .4rem 1rem;
  font-weight: 800;
  color: var(--ink);
  background: rgb(255 250 240 / .95);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.hk-end {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  gap: .7rem;
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  user-select: text;
  -webkit-user-select: text;
}
.hk-end[hidden] { display: none; }
.hk-final { font-size: clamp(2.6rem, 14vw, 3.6rem); font-weight: 900; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.hk-wins { font-weight: 800; }