/* Miruro title pages (routes anime.show, watch, watch.episode; loaded after miruro.css).
   Parity pass against the reference /info + /watch pages at 1440 / 1280 / 1024 / 768 / 390.
   Sections: 1 tokens · 2 ambient artwork · 3 shared comment card · 4 watch page.
   Shell-owned pieces touched here are scoped to title pages only (body.mr-has-ambient /
   #watch-main) and listed in the report. */

/* ============ 1. tokens (reference palette, dark; light maps onto the shell tokens) ============ */
body.hs.mr {
    --t-fg: #EEEEF0; --t-fg-80: rgba(238, 238, 240, .8); --t-mfg: #B5B2BC;
    --t-bg: #121113; --t-bg-80: rgba(18, 17, 19, .8);
    --t-muted: #232225; --t-muted-50: rgba(35, 34, 37, .5); --t-muted-65: rgba(35, 34, 37, .65); --t-muted-70: rgba(35, 34, 37, .7);
    --t-card: #1A191B; --t-card-40: rgba(26, 25, 27, .4);
    --t-border: #49474E; --t-border-40: rgba(73, 71, 78, .4); --t-border-45: rgba(73, 71, 78, .45); --t-border-50: rgba(73, 71, 78, .5); --t-border-60: rgba(73, 71, 78, .6);
    --t-input-30: rgba(73, 71, 78, .3); --t-input-50: rgba(73, 71, 78, .5);
    --t-popover: #1D1C1F; --t-accent-bg: #2E2D31;
    --t-primary: #FFFFFF; --t-primary-h: #E7E7EA; --t-primary-fg: #000000;
    --t-ac: var(--hs-ac); --t-ac-soft: color-mix(in oklab, var(--hs-ac) 12%, transparent); --t-ac-fg: #121113;
    --t-green: oklch(.723 .219 149.579); --t-live: #55AA7C;
}
html[data-theme="light"] body.hs.mr {
    --t-fg: var(--hs-tx); --t-fg-80: color-mix(in oklab, var(--hs-tx) 80%, transparent); --t-mfg: var(--hs-tx-3);
    --t-bg: var(--hs-bg); --t-bg-80: color-mix(in oklab, var(--hs-bg) 85%, transparent);
    --t-muted: var(--hs-bg-3); --t-muted-50: color-mix(in oklab, var(--hs-bg-3) 70%, transparent); --t-muted-65: color-mix(in oklab, var(--hs-bg-2) 92%, transparent); --t-muted-70: var(--hs-bg-3);
    --t-card: var(--hs-bg-2); --t-card-40: color-mix(in oklab, var(--hs-bg-2) 70%, transparent);
    --t-border: var(--hs-line-2); --t-border-40: var(--hs-line); --t-border-45: var(--hs-line); --t-border-50: var(--hs-line); --t-border-60: var(--hs-line-2);
    --t-input-30: color-mix(in oklab, var(--hs-bg-2) 70%, transparent); --t-input-50: var(--hs-hover);
    --t-popover: var(--hs-bg-2); --t-accent-bg: var(--hs-hover);
    --t-primary: #09090B; --t-primary-h: #27272A; --t-primary-fg: #FFFFFF; --t-ac-fg: #FFFFFF;
    --t-green: #16A34A; --t-live: #15803D;
}

/* ============ 2. ambient artwork (fixed, 576px; 460px under 900px; 24px blur, 55% veil, bottom 2/3 fade) ============ */
body.mr-has-ambient .mr-ambient { position: fixed; top: 0; left: 0; right: 0; height: 576px; -webkit-mask-image: none; mask-image: none; }
body.mr-has-ambient .mr-ambient-img { opacity: 1; filter: blur(24px); transform: scale(1.1); object-position: center; }
body.mr-has-ambient .mr-ambient-veil { background: linear-gradient(to bottom, transparent 33.333%, var(--t-bg) 100%), linear-gradient(rgba(18, 17, 19, .55), rgba(18, 17, 19, .55)); }
html[data-theme="light"] body.mr-has-ambient .mr-ambient-img { opacity: .5; }
html[data-theme="light"] body.mr-has-ambient .mr-ambient-veil { background: linear-gradient(to bottom, transparent 33.333%, var(--hs-bg) 100%), linear-gradient(rgba(250, 250, 250, .55), rgba(250, 250, 250, .55)); }
@media (max-width: 899px) { body.mr-has-ambient .mr-ambient { height: 460px; } }

/* ============ 3. comment card (watch + anime page) ============ */
/* comments.css forces .block_area-comment transparent / unpadded with !important, so these must be !important too */
#watch-main .mr-cm.block_area-comment {
    padding: 12px 16px !important; border: 0 !important; border-radius: 10px !important; background: var(--t-muted-50) !important; box-shadow: none !important;
    --cm-body: var(--t-card); --cm-text: var(--t-fg); --cm-mute: var(--t-mfg); --cm-mute-2: color-mix(in oklab, var(--t-mfg) 75%, transparent);
    --cm-line: var(--t-border-50); --cm-line-strong: var(--t-border); --cm-soft: rgba(73, 71, 78, .25); --cm-soft-hov: rgba(73, 71, 78, .4); --cm-acc: var(--t-ac); --cm-acc2: var(--t-ac);
}
#watch-main .mr-cm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#watch-main .mr-cm-tl { line-height: 20px; min-width: 0; }
#watch-main .mr-cm-k { margin: 0; font: 600 14px/20px var(--hs-f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--t-mfg); }
#watch-main .mr-cm-t { margin: 0; font: 600 18px/28px var(--hs-f-head); letter-spacing: 0; color: var(--t-fg); }
#watch-main .mr-cm-tabs { display: flex; gap: 6px; }
#watch-main .mr-cm-tab {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 8px 16px; border-radius: 7px;
    font: 600 14px/20px var(--hs-f-body); color: var(--t-mfg); background: var(--t-muted); text-decoration: none; white-space: nowrap;
}
#watch-main a.mr-cm-tab:hover { color: var(--t-fg); }
#watch-main .mr-cm-tab.is-on { color: var(--t-ac); background: color-mix(in oklab, var(--t-ac) 10%, transparent); }
#watch-main .mr-cm .cm-reactions { margin: 12px 0 0; }
#watch-main .mr-cm #content-comments { margin-top: 12px; }

