/* RUCKUS RUN: the HUD (js/ui/hud.js, js/ui/toasts.js; build spec 14.3). "Carved toy": chunky
   outlined numbers and pictograms straight on the picture, no backing panels. Only transform and
   opacity ever animate. The centre column (30 to 70% of the width) and the bottom of the screen
   belong to the game: the two top clusters stop at 30% and 70%, and only the Time Trial clock and
   the prompt bubble (which follows Ruckus) come between them.

   Sizes are N × --hu: one pixel, growing a little on a big screen (never shrinking, so a phone
   keeps the full 32 px icon, the 34 px scale slots and a 44 px pause button). */

.hud-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
  --hu: calc(1px * clamp(1, var(--rr-scale, 1), 1.3));
  /* #app starts under the Pixelrain bar, which already covers that much of a notch */
  --hud-m-t: max(12px, calc(var(--rr-safe-t) - var(--pixelrain-bar, 0px)));
  --hud-m-r: max(12px, var(--rr-safe-r));
  --hud-m-l: max(12px, var(--rr-safe-l));
  --hud-pop: cubic-bezier(.34, 1.56, .64, 1);
  --hud-stroke: 4px;
  font: 800 calc(15 * var(--hu))/1.2 var(--rr-body);
  font-variant-numeric: tabular-nums;
  color: var(--rr-cream);
}
.hud-root.hud-on { opacity: 1; visibility: visible; transition: opacity .18s ease; }

/* Outlined display type: every number and word of the HUD. */
.hud-num, .hud-crate-num, .hud-timer, .hud-combo-mult, .hud-combo-name, .hud-toast-in, .hud-stage, .hud-score {
  font-family: var(--rr-display);
  font-weight: 900;
  letter-spacing: .01em;
  -webkit-text-stroke: var(--hud-stroke) var(--rr-outline);
  paint-order: stroke fill;
  text-shadow: 0 calc(2 * var(--hu)) 0 var(--rr-outline);
  white-space: nowrap;
}
/* Small words: body type with a hard outline of shadows. */
.hud-seg-note, .hud-retry > span:first-child {
  font: 800 max(14px, calc(14 * var(--hu)))/1.15 var(--rr-body);
  text-shadow: 0 2px 0 var(--rr-outline), 1.5px 0 0 var(--rr-outline), -1.5px 0 0 var(--rr-outline), 0 -1.5px 0 var(--rr-outline), 0 0 6px rgba(27, 18, 48, .9);
}

/* ── The progress line ─────────────────────────────────────────────────────────────────────── */

.hud-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.hud-line-bar {
  position: absolute;
  inset: 0;
  background: rgba(27, 18, 48, .6);
  transform-origin: center top;
  transition: transform .2s ease-out;
  overflow: hidden;
}
.hud-chase .hud-line-bar { transform: scaleY(2); }                 /* 6 px during a chase */
.hud-line-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--rr-orange), var(--rr-sun));
  transform: scaleX(0);
  transform-origin: left center;
}
.hud-line-ticks { position: absolute; inset: 0; }
.hud-line-ticks i {
  position: absolute;
  top: 0;
  width: 4px;
  height: 9px;
  margin-left: -2px;
  border-radius: 0 0 2px 2px;
  background: var(--rr-cream);
  box-shadow: 0 0 0 1.5px var(--rr-outline);
  opacity: .8;
}
.hud-line-ticks i.hud-on { background: var(--rr-keystone); opacity: 1; }
/* Ruckus: a little ball rolling along under the top edge. */
.hud-line-dot {
  position: absolute;
  left: -8px;
  top: -4px;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFE9A8 0 22%, var(--rr-sun) 24% 60%, var(--rr-orange) 100%);
  will-change: transform;
}
/* The Colossus: a red wedge that trails the dot. */
.hud-line-foe {
  position: absolute;
  left: -10px;
  top: -8px;
  width: 20px;
  height: 20px;
  opacity: 0;
  will-change: transform;
}
.hud-line-foe.hud-on { opacity: 1; }
.hud-line-foe::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 3px;
  background: var(--rr-scarf);
  transform: rotate(45deg);
}

/* The chase: red at the edges of the screen, deeper the closer the Colossus is. */
.hud-vignette {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 72% 78% at 50% 54%, rgba(232, 50, 60, 0) 58%, rgba(232, 50, 60, .28) 82%, rgba(190, 20, 40, .62) 100%);
  transition: opacity .25s linear;
}

/* ── Top-left: sunfruit, crates, toasts ────────────────────────────────────────────────────── */

