/* GLCH MV / GLCH TV library page. One deliberate dark look; the accent differs per site.
   Every element with a `hidden` attribute AND its own display rule has an explicit [hidden] override. */
:root { --bg: #0b0c0e; --panel: #15181c; --panel2: #1c2025; --fg: #f3f3f1; --mute: #9aa1a9; --line: #262b31; --accent: #ff3b6b; --gutter: clamp(16px, 4vw, 56px); color-scheme: dark; }
body[data-mode="tv"] { --accent: #ffb020; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 16px/1.45 "Barlow", system-ui, sans-serif; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; letter-spacing: .02em; margin: 0; }

/* ---- top bar */
#top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 12px var(--gutter);
       background: linear-gradient(180deg, rgba(11,12,14,.96), rgba(11,12,14,.78)); backdrop-filter: blur(8px); flex-wrap: wrap; }
.brand { font: 700 24px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.brand span { color: var(--accent); font-weight: 500; }
#tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scrollbar-width: none; }
#tabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) { #tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; } }
#tabs a { padding: 6px 14px; border-radius: 999px; color: var(--mute); white-space: nowrap; font-weight: 600; }
#tabs a:hover { color: var(--fg); }
#tabs a.on { background: var(--fg); color: #000; }
#search { margin: 0; }
#q { background: var(--panel); border: 1px solid var(--line); color: var(--fg); border-radius: 999px; padding: 7px 16px; width: 200px; font: inherit; }
#q:focus { width: 260px; }
.live { border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 6px 16px; font-weight: 600; white-space: nowrap; }
.live:hover { background: var(--accent); color: #000; }
@media (max-width: 720px) { #search { order: 5; flex: 1 1 100%; } #q, #q:focus { width: 100%; } }

main { padding-bottom: 60px; }
.loading, .empty { padding: 40px var(--gutter); color: var(--mute); }

/* ---- hero */
#hero { position: relative; min-height: clamp(320px, 56vh, 600px); display: flex; align-items: flex-end; background: #000 center / cover no-repeat; margin-bottom: 8px; }
#hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg) 2%, rgba(11,12,14,.35) 55%, rgba(11,12,14,.55) 100%), linear-gradient(90deg, rgba(11,12,14,.85) 0%, rgba(11,12,14,0) 62%); }
.hero-in { position: relative; padding: 40px var(--gutter) 34px; max-width: 760px; }
.hero-in .kicker { color: var(--accent); font: 700 13px/1 "Barlow Condensed", sans-serif; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 10px; }
.hero-in h1 { font-size: clamp(32px, 5.4vw, 66px); line-height: 1.02; text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.hero-in .meta { color: #ddd; margin: 10px 0 8px; font-weight: 600; }
.hero-in p { color: #d4d6d9; margin: 0 0 18px; max-width: 58ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { border: 0; border-radius: 6px; padding: 10px 22px; font: 700 16px/1 "Barlow", sans-serif; cursor: pointer; background: var(--fg); color: #000; display: inline-flex; align-items: center; gap: 8px; }
.btn.alt { background: rgba(255,255,255,.18); color: var(--fg); }
.btn:hover { filter: brightness(.88); }
.play-tri { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }

/* ---- rows */
.row { margin: 22px 0 6px; position: relative; }
.row-h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 var(--gutter); margin-bottom: 8px; }
.row-h h2 { font-size: 24px; }
.row-h a { color: var(--mute); font-size: 14px; font-weight: 600; } .row-h a:hover { color: var(--fg); }
.scroller { display: flex; gap: 12px; overflow-x: auto; padding: 8px var(--gutter) 18px; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding: 0 var(--gutter); }
.scroller::-webkit-scrollbar { display: none; }
.scroll-btn { position: absolute; top: 38px; bottom: 26px; width: 48px; z-index: 5; border: 0; color: #fff; font-size: 30px; cursor: pointer; opacity: 0; transition: opacity .15s;
              background: linear-gradient(90deg, rgba(11,12,14,.85), rgba(11,12,14,0)); }
.scroll-btn.r { right: 0; background: linear-gradient(270deg, rgba(11,12,14,.85), rgba(11,12,14,0)); } .scroll-btn.l { left: 0; }
.row:hover .scroll-btn, .scroll-btn:focus-visible { opacity: 1; }
.scroll-btn[hidden] { display: none !important; }
@media (hover: none) { .scroll-btn { display: none; } }

/* ---- tiles */
.tile { flex: 0 0 auto; width: clamp(200px, 21vw, 300px); scroll-snap-align: start; display: block; }
.grid .tile { width: auto; }
.thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--panel2); box-shadow: 0 2px 10px rgba(0,0,0,.4); transition: transform .18s, box-shadow .18s; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile:hover .thumb, .tile:focus-visible .thumb { transform: scale(1.045); box-shadow: 0 10px 28px rgba(0,0,0,.65); }
.thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0,0,0,.6) no-repeat center;
                opacity: 0; transition: opacity .15s; background-image: linear-gradient(transparent, transparent); }
.thumb::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; margin: -9px 0 0 -6px; border-left: 16px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; opacity: 0; transition: opacity .15s; }
.tile:hover .thumb::after, .tile:hover .thumb::before, .tile:focus-visible .thumb::after, .tile:focus-visible .thumb::before { opacity: 1; }
.badge { position: absolute; left: 8px; top: 8px; z-index: 3; background: var(--accent); color: #000; font: 700 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; padding: 4px 8px; border-radius: 4px; }
.dur { position: absolute; right: 8px; bottom: 8px; z-index: 3; background: rgba(0,0,0,.75); font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.t-title { margin-top: 8px; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.t-sub { color: var(--mute); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- grids and cards */
.sec-h { padding: 26px var(--gutter) 6px; } .sec-h h1 { font-size: clamp(30px, 4vw, 48px); } .sec-h .sub { color: var(--mute); margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 22vw, 260px), 1fr)); gap: 22px 14px; padding: 14px var(--gutter); }
.card { display: block; }
.mosaic { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--panel2); display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; transition: transform .18s, box-shadow .18s; box-shadow: 0 2px 10px rgba(0,0,0,.4); }
.mosaic.one { grid-template: 1fr / 1fr; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover .mosaic, .card:focus-visible .mosaic { transform: scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.65); }
.c-name { margin-top: 8px; font-weight: 600; } .c-sub { color: var(--mute); font-size: 14px; }
.more-wrap { text-align: center; padding: 10px 0 30px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px var(--gutter) 0; }
.chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 14px; font-weight: 600; color: var(--mute); }
.chip:hover { color: var(--fg); border-color: var(--mute); }

/* ---- detail dialog */
#modal { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.82); overflow-y: auto; display: flex; justify-content: center; padding: 4vh 12px; }
#modal[hidden] { display: none !important; }
#modal-box { position: relative; background: var(--panel); border-radius: 12px; width: min(980px, 100%); align-self: flex-start; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.8); }
#m-close { position: absolute; right: 12px; top: 10px; z-index: 6; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
#m-close:hover { background: rgba(0,0,0,.9); }
.media { position: relative; aspect-ratio: 16 / 9; background: #000; }
.media img, .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--panel) 0%, rgba(21,24,28,0) 40%); pointer-events: none; }
.media.playing::after { display: none; }
.media .bigplay { position: absolute; left: 50%; top: 50%; z-index: 3; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; }
.media .bigplay:hover { background: var(--accent); color: #000; }
.media .bigplay .play-tri { border-left-width: 24px; border-top-width: 15px; border-bottom-width: 15px; margin-left: 6px; }
#m-info { padding: 6px 28px 20px; }
#m-info h2 { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.05; }
.m-line { color: var(--mute); margin: 6px 0; font-weight: 600; } .m-line a { color: var(--fg); border-bottom: 1px solid var(--line); } .m-line a:hover { border-color: var(--accent); }
.m-desc { color: #d6d8db; max-width: 70ch; margin: 12px 0; }
.m-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 20px; margin: 14px 0; }
.m-facts div { font-size: 14px; } .m-facts b { display: block; color: var(--mute); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
#m-more { padding: 0 0 16px; } #m-more .row { margin-top: 6px; } #m-more .row-h { padding-inline: 28px; } #m-more .scroller { padding-inline: 28px; }
#m-more .tile { width: clamp(170px, 24vw, 230px); }

@media (prefers-reduced-motion: reduce) { .thumb, .mosaic, .scroll-btn { transition: none; } .tile:hover .thumb, .card:hover .mosaic { transform: none; } }

/* Collapsible Season > Episode > Part view (TV) */
.seasons{display:flex;flex-direction:column;gap:10px}
.ser-bar{display:flex;gap:8px;margin-bottom:4px}
.season{background:rgba(255,255,255,.05);border-radius:8px;overflow:hidden}
.season>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;list-style:none;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;letter-spacing:.02em}
.season>summary::-webkit-details-marker{display:none}
.season>summary::before{content:'\25B8';margin-right:10px;transition:transform .15s}
.season[open]>summary::before{transform:rotate(90deg)}
.season>summary .sn{flex:1}
.season>summary .sc{font-family:'Barlow',sans-serif;font-weight:400;font-size:.85rem;opacity:.65}
.eps{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;padding:4px 12px 14px}
.eps .ep{background:rgba(255,255,255,.06);border-radius:6px;overflow:hidden}
.eps .ep-main{display:flex;align-items:center;gap:10px;padding:6px;color:inherit;text-decoration:none}
.eps .ep-main:hover{background:rgba(255,255,255,.1)}
.eps .ep-img{flex:0 0 96px;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden}
.eps .ep-img img{width:100%;height:100%;object-fit:cover;display:block}
.eps .ep-no{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.1rem;min-width:2.2em}
.eps .ep-t{flex:1;font-size:.9rem;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.eps .parts{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px}
.eps .part{font-size:.8rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:inherit;text-decoration:none}
.eps .part:hover{background:rgba(255,255,255,.28)}
.ser-loose{margin:22px 0 10px;font-size:1.1rem}

.also { margin-top: 36px; }

.badge.plus { background: #f4c542; color: #000; right: 8px; left: auto; font-weight: 800; }

.badge.priv { background: #6b7280; color: #fff; left: 8px; top: 34px; }
.badge.plus.inl { position: static; display: inline-block; margin-left: 8px; }
.subnav { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px var(--gutter) 14px; }
.subnav a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #333); color: inherit; text-decoration: none; font-size: 14px; }
.subnav a.on { background: var(--accent); color: #000; border-color: var(--accent); }
.grp { padding: 18px var(--gutter) 6px; font-size: 20px; }
.pad { padding: 0 var(--gutter); }
.admin-note { padding: 0 var(--gutter); color: var(--mute); font-size: 14px; }
.songlist { padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2px 24px; }
.songrow { display: flex; align-items: baseline; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(128,128,128,.2); color: inherit; text-decoration: none; }
.songrow:hover { background: rgba(128,128,128,.12); }
.sr-t { font-weight: 600; } .sr-a { color: var(--mute); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-n { color: var(--mute); font-size: 13px; }

.badge.livetag { background: #c0392b; color: #fff; right: 8px; left: auto; top: 8px; }

/* search results from the sketch / wrestling catalogues (TV) */
.cat-hits { display: flex; flex-direction: column; margin: 6px var(--gutter) 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.cat-hit { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cat-hit:first-child { border-top: none; }
.cat-hit:hover { background: var(--panel2); }
.cat-t { font-weight: 600; flex: 1 1 220px; min-width: 0; }
.cat-s { color: var(--mute); font-size: 13.5px; }
.cat-b { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.cat-b.ok { color: #4cc38a; border: 1px solid #4cc38a; }
.cat-b.no { color: var(--mute); border: 1px dashed var(--line); }
.sec-h .sub a { color: var(--accent); }

.noimg { background: var(--panel2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23596069'/%3E%3C/svg%3E") center / 34px no-repeat; }