/* Space Gate Nova+ — Anime Native Reference UI / Phase 1
   Visual target: the user-provided mobile + desktop reference captures.
   This file is loaded after the legacy anime styles and is intentionally scoped. */

:root {
    --anime-ref-bg: #000000;
    --anime-ref-panel: #000000;
    --anime-ref-panel-2: #000000;
    --anime-ref-text: var(--oscar-text);
    --anime-ref-muted: var(--oscar-muted);
    --anime-ref-purple: var(--accent);
    --anime-ref-purple-2: var(--accent);
    --anime-ref-violet: var(--accent);
    --anime-ref-line: var(--oscar-border);
    --anime-ref-line-soft: var(--oscar-border);
    --anime-ref-glow: none;
}

.catalog-landing-anime > .catalog-landing-toolbar { display: none !important; }
.catalog-landing-anime,
.catalog-landing-anime .catalog-landing-main,
.catalog-landing-anime .catalog-landing-reference,
.catalog-landing-anime .world-hub-shell,
.catalog-landing-anime .world-hub-stage {
    background: #000000 !important;
}

.world-hub-anime {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

.world-hub-anime .world-hub-stage {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #000000 !important;
}

.anime-ref-shell,
.anime-ref-shell * { box-sizing: border-box; }

.anime-ref-shell {
    width: min(100%, 1500px);
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(15px + var(--safe-top, env(safe-area-inset-top, 0px))) clamp(14px, 3.2vw, 50px) calc(var(--bottom-nav-h, 78px) + var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 30px);
    overflow: hidden;
    color: var(--anime-ref-text);
    background:
        radial-gradient(70% 28% at 50% -12%, rgba(0,0,0,.14), transparent 72%),
        #000000;
    font-family:inherit;
}

/* ------------------------------------------------------
   Header — brand on the left, tools on the right, matching
   the reference rather than the normal catalogue header.
   ------------------------------------------------------ */
.anime-ref-topbar {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    direction: ltr;
}

.anime-ref-brand {
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    color: var(--oscar-text);
    background: transparent;
    cursor: pointer;
}

.anime-ref-brand img {
    width: clamp(82px, 8.2vw, 122px);
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
}

.anime-ref-brand span {
    padding-left: 9px;
    border-left: 1px solid var(--oscar-border);
    color: var(--accent);
    font-size: .64rem;
    font-weight: 950;
    letter-spacing: .18em;
}

.anime-ref-tools {
    display: flex;
    align-items: center;
    gap: 9px;
    direction: ltr;
}

.anime-ref-tools > button {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--oscar-text);
    background: transparent;
    cursor: pointer;
}

.anime-ref-tools > button:active { transform: scale(.94); }
.anime-ref-tools .notification i {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #000000;
    box-shadow: 0 0 0 2px #000000, 0 0 12px rgba(0,0,0,.75);
}

.anime-ref-tools .anime-ref-avatar {
    width: 48px;
    height: 48px;
    padding: 3px;
    border: 1px solid var(--accent);
    box-shadow: 0 0 14px rgba(0,0,0,.28);
}

.anime-ref-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    background: #000000;
}

/* ------------------------------------------------------
   Connected Series / Movies selector.
   ------------------------------------------------------ */
.anime-ref-type-switcher {
    position: relative;
    width: min(590px, 66vw);
    min-height: 72px;
    margin: -2px auto 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    direction: rtl;
    isolation: isolate;
}

.anime-ref-type-switcher > button {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 10px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid var(--oscar-border);
    color: var(--oscar-text);
    background: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.98));
    font: inherit;
    cursor: pointer;
}

.anime-ref-type-switcher > button:first-child {
    border-radius: 18px 5px 5px 18px;
    clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 50%, calc(100% - 23px) 100%, 0 100%, 12px 50%);
}

.anime-ref-type-switcher > button:last-child {
    border-radius: 5px 18px 18px 5px;
    clip-path: polygon(23px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 23px 100%, 0 50%);
}

.anime-ref-type-switcher > button.active {
    border-color: var(--accent);
    background:
        radial-gradient(circle at 50% 0, rgba(0,0,0,.30), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.98));
    box-shadow: inset 0 0 18px rgba(0,0,0,.17), 0 0 18px rgba(0,0,0,.18);
}

.anime-ref-type-switcher button > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: right;
}

.anime-ref-type-switcher strong {
    color: var(--oscar-text);
    font-size: .9rem;
    font-weight: 950;
    white-space: nowrap;
}

.anime-ref-type-switcher small {
    color: var(--oscar-muted);
    font-size: .59rem;
    white-space: nowrap;
}

.anime-ref-type-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--oscar-text);
}

.anime-ref-type-switcher .active .anime-ref-type-icon { color: var(--accent); }
.anime-ref-switch-diamond {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px solid var(--accent);
    background: #000000;
    box-shadow: 0 0 17px rgba(0,0,0,.82), inset 0 0 12px rgba(0,0,0,.08);
}
.anime-ref-switch-diamond::before,
.anime-ref-switch-diamond::after,
.anime-ref-switch-diamond i {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid var(--accent);
}
.anime-ref-switch-diamond::after { inset: 12px; background:#000000; box-shadow:0 0 12px #000000; }
.anime-ref-switch-diamond i { inset: 15px; background:#000000; border:0; }

/* ------------------------------------------------------
   Hero — reference-style cinematic panel.
   ------------------------------------------------------ */
.anime-ref-hero {
    position: relative;
    min-height: clamp(280px, 29vw, 390px);
    overflow: hidden;
    border: 1px solid var(--accent);
    border-radius: 18px;
    background: #000000;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.015), 0 18px 46px rgba(0,0,0,.46);
}

.anime-ref-hero-art,
.anime-ref-hero-art > .nova-fast-image,
.anime-ref-hero-art .anime-ref-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.anime-ref-hero-art .anime-ref-hero-image {
    object-fit: cover !important;
    object-position: 68% center !important;
    transform: scale(1.015);
}

.anime-ref-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.88) 24%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.10) 72%),
        linear-gradient(0deg, rgba(0,0,0,.80) 0%, transparent 40%);
}

.anime-ref-hero-copy {
    position: absolute;
    z-index: 2;
    left: clamp(22px, 4.2vw, 58px);
    top: 50%;
    width: min(43%, 520px);
    transform: translateY(-50%);
    display: grid;
    justify-items: start;
    text-align: right;
}

.anime-ref-exclusive {
    margin-bottom: 9px;
    color: var(--accent);
    font-size: .69rem;
    font-weight: 950;
}
.anime-ref-hero h1 {
    width: 100%;
    margin: 0;
    color: var(--oscar-text);
    font-size: clamp(2.05rem, 4.3vw, 4.35rem);
    line-height: 1.04;
    font-weight: 950;
    letter-spacing: -.045em;
    text-shadow: 0 8px 26px rgba(0,0,0,.82);
}
.anime-ref-hero p {
    max-width: 490px;
    margin: 13px 0 0;
    display: -webkit-box;
    overflow: hidden;
    color: var(--oscar-text);
    font-size: clamp(.72rem, 1.15vw, .94rem);
    line-height: 1.9;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.anime-ref-hero-meta {
    margin-top: 10px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.anime-ref-hero-meta span {
    min-height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--oscar-border);
    border-radius: 999px;
    color: var(--oscar-text);
    background: rgba(0,0,0,.40);
    font-size: .58rem;
    font-weight: 800;
}
.anime-ref-hero-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
}
.anime-ref-hero-actions button {
    min-height: 43px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--oscar-border);
    border-radius: 9px;
    color: var(--oscar-text);
    background: rgba(0,0,0,.64);
    font: 900 .75rem Tajawal,Arial,sans-serif;
    backdrop-filter: blur(6px);
}
.anime-ref-hero-actions .primary {
    min-width: 142px;
    border-color: var(--accent);
    background: linear-gradient(90deg, rgba(0,0,0,.90), rgba(0,0,0,.92));
    box-shadow: inset 0 0 15px rgba(0,0,0,.17), 0 0 15px rgba(0,0,0,.22);
}
.anime-ref-hero-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: 35px;
    height: 35px;
    padding: 0;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid var(--oscar-border);
    border-radius: 50%;
    color: var(--oscar-text);
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(6px);
}
.anime-ref-hero-arrow.previous { right: 12px; }
.anime-ref-hero-arrow.next { right: 54px; }
.anime-ref-hero-dots {
    position: absolute;
    z-index: 3;
    bottom: 11px;
    left: 50%;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}
