:root {
  color-scheme: dark;
  background: #000;
  font-family: system-ui, sans-serif;
}

@font-face {
  font-family: "Rotmates Display";
  src: url("/fonts/luckiest-guy.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Rotmates Pixel";
  src: url("/fonts/supermario286rusbylyajka.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body, .stage {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

#playoutVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.on-air-overlay {
  position: fixed;
  z-index: 10;
  top: 26px;
  left: 26px;
  width: min(570px, calc(100vw - 52px));
  color: #fff;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 98%)) drop-shadow(0 5px 8px rgb(0 0 0 / 92%));
  pointer-events: none;
}

.on-air-heading {
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: 100%;
  color: #ff9b42;
  font: 800 15px/1 "Rotmates Pixel", system-ui, sans-serif;
  letter-spacing: .14em;
}

.on-air-dot { display: none; }

#overlayTitle {
  display: -webkit-box;
  max-width: 100%;
  margin: 5px 0 10px;
  overflow: hidden;
  color: #fff;
  font: 400 clamp(25px, 2.65vw, 38px)/.98 "Rotmates Display", Impact, sans-serif;
  letter-spacing: .025em;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #17120f;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.on-air-identity {
  display: grid;
  gap: 5px;
  font: 700 13px/1.18 "Rotmates Pixel", ui-monospace, monospace;
  letter-spacing: .025em;
}

.on-air-identity code {
  min-width: 0;
  color: #fff;
  font: inherit;
  overflow-wrap: anywhere;
}

.on-air-learn {
  color: rgb(255 255 255 / 88%);
  font-size: 12px;
  letter-spacing: .08em;
}

.on-air-learn b {
  color: #62e6ff;
  font: inherit;
  text-shadow: 0 0 12px rgb(98 230 255 / 48%);
}

.new-episode-splash {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgb(0 0 0 / 78%);
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.new-episode-splash[hidden] { display: none; }

.new-episode-card {
  display: grid;
  width: min(760px, calc(100vw - 72px));
  gap: 9px;
  padding: 44px 50px 40px;
  text-align: center;
  border-top: 5px solid #ff9b42;
  border-bottom: 5px solid #62e6ff;
  background: rgb(12 10 9 / 82%);
  box-shadow: 0 18px 70px rgb(0 0 0 / 72%);
  animation: new-episode-arrival 3s ease both;
}

.new-episode-card > span,
.new-episode-card > small {
  color: #ff9b42;
  font: 800 18px/1 "Rotmates Pixel", system-ui, sans-serif;
  letter-spacing: .18em;
}

.new-episode-card > strong {
  color: #62e6ff;
  font: 800 22px/1 "Rotmates Pixel", system-ui, sans-serif;
  letter-spacing: .12em;
}

.new-episode-card > b {
  font: 400 clamp(42px, 6vw, 76px)/.95 "Rotmates Display", Impact, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #17120f;
}

.new-episode-card > small {
  margin-top: 8px;
  color: rgb(255 255 255 / 78%);
  font-size: 12px;
}

@keyframes new-episode-arrival {
  0% { opacity: 0; scale: .94; }
  14%, 82% { opacity: 1; scale: 1; }
  100% { opacity: 0; scale: 1.02; }
}

.status {
  position: fixed;
  left: 24px;
  bottom: 24px;
  display: grid;
  gap: 4px;
  max-width: min(640px, calc(100vw - 48px));
  padding: 12px 16px;
  color: #fff;
  background: rgb(0 0 0 / 72%);
  border-left: 4px solid #ff4f79;
}

.status span, .status small { color: #c9c9c9; }
.status strong { letter-spacing: .05em; }

#start {
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  padding: 16px 24px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: #ffd24d;
  font: 800 18px/1 system-ui, sans-serif;
  cursor: pointer;
}

#start[hidden] { display: none; }
body.clean .status { display: none; }
body[data-state="playing"] .status { opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .on-air-overlay { top: 16px; left: 16px; width: calc(100vw - 32px); }
  .new-episode-card { width: calc(100vw - 32px); padding: 28px 22px 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .new-episode-card { animation: none; }
}