:root {
  color: #f8f6ff;
  background: #100823;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  --static-pink: #e684b3;
  --cover-cyan: #01b6d8;
  --reveal-purple: #5f5d99;
  --reveal-yellow: #ffcc00;
  --tile-border: #333333;
  --studio-panel: #24203c;
  --studio-panel-light: #302a50;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid #625a88;
  border-radius: 10px;
  padding: 10px 15px;
  color: #f8f6ff;
  background: #3a3459;
  cursor: pointer;
}

button:hover:not(:disabled) {
  background: #484168;
}

button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.primary-button {
  border-color: #14cae9;
  color: #07141a;
  background: #19bedb;
  font-weight: 800;
}

.primary-button:hover:not(:disabled) {
  background: #55d7ed;
}

/* Programme output */

.program-host {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  background: #090515;
}

.program-canvas {
  position: absolute;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  --day-night-cycle-duration: 1200s;
  --day-night-cycle-offset: 0s;
  transform: scale(var(--program-scale));
  transform-origin: center;
  background: #170b36;
}

.daylight-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #05051c 0%, #11103d 43%, #241047 69%, #42164e 100%);
}

.daylight-background::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 4, 26, 0.22), transparent 18% 82%, rgba(8, 4, 26, 0.22)),
    linear-gradient(180deg, rgba(6, 4, 22, 0.1), transparent 35% 78%, rgba(10, 5, 28, 0.22));
}

.daylight-phase,
.daylight-stars,
.daylight-airflow,
.daylight-horizon-glow,
.daylight-horizon,
.daylight-grid {
  position: absolute;
  inset: 0;
}

.daylight-phase {
  z-index: 0;
  will-change: opacity;
}

.daylight-day {
  background:
    radial-gradient(ellipse at 56% 76%, rgba(255, 226, 173, 0.62), transparent 32%),
    linear-gradient(180deg, #1d5b9d 0%, #388ac3 42%, #70bfd0 70%, #f4bd8e 100%);
  animation: daylight-day-phase var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
}

.daylight-sunset {
  background:
    radial-gradient(ellipse at 58% 73%, rgba(255, 217, 135, 0.98) 0 7%, rgba(255, 93, 145, 0.6) 15%, transparent 39%),
    linear-gradient(180deg, #15124f 0%, #4f1c75 43%, #d83d8f 70%, #ff946d 100%);
  animation: daylight-sunset-phase var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
  opacity: 0;
}

.daylight-stars {
  z-index: 1;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.7px, transparent 2.4px),
    radial-gradient(circle, rgba(213, 228, 255, 0.88) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 225, 238, 0.8) 0 1.2px, transparent 1.9px);
  background-position: 18px 12px, 73px 56px, 39px 91px;
  background-size: 151px 131px, 211px 173px, 277px 223px;
  animation:
    daylight-stars-phase var(--day-night-cycle-duration) linear infinite,
    daylight-stars-drift 160s linear infinite;
  animation-delay: var(--day-night-cycle-offset), -37s;
  opacity: 0;
}

.daylight-celestial {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 174px;
  height: 174px;
  border-radius: 50%;
  opacity: 0;
  will-change: opacity, transform;
}

