/* Lobby board + room door display. Sized in --u (1vh landscape, 1vw portrait) so 720p, 1080p and 4K look the same.
   Old TV browsers: no clamp(), aspect-ratio, :has() or flex gap — grid gap and custom properties only. */
:root {
  --u: 1vh;
  --bg: #070d1a;
  --bg2: #0d1830;
  --panel: rgba(255, 255, 255, .045);
  --panel2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .09);
  --text: #f4f7fc;
  --muted: #9aabc6;
  --faint: #60708b;
  --gold: #f5c542;
  --live: #22c55e;
  --soon: #f59e0b;
  --up: #60a5fa;
  --done: #64748b;
  --cancel: #f87171;
  --busy: #dc2626;
  --free: #16a34a;
}
[data-theme="light"] {
  --bg: #eef2f8;
  --bg2: #ffffff;
  --panel: #ffffff;
  --panel2: #f3f6fb;
  --line: #d9e1ee;
  --text: #0b1324;
  --muted: #475a78;
  --faint: #7d8ba3;
  --gold: #a87b06;
  --live: #15803d;
  --soon: #b45309;
  --up: #1d4ed8;
  --done: #64748b;
  --cancel: #b91c1c;
}
@media (orientation: portrait) { :root { --u: 1vw; } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body.board {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 0% 0%, var(--bg2) 0%, var(--bg) 60%);
  color: var(--text);
  font-family: 'Kantumruy Pro', 'Khmer OS Battambang', 'Noto Sans Khmer', sans-serif;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
  cursor: none;
}
body.preview { cursor: default; }
.km, .en { display: block; }
.en { color: var(--muted); }
.icon { width: 1em; height: 1em; vertical-align: -0.12em; }

.stage {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3.6) calc(var(--u) * 1.6);
  transition: transform 2s ease;
}

/* ---------- header ---------- */
.top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-column-gap: calc(var(--u) * 2.4);
  padding-bottom: calc(var(--u) * 1.3);
  border-bottom: 1px solid var(--line);
}
.logo { width: calc(var(--u) * 8.4); height: calc(var(--u) * 8.4); object-fit: contain; }
.who-tag {
  display: inline-block;
  font-size: calc(var(--u) * 2.6);
  font-weight: 700;
  color: #111;
  background: var(--gold);
  border-radius: calc(var(--u) * .8);
  padding: 0 calc(var(--u) * 1.2);
  margin-bottom: calc(var(--u) * .4);
}
.who-km { font-size: calc(var(--u) * 3.3); font-weight: 700; }
.who-en { font-size: calc(var(--u) * 2.2); color: var(--muted); letter-spacing: .02em; }
.when { text-align: right; }
.clock { font-size: calc(var(--u) * 7.6); font-weight: 700; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.clock .colon { opacity: 1; }
.clock.tick .colon { opacity: .25; }
.date-km { font-size: calc(var(--u) * 2.3); margin-top: calc(var(--u) * .6); }
.date-lunar { font-size: calc(var(--u) * 1.75); color: var(--gold); opacity: .9; }
.date-en { font-size: calc(var(--u) * 1.9); color: var(--muted); }

/* ---------- lobby ---------- */
.lobby { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.title-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: calc(var(--u) * 1.2) 0 calc(var(--u) * .8);
}
.title-bar h1 { margin: 0; font-weight: 700; }
.title-bar h1 .km { font-size: calc(var(--u) * 3.7); line-height: 1.2; }
.title-bar h1 .en { font-size: calc(var(--u) * 1.8); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.summary { text-align: right; }
.chip {
  display: inline-block;
  margin-left: calc(var(--u) * 1);
  padding: calc(var(--u) * .5) calc(var(--u) * 1.3);
  border-radius: 999px;
  background: var(--panel2);
  font-size: calc(var(--u) * 2);
  font-weight: 600;
}
.chip .dot { margin-right: calc(var(--u) * .7); }
.chip .en { display: inline; font-weight: 400; font-size: .8em; margin-left: calc(var(--u) * .5); }
.dot {
  display: inline-block;
  width: .62em; height: .62em;
  border-radius: 50%;
  background: currentColor;
  vertical-align: .08em;
}
.note {
  font-size: calc(var(--u) * 2);
  color: var(--muted);
  margin-bottom: calc(var(--u) * 1);
}
.note .en { display: inline; margin-left: calc(var(--u) * 1); }

/* hero: featured event / VIP welcome */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: calc(var(--u) * 2.4);
  align-items: center;
  margin: calc(var(--u) * .2) 0 calc(var(--u) * 1);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.6);
  background: linear-gradient(100deg, rgba(245, 197, 66, .18), rgba(245, 197, 66, .04) 60%);
  border: 2px solid var(--gold);
}
.hero-tag { font-size: calc(var(--u) * 1.6); font-weight: 700; color: var(--gold); letter-spacing: .08em; }
.hero-tag .en { display: inline; color: var(--gold); opacity: .8; margin-left: calc(var(--u) * 1); text-transform: uppercase; }
.hero-km { font-size: calc(var(--u) * 3.5); font-weight: 700; line-height: 1.25; }
.hero-en { font-size: calc(var(--u) * 2.1); color: var(--muted); }
.hero-meta { font-size: calc(var(--u) * 2); margin-top: calc(var(--u) * .4); }
.hero-meta .sep { color: var(--faint); margin: 0 calc(var(--u) * .8); }
.hero-qr { text-align: center; font-size: calc(var(--u) * 1.4); color: var(--muted); }
.hero-qr .qr-svg { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); display: block; margin: 0 auto calc(var(--u) * .5); border-radius: calc(var(--u) * .6); }

/* table */
.thead, .row {
  display: grid;
  grid-template-columns: 11% 1fr 25% 17%;
  grid-column-gap: calc(var(--u) * 2.2);
  align-items: center;
}
.thead {
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6) calc(var(--u) * .7) calc(var(--u) * 2.3);
  font-size: calc(var(--u) * 1.5);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  border-bottom: 2px solid var(--line);
}
.thead .km, .thead .en { display: inline; }
.thead .en { margin-left: calc(var(--u) * .8); text-transform: uppercase; color: var(--faint); }
.rows { flex: 1 1 0; list-style: none; margin: 0; padding: 0; overflow: hidden; min-height: 0; }
.rows.flip { animation: flip .7s ease; }
@keyframes flip { from { opacity: 0; transform: translateY(calc(var(--u) * 1.2)); } to { opacity: 1; transform: none; } }
.row {
  position: relative;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border-bottom: 1px solid var(--line);
  border-left: calc(var(--u) * .7) solid transparent;
}
.row .km, .row .en { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.c-time b { display: block; font-size: calc(var(--u) * 3.2); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.c-time span { display: block; font-size: calc(var(--u) * 2); color: var(--muted); font-variant-numeric: tabular-nums; }
.c-event .km { font-size: calc(var(--u) * 2.9); font-weight: 600; line-height: 1.3; }
.c-event .en { font-size: calc(var(--u) * 2); }
.c-event .org { font-size: calc(var(--u) * 1.6); color: var(--faint); margin-top: calc(var(--u) * .2); }
.c-room .km { font-size: calc(var(--u) * 2.3); font-weight: 600; }
.c-room .en { font-size: calc(var(--u) * 1.7); }
.code {
  display: inline-block;
  font-weight: 700;
  font-size: .92em;
  padding: 0 calc(var(--u) * .7);
  margin-right: calc(var(--u) * .7);
  border-radius: calc(var(--u) * .5);
  background: var(--panel2);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.pill { display: inline-block; font-size: calc(var(--u) * 2.1); font-weight: 700; }
.pill .dot { margin-right: calc(var(--u) * .7); }
.pill .icon { margin-right: calc(var(--u) * .5); }
.c-status .en { font-size: calc(var(--u) * 1.5); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sub { font-size: calc(var(--u) * 1.75); margin-top: calc(var(--u) * .2); font-weight: 600; }
.sub .en { display: inline; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: calc(var(--u) * .6); }
.bar { height: calc(var(--u) * .5); margin-top: calc(var(--u) * .6); border-radius: 999px; background: var(--panel2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--live); border-radius: 999px; }

.s-live { border-left-color: var(--live); background: linear-gradient(90deg, rgba(34, 197, 94, .14), rgba(34, 197, 94, 0) 70%); }
.s-live .pill, .s-live .sub { color: var(--live); }
.s-live .pill .dot { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.s-soon { border-left-color: var(--soon); background: linear-gradient(90deg, rgba(245, 158, 11, .12), rgba(245, 158, 11, 0) 70%); }
.s-soon .pill, .s-soon .sub { color: var(--soon); }
.s-upcoming .pill { color: var(--up); }
.s-done { opacity: .5; }
.s-done .pill { color: var(--done); }
.s-cancelled .pill { color: var(--cancel); }
.s-cancelled .c-event .km, .s-cancelled .c-event .en, .s-cancelled .c-time b { text-decoration: line-through; opacity: .7; }

.empty { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.empty .km { font-size: calc(var(--u) * 4.4); font-weight: 700; }
.empty .en { font-size: calc(var(--u) * 2.6); }
.empty-icon { font-size: calc(var(--u) * 10); color: var(--gold); opacity: .8; }
.empty-welcome { margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 2.4); color: var(--muted); }
.empty-welcome .km, .empty-welcome .en { display: block; }

/* ---------- footer ---------- */
.bottom {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  grid-column-gap: calc(var(--u) * 2.4);
  align-items: center;
  padding-top: calc(var(--u) * 1.4);
  border-top: 1px solid var(--line);
  min-height: calc(var(--u) * 8);
}
.ticker { font-size: calc(var(--u) * 2.2); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ticker-tag {
  display: inline-block;
  font-size: .8em;
  font-weight: 700;
  color: #111;
  background: var(--gold);
  border-radius: calc(var(--u) * .5);
  padding: 0 calc(var(--u) * .8);
  margin-right: calc(var(--u) * 1);
}
.ticker-tag:empty { display: none; }
.ticker-text { transition: opacity .6s ease; }
.ticker-text.out { opacity: 0; }
.pager span {
  display: inline-block;
  width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1);
  margin: 0 calc(var(--u) * .4);
  border-radius: 50%;
  background: var(--panel2);
  border: 1px solid var(--line);
}
.pager span.on { background: var(--gold); border-color: var(--gold); }
.net { font-size: calc(var(--u) * 1.7); color: var(--soon); text-align: right; }
.net .en { font-size: .9em; }
.qr { display: grid; grid-template-columns: auto auto; grid-column-gap: calc(var(--u) * 1.2); align-items: center; }
.qr-code .qr-svg { width: calc(var(--u) * 7.6); height: calc(var(--u) * 7.6); display: block; border-radius: calc(var(--u) * .5); }
.qr-label .km { font-size: calc(var(--u) * 2); font-weight: 700; }
.qr-label .en { font-size: calc(var(--u) * 1.6); }

/* ---------- alert (emergency / notice over everything) ---------- */
.alert {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vh 8vw;
  color: #fff;
  background: #1d4ed8;
}
.alert.warning { background: #b45309; }
.alert.danger { background: #b91c1c; animation: alarm 2.4s ease-in-out infinite; }
@keyframes alarm { 50% { background: #7f1d1d; } }
.alert-icon { font-size: calc(var(--u) * 16); line-height: 1; }
.alert-km { font-size: calc(var(--u) * 7); font-weight: 700; line-height: 1.3; margin-top: calc(var(--u) * 3); white-space: pre-line; }
.alert-en { font-size: calc(var(--u) * 4); opacity: .92; margin-top: calc(var(--u) * 2); white-space: pre-line; }

.setup-hint {
  position: fixed;
  left: 1vw; bottom: 1vh;
  font-size: 14px;
  color: var(--soon);
  background: var(--panel2);
  padding: 4px 10px;
  border-radius: 6px;
}

/* ---------- room door display ---------- */
.room { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-top: calc(var(--u) * 2); }
.band {
  border-radius: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 4);
  color: #fff;
  background: var(--free);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.band.busy { background: var(--busy); }
.band.soon { background: #d97706; }
.band-state .band-icon { font-size: calc(var(--u) * 7); display: inline-block; vertical-align: middle; margin-right: calc(var(--u) * 1.6); }
.band-state .km { display: inline-block; vertical-align: middle; font-size: calc(var(--u) * 9); font-weight: 700; line-height: 1.2; }
.band-state .en { color: rgba(255, 255, 255, .85); font-size: calc(var(--u) * 3.6); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.band-event { margin-top: calc(var(--u) * 2.4); }
.band-event .km { font-size: calc(var(--u) * 4.6); font-weight: 700; line-height: 1.3; }
.band-event .en { color: rgba(255, 255, 255, .85); font-size: calc(var(--u) * 2.8); }
.band-event .org { font-size: calc(var(--u) * 2.2); color: rgba(255, 255, 255, .75); margin-top: calc(var(--u) * .4); }
.band-when { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 3); font-weight: 600; }
.band-when .en { display: inline; color: rgba(255, 255, 255, .85); font-weight: 400; margin-left: calc(var(--u) * 1.2); }
.band .bar { background: rgba(255, 255, 255, .25); height: calc(var(--u) * 1); }
.band .bar i { background: #fff; }

.timeline { position: relative; margin: calc(var(--u) * 2.6) calc(var(--u) * 4) 0; height: calc(var(--u) * 9); }
.tl-track { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 4.4); border-radius: calc(var(--u) * 1); background: var(--panel2); overflow: hidden; }
.tl-block { position: absolute; top: 0; bottom: 0; background: var(--busy); opacity: .85; border-left: 2px solid var(--bg); }
.tl-block.past { opacity: .35; }
.tl-now { position: absolute; top: calc(var(--u) * -0.8); height: calc(var(--u) * 6); width: calc(var(--u) * .5); margin-left: calc(var(--u) * -.25); background: var(--gold); border-radius: 2px; }
.tl-hour { position: absolute; top: calc(var(--u) * 5.2); font-size: calc(var(--u) * 1.8); color: var(--muted); transform: translateX(-50%); font-variant-numeric: tabular-nums; }

.later { margin-top: calc(var(--u) * 1); }
.later h2 { margin: 0 0 calc(var(--u) * .8); font-size: calc(var(--u) * 2.4); }
.later h2 .km, .later h2 .en { display: inline; }
.later h2 .en { margin-left: calc(var(--u) * 1); font-size: .8em; text-transform: uppercase; letter-spacing: .1em; }
.later ol { list-style: none; margin: 0; padding: 0; }
.later li {
  display: grid;
  grid-template-columns: calc(var(--u) * 22) 1fr;
  align-items: baseline;
  padding: calc(var(--u) * 1) 0;
  border-top: 1px solid var(--line);
}
.later li b { font-size: calc(var(--u) * 2.8); font-variant-numeric: tabular-nums; }
.later li .km { font-size: calc(var(--u) * 2.8); font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.later li .en { font-size: calc(var(--u) * 2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.later li.none { display: block; }
.later .none { font-size: calc(var(--u) * 2.4); color: var(--muted); padding: calc(var(--u) * 1) 0; border-top: 1px solid var(--line); }
.later .none .en { display: inline; margin-left: calc(var(--u) * 1); }

/* ---------- portrait (9:16 screens, tablets on a door) ---------- */
@media (orientation: portrait) {
  .stage { padding: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 3); }
  .top { grid-template-columns: auto 1fr; grid-row-gap: calc(var(--u) * 2); }
  .when { grid-column: 1 / -1; text-align: left; display: grid; grid-template-columns: auto 1fr; grid-column-gap: calc(var(--u) * 3); align-items: center; }
  .clock { grid-row: 1 / span 3; font-size: calc(var(--u) * 13); }
  .date-km { margin-top: 0; font-size: calc(var(--u) * 3.2); }
  .date-lunar { font-size: calc(var(--u) * 2.6); }
  .date-en { font-size: calc(var(--u) * 2.8); }
  .logo { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
  .who-km { font-size: calc(var(--u) * 4.4); }
  .who-en { font-size: calc(var(--u) * 2.8); }
  .title-bar { grid-template-columns: 1fr; grid-row-gap: calc(var(--u) * 1.2); }
  .title-bar h1 .km { font-size: calc(var(--u) * 5.6); }
  .title-bar h1 .en { font-size: calc(var(--u) * 2.8); }
  .summary { text-align: left; }
  .chip { margin: 0 calc(var(--u) * 1.2) 0 0; font-size: calc(var(--u) * 2.6); }
  .thead { display: none; }
  .row {
    grid-template-columns: 22% 1fr;
    grid-template-areas: 'time event' 'time room' 'time status';
    grid-row-gap: calc(var(--u) * .8);
    padding: calc(var(--u) * 1.8) calc(var(--u) * 2);
  }
  .c-time { grid-area: time; align-self: start; }
  .c-event { grid-area: event; }
  .c-room { grid-area: room; }
  .c-status { grid-area: status; }
  .c-status .en { display: inline; margin-left: calc(var(--u) * 1.2); }
  .c-time b { font-size: calc(var(--u) * 4.2); }
  .c-time span { font-size: calc(var(--u) * 3); }
  .c-event .km { font-size: calc(var(--u) * 3.8); }
  .c-event .en { font-size: calc(var(--u) * 2.5); }
  .c-room .km { font-size: calc(var(--u) * 2.8); }
  .c-room .en { font-size: calc(var(--u) * 2.4); }
  .pill { font-size: calc(var(--u) * 2.8); }
  .sub { font-size: calc(var(--u) * 2.4); }
  .hero { grid-template-columns: 1fr; }
  .hero-qr { display: none; }
  .bottom { grid-template-columns: 1fr auto; grid-row-gap: calc(var(--u) * 1.5); }
  .ticker { grid-column: 1 / -1; font-size: calc(var(--u) * 2.8); }
  .qr-code .qr-svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
  .qr-label .km { font-size: calc(var(--u) * 3); }
  .qr-label .en { font-size: calc(var(--u) * 2.4); }
  .band-state .km { font-size: calc(var(--u) * 11); }
  .band-state .en { display: block; font-size: calc(var(--u) * 4.4); }
  .band-event .km { font-size: calc(var(--u) * 6); }
  .band-event .en { font-size: calc(var(--u) * 3.6); }
  .band-when { font-size: calc(var(--u) * 4); }
  .band-when .en { display: block; margin-left: 0; }
  .timeline { height: calc(var(--u) * 12); }
  .tl-hour { top: calc(var(--u) * 5.6); font-size: calc(var(--u) * 2.6); }
  .later h2 { font-size: calc(var(--u) * 3.4); }
  .later li { grid-template-columns: calc(var(--u) * 30) 1fr; }
  .later li b, .later li .km { font-size: calc(var(--u) * 3.6); }
  .later li .en { font-size: calc(var(--u) * 2.6); }
}