.anime-ref-hero-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.62);
}
.anime-ref-hero-dots button.active { background:#000000; box-shadow:0 0 9px rgba(0,0,0,.8); }

/* ------------------------------------------------------
   Sections + rails.
   ------------------------------------------------------ */
.anime-ref-section { margin-top: 14px; }
.anime-ref-section-head {
    min-height: 34px;
    margin-bottom: 8px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
}
.anime-ref-section-head h2 {
    margin: 0;
    color: var(--oscar-text);
    font-size: clamp(.96rem, 1.65vw, 1.2rem);
    font-weight: 900;
    line-height: 1.1;
}
.anime-ref-section-head button {
    min-height: 28px;
    padding: 0 3px;
    border: 0;
    color: var(--accent);
    background: transparent;
    font: 850 .67rem Tajawal,Arial,sans-serif;
}

.anime-ref-studios-rail,
.anime-ref-episode-rail,
.anime-ref-poster-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 0 3px;
    direction: rtl;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.anime-ref-studios-rail::-webkit-scrollbar,
.anime-ref-episode-rail::-webkit-scrollbar,
.anime-ref-poster-rail::-webkit-scrollbar { display:none; }

.anime-ref-studio-card {
    flex: 1 0 128px;
    min-width: 128px;
    height: 66px;
    padding: 8px 12px;
    display: grid;
    place-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--oscar-border);
    border-radius: 8px;
    color: var(--oscar-text);
    background: linear-gradient(180deg,#000000,#000000);
}
.anime-ref-studio-card img {
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
    filter: saturate(.86) contrast(1.04);
}
.anime-ref-studio-card strong {
    overflow: hidden;
    font-size: .69rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anime-ref-episode-card {
    flex: 0 0 clamp(180px, 17vw, 238px);
    min-width: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid var(--oscar-border);
    border-radius: 8px;
    color: var(--oscar-text);
    background: #000000;
    text-align: right;
}
.anime-ref-episode-art {
    position: relative;
    height: 112px;
    display: block;
    overflow: hidden;
    background:#000000;
}
.anime-ref-episode-art > img,
.anime-ref-episode-art > .nova-fast-image {
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
.anime-ref-episode-art::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%);
    pointer-events:none;
}
.anime-ref-new-badge {
    position:absolute;
    z-index:3;
    top:7px;
    right:7px;
    min-height:21px;
    padding:0 7px;
    display:inline-flex;
    align-items:center;
    border-radius:5px;
    color:var(--oscar-text);
    background:#000000;
    font-size:.54rem;
    font-weight:900;
    box-shadow:0 0 9px rgba(0,0,0,.42);
}
.anime-ref-card-play {
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    transform:translate(-50%,-50%);
    border:1px solid var(--oscar-border);
    border-radius:50%;
    color:var(--oscar-text);
    background:rgba(0,0,0,.56);
}
.anime-ref-card-copy {
    min-width:0;
    padding:8px 8px 9px;
    display:grid;
    gap:3px;
}
.anime-ref-card-copy strong {
    overflow:hidden;
    color:var(--oscar-text);
    font-size:.70rem;
    font-weight:850;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.anime-ref-card-copy small {
    overflow:hidden;
    color:var(--oscar-muted);
    font-size:.55rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.anime-ref-poster-card {
    flex: 0 0 clamp(116px, 10.8vw, 158px);
    min-width:0;
    padding:0;
    scroll-snap-align:start;
    border:0;
    color:var(--oscar-text);
    background:transparent;
    text-align:right;
}
.anime-ref-poster-art {
    position:relative;
    aspect-ratio:2/3;
    display:block;
    overflow:hidden;
    border:1px solid var(--oscar-border);
    border-radius:7px;
    background:#000000;
}
.anime-ref-poster-art > img,
.anime-ref-poster-art > .nova-fast-image {
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
}
.anime-ref-poster-art::after {
    content:"";
    position:absolute;
    inset:52% 0 0;
    background:linear-gradient(0deg,rgba(0,0,0,.63),transparent);
    pointer-events:none;
}
.anime-ref-poster-card .anime-ref-card-copy { padding:6px 2px 1px; }
.anime-ref-score {
    position:absolute;
    z-index:3;
    top:6px;
    left:6px;
    min-height:20px;
    padding:0 6px;
    display:inline-flex;
    align-items:center;
    border-radius:4px;
    color:var(--accent);
    background:rgba(0,0,0,.76);
    font-size:.55rem;
    font-weight:950;
}
.anime-ref-poster-card .anime-ref-new-badge { top:6px; right:6px; }
.anime-ref-rank {
    position:absolute;
    z-index:3;
    right:6px;
    bottom:3px;
    color:var(--oscar-text);
    font-size:1.6rem;
    font-weight:950;
    line-height:1;
    text-shadow:0 2px 0 #000000,0 0 12px rgba(0,0,0,.52);
}

.anime-ref-ratings-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.anime-ref-ratings-layout .anime-ref-section { min-width:0; }
.anime-ref-ratings-layout .anime-ref-poster-card { flex-basis: clamp(102px, 8.9vw, 135px); }

/* ------------------------------------------------------
   Weekly schedule.
   ------------------------------------------------------ */
.anime-ref-schedule-section {
    padding: 0;
    border-radius: 11px;
}
.anime-ref-schedule-days {
    min-height: 43px;
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    overflow:hidden;
    border:1px solid var(--oscar-border);
    border-radius:9px;
    background:#000000;
}
.anime-ref-schedule-days button {
    min-width:0;
    border:0;
    border-left:1px solid var(--oscar-border);
    color:var(--oscar-text);
    background:transparent;
    font:800 .62rem Tajawal,Arial,sans-serif;
}
.anime-ref-schedule-days button:last-child { border-left:0; }
.anime-ref-schedule-days button.active {
    color:var(--oscar-text);
    background:linear-gradient(180deg,#000000,#000000);
    box-shadow:inset 0 0 15px rgba(0,0,0,.06),0 0 18px rgba(0,0,0,.28);
}
.anime-ref-schedule-list {
    margin-top:7px;
    border:1px solid var(--oscar-border);
    border-radius:9px;
    overflow:hidden;
    background:#000000;
}
.anime-ref-schedule-item {
    width:100%;
    min-height:67px;
    padding:6px 10px;
    display:grid;
    grid-template-columns:95px minmax(0,1fr) 68px 94px;
    align-items:center;
    gap:11px;
    border:0;
    border-top:1px solid var(--oscar-border);
    color:var(--oscar-text);
    background:transparent;
    text-align:right;
}
.anime-ref-schedule-item:first-child { border-top:0; }
.anime-ref-schedule-item > img,
.anime-ref-schedule-item > .nova-fast-image {
    width:95px!important;
    height:54px!important;
    object-fit:cover!important;
    border-radius:6px;
}
.anime-ref-schedule-item > span:nth-of-type(1) { min-width:0; display:grid; gap:3px; }
.anime-ref-schedule-item strong { overflow:hidden; font-size:.72rem; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-item small { overflow:hidden; color:var(--oscar-muted); font-size:.56rem; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-item time { color:var(--accent); font-size:.84rem; font-weight:950; }
.anime-ref-remind {
    min-height:34px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--oscar-border);
    border-radius:7px;
    color:var(--accent);
}
.anime-ref-remind b { color:var(--oscar-text); font-size:.58rem; }
.anime-ref-schedule-empty {
    min-height:78px;
    margin-top:7px;
    padding:12px 15px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid var(--oscar-border);
    border-radius:9px;
    color:var(--accent);
    background:#000000;
}
.anime-ref-schedule-empty > span { display:grid; gap:2px; }
.anime-ref-schedule-empty strong { color:var(--oscar-text); font-size:.72rem; }
.anime-ref-schedule-empty small { color:var(--oscar-muted); font-size:.56rem; }
.anime-ref-ad-slot { margin-top:18px; }

/* ------------------------------------------------------
   Mobile reference composition.
   ------------------------------------------------------ */
@media (max-width: 860px) {
    .anime-ref-shell {
        width:100%;
        padding: calc(10px + var(--safe-top, env(safe-area-inset-top, 0px))) 12px calc(var(--bottom-nav-h,78px) + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 16px);
        background:#000000;
    }
    .anime-ref-topbar { min-height:58px; }
    .anime-ref-brand img { width:82px; max-height:34px; }
    .anime-ref-brand span { display:none; }
    .anime-ref-tools { gap:2px; }
    .anime-ref-tools > button { width:36px; height:36px; }
    .anime-ref-tools .anime-ref-avatar { width:42px; height:42px; padding:2px; margin-left:4px; }

    .anime-ref-type-switcher {
        width:100%;
        min-height:72px;
        margin:4px auto 13px;
    }
    .anime-ref-type-switcher > button { padding:8px 11px; gap:8px; }
    .anime-ref-type-switcher strong { font-size:.79rem; }
    .anime-ref-type-switcher small { font-size:.50rem; }
    .anime-ref-type-icon { width:28px; height:28px; }
    .anime-ref-switch-diamond { width:32px; height:32px; }

    .anime-ref-hero { min-height:254px; border-radius:10px; }
    .anime-ref-hero-art .anime-ref-hero-image { object-position:70% center!important; }
    .anime-ref-hero-shade {
        background:
            linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.82) 37%,rgba(0,0,0,.21) 72%),
            linear-gradient(0deg,rgba(0,0,0,.74),transparent 46%);
    }
    .anime-ref-hero-copy {
        left:17px;
        top:50%;
        width:58%;
        transform:translateY(-48%);
    }
    .anime-ref-exclusive { margin-bottom:6px; font-size:.56rem; }
    .anime-ref-hero h1 { font-size:clamp(1.55rem,8vw,2.25rem); }
    .anime-ref-hero p { margin-top:7px; font-size:.58rem; line-height:1.7; -webkit-line-clamp:2; }
    .anime-ref-hero-meta { display:none; }
    .anime-ref-hero-actions { margin-top:11px; }
    .anime-ref-hero-actions button { min-height:37px; padding:0 13px; border-radius:7px; font-size:.62rem; }
    .anime-ref-hero-actions .primary { min-width:112px; }
    .anime-ref-hero-actions .secondary { display:none; }
    .anime-ref-hero-arrow { width:30px; height:30px; top:auto; bottom:9px; transform:none; }
    .anime-ref-hero-arrow.previous { right:8px; }
    .anime-ref-hero-arrow.next { display:none; }
    .anime-ref-hero-dots { bottom:9px; gap:7px; }
    .anime-ref-hero-dots button { width:6px; height:6px; }

    .anime-ref-section { margin-top:13px; }
    .anime-ref-section-head { min-height:28px; margin-bottom:6px; }
    .anime-ref-section-head h2 { font-size:.92rem; }
    .anime-ref-section-head button { font-size:.59rem; }

    .anime-ref-studio-card { flex:0 0 96px; min-width:96px; height:54px; padding:6px 8px; border-radius:6px; }
    .anime-ref-studio-card img { max-height:34px; }
    .anime-ref-studio-card strong { font-size:.58rem; }

    .anime-ref-episode-rail { gap:8px; }
    .anime-ref-episode-card { flex:0 0 43vw; border-radius:7px; }
    .anime-ref-episode-art { height:94px; }
    .anime-ref-card-copy { padding:7px 7px 8px; }
    .anime-ref-card-copy strong { font-size:.64rem; }
    .anime-ref-card-copy small { font-size:.49rem; }
    .anime-ref-card-play { width:31px; height:31px; }

    .anime-ref-poster-rail { gap:8px; }
    .anime-ref-poster-card { flex:0 0 29vw; }
    .anime-ref-poster-art { border-radius:6px; }
    .anime-ref-poster-card .anime-ref-card-copy strong { font-size:.61rem; }
    .anime-ref-poster-card .anime-ref-card-copy small { font-size:.47rem; }
    .anime-ref-score { top:5px; left:5px; font-size:.48rem; }
    .anime-ref-rank { font-size:1.35rem; }

    .anime-ref-ratings-layout { display:block; }
    .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:29vw; }
    .anime-ref-rating-section.movies { margin-top:14px; }

    .anime-ref-schedule-days { min-height:38px; overflow-x:auto; display:flex; scrollbar-width:none; }
    .anime-ref-schedule-days::-webkit-scrollbar { display:none; }
    .anime-ref-schedule-days button { flex:0 0 68px; border-left:1px solid var(--oscar-border); font-size:.56rem; }
    .anime-ref-schedule-item { grid-template-columns:86px minmax(0,1fr) 50px; gap:8px; min-height:63px; padding:5px 7px; }
    .anime-ref-schedule-item > img,
    .anime-ref-schedule-item > .nova-fast-image { width:86px!important; height:50px!important; }
    .anime-ref-schedule-item time { font-size:.72rem; }
    .anime-ref-remind { display:none!important; }
    .anime-ref-schedule-empty { min-height:68px; }
}

@media (max-width: 390px) {
    .anime-ref-shell { padding-inline:10px; }
    .anime-ref-type-switcher strong { font-size:.72rem; }
    .anime-ref-type-switcher small { font-size:.46rem; }
    .anime-ref-hero { min-height:238px; }
    .anime-ref-hero-copy { width:62%; left:14px; }
    .anime-ref-poster-card { flex-basis:31vw; }
    .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:31vw; }
}

/* Windows/desktop: condensed rails, side-by-side ranking blocks, no global bottom nav. */
@media (min-width: 861px) {
    .catalog-landing-anime .catalog-landing-main { padding-bottom:20px!important; }
    .anime-ref-studios-section { margin-top:17px; }
    .anime-ref-episodes-section { margin-top:13px; }
}

@media (hover:hover) {
    .anime-ref-type-switcher > button:hover,
    .anime-ref-studio-card:hover,
    .anime-ref-episode-card:hover,
    .anime-ref-poster-card:hover .anime-ref-poster-art {
        border-color:var(--accent);
    }
    .anime-ref-episode-card:hover,
    .anime-ref-poster-card:hover { transform:translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
    .anime-ref-shell *,
    .anime-ref-shell *::before,
    .anime-ref-shell *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}

/* Desktop composition mirrors the supplied wide-screen reference: hero first,
   today's episodes beside the weekly schedule, rankings below, studios last. */
@media (min-width: 861px) {
    .anime-ref-shell {
        display:grid;
        grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
        grid-template-areas:
            "top top"
            "state state"
            "switch switch"
            "hero hero"
            "continue continue"
            "episodes schedule"
            "latest latest"
            "ratings ratings"
            "studios studios"
            "ad ad";
        column-gap:18px;
        align-items:start;
    }
    .anime-ref-topbar { grid-area:top; }
    .anime-ref-connection-state { grid-area:state; }
    .anime-ref-type-switcher { grid-area:switch; }
    .anime-ref-hero { grid-area:hero; }
    .anime-ref-continue-section { grid-area:continue; }
    .anime-ref-episodes-section { grid-area:episodes; min-width:0; margin-top:14px; }
    .anime-ref-schedule-section { grid-area:schedule; min-width:0; margin-top:14px; }
    .anime-ref-latest-section { grid-area:latest; }
    .anime-ref-ratings-layout { grid-area:ratings; }
    .anime-ref-studios-section { grid-area:studios; }
    .anime-ref-ad-slot { grid-area:ad; }

    .anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(150px,12.6vw,195px); }
    .anime-ref-episodes-section .anime-ref-episode-art { height:94px; }
    .anime-ref-schedule-section .anime-ref-section-head,
    .anime-ref-episodes-section .anime-ref-section-head { min-height:31px; }
    .anime-ref-schedule-days { min-height:39px; }
    .anime-ref-schedule-item { grid-template-columns:72px minmax(0,1fr) 52px; gap:8px; min-height:57px; padding:5px 7px; }
    .anime-ref-schedule-item > img,
    .anime-ref-schedule-item > .nova-fast-image { width:72px!important; height:44px!important; }
    .anime-ref-schedule-item .anime-ref-remind { display:none!important; }
}

/* ======================================================
   Phase 2 — Native Data & UX refinement
   ====================================================== */
.anime-ref-connection-state {
    width: fit-content;
    min-height: 28px;
    margin: -3px 0 8px auto;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(0,0,0,.82);
    font-size: .56rem;
    font-weight: 800;
}
.anime-ref-connection-state.offline { color: var(--accent); border-color: var(--accent); }
.anime-ref-connection-state.synced i { width: 6px; height: 6px; border-radius: 50%; background: #000000; box-shadow: 0 0 9px rgba(0,0,0,.8); }
.anime-ref-section-note { color: var(--oscar-muted); font-size: .61rem; font-weight: 700; }

.anime-ref-continue-section { margin-top: 17px; }
.anime-ref-continue-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.anime-ref-continue-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--oscar-border);
    border-radius: 9px;
    color: var(--oscar-text);
    background: #000000;
    text-align: right;
    cursor: pointer;
}
.anime-ref-continue-art { position: relative; width: 132px; height: 68px; display: block; overflow: hidden; background: #000000; }
.anime-ref-continue-art > .nova-fast-image,
.anime-ref-continue-art img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.anime-ref-continue-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.05),rgba(0,0,0,.30)); pointer-events:none; }
.anime-ref-continue-art .anime-ref-card-play { z-index: 3; width: 30px; height: 30px; }
.anime-ref-continue-progress { position: absolute; z-index: 4; right: 6px; left: 6px; bottom: 5px; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(0,0,0,.18); }
.anime-ref-continue-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#000000,#000000); box-shadow:0 0 8px rgba(0,0,0,.66); }
.anime-ref-continue-copy { min-width:0; display:grid; gap:4px; }
.anime-ref-continue-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--oscar-text); font-size:.66rem; font-weight:900; }
.anime-ref-continue-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--oscar-muted); font-size:.53rem; }
.anime-ref-continue-card > b { padding-left:9px; color:var(--accent); font-size:.55rem; font-weight:900; }
.anime-ref-continue-card:active { transform: scale(.985); }

/* Skeleton mirrors the final reference hierarchy instead of showing a generic spinner. */
.anime-ref-skeleton-shell { pointer-events:none; }
.anime-ref-skeleton-brand { width:104px; height:32px; border-radius:7px; }
.anime-ref-skeleton-tools { display:flex; align-items:center; gap:9px; }
.anime-ref-skeleton-tools i { width:38px; height:38px; display:block; border-radius:50%; }
.anime-ref-skeleton-switcher { overflow:hidden; border-radius:17px; gap:4px; }
.anime-ref-skeleton-switcher > span { min-height:68px; display:block; border-radius:14px; }
.anime-ref-skeleton-hero { min-height:clamp(280px,29vw,390px); }
.anime-ref-skeleton-hero-copy { position:absolute; z-index:3; left:5%; top:50%; width:min(42%,470px); transform:translateY(-50%); display:grid; gap:11px; }
.anime-ref-skeleton-hero-copy i { width:74px; height:13px; border-radius:5px; background:rgba(0,0,0,.13); }
.anime-ref-skeleton-hero-copy strong { width:72%; height:48px; border-radius:8px; background:rgba(0,0,0,.10); }
.anime-ref-skeleton-hero-copy span { width:100%; height:33px; border-radius:8px; background:rgba(0,0,0,.08); }
.anime-ref-skeleton-hero-copy b { width:122px; height:39px; border-radius:9px; background:rgba(0,0,0,.18); }
.anime-ref-skeleton-section .anime-ref-section-head h2 > span { width:140px; height:18px; display:block; border-radius:5px; }
.anime-ref-skeleton-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.anime-ref-skeleton-cards > i { display:block; aspect-ratio:16/9; border-radius:10px; }

