/* Test TV - dark OTT theme shared across the site. */
:root {
    --bg: #0b0f14;
    --surface: #141a21;
    --surface-2: #1c242e;
    --text: #e8edf2;
    --muted: #8fa1b3;
    --accent: #e50914;
    --accent-purple: #a78bfa;
    --brand-gradient: linear-gradient(120deg, #e50914, #ff5a1f, #8e2de2, #e50914);
    --rating: #ffd34d;
    --border: #232d38;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    /* Full-bleed OTT bands (hero, info backdrop) use 50vw negative
       margins; clip guards against a stray horizontal scrollbar.
       (clip, unlike hidden, keeps position:sticky working.) */
    overflow-x: hidden;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

/* Top bar: translucent glass floating over the content, OTT style. */
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(35, 45, 56, .6);
    position: sticky;
    top: 0;
    background: rgba(11, 15, 20, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Own compositing layer: without it Chrome on Windows can flash the
       blurred bar black while the page scrolls underneath it. */
    transform: translateZ(0);
    z-index: 10;
}

.brand { font-size: 20px; font-weight: 800; letter-spacing: .5px; }
.brand span { color: var(--accent); }

/* Live TV / Movies navigation: glowing buttons with a flowing,
   color-shifting gradient so visitors spot them right away. */
.topnav { display: flex; gap: 8px; }

/* Slides the gradient layer across the button. On the outline style the
   solid padding-box core is a single flat color, so moving it too is
   invisible — one keyframe set serves both button styles. */
@keyframes navflow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glow that cycles through the gradient's palette. */
@keyframes navglow {
    0%, 100% { box-shadow: 0 0 10px rgba(229, 9, 20, .5); }
    33% { box-shadow: 0 0 10px rgba(255, 106, 0, .5); }
    66% { box-shadow: 0 0 10px rgba(142, 45, 226, .5); }
}

.topnav a,
.mobile-nav summary,
.mobile-nav-panel a,
.channel-category-select {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1.5px solid transparent;
    /* Gradient-border trick: a solid core painted on the padding-box and
       the flowing gradient on the border-box behind the transparent
       border. */
    background:
        linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
        linear-gradient(120deg, #e50914, #ff6a00, #ff2e63, #8e2de2, #e50914) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: navflow 6s ease infinite, navglow 6s linear infinite;
}

.topnav a:hover,
.mobile-nav summary:hover,
.mobile-nav-panel a:hover,
.channel-category-select:hover { color: #fff; filter: brightness(1.25); }

.topnav a.active,
.mobile-nav[open] summary,
.mobile-nav-panel a.active {
    color: #fff;
    font-weight: 700;
    /* Active tab: the flowing gradient fills the whole button. */
    background: linear-gradient(120deg, #e50914, #ff6a00, #ff2e63, #8e2de2, #e50914);
    background-size: 300% 100%;
}

.tagline { color: var(--muted); font-size: 13px; }

/* Download-app CTA: a compact gradient pill pinned to the topbar's
   right edge — the same gradient family as the hero button, moving
   with the same slow flow so the header reads as one family. */
.topbar-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 16px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, #e50914, #ff5a1f, #8e2de2, #e50914);
    background-size: 250% 100%;
    animation: navflow 9s ease infinite;
    transition: transform .18s ease, filter .18s ease;
}

.topbar-download:hover { transform: translateY(-1px); filter: brightness(1.12); }
.topbar-download svg { width: 15px; height: 15px; }

main { max-width: 1200px; margin: 0 auto; padding: 18px 20px 40px; }

/* Catalogue pages (live TV grid / movies): search + toolbar + grid. The
   search input wears the same flowing gradient border as the landing's
   search box, so all three pages read as one family. */
.searchbar input {
    appearance: none;
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    /* Same gradient-border trick as .land-search-box: a solid core painted on
       the padding-box with the moving gradient on the border-box behind the
       transparent border. */
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(120deg, #e50914, #ff6a00, #ff2e63, #8e2de2, #e50914) border-box;
    background-size: 100% 100%, 300% 100%;
    color: var(--text);
    font-size: 15px;
    outline: none;
    animation: navflow 6s ease infinite, navglow 6s linear infinite;
    transition: filter .15s ease;
}

/* Focus brightens the whole box. The border itself must stay transparent:
   a solid border-color here would paint over the gradient border. */
.searchbar input:focus { filter: brightness(1.18); }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 14px;
}

.servers {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.server-btn {
    background: var(--surface);
    color: var(--muted);
    border: 0;
    padding: 9px 16px;
    cursor: pointer;
    font-size: 14px;
}

.server-btn.active { background: var(--accent); color: #fff; font-weight: 600; }

.count { color: var(--muted); font-size: 13px; }

.channel-category-section { margin: 20px 0 24px; }
.channel-category-section label { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.channel-category-field { position: relative; width: min(100%, 360px); }
.channel-category-field::after { content: ''; position: absolute; top: 50%; right: 16px; width: 8px; height: 8px; border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.channel-category-select { appearance: none; color-scheme: dark; display: block; width: 100%; min-height: 44px; padding: 10px 38px 10px 14px; font-family: inherit; font-size: 16px; text-overflow: ellipsis; cursor: pointer; }
.channel-category-select option { background: var(--surface-2); color: var(--text); }
.channel-category-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s ease, border-color .15s ease;
}

.card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, .45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}

.logo {
    position: relative;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
}

.logo img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 8px; transition: transform .25s ease; }

.card:hover .logo img { transform: scale(1.07); }

.fallback { color: var(--muted); font-weight: 700; font-size: 18px; }

.meta { padding: 10px 12px 12px; }

.name {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* LIVE badge overlaid on every channel tile. */
.live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(229, 9, 20, .92);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
}

.live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: livepulse 1.6s ease infinite;
}

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

.link {
    font-size: 10px;
    color: var(--muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty, .loading { text-align: center; color: var(--muted); padding: 60px 20px; }

.spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Watch page */
.watch { max-width: 900px; margin: 0 auto; }

.back { display: inline-block; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.back:hover { color: var(--text); }

.watch-title { font-size: 28px; margin: 0 0 12px; letter-spacing: -.3px; }

.player {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.player > #video { width: 100%; height: 100%; display: block; object-fit: contain; }

/* Native fullscreen owns its enter/minimize state and letterboxes the video. */
.player > #video:fullscreen { object-fit: contain; border-radius: 0; }
.player > #video:-webkit-full-screen { object-fit: contain; border-radius: 0; }

/* Small text pill at the bottom of the player: the browser's native
   buffering spinner stays the ONLY circular indicator. */
.status {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

/* display:flex above would override the hidden attribute without this. */
.status[hidden] { display: none; }

.status p {
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    max-width: 85%;
    text-align: center;
}

/* Quality selector and captions (top-right of the player, away from
   the native control bar at the bottom). Fades in/out with the native
   controls: the player scripts toggle .idle on .player after the
   browser's own controls-idle timeout. */
.quality {
    position: absolute;
    top: 10px;
    right: 10px;
    transition: opacity .25s;
}

/* The CC button sits one slot left of the gear (34px buttons with 10px
   gaps; each appears as the stream reports its renditions and captions).
   Fullscreen is the F key and the browser's own control - no extra
   button rides on the player. */
.quality.caption { right: 54px; }

.player.idle .quality { opacity: 0; pointer-events: none; }

.quality[hidden], .quality-menu[hidden] { display: none; }

.quality-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .55);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.quality-btn:hover { background: rgba(0, 0, 0, .8); }

.quality-btn svg { width: 18px; height: 18px; fill: #fff; }

.quality-menu {
    position: absolute;
    top: 40px;
    right: 0;
    min-width: 130px;
    background: rgba(15, 15, 20, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 6px;
}

.quality-menu button {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    color: #fff;
    font-size: 13px;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.quality-menu button:hover { background: rgba(255, 255, 255, .12); }
.quality-menu button.active { color: var(--accent); font-weight: 600; }

/* Corner logo / site logo fixture (Platform Settings -> "Corner Logo /
   Site Logo"): uploaded once and drawn on every video - not an ad
   campaign, and nothing about it is counted (see
   partials/player-corner-logo.blade.php). Pinned in the corner the admin
   chose; the default is the top-left - the free corner - tucked into its
   top edge, while the top-right corner is where the quality / captions
   buttons live (10px in, 34px tall), so that choice pins the logo just
   beneath them, and the bottom corners clear the native control bar.
   Never takes clicks, so the video stays pausable through it; the popup
   ad overlay (z-index 30) covers it while an ad is up - and the logo
   keeps drawing in fullscreen too, because the box (not the bare video)
   is what goes fullscreen (see .player:fullscreen above). */
.player-corner-logo {
    position: absolute;
    pointer-events: none;
    width: var(--logo-size, 50px);
    max-width: 32%;
    height: var(--logo-size, 50px);
    max-height: 32%;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    z-index: 2;
}
.player-corner-logo > img, .player-corner-logo > video {
    display: block; width: 100%; height: 100%; object-fit: contain; object-position: top left;
    background: transparent; border: 0; box-shadow: none;
}
.player-corner-logo > [hidden] { display: none; }

.player-corner-logo.pos-top-right { top: 52px; right: 10px; }
.player-corner-logo.pos-top-left { top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
.player-corner-logo.pos-bottom-right { bottom: 64px; right: 10px; }
.player-corner-logo.pos-bottom-left { bottom: 64px; left: 10px; }

.hint { color: var(--muted); font-size: 12px; margin: 10px 0 0; }

/* Player Popup ad: the admin-made campaign (Admin -> Ads, placement
   "Player popup") drawn over the web players while it is live and the
   "Show Ads in App" switch is On (see partials/player-ad.blade.php and
   js/player-ad.js). The whole body is the click target and opens the
   campaign's Destination URL in a new tab; the corner timer counts the
   admin's Length (seconds), then a close (X) button appears in the same
   corner and takes the ad off the player. */
.player-ad {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #000;
}

.player-ad-body {
    display: block;
    width: 100%;
    height: 100%;
}

a.player-ad-body { cursor: pointer; }

.player-ad-media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.player-ad-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 24px;
    box-sizing: border-box;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.player-ad-chip {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
}

/* The visible "you must watch" indicator, in the top-right corner.
   display:flex above would override the hidden attribute without this. */
.player-ad-timer {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    border-radius: 50%;
}

.player-ad-timer[hidden] { display: none; }

/* Appears only once the countdown finishes (js/player-ad.js unhides it),
   in the top-right corner the timer has just vacated. display:flex below
   would override the hidden attribute without the [hidden] rule. */
.player-ad-skip {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    cursor: pointer;
}

.player-ad-skip:hover { border-color: var(--accent); color: var(--accent); }

.player-ad-skip[hidden] { display: none; }

/* YouTube ad: thumbnail with a centred play button. When JS mounts the ad
   the thumbnail div is replaced by the YouTube iframe, so these styles
   only apply during the brief poster phase before the embed loads. */
.player-ad-youtube {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.player-ad-youtube-thumb {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #000;
}

.player-ad-youtube-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    background: #ff0000;
    border-radius: 12px;
    color: #fff;
    font-size: 28px;
    line-height: 48px;
    text-align: center;
    pointer-events: none;
}

/* Invisible shield locked over the YouTube ad iframe so no click, tap or
   pointer event can reach the player underneath - the ad cannot be paused,
   seeked or otherwise interacted with. The JS creates this div on top of
   the iframe when the player is ready. */
.player-ad-youtube-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: auto;
    background: transparent;
}

/* "Tap for sound" label shown over the YouTube ad until the viewer
   taps the overlay to unmute. Disappears after the first tap. */
.player-ad-youtube-tap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 32px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 0.5px;
    animation: player-ad-pulse 1.5s ease-in-out infinite;
}

@keyframes player-ad-pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); }
}

/* Live download-speed readout under the players */
.speed {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    margin-top: 10px;
}

.speed[hidden] { display: none; }

.speed .dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}

.speed .dot.ok { background: #22c55e; }
.speed .dot.warn { background: #f59e0b; }
.speed .dot.bad { background: #ef4444; }

/* Movies browse page */
/* Row headings live inside .row wrappers now; spacing between rows
   comes from .row margins. */
.section-title { font-size: 18px; margin: 0 0 10px; letter-spacing: -.2px; }

.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.movie-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.movie-card:hover {
    transform: translateY(-5px) scale(1.04);
    border-color: rgba(229, 9, 20, .55);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .55);
    z-index: 2;
}

.movie-card .poster {
    position: relative;
    aspect-ratio: 2 / 3;
    background: var(--surface-2);
}

.movie-card .poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Play affordance sweeping in over the art on hover. */
.movie-card .poster::after {
    content: '\25B6';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: rgba(0, 0, 0, .38);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

.movie-card:hover .poster::after { opacity: 1; }

.poster-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.badge-rating {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    background: rgba(0, 0, 0, .72);
    color: #ffd34d;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
}

.movie-card .meta { padding: 9px 10px 11px; }

.movie-card .name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.movie-card .sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Movie detail page */
.movie-info { display: flex; gap: 18px; margin-top: 18px; }

.movie-info .poster-thumb { flex: 0 0 160px; }
.movie-info .poster-thumb img { width: 100%; border-radius: 12px; display: block; }
.movie-info .info { flex: 1; min-width: 0; }

.facts { color: var(--muted); font-size: 13.5px; }

.movie-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 8px;
    margin: 14px 0 18px;
}

.movie-fact {
    min-width: 0;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.movie-fact dt {
    margin: 0 0 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .09em;
    line-height: 1.5;
    text-transform: uppercase;
}

.movie-fact dd {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.movie-fact-rating dd { color: var(--rating); }

.genres { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

.genre-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
}

.desc { color: var(--muted); font-size: 14px; line-height: 1.7; white-space: pre-line; margin: 0 0 6px; }

.desc.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.desc-more { background: none; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; padding: 0; }

.stars { color: var(--muted); font-size: 13px; margin-top: 10px; }

@media (max-width: 640px) {
    .movie-info { flex-direction: column; }
    .movie-info .poster-thumb { flex-basis: auto; max-width: 180px; }
}

/* The download CTA needs room beside the nav: drop the tagline earlier,
   then collapse the CTA to its icon on phones. */
@media (max-width: 860px) {
    .tagline { display: none; }
}

@media (max-width: 480px) {
    .topbar { gap: 10px; }
    .brand { font-size: 18px; }
    .topnav { gap: 6px; }
    .topnav a { padding: 6px 10px; font-size: 13px; }
    .topbar-download { padding: 7px 10px; }
    .topbar-download .dl-text { display: none; }
    .topbar-download svg { width: 16px; height: 16px; }
}

.btn {
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
}

.btn.ghost { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn.active-source { outline: 2px solid var(--accent); }

.sources { display: flex; gap: 10px; align-items: center; margin: 16px 0 4px; flex-wrap: wrap; }
.sources .note { color: var(--muted); font-size: 13px; }

/* Full-screen shield shown by guard.js while developer tools are open:
   opaque so nothing underneath can be inspected. */
#devtools-guard {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: var(--bg, #0b0f14);
    color: var(--muted, #8b95a5);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    padding: 24px;
}

/* Episodes list at the bottom of a show's info page: season tabs
   (when there is more than one) and a wrapping grid of numbered
   episode buttons; the highlighted button is the one loaded. */
.episodes { margin-top: 26px; }

.episodes-title { font-size: 17px; margin: 0 0 12px; }

/* "More like this" / "More in {group}" strips ending the watch pages.
   The cards inside are the same .movie-card / .card the catalogue
   renders, so only the section shell is new. */
.suggestions { margin-top: 34px; }

.suggestions-title { font-size: 20px; margin: 0 0 14px; letter-spacing: -.2px; }

/* Movie-page suggestion tiles: the card plus its season chips row below
   (a series offers one chip per season, linking into that season's first
   episode). Sized like the plain strip cards so the row is unchanged -
   the scoped card rules below just let .movie-card fill its tile. */
.movie-row .suggestion-tile {
    flex: 0 0 150px;
    width: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.movie-row .suggestion-tile .movie-card {
    flex: 0 0 auto;
    width: 100%;
}

.season-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.season-chip {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}

.season-chip:hover { color: var(--text); border-color: var(--accent); }

/* The overflow chip on a very long serial: dashed, it leads to the full
   season list on the title page. */
.season-chip.season-chip-more { border-style: dashed; }

.season-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.season-tab {
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    padding: 6px 14px;
    cursor: pointer;
}

.season-tab:hover { color: var(--text); }

.season-tab.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

.episode-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.episode-grid.hidden { display: none; }

.episode {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
}

.episode:hover { border-color: var(--accent); }

.episode.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

/* Preview chapters (free early access) on a drama's episode grid: dimmed
   next to the numbered ones, still fully clickable. */
.episode.preview { border-style: dashed; color: var(--muted); }

.episode.preview:hover { color: var(--text); }

/* ------------------------------------------------------------------
   OTT hero banner (movies browse): a full-bleed rotating spotlight
   built by movies.js from the first curated section. Each slide is a
   poster backdrop with layered scrims, a copy block on the left and
   the poster card on the right.
   ------------------------------------------------------------------ */
.hero {
    position: relative;
    height: clamp(420px, 58vh, 560px);
    margin: -18px calc(50% - 50vw) 34px;
    overflow: hidden;
    background: var(--surface);
}

.hero[hidden] { display: none; }

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}

.hero-slide.active { opacity: 1; pointer-events: auto; }

.hero-bg {
    position: absolute;
    inset: 0;
    background: var(--surface-2) center / cover no-repeat;
    transform: scale(1.04);
}

/* Scrims keeping the copy legible over any art. */
.hero-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 15, 20, .92) 0%, rgba(11, 15, 20, .62) 40%, rgba(11, 15, 20, .08) 75%),
        linear-gradient(180deg, rgba(11, 15, 20, .25), rgba(11, 15, 20, 0) 35%, rgba(11, 15, 20, .9) 100%);
}

.hero-inner {
    position: relative;
    height: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.hero-copy { max-width: 620px; padding-bottom: 46px; }

.hero-eyebrow {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    margin-bottom: 10px;
}

.hero-title {
    margin: 0 0 12px;
    font-size: clamp(28px, 4.5vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.5px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .6);
}

.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 22px;
}

.hero-meta .star { color: #ffd34d; font-weight: 700; }

.hero-meta .sep { opacity: .5; }

.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 26px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease, background .15s ease;
}

.hero-btn.primary {
    background: linear-gradient(120deg, #e50914, #ff6a00);
    color: #fff;
    box-shadow: 0 10px 26px rgba(229, 9, 20, .38);
}

.hero-btn.primary:hover { transform: translateY(-2px); filter: brightness(1.12); }

.hero-btn.glass {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-btn.glass:hover { background: rgba(255, 255, 255, .16); }

.hero-poster {
    position: relative;
    flex: 0 0 200px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 46px;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .6);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: transform .2s ease;
}

.hero-poster:hover { transform: scale(1.03); }

.hero-poster img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }

.hero-poster .badge-rating { top: auto; bottom: 10px; left: 10px; }

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 8px;
}

.hero-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: rgba(255, 255, 255, .28);
    cursor: pointer;
    transition: background .2s ease, width .25s ease;
}

.hero-dot:hover { background-color: rgba(255, 255, 255, .55); }

.hero-dot.active { width: 26px; background-color: var(--accent); }

/* ------------------------------------------------------------------
   Carousel rows: one horizontal, snap-scrolling strip of poster cards
   per curated section, with hover chevrons on desktop.
   ------------------------------------------------------------------ */
.row { margin-top: 30px; }

.row:first-child { margin-top: 0; }

/* The short-drama shelves appended to the movies page (below the movie
   rows): one group heading marks where the drama catalogue starts. The
   block is also the #dramas anchor, so links scroll it under the
   sticky topbar rather than behind it. */
.drama-block { margin-top: 36px; scroll-margin-top: 96px; }

.drama-block-title { font-size: 24px; margin: 0 0 20px; letter-spacing: -.3px; }

.row-body { position: relative; }

.movie-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: 10px 2px 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.movie-row::-webkit-scrollbar { display: none; }

.movie-row .movie-card {
    flex: 0 0 150px;
    width: 150px;
    scroll-snap-align: start;
}

.row-nav {
    position: absolute;
    top: 0;
    bottom: 16px;
    width: 44px;
    border: 0;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.row-nav.prev {
    left: 0;
    background: linear-gradient(90deg, rgba(11, 15, 20, .92), transparent);
}

.row-nav.next {
    right: 0;
    background: linear-gradient(270deg, rgba(11, 15, 20, .92), transparent);
}

.row-nav:hover { color: var(--accent); }

/* Chevrons only where a pointer can hover; JS adds .can-show while the
   row can actually scroll that way. */
@media (hover: hover) and (pointer: fine) {
    .row-body:hover .row-nav.can-show { display: flex; }
}

/* ------------------------------------------------------------------
   Cinematic info band on the movie page: the poster bleeds wide and
   dark behind the facts, full viewport width.
   ------------------------------------------------------------------ */
.backdrop-band {
    position: relative;
    margin: 30px calc(50% - 50vw) 0;
    padding: 38px 0 26px;
    overflow: hidden;
    scroll-margin-top: 76px;
}

.backdrop-art {
    position: absolute;
    inset: -40px 0;
    background: var(--surface-2) center 20% / cover no-repeat;
    transform: scale(1.06);
}

.backdrop-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 15, 20, .34), rgba(11, 15, 20, .82) 72%, var(--bg) 100%),
        linear-gradient(90deg, rgba(11, 15, 20, .78), rgba(11, 15, 20, .12) 60%);
}

.backdrop-band .movie-info {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.backdrop-band .poster-thumb img { box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }

.backdrop-band .facts { color: #cfd8e3; }

/* ------------------------------------------------------------------
   Responsive tweaks for the OTT blocks.
   ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .hero { height: clamp(380px, 92vw, 480px); }

    .hero-inner { flex-direction: column; align-items: flex-start; justify-content: flex-end; }

    .hero-copy { max-width: none; padding-bottom: 40px; }

    .hero-title { font-size: clamp(24px, 6.4vw, 34px); }

    .hero-poster { display: none; }

    .hero-btn { padding: 11px 20px; font-size: 14px; }

    .hero-dots { bottom: 16px; }

    .row-nav { display: none !important; }

    .movie-row .movie-card { flex-basis: 132px; width: 132px; }

    .movie-row .suggestion-tile { flex-basis: 132px; width: 132px; }

    .backdrop-band { padding: 30px 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .live-badge::before { animation: none; }
}

/* ------------------------------------------------------------------
   CricMafia landing page, blog and site footer.
   ------------------------------------------------------------------ */
.landing { display: flex; flex-direction: column; gap: 56px; }

/* --- Hero: quiet vector decor (dot grid, orbit ring, play glyph) with a
       single soft moving gradient glow + bottom gradient hairline. --- */
.land-hero {
    position: relative;
    overflow: hidden;
    margin: -18px calc(50% - 50vw) 0;
    padding: clamp(64px, 11vw, 118px) 20px clamp(44px, 7vw, 76px);
    background: var(--bg);
}

.hero-glow {
    position: absolute;
    top: -340px;
    left: 50%;
    width: 760px;
    height: 760px;
    margin-left: -380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229, 9, 20, .14), rgba(142, 45, 226, .09) 42%, transparent 68%);
    pointer-events: none;
    animation: glowdrift 14s ease-in-out infinite alternate;
}

@keyframes glowdrift {
    from { transform: translateX(-36px) scale(.94); }
    to { transform: translateX(36px) scale(1.06); }
}

.hero-deco { position: absolute; pointer-events: none; }

.land-hero-dots {
    top: 16%;
    right: 5%;
    opacity: .55;
    -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent);
    mask-image: radial-gradient(closest-side, #000 35%, transparent);
}

.hero-ring {
    left: -150px;
    bottom: -170px;
    width: 440px;
    height: 440px;
    animation: orbit 44s linear infinite;
}

@keyframes orbit { to { transform: rotate(360deg); } }

.hero-play {
    right: 9%;
    bottom: 11%;
    width: 132px;
    height: 132px;
    animation: floaty 11s ease-in-out infinite alternate-reverse;
}

@keyframes floaty {
    from { transform: translateY(-9px); }
    to { transform: translateY(11px); }
}

/* Moving gradient hairline along the bottom edge of the hero. */
.hero-beam {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    opacity: .8;
    background: linear-gradient(90deg, transparent 4%, #e50914, #ff6a00, #8e2de2, transparent 96%);
    background-size: 200% 100%;
    animation: gradshift 9s ease infinite;
}

.land-hero-inner { position: relative; max-width: 860px; margin: 0 auto; text-align: center; }

.land-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin: 0;
}

.land-eyebrow svg { width: 14px; height: 14px; }

.land-title {
    margin: 22px 0 16px;
    font-size: clamp(32px, 5.6vw, 58px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.6px;
}

.land-sub {
    color: var(--muted);
    font-size: clamp(15px, 1.8vw, 16.5px);
    line-height: 1.65;
    max-width: 620px;
    margin: 0 auto 32px;
}

/* Animated gradient text (headline accents). */
.grad-text {
    background: linear-gradient(120deg, #e50914, #ff6a00, #8e2de2, #e50914);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradshift 9s ease infinite;
}

@keyframes gradshift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.land-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-grad {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 11px;
    font-size: 15.5px;
    font-weight: 700;
    color: #fff;
    background: var(--brand-gradient);
    background-size: 250% 100%;
    animation: gradshift 9s ease infinite;
    box-shadow: 0 10px 28px rgba(229, 9, 20, .28);
    transition: transform .18s ease, filter .18s ease;
}

.btn-grad:hover { transform: translateY(-2px); filter: brightness(1.12); }
.btn-grad svg { width: 18px; height: 18px; }

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 11px;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .2);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .34); }
.btn-ghost svg { width: 18px; height: 18px; }

/* --- Shared section frame --- */
.land-section { scroll-margin-top: 90px; }

.land-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.land-head h2 {
    position: relative;
    margin: 0;
    padding-left: 15px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
}

.land-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: linear-gradient(180deg, #e50914, #8e2de2);
}

.land-head a { color: var(--muted); font-size: 14px; font-weight: 600; }
.land-head a:hover { color: var(--accent); }

/* --- Landing search: movies + live TV channels, right above the trending
       strip. The box wears the same flowing gradient border as the topbar
       buttons (navflow slides the gradient, navglow cycles the glow). --- */
.land-search { position: relative; width: 100%; margin: 0 auto 30px; }

.land-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    /* Same gradient-border trick as .topnav a: a solid core painted on the
       padding-box with the moving gradient on the border-box behind the
       transparent border. */
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(120deg, #e50914, #ff6a00, #ff2e63, #8e2de2, #e50914) border-box;
    background-size: 100% 100%, 300% 100%;
    animation: navflow 6s ease infinite, navglow 6s linear infinite;
    transition: filter .15s ease;
}

.land-search-box:focus-within { filter: brightness(1.18); }

.land-search-box svg { flex: none; width: 18px; height: 18px; color: var(--muted); }

.land-search-box input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 15px;
    outline: none;
}

.searchbar input::placeholder,
.land-search-box input::placeholder { color: var(--muted); }

/* Results float over the poster strip below. */
.land-search-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 40;
    max-height: 420px;
    overflow-y: auto;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(15, 19, 25, .98);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}

.land-search-results[hidden] { display: none; }

.land-search-group {
    padding: 8px 10px 4px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.land-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--text);
    transition: background .15s ease;
}

