/* GLCH MV public page. Every element that has a `hidden` attribute AND its own
   display rule carries an explicit [hidden] override (Chauvet's recurring bug:
   equal specificity, later rule silently wins). */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif; color: #fff; }
#stage { position: fixed; inset: 0; background: #000; }
#player, #player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#cover { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity .4s; pointer-events: none; }
#cover.off { opacity: 0; }
#shield { position: absolute; inset: 0; z-index: 5; cursor: default; }

#lt { position: absolute; left: 5%; bottom: 9%; z-index: 6; pointer-events: none;
      font-weight: 700; font-size: clamp(18px, 2.7vw, 42px); line-height: 1.12;
      text-shadow: 0 0 3px #000, 0 2px 5px #000, 2px 2px 0 rgba(0,0,0,.7);
      opacity: 0; transform: translateY(8px); transition: opacity .7s, transform .7s; max-width: 70%; }
#lt.show { opacity: 1; transform: none; }
#lt .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lt .s-quote::before { content: "\201C"; } #lt .s-quote::after { content: "\201D"; }
#lt .s-italic { font-style: italic; font-weight: 600; }
#lt .s-plain { font-weight: 600; }

#bug { position: absolute; right: 2.2%; bottom: 4%; z-index: 6; pointer-events: none; opacity: .55;
       font-weight: 700; letter-spacing: .12em; font-size: clamp(12px, 1.3vw, 20px); text-shadow: 0 1px 3px #000; }
#unmute { position: absolute; right: 2.2%; top: 4%; z-index: 8; font: 600 15px "Barlow Semi Condensed", Arial, sans-serif;
          color: #fff; background: rgba(0,0,0,.65); border: 1px solid rgba(255,255,255,.5); border-radius: 4px;
          padding: 8px 14px; cursor: pointer; }
#unmute[hidden] { display: none !important; }
#unmute:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#status { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center;
          font-size: clamp(18px, 2.4vw, 32px); letter-spacing: .08em; text-transform: uppercase; color: #ddd;
          pointer-events: none; text-align: center; padding: 0 16px; }
#status[hidden] { display: none !important; }
#status.gone { display: none; }

#panel { position: absolute; z-index: 9; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); box-sizing: border-box;
         background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.82) 18%); padding: 28px 18px 28px 48px;
         overflow-y: auto; font-size: 16px; line-height: 1.3; }
#panel[hidden] { display: none !important; }
@media (max-width: 760px) { body.panel-open #lt { opacity: 0; } }
.p-sec { margin-bottom: 22px; }
.p-h { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #aaa; margin-bottom: 6px; }
#p-now { font-size: 20px; font-weight: 700; }
#p-meta { color: #ccc; font-size: 14px; margin-top: 2px; }
#panel ol, #panel ul { margin: 0; padding: 0; list-style: none; }
#panel li { padding: 3px 0; }
#panel li .sub { color: #aaa; font-size: 13px; }
#p-sched li { display: flex; gap: 10px; }
#p-sched li .t { color: #aaa; min-width: 5.2em; font-variant-numeric: tabular-nums; }
#p-sched li.now { color: #fff; font-weight: 700; }
#p-sched li.now .t { color: #fff; }
#p-channels a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.4); }
#p-channels-sec[hidden] { display: none !important; }
#vol-row { display: flex; align-items: center; gap: 10px; }
#vol-mute { font: 600 14px "Barlow Semi Condensed", Arial, sans-serif; color: #fff; background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.45); border-radius: 4px; padding: 4px 10px; cursor: pointer; min-width: 64px; }
#vol-mute:focus-visible, #vol:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#vol { flex: 1; min-width: 0; accent-color: #fff; cursor: pointer; }
#vol-val { width: 2.4em; text-align: right; font-variant-numeric: tabular-nums; color: #ccc; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { #lt, #cover { transition: none; } }

#p-channels li.now a { font-weight: 700; border-bottom-color: #fff; }
#p-channels .ch-site { color: #aaa; font-size: 13px; margin-left: 8px; }

#sound-help { position: absolute; right: 2.2%; top: calc(4% + 46px); z-index: 8; max-width: 300px; font: 600 13px/1.35 "Barlow Semi Condensed", Arial, sans-serif;
              color: #ddd; background: rgba(0,0,0,.65); border-radius: 4px; padding: 8px 12px; pointer-events: none; }
#sound-help[hidden] { display: none !important; }

/* remote-control feedback */
#osd { position: absolute; left: 5%; top: 7%; z-index: 10; pointer-events: none; color: #fff; font-weight: 700; letter-spacing: .04em;
       font-size: clamp(22px, 3.4vw, 54px); text-shadow: 0 0 4px #000, 0 2px 6px #000; }
#osd[hidden] { display: none !important; }
#osd-bar { margin-top: 8px; width: clamp(160px, 22vw, 340px); height: 10px; background: rgba(255,255,255,.28); border-radius: 5px; box-shadow: 0 0 4px #000; }
#osd-bar[hidden] { display: none !important; }
#osd-fill { height: 100%; width: 0; background: #fff; border-radius: 5px; }
#keys-help { position: absolute; z-index: 11; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.88); border: 1px solid rgba(255,255,255,.35);
             border-radius: 8px; padding: 18px 26px; font: 600 17px/1.5 "Barlow Semi Condensed", Arial, sans-serif; color: #fff; max-width: min(520px, 92vw); }
#keys-help[hidden] { display: none !important; }
.kh-h { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #aaa; margin-bottom: 8px; }
#keys-help table { border-collapse: collapse; } #keys-help td { padding: 2px 18px 2px 0; } #keys-help td:first-child { color: #fff; font-variant-numeric: tabular-nums; min-width: 4.5em; }
.kh-f { margin-top: 10px; font-size: 14px; font-weight: 400; color: #bbb; }
.p-keys { color: #aaa; font-size: 13px; margin-bottom: 14px; } .p-keys b { color: #fff; }

.p-keys a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.4); text-decoration: none; }

/* ---- live channel (TV only): /tv/?c=live ---- */
#live { position: absolute; inset: 0; z-index: 4; display: flex; background: #000; }
#live[hidden] { display: none !important; }
#live-main { position: relative; flex: 1 1 auto; min-width: 0; }
#live-frame, #live-chat { border: 0; background: #000; }
#live-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
#live-chat { flex: 0 0 340px; width: 340px; height: 100%; }
#live-chat[hidden] { display: none !important; }
#live-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff;
  font: 600 clamp(20px, 3vw, 34px) "Barlow Semi Condensed", Arial, sans-serif; letter-spacing: .02em; text-align: center; padding: 20px; }
#live-none[hidden] { display: none !important; }
#live-ctl { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; gap: 6px; opacity: .45; transition: opacity .2s; }
#live-ctl:hover, #live-ctl:focus-within { opacity: 1; }
#live-ctl button { background: rgba(0,0,0,.7); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 7px 10px; cursor: pointer;
  font: 600 13px "Barlow Semi Condensed", Arial, sans-serif; letter-spacing: .03em; }
#live-ctl button[aria-pressed="true"] { background: #c0392b; border-color: #c0392b; }
#live-who { position: absolute; left: 64px; top: 50%; transform: translateY(-50%); z-index: 7; width: min(340px, 80vw); max-height: 80vh; overflow-y: auto;
  background: rgba(10,10,12,.94); border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 10px; color: #fff; font: 600 14px "Barlow Semi Condensed", Arial, sans-serif; }
#live-who[hidden] { display: none !important; }
#live-who .lw-h { color: #aaa; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 4px 2px 6px; }
#live-who button, #live-who a { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: left; background: rgba(255,255,255,.07); color: #fff; border: 0;
  border-radius: 6px; padding: 7px 8px; margin-bottom: 4px; cursor: pointer; font: inherit; text-decoration: none; }