/* Logos are real first-party proxied images in Phase 2; keep them crisp and neutral. */
.anime-ref-studio-card img { max-width:84%; max-height:54px; object-fit:contain; filter:none; }

@media(max-width:1100px) {
    .anime-ref-continue-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
    .anime-ref-connection-state { margin-top:1px; margin-bottom:7px; }
    .anime-ref-continue-rail { display:flex; overflow-x:auto; gap:8px; scrollbar-width:none; scroll-snap-type:x proximity; }
    .anime-ref-continue-rail::-webkit-scrollbar { display:none; }
    .anime-ref-continue-card { flex:0 0 min(82vw,330px); grid-template-columns:112px minmax(0,1fr) auto; scroll-snap-align:start; }
    .anime-ref-continue-art { width:112px; height:64px; }
    .anime-ref-skeleton-hero-copy { left:16px; right:16px; bottom:24px; top:auto; width:auto; transform:none; }
    .anime-ref-skeleton-cards { display:flex; overflow:hidden; }
    .anime-ref-skeleton-cards > i { flex:0 0 31vw; min-height:128px; aspect-ratio:2/3; }
}
@media(max-width:760px) {
    /* The supplied phone reference moves directly from Hero to Studios. */
    .anime-ref-continue-section { display:none; }
}

/* ======================================================
   Phase 3 — Schedule + pixel polish against the supplied
   Android and Windows visual references.
   ====================================================== */
.anime-ref-chrome { position: relative; }
.anime-ref-brand-lockup {
    position:relative;
    width:96px;
    height:43px;
    display:grid;
    align-content:center;
    justify-items:start;
    line-height:.78;
    letter-spacing:-.055em;
    color:var(--oscar-text);
}
.anime-ref-brand-lockup b,
.anime-ref-brand-lockup strong { display:block; font-family:inherit; font-size:1.18rem; font-weight:950; }
.anime-ref-brand-lockup strong { margin-top:2px; }
.anime-ref-brand-lockup i {
    position:absolute;
    left:62px;
    top:17px;
    width:9px;
    height:9px;
    transform:rotate(45deg);
    background:#000000;
    box-shadow:0 0 14px rgba(0,0,0,.95);
}
.anime-ref-mobile-label { display:none; }
.anime-ref-desktop-label { display:inline; }