.land-search-item:hover, .land-search-item.active { background: rgba(255, 255, 255, .07); }

.land-search-thumb {
    flex: none;
    width: 38px;
    height: 54px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-2);
}

.land-search-thumb.live { width: 38px; height: 38px; border-radius: 9px; }

.land-search-copy { flex: 1; min-width: 0; }

.land-search-name,
.land-search-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.land-search-name { font-size: 14px; font-weight: 600; }
.land-search-sub { font-size: 12px; color: var(--muted); }

.land-search-live {
    flex: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(229, 9, 20, .14);
    color: var(--accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.land-search-empty { padding: 14px 10px; color: var(--muted); font-size: 13.5px; }

/* Tile shown when a poster / logo is missing or fails to load. */
.land-search-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 54px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}

.land-search-fallback.live { width: 38px; height: 38px; border-radius: 9px; }

/* --- Trending movie posters --- */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px; }

.t-card { display: flex; flex-direction: column; gap: 7px; }

.t-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.t-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }

.t-card:hover .t-poster { border-color: rgba(229, 9, 20, .55); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.t-card:hover .t-poster img { transform: scale(1.06); }

.t-rating {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 7px;
    background: rgba(8, 11, 15, .66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffd34d;
    font-size: 11.5px;
    font-weight: 700;
}

.t-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.t-meta { color: var(--muted); font-size: 12px; }

/* --- Live TV categories + channel cloud --- */
.cat-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.cat-chips a {
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease;
}

.cat-chips a small { color: var(--accent); margin-left: 5px; font-size: 11px; font-weight: 700; }
.cat-chips a:hover { color: var(--text); border-color: rgba(229, 9, 20, .5); }

.chan-cloud { display: flex; gap: 8px; flex-wrap: wrap; }

.chan-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s ease, transform .15s ease, color .15s ease, background .15s ease;
}

.chan-chip:hover { border-color: rgba(229, 9, 20, .55); color: #fff; background: var(--surface-2); transform: translateY(-1px); }

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 7px rgba(229, 9, 20, .9);
}

/* --- Feature cards (clean hairline cards, SVG icons) --- */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }

.feat {
    padding: 24px 22px;
    border-radius: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color .2s ease, transform .2s ease;
}

.feat:hover { border-color: rgba(255, 255, 255, .22); transform: translateY(-3px); }

.feat-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    margin-bottom: 15px;
    color: #ff5a1f;
    background: linear-gradient(140deg, rgba(229, 9, 20, .14), rgba(142, 45, 226, .14));
    border: 1px solid rgba(255, 255, 255, .08);
}

.feat-icon svg { width: 22px; height: 22px; }
.feat h3 { margin: 0 0 7px; font-size: 16px; font-weight: 700; }
.feat p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* --- App download panel: copy left, vector phone mockup right --- */
.app-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
    padding: clamp(30px, 5vw, 54px);
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* Thin gradient hairline along the panel's top edge. */
.app-panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(229, 9, 20, .6), rgba(142, 45, 226, .6), transparent);
}

.app-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.app-copy h2 { margin: 0; font-size: clamp(23px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.4px; }
.app-copy p { margin: 0; color: var(--muted); max-width: 520px; font-size: 15px; line-height: 1.65; }

.app-phone {
    display: block;
    width: min(230px, 100%);
    margin: 0 auto;
    animation: floaty 9s ease-in-out infinite alternate;
}

/* --- iOS / Android store badges (pure SVG) --- */
.store-badges { display: flex; gap: 14px; flex-wrap: wrap; }

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 12px;
    background: #0d1117;
    border: 1px solid rgba(255, 255, 255, .16);
    transition: transform .18s ease, border-color .18s ease;
}

.store-badge:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .45); }
.store-badge .badge-icon { width: 26px; height: 26px; }

.store-badge-text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge-text small { font-size: 11px; color: var(--muted); }
.store-badge-text strong { font-size: 16px; font-weight: 700; color: var(--text); }

/* --- FAQ --- */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 18px; }

.faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--accent); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* --- Blog cards / pages --- */
.post-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }

.post-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.post-card:hover, .post-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .3);
}
.post-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.post-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.post-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.post-card:hover .post-cover img { transform: scale(1.04); }
.post-category {
    position: absolute;
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(11, 15, 20, .85);
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    overflow-wrap: anywhere;
}
.post-card-copy { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 22px; overflow-wrap: anywhere; }
.post-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }
.post-card-cta { color: var(--text); font-size: 12px; font-weight: 700; }
.post-card:hover .post-card-cta { color: var(--accent); }

.post-date {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-card h2, .post-card h3 { margin: 0; font-size: 20px; font-weight: 750; line-height: 1.4; }
.post-card p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.post-read { color: var(--muted); font-size: 12px; margin-top: auto; }

.blog-page { padding: 18px 0; }
.blog-head {
    margin-bottom: 32px;
    padding: clamp(24px, 5vw, 48px);
    border: 1px solid var(--border);
    border-radius: 22px;
    background: radial-gradient(ellipse at top right, rgba(142, 45, 226, .16), transparent 65%), var(--surface);
}
.blog-eyebrow { display: block; margin-bottom: 12px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.blog-head h1 { margin: 0 0 12px; font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -1px; }
.blog-head p { margin: 0; max-width: 660px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.blog-list > .empty { grid-column: 1 / -1; }

.post-page { max-width: 860px; margin: 16px auto 0; overflow-wrap: anywhere; }
.post-cover-hero { margin-bottom: 28px; border: 1px solid var(--border); border-radius: 18px; }
.post-back { display: inline-block; margin-bottom: 20px; color: var(--muted); font-size: 13px; }
.post-back:hover { color: var(--text); }
.post-header .post-read { display: block; margin-top: 16px; }

.post-header { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.post-header h1 { margin: 8px 0 0; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; font-weight: 800; }

.post-body { font-size: 15.5px; line-height: 1.75; color: #cfd8e3; }
.post-body h2 { margin: 30px 0 12px; font-size: 21px; color: var(--text); }
.post-body h3 { margin: 22px 0 10px; font-size: 17px; color: var(--text); }
.post-body p { margin: 0 0 14px; }
.post-body img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.post-body pre { max-width: 100%; overflow-x: auto; }
.post-body ul, .post-body ol { margin: 0 0 16px; padding-left: 22px; }
.post-body li { margin-bottom: 8px; }
.post-body a { color: #ff6a00; font-weight: 600; }
.post-body a:hover { color: var(--accent); }

.post-nav { margin-top: 28px; }

.information-page { padding-bottom: 24px; }
.information-links { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; }
.information-links a[aria-current="page"], .information-links a:hover { color: var(--accent); }
.information-links a:focus-visible, .foot-col a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.contact-panel { margin-top: 28px; padding: clamp(18px, 4vw, 30px); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.contact-panel h2 { margin-top: 0; }
.contact-panel textarea { width: 100%; resize: vertical; padding: 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.contact-panel textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.contact-error { color: var(--accent); margin: 0; font-size: 13px; }
.contact-note { color: var(--muted); font-size: 13px; line-height: 1.7; }
.contact-note a { color: var(--text); text-decoration: underline; }

/* --- Site footer --- */
.site-footer { margin-top: 30px; border-top: 1px solid var(--border); background: #080c10; }

.foot-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 30px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 30px;
}

.foot-brand .brand { font-size: 22px; }
.foot-brand p { margin: 12px 0 18px; max-width: 340px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.foot-col h3 { margin: 4px 0 12px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.4px; }
.foot-col a { display: block; padding: 5px 0; font-size: 14px; opacity: .85; }
.foot-col a:hover { color: var(--accent); opacity: 1; }

.foot-bottom { border-top: 1px solid var(--border); }
.foot-bottom p { max-width: 1200px; margin: 0 auto; padding: 16px 20px; color: var(--muted); font-size: 12.5px; }

/* --- Landing responsive + motion guards --- */
@media (max-width: 900px) {
    .app-panel { grid-template-columns: 1fr; }
    .app-phone { width: min(190px, 70%); }
}

@media (max-width: 720px) {
    .foot-inner { grid-template-columns: 1fr 1fr; gap: 22px; }
    .land-hero { padding-top: 54px; }
    .hero-ring, .land-hero-dots { display: none; }
    .hero-play { width: 88px; height: 88px; right: 5%; bottom: 8%; opacity: .7; }
    .hero-glow { width: 520px; height: 520px; margin-left: -260px; top: -250px; }
}

/* Visitors who disable animations still get a static gradient. */
@media (prefers-reduced-motion: reduce) {
    .topnav a, .mobile-nav summary, .mobile-nav-panel a, .channel-category-select,
    .topbar-download, .land-search-box, .searchbar input { animation: none; }
    .hero-glow, .hero-ring, .hero-play, .hero-beam,
    .grad-text, .btn-grad, .app-phone { animation: none; }
    .post-card, .post-cover img { transition: none; }
    .post-card:hover, .post-card:focus-visible, .post-card:hover .post-cover img { transform: none; }
}

/* ------------------------------------------------------------------
   Landing CMS additions.

   The build this stylesheet came from drew a two-tone text brand only;
   these support what the panel can switch on from the Landing Page CMS
   (an uploaded logo in place of the wordmark).
   ------------------------------------------------------------------ */
.brand-logo { display: block; height: 40px; width: auto; }
.foot-brand .brand-logo { height: 44px; }
@media (max-width: 480px) { .topbar .brand-logo { height: 32px; } }

/* Public accounts, playback prompt and offline-app dialog. */
.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.topbar-right .topbar-download { margin-left: 0; }
.topbar-signin { padding: 7px 15px; border-radius: 9px; font-size: 13.5px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid var(--border); }
.topbar-profile { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(120deg,#e50914,#8e2de2); color: #fff; font-weight: 800; }
.avatar-lg { width: 58px; height: 58px; font-size: 24px; }
.flash { margin: 0 0 18px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
html.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden], .auth-pane.hidden { display: none; }
.modal-veil { position: absolute; inset: 0; background: rgba(4,6,9,.74); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(440px,100%); max-height: 88vh; overflow-y: auto; padding: 34px 26px 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 26px 70px rgba(0,0,0,.6); }
.modal-x { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.06); color: var(--text); font-size: 22px; cursor: pointer; }
.modal-title { margin: 4px 0 8px; font-size: 21px; }
.modal-sub, .prof-sub { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.auth-alert, .auth-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 9px; background: rgba(229,9,20,.12); border: 1px solid rgba(229,9,20,.45); font-size: 13px; }
.auth-tabs { display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: var(--surface-2); margin-bottom: 16px; }
.auth-tab { flex: 1; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13.5px; font-weight: 700; cursor: pointer; }
.auth-tab.active { background: var(--surface); color: var(--text); }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.field input { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px; font-family: inherit; }
/* Hide the browser's own password-reveal and autofill icons so only our
   custom eye toggle is visible — Edge shows ::-ms-reveal, Chrome adds a
   key icon on autofilled password fields. */
.field-input-wrap input[type="password"]::-ms-reveal,
.field-input-wrap input[type="password"]::-ms-clear,
.field-input-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
.field-input-wrap input[type="password"]::-webkit-contacts-auto-fill-button { display: none; width: 0; height: 0; }
.auth-widget .field input::placeholder { color: var(--muted); opacity: 1; font-size: 14px; }
.field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.auth-pw-toggle:hover { color: var(--text); background: rgba(255,255,255,.06); }
/* Only one eye icon is visible at a time: closed-eye is hidden by default,
   and flips when the button gets .password-visible. */
.auth-pw-toggle .eye-closed { display: none; }
.auth-pw-toggle.password-visible .eye-open { display: none; }
.auth-pw-toggle.password-visible .eye-closed { display: inline; }
.field-input-wrap { position: relative; display: flex; align-items: center; }
.field-input-wrap input { padding-right: 40px; }
.auth-submit { justify-content: center; width: 100%; padding: 12px 22px; font-size: 15px; }
.auth-forgot { display: flex; justify-content: flex-end; margin: -4px 0 0; }
.auth-forgot .auth-link { display: inline-flex; align-items: center; min-height: 24px; }
.auth-login-action { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid transparent; border-radius: 11px; font-family: inherit; font-weight: 700; line-height: 1.4; text-align: center; cursor: pointer; }
.auth-form .auth-login-action { min-height: 48px; }
.auth-login-action > span { grid-column: 2; min-width: 0; }
.auth-login-action > svg { grid-column: 1; grid-row: 1; width: 20px; height: 20px; }
.auth-create { background: transparent; border-color: #fff; color: #fff; transition: background-color .18s ease; }
.auth-create:hover { background-color: rgba(255, 255, 255, .08); }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 4px 0; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-signup-hint { margin: 0; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.45; }
.auth-benefits li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.auth-benefits svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent-purple); }
.auth-benefits .auth-benefit-featured svg { color: var(--accent); }
.auth-benefits span { max-width: 110px; overflow-wrap: anywhere; }
.auth-alt { margin: 2px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.auth-link { background: none; border: 0; padding: 0; color: #ff6b73; font-size: 13px; font-weight: 700; cursor: pointer; }
.auth-page { max-width: 460px; margin: 30px auto; padding: 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); }
.auth-page h1 { margin: 0 0 12px; font-size: 24px; }
/* The heading overlaps the final 30% of the decorative play icon. */
.auth-heading { --auth-play-size: 64px; position: relative; isolation: isolate; display: flex; align-items: center; min-height: var(--auth-play-size); padding-left: calc(var(--auth-play-size) * .7); margin-bottom: 12px; }
.auth-heading-play {
    --auth-play-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='29' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M26 21L44 32L26 43Z' fill='white' stroke='white' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: absolute; top: 0; left: 0; z-index: 0;
    width: var(--auth-play-size); height: var(--auth-play-size); pointer-events: none;
    background: var(--brand-gradient); background-size: 250% 100%; animation: gradshift 9s ease infinite;
    -webkit-mask: var(--auth-play-mask) center / contain no-repeat;
    mask: var(--auth-play-mask) center / contain no-repeat;
}
.auth-heading > h1, .auth-heading > .modal-title { position: relative; z-index: 1; margin: 0; text-shadow: 0 1px 8px var(--surface); }
@media (prefers-reduced-motion: reduce) { .auth-heading-play { animation: none; } }
.locked { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 260px; aspect-ratio: 16/9; border-radius: 12px; border: 1px solid var(--border); text-align: center; padding: 24px; background: radial-gradient(ellipse at 50% 35%,rgba(229,9,20,.16),transparent 62%),var(--bg); }
.locked h2, .locked p { margin: 0; }
.locked p { color: var(--muted); max-width: 430px; }
.locked-actions, .movie-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.locked-actions { justify-content: center; }
.locked-actions a, .movie-actions a, .prof-card .btn-grad { padding: 11px 22px; font-size: 14px; }
.profile { max-width: 860px; margin: 0 auto; }
.prof-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 6px 0 22px; }
.prof-head h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
/* Sign out lives here (not in the topbar): red, beside the member's name. */
.prof-signout-form { margin-left: auto; }
.prof-signout { padding: 10px 20px; border-radius: 9px; border: 1px solid rgba(229,9,20,.55); background: rgba(229,9,20,.12); color: #ff6b73; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.prof-signout:hover { background: rgba(229,9,20,.22); border-color: rgba(229,9,20,.8); }
.prof-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.prof-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; margin-bottom: 16px; }
.prof-card h2 { margin: 0 0 12px; font-size: 17px; }
.prof-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.prof-facts { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.prof-facts > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.prof-facts dt { color: var(--muted); }
.prof-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.prof-form { max-width: 400px; }
.prof-clear { padding: 7px 14px; border-radius: 8px; border: 1px solid rgba(229,9,20,.5); background: rgba(229,9,20,.1); color: #ff6b73; cursor: pointer; }
.hist-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hist-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface-2); }
.hist-link > span { min-width: 0; }
.hist-art { flex: 0 0 54px; width: 54px; height: 74px; border-radius: 8px; object-fit: cover; }
.hist-title { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.hist-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .topbar .tagline { display: none; } }
@media (max-width: 640px) {
    .topbar { flex-wrap: wrap; }
    .topnav { order: 3; width: 100%; justify-content: center; }
    .prof-grid, .hist-list { grid-template-columns: 1fr; }
    .modal-card, .auth-page { padding: 34px 18px 22px; }
    .topbar-right { gap: 8px; }
    .topbar-signin { padding: 7px 10px; }
}

/* Responsive shared shell: intrinsic widths may shrink without clipping text. */
:root { --page-gutter: clamp(12px, 3vw, 20px); }
html { scroll-padding-top: 140px; }
main, .topbar, .foot-inner, .foot-bottom p, .hero-inner, .land-hero,
.backdrop-band .movie-info {
    padding-left: max(var(--page-gutter), env(safe-area-inset-left));
    padding-right: max(var(--page-gutter), env(safe-area-inset-right));
}
main { min-width: 0; }
.topbar { flex-wrap: wrap; }
.topbar > .brand { min-width: 0; max-width: 240px; overflow-wrap: anywhere; }
.brand-logo { max-width: 100%; object-fit: contain; object-position: left center; }
.topbar-right { flex-shrink: 0; }
.topnav { flex-wrap: wrap; }
.topnav a, .topbar-signin, .topbar-profile, .topbar-download {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.topbar-download { min-width: 44px; }
.tagline { flex: 1; min-width: 0; }
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.movie-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.trend-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); }
.feat-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid > *, .movie-grid > *, .trend-grid > *, .feat-grid > *, .foot-inner > *,
.app-panel > *, .prof-grid > *, .hist-list > *, .hero-copy { min-width: 0; }
.watch-title, .hero-title, .land-title, .land-sub, .land-eyebrow, .land-head,
.app-copy, .foot-brand, .foot-col, .genre-chip, .facts, .desc, .prof-head > *,
.blog-head, .flash, .auth-alert, .auth-notice, .modal-title, .modal-sub { overflow-wrap: anywhere; }
.servers { flex-wrap: wrap; justify-content: center; }
.server-btn { flex: 0 0 auto; }
.searchbar input, .land-search-box input, .share-text { min-width: 0; font-size: 16px; }
.store-badges, .store-badge { max-width: 100%; }
.store-badge { min-width: 0; }
.store-badge .badge-icon { flex-shrink: 0; }
.store-badge-text { min-width: 0; overflow-wrap: anywhere; }
.prof-card-head, .post-card-footer { flex-wrap: wrap; }
.prof-facts dd { min-width: 0; }
.post-body iframe, .post-body video { max-width: 100%; }
.post-body table { display: block; max-width: 100%; overflow-x: auto; }
.foot-inner { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.foot-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* All slides contribute their content height: long titles and zoom cannot
   push the actions outside a fixed-height, clipped banner. */
.hero { display: grid; height: auto; min-height: clamp(420px, 58vh, 560px); }
.hero-slide { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.hero-slide.active { visibility: visible; }
.hero-inner { min-height: inherit; padding-top: 36px; }
.hero-copy { padding-bottom: 64px; }
.hero-dots { width: max-content; max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; gap: 2px; bottom: 8px; }
.hero-dot { width: 28px; height: 28px; border: 11px solid transparent; background-clip: padding-box; }
.hero-dot.active { width: 36px; height: 25px; border-radius: 999px; align-self: center; }

/* Touch controls and player menus remain reachable inside short players. */
.btn, .btn-grad, .btn-ghost, .hero-btn, .server-btn, .season-tab, .episode,
.auth-tab, .prof-signout, .prof-clear { min-height: 44px; }
.episode { height: auto; padding-block: 8px; }
.quality { height: calc(100% - 20px); pointer-events: none; }
.quality-btn, .quality-menu { pointer-events: auto; }
.quality-btn { width: 44px; height: 44px; }
.quality.caption { right: 64px; }
.quality-menu { top: 50px; max-height: calc(100% - 90px); max-width: min(220px, calc(100vw - 100px)); overflow-y: auto; overscroll-behavior: contain; }
.quality-menu button { min-height: 44px; overflow-wrap: anywhere; }
.player.idle .quality-btn, .player.idle .quality-menu { pointer-events: none; }
.player-corner-logo.pos-top-right { top: 62px; }
:where(a, button, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The header logo is the control people tap and click constantly to jump
   home, so it stays clean: no focus ring after a click and no touch
   tap-highlight flash on it. The nav buttons keep their keyboard ring. */
.topbar .brand:focus, .topbar .brand:focus-visible { outline: none; }
.topbar .brand { -webkit-tap-highlight-color: transparent; }

/* Dynamic viewport units account for browser chrome and resizing keyboards. */
.modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.modal-card { max-height: calc(100vh - 24px); max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); overscroll-behavior: contain; padding-top: 54px; }
.modal-x { width: 44px; height: 44px; }

/* One-tap name/link copying, with manual selection only if copying is blocked. */
.content-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; max-width: 100%; }
.content-share button { min-height: 44px; }
.share-status { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.share-status:empty { display: none; }
.share-text { width: 100%; resize: vertical; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; background: var(--bg); color: var(--text); }
.channel-link { display: block; min-width: 0; flex: 1; }
.channel-card .content-share { padding: 0 12px 12px; margin: 0; }
.channel-card .content-share button { width: 100%; }
.chan-chip-group { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.chan-chip-group .content-share { margin: 0; }
.chan-chip { max-width: 100%; overflow-wrap: anywhere; }

/* Phone navigation is anchored to its own right-side toggle, not the page. */
.mobile-nav { display: none; position: relative; margin-left: auto; flex-shrink: 0; }
.mobile-nav summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; list-style: none; cursor: pointer; border-radius: 10px; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary::marker { content: ''; }
.mobile-nav-panel { display: grid; gap: 8px; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 240px; max-width: calc(100vw - 24px); max-height: min(420px, calc(100dvh - 90px)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.mobile-nav-panel a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border-radius: 8px; overflow-wrap: anywhere; }

@media (max-width: 1024px) {
    .topbar { flex-wrap: nowrap; gap: 10px; }
    .topbar > .brand { flex: 1; max-width: none; }
    .topbar > .topnav, .topbar > .topbar-right { display: none; }
    .mobile-nav { display: block; }
}
@media (max-width: 900px) {
    .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .land-section, .backdrop-band, .drama-block { scroll-margin-top: 140px; }
}
@media (max-width: 640px) {
    .landing { gap: 36px; }
    .foot-brand { grid-column: 1 / -1; }
    .hero { min-height: 380px; }
    .hero-copy { padding-bottom: 54px; }
    .app-panel { padding: 24px 18px; }
    .locked { aspect-ratio: auto; min-height: 240px; padding: 24px 16px; }
    .prof-facts > div { flex-wrap: wrap; gap: 4px 12px; }
    .prof-facts dd { text-align: left; }
    .watch-title { font-size: clamp(22px, 6vw, 28px); }
    /* Two channel cards per row on phones — the default 170px min is too
       wide for viewports under 640px, so shrink the card floor. */
    .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
}
@media (max-width: 380px) {
    .foot-inner { grid-template-columns: minmax(0, 1fr); }
    .hero-actions > a, .land-cta > a { width: 100%; justify-content: center; }
    .topbar-right { gap: 6px; }
    .prof-card { padding: 18px 14px; }
    /* Guarantee two channel cards per row even on the narrowest phones.
       At 320px minus gutters (296px) two 120px cards + 14px gap fit. */
    .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .topbar { position: static; }
    .modal-card { padding-top: 54px; }
}
@media (pointer: coarse) {
    .foot-col a { min-height: 44px; display: flex; align-items: center; }
    .card:hover, .movie-card:hover { transform: none; }
}

/* ---- Verification modal: step indicator, OTP inputs, panes ---- */
.verify-steps { display: flex; gap: 10px; margin: 0 0 18px; }
.verify-step { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
.verify-step.active { background: rgba(229,9,20,.12); border-color: rgba(229,9,20,.5); color: var(--text); }
.verify-step.done { background: rgba(0,200,81,.1); border-color: rgba(0,200,81,.4); color: #4ade80; }
.verify-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.08); }
.verify-step.active .verify-step-num { background: var(--accent); color: #fff; }
.verify-step.done .verify-step-num { background: #22c55e; color: #fff; }

.verify-pane { margin: 0; }
.verify-pane.hidden { display: none; }
.verify-dest { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }

.verify-channel-select { display: flex; gap: 8px; margin: 0 0 14px; }
.verify-channel-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.verify-channel-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
.verify-channel-btn.active { background: rgba(229,9,20,.1); border-color: rgba(229,9,20,.5); color: var(--text); font-weight: 700; }
.verify-channel-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.otp-inputs { display: flex; gap: 8px; justify-content: center; margin: 0 0 18px; }
.otp-digit { width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 700; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); outline: none; transition: border-color .15s; }
.otp-digit:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(229,9,20,.25); }

.verify-actions { margin: 0 0 10px; }
.verify-resend { text-align: center; font-size: 13px; color: var(--muted); min-height: 24px; }
.verify-resend [data-verify-resend-info] { margin-right: 4px; }
.verify-edit-phone { text-align: center; margin: 8px 0 0; font-size: 13px; }
.verify-edit-phone button { background: none; border: none; color: var(--accent, #60a5fa); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.verify-edit-phone button:hover { opacity: .8; }

.verify-back-to-reg { text-align: center; margin: 12px 0 0; }
.verify-back-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.verify-back-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: var(--text); }
.verify-back-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.verify-done-icon { width: 56px; height: 56px; margin: 12px auto 14px; border-radius: 50%; background: rgba(0,200,81,.15); border: 2px solid rgba(0,200,81,.5); display: flex; align-items: center; justify-content: center; font-size: 28px; color: #4ade80; }
.verify-done-text { text-align: center; font-size: 14px; margin: 0 0 16px; color: var(--text); }

/* Honeypot link (anti-scraper): off-screen, unclickable and invisible to
   people and screen readers, but still a plain <a href> in the markup for
   anything that harvests links. Following it bans the visitor; see
   App\Http\Controllers\TrapController. */
.bot-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }