/* GLCH TV - live.php. Every rule that sets display also has an explicit [hidden] override. */
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #0d0d10; color: #e9e6f2; font: 400 16px "Barlow", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
#top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; background: linear-gradient(180deg, #3a1d78, #17102b); }
.brand { font: 700 30px "Barlow Condensed", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.brand span { color: #b794ff; }
#top nav { display: flex; gap: 16px; font-weight: 600; }
#top nav a { opacity: .8; } #top nav a:hover { opacity: 1; }
main { max-width: 680px; margin: 0 auto; padding: 16px 12px 60px; }
#counts { display: flex; background: #18181d; border: 1px solid #2a2a33; border-radius: 8px; margin-bottom: 18px; }
#counts div { flex: 1; text-align: center; padding: 12px; color: #b794ff; } #counts div + div { border-left: 1px solid #2a2a33; }
#counts b { color: #fff; margin-left: 6px; font-size: 18px; }
#live-h { text-align: center; font: 700 22px "Barlow Condensed", Arial, sans-serif; letter-spacing: .4em; margin: 22px 0 14px; }
#live-h i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #e0201b; margin-left: 6px; }
.msg { text-align: center; color: #aaa; font-size: 20px; padding: 30px 10px; }
.row { display: flex; align-items: center; gap: 12px; background: #1d1d23; border-radius: 8px; padding: 6px; margin-bottom: 8px; min-height: 58px; }
a.row:hover { background: #28282f; }
.av { width: 52px; height: 52px; border-radius: 6px; object-fit: cover; background: #000; flex: 0 0 auto; }
.who { flex: 1; min-width: 0; }
.who .nm { font-size: 20px; color: #b794ff; line-height: 1.15; }
.who .tt { color: #ddd; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw { color: #b794ff; font-weight: 600; min-width: 52px; text-align: right; }
.pf { flex: 0 0 auto; min-width: 54px; padding: 8px 10px; border-radius: 6px; background: #2a2a31; font: 800 12px/1 "Barlow Condensed", Arial, sans-serif; letter-spacing: .06em; text-align: center; }
.pf.kick { color: #53fc18; } .pf.youtube { background: #e0201b; color: #fff; }
#off-wrap { margin-top: 22px; } #off-wrap summary { cursor: pointer; color: #b794ff; padding: 8px 2px; font-weight: 600; }
#off-list .row { opacity: .55; }
@media (max-width: 520px) { .vw { display: none; } .who .nm { font-size: 18px; } }

/* multi-view */
#mv-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
#mv-bar button, #mv-tools button { background: #2a1a44; color: #fff; border: 1px solid #4b2b78; border-radius: 6px; padding: 8px 14px; cursor: pointer; font: 600 14px "Barlow", Arial, sans-serif; }
#mv-bar button:hover, #mv-tools button:hover { background: #3a2560; }
#mv-go { background: #6d3fd6 !important; border-color: #8a5af0 !important; }
#mv-help { color: #aab; font-size: 14px; }
.mv-pick { width: 22px; height: 22px; accent-color: #8a5af0; flex: 0 0 auto; }
#mv-stage { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; flex-direction: column; }
#mv-stage[hidden] { display: none !important; }
#mv-tools { display: flex; align-items: center; gap: 14px; padding: 8px 12px; background: #0d0d10; }
#mv-tip { color: #aab; font-size: 13px; }
#mv-grid { flex: 1; display: grid; gap: 4px; padding: 4px; min-height: 0; }
#mv-grid.n2 { grid-template-columns: 1fr 1fr; }
#mv-grid.n3, #mv-grid.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.mv-cell { position: relative; background: #000; min-height: 0; border: 2px solid transparent; }
.mv-cell.hot { border-color: #8a5af0; }
.mv-cell iframe { width: 100%; height: 100%; border: 0; display: block; }
.mv-tag { position: absolute; left: 8px; bottom: 8px; z-index: 2; background: rgba(0,0,0,.75); color: #fff; border: 1px solid #555; border-radius: 6px; padding: 5px 10px; cursor: pointer; font: 600 13px "Barlow", Arial, sans-serif; }
body.mv-open { overflow: hidden; }
@media (max-width: 700px) { #mv-grid.n2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } }