/* ============================================================
   arcade.css — the bubble score: counter, combo meter, fireworks
   ============================================================ */

.hud {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 12;            /* over the menu (10), under the bar (60) */
  pointer-events: none;
  font-family: var(--font);
}
.hud[hidden] { display: none; }
html.in-channel .hud { display: none; }   /* the game lives on the menu */

/* ---------- top right: the score ---------- */
.hud__score {
  position: absolute;
  top: clamp(8px, 1.6vh, 14px);
  right: clamp(12px, 2vw, 22px);
  display: grid;
  justify-items: end;
  gap: 1px;
  padding: 6px 12px 7px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(157, 182, 196, .7), 0 3px 8px rgba(45, 85, 110, .16);
  animation: hud-in 420ms var(--ease-pop) both;
  /* the card takes the pointer so that, once faded, hovering the corner
     where it was brings it back */
  pointer-events: auto;
  transition: opacity 600ms var(--ease);
}
.hud.is-idle .hud__score { opacity: 0; }
.hud.is-idle .hud__score:hover { opacity: 1; }
@keyframes hud-in {
  from { opacity: 0; transform: translateY(-8px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.hud__num {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.1;
  color: var(--ink);
  text-shadow: 0 1px 0 #fff;
  font-variant-numeric: tabular-nums;
}
/* the little glossy bubble that marks the number as bubble points */
.hud__num::before {
  content: "";
  width: .62em; height: .62em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, rgba(206, 236, 252, .95) 40%, rgba(120, 190, 232, .7) 70%, rgba(90, 160, 210, .9) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(60, 120, 160, .3);
}
.hud__sub {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hud__sub span + span::before { content: " · "; }
.hud__sub span:empty { display: none; }

.hud__score.is-bump { animation: score-bump 240ms var(--ease-pop); }
@keyframes score-bump {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.hud__score.is-glow { animation: score-glow 1100ms ease-out; }
@keyframes score-glow {
  0%   { box-shadow: 0 0 0 1px rgba(157, 182, 196, .7), 0 0 0 0 rgba(255, 212, 94, .9), 0 3px 8px rgba(45, 85, 110, .16); transform: scale(1); }
  25%  { box-shadow: 0 0 0 1px #ffd45e, 0 0 0 14px rgba(255, 212, 94, .35), 0 0 40px rgba(255, 212, 94, .8); transform: scale(1.14); }
  100% { box-shadow: 0 0 0 1px rgba(157, 182, 196, .7), 0 0 0 30px rgba(255, 212, 94, 0), 0 3px 8px rgba(45, 85, 110, .16); transform: scale(1); }
}

/* ---------- top centre: the combo meter ---------- */
.combo {
  position: absolute;
  top: clamp(8px, 1.6vh, 14px);
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 56vw);
  opacity: 0;
  transition: opacity 220ms var(--ease);
  /* colour band, set by data-tier */
  --c1: #63c2ea; --c2: #1a92c9;
}
.combo[hidden] { display: none; }
.combo.is-on { opacity: 1; }
.combo.is-out { opacity: 0; }
.combo[data-tier="2"] { --c1: #7fd48a; --c2: #2f9a48; }
.combo[data-tier="3"] { --c1: #ffd45e; --c2: #f0a92c; }
.combo[data-tier="4"] { --c1: #ffb163; --c2: #e8621c; }
.combo[data-tier="5"] { --c1: #ff8fc2; --c2: #b0369a; }

.combo__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  padding: 0 2px;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-shadow: 0 1px 0 #fff;
}
.combo__mult {
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--c2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #fff;
}
.combo__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid #fff;
  box-shadow: inset 0 1px 3px rgba(60, 100, 125, .28), 0 0 0 1px rgba(157, 182, 196, .7);
  overflow: hidden;
}
/* scaleX only — the drain runs on the compositor like everything else */
.combo__fill {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 0 10px var(--c1);
}
.combo.is-bump .combo__track { animation: combo-bump 260ms var(--ease-pop); }
@keyframes combo-bump {
  0%   { transform: scaleY(1); }
  40%  { transform: scaleY(1.5); }
  100% { transform: scaleY(1); }
}
.combo.is-hot { animation: combo-hot 700ms ease-out; }
@keyframes combo-hot {
  0%   { filter: brightness(1); }
  30%  { filter: brightness(1.6) saturate(1.4); }
  100% { filter: brightness(1); }
}

/* ---------- the fireworks layer ---------- */
.hud__fx {
  position: fixed;
  inset: 0;
  z-index: 13;
  pointer-events: none;
  overflow: hidden;
}
/* "+30", floating up from the pop */
.fx-pts {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-hi);
  text-shadow: 0 1px 0 #fff, 0 0 8px rgba(255, 255, 255, .9);
  animation: pts 760ms ease-out forwards;
}
@keyframes pts {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  18%  { opacity: 1; transform: translate(-50%, -70%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(1); }
}
/* a burst of little bubbles */
.fx-bub {
  position: absolute;
  width: var(--s, 16px);
  height: var(--s, 16px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      rgba(255, 255, 255, .98) 0%,
      rgba(206, 236, 252, .7) 40%,
      rgba(120, 190, 232, .35) 66%,
      rgba(120, 190, 232, .1) 78%,
      transparent 80%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 0 10px rgba(255, 255, 255, .8);
  animation: burst 950ms cubic-bezier(.15, .7, .3, 1) both;
}
@keyframes burst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1); }
}

/* ---------- milestone card ---------- */
.toast {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 14;
  transform: translate(-50%, -50%) scale(.8);
  opacity: 0;
  padding: clamp(14px, 2.4vw, 22px) clamp(24px, 4vw, 44px);
  text-align: center;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .96), rgba(238, 246, 250, .96));
  border: 2px solid #fff;
  border-radius: 24px;
  box-shadow: 0 0 0 1px #9db6c4, 0 22px 60px rgba(30, 80, 110, .3), 0 0 46px var(--glow);
  transition: opacity 240ms var(--ease), transform 380ms var(--ease-pop);
}
.toast[hidden] { display: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast__big {
  font-size: clamp(30px, 6vw, 58px);
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--ink);
  text-shadow: 0 1px 0 #fff;
}
.toast__sub {
  margin-top: .3em;
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* the whole menu breathes in for a beat on a big milestone */
html.is-celebrating .grid { animation: grid-cheer 900ms var(--ease-pop); }
@keyframes grid-cheer {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ---------- small screens ---------- */
@media (max-width: 559px) {
  .hud__score { padding: 4px 9px 5px; border-radius: 11px; }
  .hud__num { font-size: 18px; }
  .hud__sub { font-size: 9.5px; }
  /* narrower, so it never brushes the score card in the corner */
  .combo { width: min(180px, 38vw); }
  .combo__mult { font-size: 15px; }
}

/* ---------- motion off: no fireworks, everything else still counts ---------- */
@media (prefers-reduced-motion: reduce) { .hud__fx { display: none; } }
html.reduce-motion .hud__fx { display: none; }
html.reduce-motion .hud__score, html.reduce-motion .combo, html.reduce-motion .toast { animation: none !important; }