/* ===========================================================================
   OPERATION RISING SUNBURN — FIELD SIMULATOR
   Portrait-first. One thumb. Designed 720x1280, letterboxed, never stretched.

   Why portrait and not landscape like killcam-arena:
   Killcam ships a rotate gate because its 16:9 field piles targets on the
   edges in portrait. This game is a vertical street crawl — portrait IS the
   native aspect, so there is no gate and no rotation nag. Landscape still
   works; the stage just centres with wider letterbox bars.
   =========================================================================== */

:root {
  --rs-bg: #05080e;
  --rs-panel: #0a1018;
  --rs-line: rgba(120, 190, 230, 0.22);
  --rs-cyan: #5fd8ff;
  --rs-cyan-dim: #2a7d9e;
  --rs-red: #ff4d5e;
  --rs-amber: #ffb347;
  --rs-green: #57e08a;
  --rs-ink: #dbe8f2;
  --rs-ink-dim: #7d90a3;
  /* The ability column is 62px wide at right:10px. Every bottom-anchored
     overlay must stop short of it or it renders underneath the buttons —
     which is exactly what the toast was doing. One value, used by all of them.
     Change the button size and this is the only number to update. */
  --rs-ab-gutter: 84px;
  --rs-mono: "Share Tech Mono", ui-monospace, monospace;
  --rs-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

.rs-body {
  background: var(--rs-bg);
  color: var(--rs-ink);
  font-family: var(--rs-cond);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  /* Kill iOS text-size inflation inside the stage and stop pull-to-refresh. */
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.rs-scan {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { .rs-scan { opacity: 0.4; } }

/* ------------------------------------------------------------------ header */

.rs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  border-bottom: 1px solid var(--rs-line);
  background: linear-gradient(180deg, #070d15, #05080e);
  position: relative;
  z-index: 12;
}

.rs-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rs-ink);
  text-decoration: none;
  font-family: var(--rs-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.rs-brand img { display: block; }

.main-nav { display: flex; gap: 14px; }
.main-nav a {
  color: var(--rs-ink-dim);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.main-nav a:hover { color: var(--rs-cyan); }

/* ------------------------------------------------------------------- stage */

.rs-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  min-height: 0;
}

.rs-stage {
  position: relative;
  width: 100%;
  max-width: min(100%, calc((100dvh - 130px) * 0.5625));
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 130px);
  margin: 0 auto;
  border: 1px solid var(--rs-line);
  border-radius: 10px;
  overflow: hidden;
  background: #04070c;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 60px rgba(0, 0, 0, 0.7);
  /* The canvas owns all pointer input; never let the browser pan or zoom it. */
  touch-action: none;
  user-select: none;
}

#rs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.rs-legal {
  max-width: 640px;
  margin: 10px auto 0;
  padding: 0 10px calc(env(safe-area-inset-bottom, 0px) + 6px);
  font-family: var(--rs-mono);
  font-size: 10px;
  line-height: 1.5;
  color: #55677a;
  text-align: center;
}
.rs-legal b { color: var(--rs-amber); }

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

.rs-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  font-family: var(--rs-mono);
}
.rs-hud[hidden] { display: none; }

.rs-hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(4, 7, 12, 0.92) 55%, transparent);
}

.rs-meters { display: flex; flex-direction: column; gap: 5px; }

.rs-meter { display: flex; align-items: center; gap: 7px; }
.rs-meter-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--rs-ink-dim);
  width: 38px;
  flex: none;
}
.rs-meter-track {
  flex: 1;
  height: 7px;
  border: 1px solid var(--rs-line);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}
.rs-meter-track > i {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transition: transform 0.18s linear, background-color 0.3s;
}
#rs-blend-fill { background: var(--rs-green); }
#rs-heat-fill  { background: var(--rs-amber); transform: scaleX(0); }
.rs-meter-val {
  font-size: 10px;
  width: 26px;
  text-align: right;
  flex: none;
  color: var(--rs-ink);
}