.hud-tl {
  position: absolute;
  left: var(--hud-m-l);
  top: calc(var(--hud-m-t) + 3px);
  max-width: calc(30% - var(--hud-m-l));
  display: grid;
  justify-items: start;
  row-gap: calc(4 * var(--hu));
}
.hud-counters { display: grid; justify-items: start; row-gap: calc(2 * var(--hu)); transition: opacity .45s ease; }
.hud-counters.hud-idle { opacity: 0; }

.hud-fruit { display: flex; align-items: center; gap: calc(7 * var(--hu)); transform-origin: left center; }
.hud-fruit-icon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: calc(44 * var(--hu));
  height: calc(44 * var(--hu));
  color: var(--rr-sun);
}
.hud-fruit-icon .ui-icon { width: calc(32 * var(--hu)); height: calc(32 * var(--hu)); stroke-width: 2.2; }
.hud-num { font-size: calc(30 * var(--hu)); line-height: 1; color: var(--rr-cream); }

.hud-crates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px calc(6 * var(--hu));
  padding-left: calc(11 * var(--hu));
  transform-origin: left center;
  color: #E8B57A;
}
.hud-crates > .ui-icon { flex: none; width: calc(22 * var(--hu)); height: calc(22 * var(--hu)); }
.hud-crate-num { font-size: calc(20 * var(--hu)); line-height: 1.1; color: var(--rr-cream); --hud-stroke: 3.5px; }
.hud-crates.hud-none { visibility: hidden; }
.hud-crates.hud-done, .hud-crates.hud-done .hud-crate-num { color: var(--rr-keystone); }
.hud-seg-tick, .hud-seg-note { display: none; }
.hud-crates.hud-seg .hud-seg-note { display: block; color: var(--rr-sun); }
.hud-crates.hud-seg-done .hud-seg-tick { display: block; color: var(--rr-leaf); }
.hud-crates.hud-seg-done .hud-seg-note { display: none; }
.hud-crates.hud-seg-done, .hud-crates.hud-seg-done .hud-crate-num { color: var(--rr-keystone); }

/* Rush: the stage over the counters, the score under them. */
.hud-stage, .hud-score { display: none; align-items: center; gap: calc(5 * var(--hu)); font-size: calc(17 * var(--hu)); --hud-stroke: 3.5px; }
.hud-stage { color: var(--rr-sun); }
.hud-stage .ui-icon, .hud-score .ui-icon { color: var(--rr-sun); flex: none; }
.hud-score { padding-left: calc(13 * var(--hu)); color: var(--rr-cream); }
.hud-root[data-mode="rush"] .hud-stage, .hud-root[data-mode="rush"] .hud-score { display: flex; }

/* Toasts: one at a time, under the counters. */
.hud-toast {
  margin-top: calc(4 * var(--hu));
  max-width: 100%;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .16s ease, transform .16s ease;
}
.hud-toast.hud-on { opacity: 1; transform: none; }
.hud-toast-in {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--hu));
  font-size: calc(23 * var(--hu));
  line-height: 1.05;
  color: var(--rr-sun);
  transform-origin: left center;
  white-space: normal;
}
.hud-toast-in .ui-icon { flex: none; width: calc(26 * var(--hu)); height: calc(26 * var(--hu)); }
.hud-toast[data-tone="keystone"] .hud-toast-in { color: var(--rr-keystone); }
.hud-toast[data-tone="idol"] .hud-toast-in { color: var(--rr-idol); }
.hud-toast[data-tone="gold"] .hud-toast-in { color: var(--rr-gold); }
.hud-toast[data-tone="cream"] .hud-toast-in { color: var(--rr-cream); }
/* a sentence from the menus' side (sound, saving), in plain words */
.hud-toast[data-tone="note"] .hud-toast-in {
  align-items: flex-start;
  font: 800 max(14px, calc(15 * var(--hu)))/1.25 var(--rr-body);
  letter-spacing: 0;
  color: var(--rr-cream);
  -webkit-text-stroke: 0;
  text-shadow: 0 2px 0 var(--rr-outline), 1.5px 0 0 var(--rr-outline), -1.5px 0 0 var(--rr-outline), 0 -1.5px 0 var(--rr-outline), 0 0 6px rgba(27, 18, 48, .9);
}
.hud-toast[data-tone="note"] .hud-toast-in .ui-icon { display: block; width: 20px; height: 20px; color: var(--rr-sun); }
.hud-toast-a { animation: hud-toast-a .34s var(--hud-pop) both; }
.hud-toast-b { animation: hud-toast-b .34s var(--hud-pop) both; }
@keyframes hud-toast-a { from { transform: scale(.4) rotate(-8deg); } }
@keyframes hud-toast-b { from { transform: scale(.4) rotate(-8deg); } }