.anime-ref-schedule-item {
    padding:0;
    grid-template-columns:minmax(0,1fr) 92px;
    gap:0;
}
.anime-ref-schedule-open {
    min-width:0;
    min-height:66px;
    padding:6px 10px;
    display:grid;
    grid-template-columns:95px minmax(0,1fr) 68px;
    align-items:center;
    gap:11px;
    border:0;
    color:var(--oscar-text);
    background:transparent;
    text-align:right;
    font:inherit;
}
.anime-ref-schedule-open > img,
.anime-ref-schedule-open > .nova-fast-image {
    width:95px!important;
    height:54px!important;
    object-fit:cover!important;
    border-radius:6px;
}
.anime-ref-schedule-open > span { min-width:0; display:grid; gap:3px; }
.anime-ref-schedule-open strong { overflow:hidden; font-size:.72rem; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-open small { overflow:hidden; color:var(--oscar-muted); font-size:.56rem; white-space:nowrap; text-overflow:ellipsis; }
.anime-ref-schedule-open time { color:var(--accent); font-size:.84rem; font-weight:950; }
.anime-ref-schedule-item.estimated .anime-ref-schedule-open time { color:var(--accent); font-size:.62rem; }
.anime-ref-schedule-item .anime-ref-remind {
    width:82px;
    min-height:34px;
    margin:0 6px;
    align-self:center;
    border:1px solid var(--accent);
    background:#000000;
    font:inherit;
}
.anime-ref-schedule-item .anime-ref-remind.active {
    border-color:var(--accent);
    color:var(--accent);
    background:rgba(0,0,0,.24);
    box-shadow:inset 0 0 12px rgba(0,0,0,.12);
}

@media (min-width: 861px) {
    .anime-ref-shell {
        width:min(100%,1480px);
        padding-top:12px;
        padding-inline:clamp(28px,3vw,52px);
        grid-template-columns:minmax(0,1.27fr) minmax(340px,.73fr);
        grid-template-areas:
            "top top"
            "state state"
            "hero hero"
            "continue continue"
            "episodes schedule"
            "ratings ratings"
            "studios studios"
            "ad ad";
        column-gap:18px;
    }
    .anime-ref-chrome { grid-area:top; min-height:78px; }
    .anime-ref-topbar { min-height:78px; }
    .anime-ref-type-switcher {
        position:absolute;
        z-index:4;
        top:2px;
        left:50%;
        width:min(560px,48vw);
        min-height:70px;
        margin:0;
        transform:translateX(-50%);
    }
    .anime-ref-connection-state { grid-area:state; }
    .anime-ref-hero {
        grid-area:hero;
        min-height:clamp(292px,23.5vw,350px);
        border-radius:12px;
    }
    .anime-ref-hero-copy { width:min(39%,500px); left:36px; }
    .anime-ref-hero h1 { font-size:clamp(2.25rem,3.7vw,3.85rem); }
    .anime-ref-hero p { max-width:440px; }
    .anime-ref-hero-art .anime-ref-hero-image { object-position:72% center!important; }
    .anime-ref-continue-section { grid-area:continue; margin-top:10px; }
    .anime-ref-episodes-section { grid-area:episodes; }
    .anime-ref-schedule-section { grid-area:schedule; }
    .anime-ref-ratings-layout { grid-area:ratings; gap:14px; }
    .anime-ref-studios-section { grid-area:studios; }
    .anime-ref-ad-slot { grid-area:ad; }
    .anime-ref-latest-section { display:none; }

    .anime-ref-episode-rail { gap:8px; }
    .anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(132px,11vw,178px); }
    .anime-ref-episodes-section .anime-ref-episode-art { height:86px; }
    .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:clamp(90px,7.6vw,118px); }
    .anime-ref-studios-rail { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px; overflow:visible; }
    .anime-ref-studio-card { width:100%; min-width:0; flex:none; height:58px; }

    .anime-ref-schedule-open {
        min-height:56px;
        padding:5px 7px;
        grid-template-columns:70px minmax(0,1fr) 50px;
        gap:8px;
    }
    .anime-ref-schedule-open > img,
    .anime-ref-schedule-open > .nova-fast-image { width:70px!important; height:43px!important; }
    .anime-ref-schedule-open time { font-size:.70rem; }
    .anime-ref-schedule-item { grid-template-columns:minmax(0,1fr) 72px; min-height:56px; }
    .anime-ref-schedule-item .anime-ref-remind { width:64px; min-height:30px; margin-inline:4px; }
    .anime-ref-schedule-item .anime-ref-remind b { font-size:.52rem; }
}

@media (max-width: 860px) {
    .anime-ref-mobile-label { display:inline; }
    .anime-ref-desktop-label { display:none; }
    .anime-ref-chrome { display:block; }
    .anime-ref-brand-lockup { width:84px; height:38px; }
    .anime-ref-brand-lockup b,
    .anime-ref-brand-lockup strong { font-size:1.02rem; }
    .anime-ref-brand-lockup i { left:55px; top:15px; width:8px; height:8px; }
    .anime-ref-type-switcher { position:relative; transform:none; }
    .anime-ref-hero { min-height:260px; }
    .anime-ref-studios-section { margin-top:13px; }
    .anime-ref-rating-section.movies { display:none; }
    .anime-ref-schedule-section { margin-top:13px; }
    .anime-ref-schedule-item { grid-template-columns:minmax(0,1fr) 68px; min-height:63px; }
    .anime-ref-schedule-open { min-height:62px; padding:5px 7px; grid-template-columns:82px minmax(0,1fr) 48px; gap:8px; }
    .anime-ref-schedule-open > img,
    .anime-ref-schedule-open > .nova-fast-image { width:82px!important; height:49px!important; }
    .anime-ref-schedule-open time { font-size:.70rem; }
    .anime-ref-schedule-item .anime-ref-remind { display:flex!important; width:60px; min-height:32px; margin-inline:3px; }
    .anime-ref-schedule-item .anime-ref-remind b { display:none; }
    .anime-ref-schedule-item.estimated .anime-ref-remind { opacity:.72; }
}

@media (max-width: 430px) {
    .anime-ref-shell { padding-inline:10px; }
    .anime-ref-topbar { min-height:56px; }
    .anime-ref-type-switcher { min-height:74px; margin-top:5px; }
    .anime-ref-type-switcher > button { padding-inline:9px; }
    .anime-ref-type-switcher strong { font-size:.76rem; }
    .anime-ref-type-switcher small { font-size:.46rem; }
    .anime-ref-hero { min-height:248px; }
    .anime-ref-hero-copy { left:14px; width:61%; }
    .anime-ref-hero h1 { font-size:1.85rem; }
    .anime-ref-studio-card { flex-basis:92px; min-width:92px; }
    .anime-ref-episode-card { flex-basis:44vw; }
    .anime-ref-poster-card,
    .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:30.5vw; }
}

/* ======================================================
   Phase 4 — Native interaction + production polish
   Reference lock: supplied Android + Windows captures.
   ====================================================== */
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
    --anime-ref-focus: var(--accent);
    --anime-ref-focus-soft: var(--oscar-border);
    content-visibility: auto;
    contain-intrinsic-size: auto 1500px;
}

.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] button,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] [tabindex] {
    -webkit-tap-highlight-color: transparent;
}

.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] button:focus-visible,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] [tabindex]:focus-visible {
    outline: 2px solid var(--anime-ref-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px var(--anime-ref-focus-soft), 0 0 22px rgba(0,0,0,.20);
}

.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
    touch-action: pan-y pinch-zoom;
    will-change: transform;
}

.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
    transform: translateZ(0);
    backface-visibility: hidden;
}