/* ============ 4. watch page (reference /watch) ============
   >= 1200: [player | 368px episode panel (same height)] then [main column | side lists].
   < 1200: one column; .mr-w-main / .mr-w-side become display:contents and their children are ordered.
   < 1000: no content padding, full-bleed player, 14px side gutters, smaller now-playing title.
   < 768: player sticks under the top bar, prev | Episodes | next row, episode panel = bottom sheet,
   comment card collapses to a "Comment…" peek above the anime card. */
body.hs.mr #watch-main.mr-w { max-width: 1800px; margin: 0 auto; padding: 0; background: none; }
#watch-main.mr-w .mr-w-content { position: relative; z-index: 1; padding: 16px; }
#watch-main.mr-w .mr-w-layout {
    display: grid; gap: 16px; align-items: start;
    grid-template-columns: minmax(0, 1fr) 368px;
    grid-template-areas: "player eps" "main side";
}
#watch-main.mr-w .mr-w-player { grid-area: player; min-width: 0; }
#watch-main.mr-w .mr-w-eps { grid-area: eps; }
#watch-main.mr-w .mr-w-main { grid-area: main; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#watch-main.mr-w .mr-w-side { grid-area: side; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#watch-main.mr-w .mr-w-main > :empty, #watch-main.mr-w .mr-w-side > :empty { display: none; }
#watch-main.mr-w .mr-w-scrim, #watch-main.mr-w .mr-w-eps-x, #watch-main.mr-w .mr-w-nav { display: none; }

/* player */
body.mr #watch-main.mr-w #player-wrapper { margin: 0; border-radius: 10px; box-shadow: none; background: #000; }
body.mr #watch-main.mr-w #w-player #player { border-radius: 0; background-color: #0B0A0C; }
body.mr #watch-main.mr-w #player::before { background: rgba(18, 17, 19, .55); }

/* now playing row */
#watch-main.mr-w .mr-w-now { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#watch-main.mr-w .mr-w-now-tx { flex: 1 1 260px; min-width: 0; }
#watch-main.mr-w .mr-w-now-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 4px; font: 500 12px/16px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-w-now-m [hidden] { display: none; }
#watch-main.mr-w .mr-w-now-t {
    margin: 0; font: 750 20px/27.5px var(--hs-f-head); letter-spacing: -0.025em; color: var(--t-fg);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-transform: none;
}
#watch-main.mr-w .mr-w-ctl { display: flex; align-items: center; gap: 6px; flex: none; }
#watch-main.mr-w #w-servers.mr-sv-box { display: contents; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
#watch-main.mr-w .mr-sv { display: flex; align-items: center; gap: 6px; }
#watch-main.mr-w .mr-sv-empty { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border: 1px dashed var(--t-border); border-radius: 8px; font: 500 12px/16px var(--hs-f-body); color: var(--t-mfg); }

/* dropdown buttons + menus (audio, server, player options, episode filter) */
#watch-main.mr-w .mr-dd { position: relative; }
#watch-main.mr-w .mr-dd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 100px; margin: 0; padding: 0 12px;
    border: 1px solid var(--t-border); border-radius: 8px; background: transparent; color: var(--t-fg);
    font: 600 12px/16px var(--hs-f-body); white-space: nowrap; cursor: pointer; transition: background .15s;
}
#watch-main.mr-w .mr-dd-btn:hover, #watch-main.mr-w .mr-dd.is-open > .mr-dd-btn { background: var(--t-input-30); }
#watch-main.mr-w .mr-dd-btn:focus-visible { outline: 2px solid var(--t-ac); outline-offset: 1px; }
#watch-main.mr-w .mr-dd-btn .mr-dd-ic { display: inline-flex; flex: none; color: var(--t-fg); }
#watch-main.mr-w .mr-dd-btn .mr-dd-ic svg, #watch-main.mr-w .mr-dd-btn svg.mr-dd-ic { width: 14px; height: 14px; }
#watch-main.mr-w .mr-dd-btn .hs-li { color: currentColor; }
#watch-main.mr-w .mr-dd-v { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
#watch-main.mr-w .mr-dd-chev { flex: none; width: 14px; height: 14px; color: var(--t-mfg); transition: transform .15s; }
#watch-main.mr-w .mr-dd.is-open .mr-dd-chev { transform: rotate(180deg); }
#watch-main.mr-w .mr-kb-btn { width: 40px; min-width: 40px; padding: 0; }
#watch-main.mr-w .mr-dd-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 100%; max-height: min(70vh, 420px); overflow-y: auto;
    padding: 4px; border: 1px solid var(--t-border); border-radius: 7px; background: var(--t-muted-65);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55); text-align: left;
}
#watch-main.mr-w .mr-dd-menu--end { left: auto; right: 0; }
#watch-main.mr-w .mr-dd.is-open > .mr-dd-menu { display: block; animation: mr-t-pop .12s ease-out; }
#watch-main.mr-w .mr-dd.is-up > .mr-dd-menu { top: auto; bottom: calc(100% + 6px); }
@keyframes mr-t-pop { from { opacity: 0; transform: translateY(-4px); } }
#watch-main.mr-w .mr-dd-k { margin: 0; padding: 6px 8px; font: 600 10px/16px var(--hs-f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--t-mfg); }
#watch-main.mr-w .mr-dd-note { margin: 4px 0 0; padding: 6px 8px 4px; border-top: 1px solid var(--t-border-50); font: 400 11px/16px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-sv-lang .mr-dd-menu { min-width: 160px; }
#watch-main.mr-w .mr-dd-menu--srv { min-width: 222px; left: auto; right: 0; }