.rs-hud-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}
.rs-district {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--rs-cyan);
  white-space: nowrap;
}
.rs-progress-wrap {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
#rs-progress-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--rs-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s linear;
}
.rs-pause-btn {
  pointer-events: auto;
  /* 44px minimum touch target — it sits next to the progress bar where a
     mis-tap is easy, so it needs the full size even though it is secondary. */
  min-width: 44px;
  height: 44px;
  flex: none;
  background: rgba(10, 16, 24, 0.9);
  border: 1px solid var(--rs-line);
  border-radius: 5px;
  color: var(--rs-ink);
  font-family: var(--rs-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ------------------------------------------------------------ ARIA / toast */

.rs-aria-strip {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 92px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: rgba(6, 14, 22, 0.94);
  border: 1px solid rgba(95, 216, 255, 0.4);
  border-left: 3px solid var(--rs-cyan);
  border-radius: 6px;
  box-shadow: 0 0 22px rgba(95, 216, 255, 0.16);
  animation: rs-slide-in 0.24s ease-out;
}
.rs-aria-strip[hidden] { display: none; }
.rs-aria-face {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(95, 216, 255, 0.5);
  filter: saturate(1.15) brightness(1.05);
}
.rs-aria-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-aria-name {
  font-size: 8px;
  letter-spacing: 0.2em;
  color: var(--rs-cyan);
}
.rs-aria-line {
  font-size: 11px;
  line-height: 1.35;
  color: var(--rs-ink);
}

.rs-toast {
  position: absolute;
  right: var(--rs-ab-gutter);
  bottom: 128px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 6px;
  max-width: calc(100% - var(--rs-ab-gutter) - 16px);
  background: rgba(14, 8, 10, 0.95);
  border: 1px solid rgba(255, 77, 94, 0.45);
  border-radius: 6px;
  animation: rs-toast-in 0.22s ease-out;
}
.rs-toast[hidden] { display: none; }
.rs-toast-img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 3px;
  object-fit: cover;
  object-position: center 18%;
}
.rs-toast-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rs-toast-name { font-size: 8px; letter-spacing: 0.16em; color: var(--rs-red); }
.rs-toast-line { font-size: 11px; line-height: 1.3; color: #f2e4e6; }
.rs-toast.is-ns { border-color: rgba(95, 216, 255, 0.5); background: rgba(8, 12, 20, 0.95); }
.rs-toast.is-ns .rs-toast-name { color: var(--rs-cyan); }

@keyframes rs-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* Slides UP, not in from the right. The old translateX(14px) start pushed the
   toast into the ability gutter for the whole 0.22s, so it visibly passed under
   the buttons every time it appeared — the exact complaint the gutter fixed. */
@keyframes rs-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Floating score / status text spawned by the engine. */
.rs-float { position: absolute; inset: 0; overflow: hidden; }
.rs-float span {
  position: absolute;
  font-family: var(--rs-mono);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
  animation: rs-rise 1.05s ease-out forwards;
  white-space: nowrap;
}
@keyframes rs-rise {
  0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-44px) scale(1); }
}

/* --------------------------------------------------------------- abilities */

.rs-abilities {
  position: absolute;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.rs-ab {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(95, 216, 255, 0.45);
  background: radial-gradient(circle at 50% 35%, rgba(20, 40, 56, 0.96), rgba(6, 12, 20, 0.96));
  color: var(--rs-ink);
  font-family: var(--rs-mono);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  overflow: hidden;
  /* 62px hit target clears the 44px minimum with room for fat thumbs. */
  transition: transform 0.08s ease, border-color 0.2s;
}
.rs-ab:active { transform: scale(0.93); }
.rs-ab[disabled] { opacity: 0.34; cursor: default; }
.rs-ab-icon { font-size: 19px; line-height: 1; color: var(--rs-cyan); }
.rs-ab-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.rs-ab-name { font-size: 8px; letter-spacing: 0.1em; color: var(--rs-ink-dim); }
.rs-ab.is-ready { border-color: var(--rs-cyan); box-shadow: 0 0 14px rgba(95, 216, 255, 0.3); }

/* Cooldown sweep — a bottom-up curtain, cheap and readable at a glance. */
.rs-ab-cd {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.74);
  transform-origin: bottom center;
  transform: scaleY(0);
  pointer-events: none;
}

