:root {
  --accent: #306a7e;
  --accent-bright: #3487a0;
  --white: #f7f7f4;
  --soft-white: #efefeb;
  --stage-u: min(1vw, 1.7777778vh);
  --content-left: calc(var(--stage-u) * 5.55);
  --content-right: calc(var(--stage-u) * 7.85);
  --time-geometry: calc(var(--stage-u) * 17.85);
  --room-width: calc(var(--stage-u) * 20.3);
  --status-light-size: calc(var(--stage-u) * 1.72);
  --event-meta-font-family: "brandon-grotesque", Arial, sans-serif;
  --event-meta-font-size: calc(var(--stage-u) * 1.49);
  --event-meta-line-height: 1.02;
  --event-meta-font-weight: 500;
  --room-circle-size: calc(var(--stage-u) * 3.82);
  --room-circle-border-width: calc(var(--stage-u) * 0.15);
  --room-circle-font-size: calc(var(--stage-u) * 2.08);
  --room-circle-gap: calc(var(--stage-u) * 0.55);
  --room-circle-grid-row-gap: calc(var(--stage-u) * 0.1);
  --room-anchor-center-offset: calc(var(--stage-u) * 1.92);
  --room-row-border-compensation: calc(var(--stage-u) * 0.105);
  --room-logo-optical-nudge: calc(var(--stage-u) * -0.903);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "brandon-grotesque", Arial, sans-serif;
  color: var(--white);
  font-weight: 500;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #050707 url("/assets/background.jpg") center / cover no-repeat;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(41, 98, 113, 0.08), transparent 48%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.12));
}

