:root {
  --hg-blue: #0a3b91;
  --hg-blue-deep: #062a6a;
  --hg-lime: #d5ff3f;
  --hg-grey-soft: #f4f4ef;
  --hg-ink: #092a63;
  --hg-white: #ffffff;
  --hg-muted: #667087;
  --hg-line: rgba(9,42,99,.14);
  --hg-blue-line: rgba(255,255,255,.18);
}
* { box-sizing: border-box; }
html, body { margin:0; width:100%; height:100%; overflow:hidden; }
body {
  background: var(--hg-grey-soft);
  color: var(--hg-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.board {
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-rows: 54px minmax(0,1fr) 24px;
  background:var(--hg-grey-soft);
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  padding:0 34px;
  color:var(--hg-white);
  background:var(--hg-blue);
  border-bottom:1px solid rgba(255,255,255,.18);
  overflow:visible;
}
.brandblock,.statusblock {
  display:flex;
  align-items:center;
  min-width:0;
  overflow:visible;
}
.title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:25px;
  line-height:1.22;
  font-weight:520;
  color:rgba(255,255,255,.78);
}
.title span#stopName { color:var(--hg-white); font-weight:800; }
.title-dot { color:var(--hg-lime); padding:0 .12em; }
.clock {
  min-width:155px;
  text-align:right;
  font-size:31px;
  line-height:1;
  font-weight:850;
}
.columns {
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:6px 12px;
}
.column {
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:repeat(5,minmax(0,1fr));
  gap:5px;
}
.departure {
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:88px minmax(0,1fr) auto;
  align-items:center;
  column-gap:18px;
  padding:10px 14px 10px 18px;
  overflow:hidden;
  background:rgba(255,255,255,.97);
  border:1px solid var(--hg-line);
}
.departure::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:var(--hg-blue);
}
.departure.is-delayed::before { background:var(--hg-lime); }
.identity {
  min-width:0;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:4px;
}
.mode {
  color:var(--hg-muted);
  font-size:9px;
  font-weight:820;
  letter-spacing:.11em;
  line-height:1;
}
.line {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:52px;
  max-width:84px;
  height:42px;
  padding:0 8px 2px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--hg-white);
  background:var(--hg-blue);
  font-size:32px;
  font-weight:920;
  line-height:1;
}
.route-line {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:hidden;
  overflow-y:visible;
  white-space:nowrap;
  padding:4px 0 5px;
}
.direction {
  flex:0 1 auto;
  min-width:120px;
  max-width:58%;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--hg-ink);
  font-size:30px;
  font-weight:860;
  line-height:1.15;
  padding-bottom:2px;
}
.footnote {
  flex:0 0 auto;
  color:var(--hg-muted);
  font-size:9px;
}
.meta-inline {
  min-width:0;
  display:flex;
  align-items:center;
  gap:0;
  overflow-x:hidden;
  overflow-y:visible;
  color:var(--hg-muted);
  font-size:16px;
  line-height:1.22;
  padding:2px 0 3px;
}
.meta-inline .stop,
.meta-inline .platform,
.meta-inline .message {
  overflow-x:hidden;
  overflow-y:visible;
  text-overflow:ellipsis;
  line-height:1.22;
}
.meta-inline .stop { color:#4b5870; }
.separator { padding:0 6px; color:#9aa2b1; }
.platform { color:var(--hg-blue); font-weight:760; }
.message-wrap {
  min-width:0;
  display:inline-flex;
  overflow:hidden;
}
.message {
  min-width:0;
  color:var(--hg-blue);
  font-size:14px;
  font-weight:760;
}
.timing {
  min-width:0;
  justify-self:end;
  text-align:right;
}
.time-row {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}
.scheduled {
  color:var(--hg-ink);
  font-size:28px;
  font-weight:860;
  line-height:1;
}
.realtime-wrap {
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--hg-blue);
  font-size:24px;
  font-weight:860;
  line-height:1;
}
.realtime-wrap.same-time { display:none; }
.arrow { color:#8f98aa; }
.countdown-inline {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:4px;
}
.countdown-label {
  color:var(--hg-muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.countdown {
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
  min-width:70px;
  padding:4px 8px 5px;
  color:var(--hg-blue-deep);
  background:var(--hg-lime);
  line-height:1;
}
.minutes {
  font-size:29px;
  font-weight:950;
  letter-spacing:-.02em;
}
.minutes-label {
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
}
.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:0 34px;
  overflow:hidden;
  color:rgba(255,255,255,.78);
  background:var(--hg-blue-deep);
  border-top:1px solid var(--hg-blue-line);
  font-size:9px;
  white-space:nowrap;
}
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--hg-lime); }
.update-state { display:flex; align-items:center; gap:6px; }
.update-state.error { color:var(--hg-white); }
.notice { overflow:hidden; text-overflow:ellipsis; text-align:right; }
.empty-state {
  grid-column:1/-1;
  display:grid;
  place-content:center;
  text-align:center;
  color:var(--hg-muted);
  font-size:22px;
}
.empty-state strong { display:block; color:var(--hg-blue); margin-bottom:4px; }

@media (max-width:2999px), (min-height:751px) {
  .board { grid-template-rows:70px minmax(0,1fr) 34px; }
  .topbar { padding:0 24px; }
  .title { font-size:clamp(18px,1.4vw,28px); }
  .clock { font-size:clamp(25px,2vw,38px); }
  .columns { padding:7px; gap:7px; }
  .departure { padding-left:16px; column-gap:12px; }
  .direction { font-size:18px; max-width:48%; }
  .meta-inline { font-size:10px; }
}