.rs-leash-tip {
  position: absolute;
  left: calc(50% - (var(--rs-ab-gutter) / 2));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  transform: translateX(-50%);
  max-width: calc(100% - var(--rs-ab-gutter) - 16px);
  padding: 6px 12px;
  background: rgba(255, 179, 71, 0.14);
  border: 1px solid rgba(255, 179, 71, 0.5);
  border-radius: 20px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--rs-amber);
  text-align: center;
  animation: rs-pulse 1.4s ease-in-out infinite;
}
.rs-leash-tip[hidden] { display: none; }
@keyframes rs-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }

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

.rs-boss {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 90px);
  z-index: 6;
  padding: 12px;
  background: rgba(5, 9, 15, 0.96);
  border: 1px solid rgba(255, 77, 94, 0.5);
  border-radius: 9px;
  font-family: var(--rs-mono);
  text-align: center;
  pointer-events: auto;
  box-shadow: 0 0 30px rgba(255, 77, 94, 0.16);
}
.rs-boss[hidden] { display: none; }
.rs-boss-kicker { margin: 0 0 3px; font-size: 8px; letter-spacing: 0.18em; color: var(--rs-red); }
.rs-boss-title { margin: 0 0 8px; font-size: 15px; letter-spacing: 0.06em; color: var(--rs-ink); }
.rs-boss-title b { color: var(--rs-amber); }
.rs-boss-sub { margin: 7px 0 0; font-size: 10px; color: var(--rs-ink-dim); }
.rs-boss-sub b { color: var(--rs-red); }

/* Inspector timing bar. */
.rs-timing {
  position: relative;
  height: 26px;
  border: 1px solid var(--rs-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.rs-timing-window {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(87, 224, 138, 0.28);
  border-left: 1px solid var(--rs-green);
  border-right: 1px solid var(--rs-green);
}
.rs-timing-needle {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--rs-amber);
  box-shadow: 0 0 10px var(--rs-amber);
}

.rs-boss-pips { display: flex; gap: 5px; justify-content: center; margin-top: 9px; }
.rs-boss-pips i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
}
.rs-boss-pips i.is-hit  { background: var(--rs-green); }
.rs-boss-pips i.is-miss { background: var(--rs-red); }

.rs-duel-opts { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.rs-duel-opts button {
  flex: 1 1 30%;
  min-width: 86px;
  min-height: 52px;
  padding: 7px 5px;
  background: rgba(16, 24, 34, 0.95);
  border: 1px solid var(--rs-line);
  border-radius: 6px;
  color: var(--rs-ink);
  font-family: var(--rs-mono);
  font-size: 10px;
  line-height: 1.25;
  cursor: pointer;
}
.rs-duel-opts button:active { transform: scale(0.96); }
.rs-duel-opts button.is-right { border-color: var(--rs-green); background: rgba(87, 224, 138, 0.18); }
.rs-duel-opts button.is-wrong { border-color: var(--rs-red); background: rgba(255, 77, 94, 0.18); }

/* ----------------------------------------------------------------- screens */

.rs-screen {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(20, 48, 68, 0.5), transparent 62%),
    rgba(4, 7, 12, 0.97);
  padding: 16px 14px calc(env(safe-area-inset-bottom, 0px) + 20px);
  font-family: var(--rs-cond);
}
.rs-screen[hidden] { display: none; }

