:root {
  --bg:#050505;
  --panel:#0b0b0c;
  --line:rgba(236,188,66,.28);
  --gold:#edbd43;
  --gold2:#ffd76d;
  --green:#55df84;
  --blue:#55aaff;
  --red:#ff5a58;
  --orange:#ff9d42;
  --white:#f8f8f8;
  --muted:#969696;
}

* {
  box-sizing:border-box;
}

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

body {
  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
  color:var(--white);
}

.tv-shell {
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows:
    10vh
    80vh
    10vh;
  padding:
    1.8vh
    1.8vw;
  background:
    radial-gradient(
      circle at 58% 42%,
      rgba(232,182,53,.045),
      transparent 45%
    ),
    #050505;
}

.tv-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:
    1px solid
    var(--line);
}

.oro-brand {
  display:flex;
  align-items:baseline;
  gap:1vw;
}

.oro-word {
  font-size:
    clamp(
      32px,
      3vw,
      68px
    );
  font-weight:1000;
  letter-spacing:-.07em;
  color:var(--gold);
}

.oro-sub {
  font-size:
    clamp(
      14px,
      1.05vw,
      24px
    );
  font-weight:900;
  letter-spacing:.08em;
}

.connection {
  padding:.65vh 1vw;
  border:
    1px solid
    rgba(255,255,255,.12);
  border-radius:999px;
  font-size:
    clamp(
      10px,
      .7vw,
      15px
    );
  font-weight:900;
  color:var(--muted);
}

.connection.live {
  color:var(--green);
  border-color:
    rgba(85,223,132,.35);
}

.show-grid {
  display:grid;

  grid-template-columns:
    22%
    22%
    34%
    22%;

  min-height:0;

  padding-top:
    1.7vh;

  padding-bottom:
    1.7vh;
}

.panel {
  min-width:0;
  min-height:0;
  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(18,18,18,.96),
      rgba(7,7,7,.99)
    );

  border:
    1px solid
    var(--line);
}

.checked-panel {
  border-radius:
    16px 0 0 16px;
}

.next-panel {
  border-radius:
    0 16px 16px 0;
}

.panel-title {
  height:10%;
  display:flex;
  align-items:center;
  justify-content:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  font-size:
    clamp(
      15px,
      1.25vw,
      29px
    );

  font-weight:1000;
  letter-spacing:.035em;
}

.checked-title {
  color:var(--green);
}

.missing-title {
  color:var(--orange);
}

.current-title {
  color:var(--gold);
}

.next-title {
  color:var(--blue);
}

.queue-list {
  height:90%;
  display:flex;
  flex-direction:column;
  padding:
    1.5vh
    1vw;
}

.queue-row {
  min-height:13.5%;
  display:grid;

  grid-template-columns:
    18%
    minmax(0,1fr)
    auto;

  gap:.5vw;
  align-items:center;

  border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.queue-act {
  color:var(--gold);
  font-size:
    clamp(
      18px,
      1.45vw,
      34px
    );
  font-weight:1000;
}

.not-checked-row
.queue-act {
  color:var(--orange);
}

.queue-info {
  min-width:0;
}

.queue-name {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  font-size:
    clamp(
      12px,
      .95vw,
      22px
    );

  font-weight:1000;
}

.queue-studio {
  margin-top:.25vh;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  color:var(--muted);

  font-size:
    clamp(
      8px,
      .58vw,
      13px
    );
}

.queue-right {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.35vh;
}

.queue-check {
  width:
    clamp(
      23px,
      1.65vw,
      38px
    );

  aspect-ratio:1;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#051208;
  background:var(--green);

  font-size:
    clamp(
      13px,
      .9vw,
      21px
    );

  font-weight:1000;
}

.queue-warning {
  color:var(--orange);
  font-size:
    clamp(
      15px,
      1vw,
      24px
    );
  font-weight:1000;
}

.queue-eta {
  color:#d8d8d8;

  font-size:
    clamp(
      8px,
      .55vw,
      12px
    );

  font-weight:900;

  white-space:nowrap;
}

.hero-content {
  height:90%;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  text-align:center;

  padding:
    2vh
    1.6vw;
}

.hero-act {
  font-size:
    clamp(
      70px,
      6.3vw,
      145px
    );

  line-height:.88;
  font-weight:400;
}

.current-panel
.hero-act {
  color:var(--gold);
}

.next-panel
.hero-act {
  color:var(--blue);
}

.hero-name {
  margin-top:2.2vh;

  max-width:100%;

  font-size:
    clamp(
      27px,
      2.45vw,
      58px
    );

  line-height:1;

  font-weight:1000;

  text-transform:uppercase;
}

.hero-studio {
  margin-top:1.25vh;

  color:var(--gold);

  font-size:
    clamp(
      14px,
      1.1vw,
      25px
    );

  font-weight:900;
}

.next-panel
.hero-studio {
  color:var(--blue);
}

.hero-type {
  margin-top:1.3vh;

  color:#d4d4d4;

  font-size:
    clamp(
      11px,
      .82vw,
      18px
    );
}

.timing-box {
  width:min(
    90%,
    650px
  );

  margin-top:3vh;
}

.time-left {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:.7vw;
}

.time-number {
  color:var(--gold2);

  font-size:
    clamp(
      28px,
      2.65vw,
      60px
    );

  line-height:1;

  font-weight:1000;
}

.time-label {
  color:#b5b5b5;

  font-size:
    clamp(
      10px,
      .72vw,
      16px
    );

  font-weight:900;

  padding-bottom:.45vh;
}

.progress-track {
  width:100%;
  height:
    clamp(
      7px,
      .7vh,
      12px
    );

  margin-top:1.2vh;

  border-radius:999px;

  overflow:hidden;

  background:
    rgba(255,255,255,.12);
}

.progress-bar {
  height:100%;
  width:0%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #b88316,
      #ffd45b
    );

  transition:
    width .35s linear;
}

.timing-meta {
  margin-top:.8vh;

  color:#858585;

  font-size:
    clamp(
      8px,
      .58vw,
      13px
    );

  font-weight:800;
}

.next-eta {
  margin-top:2.2vh;

  padding:
    .7vh
    1vw;

  border:
    1px solid
    rgba(85,170,255,.28);

  border-radius:999px;

  color:#a8d2ff;

  font-size:
    clamp(
      11px,
      .82vw,
      18px
    );

  font-weight:1000;
}

.waiting {
  color:var(--muted);
}

.waiting
.hero-act {
  color:
    rgba(255,255,255,.16);
}

.empty-list {
  padding-top:7vh;
  text-align:center;
  color:#707070;
  font-weight:900;
  font-size:
    clamp(
      10px,
      .7vw,
      15px
    );
}

.tv-footer {
  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  border-top:
    1px solid
    var(--line);
}

.show-status {
  color:var(--gold);

  font-size:
    clamp(
      13px,
      1vw,
      23px
    );

  font-weight:1000;
  letter-spacing:.06em;
}

.pace-status {
  color:#8e8e8e;

  font-size:
    clamp(
      9px,
      .65vw,
      14px
    );

  font-weight:900;

  letter-spacing:.08em;
}

.oro-footer {
  justify-self:end;

  color:#757575;

  font-size:
    clamp(
      9px,
      .62vw,
      14px
    );

  font-weight:800;
  letter-spacing:.12em;
}