/* Riverrun — scoped HUD + overlay styles. Everything lives under #riverrun. */

/* Silkscreen is vendored so the cabinet build works offline */
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../vendor/silkscreen-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Silkscreen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../vendor/silkscreen-700.woff2') format('woff2');
}

:root {
  --rr-mint: #6ef5d9;
  --rr-pink: #ff5d7e;
  --rr-amber: #ffc23f;
  --rr-ink: rgba(12, 16, 28, 0.62);
  --rr-font: 'Silkscreen', monospace;
}

/* demo page chrome (host page can ignore / override) */
html, body {
  margin: 0;
  height: 100%;
  background: #0c1018;
}

#riverrun {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--rr-font);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#riverrun .rr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

/* ---------- playfield frame ---------- */

/* pinned by main.js to the fixed-aspect playfield box; HUD + overlays live inside */
#riverrun .rr-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  container-type: size; /* cqh = % of the playfield box height */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 48px rgba(0, 0, 0, 0.85);
}

/* CRT on/off tag (shown briefly when C is pressed) */
#riverrun .rr-crt-tag {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 6px 10px;
  font-size: 13px;
  letter-spacing: 2px;
  color: #f2f6ff;
  background: var(--rr-ink);
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
}

#riverrun .rr-crt-tag.show { animation: rr-tag 1.6s ease-out forwards; }

@keyframes rr-tag {
  0% { opacity: 0; transform: translateY(6px); }
  12% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- HUD ---------- */

#riverrun .rr-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#riverrun .rr-top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#riverrun .rr-lives {
  display: flex;
  gap: 6px;
  min-width: 70px;
  padding-top: 4px;
}

#riverrun .rr-life {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid var(--rr-mint);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  transition: opacity 0.3s, transform 0.3s;
}

#riverrun .rr-life.gone {
  opacity: 0.18;
  transform: scale(0.8);
  border-bottom-color: #8a93a6;
}

#riverrun .rr-mid {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#riverrun .rr-progress {
  display: flex;
  gap: 3px;
  width: min(420px, 60%);
  height: 14px;
  padding: 3px;
  background: var(--rr-ink);
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#riverrun .rr-progress.flash {
  animation: rr-bar-flash 0.7s ease-out;
}

@keyframes rr-bar-flash {
  0% { box-shadow: 0 0 0 3px rgba(110, 245, 217, 0.9), 0 0 24px rgba(110, 245, 217, 0.9); }
  100% { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); }
}

/* floating score numbers */
#riverrun .rr-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 15px;
  letter-spacing: 1px;
  color: #fff3a8;
  text-shadow: 0 0 10px rgba(255, 194, 63, 0.8), 0 2px 0 rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: rr-pop 0.85s ease-out forwards;
}

#riverrun .rr-pop.big {
  font-size: 24px;
  color: var(--rr-mint);
  text-shadow: 0 0 16px rgba(110, 245, 217, 0.9), 0 3px 0 rgba(0, 0, 0, 0.6);
}

@keyframes rr-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}

#riverrun .rr-seg {
  flex: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.25s, box-shadow 0.25s;
}

#riverrun .rr-seg.on {
  background: var(--rr-mint);
  box-shadow: 0 0 8px rgba(110, 245, 217, 0.7);
}

#riverrun .rr-scoreline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

#riverrun .rr-badge {
  display: none;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--rr-amber);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

#riverrun .rr-badge.show { display: inline; }

#riverrun .rr-score {
  font-size: 22px;
  letter-spacing: 2px;
  color: #f2f6ff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(110, 245, 217, 0.25);
}

#riverrun .rr-combo {
  height: 20px;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--rr-amber);
  text-shadow: 0 0 12px rgba(255, 194, 63, 0.7), 0 2px 0 rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.18s, transform 0.18s;
}

#riverrun .rr-combo.show {
  opacity: 1;
  transform: scale(1);
}

#riverrun .rr-combo.bump {
  animation: rr-combo-bump 0.22s ease-out;
}

@keyframes rr-combo-bump {
  0% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

#riverrun .rr-mute {
  pointer-events: auto;
  min-width: 70px;
  display: flex;
  justify-content: flex-end;
}