/* audio items (watch-servers.js [data-hs-tab] / .is-on) */
#watch-main.mr-w .mr-sv .hs-sv-tabs { display: flex; flex-direction: column; align-items: stretch; gap: 1px; }
#watch-main.mr-w .mr-sv .hs-sv-tab {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px;
    background: none; color: var(--t-fg); font: 500 14px/20px var(--hs-f-body); letter-spacing: 0; text-transform: none; text-align: left; cursor: pointer;
}
#watch-main.mr-w .mr-sv .hs-sv-tab::after { display: none; }
#watch-main.mr-w .mr-sv .hs-sv-tab span { flex: 1; }
#watch-main.mr-w .mr-sv .hs-sv-tab em { font: 600 10px/16px var(--hs-f-body); font-style: normal; padding: 0 6px; border-radius: 6px; background: var(--t-muted); color: var(--t-mfg); }
#watch-main.mr-w .mr-sv .hs-sv-tab:hover { background: var(--t-accent-bg); }
#watch-main.mr-w .mr-sv .hs-sv-tab.is-on { color: var(--t-ac); }
#watch-main.mr-w .mr-sv .hs-sv-tab.is-on em { background: var(--t-ac-soft); color: var(--t-ac); }

/* server items: main.js .servers .type li (name only; ping from data-hs-meta) */
#watch-main.mr-w .mr-sv .servers { display: block; padding: 0; }
#watch-main.mr-w .mr-sv .type { display: block; padding: 0; }
#watch-main.mr-w .mr-sv .type.is-off { display: none; }
#watch-main.mr-w .mr-sv .hs-sv-strip { display: block; }
#watch-main.mr-w .mr-sv .type ul { display: flex; flex-direction: column; gap: 1px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
#watch-main.mr-w .mr-sv .type li {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; margin: 0; padding: 6px 8px 6px 32px; border: 0; border-radius: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B2BC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13.5H12L11 22l8.5-11.5H12z'/%3E%3C/svg%3E") 8px 50% / 16px no-repeat;
    color: var(--t-fg); font: 500 14px/20px var(--hs-f-body); cursor: pointer;
}
#watch-main.mr-w .mr-sv .type li:hover { background-color: var(--t-accent-bg); border: 0; }
#watch-main.mr-w .mr-sv .type li.active {
    padding-right: 28px; border: 0; color: var(--t-ac);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BAA7FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4.5 13.5H12L11 22l8.5-11.5H12z'/%3E%3C/svg%3E") 8px 50% / 16px no-repeat,
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EEEEF0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") right 8px center / 14px no-repeat;
}
#watch-main.mr-w .mr-sv .type li[data-hs-meta]::after { margin-left: auto; padding: 0 0 0 10px; font: 600 10px/16px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-sv .type li.active[data-hs-meta]::after { color: var(--t-mfg); --dot: var(--sv-ok); }
#watch-main.mr-w .mr-sv .type li.active[data-hs-sig="2"]::after { --dot: var(--sv-warn); }
#watch-main.mr-w .mr-sv .type li.active[data-hs-sig="1"]::after { --dot: var(--sv-bad); }
#watch-main.mr-w .mr-sv .mapper-dl-row { margin-top: 4px; padding: 6px 8px; border-top: 1px solid var(--t-border-50); }

/* player options (kebab) menu: main.js #controls .ctrl rows */
#watch-main.mr-w .mr-kb-menu { min-width: 220px; }
#watch-main.mr-w .mr-ctrls { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
#watch-main.mr-w .mr-ctrls .left, #watch-main.mr-w .mr-ctrls .right { display: flex; flex-direction: column; align-items: stretch; gap: 1px; margin: 0; }
#watch-main.mr-w .mr-ctrls .left::after { content: ""; display: block; width: auto; height: 1px; margin: 4px 0; background: var(--t-border-50); }
#watch-main.mr-w .mr-ctrls .ctrl {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; padding: 6px 8px; border-radius: 6px;
    color: var(--t-fg); font: 500 14px/20px var(--hs-f-body); text-decoration: none; white-space: nowrap; cursor: pointer;
}
#watch-main.mr-w .mr-ctrls .ctrl:hover { background: var(--t-accent-bg); color: var(--t-fg); }
#watch-main.mr-w .mr-ctrls .ctrl svg { flex: none; width: 16px; height: 16px; color: var(--t-mfg); }
#watch-main.mr-w .mr-ctrls .ctrl .lb { display: inline; }
#watch-main.mr-w .mr-ctrls .ctrl.report { color: #F2555A; }
#watch-main.mr-w .mr-ctrls .ctrl.report svg { color: currentColor; }
#watch-main.mr-w .mr-ctrls .ctrl.check { justify-content: space-between; }
#watch-main.mr-w .mr-ctrls .ctrl .sw { order: 2; width: 32px; height: 18px; border-radius: 9px; background: var(--t-muted); box-shadow: inset 0 0 0 1px var(--t-border); }
#watch-main.mr-w .mr-ctrls .ctrl .sw::after { top: 3px; left: 3px; width: 12px; height: 12px; background: var(--t-mfg); }
#watch-main.mr-w .mr-ctrls .ctrl .sw.on { background: var(--t-ac); box-shadow: none; }
#watch-main.mr-w .mr-ctrls .ctrl .sw.on::after { transform: translateX(14px); background: var(--t-ac-fg); }

/* phones: prev | Episodes | next */
#watch-main.mr-w .mr-w-nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(73, 71, 78, .7); border-radius: 8px; }
#watch-main.mr-w .mr-w-nav button {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin: 0; padding: 0 16px; border: 0; background: none;
    color: var(--t-fg); font: 600 14px/20px var(--hs-f-body); cursor: pointer; white-space: nowrap;
}
#watch-main.mr-w .mr-w-nav button[data-off] > * { visibility: hidden; }
#watch-main.mr-w .mr-w-nav button[data-off] { pointer-events: none; }
#watch-main.mr-w .mr-w-nav .mr-w-nav-e { border-inline: 1px solid rgba(73, 71, 78, .7); background: rgba(35, 34, 37, .4); }
#watch-main.mr-w .mr-w-nav svg { flex: none; color: var(--t-mfg); }
#watch-main.mr-w .mr-w-nav .mr-w-nav-e svg { color: var(--t-fg); }

/* anime card */
#watch-main.mr-w .mr-w-desc { padding: 16px; border-radius: 10px; background: var(--t-muted-50); }
#watch-main.mr-w .mr-w-desc-top { display: flex; align-items: flex-start; gap: 14px; }
#watch-main.mr-w .mr-w-desc-po { flex: none; display: block; width: 56px; height: 84px; border-radius: 7px; overflow: hidden; background: var(--t-muted); box-shadow: 0 0 0 1px var(--t-border-50); }
#watch-main.mr-w .mr-w-desc-po img { display: block; width: 100%; height: 100%; object-fit: cover; }
#watch-main.mr-w .mr-w-desc-tx { flex: 1; min-width: 0; }
#watch-main.mr-w .mr-w-desc-t {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 6px;
    font: 600 16px/22px var(--hs-f-head); letter-spacing: 0; color: var(--t-fg); text-decoration: none;
}
#watch-main.mr-w .mr-w-desc-t:hover { color: var(--t-ac); }
#watch-main.mr-w .mr-w-desc-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: 0; font: 400 12px/20px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-w-ic { display: inline-flex; align-items: center; gap: 4px; }
#watch-main.mr-w .mr-w-ic .hs-li { color: currentColor; }
#watch-main.mr-w .mr-w-desc-fav { flex: none; position: relative; }
#watch-main.mr-w .mr-w-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--t-border); border-radius: 7px; background: rgba(73, 71, 78, .3); color: var(--t-fg);
    font: 600 14px/20px var(--hs-f-body); white-space: nowrap; cursor: pointer; transition: background .15s;
}
#watch-main.mr-w .mr-w-btn:hover { background: rgba(73, 71, 78, .5); }
#watch-main.mr-w .mr-w-btn svg { flex: none; width: 16px; height: 16px; }
#watch-main.mr-w .mr-w-desc-syn {
    display: block; width: 100%; margin: 12px 0 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#watch-main.mr-w .mr-w-desc-st { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 400 14px/24px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-w-desc-syn.is-open .mr-w-desc-st { display: block; -webkit-line-clamp: unset; white-space: pre-line; }
#watch-main.mr-w .mr-w-desc-sf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font: 500 12px/16px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-w-desc-more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--t-fg); }
#watch-main.mr-w .mr-w-desc-more svg { transition: transform .15s; }
#watch-main.mr-w .mr-w-desc-syn.is-open .mr-w-desc-more svg { transform: rotate(180deg); }
#watch-main.mr-w .mr-w-desc-syn:hover .mr-w-desc-more { color: var(--t-ac); }
/* Add to List folder menu (main.js UserFavourite), styled like the reference list-entry surfaces */
#watch-main .favourite .dropdown-menu.folders {
    min-width: 200px; padding: 4px !important; border: 1px solid var(--t-border) !important; border-radius: 7px !important;
    background: var(--t-muted-65) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55) !important;
}
#watch-main .favourite .dropdown-menu.folders::before { content: "Add to list"; display: block; padding: 6px 8px; font: 600 10px/16px var(--hs-f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--t-mfg); }
#watch-main .favourite .dropdown-menu.folders .dropdown-item { display: flex; align-items: center; height: 32px; padding: 6px 8px; border-radius: 6px; background: none; font: 500 14px/20px var(--hs-f-body); color: var(--t-fg) !important; }
#watch-main .favourite .dropdown-menu.folders .dropdown-item:hover { background: var(--t-accent-bg); }
#watch-main .favourite .dropdown-menu.folders .dropdown-item.active { color: var(--t-ac) !important; background: var(--t-ac-soft); }

