/* Celestial Worldwide Livestream for Samsung (Tizen) and LG (webOS). Same layout as the Roku channel, 1920x1080. */
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #07101d; }
body { font-family: "Samsung One", "LG Smart UI", "Roboto", "Helvetica Neue", Arial, sans-serif; color: #fff; }
/* Laid out at 1920x1080 and scaled to the TV's app resolution (1280x720 on many Full HD TVs). */
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; -webkit-transform-origin: 0 0; background: #000; }
#video { position: absolute; inset: 0; width: 1920px; height: 1080px; background: #000; display: none; }
#video.on { display: block; }

#offAir { position: absolute; inset: 0; text-align: center; }
#offAir.hidden { display: none; }
#offAir .brand { position: absolute; left: 660px; top: 170px; width: 600px; height: 400px; background: #fff; display: flex; align-items: center; justify-content: center; }
#offAir .brand img { max-width: 560px; max-height: 360px; }
#offTitle { position: absolute; top: 620px; width: 100%; font-size: 64px; font-weight: 700; }
#offWhen { position: absolute; top: 720px; width: 100%; font-size: 44px; font-weight: 700; color: #e7b84a; white-space: pre-line; line-height: 1.25; }
#offNote { position: absolute; top: 860px; width: 100%; font-size: 34px; color: #9aa8bc; }

#topBar { position: absolute; left: 0; top: 0; width: 1920px; height: 130px; text-align: center; transition: opacity .3s; }
#topBar.hide { opacity: 0; pointer-events: none; }
#links { position: absolute; right: 60px; top: 800px; text-align: right; }
#links a { display: inline-block; margin-left: 24px; padding: 18px 34px; font-size: 32px; font-weight: 700; color: #fff; text-decoration: none; background: rgba(0,0,0,.63); border: 3px solid rgba(255,255,255,.8); border-radius: 14px; }
#links a:hover { background: #fff; color: #07101d; }
#title { position: relative; display: inline-block; margin-top: 30px; max-width: 1400px; vertical-align: top; box-sizing: border-box; padding: 8px 26px; background: rgba(0,0,0,.63); border-radius: 10px; font-size: 44px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#liveBadge { position: absolute; left: 1720px; top: 42px; width: 140px; height: 50px; line-height: 50px; text-align: center; background: #d63638; font-size: 30px; font-weight: 700; }

#notice { position: absolute; left: 60px; top: 130px; max-width: 1800px; box-sizing: border-box; height: 80px; line-height: 80px; padding: 0 30px; border-radius: 10px; background: #e7b84a; color: #000; font-size: 32px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#notice.emergency { background: #d63638; color: #fff; }

#chips { position: absolute; left: 0; top: 900px; width: 1920px; height: 180px; box-sizing: border-box; padding-right: 60px; text-align: right; }
#chips button { margin: 35px 0 0 30px; height: 100px; padding: 0 40px; font: inherit; font-size: 36px; font-weight: 700; color: #fff; background: rgba(30,40,60,.8); border: 3px solid rgba(255,255,255,.8); border-radius: 14px; }
#chips button.focus { background: #fff; color: #07101d; border-color: #fff; }
#chips button.action { border-color: #e7b84a; }
#panel { position: absolute; left: 360px; top: 150px; width: 1200px; box-sizing: border-box; padding: 50px 70px; background: rgba(7,16,29,.95); border: 3px solid #e7b84a; border-radius: 22px; text-align: center; }
#panelTitle { font-size: 52px; font-weight: 700; margin-bottom: 30px; }
#panelBody { font-size: 36px; text-align: left; }
#panelBody .row { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
#panelBody .when { display: inline-block; width: 420px; color: #e7b84a; font-weight: 700; }
#panelBody .qr { text-align: center; }
#panelBody .qr img { width: 420px; height: 420px; background: #fff; padding: 18px; border-radius: 14px; }
#panelBody .qr p { font-size: 32px; color: #c9d6e8; margin: 24px 0 0; }
#panelHint { margin-top: 34px; font-size: 28px; color: #9aa8bc; }
[hidden] { display: none !important; }

/* Muted autoplay: "Tap for sound" (2026-10-26) */
#tapForSound{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:50;padding:14px 26px;border:0;border-radius:999px;background:#e7b84a;color:#07101d;font:700 22px/1 system-ui,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.45);cursor:pointer}
#tapForSound:focus{outline:4px solid #fff;outline-offset:3px}
#tapForSound[hidden]{display:none}