:root {
  --live-bg: #050b12;
  --live-panel: #0b1826;
  --live-ink: #f3f8ff;
  --live-muted: #8aa0b8;
  --live-green: 0, 230, 118;
  --live-red: 255, 23, 68;
  --live-gold: #ffb547;
  --live-line: #24384f;
  --live-safe-top: env(safe-area-inset-top, 0px);
  --live-safe-right: env(safe-area-inset-right, 0px);
  --live-safe-bottom: env(safe-area-inset-bottom, 0px);
  --live-safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: var(--live-bg);
}
body {
  background: radial-gradient(circle at 12% -10%, #12324a 0, var(--live-bg) 42rem);
  color: var(--live-ink);
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  min-height: 100dvh;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.live-shell {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 100dvh;
  min-height: 100vh;
  padding: 0 0 calc(.55rem + var(--live-safe-bottom));
  gap: .55rem;
}

.live-top {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem 1rem;
  padding: calc(.5rem + var(--live-safe-top)) calc(.85rem + var(--live-safe-right)) .5rem calc(.85rem + var(--live-safe-left));
  background: rgba(5, 11, 18, .94);
  backdrop-filter: saturate(1.15) blur(16px);
  -webkit-backdrop-filter: saturate(1.15) blur(16px);
  border-bottom: 1px solid rgba(36, 56, 79, .7);
}

.live-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.live-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgb(var(--live-green)), #0d8c78);
  color: #04140f;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.live-brand-copy strong, .live-brand-copy small { display: block; }
.live-brand-copy strong { font-size: 1.15rem; letter-spacing: .02em; }
.live-brand-copy small { color: var(--live-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.live-clock { text-align: center; }
.live-clock time {
  display: block;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.live-clock small {
  color: var(--live-muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.live-clock.is-sim time { color: #9ed8ff; }
.live-clock.is-sim small { color: #7ec8ff; }

.live-day { text-align: right; }
.live-day small, .live-day strong { display: block; }
.live-day small { color: #9ed8ff; font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.live-day strong { font-size: 1.05rem; }

.live-actions { display: flex; align-items: center; gap: .45rem; }
.live-status {
  min-width: 5.4rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: #223246;
  color: #c5d5e6;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}
.live-status.is-live { background: rgba(var(--live-green), .16); color: #78efbc; }
.live-status.is-future { background: rgba(82, 168, 255, .16); color: #9ed8ff; }
.live-status.is-error { background: rgba(var(--live-red), .18); color: #ffadb4; }
.live-status.is-loading { background: #223246; color: var(--live-muted); }

.live-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #3d5873;
  border-radius: 10px;
  background: #132334;
  color: var(--live-ink);
  text-decoration: none;
  cursor: pointer;
}
.live-icon-btn svg { width: 20px; height: 20px; display: block; }
.live-icon-btn[aria-pressed="true"] { border-color: rgb(var(--live-green)); color: #78efbc; }

.live-banner {
  margin: 0 calc(.85rem + var(--live-safe-right)) 0 calc(.85rem + var(--live-safe-left));
  padding: .55rem .8rem;
  border: 1px solid rgba(var(--live-red), .5);
  border-radius: 10px;
  background: rgba(90, 18, 31, .72);
  color: #ffe5e8;
  font-weight: 700;
}
.live-banner[hidden] { display: none; }

.live-settings {
  display: grid;
  gap: .55rem;
  margin: 0 calc(.85rem + var(--live-safe-right)) 0 calc(.85rem + var(--live-safe-left));
  padding: .7rem .85rem;
  border: 1px solid var(--live-line);
  border-radius: 14px;
  background: rgba(11, 24, 38, .92);
}
.live-settings[hidden] { display: none; }
.live-settings p {
  margin: 0;
  color: var(--live-muted);
  font-size: .72rem;
  line-height: 1.35;
}
.live-settings label { display: grid; gap: .2rem; }
.live-settings label span {
  display: flex;
  justify-content: space-between;
  color: #d5e7f6;
  font-size: .78rem;
  font-weight: 800;
}
.live-settings label b { color: #78efbc; font-variant-numeric: tabular-nums; }
.live-settings input[type="range"] {
  width: 100%;
  accent-color: rgb(var(--live-green));
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .55rem;
  min-height: 0;
  margin: 0 calc(.85rem + var(--live-safe-right)) 0 calc(.85rem + var(--live-safe-left));
}

.live-belt {
  --belt-life: 0;
  --accent: 90, 110, 128;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  min-height: 0;
  padding: .7rem .65rem .75rem;
  border: 1px solid #1c2a38;
  border-radius: 16px;
  background: linear-gradient(180deg, #101820, #0a1018);
  overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.live-belt.is-green { --accent: var(--live-green); }
.live-belt.is-red { --accent: var(--live-red); }
.live-belt.is-idle .live-belt-num { color: #3d5164; }
.live-belt.is-idle .live-count { color: #5c7388; }
.live-belt.is-idle .live-mode { color: #4a5d72; }

.live-belt.is-busy {
  border-color: rgba(var(--accent), calc(0.22 + var(--belt-life) * 0.78));
  background: linear-gradient(
    180deg,
    rgba(var(--accent), calc(0.08 + var(--belt-life) * 0.52)),
    rgba(10, 16, 24, 0.94) 72%
  );
  box-shadow:
    inset 0 0 0 1px rgba(var(--accent), calc(0.10 + var(--belt-life) * 0.42)),
    0 0 calc(6px + var(--belt-life) * 40px) rgba(var(--accent), calc(var(--belt-life) * 0.55));
}
.live-belt.is-busy .live-belt-num {
  color: color-mix(in srgb, rgb(var(--accent)) calc(var(--belt-life) * 100%), #667788);
}
.live-belt.is-busy .live-count {
  color: color-mix(in srgb, #ffffff calc(55% + var(--belt-life) * 45%), #8aa0b8);
}
.live-belt.is-busy .live-mode {
  color: color-mix(in srgb, rgb(var(--accent)) calc(40% + var(--belt-life) * 60%), #8aa0b8);
}

.live-belt.is-entering {
  border-color: rgb(var(--accent));
  background: linear-gradient(180deg, rgba(var(--accent), .42), #0c141e);
  box-shadow: 0 0 22px rgba(var(--accent), .45);
  animation: live-enter-pulse .85s ease-in-out infinite;
}
.live-belt.is-entering .live-belt-num,
.live-belt.is-entering .live-mode,
.live-belt.is-entering .live-count { color: #fff; }
.live-belt.is-canary { outline: 2px solid rgba(255, 181, 71, .7); outline-offset: -3px; }

@keyframes live-enter-pulse {
  0%, 100% {
    filter: brightness(1);
    box-shadow: 0 0 10px rgba(var(--accent), .28);
  }
  50% {
    filter: brightness(1.28);
    box-shadow: 0 0 34px 4px rgba(var(--accent), .72);
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-belt.is-entering { animation: none; outline: 3px solid rgb(var(--accent)); outline-offset: 0; }
}

.live-belt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .3rem;
}
.live-belt-num {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.04em;
}
.live-belt-hall { color: var(--live-muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.live-mode {
  margin-top: .08rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.live-count {
  margin: .08rem 0 .18rem;
  font-size: clamp(2.05rem, 4.8vw, 4.1rem);
  font-weight: 900;
  letter-spacing: .01em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.live-count.is-free-long { font-size: clamp(1.35rem, 2.6vw, 2.15rem); }

.live-conveyor {
  --belt-speed: 1.1s;
  --bag-speed: 5.2s;
  position: relative;
  height: 2.35rem;
  margin: .12rem 0 .28rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background:
    linear-gradient(#151b22, #0b1016),
    repeating-linear-gradient(90deg, #2a1f08 0 10px, #111 10px 20px);
  background-blend-mode: normal;
}
.live-conveyor::before,
.live-conveyor::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  z-index: 2;
  background: repeating-linear-gradient(90deg, #111 0 8px, #e6b400 8px 16px);
}
.live-conveyor::before { top: 0; }
.live-conveyor::after { bottom: 0; }
.live-conveyor-slats {
  position: absolute;
  inset: 6px 0;
  background: repeating-linear-gradient(
    90deg,
    #1c2733 0 11px,
    #2a3848 11px 13px
  );
  background-size: 24px 100%;
  opacity: .55;
}
.live-conveyor-bags {
  position: absolute;
  inset: 6px 0;
  display: flex;
  align-items: center;
  width: max-content;
  opacity: 0;
  color: #8aa0b8;
}
.live-conveyor-bags span {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  padding: 0 1.1rem;
}
.live-conveyor-bags i {
  position: relative;
  flex: 0 0 auto;
  width: 1.28rem;
  height: 1rem;
  border-radius: .22rem .22rem .16rem .16rem;
  background: currentColor;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 2px 4px rgba(0, 0, 0, .45);
}
.live-conveyor-bags i::before {
  content: "";
  position: absolute;
  top: -.2rem;
  left: .16rem;
  right: .16rem;
  height: .26rem;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: .35rem .35rem 0 0;
  opacity: .9;
  filter: brightness(.72);
}
.live-conveyor-bags i:nth-child(2) { width: 1.5rem; height: 1.12rem; }
.live-conveyor-bags i:nth-child(3) { width: 1.12rem; height: .9rem; }
.live-conveyor-bags i:nth-child(4) { width: 1.38rem; }

.live-belt.is-idle .live-conveyor { opacity: .38; }
.live-belt.is-busy .live-conveyor {
  --belt-speed: calc(0.45s + (1 - var(--belt-life)) * 1.7s);
  --bag-speed: calc(3.4s + (1 - var(--belt-life)) * 5.5s);
  border-color: rgba(var(--accent), calc(0.18 + var(--belt-life) * 0.55));
}
.live-belt.is-busy .live-conveyor-slats {
  opacity: calc(0.45 + var(--belt-life) * 0.55);
  animation: live-belt-slats var(--belt-speed) linear infinite;
}
.live-belt.is-busy .live-conveyor-bags {
  opacity: calc(0.35 + var(--belt-life) * 0.65);
  color: rgb(var(--accent));
  animation: live-belt-bags var(--bag-speed) linear infinite;
}
.live-belt.is-busy .live-conveyor-bags i {
  background: color-mix(in srgb, rgb(var(--accent)) calc(40% + var(--belt-life) * 55%), #5a6c7c);
  color: color-mix(in srgb, rgb(var(--accent)) calc(55% + var(--belt-life) * 45%), #8899aa);
}
.live-belt.is-entering .live-conveyor {
  border-color: rgb(var(--accent));
  animation: live-enter-pulse .85s ease-in-out infinite;
}
.live-belt.is-entering .live-conveyor-slats {
  opacity: .9;
  animation: live-belt-slats .7s linear infinite;
}
.live-belt.is-entering .live-conveyor-bags {
  opacity: .9;
  color: #fff;
  animation: live-belt-bags 3.2s linear infinite;
}
.live-belt.is-entering .live-conveyor-bags i { background: #fff; color: #fff; }

@keyframes live-belt-slats {
  to { background-position: 24px 0; }
}
@keyframes live-belt-bags {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .live-belt.is-busy .live-conveyor-slats,
  .live-belt.is-busy .live-conveyor-bags,
  .live-belt.is-entering .live-conveyor,
  .live-belt.is-entering .live-conveyor-slats,
  .live-belt.is-entering .live-conveyor-bags { animation: none; }
  .live-belt.is-busy .live-conveyor-bags,
  .live-belt.is-entering .live-conveyor-bags { opacity: .85; }
}

.live-flight { min-width: 0; }
.live-flight b, .live-flight span, .live-flight small { display: block; }
.live-flight b {
  overflow: hidden;
  color: #fff;
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-flight span {
  overflow: hidden;
  margin-top: .12rem;
  color: #d5e7f6;
  font-size: clamp(.95rem, 1.35vw, 1.22rem);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-flight small {
  margin-top: .18rem;
  color: var(--live-muted);
  font-size: .72rem;
  font-weight: 700;
}
.live-flight.is-empty b { color: #6f8598; font-weight: 800; letter-spacing: .08em; }
.live-canary { color: var(--live-gold) !important; }
.live-chip {
  display: inline-block;
  margin-top: .18rem;
  padding: .08rem .38rem;
  border-radius: 999px;
  background: rgba(255, 181, 71, .14);
  color: #ffd47d;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.live-next {
  min-width: 0;
  margin-top: .45rem;
  padding-top: .42rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.live-next small, .live-next b, .live-next span { display: block; }
.live-next small {
  color: #9bdab2;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-belt.is-red .live-next small { color: #ffadb4; }
.live-next b {
  overflow: hidden;
  margin-top: .1rem;
  font-size: .92rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-next span { color: var(--live-muted); font-size: .72rem; font-weight: 700; }

.live-scrub {
  margin: 0 calc(.85rem + var(--live-safe-right)) 0 calc(.85rem + var(--live-safe-left));
  padding: .7rem .85rem .45rem;
  border: 1px solid var(--live-line);
  border-radius: 16px;
  background: rgba(11, 24, 38, .92);
}
.live-scrub-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  margin-bottom: .35rem;
}
.live-scrub-head small { display: block; color: var(--live-muted); font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.live-scrub-head strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.live-scrub-meta { min-width: 0; color: var(--live-muted); font-size: .72rem; }
.live-scrub-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.live-play {
  width: 46px;
  height: 46px;
  border: 1px solid #3d5873;
  border-radius: 50%;
  background: #132334;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.live-play[aria-pressed="true"] {
  border-color: rgb(var(--live-green));
  background: rgba(var(--live-green), .16);
  color: #78efbc;
}

.live-slider-wrap { display: block; }
.live-slider-wrap input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: rgb(var(--live-green));
  cursor: pointer;
}
.live-ticks {
  position: relative;
  height: 1.15em;
  margin-top: .15rem;
  color: var(--live-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.live-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.live-ticks span:nth-child(1) { left: 0; transform: none; }
.live-ticks span:nth-child(2) { left: 16.666%; }
.live-ticks span:nth-child(3) { left: 33.333%; }
.live-ticks span:nth-child(4) { left: 50%; }
.live-ticks span:nth-child(5) { left: 66.666%; }
.live-ticks span:nth-child(6) { left: 100%; transform: translateX(-100%); }

@media (max-width: 1100px) {
  .live-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .live-top { grid-template-columns: 1fr auto; }
  .live-day { text-align: left; }
  .live-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (max-width: 720px) {
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; }
  .live-top {
    grid-template-columns: auto 1fr auto;
    gap: .4rem .55rem;
    padding-left: calc(.55rem + var(--live-safe-left));
    padding-right: calc(.55rem + var(--live-safe-right));
  }
  .live-clock { grid-column: 2; grid-row: 1; }
  .live-clock time { font-size: 2.15rem; }
  .live-brand-copy, .live-day { display: none; }
  .live-actions { grid-column: 3; grid-row: 1; }
  .live-status { display: none; }
  .live-grid, .live-banner, .live-scrub, .live-settings {
    margin-left: calc(.55rem + var(--live-safe-left));
    margin-right: calc(.55rem + var(--live-safe-right));
  }
  .live-scrub-head { grid-template-columns: 1fr auto; }
  .live-scrub-meta { display: none; }
  .live-belt { min-height: 210px; }
  .live-count { font-size: clamp(1.85rem, 8vw, 2.6rem); }
}