/* episode panel: the wrapper is the card, #w-episodes is transparent inside it */
#watch-main.mr-w .mr-w-eps {
    position: relative; display: flex; flex-direction: column; align-self: stretch; contain: size; min-width: 0; overflow: hidden;
    border: 1px solid var(--t-border-50); border-radius: 10px; background: var(--t-muted-50);
}
body.mr #watch-main.mr-w #w-episodes.hs-eps {
    flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-h {
    position: relative; display: flex; align-items: center; gap: 8px; height: 65px; flex: none; padding: 12px 8px; border-bottom: 1px solid var(--t-border-50);
}
body.mr #watch-main.mr-w #w-episodes .mr-ep-title {
    flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font: 600 16px/24px var(--hs-f-head); letter-spacing: -0.015em; text-transform: none; color: var(--t-fg);
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-bar { display: contents; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-sp { flex: 0 1 auto; order: 1; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-range { order: 2; }
body.mr #watch-main.mr-w #w-episodes [data-hs-ep="search"] { order: 3; }
body.mr #watch-main.mr-w #w-episodes [data-hs-ep="sort"] { order: 4; }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter { order: 5; }
body.mr #watch-main.mr-w #w-episodes [data-hs-ep="view"] { order: 6; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-ib {
    width: 35px; height: 35px; min-width: 35px; flex: none; padding: 0; border: 0; border-radius: 7px; background: var(--t-muted); color: var(--t-mfg);
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-ib:hover { color: var(--t-fg); background: var(--t-accent-bg); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-ib svg { width: 16px; height: 16px; }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter.is-on > .hs-ep1-ib { color: var(--t-ac); }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .mr-dd-btn { min-width: 35px; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-rsel {
    height: 40px; gap: 6px; padding: 0 8px; border: 0; border-radius: 7px; background: var(--t-muted); color: var(--t-mfg);
    font: 600 12px/16px var(--hs-f-body); letter-spacing: 0; white-space: nowrap;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-rsel:hover { color: var(--t-fg); background: var(--t-accent-bg); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-rsel::after {
    width: 14px; height: 14px; margin: 0; border: 0; transform: none;
    background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-range .dropdown-menu,
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .mr-dd-menu {
    right: 0; left: auto; min-width: 150px; max-height: 320px; margin-top: 6px; padding: 4px !important;
    border: 1px solid var(--t-border) !important; border-radius: 7px !important; background: var(--t-muted-65) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55) !important;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-range .dropdown-item {
    display: flex; align-items: center; height: 32px; padding: 6px 8px; border-radius: 6px; font: 500 14px/20px var(--hs-f-body); color: var(--t-fg); white-space: nowrap;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-range .dropdown-item:hover { background: var(--t-accent-bg); color: var(--t-fg); }
body.mr #watch-main.mr-w #w-episodes.hs-eps .hs-ep1-range .dropdown-item.active { background: none; color: var(--t-ac) !important; }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .mr-dd-menu { top: calc(100% + 6px); margin-top: 0; min-width: 170px; }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .hs-ep1-seg { display: flex; flex-direction: column; height: auto; gap: 1px; padding: 0; border: 0; border-radius: 0; background: none; }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .hs-ep1-seg button {
    display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 6px 8px; border-radius: 6px;
    background: none; color: var(--t-fg); font: 500 14px/20px var(--hs-f-body); text-align: left;
}
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .hs-ep1-seg button:hover { background: var(--t-accent-bg); }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .hs-ep1-seg button.on { background: none; color: var(--t-ac); }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .hs-ep1-seg button.on::after {
    content: ""; width: 14px; height: 14px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}
body.mr #watch-main.mr-w #w-episodes .mr-ep-find {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px; margin: 0; padding: 6px 8px; border: 0; border-radius: 6px;
    background: none; color: var(--t-fg); font: 500 14px/20px var(--hs-f-body); text-align: left; cursor: pointer;
}
body.mr #watch-main.mr-w #w-episodes .mr-ep-find:hover { background: var(--t-accent-bg); }
body.mr #watch-main.mr-w #w-episodes .mr-ep-find svg { flex: none; color: var(--t-mfg); }
body.mr #watch-main.mr-w #w-episodes .mr-ep-filter .mr-dd-k + .mr-ep-find { margin-top: 0; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-seg + .mr-dd-k { margin-top: 4px; border-top: 1px solid var(--t-border-50); padding-top: 8px; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-q { inset: 0; z-index: 4; padding: 12px 8px; gap: 8px; background: var(--t-popover); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-q input {
    height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--t-border); border-radius: 7px; background: var(--t-input-30);
    color: var(--t-fg); font: 400 14px/20px var(--hs-f-body); box-shadow: none; outline: 0;
}
body.mr #watch-main.mr-w #w-episodes .hs-ep1-q input:focus { border-color: var(--t-ac); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-q .qf svg { left: 11px; color: var(--t-mfg); }

body.mr #watch-main.mr-w #w-episodes.hs-eps > .body { flex: 1 1 auto; min-height: 0; border-radius: 0; background: none; }
body.mr #watch-main.mr-w #w-episodes.hs-eps .episodes { padding: 0; scrollbar-width: thin; scrollbar-color: rgba(181, 178, 188, .35) transparent; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-pl, body.mr #watch-main.mr-w #w-episodes .hs-ep1-leg { display: none; }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-qh { padding: 8px 10px 0; color: var(--t-mfg); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-emp { margin: 8px; border-color: var(--t-border-50); border-radius: 8px; color: var(--t-mfg); }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 3.84px; padding: 6.4px;
}
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a {
    height: 28.8px; padding: 6.4px 0; border: 0; border-radius: 8px; background: none; box-shadow: inset 0 0 0 1px rgba(73, 71, 78, .6);
    color: var(--t-mfg); font: 400 13.3333px/16px var(--hs-f-body); transition: background .12s, color .12s, box-shadow .12s;
}
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a .n { font-weight: 400; }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a:hover {
    border: 0; background: var(--t-input-30); color: var(--t-fg); box-shadow: inset 0 0 0 1px var(--t-border);
}
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a.active {
    border: 0; background: var(--t-ac); color: var(--t-ac-fg); box-shadow: none;
}
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a.active .n { display: none; }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a.active .pl {
    display: block; width: 16px; height: 16px; animation: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E") center / 16px no-repeat;
}
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="btn"], :not([data-view])) .episodes .ep-range a.filler::after { left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: #E49343; }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="list"], [data-view="thumb"]) .episodes .ep-range { padding: 6px; }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="list"], [data-view="thumb"]) .episodes .ep-range a { border-radius: 7px; color: var(--t-fg); font-family: var(--hs-f-body); }
body.mr #watch-main.mr-w #w-episodes.hs-eps[data-view="list"] .episodes .ep-range li:nth-child(even) a { background: rgba(73, 71, 78, .12); }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="list"], [data-view="thumb"]) .episodes .ep-range a:hover { background: var(--t-accent-bg); }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="list"], [data-view="thumb"]) .episodes .ep-range a.active { background: var(--t-ac-soft); box-shadow: inset 2px 0 0 var(--t-ac); }
body.mr #watch-main.mr-w #w-episodes.hs-eps:is([data-view="list"], [data-view="thumb"]) .episodes .ep-range a.active :is(.n, .t) { color: var(--t-ac); }
body.mr #watch-main.mr-w #w-episodes .hs-ep1-ctx { padding: 8px 8px 0; }

#watch-main.mr-w .mr-w-eps-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; flex: none; margin: 0; padding: 8px 12px;
    border-top: 1px solid var(--t-border-50); background: rgba(35, 34, 37, .5); font: 400 12px/20px var(--hs-f-body); color: var(--t-mfg); text-align: center;
}
#watch-main.mr-w .mr-w-eps-foot svg { margin-right: 4px; color: var(--t-mfg); }
#watch-main.mr-w .mr-w-eps-foot strong { font-weight: 600; color: var(--t-fg); }
#watch-main.mr-w .mr-w-eps-foot .mr-w-mfg { color: var(--t-mfg); }

/* Next Episode card: same surface as the anime card */
#watch-main.mr-w .mr-ne { margin: 0; padding: 16px; border: 0; border-radius: 10px; background: var(--t-muted-50); }
#watch-main.mr-w .mr-ne-next, #watch-main.mr-w .mr-ne-soon { grid-template-columns: 176px minmax(0, 1fr) auto; gap: 16px; color: var(--t-fg); text-decoration: none; }
#watch-main.mr-w .mr-ne-soon { grid-template-columns: 176px minmax(0, 1fr); }
#watch-main.mr-w .mr-ne-media { border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--t-border-50); background: var(--t-muted); }
#watch-main.mr-w .mr-ne-media .mr-badge { border-radius: 6px; background: rgba(18, 17, 19, .8); color: var(--t-fg); font: 600 11px/16px var(--hs-f-body); }
#watch-main.mr-w .mr-ne-body { gap: 2px; }
#watch-main.mr-w .mr-ne-k { font: 600 12px/16px var(--hs-f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--t-mfg); }
#watch-main.mr-w .mr-ne-t { margin-top: 2px; font: 600 16px/22px var(--hs-f-head); letter-spacing: 0; color: var(--t-fg); }
#watch-main.mr-w .mr-ne-next:hover .mr-ne-t { color: var(--t-ac); }
#watch-main.mr-w .mr-ne-body .mr-meta { font: 400 12px/20px var(--hs-f-body); color: var(--t-mfg); }
#watch-main.mr-w .mr-ne-go {
    height: 40px; padding: 8px 12px; gap: 8px; border: 1px solid var(--t-border); border-radius: 7px;
    background: rgba(73, 71, 78, .3); color: var(--t-fg) !important; font: 600 14px/20px var(--hs-f-body);
}
#watch-main.mr-w .mr-ne-next:hover .mr-ne-go { background: rgba(73, 71, 78, .5); }
#watch-main.mr-w .mr-ne-cd { gap: 6px; margin-top: 6px; }
#watch-main.mr-w .mr-ne-cd > span { min-width: 52px; padding: 6px 4px; border: 1px solid var(--t-border-50); border-radius: 7px; background: var(--t-muted); }
#watch-main.mr-w .mr-ne-cd b { font: 700 18px/1 var(--hs-f-head); color: var(--t-fg); }
#watch-main.mr-w .mr-ne-cd small { font: 600 10px/1 var(--hs-f-body); letter-spacing: .06em; color: var(--t-mfg); }
#watch-main.mr-w .mr-ne-cd.is-live { color: var(--t-live); }
#watch-main.mr-w .mr-ne-when { margin-top: 4px; font: 400 12px/20px var(--hs-f-body); color: var(--t-mfg); }