#riverrun button.rr-icon-btn {
  pointer-events: auto;
  background: var(--rr-ink);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #e8edf8;
  transition: transform 0.15s, background 0.15s;
}

#riverrun button.rr-icon-btn:hover {
  transform: scale(1.08);
  background: rgba(30, 38, 58, 0.8);
}

#riverrun button.rr-icon-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* fuel gauge */
#riverrun .rr-fuel {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--rr-ink);
  border-radius: 14px;
  backdrop-filter: blur(4px);
}

#riverrun .rr-fuel svg {
  width: 16px;
  height: 16px;
  fill: var(--rr-mint);
  flex-shrink: 0;
}

#riverrun .rr-fuel-bar {
  width: min(260px, 36vw);
  height: 12px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

#riverrun .rr-fuel-fill {
  height: 100%;
  width: 100%;
  border-radius: 7px;
  background: var(--rr-mint); /* JS swaps mint -> amber -> pink as fuel drops */
  transition: width 0.2s linear, background 0.4s;
}

#riverrun .rr-fuel.low {
  animation: rr-pulse 0.7s infinite;
}

@keyframes rr-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 126, 0); }
  50% { box-shadow: 0 0 0 5px rgba(255, 93, 126, 0.45); }
}

/* ---------- overlays ---------- */

/* ---------- overlays: title / turn / game over ----------
   Pixel-arcade panel: the picture dims behind scanlines, a colour-cycling
   frame, hard-edged shadows, square bevelled buttons. Text stays DOM (crisp
   at any size) but nothing here is soft, round or blurred. */
#riverrun .rr-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 4px),
    rgba(6, 8, 16, 0.74);
  opacity: 1;
  transition: opacity 0.25s steps(4);
}

/* the frame: two pixel borders that cycle through the palette like an attract screen */
#riverrun .rr-overlay::before {
  content: '';
  position: absolute;
  inset: 9% 11%;
  border: 4px solid var(--rr-mint);
  box-shadow: 0 0 0 4px #0c1018, 0 0 0 8px var(--rr-pink), inset 0 0 0 4px #0c1018, inset 0 0 0 6px rgba(255, 255, 255, 0.12);
  pointer-events: none;
  animation: rr-frame 2.4s steps(1) infinite;
}