.rs-kicker {
  margin: 0 0 4px;
  font-family: var(--rs-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--rs-cyan);
  text-align: center;
}
.rs-h1 {
  margin: 0 0 4px;
  font-size: clamp(24px, 7vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
}
.rs-h1 em { font-style: normal; color: var(--rs-amber); }
.rs-sub {
  margin: 0 auto 14px;
  max-width: 46ch;
  font-family: var(--rs-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--rs-ink-dim);
  text-align: center;
}
.rs-sub b { color: var(--rs-ink); }

.rs-btn {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 9px 0 0;
  padding: 12px 16px;
  border-radius: 7px;
  border: 1px solid var(--rs-cyan-dim);
  background: linear-gradient(180deg, rgba(24, 54, 74, 0.95), rgba(10, 22, 32, 0.95));
  color: var(--rs-ink);
  font-family: var(--rs-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.2s;
}
.rs-btn:active { transform: scale(0.985); }
.rs-btn-primary {
  border-color: var(--rs-cyan);
  background: linear-gradient(180deg, rgba(95, 216, 255, 0.26), rgba(18, 60, 84, 0.95));
  box-shadow: 0 0 22px rgba(95, 216, 255, 0.22);
  font-weight: 700;
}
.rs-btn-ghost { background: rgba(10, 16, 24, 0.8); border-color: var(--rs-line); color: var(--rs-ink-dim); }
.rs-btn[disabled] { opacity: 0.4; cursor: default; }
.rs-btn small { display: block; font-size: 9px; letter-spacing: 0.06em; color: var(--rs-ink-dim); margin-top: 3px; }

.rs-row { display: flex; gap: 8px; }
.rs-row .rs-btn { flex: 1; }

/* ARIA hero block on boot / hub. */
.rs-aria-hero {
  position: relative;
  height: 210px;
  margin: 0 auto 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.rs-aria-hero img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* Screen-blend drops the black plate without an alpha channel and makes her
     read as a projection rather than a sticker. */
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 26px rgba(95, 216, 255, 0.45)) saturate(1.1);
  animation: rs-holo 4.2s ease-in-out infinite;
}
@keyframes rs-holo { 0%, 100% { opacity: 0.94; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rs-aria-hero img { animation: none; } }

.rs-aria-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  width: 190px;
  height: 16px;
  background: radial-gradient(ellipse, rgba(95, 216, 255, 0.5), transparent 70%);
  pointer-events: none;
}

/* Stat + card blocks. */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  gap: 7px;
  margin: 12px 0;
}
.rs-stat {
  padding: 8px 6px;
  border: 1px solid var(--rs-line);
  border-radius: 6px;
  background: rgba(10, 16, 24, 0.7);
  text-align: center;
}
.rs-stat b { display: block; font-family: var(--rs-mono); font-size: 17px; color: var(--rs-amber); }
.rs-stat span { display: block; font-family: var(--rs-mono); font-size: 8px; letter-spacing: 0.1em; color: var(--rs-ink-dim); margin-top: 2px; }

.rs-section-label {
  margin: 16px 0 7px;
  font-family: var(--rs-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--rs-cyan);
  border-bottom: 1px solid var(--rs-line);
  padding-bottom: 4px;
}

/* Selectable tiles — operatives, districts, loadout pieces, supports. */
.rs-tiles { display: grid; gap: 7px; }
.rs-tiles.is-2 { grid-template-columns: 1fr 1fr; }
.rs-tiles.is-3 { grid-template-columns: repeat(3, 1fr); }

.rs-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 6px;
  border: 1px solid var(--rs-line);
  border-radius: 7px;
  background: rgba(10, 16, 24, 0.72);
  color: var(--rs-ink);
  font-family: var(--rs-mono);
  cursor: pointer;
  text-align: center;
  min-height: 52px;
  transition: border-color 0.16s, background-color 0.16s;
}
.rs-tile:active { transform: scale(0.98); }
.rs-tile.is-on {
  border-color: var(--rs-cyan);
  background: rgba(95, 216, 255, 0.14);
  box-shadow: inset 0 0 18px rgba(95, 216, 255, 0.12);
}
.rs-tile.is-locked { opacity: 0.45; cursor: default; }
.rs-tile img { width: 100%; max-width: 62px; height: 62px; object-fit: contain; }
/* ARIA's wardrobe thumbnails are JPEG on black — screen-blend them so they sit
   on the tile as projections rather than as black rectangles. */
.rs-tile img.rs-look {
  max-width: 74px;
  height: 88px;
  object-fit: cover;
  object-position: center 12%;
  border-radius: 4px;
  mix-blend-mode: screen;
  filter: saturate(1.1) brightness(1.06);
}
.rs-tile-name { font-size: 10px; letter-spacing: 0.05em; }
.rs-tile-meta { font-size: 8px; color: var(--rs-ink-dim); line-height: 1.3; }
.rs-tile-meta .up { color: var(--rs-green); }
.rs-tile-meta .down { color: var(--rs-red); }
.rs-tile-lock {
  position: absolute;
  top: 4px;
  right: 5px;
  font-size: 8px;
  color: var(--rs-amber);
  letter-spacing: 0.06em;
}
.rs-tile-blurb {
  font-size: 8px;
  line-height: 1.35;
  color: #6f8394;
  font-style: italic;
}

