/* ============================================================================
 * BloodCrimesTV — public page /tv
 *
 * One more room in the same building as PairBlitz / Vynumo / BC FM: it reuses
 * the BloodCrimes tokens and never redefines the palette. The player is the
 * hero; programme, channels, heroines and game modules support it.
 *
 * Rules honoured here:
 *  - the page never scrolls horizontally (mobile rows scroll INSIDE their box);
 *  - motion is restrained and opt-out via prefers-reduced-motion;
 *  - the 16:9 stage keeps its ratio on every orientation.
 * ==========================================================================*/

.bc-tv-page {
    --tv-accent: var(--bc-gold, #C99A38);
    --tv-surface: var(--bc-surface, #141418);
    --tv-border: var(--bc-border, #292930);
    --tv-text: var(--bc-text, #F2F2F2);
    --tv-muted: var(--bc-muted, #A3A3A3);
    --tv-crimson: var(--bc-crimson, #B51220);
    overflow-x: hidden;
}

.bc-tv-page * { box-sizing: border-box; }

/* ---------------------------------------------------------------- hero */

.bc-tv-hero {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.15rem 1rem;
    border: 1px solid var(--tv-border);
    background:
        radial-gradient(70% 130% at 8% 0%, rgba(181, 18, 32, .22), transparent 68%),
        radial-gradient(55% 120% at 96% 6%, rgba(201, 154, 56, .14), transparent 70%),
        linear-gradient(180deg, rgba(20, 20, 24, .9), rgba(11, 12, 16, .92));
}

.bc-tv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .015) 3px 4px);
}

.bc-tv-kicker {
    margin: 0 0 .35rem;
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tv-muted);
}

.bc-tv-title {
    margin: 0;
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tv-text);
}

.bc-tv-title .bc-tv-title-accent { color: var(--tv-accent); }

.bc-tv-sub {
    margin: .4rem 0 0;
    max-width: 62ch;
    color: var(--tv-muted);
    font-size: .96rem;
}

.bc-tv-statusrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .8rem;
    margin-top: .85rem;
}

/* status pill */
.bc-tv-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .6rem;
    border: 1px solid var(--tv-border);
    background: rgba(0, 0, 0, .35);
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tv-muted);
}

.bc-tv-status i { font-size: .82rem; }

.bc-tv-status--live { color: #fff; border-color: rgba(220, 38, 38, .7); background: rgba(181, 18, 32, .35); }
.bc-tv-status--live .bc-tv-dot { background: #ff3b3b; box-shadow: 0 0 8px rgba(255, 59, 59, .9); animation: bcTvPulse 1.6s ease-in-out infinite; }
.bc-tv-status--offline { color: var(--tv-muted); }
.bc-tv-status--unknown { color: var(--tv-muted); font-style: italic; }

.bc-tv-dot {
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--tv-muted); display: inline-block;
}

.bc-tv-route {
    font-size: .82rem;
    color: var(--tv-muted);
}
.bc-tv-route b { color: var(--tv-accent); }

@keyframes bcTvPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* --------------------------------------------------------- main layout */

.bc-tv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .bc-tv-grid { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

/* ------------------------------------------------------------- player */

.bc-tv-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--tv-border);
    overflow: hidden;
}

/* keep 16:9 even where aspect-ratio is unsupported */
@supports not (aspect-ratio: 16 / 9) {
    .bc-tv-stage { height: 0; padding-bottom: 56.25%; }
}

.bc-tv-stage iframe,
.bc-tv-stage > div,
.bc-tv-stage > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.bc-tv-poster {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    text-align: center;
    padding: 1rem;
    background:
        radial-gradient(75% 120% at 50% 120%, rgba(181, 18, 32, .35), transparent 60%),
        linear-gradient(180deg, rgba(8, 9, 12, .55), rgba(8, 9, 12, .92));
    color: var(--tv-text);
}

.bc-tv-poster__heroine {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    opacity: .38;
    filter: saturate(.9) contrast(1.05);
}

.bc-tv-poster__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .7rem; max-width: 44ch; }
.bc-tv-poster__channel {
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: .82rem;
    color: var(--tv-accent);
}
.bc-tv-poster__title { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: clamp(1.2rem, 4vw, 1.9rem); margin: 0; }
.bc-tv-poster__copy { margin: 0; color: #d8d8d8; font-size: .9rem; }

.bc-tv-play {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .7rem 1.5rem;
    border: 1px solid rgba(212, 168, 83, .6);
    background: linear-gradient(180deg, rgba(212, 168, 83, .22), rgba(181, 18, 32, .22));
    color: #fff;
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.05rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.bc-tv-play:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(181, 18, 32, .35); }
.bc-tv-play:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 3px; }

.bc-tv-stage-note {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: 1.4rem; text-align: center; color: var(--tv-muted); font-size: .9rem;
}