@keyframes rr-frame {
  0%   { border-color: var(--rr-mint);  box-shadow: 0 0 0 4px #0c1018, 0 0 0 8px var(--rr-pink),  inset 0 0 0 4px #0c1018, inset 0 0 0 6px rgba(255, 255, 255, 0.12); }
  33%  { border-color: var(--rr-amber); box-shadow: 0 0 0 4px #0c1018, 0 0 0 8px var(--rr-mint),  inset 0 0 0 4px #0c1018, inset 0 0 0 6px rgba(255, 255, 255, 0.12); }
  66%  { border-color: var(--rr-pink);  box-shadow: 0 0 0 4px #0c1018, 0 0 0 8px var(--rr-amber), inset 0 0 0 4px #0c1018, inset 0 0 0 6px rgba(255, 255, 255, 0.12); }
}

#riverrun .rr-overlay > * { position: relative; }

#riverrun .rr-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* the title: chunky pixel letters with a stacked hard shadow, colours cycle */
#riverrun .rr-logo {
  font-size: clamp(26px, 8cqh, 96px);
  font-weight: 700;
  letter-spacing: 6px;
  color: #f2f6ff;
  text-shadow: 3px 3px 0 var(--rr-pink), 6px 6px 0 #0c1018;
  animation: rr-logo 1.6s steps(1) infinite;
  padding: 0 10px;
}

@keyframes rr-logo {
  0%   { color: #f2f6ff;        text-shadow: 3px 3px 0 var(--rr-pink),  6px 6px 0 #0c1018; }
  25%  { color: var(--rr-mint);  text-shadow: 3px 3px 0 var(--rr-pink),  6px 6px 0 #0c1018; }
  50%  { color: var(--rr-amber); text-shadow: 3px 3px 0 var(--rr-mint),  6px 6px 0 #0c1018; }
  75%  { color: #f2f6ff;        text-shadow: 3px 3px 0 var(--rr-amber), 6px 6px 0 #0c1018; }
}

/* square bevelled cabinet buttons */
#riverrun .rr-big-btn {
  pointer-events: auto;
  width: 84px;
  height: 58px;
  border-radius: 0;
  border: 4px solid #0c1018;
  background: var(--rr-mint);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 5px 5px 0 #0c1018, inset -4px -4px 0 rgba(0, 0, 0, 0.28), inset 4px 4px 0 rgba(255, 255, 255, 0.35);
  transition: none;
}

#riverrun .rr-big-btn:hover,
#riverrun .rr-big-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #0c1018, inset -4px -4px 0 rgba(0, 0, 0, 0.28), inset 4px 4px 0 rgba(255, 255, 255, 0.35);
}

#riverrun .rr-big-btn svg {
  width: 30px;
  height: 30px;
  fill: #0c1018;
}

#riverrun .rr-starts {
  display: flex;
  gap: 26px;
}

#riverrun .rr-play,
#riverrun .rr-play2 {
  --tile: var(--rr-mint);
  width: clamp(84px, 16cqh, 180px);
  height: clamp(54px, 10cqh, 116px);
  font-family: var(--rr-font);
  font-weight: 700;
  font-size: clamp(22px, 5cqh, 56px);
  color: #0c1018;
  letter-spacing: 1px;
}

#riverrun .rr-play2 { --tile: var(--rr-amber); background: var(--rr-amber); }

/* title picker (controls.js seatPicker): the stick highlights one tile, the
   other sits dark with just its colour on the border and label */
#riverrun .rr-controls .rr-big-btn:not(.sel) {
  background: #1a2440;
  border-color: var(--tile);
  color: var(--tile);
  box-shadow: 5px 5px 0 #0c1018;
}

#riverrun .rr-controls .rr-big-btn.sel {
  outline: 4px solid #f2f6ff;
  outline-offset: 4px;
}

/* blinking pointer over the highlighted tile */
#riverrun .rr-controls .rr-big-btn.sel::before {
  content: '\25BC';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5em);
  transform: translateX(-50%);
  font-size: 0.8em;
  color: #f2f6ff;
  text-shadow: 3px 3px 0 #0c1018;
  animation: rr-blink 0.8s steps(1) infinite;
}

#riverrun .rr-controls .rr-big-btn {
  position: relative;
  margin: 1.4em 0 1.2cqh;   /* top: room for the pointer */
}

/* blinking attract prompt, with the classic arrows */
#riverrun .rr-press {
  font-size: 15px;
  letter-spacing: 4px;
  color: #f2f6ff;
  text-shadow: 2px 2px 0 #0c1018;
  animation: rr-blink 1s steps(1) infinite;
}

#riverrun .rr-press::before { content: '\25B6\00a0\00a0'; color: var(--rr-amber); }
#riverrun .rr-press::after  { content: '\00a0\00a0\25C0'; color: var(--rr-amber); }

@keyframes rr-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* high score line */
#riverrun .rr-hi {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: clamp(15px, 3cqh, 34px);
  letter-spacing: 3px;
  color: var(--rr-amber);
  text-shadow: 2px 2px 0 #0c1018;
}

#riverrun .rr-hi-label { color: var(--rr-pink); }

/* turn switch interstitial */
#riverrun .rr-switch-badge {
  font-size: clamp(38px, 8vw, 64px);
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--rr-mint);
  text-shadow: 3px 3px 0 var(--rr-pink), 6px 6px 0 #0c1018;
}

#riverrun .rr-switch-lives { padding-top: 0; }

#riverrun .rr-switch-score {
  font-size: clamp(22px, 4vw, 32px);
  color: #f2f6ff;
  letter-spacing: 3px;
  text-shadow: 3px 3px 0 #0c1018;
}

/* game over score rows */
#riverrun .rr-final-scores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#riverrun .rr-final-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

#riverrun .rr-final-badge {
  font-size: 18px;
  letter-spacing: 2px;
  color: #dfe6f5;
  text-shadow: 2px 2px 0 #0c1018;
}