/* Loadout slot strip. */
.rs-slots { display: flex; gap: 5px; margin-bottom: 4px; }
.rs-slot {
  flex: 1;
  padding: 6px 3px;
  border: 1px solid var(--rs-line);
  border-radius: 5px;
  background: rgba(10, 16, 24, 0.7);
  font-family: var(--rs-mono);
  font-size: 8px;
  text-align: center;
  color: var(--rs-ink-dim);
  cursor: pointer;
  min-height: 44px;
}
.rs-slot.is-on { border-color: var(--rs-cyan); color: var(--rs-cyan); }
.rs-slot b { display: block; font-size: 9px; color: var(--rs-ink); margin-top: 2px; line-height: 1.2; }

/* Blend forecast bar in the hub. */
.rs-forecast {
  margin: 10px 0 2px;
  padding: 9px 10px;
  border: 1px solid var(--rs-line);
  border-radius: 6px;
  background: rgba(10, 16, 24, 0.7);
  font-family: var(--rs-mono);
  font-size: 10px;
}
.rs-forecast-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.rs-forecast-row span { color: var(--rs-ink-dim); }
.rs-forecast-row b { color: var(--rs-ink); }
.rs-forecast-bar { height: 8px; border: 1px solid var(--rs-line); border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.05); }
.rs-forecast-bar i { display: block; height: 100%; background: var(--rs-green); }
.rs-forecast-note { margin: 6px 0 0; font-size: 9px; line-height: 1.45; color: #6f8394; font-style: italic; }

/* The Commander's ask — a timed two-button decision over the playfield. */
.rs-ask {
  position: absolute;
  left: calc(50% - (var(--rs-ab-gutter) / 2));
  /* Clears the toast, which occupies the band from bottom:128 up to roughly
     bottom:197 once it wraps to two lines. At 148 the ask sat on top of it and
     hid whatever the Commander had just said. */
  bottom: 206px;
  transform: translateX(-50%);
  width: min(340px, calc(100% - var(--rs-ab-gutter) - 24px));
  padding: 10px 12px 12px;
  border: 1px solid rgba(255, 179, 71, 0.55);
  border-radius: 10px;
  background: rgba(14, 12, 8, 0.94);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6);
  font-family: var(--rs-mono);
  text-align: center;
  z-index: 30;
  animation: rs-ask-in 0.18s ease-out;
}
@keyframes rs-ask-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
/* Very narrow phones: the column plus a readable panel will not both fit, so
   lift the ask clear of the buttons instead of squeezing it. */
