/*
 * PPA scorebug, rebuilt as a live template from the ScorePlay reference pack.
 * Canvas is fixed 1920x1080 with a transparent body: drop straight into vMix
 * as a browser source. All motion is transform/opacity only.
 * Geometry tuned against ref/doubles.jpg and ref/singles.jpg (overlay mode:
 * /output?ref=doubles).
 */

:root {
  --navy: #101f3f;
  --navy-deep: #0c1830;
  --cyan: #55c8ee;
  --cyan-hot: #62d6ff;
  --steel: #3e6c94;
  --yellow: #e4f81c;
  --white: #ffffff;

  /* geometry decoded from the ScorePlay FULL SAMPLE renders by pixel scan
     (ref/doubles-full.png, ref/singles-full.png). The artboard mockups carry
     an older, 57px-wider name zone; the full samples are the authority. */
  --row-h: 40px;
  --border: 6px;
  --rowgap: 2px;
  --colgap: 5px;
  --serve-w: 29px;
  --name-w: 305px;      /* doubles; singles overridden below */
  --cell-w: 26px;
  --scorebox-w: 50px;

  --t-in: 650ms;
  --t-out: 380ms;
  --ease-pop: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.5, 0, 0.15, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: transparent; overflow: hidden; }
body.devbg { background: #1c2530 radial-gradient(ellipse at 50% 30%, #2a3a4c, #141b23); }

#stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
}

#refOverlay {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* ------------------------------------------------------------- the bug */

#bug {
  position: absolute;
  left: 63px;
  top: 83px;
  font-style: italic;
  /* producer size control: reference geometry underneath stays 1:1.
     Override per-instance with /output?size=1.0 (ref-compare mode pins 1). */
  transform-origin: top left;
  transform: scale(var(--bug-scale, 1.15));
}

#bug.singles { --name-w: 193px; }

#frame {
  display: grid;
  grid-template-columns: max-content var(--scorebox-w);
  grid-template-rows: var(--row-h) var(--row-h);
  gap: var(--rowgap) var(--colgap);
  background: var(--cyan);
  border: var(--border) solid var(--cyan);
  width: max-content;
  box-shadow:
    0 10px 26px rgba(5, 14, 34, 0.45),
    0 0 22px rgba(85, 200, 238, 0.55),
    0 0 64px rgba(85, 200, 238, 0.22);
}

#bug.anim-on #frame { animation: breathe 4.2s ease-in-out infinite alternate; }

@keyframes breathe {
  from { box-shadow: 0 10px 26px rgba(5,14,34,.45), 0 0 22px rgba(85,200,238,.50), 0 0 64px rgba(85,200,238,.18); }
  to   { box-shadow: 0 10px 26px rgba(5,14,34,.45), 0 0 30px rgba(85,200,238,.70), 0 0 84px rgba(85,200,238,.32); }
}

#rowA { grid-column: 1; grid-row: 1; }
#rowB { grid-column: 1; grid-row: 2; }
#scoreA { grid-column: 2; grid-row: 1; }
#scoreB { grid-column: 2; grid-row: 2; }