#riverrun .rr-final-row.best .rr-final-score {
  color: var(--rr-mint);
  animation: rr-logo 1.6s steps(1) infinite;
}

/* key hints: square pixel keycaps */
#riverrun .rr-keys {
  display: flex;
  gap: 22px;
  align-items: center;
}

#riverrun .rr-keygroup {
  display: flex;
  gap: 5px;
  align-items: center;
}

#riverrun .rr-kbd {
  min-width: 30px;
  height: 28px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  background: #1a2440;
  border: 2px solid #dfe6f5;
  border-radius: 0;
  box-shadow: 3px 3px 0 #0c1018;
  color: #f2f6ff;
  font-size: 13px;
}

#riverrun .rr-kbd.wide { min-width: 74px; }

#riverrun .rr-keyhint {
  font-size: 15px;
  color: var(--rr-amber);
  text-shadow: 2px 2px 0 #0c1018;
}

/* controls card (src/controls.js): action | 1P | 2P, cabinet input on the cap,
   keyboard keys on the small line under it */
/* the title holds logo, prompt and the card (tiles as its header): a little
   tighter so three-row cards clear the frame in a 480-line box */
#riverrun .rr-start {
  gap: clamp(8px, 2.4cqh, 28px);
  justify-content: flex-start;
  padding: 12cqh 0 10cqh;   /* inside the frame (inset 9%) */
}

/* the logo is the title at the top; the card centres in the space under it */
#riverrun .rr-start .rr-controls { margin: auto 0; }

/* sized off the box height (cqh) so it reads on a 1080p cabinet as well as a
   small window */
#riverrun .rr-controls {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.8cqh 2.4cqh;
  align-items: center;
  justify-items: center;
}

#riverrun .rr-ctl-seat {
  font-size: clamp(16px, 3.4cqh, 40px);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #0c1018;
}

#riverrun .rr-ctl-seat.rr-ctl-p1 { color: var(--rr-mint); }
#riverrun .rr-ctl-seat.rr-ctl-p2 { color: var(--rr-amber); }

/* level with the cap, not the cap + how line */
#riverrun .rr-ctl-action {
  justify-self: end;
  align-self: start;
  display: flex;
  align-items: center;
  height: calc(1.7 * clamp(17px, 3.8cqh, 44px));
  font-size: clamp(16px, 3.4cqh, 40px);
  letter-spacing: 2px;
  color: #f2f6ff;
  text-shadow: 2px 2px 0 #0c1018;
}

#riverrun .rr-ctl-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqh;
}

/* the cap is the actual key */
#riverrun .rr-ctl-cap {
  min-width: 5.5em;
  height: 1.7em;
  padding: 0 0.6em;
  display: grid;
  place-items: center;
  background: #1a2440;
  border: 3px solid var(--rr-mint);
  box-shadow: 3px 3px 0 #0c1018;
  color: #f2f6ff;
  font-size: clamp(17px, 3.8cqh, 44px);
  letter-spacing: 2px;
}

#riverrun .rr-ctl-cell.rr-ctl-p2 .rr-ctl-cap { border-color: var(--rr-amber); }

#riverrun .rr-ctl-keys {
  font-size: clamp(12px, 2.4cqh, 28px);
  letter-spacing: 1px;
  color: #c3cce2;
  text-shadow: 2px 2px 0 #0c1018;
}

#riverrun .rr-final-score {
  font-size: clamp(32px, 6.5vw, 58px);
  color: var(--rr-amber);
  letter-spacing: 4px;
  text-shadow: 3px 3px 0 var(--rr-pink), 6px 6px 0 #0c1018;
}

#riverrun .rr-skull {
  font-size: 40px;
  color: var(--rr-pink);
  text-shadow: 3px 3px 0 #0c1018;
}

/* frame-time meter (F3) */
#riverrun .rr-perf {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 9;
  padding: 6px 8px;
  background: rgba(6, 8, 16, 0.8);
  border: 2px solid var(--rr-amber);
  color: var(--rr-amber);
  font-family: var(--rr-font);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre;
  pointer-events: none;
}