.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy,
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art {
    animation: animePhase4HeroReveal .32s cubic-bezier(.2,.74,.25,1);
}

@keyframes animePhase4HeroReveal {
    from { opacity: .72; }
    to { opacity: 1; }
}

.anime-ref-studios-rail,
.anime-ref-episode-rail,
.anime-ref-poster-rail,
.anime-ref-schedule-days,
.anime-ref-continue-rail {
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 8px;
    -webkit-overflow-scrolling: touch;
}

.anime-ref-episode-card,
.anime-ref-poster-card,
.anime-ref-studio-card,
.anime-ref-continue-card,
.anime-ref-schedule-open,
.anime-ref-remind {
    transition: transform .14s ease, border-color .14s ease, background-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}

.anime-ref-episode-card:active,
.anime-ref-poster-card:active,
.anime-ref-studio-card:active,
.anime-ref-continue-card:active,
.anime-ref-schedule-open:active,
.anime-ref-remind:active {
    transform: scale(.975);
}

/* The reference uses very quiet chrome. Keep state visible but subordinate. */
.anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-connection-state {
    opacity: .78;
    backdrop-filter: blur(12px);
}

/* Mobile reference lock — dimensions and density follow the supplied phone capture. */
@media (max-width: 860px) {
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
        padding-top: calc(11px + var(--safe-top, env(safe-area-inset-top,0px)));
        padding-inline: 11px;
        row-gap: 0;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-topbar {
        min-height: 58px;
        margin-bottom: 9px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools > button {
        width: 39px;
        height: 39px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools .anime-ref-avatar {
        width: 45px;
        height: 45px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher {
        width: 100%;
        min-height: 78px;
        margin: 1px auto 11px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-switch-diamond {
        width: 34px;
        height: 34px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
        min-height: clamp(244px, 60vw, 296px);
        border-radius: 13px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
        left: 16px;
        width: 62%;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero h1 {
        font-size: clamp(1.72rem, 8.1vw, 2.28rem);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero p {
        margin-top: 7px;
        font-size: .65rem;
        line-height: 1.7;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-meta { display:none; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions { margin-top: 13px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions button {
        min-height: 40px;
        padding-inline: 15px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions .secondary { display:none; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section { margin-top: 15px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head {
        min-height: 29px;
        margin-bottom: 7px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head h2 {
        font-size: 1rem;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head button {
        min-height: 28px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studios-rail { gap: 8px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studio-card {
        flex-basis: 96px;
        min-width: 96px;
        height: 58px;
        border-radius: 7px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-rail { gap: 8px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-card {
        flex-basis: min(43vw, 174px);
        border-radius: 8px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-art { height: 116px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-rail { gap: 8px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-card,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card {
        flex-basis: min(30.4vw, 124px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-days {
        border-radius: 10px;
        padding: 3px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-days > button {
        min-width: 58px;
        min-height: 33px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-schedule-list {
        margin-top: 7px;
        border-radius: 10px;
    }
}

@media (max-width: 390px) {
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher strong { font-size:.72rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher small { display:none; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-icon { width:28px; height:28px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero { min-height:232px; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episode-card { flex-basis:45vw; }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-poster-card,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:31.4vw; }
}

/* Desktop reference lock — compact 16:9 composition and four-card continue rail. */
@media (min-width: 861px) {
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] {
        width: min(100%, 1470px);
        padding: 12px clamp(26px, 2.75vw, 48px) 24px;
        grid-template-columns: minmax(0, 1.31fr) minmax(340px, .69fr);
        column-gap: 17px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-chrome,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-topbar {
        min-height: 73px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-type-switcher {
        top: 1px;
        width: min(560px, 47vw);
        min-height: 68px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero {
        min-height: clamp(304px, 22.7vw, 346px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy {
        left: 34px;
        width: min(39%, 490px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-rail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 11px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-card {
        grid-template-columns: 126px minmax(0, 1fr) auto;
        min-height: 68px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-continue-art {
        width:126px;
        height:68px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episodes-section .anime-ref-episode-card {
        flex-basis: clamp(128px, 10.45vw, 168px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-episodes-section .anime-ref-episode-art {
        height: 82px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout {
        gap: 13px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-ratings-layout .anime-ref-poster-card {
        flex-basis: clamp(88px, 7.2vw, 112px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-studio-card {
        height: 56px;
    }
}

@media (hover:hover) and (pointer:fine) {
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-tools > button:hover,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-section-head button:hover {
        color:var(--accent);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-actions button:hover,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-remind:hover {
        border-color: var(--accent);
        box-shadow: 0 0 18px rgba(0,0,0,.16);
    }
}

@media (prefers-reduced-motion: reduce) {
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-copy,
    .anime-ref-shell[data-anime-native-phase="reference-v4-native-runtime"] .anime-ref-hero-art {
        animation: none !important;
    }
}


/* ======================================================
   Phase 5 — Final screenshot-reference density lock
   Supplied Android + Windows captures remain the geometry reference.
   This block intentionally overrides earlier phase dimensions only inside V5.
   ====================================================== */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
    --anime-v5-purple:var(--accent);
    --anime-v5-purple-hot:var(--accent);
    --anime-v5-hairline:rgba(255,255,255,.17);
    background:#000000;
}

/* The reference does not show a normal-online status chip. Offline remains explicit. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-connection-state.synced { display:none!important; }
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-connection-state.offline {
    margin-block:1px 7px;
    opacity:.88;
}

/* Sharper, quieter outlines matching the supplied black/purple UI. */
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher > button,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-art,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-list,
.anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-card {
    border-color:var(--anime-v5-hairline);
}

@media (max-width:860px) {
    /* Phone reference is intentionally dense: six studios, about four episode/poster
       cards and five ranked cards are visible without a swipe. */
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
        padding-top:calc(9px + var(--safe-top, env(safe-area-inset-top,0px)));
        padding-inline:12px;
        padding-bottom:calc(68px + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 12px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-topbar {
        min-height:52px;
        margin-bottom:7px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup {
        width:78px;
        height:35px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup b,
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup strong {
        font-size:.96rem;
        letter-spacing:-.045em;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-brand-lockup i {
        left:51px; top:13px; width:8px; height:8px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools { gap:1px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools > button { width:35px; height:35px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-tools .anime-ref-avatar { width:41px; height:41px; margin-left:3px; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher {
        min-height:61px;
        margin:2px auto 10px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher > button {
        padding:7px 8px;
        gap:7px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher strong { font-size:.72rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher small { font-size:.43rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-icon { width:27px; height:27px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-switch-diamond { width:30px; height:30px; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero {
        min-height:clamp(164px,43vw,206px);
        border-radius:10px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-copy {
        left:14px;
        width:53%;
        transform:translateY(-47%);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-exclusive { margin-bottom:4px; font-size:.50rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero h1 { font-size:clamp(1.38rem,6.7vw,1.78rem); }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero p {
        margin-top:5px;
        font-size:.50rem;
        line-height:1.55;
        -webkit-line-clamp:2;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-actions { margin-top:9px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-actions button {
        min-height:34px;
        padding-inline:12px;
        border-radius:6px;
        font-size:.56rem;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-dots { bottom:7px; gap:6px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-dots button { width:5px; height:5px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-arrow { width:27px; height:27px; bottom:6px; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section { margin-top:11px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head { min-height:24px; margin-bottom:5px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head h2 { font-size:.84rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-section-head button { min-height:23px; font-size:.53rem; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studios-rail { gap:6px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card {
        flex:0 0 calc((100vw - 24px - 30px) / 6);
        min-width:calc((100vw - 24px - 30px) / 6);
        height:43px;
        padding:4px 5px;
        border-radius:5px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card img { max-width:90%; max-height:29px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card strong { font-size:.43rem; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-rail { gap:7px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card {
        flex:0 0 min(23.8vw,104px);
        border-radius:6px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-art { height:68px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-new-badge { top:4px; right:4px; min-height:16px; padding-inline:4px; font-size:.42rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-play { width:27px; height:27px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy { padding:5px 5px 6px; gap:2px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy strong { font-size:.52rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-card-copy small { font-size:.42rem; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-rail { gap:7px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card {
        flex:0 0 min(23.2vw,102px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rating-section.series .anime-ref-poster-card {
        flex-basis:min(18.5vw,82px);
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-art { border-radius:5px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy { padding:4px 1px 0; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy strong { font-size:.50rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card .anime-ref-card-copy small { font-size:.40rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-score { top:4px; left:4px; min-height:16px; padding-inline:4px; font-size:.42rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rank { right:4px; bottom:2px; font-size:1.05rem; }

    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days {
        min-height:35px;
        display:grid;
        grid-template-columns:repeat(7,minmax(0,1fr));
        overflow:hidden;
        padding:2px;
        border-radius:8px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days > button {
        min-width:0;
        min-height:29px;
        padding:0 2px;
        font-size:.45rem;
        border-radius:7px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-list { margin-top:5px; border-radius:8px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item { min-height:51px; grid-template-columns:minmax(0,1fr) 54px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open {
        min-height:51px;
        padding:4px 6px;
        grid-template-columns:72px minmax(0,1fr) 44px;
        gap:6px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > img,
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > .nova-fast-image { width:72px!important; height:41px!important; border-radius:5px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item strong { font-size:.55rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item small { font-size:.43rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open time { font-size:.61rem; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-item .anime-ref-remind { width:50px; min-height:28px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-empty { min-height:58px; margin-top:5px; padding:8px 10px; }
}

@media (max-width:390px) {
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher small { display:none; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero { min-height:158px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episode-card { flex-basis:24.4vw; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-poster-card { flex-basis:23.7vw; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-rating-section.series .anime-ref-poster-card { flex-basis:19vw; }
}

@media (min-width:861px) {
    /* Wide reference is a dense ~1280px content canvas rather than a stretched web page. */
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] {
        width:min(calc(100% - 24px),1280px);
        padding:10px 28px 20px;
        grid-template-columns:minmax(0,1.34fr) minmax(330px,.66fr);
        column-gap:15px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-chrome,
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-topbar { min-height:68px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-type-switcher {
        top:0;
        width:min(540px,46vw);
        min-height:64px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero {
        min-height:clamp(238px,18vw,270px);
        border-radius:10px;
    }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero-copy { left:31px; width:min(38%,455px); }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero h1 { font-size:clamp(2rem,3.1vw,3.15rem); }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-hero p { max-width:410px; font-size:.72rem; line-height:1.65; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-section { margin-top:8px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-card { min-height:61px; grid-template-columns:116px minmax(0,1fr) auto; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-continue-art { width:116px; height:61px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episodes-section .anime-ref-episode-card { flex-basis:clamp(118px,9.6vw,148px); }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-episodes-section .anime-ref-episode-art { height:72px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-ratings-layout .anime-ref-poster-card { flex-basis:clamp(82px,6.8vw,100px); }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studios-rail { gap:10px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-studio-card { height:52px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-days { min-height:35px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open { min-height:50px; grid-template-columns:64px minmax(0,1fr) 46px; }
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > img,
    .anime-ref-shell[data-anime-native-phase="reference-v5-final-lock"] .anime-ref-schedule-open > .nova-fast-image { width:64px!important; height:39px!important; }
}

/* ======================================================
   Phase 6 — Release Candidate geometry + WebView stability lock
   Final static geometry pass based on the supplied phone/Windows references.
   Keeps the V5 visual language but removes WebView/DPI variability and
   stabilizes rail density at the two production form factors.
   ====================================================== */
.anime-ref-shell[data-anime-phase6-root="true"] {
    --anime-phase6-vw: 100vw;
    --anime-phase6-vh: 100dvh;
    --anime-phase6-hairline: rgba(255,255,255,.16);
    --anime-phase6-purple: var(--accent);
    --anime-phase6-hot: var(--accent);
    overscroll-behavior-y: contain;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(button,a) {
    -webkit-tap-highlight-color: transparent;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-studios-rail,.anime-ref-episode-rail,.anime-ref-poster-rail,.anime-ref-continue-rail) {
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
.anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-studio-card,.anime-ref-episode-card,.anime-ref-poster-card,.anime-ref-continue-card) {
    scroll-snap-align: start;
}
.anime-ref-shell[data-anime-phase6-root="true"][data-anime-hero-visible="false"] .anime-ref-hero-dots button {
    box-shadow:none!important;
}

/* Phone reference lock: 6 studio marks / 4 episode cards / 4 latest posters /
   5 ranked cards, one-line seven-day schedule and a ~2.25:1 cinematic hero. */
@media (max-width:860px) {
    .anime-ref-shell[data-anime-phase6-root="true"] {
        width:100%;
        max-width:540px;
        padding-top:calc(8px + var(--safe-top, env(safe-area-inset-top,0px)));
        padding-inline:13px;
        padding-bottom:calc(70px + var(--safe-bottom, env(safe-area-inset-bottom,0px)) + 10px);
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-topbar {
        min-height:50px;
        margin-bottom:7px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-brand-lockup { width:76px; height:34px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-tools > button { width:34px; height:34px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-tools .anime-ref-avatar { width:40px; height:40px; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher {
        width:100%;
        min-height:60px;
        margin:1px auto 10px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher > button { padding:6px 8px; gap:6px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher strong { font-size:.72rem; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher small { font-size:.42rem; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-switch-diamond { width:29px; height:29px; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero {
        min-height:0!important;
        height:auto;
        aspect-ratio:2.28 / 1;
        border-radius:9px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-art .anime-ref-hero-image {
        object-position:72% center!important;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-copy {
        left:13px;
        width:54%;
        transform:translateY(-48%);
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-exclusive { font-size:.49rem; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 {
        font-size:clamp(1.30rem,6.45vw,1.72rem);
        line-height:1.08;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero p {
        max-width:95%;
        margin-top:4px;
        font-size:.49rem;
        line-height:1.48;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-actions { margin-top:8px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-actions button {
        min-height:33px;
        padding-inline:11px;
        font-size:.55rem;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-dots { bottom:6px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-arrow { bottom:5px; width:26px; height:26px; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section { margin-top:10px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section-head { min-height:23px; margin-bottom:5px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-section-head h2 { font-size:.82rem; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studios-rail {
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:6px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card {
        width:100%; min-width:0; height:43px; flex:none; padding:4px;
    }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-rail {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-card {
        width:100%; min-width:0; flex:none;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episode-art {
        height:auto;
        aspect-ratio:1.08 / 1;
    }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-latest-section .anime-ref-poster-rail {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:7px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-latest-section .anime-ref-poster-card {
        width:100%; min-width:0; flex:none;
    }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.series .anime-ref-poster-rail {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:7px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.series .anime-ref-poster-card {
        width:100%; min-width:0; flex:none;
    }
    /* Mobile reference ends with series ranking + schedule; movies remain accessible
       from the Movies selector and catalogue instead of duplicating the desktop row. */
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-rating-section.movies { display:none!important; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-days {
        grid-template-columns:repeat(7,minmax(0,1fr));
        gap:0;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-days > button {
        min-height:28px;
        font-size:.44rem;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-open {
        grid-template-columns:74px minmax(0,1fr) 43px;
    }
}

/* Narrow phones: keep the same composition instead of falling back to a different design. */
@media (max-width:390px) {
    .anime-ref-shell[data-anime-phase6-root="true"] { padding-inline:10px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher small { display:none; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero { aspect-ratio:2.18 / 1; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 { font-size:1.28rem; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card { height:40px; }
}

/* Windows reference lock: centered 1280-ish canvas, compact hero, four continue
   cards, five today cards, three visible schedule entries, 6+6 rankings, seven studios. */
@media (min-width:861px) {
    .anime-ref-shell[data-anime-phase6-root="true"] {
        width:min(calc(100% - 28px),1280px);
        max-width:1280px;
        padding:10px 28px 18px;
        grid-template-columns:minmax(0,1.36fr) minmax(350px,.64fr);
        column-gap:14px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-chrome,
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-topbar { min-height:66px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-type-switcher {
        width:min(535px,45vw);
        min-height:62px;
        top:1px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero {
        min-height:0!important;
        height:auto;
        aspect-ratio:4.45 / 1;
        border-radius:9px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero-copy {
        left:30px;
        width:min(38%,430px);
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero h1 { font-size:clamp(2rem,3vw,3rem); }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-hero p { max-width:395px; font-size:.69rem; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-rail {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:12px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-card {
        width:100%; min-width:0; grid-template-columns:108px minmax(0,1fr) auto;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-continue-art { width:108px; height:58px; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-rail {
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:8px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-card {
        width:100%; min-width:0; flex:none;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-episodes-section .anime-ref-episode-art {
        height:auto;
        aspect-ratio:1.30 / 1;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-schedule-list .anime-ref-schedule-item:nth-child(n+4) { display:none; }

    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout { gap:13px; }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout .anime-ref-poster-rail {
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        gap:8px;
        overflow:visible;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-ratings-layout .anime-ref-poster-card {
        width:100%; min-width:0; flex:none;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studios-rail {
        grid-template-columns:repeat(7,minmax(0,1fr));
        gap:10px;
    }
    .anime-ref-shell[data-anime-phase6-root="true"] .anime-ref-studio-card { height:50px; }
}

/* Precision accessibility / keyboard focus without adding chrome to pointer/touch use. */
.anime-ref-shell[data-anime-phase6-root="true"] :is(button,a):focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px;
}
@media (prefers-contrast: more) {
    .anime-ref-shell[data-anime-phase6-root="true"] {
        --anime-phase6-hairline:rgba(255,255,255,.34);
    }
    .anime-ref-shell[data-anime-phase6-root="true"] :is(.anime-ref-hero,.anime-ref-studio-card,.anime-ref-episode-card,.anime-ref-poster-art,.anime-ref-schedule-days,.anime-ref-schedule-list) {
        border-color:var(--oscar-border)!important;
    }
}

/* ======================================================
   Phase 7 — Device calibration instrumentation lock
   The supplied references were cropped to their UI canvases (phone 680×1539,
   Windows 1228×851). Phase 7 locks the two most reliable reference ratios
   (hero geometry) and adds deterministic QA hooks. Remaining DPI/font offsets
   still require screenshots from the real Android/WebView2 builds.
   ====================================================== */
.anime-ref-shell[data-anime-phase7-root="true"] {
    --anime-phase7-reference-phone: 941 / 1672;
    --anime-phase7-reference-windows: 1448 / 1086;
    font-synthesis: none;
}
.anime-ref-shell[data-anime-phase7-root="true"][data-anime-calibration="true"] {
    isolation:isolate;
}
.anime-ref-shell[data-anime-phase7-root="true"] [data-anime-qa-label] {
    pointer-events:none!important;
}

@media (max-width:860px) {
    .anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:2.38 / 1; }
}
@media (max-width:390px) {
    .anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:2.30 / 1; }
}
@media (min-width:861px) {
    .anime-ref-shell[data-anime-phase7-root="true"] .anime-ref-hero { aspect-ratio:5.00 / 1; }
}

/* ======================================================
   Phase 8 — strict Anime format + schedule route
   ====================================================== */
.anime-schedule-page {
    min-height: 100dvh;
    padding-top: calc(18px + var(--safe-top, env(safe-area-inset-top, 0px)));
}
.anime-schedule-page-head {
    min-height: 78px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 8px 0 18px;
    border-bottom: 1px solid var(--oscar-border);
}
.anime-schedule-page-head > div { min-width: 0; }
.anime-schedule-page-head small { color: var(--anime-ref-purple-2); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.anime-schedule-page-head h1 { margin: 4px 0 3px; font-size: clamp(24px, 3vw, 36px); line-height: 1.1; }
.anime-schedule-page-head p { margin: 0; max-width: 720px; color: var(--anime-ref-muted); font-size: 13px; }
.anime-schedule-page-head > button {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    display: grid; place-items: center; border: 1px solid var(--anime-ref-line-soft);
    background: #000000; color: var(--oscar-text);
}
.anime-schedule-page-days { margin: 20px 0 18px; }
.anime-schedule-page-list { display: grid; gap: 10px; }
.anime-schedule-page-card {
    overflow: hidden; border: 1px solid var(--oscar-border); border-radius: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.96), rgba(0,0,0,.98));
}
.anime-schedule-page-card.estimated { border-color: var(--accent); }
.anime-schedule-page-open {
    width: 100%; min-height: 96px; display: grid; grid-template-columns: 150px minmax(0,1fr) 70px;
    align-items: center; gap: 14px; padding: 9px; text-align: right; border: 0; background: transparent; color: inherit;
}
.anime-schedule-page-open > .safe-image,
.anime-schedule-page-open > picture,
.anime-schedule-page-open > img,
.anime-schedule-page-open > :first-child {
    width: 150px; height: 78px; border-radius: 10px; overflow: hidden; object-fit: cover;
}
.anime-schedule-page-copy { min-width: 0; display: grid; gap: 4px; }
.anime-schedule-page-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.anime-schedule-page-copy small { color: var(--anime-ref-muted); font-size: 12px; }
.anime-schedule-page-copy em { width: fit-content; padding: 3px 7px; border-radius: 999px; color: var(--accent); background: rgba(0,0,0,.12); font-size: 10px; font-style: normal; }
.anime-schedule-page-open time { direction: ltr; justify-self: end; color: var(--oscar-text); font-weight: 800; font-size: 13px; }
.anime-schedule-page-loading { display: grid; gap: 10px; }
.anime-schedule-page-loading i { display: block; height: 96px; border-radius: 14px; }

@media (max-width: 760px) {
    .anime-schedule-page { padding-inline: 14px; }
    .anime-schedule-page-head { min-height: 68px; padding-bottom: 13px; }
    .anime-schedule-page-head h1 { font-size: 25px; }
    .anime-schedule-page-head p { display: none; }
    .anime-schedule-page-days { margin: 14px -2px 14px; display: grid !important; grid-template-columns: repeat(7,minmax(0,1fr)); overflow: visible !important; gap: 4px; }
    .anime-schedule-page-days button { min-width: 0 !important; padding-inline: 2px !important; font-size: 10px !important; }
    .anime-schedule-page-open { min-height: 82px; grid-template-columns: 92px minmax(0,1fr) 54px; gap: 10px; padding: 7px; }
    .anime-schedule-page-open > .safe-image,
    .anime-schedule-page-open > picture,
    .anime-schedule-page-open > img,
    .anime-schedule-page-open > :first-child { width: 92px; height: 68px; border-radius: 9px; }
    .anime-schedule-page-copy b { font-size: 13px; }
    .anime-schedule-page-copy small { font-size: 10px; }
    .anime-schedule-page-open time { font-size: 11px; }
}