/* Riftcast stream overlay. A self-contained island: it renders inside OBS with no site
   stylesheet, and inside the setup page preview, so it pins its own tokens instead of
   using the app.css theme tokens. Dark is the default; .rco-light is the streamer's
   light option, independent of the site theme. */

.rco {
  --rco-panel: rgba(16, 22, 37, 0.90);
  --rco-ink: #e4ecf8;
  --rco-inkSoft: #c7d2e4;
  --rco-hair: rgba(228, 236, 248, 0.14);
  --rco-blue: #60a5fa;
  --rco-red: #f87171;
  --rco-neutralFill: #c7d2e4;
  --rco-up: #4ade80;
  --rco-down: #f87171;
  --rco-markBg: rgba(34, 211, 238, 0.16);
  --rco-mark: #22d3ee;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--rco-ink);
  /* zoom, not transform: it resizes layout too, so a scaled card is never clipped by the
     transparent page around it (OBS renders with Chromium, which supports zoom). */
  zoom: var(--rco-scale, 1);
  line-height: 1.2;
  /* Small text must survive OBS scaling and stream compression: grayscale AA and exact glyph
     positioning keep it crisp on a transparent background. */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.rco.rco-light {
  --rco-panel: rgba(255, 255, 255, 0.94);
  --rco-ink: #172033;
  --rco-inkSoft: #3d4a63;
  --rco-hair: rgba(23, 32, 51, 0.14);
  --rco-blue: #2563eb;
  --rco-red: #dc2626;
  --rco-neutralFill: #3d4a63;
  --rco-up: #15803d;
  --rco-down: #dc2626;
  --rco-markBg: rgba(14, 116, 144, 0.14);
  --rco-mark: #0e7490;
}

.rco *, .rco *::before, .rco *::after { box-sizing: border-box; }

.rco-blue { color: var(--rco-blue); }
.rco-red { color: var(--rco-red); }
.rco-neutral { color: var(--rco-ink); }
.rco-team { font-weight: 800; letter-spacing: .02em; }
.rco-pct { font-weight: 800; font-variant-numeric: tabular-nums; }

.rco-brand { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rco-inkSoft); letter-spacing: .04em; white-space: nowrap; }
.rco-mark { width: 10px; height: 10px; border-radius: 3px; background: var(--rco-mark); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

.rco-up { color: var(--rco-up); font-weight: 700; white-space: nowrap; }
.rco-down { color: var(--rco-down); font-weight: 700; white-space: nowrap; }
.rco-tri-up, .rco-tri-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-right: 3px; vertical-align: 1px; }
.rco-tri-up { border-bottom: 6px solid var(--rco-up); }
.rco-tri-down { border-top: 6px solid var(--rco-down); }

/* ---- card (default) ---- */
.rco-card { width: 300px; background: var(--rco-panel); border: 1px solid var(--rco-hair); border-radius: 10px; padding: 10px 12px; }
.rco-head { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rco-inkSoft); margin-bottom: 8px; }
.rco-headLeft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rco-line { display: grid; grid-template-columns: 58px 1fr 46px; align-items: center; gap: 8px; margin: 5px 0; }
.rco-line .rco-team { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rco-line .rco-pct { text-align: right; font-size: 16px; }
.rco-track { height: 8px; border-radius: 4px; background: var(--rco-hair); overflow: hidden; }
.rco-fill { display: block; height: 100%; border-radius: 4px; background: currentColor; transition: width .6s ease; }
.rco-fill.rco-neutral { color: var(--rco-neutralFill); }
.rco-note { font-size: 12px; color: var(--rco-inkSoft); margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--rco-hair); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rco-noteLeft { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- compact pill ---- */
.rco-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--rco-panel); border: 1px solid var(--rco-hair); border-radius: 999px; padding: 7px 14px 7px 8px; font-size: 14px; white-space: nowrap; }
.rco-pillMark { width: 26px; height: 26px; border-radius: 50%; background: var(--rco-markBg); position: relative; flex: none; }
.rco-pillMark::after { content: ""; position: absolute; inset: 7px; background: var(--rco-mark); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.rco-pillTeam { display: inline-flex; gap: 6px; align-items: baseline; }
.rco-sep { width: 1px; height: 18px; background: var(--rco-hair); }
.rco-tag { font-size: 12px; color: var(--rco-inkSoft); }

.rco-debug { margin-top: 4px; font: 11px/1.3 monospace; color: #fff; background: rgba(0, 0, 0, .7); padding: 2px 4px; width: fit-content; }