.daylight-sun {
  background: radial-gradient(circle at 42% 38%, #fffde2 0 9%, #ffe474 34%, #ffad57 70%, #ff6f72 100%);
  box-shadow:
    0 0 38px 15px rgba(255, 224, 111, 0.72),
    0 0 120px 58px rgba(255, 101, 129, 0.32);
  animation: daylight-sun-set var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
}

.daylight-moon {
  width: 138px;
  height: 138px;
  background:
    radial-gradient(circle at 68% 31%, rgba(157, 171, 205, 0.42) 0 7%, transparent 8%),
    radial-gradient(circle at 31% 61%, rgba(157, 171, 205, 0.35) 0 10%, transparent 11%),
    radial-gradient(circle at 62% 73%, rgba(157, 171, 205, 0.28) 0 6%, transparent 7%),
    radial-gradient(circle at 38% 32%, #ffffff 0 8%, #e6ecff 55%, #aebbe0 100%);
  box-shadow:
    0 0 30px 10px rgba(212, 224, 255, 0.6),
    0 0 90px 35px rgba(116, 143, 222, 0.24);
  animation: daylight-moon-set var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
}

.daylight-airflow {
  z-index: 2;
  inset: -12%;
  background-image:
    radial-gradient(ellipse, rgba(255, 255, 255, 0.7) 0 1px, transparent 2.5px),
    radial-gradient(ellipse, rgba(190, 232, 255, 0.62) 0 1.2px, transparent 3px),
    radial-gradient(ellipse, rgba(255, 213, 235, 0.54) 0 0.9px, transparent 2.2px);
  background-position: 31px 47px, 139px 91px, 73px 181px;
  background-size: 281px 233px, 367px 307px, 479px 389px;
  mix-blend-mode: screen;
  opacity: 0;
  transform-origin: 58% 73%;
  will-change: opacity, transform;
}

.daylight-airflow-one {
  animation: daylight-airflow-pass 18s cubic-bezier(0.3, 0, 0.72, 1) infinite;
}

.daylight-airflow-two {
  animation: daylight-airflow-pass 18s -9s cubic-bezier(0.3, 0, 0.72, 1) infinite;
  background-position: 173px 119px, 41px 213px, 299px 37px;
}

.daylight-horizon-glow {
  z-index: 4;
  background: radial-gradient(ellipse at 58% 78%, rgba(255, 154, 106, 0.72) 0 5%, rgba(245, 55, 145, 0.32) 17%, transparent 42%);
  animation: daylight-horizon-phase var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
  opacity: 0;
}

.daylight-horizon {
  z-index: 5;
  top: 73%;
  bottom: auto;
  height: 2px;
  background: linear-gradient(90deg, transparent 2%, rgba(70, 221, 255, 0.55) 20%, rgba(255, 119, 186, 0.82) 58%, rgba(70, 221, 255, 0.55) 82%, transparent 98%);
  box-shadow: 0 0 18px 4px rgba(73, 205, 255, 0.2);
  animation: daylight-horizon-line-phase var(--day-night-cycle-duration) linear infinite;
  animation-delay: var(--day-night-cycle-offset);
}

.daylight-grid {
  z-index: 6;
  top: auto;
  right: -30%;
  bottom: -53%;
  left: -30%;
  height: 74%;
  opacity: 0.42;
  transform: perspective(520px) rotateX(60deg);
  transform-origin: top;
  background-image:
    linear-gradient(rgba(41, 224, 255, 0.68) 2px, transparent 2px),
    linear-gradient(90deg, rgba(41, 224, 255, 0.68) 2px, transparent 2px);
  background-size: 90px 70px;
  animation:
    daylight-grid-phase var(--day-night-cycle-duration) linear infinite,
    daylight-grid-travel 14s linear infinite;
  animation-delay: var(--day-night-cycle-offset), -3s;
}

@keyframes daylight-day-phase {
  0% { opacity: 0.7; }
  7%, 34% { opacity: 1; }
  48% { opacity: 0.18; }
  55%, 90% { opacity: 0; }
  100% { opacity: 0.7; }
}

@keyframes daylight-sunset-phase {
  0% { opacity: 0.52; }
  8%, 33% { opacity: 0; }
  47% { opacity: 1; }
  56% { opacity: 0.34; }
  62%, 91% { opacity: 0; }
  100% { opacity: 0.52; }
}

@keyframes daylight-stars-phase {
  0%, 42% { opacity: 0; }
  52% { opacity: 0.36; }
  60%, 87% { opacity: 0.9; }
  96% { opacity: 0.08; }
  100% { opacity: 0; }
}

@keyframes daylight-stars-drift {
  from { background-position: 18px 12px, 73px 56px, 39px 91px; }
  to { background-position: 169px 143px, 284px 229px, 316px 314px; }
}

@keyframes daylight-sun-set {
  0% { opacity: 0; transform: translate3d(1740px, -150px, 0) scale(0.86); }
  4% { opacity: 0.92; transform: translate3d(1640px, 12px, 0) scale(0.9); }
  17% { opacity: 1; transform: translate3d(1530px, 105px, 0) scale(0.94); }
  31% { opacity: 1; transform: translate3d(1390px, 280px, 0) scale(0.98); }
  43% { opacity: 1; transform: translate3d(1225px, 505px, 0) scale(1.02); }
  49% { opacity: 1; transform: translate3d(1115px, 710px, 0) scale(1.04); }
  54% { opacity: 0; transform: translate3d(1060px, 875px, 0) scale(1.05); }
  100% { opacity: 0; transform: translate3d(1060px, 875px, 0) scale(1.05); }
}

@keyframes daylight-moon-set {
  0%, 50% { opacity: 0; transform: translate3d(1750px, -130px, 0) scale(0.84); }
  55% { opacity: 0.9; transform: translate3d(1650px, 30px, 0) scale(0.88); }
  68% { opacity: 0.96; transform: translate3d(1530px, 125px, 0) scale(0.92); }
  81% { opacity: 0.96; transform: translate3d(1385px, 305px, 0) scale(0.96); }
  92% { opacity: 0.96; transform: translate3d(1215px, 545px, 0) scale(1); }
  97% { opacity: 0.88; transform: translate3d(1120px, 720px, 0) scale(1.02); }
  100% { opacity: 0; transform: translate3d(1075px, 855px, 0) scale(1.03); }
}

@keyframes daylight-airflow-pass {
  0% {
    opacity: 0;
    transform: scale(0.68) translate3d(0, 0, 0);
  }
  22% { opacity: 0.07; }
  68% { opacity: 0.14; }
  100% {
    opacity: 0;
    transform: scale(1.46) translate3d(-12px, 8px, 0);
  }
}

@keyframes daylight-horizon-phase {
  0% { opacity: 0.34; }
  10%, 34% { opacity: 0.06; }
  48% { opacity: 1; }
  59%, 91% { opacity: 0; }
  100% { opacity: 0.34; }
}

@keyframes daylight-horizon-line-phase {
  0%, 35% { opacity: 0.36; }
  48% { opacity: 0.72; }
  62%, 88% { opacity: 0.5; }
  100% { opacity: 0.36; }
}

@keyframes daylight-grid-phase {
  0%, 34% { opacity: 0.28; }
  49% { opacity: 0.48; }
  62%, 88% { opacity: 0.58; }
  100% { opacity: 0.28; }
}

@keyframes daylight-grid-travel {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 70px, 0 70px; }
}

.registered-layer {
  position: absolute;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  user-select: none;
}

.game-area-layer { z-index: 1; }
.top-bar-layer,
.bottom-bars-layer { z-index: 4; }
.centre-button-layer { z-index: 5; }

.game-viewport {
  position: absolute;
  z-index: 2;
  top: 35px;
  left: 54px;
  display: grid;
  width: 1812px;
  height: 825px;
  place-items: center;
  overflow: hidden;
}

.loading-slate {
  padding: 30px 50px;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
  font-size: 56px;
  font-weight: 800;
}

.single-answer-stack {
  display: grid;
  width: 1620px;
  gap: 24px;
}

.puzzle-panel {
  display: grid;
  min-height: 160px;
  padding: 12px 32px;
  place-items: center;
  border: 10px solid var(--tile-border);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  font-size: 82px;
  font-weight: 900;
}

.static-panel {
  color: #ffffff;
  background: var(--static-pink);
}

.number-sequence {
  font-size: 72px;
  font-variant-numeric: tabular-nums;
}

.answer-panel.is-covered {
  color: #ffffff;
  background: var(--cover-cyan);
}

.answer-panel.is-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.letter-tile-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.letter-tile,
.snake-tile {
  display: grid;
  width: 250px;
  height: 250px;
  place-items: center;
  border: 10px solid var(--tile-border);
  line-height: 1;
  font-size: 176px;
  font-weight: 900;
}

.tile-static {
  color: #ffffff;
  background: var(--static-pink);
}

.tile-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.tile-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.snake-grid {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 10px;
}

.snake-tile {
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.snake-tile.tile-revealed {
  transform: scale(1.018);
}

.kriss-grid {
  display: grid;
  grid-template-columns: repeat(9, 166px);
  grid-template-rows: repeat(4, 166px);
  gap: 10px;
}

.kriss-tile {
  display: grid;
  width: 166px;
  height: 166px;
  place-items: center;
  border: 9px solid var(--tile-border);
  line-height: 1;
  font-size: 116px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.kriss-tile.tile-revealed {
  transform: scale(1.025);
}

.word-climb-stage {
  position: absolute;
  top: -35px;
  left: -54px;
  width: 1920px;
  height: 1080px;
}

.word-climb-staircase {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}

.word-climb-rung {
  position: absolute;
  width: 250px;
  height: 310px;
}

.word-climb-rung[data-rung="1"] { left: 438px; top: 347px; }
.word-climb-rung[data-rung="2"] { left: 693px; top: 247px; }
.word-climb-rung[data-rung="3"] { left: 948px; top: 147px; }
.word-climb-rung[data-rung="4"] { left: 1203px; top: 47px; }

.word-climb-tile {
  display: grid;
  width: 198px;
  height: 198px;
  margin-left: 33px;
  place-items: center;
  border: 10px solid var(--tile-border);
  color: #ffffff;
  background: var(--cover-cyan);
  line-height: 1;
  font-size: 132px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.word-climb-tile.tile-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.03);
}

.word-climb-points {
  position: absolute;
  top: 260px;
  left: 0;
  width: 250px;
  color: #ffffff;
  font-size: 54px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}

.word-climb-award {
  margin: 12px 0 0;
  color: #ffcf00;
  font-weight: 800;
}

.five-alive-stage {
  position: relative;
  display: grid;
  width: 920px;
  height: 765px;
  place-items: center;
}

.five-alive-grid {
  display: grid;
  grid-template-columns: repeat(6, 145px);
  gap: 10px;
  transition: opacity 180ms ease, transform 180ms ease;
}

.five-alive-tile {
  display: grid;
  width: 145px;
  height: 145px;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
  line-height: 1;
  font-size: 91px;
  font-weight: 900;
}

.five-alive-stage.is-revealed .five-alive-grid {
  opacity: 0.35;
  transform: scale(0.985);
}

.five-alive-answer {
  position: absolute;
  display: grid;
  width: 390px;
  min-height: 190px;
  padding: 20px;
  place-items: center;
  border: 10px solid var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
  text-align: center;
  text-transform: uppercase;
}

.five-alive-answer span {
  font-size: 112px;
  font-weight: 900;
  line-height: 0.9;
}

.five-alive-answer small {
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.jigsaw-stage {
  display: grid;
  width: 1812px;
  height: 825px;
  grid-template-columns: 424px 932px 424px;
  align-items: center;
  gap: 16px;
  background: rgba(26, 24, 45, 0.2);
}

.jigsaw-board-frame {
  display: grid;
  width: 932px;
  height: 782px;
  place-items: center;
  border: 16px solid #3b3b42;
  background: #a8a8ad;
  box-shadow: 0 12px 30px rgba(5, 3, 16, 0.35);
}

.jigsaw-board {
  display: block;
  width: 900px;
  height: 750px;
  overflow: visible;
  background: #a8a8ad;
}

.jigsaw-board-line {
  fill: none;
  stroke: rgba(28, 25, 34, 0.86);
  stroke-width: 2.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.jigsaw-hole {
  fill: #a8a8ad;
  stroke: #34343a;
  stroke-width: 3.2px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

.jigsaw-candidate-rail {
  display: grid;
  width: 424px;
  height: 780px;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.jigsaw-candidate-slot {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  transition: filter 300ms ease;
}

.jigsaw-candidate-label {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #ffffff;
  background: #01aeca;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.28);
  line-height: 1;
  font-size: 36px;
  font-weight: 900;
}

.jigsaw-candidate-svg {
  display: block;
  width: 210px;
  height: 210px;
  overflow: visible;
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.33));
}

.jigsaw-candidate-piece {
  transform-box: view-box;
  transform-origin: 50px 50px;
  transition: transform 700ms cubic-bezier(0.22, 0.85, 0.26, 1), filter 280ms ease;
}

.jigsaw-candidate-outline {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.jigsaw-stage.is-revealed .jigsaw-candidate-slot.is-winning {
  filter: drop-shadow(0 0 16px rgba(255, 207, 0, 0.95));
}

.jigsaw-stage.is-revealed .jigsaw-candidate-slot.is-winning .jigsaw-candidate-label {
  border-color: #fff2a8;
  color: #241d48;
  background: var(--reveal-yellow);
}

.jigsaw-stage.is-revealed .jigsaw-candidate-slot.is-winning .jigsaw-candidate-outline {
  stroke: var(--reveal-yellow);
  stroke-width: 5px;
}

.number-stack-stage {
  display: flex;
  flex-direction: column;
  width: 1060px;
  height: 700px;
  justify-content: center;
  gap: 16px;
}

.number-stack-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.number-stack-cell {
  display: grid;
  width: 320px;
  height: 198px;
  flex: 0 0 320px;
  place-items: center;
  border: 14px solid var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
  font-size: 104px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.number-stack-cell-compact {
  font-size: 86px;
}

.number-stack-cell-covered {
  background: var(--cover-cyan);
}

.number-stack-cell-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.04);
}

.number-cycle-stage {
  position: relative;
  width: 900px;
  height: 720px;
}

.number-cycle-ring-layer {
  position: absolute;
  inset: 0;
  width: 900px;
  height: 720px;
  overflow: visible;
}

.number-cycle-ring {
  fill: none;
  stroke: var(--cover-cyan);
  stroke-width: 12px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.number-cycle-node {
  position: absolute;
  display: grid;
  width: 150px;
  height: 150px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 9px solid var(--tile-border);
  border-radius: 50%;
  line-height: 1;
  font-size: 72px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.number-cycle-node-static {
  color: #ffffff;
  background: var(--static-pink);
}

.number-cycle-node-covered {
  color: #ffffff;
  background: var(--cover-cyan);
}

.number-cycle-node-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: translate(-50%, -50%) scale(1.06);
}

.twisted-time-stage {
  position: absolute;
  top: -35px;
  left: -54px;
  width: 1920px;
  height: 1080px;
}

.twisted-time-svg {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  overflow: visible;
}

.twisted-time-clue {
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 42px;
  font-weight: 900;
  paint-order: stroke;
  stroke: #000000;
  stroke-width: 10px;
  stroke-linejoin: round;
}

.twisted-time-answer rect {
  fill: var(--reveal-purple);
  stroke: var(--reveal-yellow);
  stroke-width: 8px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.32));
}

.twisted-time-answer text {
  fill: var(--reveal-yellow);
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 54px;
  font-weight: 900;
}

.pinpoint-stage {
  position: absolute;
  top: -35px;
  left: -54px;
  width: 1920px;
  height: 1080px;
}

.pinpoint-target-art,
.pinpoint-svg {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.pinpoint-target-art {
  z-index: 0;
}

.pinpoint-svg {
  z-index: 1;
  overflow: visible;
}

.pinpoint-trajectory {
  fill: none;
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 5px;
  stroke-linecap: round;
  transition: stroke-dasharray 900ms linear, stroke 180ms ease, filter 180ms ease;
}

.pinpoint-trajectory-revealed {
  stroke: var(--reveal-yellow);
  filter: drop-shadow(0 0 8px rgba(255, 207, 0, 0.9));
}

.pinpoint-moving-arrow {
  transition: transform 900ms linear;
}
.pinpoint-arrow image {
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.28));
}

.pinpoint-arrow-revealed image {
  filter: drop-shadow(0 0 7px rgba(255, 207, 0, 0.95));
}

.pinpoint-arrow-number {
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 28px;
  font-weight: 900;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.22);
  stroke-width: 1px;
  pointer-events: none;
}

.pinpoint-winning-ring {
  fill: none;
  stroke: var(--reveal-yellow);
  stroke-width: 6px;
  filter: drop-shadow(0 0 8px rgba(255, 207, 0, 0.9));
}

.ring-leader-stage {
  position: absolute;
  top: -35px;
  left: -54px;
  width: 1920px;
  height: 1080px;
}

.ring-leader-board-art,
.ring-leader-svg {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.ring-leader-board-art {
  z-index: 0;
}

.ring-leader-svg {
  z-index: 1;
  overflow: visible;
}

.ring-leader-line {
  fill: none;
  stroke: #615886;
  stroke-width: 10px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ring-leader-line-progress {
  transition: stroke-dasharray 900ms linear;
}

.ring-leader-spot circle {
  stroke: #ffd6e8;
  stroke-width: 4px;
  fill: #ed5b98;
  transition: fill 180ms ease, stroke 180ms ease, transform 180ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.ring-leader-spot text {
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: central;
  font-size: 25px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ring-leader-spot-revealed circle {
  stroke: #ffe078;
  fill: #f3a800;
  transform: scale(1.08);
}
.starting-point-board {
  display: grid;
  width: 1500px;
  grid-template-columns: 700px 510px;
  align-items: center;
  justify-content: center;
  gap: 72px;
}

.starting-point-wheel {
  width: 690px;
  height: 690px;
  overflow: visible;
}

.starting-point-outer-circle {
  fill: var(--static-pink);
  stroke: var(--tile-border);
  stroke-width: 12px;
}

.starting-point-divider {
  stroke: var(--tile-border);
  stroke-width: 12px;
}

.starting-point-centre-circle {
  fill: var(--reveal-purple);
  stroke: var(--reveal-yellow);
  stroke-width: 12px;
}

.starting-point-outer-letter,
.starting-point-centre-letter {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 82px;
  font-weight: 900;
}

.starting-point-outer-letter {
  fill: #ffffff;
}

.starting-point-centre-letter {
  fill: var(--reveal-yellow);
  font-size: 116px;
}

.nine-answer-board {
  display: grid;
  width: 510px;
  gap: 8px;
}

.nine-answer-slot {
  position: relative;
  display: grid;
  height: 72px;
  padding: 0 22px 0 50px;
  place-items: center;
  border: 6px solid var(--tile-border);
  line-height: 1;
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.nine-answer-slot-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.nine-answer-slot-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.012);
}

.nine-answer-number {
  position: absolute;
  top: 4px;
  left: 7px;
  color: #ffffff;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.make-word-board {
  display: grid;
  width: 1644px;
  gap: 26px;
}

.make-word-source-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.make-word-source-tile {
  display: grid;
  width: 126px;
  height: 122px;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #111111;
  background: #ffffff;
  line-height: 1;
  font-size: 78px;
  font-weight: 900;
}

.make-word-answer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 18px;
}

.make-word-answer {
  display: grid;
  height: 112px;
  place-items: center;
  border: 8px solid var(--tile-border);
  line-height: 1;
  text-align: center;
  font-size: 43px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.make-word-answer-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.make-word-answer-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.012);
}

.word-grid-stage {
  display: flex;
  width: 1772px;
  height: 793px;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.word-grid-board {
  display: grid;
  grid-template-columns: repeat(15, 81px);
  grid-template-rows: repeat(9, 81px);
  gap: 8px;
}

.word-grid-cell {
  display: grid;
  place-items: center;
  border: 6px solid var(--tile-border);
  color: #111111;
  background: #ffffff;
  line-height: 1;
  font-size: 54px;
  font-weight: 950;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.word-grid-cell-revealed {
  border-color: var(--tile-border);
  color: #111111;
  background: #ffffff;
}

.word-grid-stage > .nine-answer-board {
  width: 396px;
  gap: 8px;
}

.word-grid-stage .nine-answer-slot {
  height: 81px;
  font-size: 30px;
}

.line-up-stage {
  display: grid;
  width: 1710px;
  grid-template-columns: 900px 650px;
  align-items: center;
  justify-content: center;
  gap: 38px;
}

.line-up-rows {
  display: grid;
  overflow: hidden;
  border: 8px solid var(--tile-border);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.45);
}

.line-up-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 168px;
  align-items: center;
  padding: 0 44px;
  gap: 42px;
}

.line-up-row-1 { background: linear-gradient(#f6ff00, #dde900); }
.line-up-row-2 { background: linear-gradient(#25ff05, #11cc00); }
.line-up-row-3 { background: linear-gradient(#15bcff, #0791d0); }
.line-up-row-4 { background: linear-gradient(#123cff, #071fd0); }

.line-up-letter {
  display: grid;
  place-items: center;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
  font-size: 112px;
  font-weight: 950;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.72);
}

.eight-answer-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 22px;
}

.eight-answer-slot {
  position: relative;
  display: grid;
  height: 116px;
  padding: 0 18px;
  place-items: center;
  border: 8px solid var(--tile-border);
  line-height: 1;
  text-align: center;
  font-size: 39px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.eight-answer-slot-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.eight-answer-slot-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.012);
}

.eight-answer-number {
  position: absolute;
  top: 8px;
  left: 10px;
  color: #ffffff;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.inspiration-stage {
  display: grid;
  width: 1500px;
  align-items: center;
  justify-content: center;
}

.inspiration-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 22px 24px;
}

.inspiration-answer {
  display: grid;
  gap: 6px;
}

.inspiration-points {
  width: max-content;
  min-width: 190px;
  padding: 7px 18px;
  border: 6px solid var(--tile-border);
  color: #ffffff;
  background: var(--cover-cyan);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
}

.inspiration-answer-revealed .inspiration-points {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.inspiration-tiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.inspiration-tile {
  display: grid;
  width: 44px;
  height: 58px;
  place-items: center;
  border: 5px solid var(--tile-border);
  color: #ffffff;
  background: var(--cover-cyan);
  font-size: 39px;
  font-weight: 950;
  line-height: 1;
}

.inspiration-tile-hint {
  border-color: var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
}

.inspiration-tile-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.inspiration-tile-empty {
  visibility: hidden;
}

.think-around-stage {
  display: grid;
  width: 1500px;
  grid-template-columns: 760px 510px;
  align-items: center;
  justify-content: center;
  gap: 72px;
}

.think-around-wheel-panel {
  display: grid;
  place-items: center;
  gap: 18px;
}

.think-around-wheel {
  width: 640px;
  height: 640px;
  overflow: visible;
}

.think-around-outer-circle {
  fill: var(--static-pink);
  stroke: var(--tile-border);
  stroke-width: 12px;
}

.think-around-divider {
  stroke: var(--tile-border);
  stroke-width: 6px;
}

.think-around-letter,
.think-around-centre-label {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-weight: 950;
}

.think-around-letter {
  fill: #ffffff;
  font-size: 62px;
}

.think-around-centre-circle {
  fill: var(--cover-cyan);
  stroke: var(--tile-border);
  stroke-width: 10px;
}

.think-around-centre-label {
  fill: #ffffff;
  font-size: 86px;
}

.think-around-prompt {
  max-width: 700px;
  padding: 26px 34px;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

.stack-race-stage {
  display: grid;
  width: 1370px;
  gap: 24px;
}

.stack-race-prompt {
  display: grid;
  min-height: 116px;
  padding: 16px 34px;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  background: var(--static-pink);
  font-size: 56px;
  font-weight: 900;
  line-height: 1.04;
  text-align: center;
  text-transform: uppercase;
}

.stack-race-answers {
  display: grid;
  gap: 14px;
}

.stack-race-row {
  display: grid;
  min-height: 112px;
  padding: 10px 36px;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  background: var(--cover-cyan);
  overflow-wrap: anywhere;
  font-size: 68px;
  font-weight: 900;
  line-height: .96;
  text-align: center;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.stack-race-row-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.012);
}

.letter-links-word.is-jackpot-answer .letter-links-tile.tile-cover,
.nine-answer-slot-cover.is-jackpot-answer,
.eight-answer-slot-cover.is-jackpot-answer,
.make-word-answer-cover.is-jackpot-answer,
.inspiration-answer-cover.is-jackpot-answer .inspiration-points,
.inspiration-answer-cover.is-jackpot-answer .inspiration-tile-cover,
.stack-race-row-cover.is-jackpot-answer {
  border-color: #ffd85a;
  color: #ffffff;
  background: linear-gradient(180deg, #ffc928 0%, #ff9417 58%, #ff6814 100%);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.38), 0 0 20px rgba(255, 194, 38, 0.3);
}
.centrepiece-stage {
  position: relative;
  width: 730px;
  height: 730px;
}

.centrepiece-tile {
  position: absolute;
  display: grid;
  width: 132px;
  height: 132px;
  place-items: center;
  border: 8px solid var(--tile-border);
  line-height: 1;
  font-size: 86px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.centrepiece-tile.tile-static {
  color: #ffffff;
  background: var(--static-pink);
}

.centrepiece-tile.tile-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.centrepiece-tile.tile-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.05);
}

.cover-up-stage {
  display: grid;
  width: 1720px;
  height: 440px;
  place-items: center;
}

.cover-up-word {
  position: relative;
  display: grid;
  width: 1600px;
  height: 300px;
  place-items: center;
  overflow: hidden;
  border: 14px solid var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  font-size: 150px;
  font-weight: 900;
  letter-spacing: 18px;
  line-height: 1;
  text-align: center;
}

.cover-up-word-compact {
  font-size: 118px;
  letter-spacing: 12px;
}

.cover-up-sheet {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  color: #ffffff;
  background: var(--cover-cyan);
  transition: clip-path 500ms linear;
}

.letter-pairs-stage {
  display: flex;
  width: 1772px;
  height: 793px;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.letter-pairs-grid {
  display: grid;
  grid-template-columns: repeat(6, 218px);
  grid-template-rows: repeat(5, 152px);
  gap: 8px;
}

.letter-pair-tile {
  display: grid;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #111111;
  background: #ffffff;
  font-size: 70px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
}

.letter-pairs-stage > .nine-answer-board {
  width: 396px;
  gap: 8px;
}

.letter-pairs-stage .nine-answer-slot {
  height: 81px;
  font-size: 30px;
}

.letter-links-grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 20px 90px;
  place-items: center;
}

.letter-links-word {
  display: flex;
  gap: 8px;
}

.letter-links-tile {
  display: grid;
  width: 126px;
  height: 126px;
  place-items: center;
  border: 8px solid var(--tile-border);
  line-height: 1;
  font-size: 78px;
  font-weight: 900;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.letter-links-tile.tile-static {
  color: #ffffff;
  background: var(--static-pink);
}

.letter-links-tile.tile-cover {
  color: #ffffff;
  background: var(--cover-cyan);
}

.letter-links-tile.tile-revealed {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
  transform: scale(1.018);
}

.programme-copy {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.points-copy,
.topic-copy {
  position: absolute;
  z-index: 2;
  top: 910px;
  height: 70px;
  line-height: 70px;
  font-size: 58px;
  font-weight: 800;
  white-space: nowrap;
}

.points-copy {
  left: 40px;
  width: 790px;
  overflow: hidden;
  color: #ffffff;
  font-size: 56px;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: -1px;
  text-align: right;
  text-overflow: ellipsis;
  text-shadow:
    0 3px 0 rgba(36, 23, 66, 0.72),
    0 0 14px rgba(255, 255, 255, 0.2);
}

.points-copy.is-multiplied {
  color: var(--reveal-yellow);
  font-size: 42px;
  text-shadow:
    0 3px 0 rgba(36, 23, 66, 0.72),
    0 0 18px rgba(255, 207, 0, 0.42);
}

.topic-copy {
  left: 1140px;
  width: 710px;
  overflow: hidden;
  color: var(--reveal-yellow);
  text-overflow: ellipsis;
}

.instruction-copy {
  position: absolute;
  z-index: 2;
  top: 980px;
  left: 1140px;
  display: flex;
  width: 710px;
  height: 50px;
  align-items: center;
  overflow: hidden;
  color: #ffffff;
  font-size: 34px;
  white-space: nowrap;
}

.scroller-window {
  position: absolute;
  z-index: 2;
  top: 980px;
  left: 0;
  width: 870px;
  height: 50px;
  overflow: hidden;
  color: #ffffff;
  font-size: 31px;
  line-height: 50px;
  white-space: nowrap;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.scroller-copy {
  width: max-content;
  padding-left: 870px;
  animation: scroller 28s linear infinite;
}

@keyframes scroller {
  to { transform: translateX(-100%); }
}

.timer-copy {
  position: absolute;
  z-index: 2;
  top: 885px;
  left: 840px;
  display: flex;
  width: 240px;
  height: 112px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.34);
}

.timer-digits {
  font-size: 64px;
  line-height: 1;
}

.timer-label {
  max-width: 200px;
  text-align: center;
  font-size: 40px;
  line-height: 0.95;
}

.timer-paused .timer-label {
  margin-bottom: 1px;
  font-size: 19px;
  letter-spacing: 0.14em;
}

.timer-paused .timer-digits {
  font-size: 50px;
}

.hot-clock-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 1920px;
  height: 1080px;
  object-fit: contain;
}

.timer-hot-clock {
  z-index: 2;
  top: 884px;
  height: 146px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.38);
}

.hot-clock-digits {
  position: absolute;
  top: 22px;
  color: #ffffff;
  font-size: 58px;
  line-height: 1;
}

.hot-clock-bonus-label {
  position: absolute;
  top: 104px;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
}
.quizzy-centre-icon {
  width: 104px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.34));
}

/* Jackpot programme views */

.jackpot-choice-banner,
.jackpot-result-banner {
  display: grid;
  min-height: 76px;
  padding: 10px 28px;
  place-items: center;
  border: 8px solid var(--tile-border);
  border-radius: 18px;
  color: #ffffff;
  background: var(--static-pink);
  text-align: center;
  font-size: 40px;
  font-weight: 900;
}

.jackpot-result-banner {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.date-jackpot-stage > .jackpot-result-banner {
  animation: date-jackpot-result-in 0.35s ease-out 4.2s both;
}

@keyframes date-jackpot-result-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.date-jackpot-stage {
  display: grid;
  width: 1650px;
  height: 790px;
  grid-template-rows: 82px 1fr 82px;
  gap: 12px;
}

.date-wheel-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
}

.jackpot-wheel {
  position: relative;
  width: 550px;
  height: 550px;
}

.jackpot-wheel::after {
  position: absolute;
  z-index: 5;
  top: calc(50% - 36px);
  width: 58px;
  height: 72px;
  content: "";
  background: var(--reveal-yellow);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.28));
}

.wheel-pointer-right::after {
  right: -10px;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.wheel-pointer-left::after {
  left: -10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.jackpot-wheel-face {
  position: absolute;
  inset: 0;
  border: 14px solid var(--tile-border);
  border-radius: 50%;
  background: repeating-conic-gradient(
    from var(--segment-offset),
    #f0c5da 0deg var(--segment-angle),
    #75d6e6 var(--segment-angle) var(--double-segment-angle)
  );
  box-shadow: inset 0 0 0 8px rgba(255,255,255,0.38), 0 14px 30px rgba(20, 7, 45, 0.3);
  transform: rotate(0deg);
}

.jackpot-wheel-face.is-landing {
  animation: jackpot-wheel-land 4.2s cubic-bezier(.08,.66,.12,1) forwards;
}

.jackpot-wheel-face.is-stopped {
  transform: rotate(var(--wheel-stop));
}

@keyframes jackpot-wheel-land {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--wheel-stop)); }
}

.jackpot-wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  margin: -16px 0 0 -29px;
  transform: rotate(var(--label-angle)) translateY(-235px);
  transform-origin: 29px 16px;
  color: #29203f;
  text-align: center;
  font-size: 22px;
  font-weight: 900;
}

.jackpot-wheel.wheel-month .jackpot-wheel-label {
  font-size: 28px;
}

.jackpot-wheel-hub {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  width: 210px;
  height: 210px;
  padding: 30px 14px;
  place-items: center;
  border: 12px solid var(--tile-border);
  border-radius: 50%;
  color: #ffffff;
  background: var(--reveal-purple);
  transform: translate(-50%, -50%);
  text-align: center;
}

.jackpot-wheel-hub small {
  font-size: 23px;
  letter-spacing: 0.12em;
}

.jackpot-wheel-hub strong {
  max-width: 185px;
  overflow: hidden;
  font-size: 38px;
  line-height: 1;
  text-overflow: ellipsis;
}

.grid-jackpot-stage {
  position: relative;
  display: grid;
  width: 1600px;
  height: 790px;
  place-items: center;
}

.grid-jackpot-board {
  display: grid;
  grid-template-columns: repeat(5, 220px);
  grid-template-rows: repeat(3, 220px);
  gap: 18px;
}

.grid-jackpot-cell {
  position: relative;
  display: grid;
  place-items: center;
  border: 10px solid var(--tile-border);
  color: #ffffff;
  background: var(--cover-cyan);
  font-size: 112px;
  font-weight: 900;
  transition: transform 220ms ease, background 220ms ease;
}

.grid-jackpot-cell.is-selected {
  box-shadow: 0 0 0 8px var(--reveal-yellow);
}

.grid-jackpot-cell.state-quizzy,
.grid-jackpot-cell.centre-quizzy {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.grid-jackpot-cell.state-sad {
  color: #4a2040;
  background: #e17bad;
}

.grid-jackpot-cell .quizzy-image {
  width: 174px;
  height: 174px;
  object-fit: contain;
}

.grid-jackpot-cell .sad-face {
  font-size: 120px;
}

.grid-jackpot-stage > .jackpot-result-banner {
  position: absolute;
  z-index: 4;
  right: 160px;
  bottom: 4px;
  left: 160px;
}

.ladder-jackpot-stage {
  position: relative;
  display: grid;
  width: 1320px;
  grid-template-rows: repeat(9, 76px);
  gap: 8px;
}

.ladder-row {
  display: grid;
  grid-template-columns: 1fr 220px 1fr;
  gap: 24px;
}

.ladder-side,
.ladder-points {
  display: grid;
  place-items: center;
  border: 8px solid var(--tile-border);
  color: #ffffff;
  font-weight: 900;
}

.ladder-side {
  background: var(--cover-cyan);
  font-size: 38px;
}

.ladder-points {
  background: var(--static-pink);
  font-size: 34px;
}

.ladder-side.state-carry-on {
  border-color: var(--reveal-yellow);
  color: var(--reveal-yellow);
  background: var(--reveal-purple);
}

.ladder-side.state-unlucky {
  color: #ffffff;
  background: #d50013;
}

.ladder-row.is-active {
  outline: none;
}

.ladder-row.is-active > .ladder-side,
.ladder-row.is-active > .ladder-points {
  border-color: var(--reveal-yellow);
}

.ladder-row.is-successful .ladder-points {
  border-color: var(--reveal-yellow);
  color: #ffffff;
  background: var(--reveal-purple);
}

.jackpot-centre-label {
  max-width: 210px;
  font-size: 31px;
  letter-spacing: -0.03em;
}
/* Quiz Studio */

.studio-shell,
.studio-loading {
  width: 100%;
  height: 100%;
  overflow: auto;
  color: #f8f6ff;
  background:
    radial-gradient(circle at 85% 10%, rgba(1, 182, 216, 0.14), transparent 28%),
    radial-gradient(circle at 10% 80%, rgba(180, 109, 143, 0.18), transparent 32%),
    #171329;
}

.studio-shell {
  padding: 28px;
}

.studio-loading {
  display: grid;
  place-items: center;
  font-size: 30px;
}

.studio-header {
  display: flex;
  max-width: 1220px;
  margin: 0 auto 22px;
  align-items: center;
  justify-content: space-between;
}

.studio-header h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.03em;
}

.eyebrow {
  margin: 0 0 5px;
  color: #8eeeff;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.validation-badge {
  border: 1px solid;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 800;
}

.validation-badge.is-valid {
  border-color: #4de0a4;
  color: #7bf0bb;
  background: rgba(50, 191, 132, 0.13);
}

.validation-badge.is-invalid {
  border-color: #ff7d8f;
  color: #ff9eaa;
  background: rgba(231, 71, 94, 0.13);
}

.studio-tabs {
  display: flex;
  max-width: 1220px;
  margin: -7px auto 20px;
  padding: 4px;
  border: 1px solid #3c355e;
  border-radius: 12px;
  background: rgba(20, 17, 38, 0.72);
  gap: 4px;
}

.studio-tabs button {
  flex: 1;
  border-color: transparent;
  color: #aaa3c6;
  background: transparent;
  font-weight: 850;
}

.studio-tabs button.is-active {
  color: #fff;
  background: linear-gradient(135deg, #185a8d, #0e8298);
  box-shadow: 0 7px 18px rgba(1, 182, 216, 0.18);
}

.studio-tab-panel {
  max-width: 1440px;
  margin: 0 auto;
}

.control-room-panel {
  display: grid;
  gap: 18px;
}

.control-room-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(520px, 0.95fr);
  align-items: center;
  gap: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(1, 182, 216, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(36, 32, 60, 0.98), rgba(31, 27, 54, 0.94));
}

.control-room-hero h2 {
  margin: 0 0 6px;
  color: var(--reveal-yellow);
  font-size: 34px;
}

.control-room-hero p:not(.eyebrow) {
  margin: 0;
  color: #d9d3ee;
  font-size: 17px;
}

.control-room-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.control-room-status-grid span {
  display: grid;
  min-height: 88px;
  align-content: center;
  border: 1px solid #4a436c;
  border-radius: 14px;
  padding: 13px;
  background: rgba(23, 20, 42, 0.72);
  gap: 5px;
}

.control-room-status-grid small {
  color: #9f98bc;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.control-room-status-grid strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-room-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
  gap: 18px;
}

.control-room-grid .control-card { order: -3; }
.control-room-grid .generator-card { order: -2; }
.control-room-grid .showrunner-card { order: -1; }

.broadcast-tab-panel {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(460px, 1.1fr);
  align-items: start;
  gap: 18px;
}

.studio-grid {
  display: grid;
  max-width: 1220px;
  margin: 0 auto;
  grid-template-columns: minmax(330px, 0.85fr) minmax(430px, 1.15fr);
  gap: 18px;
}

.studio-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid #3c355e;
  border-radius: 16px;
  background: rgba(36, 32, 60, 0.94);
  box-shadow: 0 18px 45px rgba(4, 2, 17, 0.18);
}