.row {
  display: flex;
  align-items: center;
  height: var(--row-h);
  background: linear-gradient(180deg, #14254a 0%, var(--navy) 55%, var(--navy-deep) 100%);
}

.serve {
  width: var(--serve-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px rgba(228, 248, 28, 0.7);
  transition: opacity 250ms ease, background 250ms ease, box-shadow 250ms ease;
}
.dot.off { background: #33445f; box-shadow: none; }
.dot.hidden { opacity: 0; }
#bug.anim-on .dot.pop { animation: dotPop 420ms var(--ease-pop); }
@keyframes dotPop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
#bug.anim-on .swap { animation: textSwap 420ms var(--ease-pop); }
@keyframes textSwap {
  0% { opacity: 0; transform: translateY(-9px); }
  100% { opacity: 1; transform: translateY(0); }
}
#bug.singles .dot.d2 { display: none; }

.name {
  width: var(--name-w);
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 15px;   /* ref: name text starts 15px into the zone */
  position: relative;
  top: 1px;             /* optical centre: caps read high without this */
  overflow: hidden;
  white-space: nowrap;
  transition: width 400ms var(--ease-snap);
}

.name .nm {
  font-family: 'PPA Condensed';
  font-weight: 800;
  font-style: italic;
  font-size: 24px;
  color: var(--white);
  transform-origin: left center;   /* JS squeezes long names to fit */
  transform: translateZ(0);
}

.name .seed {
  font-family: 'PPA Condensed';
  font-weight: 500;
  font-style: italic;
  font-size: 19px;
  color: #cfe3f2;
}

.games {
  display: flex;
  align-items: stretch;
  height: var(--row-h);
  margin-left: auto;
}

.gcell {
  width: var(--cell-w);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;  /* optical centre: digits ride 1px low without this */
  background: rgba(85, 200, 238, 0.16);
  border-left: 2px solid rgba(85, 200, 238, 0.35);
  font-family: 'PPA Condensed';
  font-weight: 700;
  font-style: italic;
  font-size: 23px;
  color: var(--steel);
  overflow: hidden;
}
.gcell.won { color: var(--cyan-hot); }
#bug.anim-on .gcell.enter { animation: cellIn 380ms var(--ease-pop) both, cellFlash 750ms ease-out 200ms both; }
@keyframes cellIn {
  from { width: 0; opacity: 0; }
  to { width: var(--cell-w); opacity: 1; }
}
@keyframes cellFlash {
  0% { background: rgba(85, 200, 238, 0.16); }
  25% { background: rgba(98, 214, 255, 0.8); }
  100% { background: rgba(85, 200, 238, 0.16); }
}

.scorebox {
  width: var(--scorebox-w);
  height: var(--row-h);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.scorebox.pulse { animation: scorePulse 650ms ease-out; }
@keyframes scorePulse {
  0% { background: #eaffff; box-shadow: 0 0 0 0 rgba(98, 214, 255, 0); }
  20% { background: var(--cyan-hot); box-shadow: 0 0 26px 8px rgba(98, 214, 255, 0.95); }
  100% { background: var(--white); box-shadow: 0 0 0 0 rgba(98, 214, 255, 0); }
}

.roll {
  position: relative;
  height: var(--row-h);
  width: 100%;
}
.roll span {
  position: absolute;
  inset: 0;
  top: -1px;            /* optical centre for the score digits */
  text-align: center;
  font-family: 'PPA Condensed';
  font-weight: 800;
  font-style: italic;
  font-size: 32px;
  color: var(--navy);
  line-height: var(--row-h);
}
#bug.anim-on .roll span.out-up { animation: rollOutUp 320ms var(--ease-snap) both; }
#bug.anim-on .roll span.in-up { animation: rollInUp 320ms var(--ease-snap) both; }
#bug.anim-on .roll span.out-down { animation: rollOutDown 320ms var(--ease-snap) both; }
#bug.anim-on .roll span.in-down { animation: rollInDown 320ms var(--ease-snap) both; }
@keyframes rollOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes rollInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes rollOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes rollInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ------------------------------------------------------------- banner */

#banner {
  position: relative;
  height: 22px;
  display: flex;
  width: max-content;
}

#stageTab {
  position: relative;
  z-index: 2;
  min-width: 156px;
  padding: 0 24px 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
#stageTab span {
  font-family: 'PPA Condensed';
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--navy);
}

.flagwrap {
  position: relative;
  z-index: 1;
  margin-left: -12px;
  height: 100%;
  overflow: hidden;
  padding-right: 30px;
}

#flag {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 198px;
  padding: 0 36px 0 52px;
  background: var(--yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transform: translateX(-101%);
  transition: transform 450ms var(--ease-pop);
}
#flag.show { transform: translateX(0); }
#flag.glow { box-shadow: 0 0 18px rgba(228, 248, 28, 0.55); }
#flag span {
  font-family: 'PPA Condensed';
  font-weight: 700;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: #101010;
  white-space: nowrap;
}

/* ------------------------------------------------- bug in/out choreography */

#bug { opacity: 0; pointer-events: none; }
#bug.on { opacity: 1; }

#bug.anim-on #frame,
#bug.anim-on #banner { will-change: transform, opacity; }

#bug.anim-on.entering #frame { animation: frameIn var(--t-in) var(--ease-pop) both, breathe 4.2s ease-in-out var(--t-in) infinite alternate; }
#bug.anim-on.entering #banner { animation: bannerIn 480ms var(--ease-pop) 220ms both; }
#bug.anim-on.leaving #frame { animation: frameOut var(--t-out) var(--ease-snap) both; }
#bug.anim-on.leaving #banner { animation: bannerOut 300ms var(--ease-snap) both; }

@keyframes frameIn {
  from { transform: translateX(-52px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes frameOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-40px); opacity: 0; }
}
@keyframes bannerIn {
  from { transform: translateY(-18px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes bannerOut {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(-14px); opacity: 0; }
}

/* animation kill switch: hard cuts only */
#bug.anim-off, #bug.anim-off * { transition: none !important; animation: none !important; }

/* data-status pill: rendered only in ?bg=1 viewing mode, never on bare output */
#statuspill {
  position: absolute;
  left: 64px;
  bottom: 48px;
  padding: 8px 18px;
  border-radius: 999px;
  font: 700 15px ui-monospace, Menlo, monospace;
  letter-spacing: 1.5px;
}
#statuspill.live { background: rgba(20, 60, 36, 0.9); color: #5ee89a; box-shadow: 0 0 14px rgba(94, 232, 154, 0.35); }
#statuspill.live::before { content: '● '; animation: livedot 1.6s ease-in-out infinite; }
@keyframes livedot { 50% { opacity: 0.35; } }
#statuspill.manual { background: rgba(70, 74, 12, 0.92); color: #e4f81c; }
#statuspill.stale { background: rgba(92, 22, 24, 0.92); color: #ff8a8d; animation: staleblink 1s ease-in-out infinite; }
@keyframes staleblink { 50% { opacity: 0.55; } }
#statuspill.demo { background: rgba(40, 48, 60, 0.92); color: #9fb2c8; }