* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: transparent; overflow: hidden; }
body {
  font-family: 'Rajdhani', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body.hidden #widget { opacity: 0; pointer-events: none; }
body.hidden #pos-config { display: none; }

:root {
  --red: #E63946;
  --ink: #f6f8fc;         /* primary values / placeholder dashes */
  --ink-2: #d6dde8;       /* secondary values */
  --mut: #a4aebd;         /* labels (readable, not washed out) */
  --up: #3ad884;
  --down: #ff6a6a;
  --panel: rgba(255,255,255,0.05);
  --hair: rgba(255,255,255,0.11);
}

.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 13px var(--red), 0 0 3px var(--red); display: inline-block; flex: none; }
.brandmark { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 2.2px; font-size: 19px; color: #fff; text-transform: uppercase; text-shadow: 0 0 14px rgba(255,255,255,0.18); }
.brandmark.small { font-size: 11px; letter-spacing: 2.2px; color: var(--ink-2); }

/* Widget: anchored to a corner, morphs between pill and card via .expanded.
   The OBS Browser Source is sized to the EXPANDED card (its max state) plus
   glow — recommended 600×560. The idle pill just sits in the anchored corner
   of that (transparent) box. */
.widget {
  position: fixed; overflow: hidden;
  width: 372px; height: 62px; border-radius: 31px;
  background:
    radial-gradient(130% 120% at 50% -30%, rgba(230,57,70,0.17), transparent 62%),
    linear-gradient(180deg, #1b2434 0%, #0c1320 100%);
  border: 1.5px solid rgba(230,57,70,0.52);
  box-shadow: 0 12px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: width .52s cubic-bezier(.22,1,.36,1), height .52s cubic-bezier(.22,1,.36,1),
              border-radius .5s ease, box-shadow .45s ease;
}
.widget[data-pos="br"] { right: 40px; bottom: 44px; }
.widget[data-pos="bl"] { left: 40px; bottom: 44px; }
.widget[data-pos="tr"] { right: 40px; top: 40px; }
.widget[data-pos="tl"] { left: 40px; top: 40px; }
.widget.expanded {
  width: 500px; height: 470px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.3), 0 0 38px rgba(230,57,70,0.18),
              0 24px 50px rgba(0,0,0,0.68), inset 0 1px 0 rgba(255,255,255,0.06);
}

.pill-c, .card-c { position: absolute; inset: 0; transition: opacity .28s ease; }
/* space-between so the leftover width lands in the middle instead of piling up
   as dead space on the right — the pill keeps its fixed 372×62 footprint. */
.pill-c { display: flex; align-items: center; justify-content: space-between; gap: 17px; padding: 0 32px; white-space: nowrap; }
.widget.expanded .pill-c { opacity: 0; pointer-events: none; }
/* Flex column so the footer pins to the bottom (margin-top:auto) and can never
   overlap the rating panels, whatever the content height. */
.card-c { opacity: 0; pointer-events: none; padding: 22px 24px 18px; display: flex; flex-direction: column; }
.card-c > * { flex: none; }   /* sections keep natural height; footer's margin-top:auto takes the slack */
.widget.expanded .card-c { opacity: 1; pointer-events: auto; }

/* ---- pill ---- */
.pill-brand { display: flex; flex-direction: column; gap: 4px; }
.pill-brand .brandmark { line-height: 1; }
/* Chain icon + accent underline so viewers read it as an address to visit, not
   a caption. pointer-events off: a stray click in OBS's Interact window would
   otherwise navigate the Browser Source away from the overlay mid-stream. */
.pill-url {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding-left: 17px;
  font-size: 11.5px; line-height: 1; letter-spacing: 1.5px; font-weight: 600;
  color: var(--ink-2); text-decoration: none; pointer-events: none;
}
.pill-url svg { width: 12.5px; height: 12.5px; flex: none; color: var(--red); }
.pill-url span { padding-bottom: 1px; border-bottom: 1.5px solid rgba(230,57,70,0.8); }
.pill-stats { display: flex; align-items: center; gap: 17px; }
.sep { width: 1.5px; height: 34px; background: rgba(255,255,255,0.17); }
.rt { display: flex; align-items: baseline; gap: 8px; }
.rt .k { font-size: 12.5px; letter-spacing: 2px; color: var(--mut); font-weight: 700; }
.rt .v { font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink); text-shadow: 0 0 18px rgba(255,255,255,0.12); }

