:root {
  --bg: #C8102E;
  --fg: #FFFFFF;
  --box-bg: #FFFFFF;
  --box-fg: #C8102E;
  --font: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); cursor: none; }
body.preview { cursor: default; }

#stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  padding: 44px 70px 40px;
  background: var(--bg); color: var(--fg); font-family: var(--font);
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr) 420px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "logo head  icons"
    "logo instr hours"
    "cols cols  cols"
    "foot foot  foot";
  column-gap: 40px;
}

/* subtle depth so the flat red reads like a lit panel on a TV */
#stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.10), transparent 60%),
              linear-gradient(to bottom, transparent 70%, rgba(0,0,0,.12));
}
#stage::after {
  content: ""; position: absolute; inset: 18px; pointer-events: none;
  border: 3px solid color-mix(in srgb, var(--fg) 55%, transparent); border-radius: 18px;
}

#logo { grid-area: logo; width: 410px; align-self: center; justify-self: start; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
#logo[hidden] { display: block; visibility: hidden; }

#head { grid-area: head; text-align: center; align-self: start; min-width: 0; }
#title {
  margin: 0; font-size: 112px; font-weight: 700; line-height: 1.05; letter-spacing: -1px; white-space: nowrap;
  text-shadow: 0 4px 10px rgba(0,0,0,.25);
}
#subtitle {
  display: inline-block; margin-top: 16px; padding: 6px 44px 10px;
  font-size: 62px; font-weight: 700; line-height: 1.1;
  border: 5px solid var(--fg); border-radius: 999px;
}
#subtitle:empty { display: none; }

#icons { grid-area: icons; display: flex; gap: 22px; justify-content: flex-end; align-items: flex-start; }
.icon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 150px; }
.icon svg, .icon img { width: 150px; height: 150px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.icon img { border-radius: 50%; object-fit: cover; background: #fff; }
.icon span { font-size: 26px; font-weight: 600; text-align: center; line-height: 1.1; }
.icon span:empty { display: none; }

#instructions {
  grid-area: instr; list-style: none; margin: 18px 0 0; padding: 0;
  text-align: center; font-size: 40px; font-weight: 600; line-height: 1.3;
}
#hours { grid-area: hours; text-align: center; align-self: center; margin-top: 12px; }
#hours-label { font-size: 64px; font-weight: 700; }
#hours-value { font-size: 58px; font-weight: 700; white-space: nowrap; }

#columns {
  grid-area: cols; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 50px; margin-top: 34px; min-height: 0;
}
.col { display: flex; gap: 14px; min-height: 0; }
.side {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 50px; font-weight: 700; white-space: nowrap; text-align: center;
  opacity: .95; align-self: center;
}
.side:empty { display: none; }
.col-body { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; overflow: hidden; }
.col-head {
  background: var(--box-bg); color: var(--box-fg);
  font-size: 92px; font-weight: 700; line-height: 1.1;
  padding: 4px 56px 10px; border-radius: 14px; margin-bottom: 18px;
  box-shadow: 0 6px 14px rgba(0,0,0,.28); white-space: nowrap; max-width: 100%;
}
.col-items { list-style: none; margin: 0; padding: 0; text-align: center; font-size: 60px; font-weight: 700; line-height: 1.28; }

#footer { grid-area: foot; text-align: center; font-size: 36px; font-weight: 600; margin-top: 10px; }
#footer:empty { display: none; }

#offline {
  position: fixed; right: 12px; bottom: 10px; font: 600 14px var(--font);
  color: var(--fg); opacity: .6; background: rgba(0,0,0,.35); padding: 3px 10px; border-radius: 999px;
}
#offline[hidden] { display: none; }