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

   A game is drawn full-screen on a canvas, with the score, the balls left
   and the shot clock on top (and online, the others in a strip under them).
   The menu and the online results are ordinary page sections.
   ========================================================================== */

.hp { display: grid; gap: .7rem; max-width: 30rem; margin-inline: auto; padding-block: .5rem 2rem; }
.hp-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.hp-center { text-align: center; }
.hp-center-btn { justify-self: center; }
.hp-note { font-size: 1.05rem; font-weight: 700; text-align: center; }
.hp-top { display: flex; align-items: center; gap: .6rem; }

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

.hp-menu { display: grid; gap: .7rem; }
.hp-things { font-size: 2rem; letter-spacing: .15em; text-align: center; }
.hp-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.hp-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; }

/* ---------- Playing ---------- */

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

.hp-play {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: #1d2a44; /* the court is drawn on the canvas; this is the wall behind the score */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hp-play { background: #1d2a44; }
}
.hp-court { flex: 1; min-height: 0; width: 100%; display: block; }
.hp-hud {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(.6rem, env(safe-area-inset-right)) .3rem max(.6rem, env(safe-area-inset-left));
}
.hp-hud__box, .hp-hud__fire, .hp-hud__balls {
  padding: .2rem .6rem;
  font-weight: 900;
  color: var(--ink);
  background: rgb(255 250 240 / .92);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.hp-hud__box { min-width: 3.2rem; font-size: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.hp-hud__box.is-bump { animation: hp-bump .35s cubic-bezier(.2, 1.8, .5, 1); }
@keyframes hp-bump { 40% { transform: scale(1.25); background: #ffd166; } }
.hp-hud__balls { margin-inline-start: auto; font-size: .85rem; letter-spacing: .05em; }
.hp-hud__fire { color: #fff; background: #f97316; animation: hp-pulse .6s ease-in-out infinite alternate; }
.hp-hud__fire[hidden] { display: none; }
@keyframes hp-pulse { to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hp-hud__fire { animation: none; } }
.hp-clock { flex: none; margin: 0 .6rem .3rem; }
.hp-clock.is-low .timebar__fill { background: var(--tomato); }
.hp-exit {
  flex: none;
  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;
}

/* The others, online: a strip under the score. */
.hp-chips { display: flex; gap: .35rem; padding: 0 .6rem .3rem; overflow-x: auto; scrollbar-width: none; }
.hp-play .hp-chips { flex: none; }
.hp-chip { flex: none; display: flex; align-items: center; gap: .3rem; padding: .15rem .55rem; font-size: .8rem; font-weight: 800; color: var(--ink); background: rgb(255 250 240 / .9); border: 2px solid var(--ink); border-radius: 999px; }
.hp-chip.is-you { background: #ffe9a8; }
.hp-chip.is-done { opacity: .5; }
.hp-chip__name { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-chip__balls { font-size: .7rem; }
.hp .hp-chips { flex-wrap: wrap; padding: 0; }

/* The end of a game alone: a card over the field. */
.hp-over {
  position: absolute;
  padding: 1.2rem 1.1rem 1.3rem;
  box-shadow: 0 18px 50px rgb(0 0 0 / .45), 6px 6px 0 var(--line);
  top: 50%;
  left: 50%;
  display: grid;
  gap: .6rem;
  width: min(26rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow: auto;
  transform: translate(-50%, -50%);
  user-select: text;
  -webkit-user-select: text;
  animation: hp-pop .35s cubic-bezier(.2, 1.4, .5, 1) both;
}
@keyframes hp-pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-over { animation: none; } }
.hp-bigscore { font-size: clamp(2.6rem, 14vw, 3.6rem); font-weight: 900; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.hp-newbest { font-weight: 900; text-align: center; color: var(--tomato); }

/* ---------- Online results ---------- */

.hp-board { display: grid; gap: .4rem; }
.hp-board__row { display: flex; align-items: center; gap: .6rem; padding: .45rem .7rem; background: var(--surface); border: 2.5px solid var(--line); border-radius: 14px; }
.hp-board__row.is-you { box-shadow: 3px 3px 0 var(--sea); }
.hp-board__row.is-winner { background: #fff3bf; color: var(--ink); }
.hp-board__place { width: 1.4rem; text-align: center; }
.hp-board__face { font-size: 1.5rem; }
.hp-board__who { flex: 1; min-width: 0; display: grid; font-weight: 800; }
.hp-board__who bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-board__who small { font-weight: 700; color: var(--muted); }
.hp-board__row.is-winner .hp-board__who small { color: inherit; opacity: .7; }
.hp-board__wins { font-size: .85rem; font-weight: 800; }
.hp-board__score { font-variant-numeric: tabular-nums; white-space: nowrap; }