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

   A show is drawn full-screen on a canvas, with the HUD, the banners and the
   controls on top. The DIVE button stays bottom-right in every language, so
   the controls use left/right on purpose.
   ========================================================================== */

.bk { display: grid; gap: .7rem; max-width: 30rem; margin-inline: auto; padding-block: 1rem 2rem; }
.bk-title { font-size: clamp(1.6rem, 7vw, 2.2rem); text-align: center; }
.bk-center { text-align: center; }
.bk-center-btn { justify-self: center; }

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

.bk-menu { display: grid; gap: .7rem; }
.bk-tagline { font-size: 1.1rem; font-weight: 700; text-align: center; }
.bk-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 play screen ---------- */

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

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

.bk-hud {
  position: absolute;
  top: max(.5rem, env(safe-area-inset-top));
  inset-inline: max(.5rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: .45rem;
  pointer-events: none;
}
.bk-hud > * { pointer-events: auto; }
.bk-round, .bk-status, .bk-clock {
  padding: .25rem .65rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  background: rgb(255 250 240 / .92);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.bk-round { overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.bk-status { font-size: .85rem; }
.bk-clock { margin-inline-start: auto; min-width: 2.6rem; font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums; }
.bk-clock:empty { display: none; }
.bk-clock.is-low { color: #fff; background: var(--tomato); }
.bk-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 big words in the middle: the round's name, 3 2 1, Through!, the results. */
.bk-banner {
  position: absolute;
  inset: 22% 1rem auto;
  display: grid;
  justify-items: center;
  gap: .3rem;
  max-width: 26rem;
  margin-inline: auto;
  padding: .9rem 1.1rem 1rem;
  text-align: center;
  color: var(--ink);
  background: rgb(255 250 240 / .95);
  border: 3px solid var(--ink);
  border-radius: 20px 17px 22px 16px;
  box-shadow: 5px 5px 0 var(--ink);
  pointer-events: none;
}
.bk-banner.is-pop { animation: bk-pop .35s cubic-bezier(.2, 1.6, .5, 1); }
@keyframes bk-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bk-banner.is-pop { animation: none; } }
.bk-banner__big { font-size: clamp(1.8rem, 9vw, 2.6rem); font-weight: 900; line-height: 1.05; color: var(--sea); }
.bk-banner__big--out { color: var(--tomato); }
.bk-banner__count { font-size: clamp(4rem, 26vw, 7rem); font-weight: 900; line-height: 1; color: var(--tomato); }
.bk-banner__tip { font-weight: 800; }
.bk-banner__small { font-size: .9rem; font-weight: 800; color: var(--muted); }
.bk-banner:has(.bk-banner__count) { background: none; border: 0; box-shadow: none; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }

.bk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.bk-chip { padding: .1rem .55rem; font-size: .85rem; font-weight: 800; background: var(--surface-2); border: 2px solid var(--line); border-radius: 999px; }
.bk-chip.is-you { color: #fff; background: var(--sea); }
.bk-chips--out .bk-chip { opacity: .65; text-decoration: line-through; }
.bk-banner .bk-chip { color: var(--ink); background: #f0e2c4; border-color: var(--ink); }
.bk-banner .bk-chip.is-you { color: #fff; background: var(--sea); }

/* The floating joystick, where the thumb went down. */
.bk-stick {
  position: fixed;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border: 3px solid rgb(255 255 255 / .55);
  border-radius: 50%;
  background: rgb(255 255 255 / .08);
  pointer-events: none;
}
.bk-stick > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  background: rgb(255 255 255 / .75);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.bk-dive {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.2rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .03em;
  color: #fff;
  background: var(--tomato);
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 0 6px 0 var(--ink);
  cursor: pointer;
  touch-action: none;
}
.bk-dive.is-down { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.bk-dive.is-cool { opacity: .55; }

/* ---------- The end of a show ---------- */

.bk-end { display: grid; gap: .7rem; padding: 1rem; }
.bk-end__crown { font-size: 3.4rem; line-height: 1; text-align: center; }