/* HUD styles (M11, DESIGN 11.4): crate cards, pause button, caption box, banners, coach marks, theatre offer, announcer.
   The look is the dance flyer (docs/UI-PLAN.md, look A): cream and day-glo stickers with a black outline and a hard offset
   shadow, tilted strips, Anton for the shouting and Archivo for the reading. The tokens repeat css/base.css as plain values
   so the HUD test page (which loads only this file) looks the same.
   Everything here is positioned by js/hud/*.js from layout.zones (place(layout)); sizes that must be readable are in
   CSS px, not logical units: captions 16px (20px with large text), every other text at least 14px, every button at
   least 44 x 44. Flags the shell sets on <html>: data-large-text="true", data-reduced-motion="on|off", data-contrast="high". */
:root {
  --hud-ink: #0d0b10;
  --hud-paper: #fff6e0;
  --hud-gold: #ffe600;
  --hud-text: #ffffff;
  --hud-red: #ff3b30;
  --hud-green: #19e36b;
  --hud-pink: #ff2e88;
  --hud-blue: #2ea8ff;
  --hud-spent: #c4bcae;
  --hud-display: "Anton", Impact, "Arial Narrow Bold", "Helvetica Neue", Arial, sans-serif;
  --hud-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* A full-viewport layer to put the DOM parts in. Only the interactive bits take pointer events. */
.hud-layer { position: fixed; inset: 0; pointer-events: none; z-index: 5; font-family: var(--hud-font); }
.hud-layer [hidden], .hud-crate[hidden], .hud-banner[hidden], .hud-theatre-offer[hidden], .hud-crate-timer[hidden], .hud-chip[hidden], .hud-hold[hidden], .hud-hold-go[hidden], .hud-hold-sub[hidden] { display: none !important; }

/* ---- captions (REQ-153, REQ-147): a cream speech sticker, who is talking on a coloured name tag ---- */
.hud-captions {
  position: absolute; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  pointer-events: auto; padding: 5px 10px 4px; border: 3px solid var(--hud-ink); border-radius: 3px;
  background: var(--hud-paper); color: var(--hud-ink); box-shadow: 4px 4px 0 var(--hud-gold);
  font: 600 16px/1.22 var(--hud-font);
}
/* nobody talking: no sticker, just a faint frame so the band does not jump */
.hud-captions:empty { background: rgba(13, 11, 16, 0.55); border-color: rgba(255, 246, 224, 0.12); box-shadow: none; }
.hud-cap-large, :root[data-large-text="true"] .hud-captions { font-size: 20px; }
.hud-cap { margin: 0 0 3px; overflow-wrap: anywhere; }
.hud-cap.hud-cap-fit { display: none; }
.hud-cap:last-child { margin-bottom: 0; }
/* older lines fade back so the newest reads first */
.hud-cap:not(:last-child) .hud-cap-text { color: #4a4450; }
.hud-cap-who {
  display: inline-block; font: 400 14px/1.2 var(--hud-display); letter-spacing: 0.05em; padding: 1px 6px 0; margin-right: 2px;
  border: 2px solid var(--hud-ink); border-radius: 2px; background: var(--hud-gold); color: var(--hud-ink); vertical-align: 1px;
  rotate: -2deg;
}
.hud-cap-rival .hud-cap-who { background: var(--hud-red); }
.hud-cap-ref .hud-cap-who, .hud-cap-referee .hud-cap-who { background: var(--hud-ink); color: var(--hud-paper); }
.hud-cap-crowd .hud-cap-who { background: var(--hud-pink); }
.hud-cap-artist .hud-cap-who { background: var(--hud-green); }
.hud-cap-deejay .hud-cap-who { background: var(--hud-blue); }
.hud-cap-token { color: var(--hud-ink); background: var(--hud-gold); box-shadow: 0 0 0 2px var(--hud-gold); font-weight: 800; }
.hud-cap:not(:last-child) .hud-cap-token { color: #4a4450; background: transparent; box-shadow: none; }

/* ---- chips and buttons ---- */
.hud-chip {
  display: inline-block; font: 400 14px/1.2 var(--hud-display); letter-spacing: 0.04em; padding: 2px 7px 1px; border-radius: 2px;
  background: var(--hud-gold); color: var(--hud-ink); border: 2px solid var(--hud-ink); white-space: nowrap;
}
.hud-chip-big { font-size: 18px; padding: 2px 10px 1px; }
.hud-btn {
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 8px 16px 7px; cursor: pointer; pointer-events: auto;
  font: 400 18px/1.15 var(--hud-display); letter-spacing: 0.04em; color: var(--hud-ink); background: var(--hud-gold);
  border: 3px solid var(--hud-ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--hud-ink); touch-action: manipulation;
}
.hud-btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--hud-ink); }
.hud-btn:focus-visible, .hud-card:focus-visible, .hud-pause:focus-visible {
  outline: 4px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--hud-ink);
}

