/* Screenify player — built for 1080p TVs viewed from 3–5 metres.
   Everything is sized in vw/vh so one stylesheet covers 720p to 4K. */

:root{
  --blue:#0B5FFF; --blue-deep:#062B7A; --ink:#061733; --white:#fff;
  --tint:#E9F1FF; --line:#1B3E86; --ok:#16A34A; --warn:#F59E0B; --bad:#EF4444;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;color:#fff;overflow:hidden;
  font-family:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
body{cursor:none}
body.showcursor{cursor:default}

/* ---------- pairing ---------- */
.pair{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 20% 0%,#0B5FFF 0%,#062B7A 55%,#04173F 100%)}
.pair-card{width:min(560px,86vw);background:#fff;color:var(--ink);border-radius:22px;padding:40px;text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.45)}
.pair-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;letter-spacing:.4px;color:var(--blue);margin-bottom:22px}
.pair-brand .dot{width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(11,95,255,.18)}
.pair h1{font-size:30px;margin-bottom:10px}
.pair p{color:#54637F;font-size:15px;line-height:1.5}
.pair-input{width:100%;margin:26px 0 14px;padding:18px;font-size:44px;letter-spacing:14px;text-align:center;
  font-family:"JetBrains Mono",ui-monospace,Menlo,monospace;border:2px solid #CFDDF7;border-radius:14px;color:var(--ink)}
.pair-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(11,95,255,.16)}
.pair-btn{width:100%;padding:16px;font-size:18px;font-weight:700;color:#fff;background:var(--blue);border:0;border-radius:14px;cursor:pointer}
.pair-btn:hover{background:#0A4FD6}
.pair-msg{margin-top:14px;font-size:15px;min-height:22px;color:var(--bad)}
.pair-msg.ok{color:var(--ok)}
.pair-foot{margin-top:20px;font-size:12px;color:#8494AE}

/* ---------- stage ---------- */
.stage{position:fixed;inset:0;display:grid;background:#000;
  grid-template-columns:1fr 0;grid-template-rows:1fr 0;
  grid-template-areas:"content token" "ticker ticker"}
.stage.layout-token_split{grid-template-columns:1fr 30vw}
.stage.layout-token_ticker{grid-template-rows:1fr 9vh}
.stage.layout-token_split.with-ticker{grid-template-rows:1fr 8vh}

.zone-content{grid-area:content;position:relative;overflow:hidden;background:#000}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;display:grid;place-items:center;background:#000}
.slide.on{opacity:1}
.slide img,.slide video{width:100%;height:100%;object-fit:contain;background:#000}
.slide iframe{width:100%;height:100%;border:0;background:#fff}
.slide .html-card{width:100%;height:100%;padding:6vh 6vw;background:#fff;color:var(--ink);display:grid;align-content:center;gap:2vh}
.slide .html-card h1{font-size:5vw;line-height:1.05;color:var(--blue-deep)}
.slide .html-card p{font-size:2.2vw;line-height:1.4;color:#33436A}

/* clock / notice cards */
.card-notice{width:100%;height:100%;background:linear-gradient(140deg,#0B5FFF,#062B7A);display:grid;place-items:center;text-align:center;padding:6vh}
.card-notice h1{font-size:6vw;font-weight:800;letter-spacing:-.02em}
.card-notice p{font-size:2.4vw;opacity:.9;margin-top:2vh}

/* ---------- token zone ---------- */
.zone-token{grid-area:token;background:linear-gradient(180deg,#0B5FFF 0%,#062B7A 100%);
  display:flex;flex-direction:column;padding:2.2vh 1.4vw;gap:1.4vh;border-left:4px solid rgba(255,255,255,.14)}
.tz-head{display:flex;justify-content:space-between;align-items:baseline}
.tz-title{font-size:1.5vw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.tz-time{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.5vw;opacity:.85}
.tz-now{display:flex;flex-direction:column;gap:1vh}
.tz-now .card{background:#fff;color:var(--ink);border-radius:14px;padding:1.6vh 1.2vw;display:flex;align-items:center;gap:1vw;
  box-shadow:0 10px 30px rgba(0,0,0,.25);animation:pop .45s ease}
.tz-now .num{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:3.6vw;font-weight:700;color:var(--blue);line-height:1;font-variant-numeric:tabular-nums}
.tz-now .meta{display:flex;flex-direction:column;gap:.4vh;min-width:0}
.tz-now .who{font-size:1.35vw;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-now .where{font-size:1.1vw;color:#5B6B87}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

.tz-next-label{font-size:1.05vw;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:.6vh}
.tz-queue{list-style:none;display:flex;flex-direction:column;gap:.8vh;overflow:hidden;flex:1}
.tz-queue li{display:flex;align-items:center;gap:.8vw;background:rgba(255,255,255,.1);border-radius:10px;padding:1vh 1vw}
.tz-queue .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:1.9vw;font-weight:700;font-variant-numeric:tabular-nums}
.tz-queue .w{font-size:1.15vw;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-foot{display:flex;justify-content:space-between;font-size:.95vw;opacity:.65}
.tz-empty{background:rgba(255,255,255,.08);border-radius:12px;padding:2vh;text-align:center;font-size:1.2vw;opacity:.8}

/* ---------- doctor roster slide ---------- */
.roster{width:100%;height:100%;background:#fff;color:var(--ink);padding:5vh 5vw;display:flex;flex-direction:column;gap:2vh}
.roster h2{font-size:3.2vw;color:var(--blue-deep)}
.roster table{width:100%;border-collapse:collapse;font-size:1.7vw}
.roster th{text-align:left;color:#6A7A96;font-size:1.2vw;text-transform:uppercase;letter-spacing:.08em;padding-bottom:1vh}
.roster td{padding:1.2vh 0;border-top:1px solid #E4ECFB}
.roster .st{font-size:1.2vw;font-weight:700;padding:.4vh 1vw;border-radius:999px;display:inline-block}
.st.available{background:#E6F6EC;color:#137A3F}
.st.arriving{background:#FFF4E0;color:#9A6200}
.st.busy{background:#FFEBEB;color:#B32020}
.st.on_leave{background:#EEF1F6;color:#63718A}

/* ---------- ticker ---------- */
.ticker{grid-area:ticker;background:#061733;display:flex;align-items:center;overflow:hidden;border-top:3px solid var(--blue)}
.ticker-text{white-space:nowrap;font-size:2.4vh;padding-left:100%;animation:scroll 32s linear infinite;letter-spacing:.02em}
@keyframes scroll{to{transform:translateX(-100%)}}

/* ---------- bugs ---------- */
.brand-bug{position:fixed;left:1.4vw;top:1.6vh;height:5vh;opacity:.9;pointer-events:none;z-index:5}
.brand-bug img{height:100%}
.status-bug{position:fixed;right:.7vw;bottom:.7vh;width:10px;height:10px;border-radius:50%;background:var(--ok);opacity:.55;z-index:6}
.status-bug.off{background:var(--bad);opacity:.9}

/* ---------- standby ---------- */
.standby{position:fixed;inset:0;display:grid;place-items:center;background:linear-gradient(160deg,#04173F,#000)}
.sb-inner{text-align:center}
.sb-clock{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12vw;font-weight:700;letter-spacing:-.03em}
.sb-name{font-size:2vw;opacity:.8;margin-top:1vh}
.sb-reason{font-size:1.3vw;opacity:.45;margin-top:2vh}

/* ---------- fullscreen button (hides once fullscreen) ---------- */
.fs-btn{position:fixed;right:16px;top:16px;z-index:20;background:rgba(255,255,255,.92);color:#061733;border:0;
  border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;cursor:pointer;opacity:.25;transition:opacity .2s}
.fs-btn:hover{opacity:1}
:fullscreen .fs-btn{display:none}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}.ticker-text{animation:none;padding-left:2vw}.tz-now .card{animation:none}
}

/* ============================================================
   ZONES — the screen as a grid: main + optional side rail + optional footer band.
   Geometry comes from CSS custom properties the player sets from the payload,
   so one stylesheet covers 720p through 4K without a media query per size.
   ============================================================ */
.stage{
  --side-w: 26%;
  --foot-h: 16%;
  display:grid;
  width:100vw; height:100vh;
  gap:0;
}
.stage[data-side="none"][data-footer="0"]{ grid-template-areas:"main"; grid-template-columns:1fr; grid-template-rows:1fr }
.stage[data-side="right"][data-footer="0"]{ grid-template-areas:"main side"; grid-template-columns:1fr var(--side-w); grid-template-rows:1fr }
.stage[data-side="left"][data-footer="0"]{ grid-template-areas:"side main"; grid-template-columns:var(--side-w) 1fr; grid-template-rows:1fr }
.stage[data-side="none"][data-footer="1"]{ grid-template-areas:"main" "foot"; grid-template-columns:1fr; grid-template-rows:1fr var(--foot-h) }
.stage[data-side="right"][data-footer="1"]{ grid-template-areas:"main side" "foot foot"; grid-template-columns:1fr var(--side-w); grid-template-rows:1fr var(--foot-h) }
.stage[data-side="left"][data-footer="1"]{ grid-template-areas:"side main" "foot foot"; grid-template-columns:var(--side-w) 1fr; grid-template-rows:1fr var(--foot-h) }

.zone-content{ grid-area:main; position:relative; overflow:hidden; background:#04173F }
.zone-side{ grid-area:side; position:relative; overflow:hidden; background:#062B7A;
  border-left:2px solid rgba(255,255,255,.10); border-right:2px solid rgba(255,255,255,.10) }
.stage[data-side="right"] .zone-side{ border-right:0 }
.stage[data-side="left"]  .zone-side{ border-left:0 }
.zone-footer{ grid-area:foot; position:relative; overflow:hidden; background:#04173F;
  border-top:2px solid rgba(255,255,255,.12) }
.hidden{ display:none !important }

/* a zone running its own playlist — double-buffered like the main stage */
.zone-loop{ position:absolute; inset:0; overflow:hidden; background:#04173F }
.zone-loop .slide{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
  display:flex; align-items:center; justify-content:center; overflow:hidden }
.zone-loop .slide.on{ opacity:1 }
.zone-loop .slide img, .zone-loop .slide video{ width:100%; height:100%; object-fit:cover }

/* "Sponsored" marker — an ad on a hospital wall should be labelled as one */
.zone-tag{ position:absolute; right:.6vw; top:.6vw; z-index:4;
  background:rgba(4,23,63,.68); color:#CFE0FF; font-size:.72vw; letter-spacing:.10em;
  text-transform:uppercase; padding:.25vw .6vw; border-radius:.3vw; font-family:"JetBrains Mono",monospace }
.zone-footer .zone-tag{ font-size:.62vw; top:auto; bottom:.4vh }

/* the token board is now simply one possible occupant of the side rail */
.tz{ position:absolute; inset:0; display:flex; flex-direction:column }

/* footer strip: compact token / roster line, news-ribbon style */
.foot-strip{ position:absolute; inset:0; display:flex; align-items:center; gap:2vw; padding:0 2vw; overflow:hidden }
.foot-strip .fs-item{ display:flex; align-items:baseline; gap:.7vw; flex:none;
  padding-right:2vw; border-right:1px solid rgba(255,255,255,.16) }
.foot-strip .fs-item:last-child{ border-right:0 }
.foot-strip .fs-tok{ font-family:"JetBrains Mono",monospace; font-size:3.4vh; font-weight:700; color:#fff; line-height:1 }
.foot-strip .fs-meta{ font-size:1.7vh; color:#9FC0F5; line-height:1.2 }
.foot-strip .fs-lbl{ font-size:1.3vh; letter-spacing:.14em; text-transform:uppercase; color:#6E93D6 }

/* when the footer holds a ticker it fills the band rather than floating over content */
.zone-footer .ticker{ position:absolute; inset:0; display:flex; align-items:center }

/* portrait screens: a side rail is usually wrong, so a footer band is the default there */
.stage[data-orientation="portrait"][data-side="right"],
.stage[data-orientation="portrait"][data-side="left"]{ --side-w:32% }

@media (prefers-reduced-motion:reduce){ .zone-loop .slide{ transition:none } }

/* a paid slot playing on the main stage carries the same marker as the rails */
.stage.is-sponsored .zone-content::after{
  content:"Sponsored"; position:absolute; right:1vw; top:1vw; z-index:5;
  background:rgba(4,23,63,.68); color:#CFE0FF; font-size:.8vw; letter-spacing:.10em;
  text-transform:uppercase; padding:.3vw .7vw; border-radius:.3vw;
  font-family:"JetBrains Mono",monospace;
}