/* meta under the player */
.bc-tv-meta {
    margin-top: .7rem;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    align-items: flex-start;
    justify-content: space-between;
}
.bc-tv-meta__main { min-width: 0; flex: 1 1 260px; }
.bc-tv-meta__now { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: 1.15rem; margin: 0; color: var(--tv-text); }
.bc-tv-meta__sub { margin: .15rem 0 0; color: var(--tv-muted); font-size: .88rem; }
.bc-tv-meta__track { margin: .35rem 0 0; font-size: .88rem; color: var(--tv-accent); }
.bc-tv-meta__next { margin: .25rem 0 0; font-size: .82rem; color: var(--tv-muted); }

.bc-tv-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.bc-tv-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 42px; padding: .5rem 1rem;
    border: 1px solid var(--tv-border);
    background: rgba(255, 255, 255, .03);
    color: var(--tv-text);
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    letter-spacing: .08em; text-transform: uppercase; font-size: .82rem;
    text-decoration: none; cursor: pointer;
}
.bc-tv-btn:hover { color: #fff; border-color: var(--tv-accent); text-decoration: none; }
.bc-tv-btn--primary { border-color: rgba(212, 168, 83, .55); color: var(--tv-accent); }
.bc-tv-btn--crimson { border-color: rgba(181, 18, 32, .6); color: #f2b8bd; }

/* ----------------------------------------------------------- side panel */

.bc-tv-side { display: flex; flex-direction: column; gap: 1rem; }
.bc-tv-card {
    border: 1px solid var(--tv-border);
    background: var(--tv-surface);
    padding: .9rem 1rem;
}
.bc-tv-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-bottom: .6rem;
}
.bc-tv-card__title {
    margin: 0;
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tv-accent);
}
.bc-tv-card__title i { margin-right: .4rem; }