/* ---- the crate (REQ-023, REQ-009): sticker cards, tilted a degree or two, on the canvas box of sleeves ---- */
.hud-crate { position: absolute; pointer-events: none; }
.hud-crate-list {
  position: absolute; left: 0; top: 0; right: 0; box-sizing: border-box; padding: 12px 14px 12px 12px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px 10px; align-content: start; grid-auto-rows: max-content;
  pointer-events: auto; touch-action: pan-y;
}
.hud-card {
  box-sizing: border-box; min-width: 44px; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 7px 10px 8px; text-align: left; cursor: pointer; font: 700 14px/1.2 var(--hud-font);
  background: var(--hud-paper); color: var(--hud-ink); border: 3px solid var(--hud-ink); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--hud-pink); rotate: -1.5deg;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.hud-card:nth-child(4n + 2) { rotate: 1.2deg; }
.hud-card:nth-child(4n + 3) { rotate: 0.8deg; }
.hud-card:nth-child(4n) { rotate: -1deg; }
.hud-card:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--hud-pink); }
.hud-card-title { font: 400 19px/1.08 var(--hud-display); letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: anywhere; }
.hud-card-artist { font: 700 14px/1.15 var(--hud-font); color: #3d3842; overflow-wrap: anywhere; }
.hud-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; max-width: 100%; min-width: 0; }
.hud-card-foot .hud-chip { max-width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; overflow-wrap: break-word; rotate: -2deg; }
.hud-stamp {
  font: 400 14px/1.15 var(--hud-display); letter-spacing: 0.08em; padding: 1px 6px 0; border: 2px solid var(--hud-ink); border-radius: 2px;
  rotate: 3deg; background: var(--hud-green); color: var(--hud-ink);
}
.hud-played { background: var(--hud-spent); box-shadow: 3px 3px 0 #4a4450; }
.hud-played .hud-card-title, .hud-played .hud-card-artist { color: #2f2a33; }
.hud-played .hud-card-title { text-decoration: line-through 2px var(--hud-red); }
.hud-played .hud-chip { background: #e6dfd0; }
.hud-played .hud-stamp { background: var(--hud-red); font-size: 16px; rotate: -8deg; }
/* the card that answers the jab: a yellow ring and a bigger pink shadow */
.hud-glow { box-shadow: 0 0 0 3px var(--hud-gold), 7px 7px 0 3px var(--hud-pink); }
.hud-card[aria-selected="true"]:not(:focus-visible) { border-color: var(--hud-ink); }
/* Narrow portrait phones: tighter cards so two full rows show in the crate. */
@media (orientation: portrait) and (max-width: 420px) {
  .hud-crate-list { padding: 8px 12px 8px 9px; gap: 8px 9px; }
  .hud-card { min-height: 0; padding: 5px 8px 6px; gap: 1px; }
  .hud-card-title { font-size: 17px; line-height: 1.05; }
  .hud-card-foot { gap: 4px; margin-top: 2px; padding-top: 2px; }
  .hud-card-foot .hud-chip { line-height: 1.15; padding: 1px 6px 0; }
}
/* Short landscape viewports (phones on their side): the crate is only about 310 CSS px wide, so the cards become one
   column of compact rows (title and stamp, then artist and chip) instead of tall tiles whose text wraps over the stamps. */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-crate-list { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 10px 14px 10px 10px; }
  .hud-card {
    min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; column-gap: 8px; row-gap: 1px; padding: 4px 8px; rotate: -0.6deg;
  }
  .hud-card:nth-child(even) { rotate: 0.6deg; }
  .hud-card-title { grid-column: 1 / 3; grid-row: 1; font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* The rival's name is the only thing saying whose dub it is: it wraps rather than being cut, and the chip (nowrap before) gives way to it. */
  .hud-card-artist { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.1; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .hud-card-foot { display: contents; }
  .hud-card-foot .hud-chip { grid-column: 2 / 4; grid-row: 2; justify-self: end; max-width: 9.5em; white-space: normal; text-align: center; font-size: 14px; line-height: 1.1; padding: 1px 7px 0; }
  .hud-stamp { grid-column: 3; grid-row: 1; justify-self: end; font-size: 14px; line-height: 1.1; padding: 0 5px; rotate: -3deg; }
  .hud-played .hud-stamp { font-size: 14px; rotate: -3deg; }
  .hud-glow { box-shadow: 0 0 0 3px var(--hud-gold), 5px 5px 0 3px var(--hud-pink); }
}
.hud-shake { animation: hud-shake 0.36s ease-in-out; }
@keyframes hud-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes hud-flash { 0%, 100% { background-color: #c4bcae; } 50% { background-color: #ff9c94; } }
:root[data-reduced-motion="on"] .hud-shake { animation: hud-flash 0.4s linear; }
@media (prefers-reduced-motion: reduce) { :root:not([data-reduced-motion="off"]) .hud-shake { animation: hud-flash 0.4s linear; } }
/* the DUBPLATES timer: a black-edged track on the yellow strip, the time left in red */
.hud-crate-timer {
  position: absolute; right: 12px; display: flex; align-items: center; height: 18px; box-sizing: border-box;
  border: 3px solid var(--hud-ink); border-radius: 2px; background: var(--hud-paper); overflow: hidden; pointer-events: none;
}
.hud-crate-timer-fill {
  display: block; width: 100%; height: 100%; transform-origin: left center;
  background: repeating-linear-gradient(-45deg, var(--hud-red) 0 6px, #ff6a5c 6px 12px);
}

/* ---- banners (REQ-055, REQ-148) ---- */
/* The stage column stacks from the bottom (over the crowd), so the sound signs at the top of the stage stay in view. The
   spacer takes the free room above; when there is none it shrinks to nothing and the column runs on downward (clipped), so
   nothing is ever pushed up out of the stage into the sky band. */
.hud-banners {
  position: absolute; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 6px 10px 10px; overflow: hidden; pointer-events: none;
}
.hud-banners:not(.hud-jab-zone)::before { content: ""; flex: 1 1 0; min-height: 0; margin-bottom: -8px; }
.hud-banner {
  box-sizing: border-box; max-width: 100%; font: 400 20px/1.15 var(--hud-display); letter-spacing: 0.03em; padding: 5px 14px 4px;
  border-radius: 2px; border: 3px solid var(--hud-ink); background: var(--hud-paper); color: var(--hud-ink); text-align: center;
  overflow-wrap: anywhere; box-shadow: 4px 4px 0 var(--hud-ink);
}
.hud-banner-who { display: block; font: 900 14px/1.1 var(--hud-font); letter-spacing: 0.12em; }
/* The referee's riddim call: a tilted red flyer strip across the crowd (under the signs, never over them), with a small
   black REFEREE tab on its top edge so the call itself gets the whole width and stays one line on a phone. */
.hud-referee {
  position: relative; align-self: stretch; margin: 14px -4px 6px; display: block; padding: 4px 12px 3px;
  background: var(--hud-red); color: var(--hud-ink); border: 0; border-block: 3px solid var(--hud-ink); border-radius: 0;
  box-shadow: 0 4px 0 var(--hud-paper); rotate: -1.5deg; font-size: 19px; line-height: 1.15; letter-spacing: 0.02em; text-transform: uppercase;
  animation: hud-slap 0.28s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.hud-referee .hud-banner-who {
  position: absolute; left: 14px; top: -16px; rotate: -3deg; font: 900 14px/1 var(--hud-font); letter-spacing: 0.14em; padding: 2px 6px 1px;
  background: var(--hud-ink); color: var(--hud-red); border: 2px solid var(--hud-red);
}
@media (max-width: 420px), (max-height: 420px) {
  .hud-referee { font-size: 17px; padding: 3px 8px 2px; }
  .hud-banners .hud-pull, .hud-banners .hud-nolive { font-size: 18px; padding: 4px 10px 3px; }
}
@keyframes hud-slap { from { scale: 1.18; opacity: 0; } to { scale: 1; opacity: 1; } }
/* The rival's jab: a cream speech sticker in the sky band, a red hard shadow, a tail down to the stage, the jab on a red chip. */
.hud-jab-zone { justify-content: flex-end; padding: 2px 10px 12px; overflow: visible; gap: 6px; }
.hud-jab {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; padding: 1px 9px;
  border-width: 3px; border-radius: 3px; font: 700 16px/1.2 var(--hud-font); letter-spacing: 0; box-shadow: 3px 3px 0 var(--hud-red);
}
.hud-jab::before, .hud-jab::after { content: ""; position: absolute; left: 22px; border: solid transparent; }
.hud-jab::before { bottom: -14px; border-width: 11px 9px 0 3px; border-top-color: var(--hud-ink); }
.hud-jab::after { bottom: -8px; left: 25px; border-width: 6px 5px 0 2px; border-top-color: var(--hud-paper); }
.hud-jab .hud-banner-who { display: inline; font: 800 14px/1.2 var(--hud-font); letter-spacing: 0.01em; white-space: nowrap; }
.hud-jab .hud-chip { white-space: nowrap; font-size: 16px; padding: 1px 8px 0; background: var(--hud-red); rotate: -2deg; }
.hud-crate-label {
  align-self: center; margin-top: 2px; padding: 1px 10px 0; border-width: 2px; font: 800 14px/1.2 var(--hud-font); letter-spacing: 0.02em;
  background: var(--hud-gold); box-shadow: 3px 3px 0 var(--hud-ink); rotate: 1.5deg;
}
@media (max-width: 420px) {
  .hud-jab { padding: 2px 6px; gap: 2px 6px; }
  .hud-jab .hud-chip { padding: 1px 7px 0; }
}
/* When the call is too long for one line beside the name, the name drops its "says:" (set by banners.js) so the bubble stays one line under the HYPE bar. */
.hud-jab-tight .hud-says { display: none; }
.hud-nolive { background: var(--hud-pink); rotate: -2deg; box-shadow: 4px 4px 0 var(--hud-paper); animation: hud-slap 0.28s ease-out both; }
.hud-pull {
  background: var(--hud-green); font-size: 22px; rotate: 1.5deg; box-shadow: 4px 4px 0 var(--hud-paper);
  animation: hud-pop 0.6s ease-in-out infinite alternate;
}
@keyframes hud-pop { from { scale: 1; } to { scale: 1.04; } }
.hud-coach-box { display: flex; flex-direction: column; gap: 8px; width: 100%; align-items: center; }
.hud-coach {
  box-sizing: border-box; display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 8px 6px 12px;
  background: var(--hud-paper); color: var(--hud-ink); border: 3px solid var(--hud-ink); border-radius: 3px; pointer-events: auto;
  box-shadow: 4px 4px 0 var(--hud-gold); rotate: -1deg;
}
.hud-coach-text { margin: 0; font: 700 16px/1.2 var(--hud-font); }
/* Big screens: the stage is drawn large, so the stickers on it grow with it (captions keep their fixed 16 / 20 px). */
@media (min-width: 1000px) and (min-height: 600px) {
  .hud-banner { font-size: 24px; }
  .hud-referee { font-size: 26px; padding: 5px 16px 4px; }
  .hud-referee .hud-banner-who { font-size: 16px; top: -19px; }
  .hud-jab { padding: 3px 12px; font-size: 17px; }
  .hud-jab .hud-banner-who { font-size: 17px; }
  .hud-jab .hud-chip { font-size: 21px; }
  .hud-crate-label { font-size: 17px; }
  .hud-coach-text { font-size: 19px; }
}
.hud-coach-ok { flex: none; }

/* ---- theatre offer (REQ-065): a row of stickers in the sky band ---- */
.hud-theatre-offer {
  position: absolute; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 4px 10px; overflow: hidden; pointer-events: auto;
}
.hud-offer-title {
  font: 400 24px/1 var(--hud-display); letter-spacing: 0.04em; color: var(--hud-gold); rotate: -4deg;
  text-shadow: 2px 2px 0 var(--hud-ink), -1px -1px 0 var(--hud-ink), 3px 3px 0 var(--hud-pink);
}
.hud-move { padding: 8px 14px 7px; background: var(--hud-paper); white-space: nowrap; flex: none; box-shadow: 3px 3px 0 var(--hud-pink); }
.hud-preselect { background: var(--hud-gold); box-shadow: 0 0 0 3px var(--hud-paper), 5px 5px 0 3px var(--hud-pink); }
.hud-nothanks { background: var(--hud-ink); color: var(--hud-paper); border-color: var(--hud-paper); box-shadow: 3px 3px 0 #4a4450; }

/* ---- pause button: a round yellow sticker (44 px or more; M13's pause screen uses it, the layout's `pause` zone places it) ---- */
.hud-pause {
  position: absolute; box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0; cursor: pointer; pointer-events: auto;
  background: var(--hud-gold); border: 3px solid var(--hud-ink); border-radius: 50%; touch-action: manipulation;
  box-shadow: 0 0 0 3px var(--hud-gold), 3px 3px 0 3px var(--hud-pink);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hud-pause::before, .hud-pause::after { content: ""; width: 6px; height: 40%; background: var(--hud-ink); border-radius: 1px; }
.hud-pause:active { translate: 2px 2px; box-shadow: 0 0 0 3px var(--hud-gold), 1px 1px 0 3px var(--hud-pink); }

/* ---- the announcer: present for screen readers, invisible on screen (REQ-157) ---- */
.hud-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- high contrast: white and black, no tints ---- */
:root[data-contrast="high"] .hud-captions { background: #000000; color: #ffffff; border-color: #ffffff; box-shadow: none; }
:root[data-contrast="high"] .hud-cap:not(:last-child) .hud-cap-text, :root[data-contrast="high"] .hud-cap:not(:last-child) .hud-cap-token { color: #ffffff; }
:root[data-contrast="high"] .hud-card, :root[data-contrast="high"] .hud-banner, :root[data-contrast="high"] .hud-coach { border-color: #000000; background: #ffffff; color: #000000; }
:root[data-contrast="high"] .hud-card-artist { color: #000000; }
:root[data-contrast="high"] .hud-chip { border-color: #000000; }
:root[data-contrast="high"] .hud-referee { background: #ffffff; }
:root[data-contrast="high"] .hud-referee .hud-banner-who { color: #ffffff; }

/* narrow screens: the three moves must fit one row, the group's aria-label carries the title */
.hud-theatre-offer { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 1000px) { .hud-offer-title { display: none; } }
.hud-theatre-offer { height: auto !important; overflow: visible; }
.hud-nothanks { white-space: nowrap; }
@media (max-width: 460px) { .hud-move { padding: 8px 6px 7px; font-size: 16px; } .hud-theatre-offer { gap: 5px; padding: 4px 4px; } }
@media (max-width: 360px) { .hud-move { padding: 8px 4px 7px; font-size: 15px; } }

/* The card that holds the night (2026-10-30): a stamp over the stage for each result the referee calls, with Tap to continue. */
.hud-hold-zone { position: absolute; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hud-hold {
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 90%; padding: 10px 18px 12px; pointer-events: auto;
  border: 4px solid var(--hud-ink); background: var(--hud-gold); color: var(--hud-ink); box-shadow: 6px 6px 0 var(--hud-ink);
  transform: rotate(-3deg); text-align: center; animation: hud-hold-in 0.28s cubic-bezier(.2, 1.6, .4, 1) both;
}
.hud-hold[data-kind="rival"] { background: #ff3b30; }
.hud-hold[data-kind="info"] { background: var(--hud-paper); }
.hud-hold-text { font: 400 30px/1 var(--hud-display); letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.hud-hold-sub { font: 800 18px/1.15 var(--hud-font); }
.hud-hold-go { min-height: 44px; margin-top: 2px; padding: 6px 16px; border: 3px solid var(--hud-ink); background: var(--hud-ink); color: var(--hud-paper);
  font: 400 18px/1 var(--hud-display); letter-spacing: 0.04em; cursor: pointer; }
@keyframes hud-hold-in { from { transform: rotate(-3deg) scale(1.5); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
:root[data-reduced-motion="on"] .hud-hold { animation: none; }
:root[data-contrast="high"] .hud-hold { background: #ffffff; color: #000000; box-shadow: none; transform: none; }
:root[data-contrast="high"] .hud-hold-go { background: #000000; color: #ffffff; }