.studio-card h2 {
  margin: 0 0 18px;
  font-size: 21px;
}

.studio-card-heading {
  display: flex;
  margin-bottom: 14px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.studio-card-heading h2 {
  margin-bottom: 0;
}

.studio-card-heading > strong {
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
}

.studio-card label {
  display: grid;
  margin-bottom: 14px;
  gap: 7px;
  color: #c8c2e5;
  font-size: 13px;
  font-weight: 700;
}

.studio-card input,
.studio-card select {
  width: 100%;
  border: 1px solid #565077;
  border-radius: 10px;
  padding: 11px 12px;
  outline: none;
  color: #ffffff;
  background: #17142a;
}

.studio-card input:focus,
.studio-card select:focus {
  border-color: #25c8e5;
  box-shadow: 0 0 0 3px rgba(37, 200, 229, 0.13);
}

.button-row {
  display: flex;
  gap: 9px;
}

.button-row.wrap {
  flex-wrap: wrap;
}

.solution-answer {
  margin: 2px 0 10px !important;
  color: var(--reveal-yellow);
  font-size: 39px !important;
  overflow-wrap: anywhere;
}

.solution-card > p:not(.eyebrow) {
  color: #c8c2e5;
  line-height: 1.55;
}

.solution-card details {
  margin: 16px 0;
  color: #b9b3da;
}

.word-list {
  line-height: 1.6;
}

.make-word-studio-summary > p {
  color: #c8c2e5;
}

.jigsaw-studio-summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr);
  align-items: center;
  gap: 16px;
}