.bc-tv-epg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.bc-tv-epg li { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .06); }
.bc-tv-epg li:last-child { border-bottom: 0; }
.bc-tv-epg__time { flex: 0 0 3.2rem; color: var(--tv-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.bc-tv-epg__body { min-width: 0; }
.bc-tv-epg__title { color: var(--tv-text); font-size: .88rem; }
.bc-tv-epg__desc { color: var(--tv-muted); font-size: .78rem; }
.bc-tv-epg li.is-now { background: rgba(181, 18, 32, .12); }
.bc-tv-epg li.is-now .bc-tv-epg__title { color: var(--tv-accent); }

.bc-tv-chat-wrap { position: relative; }
.bc-tv-chat-embed { position: relative; width: 100%; aspect-ratio: 16 / 11; background: #000; border: 1px solid var(--tv-border); }
@supports not (aspect-ratio: 16 / 11) { .bc-tv-chat-embed { height: 0; padding-bottom: 68.75%; } }
.bc-tv-chat-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bc-tv-chat-note { color: var(--tv-muted); font-size: .78rem; margin-top: .5rem; }

/* -------------------------------------------------------------- toolbar */

.bc-tv-toolbar {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: .25rem;
    margin: 1rem 0 .9rem;
    padding: .3rem;
    background: rgba(11, 12, 16, .92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--tv-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bc-tv-toolbar::-webkit-scrollbar { display: none; }
.bc-tv-tab {
    flex: 1 1 auto; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 44px; padding: .35rem .8rem;
    background: transparent; border: 1px solid transparent;
    color: var(--tv-muted);
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.bc-tv-tab.is-active { color: var(--tv-accent); border-color: rgba(212, 168, 83, .4); background: rgba(212, 168, 83, .08); }
.bc-tv-tab:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.bc-tv-panel[hidden] { display: none; }

/* --------------------------------------------------------- channel cards */

.bc-tv-channels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: .8rem;
}
.bc-tv-channel {
    display: flex; flex-direction: column; gap: .5rem;
    border: 1px solid var(--tv-border);
    background: linear-gradient(180deg, rgba(20, 20, 24, .95), rgba(11, 12, 16, .95));
    cursor: pointer; text-align: left; padding: 0; overflow: hidden;
    color: var(--tv-text);
}
.bc-tv-channel:hover { border-color: var(--tv-accent); }
.bc-tv-channel:focus-visible { outline: 2px solid var(--tv-accent); outline-offset: 2px; }
.bc-tv-channel.is-active { border-color: var(--tv-accent); box-shadow: 0 0 0 1px rgba(212, 168, 83, .3) inset; }
.bc-tv-channel__thumb {
    position: relative; aspect-ratio: 16 / 9; width: 100%;
    background: #0a0a0d center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, .35); font-size: 1.7rem;
}
@supports not (aspect-ratio: 16 / 9) { .bc-tv-channel__thumb { height: 0; padding-bottom: 56.25%; } }
.bc-tv-channel__body { padding: .15rem .8rem .85rem; }
.bc-tv-channel__name { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: 1.02rem; margin: 0; }
.bc-tv-channel__genre { color: var(--tv-accent); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin: .15rem 0 .3rem; }
.bc-tv-channel__desc { color: var(--tv-muted); font-size: .82rem; margin: 0; }

/* --------------------------------------------------------------- heroines */

.bc-tv-heroines {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    gap: .8rem;
    overflow-x: auto;
    padding-bottom: .4rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.bc-tv-heroines::-webkit-scrollbar { height: 6px; }
.bc-tv-heroines::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
@media (min-width: 768px) { .bc-tv-heroines { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); overflow: visible; } }

.bc-tv-heroine {
    scroll-snap-align: start;
    border: 1px solid var(--tv-border);
    background: var(--tv-surface);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.bc-tv-heroine__portrait {
    position: relative; aspect-ratio: 3 / 4; background: #0a0a0d center/cover no-repeat;
    display: flex; align-items: flex-end; justify-content: center;
}
.bc-tv-heroine__placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif);
    font-size: 2.4rem; letter-spacing: .1em;
    color: rgba(255, 255, 255, .5);
    background: linear-gradient(150deg, rgba(181, 18, 32, .4), rgba(11, 12, 16, .9));
}
.bc-tv-heroine__body { padding: .6rem .8rem .85rem; }
.bc-tv-heroine__name { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: 1rem; margin: 0; }
.bc-tv-heroine__role { color: var(--tv-accent); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.bc-tv-heroine__desc { color: var(--tv-muted); font-size: .8rem; margin: .3rem 0 .55rem; }
.bc-tv-heroine__cta { font-size: .76rem; }

/* --------------------------------------------------------------- modules */

.bc-tv-modules { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .bc-tv-modules--2 { grid-template-columns: 1fr 1fr; } }

.bc-tv-wire { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bc-tv-wire li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.bc-tv-wire li:last-child { border-bottom: 0; }
.bc-tv-wire__icon { flex: 0 0 auto; width: 1.4rem; text-align: center; color: var(--tv-accent); }
.bc-tv-wire__title { font-size: .88rem; }
.bc-tv-wire__meta { color: var(--tv-muted); font-size: .76rem; }

.bc-tv-rank { list-style: none; margin: 0; padding: 0; }
.bc-tv-rank li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.bc-tv-rank li:last-child { border-bottom: 0; }
.bc-tv-rank__pos { flex: 0 0 1.6rem; font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); color: var(--tv-accent); }
.bc-tv-rank__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-tv-rank__val { color: var(--tv-muted); font-size: .82rem; font-variant-numeric: tabular-nums; }

.bc-tv-explore { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; }
.bc-tv-explore-card {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .9rem 1rem; border: 1px solid var(--tv-border);
    background: var(--tv-surface); color: var(--tv-text); text-decoration: none;
}
.bc-tv-explore-card:hover { border-color: var(--tv-accent); color: #fff; text-decoration: none; }
.bc-tv-explore-card i { color: var(--tv-accent); font-size: 1.3rem; }
.bc-tv-explore-card strong { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: 1.05rem; }
.bc-tv-explore-card span { color: var(--tv-muted); font-size: .82rem; }

.bc-tv-city-cta {
    position: relative; overflow: hidden;
    border: 1px solid var(--tv-border);
    padding: 1.3rem 1.2rem;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(201, 154, 56, .18), transparent 60%),
        radial-gradient(70% 120% at 0% 100%, rgba(181, 18, 32, .28), transparent 62%),
        #0d0e12;
}
.bc-tv-city-cta h3 { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); font-size: 1.3rem; margin: 0 0 .3rem; }
.bc-tv-city-cta p { color: var(--tv-muted); margin: 0 0 .8rem; max-width: 52ch; font-size: .9rem; }

.bc-tv-about p { color: var(--tv-muted); font-size: .9rem; }
.bc-tv-about h3 { font-family: var(--bc-font-display, 'Barlow Condensed', sans-serif); color: var(--tv-accent); font-size: 1.05rem; margin: 0 0 .4rem; }

.bc-tv-loading,
.bc-tv-empty { color: var(--tv-muted); font-size: .86rem; padding: .6rem 0; }
.bc-tv-error { color: #f2b8bd; font-size: .86rem; }

.bc-tv-pill {
    display: inline-block; padding: .1rem .45rem; border: 1px solid var(--tv-border);
    font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-muted);
}
.bc-tv-pill--live { color: #fff; border-color: rgba(220, 38, 38, .7); background: rgba(181, 18, 32, .4); }
.bc-tv-pill--offline { color: var(--tv-muted); }

/* keep the fixed bottom nav clear on mobile */
html[data-bc-shell-bottom-nav] .bc-tv-page { padding-bottom: .5rem; }

@media (prefers-reduced-motion: reduce) {
    .bc-tv-status--live .bc-tv-dot { animation: none; }
    .bc-tv-play { transition: none; }
}