@media (max-width: 400px) {
  .rs-ask { left: 50%; bottom: 232px; width: calc(100% - 24px); }
}
.rs-ask-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.14); overflow: hidden; margin-bottom: 8px; }
.rs-ask-bar i { display: block; height: 100%; width: 100%; background: #ffb347; transform-origin: left center; }
.rs-ask-kicker { margin: 0; font-size: 8px; letter-spacing: 0.2em; color: #ffb347; }
.rs-ask-what { margin: 4px 0 10px; font-size: 12px; line-height: 1.4; color: var(--rs-ink); }
.rs-ask-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rs-ask-btn {
  min-height: 46px; border-radius: 7px; cursor: pointer;
  font-family: var(--rs-mono); font-size: 12px; letter-spacing: 0.08em;
  border: 1px solid var(--rs-line); background: rgba(255,255,255,0.05); color: var(--rs-ink);
}
.rs-ask-btn.is-let  { border-color: rgba(255,179,71,0.6); color: #ffb347; }
.rs-ask-btn.is-veto { border-color: rgba(87,224,138,0.5); color: var(--rs-green); }
.rs-ask-btn:active { transform: translateY(1px); }

/* Endless tile — the thing behind the campaign. */
.rs-endless {
  margin: 12px 0 4px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(255, 77, 143, 0.4);
  border-left: 3px solid #ff4d8f;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40, 12, 26, 0.75), rgba(10, 16, 24, 0.7));
  text-align: left;
  font-family: var(--rs-mono);
}
.rs-endless.is-locked { border-color: var(--rs-line); border-left-color: #45596b; opacity: 0.7; }
.rs-endless-kicker { display: block; font-size: 8px; letter-spacing: 0.16em; color: #ff8ab5; }
.rs-endless.is-locked .rs-endless-kicker { color: var(--rs-ink-dim); }
.rs-endless b { display: block; margin: 5px 0 6px; font-size: 17px; letter-spacing: 0.06em; color: var(--rs-ink); }
.rs-endless p { margin: 0 0 8px; font-size: 10.5px; line-height: 1.45; color: var(--rs-ink-dim); }
.rs-endless-meta { margin-bottom: 9px; font-size: 9px; letter-spacing: 0.1em; color: #6f8394; }

/* Accessibility rows — each toggle carries its own explanation. */
.rs-opt { margin-bottom: 4px; }
.rs-opt-note {
  margin: -2px 0 8px;
  font-size: 9.5px;
  line-height: 1.4;
  color: #6f8394;
  font-family: var(--rs-mono);
  text-align: left;
}

/* Standings — what the subcommittee did about your last run. */
.rs-standing {
  margin: 10px 0;
  padding: 9px 11px;
  border: 1px solid var(--rs-line);
  border-left: 3px solid var(--rs-ink-dim);
  border-radius: 6px;
  background: rgba(10, 16, 24, 0.7);
  text-align: left;
  font-family: var(--rs-mono);
}
.rs-standing.is-finding      { border-left-color: #ff4d5e; background: rgba(46, 14, 20, 0.5); }
.rs-standing.is-commendation { border-left-color: var(--rs-green); background: rgba(12, 38, 24, 0.45); }
.rs-standing.is-cleared      { border-left-color: var(--rs-cyan); background: rgba(12, 32, 44, 0.45); }
.rs-standing.is-none         { border-left-color: #45596b; opacity: 0.85; }
.rs-standing.is-banner       { margin: 2px 0 12px; }
.rs-standing.is-inline       { margin: 10px 0 0; }
.rs-standing-kicker { display: block; font-size: 8px; letter-spacing: 0.16em; color: var(--rs-ink-dim); }
.rs-standing.is-finding .rs-standing-kicker      { color: #ff8a94; }
.rs-standing.is-commendation .rs-standing-kicker { color: var(--rs-green); }
.rs-standing.is-cleared .rs-standing-kicker      { color: var(--rs-cyan); }
.rs-standing b { display: block; margin: 4px 0 3px; font-size: 13px; letter-spacing: 0.04em; color: var(--rs-ink); }
.rs-standing p { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--rs-ink-dim); }
.rs-standing q { display: block; margin-top: 5px; font-size: 10px; color: #6f8394; font-style: italic; }

/* Daily tasking order — the hub's headline, above phase select. */
.rs-daily {
  margin: 4px 0 14px;
  padding: 11px 12px 12px;
  border: 1px solid rgba(95, 216, 255, 0.34);
  border-left: 3px solid var(--rs-cyan);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 34, 48, 0.9), rgba(10, 16, 24, 0.72));
  text-align: left;
  font-family: var(--rs-mono);
}
.rs-daily.is-done { border-left-color: var(--rs-green); opacity: 0.92; }
.rs-daily-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rs-daily-kicker { font-size: 8px; letter-spacing: 0.18em; color: var(--rs-cyan); }
.rs-daily-date { font-size: 9px; color: var(--rs-ink-dim); }
.rs-daily-district { display: block; margin: 5px 0 7px; font-size: 16px; letter-spacing: 0.04em; color: var(--rs-ink); }
.rs-daily-conds { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.rs-cond {
  font-size: 8.5px; letter-spacing: 0.08em; padding: 3px 6px;
  border: 1px solid rgba(255, 179, 71, 0.4); border-radius: 3px;
  color: #ffb347; background: rgba(255, 179, 71, 0.08);
}
.rs-daily-pre { margin: 0 0 9px; font-size: 10px; line-height: 1.45; color: var(--rs-ink-dim); font-style: italic; }
.rs-btn-go { width: 100%; }
.rs-daily-result {
  padding: 8px; border-radius: 5px; text-align: center;
  background: rgba(87, 224, 138, 0.1); border: 1px solid rgba(87, 224, 138, 0.3);
  font-size: 13px; letter-spacing: 0.06em; color: var(--rs-green);
}
.rs-daily-result span { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.05em; color: var(--rs-ink-dim); }
.rs-daily-meta { margin-top: 8px; font-size: 8.5px; letter-spacing: 0.1em; color: #6f8394; text-align: center; }
.rs-cond-list { margin: 4px 0 10px; padding-left: 16px; }
.rs-cond-list li { font-size: 10.5px; line-height: 1.5; color: var(--rs-ink-dim); margin-bottom: 5px; }
.rs-cond-list b { color: #ffb347; }
.rs-small { font-size: 10px; }

/* Briefing support card — the PAWS unit art at a size where it actually reads. */
.rs-support-card {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 12px 0 4px;
  padding: 9px;
  border: 1px solid var(--rs-line);
  border-left: 3px solid var(--rs-green);
  border-radius: 7px;
  background: rgba(10, 16, 24, 0.75);
  text-align: left;
}
.rs-support-card img {
  width: 104px;
  flex: none;
  align-self: center;
  border-radius: 5px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(87, 224, 138, 0.3);
}
.rs-support-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-family: var(--rs-mono);
  justify-content: center;
}
.rs-support-kicker { font-size: 8px; letter-spacing: 0.16em; color: var(--rs-green); }
.rs-support-meta b { font-size: 14px; letter-spacing: 0.05em; color: var(--rs-ink); }
.rs-support-desc { font-size: 10px; line-height: 1.4; color: var(--rs-ink-dim); }
.rs-support-meta q { font-size: 10px; line-height: 1.4; color: #6f8394; font-style: italic; }

/* Hearing transcript. */
.rs-transcript {
  margin: 10px 0;
  padding: 12px;
  border: 1px solid var(--rs-line);
  border-left: 3px solid var(--rs-amber);
  border-radius: 6px;
  background: rgba(10, 14, 20, 0.85);
  font-family: var(--rs-mono);
  font-size: 11px;
  line-height: 1.65;
}
.rs-testimony { margin: 0 0 11px; }
.rs-testimony:last-child { margin-bottom: 0; }
.rs-testimony b {
  display: block;
  font-size: 8px;
  letter-spacing: 0.16em;
  margin-bottom: 2px;
}
.rs-testimony.is-pa    b { color: var(--rs-ink-dim); }
.rs-testimony.is-cmd   b { color: var(--rs-red); }
.rs-testimony.is-ns    b { color: var(--rs-cyan); }
.rs-testimony.is-aria  b { color: var(--rs-green); }
.rs-testimony.is-chair b { color: var(--rs-amber); }
.rs-testimony q { font-style: normal; color: var(--rs-ink); }

.rs-verdict {
  margin: 12px 0;
  padding: 12px;
  text-align: center;
  border: 1px solid var(--rs-amber);
  border-radius: 7px;
  background: rgba(255, 179, 71, 0.1);
}
.rs-verdict b { display: block; font-family: var(--rs-mono); font-size: 21px; color: var(--rs-amber); letter-spacing: 0.06em; }
.rs-verdict span { display: block; font-family: var(--rs-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--rs-ink-dim); margin-top: 4px; }

/* Pause / dialog panel. */
.rs-panel { max-width: 380px; margin: 0 auto; }

.rs-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rs-line);
  font-family: var(--rs-mono);
  font-size: 11px;
  color: var(--rs-ink-dim);
}
.rs-toggle {
  min-width: 74px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--rs-line);
  border-radius: 5px;
  background: rgba(10, 16, 24, 0.8);
  color: var(--rs-ink-dim);
  font-family: var(--rs-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.rs-toggle.is-on { border-color: var(--rs-green); color: var(--rs-green); }

/* Landscape: the stage keeps 9:16 and the letterbox widens. Nothing stretches. */
@media (orientation: landscape) and (max-height: 560px) {
  .rs-top { padding-top: calc(env(safe-area-inset-top, 0px) + 4px); padding-bottom: 4px; }
  .rs-brand span { display: none; }
  .rs-legal { display: none; }
  .rs-stage { max-height: calc(100dvh - 56px); max-width: calc((100dvh - 56px) * 0.5625); }
}