/* ── Top-centre: the Time Trial clock ──────────────────────────────────────────────────────── */

.hud-tc {
  position: absolute;
  left: 50%;
  top: calc(var(--hud-m-t) + 3px);
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 10px;
  width: max-content;
  height: 28px;
  transform: translateX(-50%);
}
.hud-root[data-mode="trial"] .hud-tc { display: grid; }
.hud-timer { grid-column: 2; min-width: 4.3em; font-size: 26px; line-height: 28px; text-align: center; color: var(--rr-cream); }
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px 0 6px;
  border: 2.5px solid var(--rr-outline);
  border-radius: 99px;
  background: var(--rr-ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  font: 800 14px/1 var(--rr-body);
  white-space: nowrap;
  opacity: 0;
}
.hud-chip.hud-on { opacity: 1; }
.hud-next { grid-column: 1; justify-self: end; }
.hud-next[data-tone="gold"] { color: var(--rr-gold); }
.hud-next[data-tone="silver"] { color: var(--rr-silver); }
.hud-next[data-tone="bronze"] { color: #E7A06A; }
.hud-next .ui-icon { stroke-width: 2; }
.hud-split { grid-column: 3; justify-self: start; padding: 0 10px; font-weight: 900; }
.hud-split[data-tone="ahead"] { background: var(--rr-leaf); color: var(--rr-outline); }
.hud-split[data-tone="behind"] { background: var(--rr-orange); color: var(--rr-outline); }

/* ── Top-right: armour, pause, combo, hold-to-retry ────────────────────────────────────────── */

.hud-tr {
  position: absolute;
  right: var(--hud-m-r);
  top: calc(var(--hud-m-t) + 6px);
  max-width: calc(30% - var(--hud-m-r));
  display: grid;
  justify-items: end;
  row-gap: calc(6 * var(--hu));
}
.hud-tr-row { display: flex; align-items: center; gap: calc(10 * var(--hu)); }
.hud-scales { display: flex; align-items: center; gap: calc(3 * var(--hu)); }
.hud-slot { position: relative; display: grid; place-items: center; width: calc(34 * var(--hu)); height: calc(34 * var(--hu)); }
.hud-slot svg { grid-area: 1 / 1; display: block; width: 100%; height: 100%; overflow: visible; stroke-linejoin: round; }
.hud-slot-bed { fill: rgba(27, 18, 48, .42); stroke: var(--rr-cream); stroke-width: 2; opacity: .9; }
.hud-slot-gold {
  fill: var(--rr-gold);
  stroke: var(--rr-outline);
  stroke-width: 2.4;
  paint-order: stroke fill;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .1s linear, transform .18s var(--hud-pop);
}
.hud-slot-ridge { fill: #FFE691; stroke: none; }
.hud-slot-hi { fill: #fff; fill-opacity: .8; stroke: none; }
.hud-slot.hud-on .hud-slot-gold { opacity: 1; transform: none; }
.hud-slot.hud-on .hud-slot-bed { opacity: 0; }
/* Golden Roll: a glow round the plates and an arc that drains. */
.hud-slot::before {
  content: "";
  position: absolute;
  inset: calc(-9 * var(--hu));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 220, 90, .95), rgba(255, 197, 49, .45) 55%, rgba(255, 197, 49, 0));
  opacity: 0;
}
.hud-gold .hud-slot::before { opacity: .9; animation: hud-glow .5s ease-in-out infinite alternate; }
@keyframes hud-glow { to { opacity: .45; transform: scale(.9); } }
/* the arc runs round each plate, so the pair needs a little more room while it shows */
.hud-slot .hud-ring { inset: calc(-6 * var(--hu)); display: none; --ring-w: calc(4 * var(--hu)); }
.hud-gold .hud-slot .hud-ring { display: block; }
.hud-scales.hud-gold { gap: calc(15 * var(--hu)); margin: 0 calc(6 * var(--hu)); }

.hud-pause {
  flex: none;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid var(--rr-cream);
  border-radius: 50%;
  background: rgba(27, 18, 48, .38);
  box-shadow: 0 3px 0 rgba(27, 18, 48, .3);
  color: var(--rr-cream);
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.hud-pause.hud-on { display: grid; }
.hud-pause:active { transform: scale(.94); background: var(--rr-sun); }

.hud-combo {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--hu));
  opacity: 0;
  transform: translateX(12px) scale(.8);
  transform-origin: right center;
  transition: opacity .14s ease, transform .14s ease;
  color: var(--rr-leaf);
}
.hud-combo.hud-on { opacity: 1; transform: none; }
.hud-combo-name { font-size: calc(19 * var(--hu)); --hud-stroke: 3.5px; }
.hud-combo-disc { position: relative; flex: none; display: grid; place-items: center; width: calc(46 * var(--hu)); height: calc(46 * var(--hu)); }
.hud-combo-mult { font-size: calc(21 * var(--hu)); line-height: 1; color: var(--rr-cream); --hud-stroke: 3.5px; }
.hud-combo[data-tier="3"] { color: var(--rr-sun); }
.hud-combo[data-tier="4"] { color: var(--rr-orange); }
.hud-combo[data-tier="5"] { color: #FF5FA2; }
.hud-combo[data-tier="5"] .hud-combo-disc { animation: hud-wobble .34s ease-in-out infinite alternate; }
@keyframes hud-wobble { from { transform: rotate(-7deg) scale(1.04); } to { transform: rotate(7deg) scale(1.1); } }

.hud-retry { display: flex; align-items: center; gap: calc(8 * var(--hu)); opacity: 0; transition: opacity .1s linear; }
.hud-retry.hud-on { opacity: 1; }
.hud-retry-disc { position: relative; flex: none; display: grid; place-items: center; width: calc(38 * var(--hu)); height: calc(38 * var(--hu)); color: var(--rr-cream); }
.hud-retry-disc .ui-icon { width: calc(20 * var(--hu)); height: calc(20 * var(--hu)); }

/* ── Rings: two half-masks, each with half a ring that turns into view ─────────────────────── */

.hud-ring { position: absolute; inset: 0; display: block; --ring-w: calc(4.5 * var(--hu)); }
.hud-ring-bed {
  position: absolute;
  inset: 0;
  border: var(--ring-w) solid rgba(27, 18, 48, .62);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--rr-outline), inset 0 0 0 1.5px var(--rr-outline);
}
.hud-ring-half { position: absolute; inset: 0; }
.hud-ring-r { clip-path: inset(0 0 0 50%); }
.hud-ring-l { clip-path: inset(0 50% 0 0); }
.hud-ring-half i { position: absolute; inset: 0; border: var(--ring-w) solid currentColor; border-radius: 50%; will-change: transform; }
.hud-ring-r i { clip-path: inset(0 50% 0 0); }
.hud-ring-l i { clip-path: inset(0 0 0 50%); }
.hud-basket { color: var(--rr-leaf); --ring-w: calc(4 * var(--hu)); }
.hud-golden-ring { color: var(--rr-gold); }
.hud-combo-ring { color: inherit; }
.hud-retry-ring { color: var(--rr-sun); }