#live-who button:hover, #live-who a:hover { background: rgba(255,255,255,.16); }
#live-who button.on { outline: 2px solid #c0392b; }
#live-who img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; background: #222; flex: 0 0 auto; }
#live-who .lw-t { flex: 1; min-width: 0; } #live-who .lw-s { color: #aaa; font-weight: 400; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.live-mode #player, body.live-mode #cover, body.live-mode #shield, body.live-mode #lt, body.live-mode #unmute, body.live-mode #sound-help, body.live-mode #bug { display: none !important; }
body.live-mode #panel .p-sec:not(#p-channels-sec) { display: none; }
body.live-mode #panel .p-keys { display: none; }
@media (max-width: 760px) {
  #live { flex-direction: column; }
  #live-main { flex: 1 1 55%; }
  #live-chat { flex: 0 0 45%; width: 100%; height: auto; }
}

/* ---- the guide on the channel page ( * key ) ---- */
#gd { position: absolute; inset: 0; z-index: 12; background: rgba(8,9,14,.94); color: #fff; display: flex; flex-direction: column; font-family: "Barlow Semi Condensed", Arial, sans-serif; }
#gd[hidden] { display: none !important; }
#gd-h { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.18); }
#gd-tabs { display: flex; gap: 8px; flex: 1; }
#gd-tabs button { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 7px 16px; cursor: pointer; font: 700 16px "Barlow Semi Condensed", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; }
#gd-tabs button.on { background: #fff; color: #000; }
#gd-time { color: #aab; font-size: 15px; }
#gd-full { color: #9db4ff; text-decoration: none; font-size: 14px; } #gd-full:hover { text-decoration: underline; }
#gd-x { background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; padding: 0 6px; }
#gd-list { flex: 1; overflow-y: auto; padding: 10px 22px; }
.gd-row { display: grid; grid-template-columns: 190px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; margin-bottom: 8px; cursor: pointer; }
.gd-row > div { background: rgba(255,255,255,.07); border: 2px solid transparent; border-radius: 8px; padding: 10px 13px; min-width: 0; }
.gd-row:hover > div { background: rgba(255,255,255,.12); }
.gd-row.sel > div { border-color: #5b78c8; }
.gd-row .gd-ch { font: 700 20px "Barlow Semi Condensed", Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; background: rgba(255,255,255,.12); }
.gd-row.here .gd-ch::after { content: "\25CF"; color: #e0201b; font-size: 12px; margin-left: 8px; }
.gd-row .gd-now { background: rgba(60,95,170,.35); }
.gd-t { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-s { color: #b6bccf; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gd-live .gd-ch { background: #4b2b78; }
#gd-f { padding: 9px 22px; color: #8d93a8; font-size: 13px; border-top: 1px solid rgba(255,255,255,.12); }
@media (max-width: 760px) { .gd-row { grid-template-columns: 1fr; } .gd-row .gd-n { display: none; } #gd-h { flex-wrap: wrap; } }

/* ---- embed mode ( ?embed=1 ): no chrome, no remote keys; the page that embeds the player controls it by postMessage ---- */
body.embed #panel, body.embed #osd, body.embed #keys-help, body.embed #unmute, body.embed #sound-help, body.embed #live-ctl, body.embed #live-who { display: none !important; }