/* ---- card: header ---- */
.c-head { display: flex; justify-content: space-between; align-items: center; }
.c-head .hl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; letter-spacing: 2.6px; color: var(--red); font-weight: 700; }
.c-head .hl .dot { width: 7px; height: 7px; }
.c-head .cls {
  font-size: 13.5px; letter-spacing: 1.8px; color: #ffd2d6; font-weight: 700; text-transform: uppercase;
  padding: 4px 12px; border-radius: 8px;
  background: rgba(230,57,70,0.16); border: 1px solid rgba(230,57,70,0.45);
}
.c-head .cls[hidden] { display: none; }

/* ---- card: hero ---- */
.c-hero { display: flex; align-items: center; gap: 14px; margin: 15px 0 19px; }
.c-pos { display: flex; align-items: baseline; gap: 4px; }
.c-p { font-size: 78px; font-weight: 700; color: #fff; line-height: .84; letter-spacing: -2px; text-shadow: 0 2px 24px rgba(255,255,255,0.18); }
.c-ofn { font-size: 26px; font-weight: 600; color: var(--mut); }
.c-ofn[hidden] { display: none; }
.c-updown { display: inline-flex; align-items: center; gap: 3px; font-size: 19px; font-weight: 700; padding: 6px 12px; border-radius: 9px; }
.c-updown.up { color: var(--up); background: rgba(58,216,132,0.16); border: 1px solid rgba(58,216,132,0.36); }
.c-updown.down { color: var(--down); background: rgba(255,106,106,0.16); border: 1px solid rgba(255,106,106,0.36); }
.c-updown.none { display: none; }
.c-meta { font-size: 14.5px; color: var(--ink-2); font-weight: 600; line-height: 1.5; margin-left: auto; text-align: right; }
.c-meta b { color: #fff; font-weight: 700; }

/* ---- card: stat strip ---- */
.c-strip { display: flex; background: rgba(0,0,0,0.24); border: 1px solid var(--hair); border-radius: 13px; overflow: hidden; margin-bottom: 18px; }
.c-stat { flex: 1; padding: 12px 6px; text-align: center; border-right: 1px solid rgba(255,255,255,0.08); }
.c-stat:last-child { border-right: none; }
.c-stat .k { font-size: 12px; letter-spacing: 1.6px; color: var(--mut); font-weight: 700; margin-bottom: 4px; }
.c-stat .v { font-size: 24px; color: var(--ink); font-weight: 700; letter-spacing: .3px; }

/* ---- card: rating panels ---- */
.c-ratings { display: flex; gap: 14px; }
.c-rate { flex: 1; border: 1px solid var(--hair); border-radius: 14px; padding: 14px 17px 16px; background: var(--panel); }
.c-rate .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.c-rate .kk { font-size: 12px; letter-spacing: 1.8px; color: var(--mut); font-weight: 700; }
.c-rate .dl { font-size: 17px; font-weight: 700; color: var(--up); padding: 3px 9px; border-radius: 7px; background: rgba(58,216,132,0.15); }
.c-rate .dl.neg { color: var(--down); background: rgba(255,106,106,0.15); }
.c-rate .dl:empty { display: none; }
.c-rate .bd { font-size: 40px; font-weight: 700; line-height: 1; color: var(--ink-2); text-shadow: 0 0 16px currentColor; }
.c-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.1); margin-top: 14px; overflow: hidden; }
.c-bar > i { display: block; height: 100%; border-radius: 4px; width: 0; box-shadow: 0 0 11px currentColor; transition: width .6s cubic-bezier(.22,1,.36,1); }
.c-promo { font-size: 11px; letter-spacing: 1.1px; font-weight: 700; margin-top: 11px; color: var(--mut); text-transform: uppercase; }
.c-promo.promoted { color: inherit; }