/* ── The prompt bubble ─────────────────────────────────────────────────────────────────────── */

.hud-prompt { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; visibility: hidden; will-change: transform; }
.hud-prompt.hud-on { opacity: 1; visibility: visible; }
.hud-prompt-in {
  position: absolute;
  left: 0;
  bottom: 12px;
  padding: 9px 13px 11px;
  border: 3px solid var(--rr-outline);
  border-radius: 18px;
  background: var(--rr-ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .32), inset 0 2px 0 rgba(255, 244, 220, .14);
  transform: translateX(-50%);
  transform-origin: 0 100%;
  white-space: nowrap;
}
.hud-prompt-in::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border: solid var(--rr-outline);
  border-width: 0 3px 3px 0;
  border-radius: 0 0 4px 0;
  background: var(--rr-ink);
  transform: rotate(45deg);
}
.hud-bubble-a { animation: hud-bubble-a .3s var(--hud-pop) both, hud-bob 1.1s ease-in-out .3s infinite alternate; }
.hud-bubble-b { animation: hud-bubble-b .3s var(--hud-pop) both, hud-bob 1.1s ease-in-out .3s infinite alternate; }
@keyframes hud-bubble-a { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.5); } to { transform: translateX(-50%); } }
@keyframes hud-bubble-b { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.5); } to { transform: translateX(-50%); } }
@keyframes hud-bob { from { transform: translateX(-50%); } to { transform: translateX(-50%) translateY(-5px); } }

/* ── Pops (1.18 → 1 in 140 ms), stamps and cracks ──────────────────────────────────────────── */