.jigsaw-studio-summary img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 5;
  border: 7px solid #3b3b42;
  object-fit: cover;
}

.jigsaw-studio-summary p { color: #c8c2e5; }
.jigsaw-studio-summary small { color: #958eaf; }

.make-word-studio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.make-word-studio-grid span {
  display: grid;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 9px;
  background: #19162d;
}

.make-word-studio-grid strong {
  overflow: hidden;
  color: var(--reveal-yellow);
  text-overflow: ellipsis;
}

.make-word-studio-grid small {
  margin-top: 3px;
  color: #8eeeff;
}
.kriss-studio-summary > p {
  color: #c8c2e5;
  line-height: 1.55;
}

.anchor-word {
  color: #8eeeff;
  font-weight: 800;
}

.kriss-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.kriss-stat-row span {
  padding: 10px;
  border-radius: 9px;
  color: #c8c2e5;
  background: #19162d;
}

.kriss-stat-row strong {
  color: var(--reveal-yellow);
  font-size: 20px;
}

.obscure-note {
  color: #ffd38c !important;
}

.puzzle-meta {
  display: grid;
  margin: 18px 0 0;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.puzzle-meta div {
  min-width: 0;
  padding: 10px;
  border-radius: 9px;
  background: #19162d;
}

.puzzle-meta dt {
  margin-bottom: 4px;
  color: #8e88ad;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.puzzle-meta dd {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  white-space: nowrap;
}

.timer-readout {
  margin: -3px 0 17px;
  color: #8eeeff;
  font-size: 52px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.section-divider {
  height: 1px;
  margin: 20px 0;
  background: #40395f;
}

.answer-simulator {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid #40395f;
}

.answer-simulator-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.answer-simulator-row input {
  margin: 0;
}
.control-status {
  color: #bdb7da;
}

.validation-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 9px;
  list-style: none;
}

.validation-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #19162d;
}

.validation-list small {
  display: block;
  margin-top: 4px;
  color: #a59fbe;
}

.check-icon {
  display: grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  font-weight: 900;
}

.passed .check-icon {
  color: #081f17;
  background: #5ce1aa;
}

.failed .check-icon {
  color: #2a0710;
  background: #ff7e92;
}

.error-message {
  margin-bottom: 0;
  color: #ff9aaa;
}

.showrunner-card {
  grid-column: 1 / -1;
  border-color: rgba(1, 182, 216, 0.5);
}

.showrunner-card.is-live {
  border-color: rgba(92, 225, 170, 0.72);
  box-shadow: 0 0 0 2px rgba(92, 225, 170, 0.14), 0 18px 45px rgba(4, 2, 17, 0.25);
}

.showrunner-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.showrunner-heading h2 {
  margin-bottom: 7px;
}

.showrunner-summary {
  margin: 0;
  color: #c8c2e5;
}

.showrunner-badge {
  flex: 0 0 auto;
  border: 1px solid #625a88;
  border-radius: 999px;
  padding: 9px 13px;
  color: #bdb7da;
  background: #19162d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.showrunner-badge.is-live {
  border-color: #5ce1aa;
  color: #081f17;
  background: #5ce1aa;
}

.showrunner-now-next {
  display: grid;
  margin: 18px 0 14px;
  grid-template-columns: 1fr 1fr 0.7fr;
  gap: 10px;
}

.showrunner-now-next span {
  display: grid;
  min-width: 0;
  padding: 11px 13px;
  border-radius: 10px;
  background: #19162d;
}

.showrunner-now-next small {
  margin-bottom: 4px;
  color: #938dad;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.showrunner-now-next strong {
  overflow: hidden;
  color: #8eeeff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.showrunner-main-buttons {
  margin-bottom: 4px;
}

.stop-button {
  border-color: #ff7e92;
  color: #fff;
  background: #9f3048;
  font-weight: 800;
}

.stop-button:hover:not(:disabled) {
  background: #bd3a56;
}

.showrunner-error {
  margin: 12px 0 0;
}

.showrunner-running-order {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #40395f;
}

.showrunner-running-order > summary {
  color: #d8d3ef;
  cursor: pointer;
  font-weight: 800;
}

.showrunner-running-order ul {
  display: grid;
  max-height: 360px;
  margin: 13px 0;
  padding: 0;
  gap: 7px;
  overflow: auto;
  list-style: none;
}

.showrunner-running-order li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 190px auto;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #19162d;
}

.showrunner-running-order li.is-current {
  border-color: #14cae9;
  background: #22233f;
}

.showrunner-running-order li.is-next {
  border-color: var(--reveal-yellow);
  background: #2c2942;
}

.showrunner-up-next {
  box-shadow: inset 0 0 0 1px rgba(255, 207, 0, 0.55);
}

.showrunner-up-next strong {
  color: var(--reveal-yellow);
}

.showrunner-position {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  color: #081f17;
  background: #8eeeff;
  font-size: 12px;
  font-weight: 900;
}

.showrunner-running-order li > small {
  color: #938dad;
}

.showrunner-item-buttons {
  display: flex;
  gap: 5px;
}

.showrunner-item-buttons button {
  padding: 7px 9px;
  font-size: 12px;
}

.showrunner-queue-editor {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: 9px;
}

.studio-card .showrunner-queue-editor label {
  margin: 0;
}

.showrunner-edit-note {
  margin: 10px 0 0;
  color: #aaa4cb;
  font-size: 12px;
}

.showrunner-all-included {
  align-self: center;
  margin: 0;
  color: #aaa4cb;
}

@media (max-width: 800px) {
  .showrunner-now-next,
  .showrunner-queue-editor {
    grid-template-columns: 1fr;
  }

  .showrunner-running-order li {
    grid-template-columns: 1fr auto;
  }

  .showrunner-running-order li > small,
  .showrunner-item-buttons {
    grid-column: 2;
  }
}
.jackpot-studio-card {
  grid-column: 1 / -1;
  border-color: rgba(255, 207, 0, 0.42);
}

.jackpot-studio-card.is-live {
  box-shadow: 0 0 0 2px rgba(1, 182, 216, 0.35), 0 18px 45px rgba(4, 2, 17, 0.25);
}

.jackpot-studio-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.jackpot-studio-heading h2 {
  margin-bottom: 12px;
}

.jackpot-maximum {
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--reveal-yellow);
  background: rgba(87, 85, 140, 0.72);
  white-space: nowrap;
}

