/* source block: cinereel-build35-player-fixes */ /* ============================================================ CineREEL Build 36 — player architecture + icon cleanup ============================================================ */ /* Build 34's overlay chrome is intentionally retired. External iframe providers keep their own transport controls inside the video viewport; CineREEL navigation lives in reserved chrome outside that viewport. */ #crPlayerChrome{display:none!important} .player{background:#020304!important;overflow:hidden!important} .player iframe{border:0!important;background:#000!important} .cr35-player-shell{ position:absolute;inset:0;z-index:2; display:grid;grid-template-rows:68px minmax(0,1fr) 74px; background:#020304;color:#f6f7f8; } .cr35-player-top{ min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr) auto; align-items:center;gap:14px;padding:0 24px; border-bottom:1px solid #1c2026;background:#050608; box-shadow:0 8px 28px rgba(0,0,0,.28);z-index:5; } .cr35-player-top .player-back{ position:static!important;width:46px!important;height:46px!important; border:1px solid #343a44!important;background:#0b0d10!important; border-radius:50%!important;display:grid!important;place-items:center!important; color:#f4f5f6!important;z-index:auto!important;transition:.16s ease!important; } .cr35-player-top .player-back:hover,.cr35-player-top .player-back:focus-visible{ border-color:#68717e!important;background:#13171c!important;outline:none!important } .cr35-player-heading{min-width:0;text-align:center;pointer-events:none} .cr35-player-title{font-size:19px;font-weight:850;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr35-player-subtitle{margin-top:3px;color:#9ba5b3;font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr35-player-source-badge{ min-width:88px;height:36px;border:1px solid #303640;background:#0b0e12;color:#c8ced8; border-radius:999px;padding:0 13px;font-size:11px;font-weight:800;cursor:pointer; transition:.16s ease } .cr35-player-source-badge:hover,.cr35-player-source-badge:focus-visible{border-color:#5a6370;color:#fff;background:#13171c;outline:none} .cr35-player-stage{position:relative;min-width:0;min-height:0;background:#000;overflow:hidden;isolation:isolate} .cr35-player-stage iframe,.cr35-player-stage video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;background:#000!important} .cr35-player-stage iframe{z-index:1!important} .cr35-native-video{z-index:2;object-fit:contain}.cr35-native-video.hidden{display:none!important} .cr35-player-loading{ position:absolute;z-index:8;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px; border:3px solid #ffffff2a;border-top-color:#fff;border-radius:50%;animation:cr35Spin .7s linear infinite;pointer-events:none } .cr35-player-loading.hidden{display:none!important}@keyframes cr35Spin{to{transform:rotate(360deg)}} .cr35-player-message{ position:absolute;z-index:8;left:50%;top:calc(50% + 46px);transform:translateX(-50%); max-width:min(520px,80%);padding:8px 12px;border:1px solid #ffffff24;background:#07090ddd; border-radius:999px;color:#cbd2dc;font-size:11px;text-align:center;opacity:0;pointer-events:none;transition:opacity .16s ease } .cr35-player-message.show{opacity:1} .cr35-player-rail{ min-width:0;display:flex;align-items:center;gap:14px;padding:0 24px; border-top:1px solid #1d2229;background:#050608;box-shadow:0 -8px 28px rgba(0,0,0,.28);z-index:5 } .cr35-nowplaying{min-width:0;flex:1;display:flex;align-items:center;gap:11px} .cr35-nowplaying-mark{width:4px;height:34px;border-radius:99px;background:var(--red);flex:none} .cr35-nowplaying-copy{min-width:0}.cr35-nowplaying-main{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr35-nowplaying-meta{margin-top:4px;color:#8994a3;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr35-transport{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:none} .cr35-control{ height:42px;border:1px solid #2e343d;background:#0d1014;color:#eef1f4;border-radius:10px; padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:7px; font-size:12px;font-weight:760;cursor:pointer;transition:.16s ease;white-space:nowrap } .cr35-control.icon-only{width:42px;padding:0}.cr35-control svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cr35-control:hover,.cr35-control:focus-visible{border-color:#596371;background:#171b20;outline:none}.cr35-control.primary{border-color:color-mix(in srgb,var(--red) 54%,#2e343d);background:color-mix(in srgb,var(--red) 20%,#0d1014)} .cr35-cap-note{color:#727d8c;font-size:10px;margin-left:2px;white-space:nowrap} /* Custom transport is enabled only for native/direct streams. */ .cr35-native-controls{display:none;align-items:center;gap:8px;min-width:0;flex:1}.cr35-player-shell.native-mode .cr35-native-controls{display:flex}.cr35-player-shell.native-mode .cr35-nowplaying{display:none} .cr35-native-timeline{height:30px;display:flex;align-items:center;flex:1;min-width:140px;cursor:pointer} .cr35-native-track{height:4px;width:100%;background:#ffffff2c;border-radius:999px;overflow:hidden}.cr35-native-fill{height:100%;width:0;background:var(--red);border-radius:inherit} .cr35-native-time{font-size:10px;color:#a7afba;min-width:92px;text-align:center} /* Menus/drawers deliberately sit above the video viewport, not the provider's control strip. Back closes these before leaving playback. */ .cr35-source-menu{ position:absolute;z-index:30;right:20px;bottom:84px;width:270px;max-height:min(430px,60vh);overflow:auto; padding:8px;border:1px solid #303640;border-radius:14px;background:#090c10f8;box-shadow:0 24px 80px #000c; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:.18s ease } .cr35-source-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} .cr35-source-menu-title{padding:7px 9px 8px;color:#7f8998;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase} .cr35-source-option{width:100%;height:44px;border:0;border-radius:9px;background:transparent;color:#bdc5d0;display:flex;align-items:center;gap:10px;padding:0 11px;text-align:left;cursor:pointer;font-size:12px;font-weight:700} .cr35-source-option:hover,.cr35-source-option:focus-visible{background:#171b21;color:#fff;outline:none}.cr35-source-option.active{background:#1a1f25;color:#fff}.cr35-source-option.active:after{content:'✓';margin-left:auto;color:var(--good)} .cr35-source-dot{width:28px;height:28px;border:1px solid #343b45;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:900;background:#0e1217;color:#cfd5dd} .cr35-source-foot{padding:9px;color:#707b8a;font-size:10px;line-height:1.45;border-top:1px solid #1d2229;margin-top:5px} .cr35-drawer{ position:absolute;z-index:32;top:68px;right:0;bottom:74px;width:min(860px,72vw); display:flex;flex-direction:column;background:#06080bf8;border-left:1px solid #272d35; box-shadow:-30px 0 100px #000e;transform:translateX(102%);transition:transform .25s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px) } .cr35-drawer.open{transform:none}.cr35-drawer-head{height:68px;flex:none;padding:0 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #20252c}.cr35-drawer-head h2{margin:0;font-size:22px;letter-spacing:-.02em}.cr35-drawer-close{margin-left:auto;width:38px;height:38px;border:1px solid #313741;background:#0f1318;color:#d8dde4;border-radius:50%;display:grid;place-items:center;cursor:pointer}.cr35-drawer-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9} .cr35-drawer-body{flex:1;min-height:0;overflow:auto;padding:16px 20px 28px} .cr35-drawer .cr-episodes-toolbar{position:sticky;z-index:4;top:-16px;padding:16px 0 12px;background:linear-gradient(#06080b 75%,transparent);margin-top:-16px} .cr35-drawer .cr-episode-row{grid-template-columns:168px minmax(0,1fr);min-height:118px;border-radius:12px}.cr35-drawer .cr-ep-thumb{width:168px}.cr35-drawer .cr-ep-overview{-webkit-line-clamp:2} .cr35-info-card{max-width:650px;padding:8px 2px}.cr35-info-logo{max-width:330px;max-height:100px;object-fit:contain;object-position:left center;margin:0 0 16px}.cr35-info-title{font-size:30px;font-weight:900;letter-spacing:-.04em}.cr35-info-meta{margin:8px 0;color:#a8b0bb;font-size:12px}.cr35-info-ep{margin:16px 0 6px;font-size:17px;font-weight:800}.cr35-info-desc{color:#b9c0ca;font-size:13px;line-height:1.65;max-width:620px} /* Detail episode list: closer to the Cineby reference, with a flatter, roomier information hierarchy and stronger active-episode state. */ .detail .cr-episodes-shell{margin-top:6px}.detail .cr-episodes-toolbar{margin-bottom:18px}.detail .cr-episode-row{min-height:126px;border-radius:13px;background:#080a0d;border-color:#20242a;padding-top:12px;padding-bottom:12px}.detail .cr-episode-row:hover,.detail .cr-episode-row:focus-visible{background:#0b0e12;border-color:#4b2930}.detail .cr-episode-row.active{border-color:color-mix(in srgb,var(--red) 58%,#20242a)}.detail .cr-episode-row.active .cr-ep-title{color:var(--red)} .detail .cr-ep-title{font-size:15px}.detail .cr-ep-runtime{margin-top:5px}.detail .cr-ep-overview{font-size:12px;line-height:1.55;color:#92a2be} /* Cohesive Browse icon family. */ .browse-icon .square svg{width:21px!important;height:21px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.75!important;stroke-linecap:round!important;stroke-linejoin:round!important} .browse-icon .square .cr35-4k-text{fill:currentColor!important;stroke:none!important;font-size:8px;font-weight:900;font-family:Inter,Arial,sans-serif} .browse-icon.feature .square{font-size:0!important} /* Avoid exposing the old fake/estimated player timeline. */ #crPlayerTimeline,#crPlayerInfo,#crPlayerActions,#crPlayerProviderBadge,#crSourcePop,#crEpisodeDrawer{display:none!important} /* TV focus */ body.tv .cr35-control:focus,body.tv .cr35-player-source-badge:focus,body.tv .cr35-source-option:focus,body.tv .cr35-drawer button:focus{outline:2px solid var(--red)!important;outline-offset:2px!important;border-color:transparent!important} @media(max-width:900px){ .cr35-player-shell{grid-template-rows:58px minmax(0,1fr) 66px} .cr35-player-top{padding:0 12px;grid-template-columns:46px minmax(0,1fr) auto;gap:8px}.cr35-player-top .player-back{width:40px!important;height:40px!important}.cr35-player-title{font-size:15px}.cr35-player-subtitle{font-size:9px}.cr35-player-source-badge{min-width:68px;height:34px;padding:0 9px;font-size:9px} .cr35-player-rail{padding:0 10px;gap:8px}.cr35-nowplaying-mark{height:29px}.cr35-nowplaying-main{font-size:11px}.cr35-nowplaying-meta{font-size:9px}.cr35-control{width:40px;height:40px;padding:0}.cr35-control span{display:none}.cr35-cap-note{display:none} .cr35-source-menu{right:10px;bottom:74px;width:min(270px,calc(100vw - 20px))} .cr35-drawer{top:58px;bottom:66px;width:100vw;border-left:0}.cr35-drawer-head{height:58px;padding:0 14px}.cr35-drawer-body{padding:13px 14px 24px}.cr35-drawer .cr-episode-row{grid-template-columns:122px minmax(0,1fr);min-height:96px;padding:9px 38px 9px 9px;gap:12px}.cr35-drawer .cr-ep-thumb{width:122px}.cr35-drawer .cr-ep-title{font-size:12px}.cr35-drawer .cr-ep-runtime{font-size:9px}.cr35-drawer .cr-ep-overview{font-size:10px;-webkit-line-clamp:2}.cr35-drawer .cr-episode-search{width:min(52vw,280px)} .cr35-native-time{display:none} } @media(max-width:560px){ .cr35-player-heading{text-align:left}.cr35-player-subtitle{display:none}.cr35-nowplaying{display:none}.cr35-player-rail{justify-content:center}.cr35-transport{width:100%;justify-content:center}.cr35-control{flex:1;max-width:48px} .cr35-drawer .cr-episode-row{grid-template-columns:106px minmax(0,1fr)}.cr35-drawer .cr-ep-thumb{width:106px}.cr35-drawer .cr-ep-overview{display:none}.cr35-drawer .cr-episodes-toolbar{gap:7px}.cr35-drawer .season-trigger{min-width:132px!important}.cr35-drawer .cr-episode-search{flex:1;min-width:0;width:auto} } /* source block: cinereel-build37-native-player */ /* ============================================================ CineREEL Build 38 — native player layer + bootstrap repair ============================================================ */ body.cr37-player-open{overflow:hidden!important} #player.cr37-active{background:#000;isolation:isolate} #player.cr37-active>#playerFrame{display:none!important} #cr35PlayerShell{display:none!important} .cr37-player{position:absolute;z-index:20;inset:0;background:#000;overflow:hidden;color:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif} .cr37-player-stage{position:absolute;inset:0;background:#000;overflow:hidden} .cr37-player-stage iframe,.cr37-video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000} .cr37-video{object-fit:contain} .cr37-hidden{display:none!important} .cr37-player:before,.cr37-player:after{content:"";position:absolute;z-index:4;left:0;right:0;pointer-events:none;opacity:1;transition:opacity .24s ease} .cr37-player:before{top:0;height:150px;background:linear-gradient(180deg,rgba(0,0,0,.79),rgba(0,0,0,.3) 52%,transparent)} .cr37-player:after{bottom:0;height:300px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.66) 45%,transparent)} .cr37-player.controls-hidden:before,.cr37-player.controls-hidden:after{opacity:0} .cr37-top{position:absolute;z-index:8;top:0;left:0;right:0;height:88px;padding:18px 25px;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:15px;transition:opacity .22s ease,transform .22s ease} .cr37-player.controls-hidden .cr37-top{opacity:0;transform:translateY(-13px);pointer-events:none} .cr37-back{width:46px;height:46px;border:1px solid #ffffff35;border-radius:50%;background:#0c0e12b8;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px)} .cr37-back:hover,.cr37-back:focus-visible{border-color:#ffffff70;background:#171a20;outline:none}.cr37-back svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cr37-heading{min-width:0;text-align:center;justify-self:center;max-width:min(60vw,850px)}.cr37-title{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cr37-subtitle{font-size:11px;color:#aab2be;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cr37-source-badge{height:38px;min-width:98px;padding:0 14px;border:1px solid #ffffff27;border-radius:999px;background:#0c0e12c7;color:#e4e8ed;font-size:11px;font-weight:800;cursor:pointer;backdrop-filter:blur(12px)}.cr37-source-badge:hover,.cr37-source-badge:focus-visible{border-color:#ffffff66;background:#171a20;outline:none} .cr37-loading{position:absolute;z-index:7;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;border:3px solid #ffffff26;border-top-color:#fff;animation:cr37spin .8s linear infinite;pointer-events:none}@keyframes cr37spin{to{transform:rotate(360deg)}} .cr37-buffer{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 15px;border:1px solid #ffffff25;border-radius:999px;background:#07090cbf;backdrop-filter:blur(12px);font-size:11px;color:#d9dde2;opacity:0;transition:opacity .18s ease;pointer-events:none}.cr37-buffer.show{opacity:1} .cr37-toast{position:absolute;z-index:30;left:50%;top:18%;transform:translate(-50%,-8px);opacity:0;pointer-events:none;padding:9px 14px;border:1px solid #ffffff27;border-radius:999px;background:#07090cd9;color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(12px);transition:.18s ease}.cr37-toast.show{opacity:1;transform:translate(-50%,0)} .cr37-bottom{position:absolute;z-index:8;left:0;right:0;bottom:0;padding:0 28px 23px;transition:opacity .22s ease,transform .22s ease}.cr37-player.controls-hidden .cr37-bottom{opacity:0;transform:translateY(15px);pointer-events:none} .cr37-meta{max-width:min(650px,62vw);margin-bottom:16px;min-height:54px}.cr37-logo{display:block;max-width:250px;max-height:74px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 12px #0009);margin-bottom:8px}.cr37-meta-title{font-size:20px;font-weight:850;letter-spacing:-.02em}.cr37-meta-line{font-size:11px;color:#c3cad3;font-weight:650;margin-top:4px}.cr37-ep-title{font-size:14px;font-weight:800;margin-top:5px}.cr37-description{margin-top:6px;max-width:610px;color:#c1c7d0;font-size:11px;line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .cr37-timeline-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px;margin-bottom:8px}.cr37-timeline{height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none}.cr37-track{position:relative;width:100%;height:4px;border-radius:999px;background:#ffffff31}.cr37-buffered{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:#ffffff3d}.cr37-played{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:var(--red)}.cr37-knob{position:absolute;z-index:2;left:0;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 8px #0008;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s ease}.cr37-timeline:hover .cr37-knob,.cr37-timeline:focus-within .cr37-knob{opacity:1}.cr37-time{font-size:10px;color:#b7bec8;min-width:102px;text-align:right;font-variant-numeric:tabular-nums} .cr37-controls{display:flex;align-items:center;gap:7px;min-width:0}.cr37-spacer{flex:1}.cr37-btn{height:40px;min-width:40px;padding:0 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:#f2f4f6;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-size:10px;font-weight:720;white-space:nowrap}.cr37-btn:hover,.cr37-btn:focus-visible{background:#ffffff12;border-color:#ffffff16;outline:none}.cr37-btn.primary{background:#f4f5f6;color:#111317}.cr37-btn.primary:hover{background:#fff}.cr37-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.cr37-btn .fill{fill:currentColor;stroke:none}.cr37-btn.small-label span{display:none} .cr37-volume{display:flex;align-items:center;gap:3px}.cr37-volume input{width:78px;accent-color:var(--red);cursor:pointer} .cr37-pop{position:absolute;z-index:25;right:27px;bottom:77px;width:290px;max-height:min(470px,68vh);overflow:auto;padding:8px;border:1px solid #303641;border-radius:15px;background:#07090cf5;box-shadow:0 25px 80px #000d;backdrop-filter:blur(20px);display:none}.cr37-pop.open{display:block}.cr37-pop-title{padding:7px 9px 9px;color:#808998;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.cr37-pop-option{width:100%;min-height:42px;border:0;border-radius:9px;background:transparent;color:#bfc6d0;padding:0 10px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;font-size:11px}.cr37-pop-option:hover,.cr37-pop-option:focus-visible,.cr37-pop-option.active{background:#171b21;color:#fff;outline:none}.cr37-pop-option.active:after{content:"✓";margin-left:auto;color:var(--good)}.cr37-pop-note{padding:9px;color:#7e8794;font-size:9px;line-height:1.45;border-top:1px solid #20242b;margin-top:5px}.cr37-source-state{font-size:9px;color:#77818f;margin-left:auto}.cr37-source-state.native{color:var(--good)} .cr37-drawer{position:absolute;z-index:24;top:0;right:0;bottom:0;width:min(580px,46vw);background:#07090cf7;border-left:1px solid #292f38;box-shadow:-28px 0 90px #000c;backdrop-filter:blur(20px);transform:translateX(103%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}.cr37-drawer.open{transform:translateX(0)}.cr37-drawer-head{height:76px;padding:0 18px 0 22px;display:flex;align-items:center;gap:12px;border-bottom:1px solid #242932}.cr37-drawer-head h2{font-size:17px;margin:0}.cr37-drawer-close{margin-left:auto;width:39px;height:39px;border:1px solid #303641;border-radius:50%;background:#11151a;color:#fff;display:grid;place-items:center;cursor:pointer}.cr37-drawer-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9}.cr37-drawer-body{min-height:0;flex:1;overflow:auto;padding:16px 14px 30px} .cr37-episode-tools{display:grid;grid-template-columns:170px minmax(0,1fr) 42px;gap:8px;margin-bottom:12px;position:sticky;top:0;z-index:4;background:#07090cf7;padding:0 0 10px}.cr37-episode-tools input,.cr37-season-btn{height:42px;border:1px solid #2b313b;border-radius:9px;background:#0d1014;color:#e7eaee;padding:0 12px}.cr37-season{position:relative}.cr37-season-menu{position:absolute;left:0;right:0;top:46px;z-index:10;border:1px solid #303641;border-radius:10px;background:#0a0d11;padding:5px;display:none;max-height:260px;overflow:auto}.cr37-season.open .cr37-season-menu{display:block}.cr37-season-opt{width:100%;height:38px;border:0;border-radius:7px;background:transparent;color:#b9c1cc;text-align:left;padding:0 10px;cursor:pointer}.cr37-season-opt:hover,.cr37-season-opt.active{background:#171b21;color:#fff}.cr37-episode-list{display:flex;flex-direction:column;gap:8px}.cr37-episode-row{width:100%;min-height:112px;border:1px solid #20252d;border-radius:11px;background:#0b0e12;color:#fff;padding:9px;display:grid;grid-template-columns:165px minmax(0,1fr);gap:12px;text-align:left;cursor:pointer;position:relative;overflow:hidden}.cr37-episode-row:hover,.cr37-episode-row.active{border-color:#4c5562;background:#11151b}.cr37-episode-thumb{width:165px;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#15191f;align-self:center;position:relative}.cr37-episode-thumb img{width:100%;height:100%;object-fit:cover}.cr37-episode-progress{position:absolute;left:5px;right:5px;bottom:5px;height:3px;border-radius:999px;background:#ffffff2c;overflow:hidden}.cr37-episode-progress span{display:block;height:100%;background:var(--red)}.cr37-episode-copy{min-width:0;align-self:center}.cr37-episode-title{font-size:13px;font-weight:800}.cr37-episode-overview{font-size:10px;color:#98a2af;line-height:1.42;margin-top:5px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.cr37-episode-sub{font-size:9px;color:#77818e;margin-top:6px}.cr37-current-badge{position:absolute;right:8px;top:8px;padding:4px 6px;border-radius:999px;background:var(--red);font-size:8px;font-weight:850} .cr37-settings-group{display:grid;gap:9px}.cr37-settings-field{display:grid;gap:6px}.cr37-settings-field label{font-size:10px;color:var(--muted);font-weight:730}.cr37-settings-field input[type="text"],.cr37-settings-field input[type="url"],.cr37-settings-field input[type="number"]{height:42px;border:1px solid var(--line2);border-radius:9px;background:#0c0f13;color:#f2f3f4;padding:0 11px;outline:none}.cr37-settings-field input:focus{border-color:#596270}.cr37-settings-check{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid #252b33;border-radius:10px;background:#0d1014;padding:8px 11px}.cr37-settings-check span{font-size:11px;color:#c8ced6}.cr37-settings-check input{width:18px;height:18px;accent-color:var(--red)}.cr37-resolver-status{font-size:10px;color:#87919f;line-height:1.5;margin-top:7px} .cr37-next{position:absolute;z-index:31;right:28px;bottom:88px;width:min(420px,calc(100vw - 56px));padding:15px;border:1px solid #343b46;border-radius:15px;background:#080b0feF;box-shadow:0 24px 80px #000d;backdrop-filter:blur(18px);display:none}.cr37-next.open{display:block}.cr37-next-kicker{font-size:9px;color:#8c96a5;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.cr37-next-title{font-size:16px;font-weight:850;margin-top:6px}.cr37-next-sub{font-size:10px;color:#9fa8b4;margin-top:4px}.cr37-next-actions{display:flex;gap:7px;margin-top:12px}.cr37-next-actions button{height:38px;border-radius:9px;padding:0 12px;border:1px solid #303741;background:#15191f;color:#fff;cursor:pointer}.cr37-next-actions .primary{background:#f3f4f5;color:#111;border-color:#f3f4f5} .cr37-mode-note{position:absolute;z-index:7;left:16px;top:95px;padding:7px 10px;border-radius:999px;border:1px solid #ffffff1c;background:#090b0ea8;color:#8e98a6;font-size:9px;opacity:0;transition:opacity .18s ease;pointer-events:none}.cr37-mode-note.show{opacity:1} body.tv .cr37-btn{min-width:52px;height:48px;font-size:12px}body.tv .cr37-top{height:100px;padding:22px 34px}body.tv .cr37-bottom{padding:0 36px 31px}body.tv .cr37-drawer{width:min(720px,52vw)}body.tv .cr37-pop-option{min-height:52px;font-size:13px}body.tv .cr37-episode-row{min-height:132px;grid-template-columns:190px minmax(0,1fr)}body.tv .cr37-episode-thumb{width:190px} @media(max-width:900px){.cr37-top{height:70px;padding:12px 12px;grid-template-columns:48px minmax(0,1fr) auto}.cr37-back{width:41px;height:41px}.cr37-heading{text-align:left;justify-self:stretch}.cr37-title{font-size:13px}.cr37-source-badge{min-width:68px;height:34px;padding:0 8px;font-size:9px}.cr37-bottom{padding:0 11px 12px}.cr37-meta{max-width:86vw;margin-bottom:8px}.cr37-logo{max-width:180px;max-height:52px}.cr37-meta-title{font-size:17px}.cr37-description{display:none}.cr37-timeline-row{gap:8px;margin-bottom:4px}.cr37-time{min-width:84px;font-size:9px}.cr37-controls{gap:2px}.cr37-btn{min-width:37px;height:38px;padding:0 7px}.cr37-btn span{display:none}.cr37-volume input{display:none}.cr37-drawer{width:100vw}.cr37-episode-tools{grid-template-columns:135px minmax(0,1fr) 40px}.cr37-episode-row{grid-template-columns:122px minmax(0,1fr);min-height:88px;padding:7px;gap:9px}.cr37-episode-thumb{width:122px}.cr37-episode-overview{-webkit-line-clamp:2}.cr37-pop{right:10px;bottom:58px;width:min(290px,calc(100vw - 20px))}.cr37-next{right:10px;bottom:65px;width:calc(100vw - 20px)}} @media(max-width:520px){.cr37-meta-line{font-size:9px}.cr37-ep-title{font-size:12px}.cr37-controls [data-cr37-prev],.cr37-controls [data-cr37-next]{display:none}.cr37-btn svg{width:19px;height:19px}.cr37-spacer{min-width:4px}.cr37-episode-row{grid-template-columns:106px minmax(0,1fr)}.cr37-episode-thumb{width:106px}.cr37-episode-title{font-size:11px}.cr37-episode-overview{font-size:9px}.cr37-episode-tools{grid-template-columns:120px minmax(0,1fr) 38px}} /* source block: cinereel-build38-repair */ .cr-signal-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cr38-inline-icon{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:7px} .cr38-sort-icon{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cr38-star-svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round} .star{display:inline-flex;align-items:center;justify-content:center}.cat-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.cr-channel-fav .cr38-star-svg{width:17px;height:17px}.cr34-btn>.cr38-star-svg{display:inline-block;vertical-align:-3px;margin-right:7px} /* source block: cinereel-build39-embed-isolation */ /* CineREEL Build 39 — provider embeds occupy their own viewport. CineREEL chrome is physically outside that viewport, never layered over provider controls. Native playback keeps the immersive overlay layout. */ /* EMBED MODE: three non-overlapping regions. */ #cr37Player.embed-mode{ background:#020304!important; } #cr37Player.embed-mode .cr37-player-stage{ top:72px!important; bottom:66px!important; left:0!important;right:0!important; height:auto!important; background:#000!important; } #cr37Player.embed-mode .cr37-player-stage iframe{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:block!important; border:0!important; background:#000!important; } /* The provider owns its own timeline/playback controls in embed mode. Never draw a CineREEL timeline, description, title art, or gradient over it. */ #cr37Player.embed-mode:before, #cr37Player.embed-mode:after{display:none!important} #cr37Player.embed-mode .cr37-meta, #cr37Player.embed-mode .cr37-timeline-row{display:none!important} #cr37Player.embed-mode .cr37-top{ top:0!important;left:0!important;right:0!important; height:72px!important; padding:0 24px!important; display:grid!important; grid-template-columns:54px minmax(0,1fr) auto!important; align-items:center!important;gap:14px!important; background:#050608!important; border-bottom:1px solid #1d2229!important; box-shadow:none!important; opacity:1!important;transform:none!important;pointer-events:auto!important; } #cr37Player.embed-mode .cr37-heading{ max-width:min(68vw,900px)!important; } #cr37Player.embed-mode .cr37-title{font-size:16px!important} #cr37Player.embed-mode .cr37-subtitle{font-size:10px!important;margin-top:3px!important} #cr37Player.embed-mode .cr37-back{ width:44px!important;height:44px!important; background:#0b0e12!important;border-color:#333944!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } #cr37Player.embed-mode .cr37-source-badge{ height:36px!important;min-width:92px!important; background:#0b0e12!important;border-color:#2d333d!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } #cr37Player.embed-mode .cr37-bottom{ left:0!important;right:0!important;bottom:0!important; height:66px!important; padding:0 22px!important; display:flex!important;align-items:center!important; background:#050608!important; border-top:1px solid #1d2229!important; box-shadow:none!important; opacity:1!important;transform:none!important;pointer-events:auto!important; } #cr37Player.embed-mode .cr37-controls{ width:100%!important; min-width:0!important; display:flex!important;align-items:center!important;gap:7px!important; } #cr37Player.embed-mode .cr37-btn{ height:40px!important; } /* Panels open above / beside the reserved chrome instead of on provider controls. */ #cr37Player.embed-mode .cr37-pop{bottom:76px!important} #cr37Player.embed-mode .cr37-next{bottom:76px!important} #cr37Player.embed-mode .cr37-drawer{top:72px!important;bottom:66px!important} /* Embed chrome does not auto-hide; hiding it while the viewport remains inset leaves dead black strips and makes remote navigation unpredictable. */ #cr37Player.embed-mode.controls-hidden .cr37-top, #cr37Player.embed-mode.controls-hidden .cr37-bottom{ opacity:1!important;transform:none!important;pointer-events:auto!important; } /* Native mode remains immersive because these are CineREEL's actual controls. */ #cr37Player.native-mode .cr37-player-stage{inset:0!important} body.tv #cr37Player.embed-mode .cr37-player-stage{top:82px!important;bottom:76px!important} body.tv #cr37Player.embed-mode .cr37-top{height:82px!important;padding:0 32px!important} body.tv #cr37Player.embed-mode .cr37-bottom{height:76px!important;padding:0 32px!important} body.tv #cr37Player.embed-mode .cr37-pop{bottom:86px!important} body.tv #cr37Player.embed-mode .cr37-drawer{top:82px!important;bottom:76px!important} @media(max-width:900px){ #cr37Player.embed-mode .cr37-player-stage{top:60px!important;bottom:58px!important} #cr37Player.embed-mode .cr37-top{height:60px!important;padding:0 11px!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:8px!important} #cr37Player.embed-mode .cr37-back{width:39px!important;height:39px!important} #cr37Player.embed-mode .cr37-heading{text-align:center!important} #cr37Player.embed-mode .cr37-title{font-size:12px!important} #cr37Player.embed-mode .cr37-subtitle{font-size:9px!important} #cr37Player.embed-mode .cr37-source-badge{height:32px!important;min-width:64px!important;padding:0 8px!important;font-size:9px!important} #cr37Player.embed-mode .cr37-bottom{height:58px!important;padding:0 9px!important} #cr37Player.embed-mode .cr37-controls{gap:2px!important} #cr37Player.embed-mode .cr37-btn{height:38px!important;min-width:36px!important;padding:0 7px!important} #cr37Player.embed-mode .cr37-pop{bottom:66px!important} #cr37Player.embed-mode .cr37-next{bottom:66px!important} #cr37Player.embed-mode .cr37-drawer{top:60px!important;bottom:58px!important} } /* source block: cinereel-build40-interaction-polish */ /* ============================================================ CineREEL Build 40 — interaction / motion sweep ============================================================ */ :root{--cr40-ease:cubic-bezier(.2,.8,.2,1);--cr40-fast:.16s;--cr40-med:.22s} /* Consistent feedback. Geometry is intentionally unchanged on hover. */ button,.cr34-btn,.settings-btn,.cr37-btn,.cr37-source-badge,.cr37-back, .cr37-drawer-close,.cr37-next-actions button,.cr-context-actions button, .cr-profile-card,.cr-collection-link,.cr-provider-order-row button,.cr-live-actions button, .cr-channel-fav,.cr-mobile-nav button,.cr-tv-rail button,.cr34-close,.settings-close, .preset-delete,.cr37-season-btn,.cr37-season-opt,.cr37-pop-option,.section-tab,.arrow{ transition:color var(--cr40-fast) ease,background var(--cr40-fast) ease,border-color var(--cr40-fast) ease, box-shadow var(--cr40-med) ease,opacity var(--cr40-fast) ease,transform var(--cr40-fast) ease,filter var(--cr40-fast) ease } /* CineREEL red hover language for actionable controls. */ .cr34-btn:not(.primary):not(.danger):hover,.cr34-btn:not(.primary):not(.danger):focus-visible, .settings-btn:not(.primary):hover,.settings-btn:not(.primary):focus-visible, .cr34-close:hover,.cr34-close:focus-visible,.settings-close:hover,.settings-close:focus-visible, .preset-delete:hover,.preset-delete:focus-visible,.cr-profile-delete:hover,.cr-profile-delete:focus-visible, .cr-live-actions button:hover,.cr-live-actions button:focus-visible, .cr-provider-order-row button:not(:disabled):hover,.cr-provider-order-row button:not(:disabled):focus-visible, .cr-context-actions button:hover,.cr-context-actions button:focus-visible, .cr37-drawer-close:hover,.cr37-drawer-close:focus-visible, .cr37-season-btn:hover,.cr37-season-btn:focus-visible{ color:#fff!important;border-color:color-mix(in srgb,var(--red) 62%,#39414d)!important; background:color-mix(in srgb,var(--red) 12%,#13171d)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 8%,transparent),0 7px 22px rgba(0,0,0,.24)!important; outline:none!important } .cr34-btn.primary:hover,.cr34-btn.primary:focus-visible,.settings-btn.primary:hover,.settings-btn.primary:focus-visible{ filter:brightness(1.08);box-shadow:0 7px 24px color-mix(in srgb,var(--red) 22%,transparent);transform:translateY(-1px);outline:none } .cr34-btn.danger:hover,.cr34-btn.danger:focus-visible{ background:rgba(255,76,86,.10);border-color:#a53a42!important;color:#ff8b92;outline:none } /* Player buttons: clear red state without fighting the provider iframe. */ #cr37Player .cr37-btn:hover,#cr37Player .cr37-btn:focus-visible, #cr37Player .cr37-source-badge:hover,#cr37Player .cr37-source-badge:focus-visible, #cr37Player .cr37-back:hover,#cr37Player .cr37-back:focus-visible{ color:#fff!important;border-color:color-mix(in srgb,var(--red) 65%,#3a414c)!important; background:color-mix(in srgb,var(--red) 13%,#11151a)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 9%,transparent)!important;outline:none!important } #cr37Player .cr37-pop-option:hover,#cr37Player .cr37-pop-option:focus-visible, #cr37Player .cr37-season-opt:hover,#cr37Player .cr37-season-opt:focus-visible{ color:var(--red)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 17%,transparent),transparent)!important;outline:none!important } #cr37Player .cr37-episode-row:hover,#cr37Player .cr37-episode-row:focus-visible{ border-color:color-mix(in srgb,var(--red) 50%,#303844)!important;background:#11151b!important;outline:none!important } #cr37Player .cr37-episode-row:hover .cr37-episode-title,#cr37Player .cr37-episode-row:focus-visible .cr37-episode-title{color:var(--red)} #cr37Player .cr37-next-actions button:hover,#cr37Player .cr37-next-actions button:focus-visible{ border-color:color-mix(in srgb,var(--red) 58%,#39414d);background:color-mix(in srgb,var(--red) 12%,#15191f);outline:none } #cr37Player .cr37-next-actions .primary:hover,#cr37Player .cr37-next-actions .primary:focus-visible{background:#fff;color:#0b0d10;border-color:#fff;filter:brightness(1.04)} /* Rows/cards that previously felt inert. */ .cr-profile-card:hover,.cr-profile-card:focus-within{border-color:color-mix(in srgb,var(--red) 45%,#333a44);background:#11151a;transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22)} .cr-collection-link:hover,.cr-collection-link:focus-visible{color:var(--red)!important;background:linear-gradient(90deg,color-mix(in srgb,var(--red) 15%,transparent),transparent)!important;outline:none} .cr-channel-fav:hover,.cr-channel-fav:focus-visible{color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 52%,#fff0)!important;background:#151014!important;outline:none} .cr-channel-fav.active:hover{color:#ffd45d!important} .cr-diag-card{transition:border-color .16s ease,background .16s ease,transform .16s ease}.cr-diag-card:hover{border-color:#37404c;background:#0d1116;transform:translateY(-1px)} .section-tab:hover,.section-tab:focus-visible{color:#fff;outline:none}.section-tab:hover:after,.section-tab:focus-visible:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:color-mix(in srgb,var(--red) 58%,transparent)} .arrow:hover,.arrow:focus-visible{color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 35%,transparent)!important;outline:none!important} /* Browse: keep feature colors, but make the interaction intentional. */ .browse-icon:hover strong,.browse-icon:focus-visible strong{color:#fff} .browse-icon:not(.feature):hover .square,.browse-icon:not(.feature):focus-visible .square{color:var(--red)!important;border-color:color-mix(in srgb,var(--red) 48%,#46505c)!important;background:color-mix(in srgb,var(--red) 9%,#171a1f)!important} .browse-icon:hover,.browse-icon:focus-visible{transform:translateY(-1px)} /* Inputs should acknowledge focus with the brand, not generic gray. */ .cr34-input:focus,.cr34-select:focus,.cr37-settings-field input:focus,.cr-episode-search:focus, .cr37-episode-tools input:focus,.channel-search:focus,.preset-name:focus{ border-color:color-mix(in srgb,var(--red) 55%,#56606d)!important; box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 10%,transparent)!important;outline:none!important } /* Settings and live player now animate both entering and leaving. */ .settings-backdrop{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease} .settings-backdrop.open{opacity:1;visibility:visible;pointer-events:auto} .settings-modal{opacity:0;transform:translateY(12px) scale(.985);transition:opacity .18s ease,transform .24s var(--cr40-ease)} .settings-backdrop.open .settings-modal{opacity:1;transform:none} .live-player{display:flex!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease} .live-player.open{opacity:1;visibility:visible;pointer-events:auto} .live-player-shell{opacity:0;transform:translateY(12px) scale(.985);transition:opacity .18s ease,transform .24s var(--cr40-ease)} .live-player.open .live-player-shell{opacity:1;transform:none} .live-player-close:hover,.live-player-close:focus-visible{color:var(--red);border-color:color-mix(in srgb,var(--red) 55%,var(--line2));background:color-mix(in srgb,var(--red) 9%,var(--panel2));outline:none} /* Build 34 modal and context menu enter/leave motion. */ .cr34-modal{opacity:0;transform:translateY(10px) scale(.985);transition:opacity .18s ease,transform .23s var(--cr40-ease)} .cr34-backdrop.open .cr34-modal{opacity:1;transform:none} .cr-context{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(7px) scale(.975);transform-origin:top left;transition:opacity .16s ease,transform .21s var(--cr40-ease),visibility .16s ease} .cr-context.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} /* Native-player menus were still display:none/block, so closing could not animate. */ .cr37-pop{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(9px) scale(.975);transform-origin:bottom right;transition:opacity .16s ease,transform .21s var(--cr40-ease),visibility .16s ease} .cr37-pop.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} .cr37-season-menu{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.98);transform-origin:top center;transition:opacity .16s ease,transform .21s var(--cr40-ease),visibility .16s ease} .cr37-season.open .cr37-season-menu{opacity:1;visibility:visible;pointer-events:auto;transform:none} .cr37-next{display:block!important;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.98);transform-origin:bottom right;transition:opacity .17s ease,transform .23s var(--cr40-ease),visibility .17s ease} .cr37-next.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} .cr37-drawer{transition:transform .28s var(--cr40-ease),visibility .28s ease!important} /* Custom animated replacement for every newer native select. The real