.hud-pop-a { animation: hud-pop-a .14s ease-out; }
.hud-pop-b { animation: hud-pop-b .14s ease-out; }
@keyframes hud-pop-a { from { transform: scale(1.18); } }
@keyframes hud-pop-b { from { transform: scale(1.18); } }
.hud-stamp-a { animation: hud-stamp-a .32s cubic-bezier(.2, .9, .3, 1); }
.hud-stamp-b { animation: hud-stamp-b .32s cubic-bezier(.2, .9, .3, 1); }
@keyframes hud-stamp-a { 0% { transform: scale(2.4) rotate(-20deg); } 60% { transform: scale(.86) rotate(4deg); } 100% { transform: none; } }
@keyframes hud-stamp-b { 0% { transform: scale(2.4) rotate(-20deg); } 60% { transform: scale(.86) rotate(4deg); } 100% { transform: none; } }
.hud-crack-a { animation: hud-crack-a .3s ease-out; }
.hud-crack-b { animation: hud-crack-b .3s ease-out; }
@keyframes hud-crack-a { 20% { transform: translateX(-4px) rotate(-8deg); } 45% { transform: translateX(4px) rotate(7deg); } 70% { transform: translateX(-2px); } }
@keyframes hud-crack-b { 20% { transform: translateX(-4px) rotate(-8deg); } 45% { transform: translateX(4px) rotate(7deg); } 70% { transform: translateX(-2px); } }

/* ── A phone held sideways: narrower columns either side of the path ───────────────────────── */

@media (max-width: 900px) {
  .hud-toast-in { align-items: flex-start; font-size: 20px; --hud-stroke: 3.5px; }
  .hud-toast-in .ui-icon { width: 23px; height: 23px; }
  /* the clock's chips keep clear of the counters on either side */
  .hud-tc { column-gap: 8px; }
  .hud-next { padding: 0 8px; }
  .hud-next .ui-icon { display: none; }
  .hud-split { padding: 0 8px; }
}

/* ── A narrow screen (a phone held upright) ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  .hud-fruit { gap: 5px; }
  .hud-fruit-icon { width: 40px; height: 40px; }
  .hud-fruit-icon .ui-icon { width: 30px; height: 30px; }
  .hud-num { font-size: 24px; --hud-stroke: 3.5px; }
  .hud-crates { padding-left: 9px; gap: 1px 5px; }
  .hud-crate-num { font-size: 17px; --hud-stroke: 3px; }
  .hud-seg-note { flex-basis: 100%; }
  .hud-seg-dot { display: none; }
  .hud-fruit.hud-wide .hud-num { font-size: 19px; }
  .hud-toast-in { font-size: 16px; --hud-stroke: 3px; }
  .hud-toast-in .ui-icon { display: none; }
  .hud-stage, .hud-score { font-size: 15px; --hud-stroke: 3px; }
  /* pause in the corner, the scale slots under it */
  .hud-tr-row { flex-direction: column-reverse; align-items: flex-end; gap: 6px; }
  .hud-combo { flex-direction: column-reverse; align-items: flex-end; gap: 2px; }
  .hud-combo-name { font-size: 16px; --hud-stroke: 3px; }
  .hud-retry { flex-direction: column-reverse; align-items: flex-end; gap: 2px; text-align: right; }
  /* the clock alone on its line, its chips under it */
  .hud-tc { grid-template-columns: auto auto; justify-content: center; column-gap: 5px; row-gap: 4px; height: auto; }
  .hud-timer { grid-column: 1 / -1; grid-row: 1; font-size: 24px; --hud-stroke: 3.5px; }
  .hud-next { grid-column: 1; grid-row: 2; padding: 0 8px; }
  .hud-next .ui-icon { display: none; }
  .hud-split { grid-column: 2; grid-row: 2; padding: 0 7px; }
  .hud-next:not(.hud-on), .hud-split:not(.hud-on) { display: none; }
}

/* ── The card, dev stills and reduced motion ───────────────────────────────────────────────── */

/* `?screenshot`: sunfruit, crates and scales only. */
.hud-card .hud-line, .hud-card .hud-vignette, .hud-card .hud-tc, .hud-card .hud-combo, .hud-card .hud-retry,
.hud-card .hud-toast, .hud-card .hud-prompt, .hud-card .hud-pause, .hud-card .hud-stage, .hud-card .hud-score { display: none !important; }

.hud-instant, .hud-instant *, .hud-instant *::before, .hud-instant *::after,
.hud-reduced, .hud-reduced *, .hud-reduced *::before, .hud-reduced *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hud-root, .hud-toast, .hud-counters, .hud-line-bar { transition: none; }
}