.jackpot-setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  align-items: end;
  gap: 14px;
}

.studio-card .jacques-toggle {
  display: flex;
  min-height: 42px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.studio-card .jacques-toggle input {
  width: 19px;
  height: 19px;
  accent-color: var(--reveal-yellow);
}

.jackpot-sealed-summary {
  display: grid;
  margin: 8px 0 17px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.jackpot-sealed-summary span {
  display: grid;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #514a74;
  border-radius: 10px;
  background: #17142a;
}

.jackpot-sealed-summary small {
  margin-bottom: 5px;
  color: #aaa4cb;
}

.jackpot-sealed-summary strong {
  overflow: hidden;
  color: var(--reveal-yellow);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jackpot-choice-control {
  margin-top: 0;
}

.jackpot-live-buttons {
  margin-top: 14px;
}

.adjudication-card,
.leaderboard-editor-card {
  grid-column: 1 / -1;
}

.adjudication-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.adjudication-heading h2,
.leaderboard-editor-card h2 {
  margin-bottom: 8px;
}

.adjudication-heading p:not(.eyebrow),
.leaderboard-editor-card > div > p:not(.eyebrow) {
  margin-top: 0;
  color: #bdb7da;
}

.multiplier-badge {
  flex: 0 0 auto;
  border: 1px solid #625a88;
  border-radius: 999px;
  padding: 10px 15px;
  color: #d8d3ef;
  background: #19162d;
  font-size: 14px;
  font-weight: 900;
}

.multiplier-badge:not(.multiplier-1) {
  border-color: var(--reveal-yellow);
  color: #2a2100;
  background: var(--reveal-yellow);
  box-shadow: 0 0 20px rgba(255, 207, 0, 0.25);
}

.answer-control-list,
.leaderboard-editor-list {
  display: grid;
  gap: 9px;
}

.answer-control-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 135px 155px minmax(310px, auto);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #484165;
  border-radius: 11px;
  background: #19162d;
}

.answer-control-row.is-revealed {
  border-color: rgba(92, 225, 170, 0.55);
  background: rgba(28, 57, 53, 0.48);
}

.answer-control-name,
.leaderboard-editor-row > div {
  display: grid;
  min-width: 0;
}

.answer-control-name strong,
.leaderboard-editor-row strong {
  overflow: hidden;
  color: var(--reveal-yellow);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-control-name small,
.leaderboard-editor-row small,
.answer-points-control small {
  margin-top: 3px;
  color: #aaa4cb;
  font-size: 11px;
}

.studio-card .answer-points-control {
  margin: 0;
}

.studio-card .answer-points-control input {
  padding: 8px 9px;
}

.studio-card .jackpot-answer-toggle {
  display: flex;
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: #f5d975;
}

.studio-card .jackpot-answer-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--reveal-yellow);
}

.answer-control-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.answer-control-buttons button {
  padding: 8px 10px;
  font-size: 12px;
}

.direct-jackpot-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(87, 85, 140, 0.2);
}