/* comments card on the watch page: the peek row only shows on phones */
#watch-main.mr-w .mr-w-cm .mr-cm-peek { display: none; }

/* side lists (Related / Recommendations) */
#watch-main.mr-w .mr-sl { padding: 12px; border: 1px solid var(--t-border-60); border-radius: 8px; background: var(--t-card-40); }
#watch-main.mr-w .mr-sl-h {
    display: flex; align-items: center; gap: 4px; margin: 0; padding: 4px 0 16px;
    font: 700 16px/24px var(--hs-f-head); letter-spacing: -0.015em; text-transform: uppercase; color: var(--t-fg);
}
#watch-main.mr-w .mr-sl-h svg { flex: none; }
#watch-main.mr-w .mr-sl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#watch-main.mr-w .mr-sl-list > li[hidden] { display: none; }
#watch-main.mr-w .mr-sl-card { position: relative; display: flex; gap: 8px; height: 96px; overflow: hidden; border-radius: 8px; background: #1A191B; isolation: isolate; }
#watch-main.mr-w .mr-sl-a { position: absolute; inset: 0; z-index: 3; border-radius: 8px; }
#watch-main.mr-w .mr-sl-a:focus-visible { outline: 2px solid var(--t-ac); outline-offset: -2px; }
#watch-main.mr-w .mr-sl-ban { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 0; pointer-events: none; }
#watch-main.mr-w .mr-sl-ban img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .45; transition: filter .25s, opacity .25s; }
#watch-main.mr-w .mr-sl-ban i { position: absolute; inset: 0; background: linear-gradient(-70deg, transparent -200%, #1A191B 80%); }
#watch-main.mr-w .mr-sl-card:hover .mr-sl-ban img { filter: none; opacity: .6; }
#watch-main.mr-w .mr-sl-po { position: relative; z-index: 1; flex: none; width: 68px; height: 96px; overflow: hidden; border-radius: 8px; background: var(--t-muted); box-shadow: 0 0 0 1px rgba(238, 238, 240, .06); }
#watch-main.mr-w .mr-sl-po img { display: block; width: 100%; height: 100%; object-fit: cover; }
#watch-main.mr-w .mr-sl-tx { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 12px 0 0; }
#watch-main.mr-w .mr-sl-tr { display: flex; align-items: center; gap: 8px; min-width: 0; }
#watch-main.mr-w .mr-sl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #00AAFF; }
#watch-main.mr-w .mr-sl-dot.is-airing { background: var(--t-live); }
#watch-main.mr-w .mr-sl-t {
    margin: 0; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font: 600 15px/20.625px var(--hs-f-head); letter-spacing: 0; color: var(--t-fg);
}
#watch-main.mr-w .mr-sl-card:hover .mr-sl-t { color: var(--t-ac); }
#watch-main.mr-w .mr-sl-d { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-left: 18px; }
#watch-main.mr-w .mr-sl-c { display: inline-flex; align-items: center; gap: 2.4px; padding: 1.6px 3.2px; border-radius: 6px; font: 500 11px/16.5px var(--hs-f-body); color: var(--t-mfg); white-space: nowrap; }
#watch-main.mr-w .mr-sl-c:first-child { background: var(--t-muted-70); }
#watch-main.mr-w .mr-sl-c svg, #watch-main.mr-w .mr-sl-c .hs-li { flex: none; color: currentColor; }
#watch-main.mr-w .mr-sl-more {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin: 8px 0 0; padding: 8px 0; border: 0; border-radius: 8px;
    background: #1A191B; color: var(--t-mfg); cursor: pointer;
}
#watch-main.mr-w .mr-sl-more:hover { color: var(--t-fg); }
#watch-main.mr-w .mr-sl-more[aria-expanded="true"] svg { transform: rotate(180deg); }