/* ---- card: footer + countdown ----
   In normal flow, pushed to the bottom by margin-top:auto — it cannot overlap
   the panels above it no matter how tall the content grows. */
.c-foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; }
.c-foot .url { font-size: 13px; letter-spacing: .8px; color: var(--ink-2); font-weight: 600; }
.c-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; opacity: 0; transform: scaleX(0);
  background: linear-gradient(90deg, var(--red), #ff6b76); box-shadow: 0 0 12px rgba(230,57,70,0.6); }
.widget.expanded .c-timer { opacity: .85; transform: scaleX(1); transition: transform 10s linear, opacity .2s ease; }

/* ---- streamer corner control — gear + labelled 2×2 picker ----
   Revealed by pointer activity (see overlay.js). The live composite has no
   cursor, so no pointer events ever fire there — it stays invisible on stream.
   In OBS it appears in the source's right-click → Interact window. */
#pos-config { position: fixed; z-index: 20; }
#widget.expanded ~ #pos-config { display: none; }   /* step aside during a race pop */
#pos-config[data-pos="br"] { right: 40px; bottom: 116px; }
#pos-config[data-pos="bl"] { left: 40px; bottom: 116px; }
#pos-config[data-pos="tr"] { right: 40px; top: 110px; }
#pos-config[data-pos="tl"] { left: 40px; top: 110px; }

.pos-gear {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: rgba(13,19,32,0.94); border: 1.5px solid rgba(230,57,70,0.55); color: var(--ink-2);
  cursor: pointer; opacity: 0; transform: scale(.9);
  transition: opacity .2s ease, transform .2s ease, color .18s ease, border-color .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
#pos-config.reveal .pos-gear { opacity: 1; transform: scale(1); }
.pos-gear:hover { color: #fff; border-color: var(--red); }
.pos-gear svg { width: 19px; height: 19px; display: block; }

.pos-picker {
  position: absolute; padding: 11px;
  background: rgba(13,19,32,0.98); border: 1.5px solid rgba(230,57,70,0.5); border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.62);
}
.pos-picker[hidden] { display: none; }
.pos-title { font-size: 9.5px; letter-spacing: 1.6px; color: var(--mut); font-weight: 700; text-transform: uppercase; margin-bottom: 9px; text-align: center; }
.pos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
#pos-config[data-pos^="b"] .pos-picker { bottom: calc(100% + 8px); }
#pos-config[data-pos^="t"] .pos-picker { top: calc(100% + 8px); }
#pos-config[data-pos$="r"] .pos-picker { right: 0; }
#pos-config[data-pos$="l"] .pos-picker { left: 0; }

.pos-btn {
  position: relative; width: 42px; height: 30px; padding: 0; border-radius: 6px;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.15);
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.pos-btn:hover { border-color: rgba(255,255,255,0.36); background: rgba(255,255,255,0.08); }
.pos-btn > i { position: absolute; width: 13px; height: 8px; border-radius: 2px; background: var(--mut); transition: background .15s ease, box-shadow .15s ease; }
.pos-btn[data-set="tl"] > i { top: 4px; left: 4px; }
.pos-btn[data-set="tr"] > i { top: 4px; right: 4px; }
.pos-btn[data-set="bl"] > i { bottom: 4px; left: 4px; }
.pos-btn[data-set="br"] > i { bottom: 4px; right: 4px; }
.pos-btn.active { border-color: var(--red); background: rgba(230,57,70,0.16); }
.pos-btn.active > i { background: var(--red); box-shadow: 0 0 9px rgba(230,57,70,0.85); }