.direct-jackpot-control p {
  margin: 0;
  color: #bdb7da;
}

.multiplier-controls {
  display: grid;
  margin-top: 18px;
  grid-template-columns: minmax(280px, 1fr) 180px auto;
  align-items: end;
  gap: 14px;
  padding-top: 17px;
  border-top: 1px solid #40395f;
}

.multiplier-controls h3 {
  margin: 0 0 5px;
}

.multiplier-controls p:not(.eyebrow) {
  margin: 0;
  color: #bdb7da;
}

.studio-card .bonus-duration-control {
  margin: 0;
}

.multiplier-buttons {
  display: flex;
  gap: 7px;
}

.multiplier-buttons button {
  min-width: 78px;
}

.leaderboard-editor-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 150px auto auto;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #19162d;
}

.leaderboard-editor-row input {
  padding: 9px 10px;
}

@media (max-width: 1040px) {
  .studio-grid {
    grid-template-columns: 1fr;
  }

  .answer-control-row {
    grid-template-columns: minmax(150px, 1fr) 130px 150px;
  }

  .answer-control-buttons {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .multiplier-controls {
    grid-template-columns: 1fr 180px;
  }

  .multiplier-buttons {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .adjudication-heading,
  .direct-jackpot-control {
    align-items: stretch;
    flex-direction: column;
  }

  .answer-control-row,
  .leaderboard-editor-row,
  .multiplier-controls {
    grid-template-columns: 1fr;
  }

  .answer-control-buttons,
  .multiplier-buttons {
    grid-column: 1;
    flex-wrap: wrap;
  }
}

.review-box {
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #40395f;
}

.review-box textarea {
  width: 100%;
  min-height: 76px;
  resize: vertical;
  border: 1px solid #565077;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  color: #ffffff;
  background: #17142a;
}

.review-box textarea:focus {
  border-color: #25c8e5;
  box-shadow: 0 0 0 3px rgba(37, 200, 229, 0.13);
}

.approve-button {
  border-color: #4de0a4;
  color: #8ff2c5;
}

.reject-button {
  border-color: #e06c81;
  color: #ffa3b0;
}

.review-status {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 800;
}

.review-approved { color: #7bf0bb; }
.review-rejected { color: #ff9eaa; }

/* Leaderboard intermission */

.winner-transition-stage {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  color: #fff;
  font-size: 72px;
  text-transform: uppercase;
  text-shadow: 0 5px 0 #34265e, 0 0 22px rgba(255, 204, 0, 0.55);
}

.winner-transition-stage img {
  width: 330px;
  max-height: 420px;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(20, 5, 52, 0.5));
}

.leaderboard-stage {
  position: relative;
  display: grid;
  width: 1560px;
  height: 740px;
  padding: 20px 32px 24px;
  grid-template-rows: 128px 1fr;
  overflow: hidden;
  border: 8px solid var(--tile-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 207, 0, 0.18), transparent 22%),
    linear-gradient(145deg, rgba(37, 28, 83, 0.97), rgba(87, 40, 111, 0.95) 55%, rgba(173, 52, 132, 0.93));
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.08),
    0 20px 60px rgba(14, 5, 43, 0.46);
}

.leaderboard-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(1, 182, 216, 0.45) 2px, transparent 2px),
    linear-gradient(90deg, rgba(1, 182, 216, 0.45) 2px, transparent 2px);
  background-size: 74px 74px;
  transform: perspective(520px) rotateX(62deg) scale(1.35);
  transform-origin: bottom;
}

.leaderboard-stage::after {
  position: absolute;
  right: -160px;
  bottom: -220px;
  width: 720px;
  height: 440px;
  border-radius: 50%;
  content: "";
  opacity: 0.34;
  background: radial-gradient(circle, #ffcf00 0 8%, #ff769f 9% 30%, transparent 61%);
  filter: blur(8px);
}

.leaderboard-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 4px solid rgba(255, 207, 0, 0.78);
}

.leaderboard-heading > div {
  display: flex;
  align-items: baseline;
  gap: 26px;
}