/* expand (main.js toggles .expand on #watch-main): the player takes the full width */
@media (min-width: 1200px) {
    #watch-main.mr-w.expand .mr-w-layout { grid-template-areas: "player player" "main eps" "main side"; }
    #watch-main.mr-w.expand .mr-w-eps { contain: none; height: 536px; }
}

/* ---- < 1200: one column ---- */
@media (max-width: 1199.98px) {
    #watch-main.mr-w .mr-w-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    #watch-main.mr-w .mr-w-player, #watch-main.mr-w .mr-w-eps { grid-area: auto; }
    #watch-main.mr-w .mr-w-main, #watch-main.mr-w .mr-w-side { display: contents; }
    #watch-main.mr-w .mr-w-player { order: 0; }
    #watch-main.mr-w .mr-w-now { order: 1; }
    #watch-main.mr-w .mr-w-nav { order: 2; }
    #watch-main.mr-w .mr-w-desc { order: 4; }
    #watch-main.mr-w .mr-w-main > :not(.mr-w-now):not(.mr-w-nav):not(.mr-w-desc):not(.mr-w-cm) { order: 5; }
    #watch-main.mr-w .mr-w-eps { order: 6; contain: none; height: 312px; }
    #watch-main.mr-w .mr-w-side > * { order: 7; }
    #watch-main.mr-w .mr-w-cm { order: 9; }
}
/* ---- < 1000: full-bleed player, 14px gutters ---- */
@media (max-width: 999.98px) {
    #watch-main.mr-w .mr-w-content { padding: 0 0 16px; }
    body.mr #watch-main.mr-w #player-wrapper { border-radius: 0; }
    #watch-main.mr-w .mr-w-layout > .mr-w-now, #watch-main.mr-w .mr-w-layout > .mr-w-eps,
    #watch-main.mr-w .mr-w-main > *, #watch-main.mr-w .mr-w-side > * { margin-inline: 14px; }
    #watch-main.mr-w .mr-w-now-tx { flex-basis: 100%; }
    #watch-main.mr-w .mr-w-now-t { font-size: 18px; line-height: 24.75px; }
    #watch-main.mr-w .mr-w-ctl { flex: 1 1 100%; gap: 8px; }
    #watch-main.mr-w .mr-sv { flex: 1 1 auto; gap: 8px; min-width: 0; }
    #watch-main.mr-w .mr-sv > .mr-dd { flex: 1 1 0; min-width: 0; }
    #watch-main.mr-w .mr-sv .mr-dd-btn { width: 100%; }
    #watch-main.mr-w .mr-w-desc-po { width: 48px; height: 72px; }
    #watch-main.mr-w .mr-ne-next { grid-template-columns: 140px minmax(0, 1fr); }
    #watch-main.mr-w .mr-ne-go { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 639.98px) {
    #watch-main.mr-w .mr-w-btn { width: 40px; padding: 0; }
    #watch-main.mr-w .mr-w-btn span { display: none; }
    #watch-main.mr-w .mr-ne-next, #watch-main.mr-w .mr-ne-soon { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
    #watch-main.mr-w .mr-ne-soon .mr-ne-media { display: block; }
    #watch-main.mr-w .mr-ne-cd > span { min-width: 44px; }
}
/* ---- < 768: sticky player, nav row, bottom-sheet episodes, collapsed comments ---- */
@media (max-width: 767.98px) {
    #watch-main.mr-w .mr-w-player { position: sticky; top: var(--mr-top, 48px); z-index: 30; }
    #watch-main.mr-w .mr-w-nav { display: grid; }
    #watch-main.mr-w .mr-w-cm { order: 3; }
    #watch-main.mr-w .mr-w-cm:not(.is-open) { padding: 12px; cursor: pointer; }
    #watch-main.mr-w .mr-w-cm:not(.is-open) .mr-cm-k, #watch-main.mr-w .mr-w-cm:not(.is-open) .mr-cm-tabs,
    #watch-main.mr-w .mr-w-cm:not(.is-open) > :not(.mr-cm-head):not(.mr-cm-peek) { display: none !important; }
    #watch-main.mr-w .mr-w-cm:not(.is-open) .mr-cm-t { font-size: 16px; line-height: 24px; }
    #watch-main.mr-w .mr-w-cm:not(.is-open) .mr-cm-peek {
        display: block; width: 100%; height: 32px; margin: 12px 0 0; padding: 8px 12px; border: 0; border-radius: 8px;
        background: var(--t-muted); color: var(--t-mfg); font: 400 12px/16px var(--hs-f-body); text-align: left; cursor: pointer;
    }
    #watch-main.mr-w .mr-w-eps {
        position: fixed; left: 7px; right: 7px; bottom: 0; z-index: 90; height: min(577px, calc(100dvh - 96px)); margin: 0;
        border: 1px solid var(--t-border); border-bottom: 0; border-radius: 16px 16px 0 0; background: #232225; padding-top: 16px;
        transform: translateY(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s;
    }
    #watch-main.mr-w .mr-w-layout > .mr-w-eps { margin: 0; }
    #watch-main.mr-w .mr-w-eps::before { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--t-border); }
    body.mr-eps-open #watch-main.mr-w .mr-w-eps { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
    body.mr #watch-main.mr-w #w-episodes .hs-ep1-h { padding: 8px 52px 12px 16px; }
    #watch-main.mr-w .mr-w-eps-x {
        display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 31px; right: 10px; z-index: 5;
        width: 35px; height: 35px; padding: 0; border: 0; border-radius: 7px; background: var(--t-muted); color: var(--t-mfg); cursor: pointer;
    }
    #watch-main.mr-w .mr-w-scrim { position: fixed; inset: 0; z-index: 89; background: rgba(0, 0, 0, .4); }
    body.mr-eps-open #watch-main.mr-w .mr-w-scrim { display: block; }
    body.mr-eps-open { overflow: hidden; }
}
@media (max-width: 479.98px) {
    body.mr #watch-main.mr-w #w-episodes .hs-ep1-h { flex-wrap: wrap; row-gap: 8px; height: auto; }
    body.mr #watch-main.mr-w #w-episodes .hs-ep1-h { padding: 8px 16px 12px; }
    body.mr #watch-main.mr-w #w-episodes .mr-ep-title { flex-basis: 100%; padding-right: 40px; }
    body.mr #watch-main.mr-w #w-episodes .hs-ep1-range { flex: 1 1 auto; min-width: 0; }
    body.mr #watch-main.mr-w #w-episodes .hs-ep1-rsel { width: 100%; height: 35px; justify-content: center; background: transparent; box-shadow: inset 0 0 0 1px var(--t-border-50); }
    #watch-main.mr-w .mr-w-eps-x { top: 18px; right: 12px; width: 32px; height: 32px; }
}

