/* Theobald Home — full-screen player. Everything is sized in vh so it looks the same on
   a 720p stick and a 4K panel. Designed for landscape 16:9. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#f08c2e; --accent-2:#ffb36b;
  --bg:#0b0d14; --panel:rgba(18,21,32,.78); --text:#f5f6fa; --text-2:#aab1c2;
}
html,body{width:100%;height:100%;background:#000;color:var(--text);overflow:hidden;cursor:none;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.hidden{display:none !important}

/* ── Stage: two stacked layers crossfade between slides ─────────────────── */
#stage{position:fixed;inset:0;background:#000}
body.has-ticker #stage{bottom:var(--tick-h,7vh)}
.layer{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;overflow:hidden}
.layer.show{opacity:1}
body.no-fade .layer{transition:none}

.media-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:blur(40px) brightness(.45);transform:scale(1.1)}
.media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.media.cover{object-fit:cover}

/* ── Text slides ───────────────────────────────────────────────────────── */
.text-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:8vh 10vw;gap:4vh}
.text-slide .emoji{font-size:16vh;line-height:1}
.text-slide h1{font-size:9vh;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.text-slide p{font-size:4.6vh;line-height:1.35;opacity:.9;white-space:pre-line;max-width:70vw}

/* ── Live widgets ──────────────────────────────────────────────────────── */
.live{position:absolute;inset:0;padding:7vh 6vw;display:flex;flex-direction:column;gap:4vh;
  background:radial-gradient(120% 90% at 0% 0%,#1d2340 0%,#0b0d14 60%)}
.live h2{font-size:6.4vh;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:2vh}
.live h2 .count{font-size:3.2vh;font-weight:700;background:var(--accent);color:#1a1004;border-radius:99px;padding:.6vh 2vh}
.live .sub{font-size:3vh;color:var(--text-2);margin-top:-2.5vh}
.name-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(26vw,1fr));gap:2vh 2.4vw;align-content:start}
.name-grid.dense{grid-template-columns:repeat(auto-fill,minmax(19vw,1fr))}
.name-card{background:var(--panel);border:1px solid rgba(255,255,255,.07);border-radius:2vh;padding:2.2vh 2.4vh;
  display:flex;align-items:center;gap:2vh}
.name-card .av{width:6.5vh;height:6.5vh;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:800;font-size:2.8vh;color:#1a1004;background:linear-gradient(135deg,var(--accent-2),var(--accent))}
.name-card .nm{font-size:3.4vh;font-weight:700;line-height:1.1}
.name-card .meta{font-size:2.3vh;color:var(--text-2);margin-top:.4vh}
.name-grid.dense .nm{font-size:2.8vh}
.name-grid.dense .av{width:5.2vh;height:5.2vh;font-size:2.2vh}

.big-clock{margin:auto;text-align:center}
.big-clock .t{font-size:26vh;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.big-clock .d{font-size:5vh;color:var(--text-2);margin-top:2vh}

.wx-big{margin:auto;display:flex;flex-direction:column;align-items:center;gap:5vh}
.wx-now{display:flex;align-items:center;gap:4vw}
.wx-now .ic{font-size:22vh;line-height:1}
.wx-now .tp{font-size:20vh;font-weight:800;letter-spacing:-.04em;line-height:1}
.wx-now .tx{font-size:4.4vh;color:var(--text-2)}
.wx-days{display:flex;gap:2.4vw}
.wx-day{background:var(--panel);border-radius:2vh;padding:2.4vh 3vw;text-align:center;min-width:15vw}
.wx-day .dw{font-size:3vh;font-weight:700}
.wx-day .ic{font-size:7vh;margin:1vh 0}
.wx-day .hl{font-size:3vh}
.wx-day .hl span{color:var(--text-2)}
.wx-day .rn{font-size:2.2vh;color:#8ec5ff;margin-top:.6vh}

.idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;
  background:radial-gradient(100% 80% at 50% 0%,#1d2340 0%,#0b0d14 70%)}
.idle .logo{position:relative;width:36vh;height:36vh;display:flex;align-items:center;justify-content:center}
/* the logo's center is see-through in the SVG — a white disc behind it keeps the navy B readable on the dark screen */
/* (the BrightSpots logo needed a white disc behind its see-through center; the house logo doesn't) */
.idle .logo img{position:relative}
.idle .logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.5vh 4vh rgba(0,0,0,.35))}
.idle .org{font-size:7vh;font-weight:800;letter-spacing:-.02em}
.idle .t{font-size:5vh;color:var(--text-2);font-variant-numeric:tabular-nums}

/* ── Corner clock + weather ────────────────────────────────────────────── */
#corner{position:fixed;top:2.6vh;right:2.2vw;display:flex;gap:1.2vh;z-index:5}
#corner > div:empty{display:none}
#corner > div{background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:99px;padding:1vh 2.2vh;font-size:2.7vh;font-weight:650;
  font-variant-numeric:tabular-nums;white-space:nowrap}
body.slide-fullbleed #corner{opacity:.85}

/* ── Ticker ────────────────────────────────────────────────────────────── */
#ticker{position:fixed;left:0;right:0;bottom:0;height:var(--tick-h,7vh);background:var(--tick-bg,#12151f);
  border-top:.4vh solid var(--tick-accent,var(--accent));overflow:hidden;display:flex;align-items:center;z-index:6;color:var(--tick-fg,#fff)}
#tickerTrack{display:inline-flex;white-space:nowrap;font-size:var(--tick-text,3.3vh);font-weight:600;will-change:transform}
.tk-cycle{display:inline-flex;align-items:center;flex:none}
.tk-pad{display:inline-block;flex:none}
#tickerTrack span{padding:0 3vw}
#tickerTrack span::before{content:'●';color:var(--tick-accent,var(--accent));margin-right:3vw;font-size:.6em;vertical-align:middle}

/* ── Identify (from the Screens tab) ───────────────────────────────────── */
#identify{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(5,7,12,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#identify div{text-align:center;border:.6vh solid var(--accent);border-radius:4vh;padding:6vh 8vw;background:#11141f;
  box-shadow:0 0 12vh rgba(240,140,46,.45);animation:idpulse 1.2s ease-in-out infinite alternate}
#identify span{display:block;font-size:4vh;color:var(--text-2);margin-bottom:2vh}
#identify b{font-size:14vh;font-weight:800;letter-spacing:-.02em}
@keyframes idpulse{from{transform:scale(1)}to{transform:scale(1.03)}}

/* ── Pairing ───────────────────────────────────────────────────────────── */
#pair{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:radial-gradient(100% 80% at 50% 0%,#232a4d 0%,#0b0d14 70%)}
.pair-card{text-align:center;max-width:80vw}
.pair-logo{font-size:12vh}
.pair-card h1{font-size:7vh;font-weight:800;margin:2vh 0}
.pair-card p{font-size:3.4vh;color:var(--text-2)}
.pair-card b{color:var(--text)}
#pairCode{font-size:17vh;font-weight:800;letter-spacing:.18em;margin:5vh 0;color:var(--accent-2);
  font-variant-numeric:tabular-nums;padding-left:.18em}
.muted{opacity:.7}

#offline{position:fixed;left:2.2vw;top:2.6vh;z-index:7;background:#7a1f1f;color:#fff;border-radius:99px;
  padding:.8vh 2vh;font-size:2.2vh;font-weight:600;opacity:.9}

/* ── Countdown slide ───────────────────────────────────────────────────── */
.countdown-slide{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,#1d2340 0%,#0b0d14 65%)}
body.has-ticker.ticker-overlay #stage{bottom:0}

/* Night mode: sunset → dim drifting clock + message → sunrise (player.js "Night mode") */
#night{position:fixed;inset:0;z-index:90;opacity:0;pointer-events:none;background:#000;display:none;overflow:hidden}
#night.on{display:block}
#night .sky{position:absolute;inset:0;opacity:0}
#night .sky.warm{background:linear-gradient(180deg,#5b2a86 0%,#c2456e 45%,#f2804a 75%,#ffc46b 100%)}
#night .sky.dusk{background:linear-gradient(180deg,#0b0a24 0%,#2a1650 55%,#5a2a5e 100%)}
#night .sky.dark{background:#020206}
#night .sky.dawn{background:linear-gradient(180deg,#0d1b3d 0%,#28407a 50%,#c9799a 100%)}
#night .sky.gold{background:linear-gradient(180deg,#7fb4e6 0%,#ffd38a 55%,#ff9f5a 100%)}
#night .nwrap{position:absolute;left:30%;top:35%;opacity:0;text-align:center;transform:translate(-10%,-10%);
  transition:left 50s ease-in-out,top 50s ease-in-out;will-change:opacity}
#night .sky,#night .nhello{will-change:opacity}
#night .nclock{font-family:'Inter',system-ui,sans-serif;font-weight:300;font-size:8vw;letter-spacing:-.02em;color:rgba(255,255,255,.16);font-variant-numeric:tabular-nums}
#night .nmsg{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:2.2vw;color:rgba(255,255,255,.13);margin-top:.6vw;max-width:46vw}
#night .nhello{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;
  font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:6vw;color:#fff;text-shadow:0 4px 30px rgba(120,60,0,.35)}