/* JMO TV Guide — retro Prevue Channel-style program grid. 16:9, vw/vh sized. */

:root {
  color-scheme: dark;
  --bg-deep: #04041a;
  --grid-blue: #191970;
  --grid-blue-alt: #22228a;
  --channel-blue: #2c2ca0;
  --header-purple: #3a1466;
  --yellow: #ffd23f;
  --white: #f4f4ff;
  --dim: #9a9ad0;
  --line: #00003a;
  --font: "Verdana", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  font-family: var(--font);
  color: var(--white);
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #0a0a3c 0%, #04041a 100%);
}

/* ---------- top area: promo box + clock ---------- */

.topbar {
  height: 30vh;
  display: flex;
  gap: 1vw;
  padding: 1.4vh 1vw 1vh;
}

.promo {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  border: 0.4vh solid var(--yellow);
  border-radius: 0.8vh;
  background:
    radial-gradient(circle at 20% 0%, rgba(120, 80, 255, 0.35), transparent 55%),
    linear-gradient(160deg, #2a0f55 0%, #12063a 70%);
  overflow: hidden;
}

.promo-label {
  padding: 0.9vh 1.2vw;
  background: var(--yellow);
  color: #201040;
  font-weight: 800;
  font-size: 2.3vh;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2vh;
  padding: 1vh 1.4vw;
}

.promo-title {
  font-size: 5vh;
  font-weight: 800;
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0.2vh 0.2vh 0 #000060;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-desc {
  font-size: 2.6vh;
  color: var(--dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.promo-time {
  font-size: 2.4vh;
  font-weight: 700;
  color: var(--yellow);
}

.clockbox {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  border: 0.4vh solid var(--channel-blue);
  border-radius: 0.8vh;
  background: linear-gradient(180deg, #10104c 0%, #08082e 100%);
}

.brand {
  font-size: 4.4vh;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--yellow);
  text-shadow: 0.25vh 0.25vh 0 #000060;
}

.brand span {
  color: var(--white);
}

#clock-time {
  font-size: 7vh;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-shadow: 0.25vh 0.25vh 0 #000060;
}

#clock-date {
  font-size: 2.8vh;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
}

/* ---------- time bar ---------- */

.timebar {
  display: flex;
  height: 6vh;
  margin: 0 1vw;
  border: 0.3vh solid var(--line);
  border-bottom: none;
  border-radius: 0.8vh 0.8vh 0 0;
  overflow: hidden;
  background: var(--header-purple);
  font-weight: 800;
}

.timebar-channel {
  width: 14vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2vh;
  letter-spacing: 0.14em;
  color: var(--yellow);
  border-right: 0.3vh solid var(--line);
}

.timebar-slots {
  flex: 1;
  display: flex;
}

.timebar-slot {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 0.8vw;
  font-size: 2.6vh;
  color: var(--white);
  border-left: 0.3vh solid var(--line);
  text-shadow: 0.15vh 0.15vh 0 #1a0533;
}

.timebar-slot:first-child {
  border-left: none;
}

/* ---------- scrolling grid ---------- */

.grid-viewport {
  flex: 1;
  margin: 0 1vw 1.2vh;
  border: 0.3vh solid var(--line);
  border-radius: 0 0 0.8vh 0.8vh;
  overflow: hidden;
  position: relative;
  background: var(--grid-blue);
}

.grid-strip {
  will-change: transform;
}

.grid-row {
  display: flex;
  height: 9.5vh;
  border-bottom: 0.3vh solid var(--line);
}

.grid-pane .grid-row:nth-child(even) .program-lane {
  background: var(--grid-blue-alt);
}

.channel-cell {
  width: 14vw;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3vh;
  background: var(--channel-blue);
  border-right: 0.3vh solid var(--line);
}

.channel-num {
  font-size: 3.4vh;
  font-weight: 900;
  color: var(--yellow);
  text-shadow: 0.2vh 0.2vh 0 #000060;
}

.channel-name {
  font-size: 1.9vh;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  max-width: 13vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.program-lane {
  position: relative;
  flex: 1;
  background: var(--grid-blue);
}

.program-block {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.7vw;
  border-left: 0.3vh solid var(--line);
  overflow: hidden;
}

.program-title {
  font-size: 2.5vh;
  font-weight: 700;
  color: var(--yellow);
  text-shadow: 0.18vh 0.18vh 0 #000050;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2;
}

.program-block.filler .program-title {
  color: var(--dim);
  font-weight: 400;
}

.source-credit {
  position: absolute;
  right: 1.5vw;
  bottom: 0.8vh;
  z-index: 4;
  color: rgba(244, 244, 255, 0.58);
  font-size: 1.4vh;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-shadow: 0.12vh 0.12vh 0 #000050;
}

/* ---------- CRT flavor ---------- */

.scanlines {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 0.28vh,
    rgba(0, 0, 0, 0.14) 0.28vh,
    rgba(0, 0, 0, 0.14) 0.42vh
  );
  z-index: 5;
}

.vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 10, 0.5) 100%);
  z-index: 6;
}