.leaderboard-heading span {
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.leaderboard-heading strong {
  color: #ffffff;
  font-size: 62px;
  line-height: 1;
  text-shadow: 4px 4px 0 #251d53, 0 0 24px rgba(255, 207, 0, 0.3);
  text-transform: uppercase;
}

.leaderboard-heading img {
  width: 168px;
  height: auto;
  margin-right: 14px;
  align-self: end;
  filter: drop-shadow(0 8px 5px rgba(16, 7, 39, 0.42));
  animation: chops-longwool-bob 3.2s ease-in-out infinite;
}

@keyframes chops-longwool-bob {
  0%,
  100% { transform: translateY(14px) rotate(-1.5deg); }
  50% { transform: translateY(7px) rotate(1.5deg); }
}

.leaderboard-list {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 12px 0 0;
  padding: 0;
  grid-template-rows: repeat(3, 58px) repeat(7, 43px);
  gap: 7px;
  list-style: none;
}

.leaderboard-list li {
  display: grid;
  min-width: 0;
  padding-right: 26px;
  grid-template-columns: 68px minmax(0, 1fr) 250px;
  align-items: center;
  overflow: hidden;
  border: 4px solid #292543;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(90deg, rgba(1, 182, 216, 0.88), rgba(26, 60, 134, 0.88) 26%, rgba(28, 24, 69, 0.93));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 4px 9px rgba(11, 4, 31, 0.22);
}

.leaderboard-list li.leaderboard-podium {
  grid-template-columns: 78px minmax(0, 1fr) 270px;
  border-color: var(--reveal-yellow);
  background: linear-gradient(90deg, #dc4d9f, #6b4fb5 32%, #222050 90%);
}

.leaderboard-list li:first-child {
  background: linear-gradient(90deg, #ff7ba5, #8d55bd 34%, #2b235f 90%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 0 22px rgba(255, 207, 0, 0.22);
}

.leaderboard-list li:nth-child(1) {
  border-color: #f2c94c;
}

.leaderboard-list li:nth-child(2) {
  border-color: #c9d0da;
}

.leaderboard-list li:nth-child(3) {
  border-color: #bf7745;
}

.leaderboard-list li:nth-child(1) .leaderboard-rank {
  border-color: #ffe89a;
  background: linear-gradient(145deg, #ffe78a, #dcae21);
}

.leaderboard-list li:nth-child(2) .leaderboard-rank {
  border-color: #f4f6f8;
  background: linear-gradient(145deg, #eef1f5, #9ea8b7);
}

.leaderboard-list li:nth-child(3) .leaderboard-rank {
  border-color: #e9a678;
  background: linear-gradient(145deg, #db9868, #94502a);
}
.leaderboard-rank {
  display: grid;
  width: 39px;
  height: 39px;
  margin-left: 7px;
  place-items: center;
  border: 3px solid #292543;
  border-radius: 50%;
  color: #ffffff;
  background: var(--cover-cyan);
  font-size: 22px;
  font-weight: 900;
}

.leaderboard-podium .leaderboard-rank {
  width: 49px;
  height: 49px;
  margin-left: 8px;
  border-color: #ffffff;
  color: #ffffff;
  background: #6f6688;
  font-size: 27px;
  text-shadow: 0 2px 2px rgba(22, 15, 42, 0.72);
}
.leaderboard-player {
  min-width: 0;
  overflow: hidden;
  font-size: 27px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-podium .leaderboard-player {
  font-size: 34px;
}

.leaderboard-points {
  color: #ffffff;
  font-size: 25px;
  text-align: right;
  white-space: nowrap;
}

.leaderboard-podium .leaderboard-points {
  color: #ffffff;
  font-size: 31px;
}

.leaderboard-row-empty {
  opacity: 0.52;
}

.leaderboard-row-empty .leaderboard-player {
  font-weight: 600;
}
.twitch-card {
  grid-column: 1 / -1;
  border-color: rgba(145, 70, 255, 0.62);
  background: linear-gradient(135deg, rgba(44, 32, 73, 0.97), rgba(32, 29, 57, 0.97));
}

.twitch-card.twitch-connected {
  border-color: rgba(92, 225, 170, 0.75);
  box-shadow: 0 0 0 2px rgba(92, 225, 170, 0.1), 0 18px 45px rgba(4, 2, 17, 0.22);
}

.twitch-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.twitch-heading h2 {
  margin-bottom: 7px;
}

.twitch-status {
  flex: 0 0 auto;
  border: 1px solid #625a88;
  border-radius: 999px;
  padding: 9px 13px;
  color: #c9c3e8;
  background: #19162d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.twitch-status-connected {
  border-color: #5ce1aa;
  color: #081f17;
  background: #5ce1aa;
}

.twitch-status-authorizing,
.twitch-status-connecting {
  border-color: #25c8e5;
  color: #d8fbff;
  background: rgba(37, 200, 229, 0.18);
}

.twitch-status-error {
  border-color: #ff7e92;
  color: #ffdce2;
  background: rgba(255, 126, 146, 0.16);
}

.twitch-message {
  margin: 0 0 18px;
  color: #c8c2e5;
}

.twitch-connected-details {
  display: grid;
  margin-bottom: 17px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.twitch-connected-details span,
.twitch-approval span {
  display: grid;
  padding: 12px 14px;
  border-radius: 10px;
  background: #19162d;
  gap: 4px;
}

.twitch-connected-details small,
.twitch-approval small {
  color: #918bad;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.twitch-connected-details strong {
  color: #ffffff;
  font-size: 20px;
}

.twitch-approval {
  display: grid;
  margin-bottom: 16px;
  grid-template-columns: minmax(180px, 0.6fr) auto;
  align-items: stretch;
  gap: 10px;
}

.twitch-approval strong {
  color: var(--reveal-yellow);
  font-size: 29px;
  letter-spacing: 0.12em;
}

.twitch-approval > p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #aaa4c8;
  font-size: 12px;
}

.twitch-modern-setup {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(145, 70, 255, 0.4);
  border-radius: 10px;
  background: rgba(17, 14, 34, 0.45);
}

.twitch-modern-setup summary {
  cursor: pointer;
  color: #c8c2e5;
  font-weight: 800;
}

.twitch-modern-setup[open] summary {
  margin-bottom: 12px;
}

.twitch-modern-setup label {
  margin-bottom: 10px;
}
.field-help {
  color: #918bad;
  font-size: 11px;
  font-weight: 500;
}

@media (max-width: 720px) {
  .twitch-heading,
  .twitch-approval {
    grid-template-columns: 1fr;
  }

  .twitch-heading {
    display: grid;
  }

  .twitch-status {
    justify-self: start;
  }

  .twitch-approval > p {
    grid-column: auto;
  }
}
/* Windowless Twitch broadcaster */

.broadcast-card {
  grid-column: 1 / -1;
  border-color: rgba(1, 182, 216, 0.62);
  background: linear-gradient(135deg, rgba(24, 40, 75, 0.97), rgba(36, 27, 63, 0.97));
}

.broadcast-card.broadcast-live {
  border-color: rgba(255, 91, 128, 0.9);
  box-shadow: 0 0 0 2px rgba(255, 91, 128, 0.14), 0 18px 45px rgba(4, 2, 17, 0.25);
}

.broadcast-card.broadcast-testing {
  border-color: rgba(92, 225, 170, 0.78);
}

.broadcast-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.broadcast-heading h2 { margin-bottom: 7px; }

.broadcast-status {
  flex: 0 0 auto;
  border: 1px solid #625a88;
  border-radius: 999px;
  padding: 9px 13px;
  color: #c9c3e8;
  background: #19162d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.broadcast-status-live {
  border-color: #ff5b80;
  color: #fff;
  background: #a21f43;
}

.broadcast-status-testing {
  border-color: #5ce1aa;
  color: #081f17;
  background: #5ce1aa;
}

.broadcast-status-starting,
.broadcast-status-reconnecting {
  border-color: #25c8e5;
  color: #d8fbff;
  background: rgba(37, 200, 229, 0.18);
}

.broadcast-status-error {
  border-color: #ff7e92;
  color: #ffdce2;
  background: rgba(255, 126, 146, 0.16);
}

.broadcast-message {
  margin: 0 0 18px;
  color: #c8c2e5;
}

.broadcast-facts {
  display: grid;
  margin-bottom: 17px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.broadcast-facts span {
  display: grid;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #19162d;
  gap: 4px;
}

.broadcast-facts small {
  color: #918bad;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.broadcast-facts strong {
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-facts .broadcast-safe { color: #7bf0bb; }

.broadcast-key-area {
  margin: 14px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(1, 182, 216, 0.4);
  border-radius: 10px;
  background: rgba(17, 14, 34, 0.45);
}

.broadcast-key-area label { margin-bottom: 11px; }

/* Picture library */
.picture-library-card {
  grid-column: 1 / -1;
}

.picture-library-heading,
.picture-library-heading > div,
.picture-provider-panel,
.picture-library-pane > header,
.candidate-approval-editor > header,
.picture-approved-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.picture-library-heading h2,
.picture-library-pane h3,
.candidate-approval-editor h3,
.picture-approved-heading h3 {
  margin: 0;
}

.picture-library-summary,
.picture-sync-message,
.picture-source-credit,
.picture-archived-note {
  margin: 5px 0 0;
  color: #c8c1df;
}

.picture-sync-badge {
  flex: 0 0 auto;
  border: 1px solid #4de0a4;
  border-radius: 999px;
  padding: 8px 13px;
  color: #7bf0bb;
  background: rgba(50, 191, 132, 0.13);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.picture-sync-badge.sync-needs-key,
.picture-sync-badge.sync-paused-broadcast {
  border-color: #ffcf57;
  color: #ffe29b;
  background: rgba(255, 190, 51, 0.12);
}

.picture-sync-badge.sync-error,
.picture-sync-badge.sync-storage-full {
  border-color: #ff7d8f;
  color: #ff9eaa;
  background: rgba(231, 71, 94, 0.13);
}

.picture-storage-meter {
  height: 7px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #171329;
}

.picture-storage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #01b6d8, #4de0a4);
}

.picture-provider-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #4b446d;
  border-radius: 12px;
  background: #1b1731;
}

.picture-provider-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.picture-provider-panel small {
  color: #aea6c7;
}

.picture-key-row {
  display: flex;
  min-width: 340px;
  gap: 8px;
}

.picture-key-row input { min-width: 230px; }

.picture-search-panel {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #4b446d;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(26, 23, 48, 0.98), rgba(18, 38, 52, 0.9));
}

.picture-search-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.picture-search-panel h3 { margin: 0; }

.picture-search-panel > header > span {
  color: #8eeeff;
  font-weight: 800;
}

.picture-search-form {
  display: grid;
  margin-top: 15px;
  grid-template-columns: minmax(260px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
}

.picture-search-form label {
  margin: 0;
  min-width: 100px;
}

.picture-search-message {
  margin: 10px 0 0;
  color: #bdb6d5;
}

.picture-search-actions { margin-top: 14px; }

.picture-search-grid {
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.picture-search-result {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 11px;
  color: #fff;
  background: #0b0918;
  text-align: left;
}

.picture-search-result.is-selected {
  border-color: #4de0a4;
  box-shadow: 0 0 0 2px rgba(77, 224, 164, 0.17);
}

.picture-search-result img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.picture-search-result > span {
  display: grid;
  padding: 9px 10px 10px;
  gap: 3px;
}

.picture-search-result strong { color: #8eeeff; }
.picture-search-result.is-selected strong { color: #7bf0bb; }

.picture-search-result small {
  overflow: hidden;
  color: #aaa3c6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pexels-link-button {
  border-color: #34b977;
  color: #89edb9;
  background: rgba(52, 185, 119, 0.12);
}

.picture-recipes-panel {
  margin-top: 16px;
  border: 1px solid #4b446d;
  border-radius: 12px;
  background: rgba(18, 15, 37, 0.5);
}

.picture-recipes-panel > summary {
  padding: 14px;
  cursor: pointer;
  font-weight: 800;
}

.picture-recipe-list {
  display: grid;
  padding: 0 14px 14px;
  gap: 8px;
}

.picture-recipe-row {
  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(220px, 1.2fr) 105px 62px;
  align-items: end;
  gap: 8px;
}

.picture-recipe-row label { margin: 0; }

.picture-recipe-toggle {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 0 7px !important;
}

.picture-recipe-toggle small {
  grid-column: 2;
  text-transform: capitalize;
}

.picture-recipe-target {
  display: grid;
  grid-template-columns: 1fr 54px;
  align-items: center;
  gap: 5px !important;
  font-size: 12px;
}

.picture-recipe-target input { min-width: 0; }

.picture-library-workspace {
  display: grid;
  margin-top: 18px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(500px, 1.28fr);
  gap: 14px;
}

.picture-library-pane,
.picture-approved-section {
  min-width: 0;
  padding: 16px;
  border: 1px solid #4b446d;
  border-radius: 14px;
  background: rgba(18, 15, 37, 0.62);
}

.picture-library-pane > header > span,
.picture-approved-heading > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #171329;
  background: #8eeeff;
  font-weight: 900;
}

.picture-candidate-list,
.picture-asset-list {
  display: grid;
  max-height: 640px;
  margin-top: 13px;
  overflow: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.picture-candidate-tile,
.picture-asset-tile {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
  border: 2px solid #4b446d;
  border-radius: 10px;
  color: #f8f6ff;
  background: #211c3d;
  text-align: left;
  gap: 5px;
}

.picture-candidate-tile.is-selected,
.picture-asset-tile.is-selected {
  border-color: #8eeeff;
  box-shadow: 0 0 0 2px rgba(142, 238, 255, 0.16);
}

.picture-candidate-tile img,
.picture-asset-tile img {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  object-fit: cover;
}

.picture-candidate-tile span,
.picture-asset-tile span {
  overflow: hidden;
  padding: 0 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.picture-candidate-tile b {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 4px 6px;
  border-radius: 6px;
  color: #321625;
  background: #ffcf57;
  font-size: 10px;
}

.picture-asset-tile small { padding: 0 3px 3px; color: #aea6c7; }
.picture-asset-tile.is-archived { opacity: 0.48; }

.candidate-approval-editor {
  display: grid;
  gap: 13px;
}

.picture-crop-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 4px solid #675f87;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: #0d0a20;
}

.picture-crop-frame > img {
  position: absolute;
  max-width: none;
  object-fit: fill;
}

.picture-crop-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.picture-crop-controls label {
  margin: 0;
  font-size: 12px;
}

.picture-crop-controls input { padding: 0; }

.picture-safety-check {
  display: grid !important;
  margin: 0 !important;
  padding: 11px;
  border: 1px solid #5c557c;
  border-radius: 10px;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 9px !important;
  background: rgba(1, 182, 216, 0.08);
  line-height: 1.35;
}

.picture-duplicate-check {
  border-color: #9f7d31;
  background: rgba(255, 190, 51, 0.08);
}

.picture-question-form {
  display: grid;
  grid-template-columns: 1fr 0.75fr 0.75fr;
  align-items: end;
  gap: 10px;
}

.picture-question-form label { margin: 0; }

.picture-source-credit {
  font-size: 12px;
}

.picture-empty-state {
  display: grid;
  min-height: 150px;
  padding: 20px;
  place-content: center;
  text-align: center;
}

.picture-empty-state strong { font-size: 18px; }
.picture-empty-state p { max-width: 390px; margin: 7px 0 0; color: #aea6c7; }

.picture-approved-section { margin-top: 18px; }

.picture-approved-layout {
  display: grid;
  margin-top: 14px;
  grid-template-columns: minmax(260px, 0.66fr) minmax(540px, 1.34fr);
  gap: 16px;
}

.picture-asset-list {
  max-height: 880px;
  margin: 0;
}

.approved-asset-editor { min-width: 0; }

.picture-broadcast-preview {
  position: relative;
  overflow: hidden;
  border: 7px solid #2c254a;
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  background: #0d0a20;
}

.picture-broadcast-preview > .picture-crop-frame {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}

.picture-preview-question,
.picture-preview-answer {
  position: absolute;
  z-index: 2;
  right: 4%;
  left: 4%;
  padding: 8px 14px;
  border-radius: 8px;
  color: #ffffff;
  background: rgba(29, 20, 59, 0.88);
  text-align: center;
  font-size: clamp(14px, 2vw, 26px);
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0,0,0,0.38);
}

.picture-preview-question { top: 4%; }
.picture-preview-answer { bottom: 12%; color: #ffdc45; }

.picture-preview-scroller {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 9%;
  overflow: hidden;
  color: #ffffff;
  background: rgba(21, 14, 44, 0.96);
  white-space: nowrap;
  font-size: clamp(10px, 1.2vw, 16px);
  font-weight: 900;
  line-height: 2.9;
  letter-spacing: 0.05em;
}

.picture-preview-scroller span {
  display: inline-block;
  min-width: 150%;
  padding-left: 100%;
  animation: picture-preview-scroll 18s linear infinite;
}

@keyframes picture-preview-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.picture-preview-actions { margin-top: 10px; }
.picture-archived-note { color: #ffe29b; }

.picture-prompt-list {
  display: grid;
  margin-top: 18px;
  gap: 10px;
}

.picture-prompt-list h4,
.picture-new-prompt h4 { margin: 0; }

.picture-prompt-editor {
  display: grid;
  padding: 12px;
  border: 1px solid #4b446d;
  border-radius: 10px;
  background: #211c3d;
  gap: 9px;
}

.picture-prompt-editor label { margin: 0; }

.picture-prompt-answer-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 9px;
}

.picture-inline-toggle {
  display: flex !important;
  margin: 0 !important;
  align-items: center;
  gap: 6px !important;
}

.picture-new-prompt {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #665e89;
  border-radius: 10px;
}

@media (max-width: 1120px) {
  .picture-provider-panel,
  .picture-library-workspace,
  .picture-approved-layout {
    grid-template-columns: 1fr;
  }

  .picture-provider-panel { align-items: stretch; flex-direction: column; }
  .picture-recipe-row { grid-template-columns: 1fr 1.2fr 100px 62px; }
  .picture-search-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .picture-search-form { grid-template-columns: 1fr; }
  .picture-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.broadcast-folder {
  margin: 5px 0 14px;
  overflow: hidden;
  color: #918bad;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.broadcast-preview {
  display: grid;
  margin: 4px 0 16px;
  padding: 12px;
  border: 1px solid rgba(92, 225, 170, 0.42);
  border-radius: 12px;
  background: rgba(10, 8, 25, 0.64);
  gap: 9px;
}

.broadcast-preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.broadcast-preview-heading strong {
  color: #fff;
}

.broadcast-preview-heading span,
.broadcast-preview > small {
  color: #9e98b9;
  font-size: 11px;
}

.broadcast-preview-frame {
  display: grid;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  border: 1px solid #332c55;
  border-radius: 9px;
  color: #9e98b9;
  background: #080614;
}

.broadcast-preview-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.broadcast-actions { margin-top: 4px; }

.broadcast-live-button {
  border-color: #ff5b80;
  color: #fff;
  background: #8e2440;
  font-weight: 800;
}

.broadcast-live-button:hover:not(:disabled) { background: #ae2c4e; }

.broadcast-test-note {
  margin: 14px 0 0;
  color: #7bf0bb;
  font-weight: 750;
}

@media (max-width: 900px) {
  .broadcast-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .broadcast-heading,
  .broadcast-facts {
    display: grid;
    grid-template-columns: 1fr;
  }

  .broadcast-status { justify-self: start; }
}
/* Private browser Studio connection and server budget. */
.server-login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #100c20; color: #f4efff; }
.server-login form { width: min(100%, 480px); display: grid; gap: 18px; padding: 36px; }
.server-login h1, .server-login p { margin: 0; }
.server-login label { display: grid; gap: 8px; }
.server-status-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 20px; border: 1px solid #594778; border-radius: 16px; background: #20192f; color: #e8dff8; }
.server-status-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.server-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #72e3ae; }
.server-dot.is-offline { background: #f2b665; }
.server-preview-link { color: #d4b9ff; padding: 8px 4px; }
.server-status-bar .error-message { flex-basis: 100%; margin: 0; }