/* light mode */
html[data-theme="light"] #watch-main.mr-w .mr-sl-card, html[data-theme="light"] #watch-main.mr-w .mr-sl-more { background: var(--hs-bg-2); }
html[data-theme="light"] #watch-main.mr-w .mr-sl-ban i { background: linear-gradient(-70deg, transparent -200%, var(--hs-bg-2) 80%); }
html[data-theme="light"] #watch-main.mr-w .mr-w-eps-foot { background: var(--hs-bg-3); }
html[data-theme="light"] #watch-main.mr-w .mr-w-nav .mr-w-nav-e { background: var(--hs-bg-3); }
html[data-theme="light"] #watch-main.mr-w .mr-w-btn, html[data-theme="light"] #watch-main.mr-w .mr-ne-go { background: var(--hs-bg-2); }
@media (max-width: 767.98px) { html[data-theme="light"] #watch-main.mr-w .mr-w-eps { background: var(--hs-bg-2); } }

/* ============ 5. shell radius overrides on title pages (miruro.css keeps 4px there; reference uses 7-10px) ============ */
body.mr-has-ambient .hs-btn, body.mr-has-ambient .hs-ib, body.mr-has-ambient .hs-seg, body.mr-has-ambient .hs-epv,
body.mr-has-ambient .hs-epv button, body.mr-has-ambient .mr-rate .hs-r3-share { border-radius: var(--mr-r-md, 7px); }
body.mr-has-ambient .hs-panel, body.mr-has-ambient #w-rating, body.mr-has-ambient .hs-tr,
body.mr-has-ambient .hs-next, body.mr-has-ambient .hs-nextep { border-radius: var(--mr-r-lg, 8px); }
body.mr-has-ambient .dropdown-menu, body.mr-has-ambient .hs-dd-menu { border-radius: var(--mr-r-md, 7px) !important; }
body.mr-has-ambient .tooltipster-sidetip .tooltipster-box { border-radius: var(--mr-r-md, 7px) !important; }
body.mr-has-ambient .modal-content { border-radius: var(--mr-r-xl, 10px); }
body.mr-has-ambient .hs-chip, body.mr-has-ambient .hs-b, body.mr-has-ambient .hs-seg .hs-tab { border-radius: 6px; }
body.mr-has-ambient .hs-info .poster img, body.mr-has-ambient .hs-seasons .season a, body.mr-has-ambient .hs-rel3 a { border-radius: var(--mr-r-lg, 8px); }