.topbar {
  position: absolute;
  top: calc(var(--stage-u) * 4.15);
  left: var(--content-left);
  right: var(--content-right);
  height: calc(var(--stage-u) * 4.8);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.clock-date-group {
  height: 100%;
  display: grid;
  grid-template-columns: var(--time-geometry) calc(var(--stage-u) * 0.12) auto;
  align-items: center;
}

.live-clock {
  font-size: calc(var(--stage-u) * 3.18);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.clock-divider {
  width: calc(var(--stage-u) * 0.12);
  height: calc(var(--stage-u) * 4.02);
  background: var(--accent);
  opacity: 0.98;
}

.live-date {
  padding-left: calc(var(--stage-u) * 3.15);
  font-size: calc(var(--stage-u) * 3.18);
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.brand-logo {
  display: block;
  width: calc(var(--stage-u) * 19.8);
  height: auto;
  object-fit: contain;
  transform: translateX(var(--room-logo-optical-nudge));
}

.schedule-shell {
  position: absolute;
  inset: 0;
}

.column-headings {
  position: absolute;
  top: calc(var(--stage-u) * 12.18);
  left: var(--content-left);
  right: var(--content-right);
  height: calc(var(--stage-u) * 3.6);
  display: grid;
  grid-template-columns: var(--time-geometry) minmax(0, 1fr) var(--room-width);
  align-items: center;
  font-size: calc(var(--stage-u) * 1.78);
  line-height: 1;
  letter-spacing: 0.005em;
}

.heading-time,
.heading-event,
.heading-room {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.heading-time {
  padding-left: calc(var(--stage-u) * 3.05);
  gap: calc(var(--stage-u) * 1.55);
}

.heading-event {
  gap: calc(var(--stage-u) * 1.55);
  padding-left: calc(var(--stage-u) * 2.55);
}

.heading-room {
  gap: calc(var(--stage-u) * 2.1);
  padding-left: calc(var(--room-anchor-center-offset) - (var(--stage-u) * 1.34));
}

.column-headings img {
  width: calc(var(--stage-u) * 2.68);
  height: calc(var(--stage-u) * 2.68);
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(36%) sepia(21%) saturate(1491%) hue-rotate(147deg) brightness(94%) contrast(88%);
}

.column-headings img.lamp-image {
  width: var(--status-light-size);
  height: var(--status-light-size);
  filter: none;
}

.now-legend {
  margin-left: calc(var(--stage-u) * 0.1);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--stage-u) * 0.92);
  color: #f3ecc9;
  font-size: calc(var(--stage-u) * 1.68);
}

.event-list {
  position: absolute;
  top: calc(var(--stage-u) * 18.45);
  left: var(--content-left);
  right: var(--content-right);
  bottom: calc(var(--stage-u) * 6.0);
  display: flex;
  flex-direction: column;
  gap: calc(var(--stage-u) * 1.42);
}

.event-list.count-1,
.event-list.count-2 {
  justify-content: center;
  gap: calc(var(--stage-u) * 2.05);
}

.event-list.count-5 {
  gap: calc(var(--stage-u) * 0.86);
}

.event-row {
  position: relative;
  width: 100%;
  min-height: 0;
  height: calc(var(--stage-u) * 6.65);
  display: grid;
  grid-template-columns: calc(var(--stage-u) * 3.42) calc(var(--stage-u) * 14.43) calc(var(--stage-u) * 0.11) minmax(0, 1fr) var(--room-width);
  align-items: center;
  overflow: hidden;
  border: calc(var(--stage-u) * 0.14) solid rgba(48, 106, 126, 0.98);
  border-radius: calc(var(--stage-u) * 2.4);
  background:
    linear-gradient(to bottom, rgba(11, 28, 34, 0.93) 0%, rgba(18, 48, 58, 0.96) 54%, rgba(38, 106, 127, 0.96) 100%);
  box-shadow:
    inset 0 calc(var(--stage-u) * -0.12) calc(var(--stage-u) * 0.8) rgba(71, 177, 207, 0.19),
    inset 0 calc(var(--stage-u) * 0.1) calc(var(--stage-u) * 0.5) rgba(3, 8, 10, 0.75);
}

.event-row.is-active {
  border-color: rgba(58, 133, 157, 1);
  box-shadow:
    inset 0 calc(var(--stage-u) * -0.12) calc(var(--stage-u) * 0.9) rgba(80, 190, 219, 0.24),
    0 0 calc(var(--stage-u) * 0.55) rgba(48, 106, 126, 0.15);
}

.count-1 .event-row,
.count-2 .event-row {
  height: calc(var(--stage-u) * 8.05);
  border-radius: calc(var(--stage-u) * 2.85);
}

.count-5 .event-row {
  height: calc(var(--stage-u) * 5.72);
  border-radius: calc(var(--stage-u) * 2.15);
}

.status-cell,
.time-cell,
.title-cell,
.room-cell {
  min-width: 0;
}

.status-cell {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: calc(var(--stage-u) * 0.28);
}

.lamp {
  flex: 0 0 auto;
  display: inline-block;
  width: var(--status-light-size);
  height: var(--status-light-size);
  border-radius: 50%;
  border: calc(var(--stage-u) * 0.06) solid rgba(222, 222, 216, 0.44);
  background:
    radial-gradient(circle at 38% 32%, #848781 0 8%, #343836 28%, #0a0c0c 66%, #010202 100%);
  box-shadow:
    inset calc(var(--stage-u) * -0.08) calc(var(--stage-u) * -0.1) calc(var(--stage-u) * 0.22) rgba(0, 0, 0, 0.85),
    inset calc(var(--stage-u) * 0.1) calc(var(--stage-u) * 0.08) calc(var(--stage-u) * 0.13) rgba(255, 255, 255, 0.34),
    0 0 calc(var(--stage-u) * 0.08) rgba(255, 255, 255, 0.24);
}

.lamp-on {
  background:
    radial-gradient(circle at 40% 34%, #fff8cf 0 7%, #ffe7a1 21%, #e8aa4b 47%, #8f4e19 75%, #2d190d 100%);
  border-color: rgba(255, 249, 220, 0.65);
  box-shadow:
    inset calc(var(--stage-u) * -0.06) calc(var(--stage-u) * -0.08) calc(var(--stage-u) * 0.18) rgba(92, 44, 6, 0.78),
    inset calc(var(--stage-u) * 0.08) calc(var(--stage-u) * 0.07) calc(var(--stage-u) * 0.13) rgba(255, 255, 255, 0.72),
    0 0 calc(var(--stage-u) * 0.48) rgba(255, 202, 105, 0.43);
}

.lamp-image {
  border: 0;
  object-fit: contain;
  background: none !important;
  box-shadow: none !important;
}

.time-cell,
.room-name {
  font-family: var(--event-meta-font-family);
  font-size: var(--event-meta-font-size);
  line-height: var(--event-meta-line-height);
  font-weight: var(--event-meta-font-weight);
}

.time-cell {
  padding-left: calc(var(--stage-u) * 0.3);
  padding-right: calc(var(--stage-u) * 0.6);
  white-space: nowrap;
  text-align: left;
}

.time-divider {
  align-self: center;
  width: 100%;
  height: 68%;
  background: rgba(53, 134, 158, 0.78);
}

.title-cell {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 calc(var(--stage-u) * 1.85);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.012em;
  text-wrap: balance;
  overflow-wrap: normal;
}

.title-large .title-cell {
  font-size: calc(var(--stage-u) * 2.18);
}

.title-standard .title-cell {
  font-size: calc(var(--stage-u) * 1.9);
}

.title-compact .title-cell {
  font-size: calc(var(--stage-u) * 1.62);
  line-height: 0.96;
}

.count-1 .title-cell,
.count-2 .title-cell {
  font-size: calc(var(--stage-u) * 2.22);
}

.count-5 .title-cell {
  font-size: min(calc(var(--stage-u) * 1.72), 3.1vh);
}

.room-cell {
  height: 100%;
  display: grid;
  grid-template-columns: calc(var(--stage-u) * 4.95) minmax(0, 1fr);
  align-items: center;
  padding-left: calc(
    var(--room-anchor-center-offset) - (var(--room-circle-size) / 2) +
    var(--room-row-border-compensation)
  );
  padding-right: calc(var(--stage-u) * 1.35);
}

.room-number {
  width: var(--room-circle-size);
  height: var(--room-circle-size);
  justify-self: start;
  flex: 0 0 var(--room-circle-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--room-circle-border-width) solid rgba(48, 106, 126, 1);
  border-radius: 50%;
  background: rgba(13, 28, 34, 0.7);
  font-size: var(--room-circle-font-size);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.room-name {
  padding-left: calc(var(--stage-u) * 0.42);
  text-transform: uppercase;
  white-space: normal;
  text-wrap: balance;
}

.room-cell-multiple {
  display: flex;
  justify-content: flex-start;
  padding-right: 0;
}

.room-number-list {
  width: max-content;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--room-circle-gap);
}

.room-layout-grid .room-number-list {
  width: calc(
    var(--room-circle-size) + var(--room-circle-size) + var(--room-circle-size) +
    var(--room-circle-gap) + var(--room-circle-gap)
  );
  height: calc(var(--room-circle-size) + var(--room-circle-size) + var(--room-circle-grid-row-gap));
  flex-wrap: wrap;
  column-gap: var(--room-circle-gap);
  row-gap: var(--room-circle-grid-row-gap);
  align-content: center;
}

.room-number:empty {
  visibility: hidden;
}

.event-list.count-many {
  gap: calc(var(--stage-u) * 0.5);
}

.count-many .event-row {
  --event-meta-font-size: calc(var(--stage-u) * 1.08);
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  border-radius: calc(var(--stage-u) * 1.6);
}

.count-many .title-cell {
  font-size: calc(var(--stage-u) * 1.35);
}

.message-state {
  position: absolute;
  left: var(--content-left);
  right: var(--content-right);
  top: 47.5%;
  transform: translateY(-50%);
  text-align: center;
  font-size: calc(var(--stage-u) * 2.42);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  color: var(--soft-white);
}

.stage.mode-message .column-headings,
.stage.mode-message .event-list {
  display: none;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}