/* Phones: every series hub and every episode fits one screen (title, swipeable story, action buttons). Content below the screen stays on the page. */
@media (max-width:760px){
body.ott{--phh:calc(100svh - 34px - var(--dock-h,0px))}
body.ott .sh-tab{display:none!important}
html.ud-on body.ott,body.ott{padding-bottom:max(12px,var(--dock-h,0px),env(safe-area-inset-bottom))!important}
body.ott>.sh,body.ott header.sh{display:none}
body.ott main.ot{padding-bottom:12px}
body.ott main.ot>.crumb,body.ott main.ot>nav[aria-label="Breadcrumb"]{display:none}
body.ott .ot-hero{margin:6px 0 0;border-radius:18px}
body.ott .ot-hero::after{background:linear-gradient(0deg,rgba(10,13,18,.78),rgba(10,13,18,.45))}
body.ott .ot-hero h1{margin:6px 0 0;font-size:22px;line-height:1.15;letter-spacing:-.01em}
body.ott .ot-pill{padding:3px 10px;font-size:11px}
/* action buttons: icon over a short label */
body.ott .ot-btns{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;margin:0}
body.ott .ot-btns.col{margin-top:0}
body.ott .ot-btn{flex-direction:column;gap:4px;min-height:54px;padding:6px 4px;border-radius:14px;font-size:12px;line-height:1.1;text-align:center}
body.ott .ot-btn svg{width:20px;height:20px}
body.ott .ot-lab{font-size:0}body.ott .ot-lab::after{content:attr(data-s);font-size:12px}
/* series hub: one poster-led intro screen */
body.ott .ot-hero:not(.ot-ep-hero){margin:6px 0 0;min-height:min(calc(100svh - 96px),640px);display:flex;align-items:flex-end;background:#0F141C var(--img) center 12%/cover no-repeat}
body.ott .ot-hero:not(.ot-ep-hero)::before{display:none}
body.ott .ot-hero:not(.ot-ep-hero)::after{background:linear-gradient(0deg,rgba(8,11,16,.96) 0%,rgba(8,11,16,.78) 38%,rgba(8,11,16,0) 72%)}
body.ott .ot-hero:not(.ot-ep-hero) .ot-hero-in{display:block;width:100%;padding:18px 16px 16px}
body.ott .ot-fan,body.ott .ot-hero:not(.ot-ep-hero) .ot-meta{display:none}
body.ott .ot-hero:not(.ot-ep-hero) h1{font-size:30px;margin:8px 0 6px}
body.ott .ot-hero:not(.ot-ep-hero) .ot-lede{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.45;margin:0 0 14px;opacity:.9}
body.ott .ot-hero:not(.ot-ep-hero) .ot-btns{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);gap:8px}
body.ott .ot-hero:not(.ot-ep-hero) .ot-btn.play{grid-column:1/-1;flex-direction:row;gap:8px;min-height:52px;font-size:16px;border-radius:14px}
body.ott .ot-hero:not(.ot-ep-hero) .ot-btns .ot-btn:not(.play){flex-direction:row;gap:6px;min-height:44px;padding:0 6px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:14px}
body.ott .ot-hero:not(.ot-ep-hero) .ot-btn svg{width:16px;height:16px}
body.ott main.ot>.ot-sec:first-of-type{padding:20px 0 0}
body.ott main.ot>.ot-sec:first-of-type .ot-sec-h{margin-bottom:10px}
body.ott main.ot>.ot-sec:first-of-type .ot-sec-h span{display:none}
body.ott main.ot>.ot-sec:first-of-type .ot-card{flex-basis:calc((100vw - 56px) / 2.4)}
body.ott main.ot>.ot-sec:first-of-type .ot-row{scroll-snap-type:x mandatory;padding-bottom:6px}
/* episode */
body.ott .ot-ep-hero .ot-hero-in{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:0 4px 0 0;height:74px;overflow:hidden}
body.ott .ot-ep-art{display:none}
body.ott .ot-ep-art img{width:44px;height:66px;border-radius:8px;box-shadow:none}
body.ott .ot-ep-hero .ot-hero-txt{max-width:none;text-align:right;min-width:0}
body.ott .ot-ep-hero .ot-pill,body.ott .ot-ep-hero h1{text-align:right}
body.ott .ot-ep-hero .ot-meta,body.ott .ot-ep-hero .ot-lede,body.ott .ot-ep-hero .ot-btns{display:none}
body.ott .ot-ep-hero h1{font-size:18px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html:root body.ott main.ot section.ot-hero.ot-ep-hero,html:root body.ott main.ot section.ot-hero.ot-ep-hero .ot-hero-in{background:none!important;background-image:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;margin-top:0}
html:root body.ott main.ot section.ot-hero.ot-ep-hero::before,html:root body.ott main.ot section.ot-hero.ot-ep-hero::after,html:root body.ott main.ot section.ot-hero.ot-ep-hero .ot-hero-in::before,html:root body.ott main.ot section.ot-hero.ot-ep-hero .ot-hero-in::after{display:none!important;content:none!important}
body.ott .ot-ep-hero .ot-pill{background:none;border:0;padding:0;margin:0 0 2px;font:700 11px/1.2 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#F4A340}
body.ott .pp-nav{display:none}
body.ott .pp-back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;font:700 22px/1 Inter,sans-serif;flex:none}
body.ott .pp-back.hubback{position:absolute;left:12px;top:12px;z-index:3;width:38px;height:38px;background:rgba(10,13,18,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.ott .ot-two{display:flex;flex-direction:column;flex-wrap:nowrap;gap:8px;padding:8px 0 0;height:calc(var(--phh) - 74px);min-height:330px}
body.ott .ot-story{flex:1 1 auto;min-height:0;max-width:none;width:100%;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0;padding:0}
body.ott .ot-story::-webkit-scrollbar{display:none}
body.ott .ot-story>.txt,body.ott .ot-story .ot-pages{display:contents}
body.ott .ot-story .ot-pages li,body.ott .ot-story .ot-moral,body.ott .ot-story .ot-ask,body.ott .ot-story>.txt>p{box-sizing:border-box;min-width:0;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;overflow-y:auto;border-radius:18px}
body.ott .ot-story .ot-pages li{display:flex;flex-direction:column;gap:10px;padding:12px;font-size:19px}
body.ott .pp-tx{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center;flex:none}
body.ott .pp-artw{flex:1 1 0;align-self:stretch;width:100%;min-height:110px;position:relative;overflow:hidden;border-radius:12px;background:var(--a) center/cover no-repeat}
body.ott .pp-artw::before{content:"";position:absolute;inset:0;background:rgba(10,13,18,.35);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
body.ott .pp-art{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
body.ott .ot-story .ot-pages p{font-size:20px;line-height:1.5}
body.ott .ot-story .pp-nextcard{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:10px;padding:20px;border-radius:18px;background:linear-gradient(160deg,#1c2433,#121823);border:1px solid rgba(255,255,255,.1);color:#fff;text-decoration:none}
body.ott .pp-nextcard small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#F4A340}
body.ott .pp-nextcard b{font:600 24px/1.2 Fraunces,Georgia,serif}
body.ott .pp-nextcard span{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#F4A340;color:#1A1208;font-size:26px;font-weight:700}
body.ott .pp-nextcard .pp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
body.ott .pp-nextcard .pp-chips em{font-style:normal;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#F4F1EA;font:600 14px/1 Inter,system-ui,sans-serif}
body.ott .ot-story .ot-moral,body.ott .ot-story .ot-ask{display:flex;flex-direction:column;justify-content:center;padding:20px 20px}
body.ott .ot-story .ot-moral span{font-size:22px}
body.ott .ot-story .ot-ask{font-size:18px;background:var(--surf-2,#161D28)}
body.ott .ot-story>.ot-prevnext,body.ott .ot-story>.txt>.pill{display:none}
body.ott .pp-dots{display:flex;justify-content:center;gap:6px;height:10px;flex:none}
body.ott .pp-dots i{width:6px;height:6px;border-radius:50%;background:#3A4350;transition:all .2s;cursor:pointer}
body.ott .pp-dots i.on{width:18px;border-radius:4px;background:#F4A340}
body.ott .ot-side{flex:none;position:static;max-width:none;width:100%}
body.ott .ot-sheet{background:none;border:0;padding:0}
body.ott .ot-sheet h2,body.ott .ot-sheet .pic,body.ott .ot-sheet>img,body.ott .ot-sheet .hint{display:none}
body.ott .ot-sheet .nm{display:block;margin:0 0 6px}body.ott .ot-sheet .nm span{display:none}body.ott .ot-sheet .nm input{width:100%;height:38px;font-size:15px;border-radius:12px;padding:0 12px}
body.ott .ot-sheet .ot-btns.col{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
body.ott .ot-sheet .ot-btns.col>.ot-btn{flex-direction:column;gap:4px;min-height:58px;font-size:12px}
body.ott .pp-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 12%;z-index:-1}
body.ott .pp-more{display:block}
body.ott .pp-more>summary{list-style:none;display:flex;align-items:center;justify-content:center;height:100%;min-height:52px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font:700 15px Inter,sans-serif;cursor:pointer}
body.ott .pp-more>summary::-webkit-details-marker{display:none}
body.ott .ot-sheet .ot-btns.col{position:relative}
body.ott .pp-sheet{position:absolute;left:0;right:0;bottom:calc(100% + 10px);z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-radius:20px;background:#1a2230;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 40px rgba(0,0,0,.5)}
body.ott .pp-sheet .ot-btn{flex-direction:row;gap:8px;min-height:48px;border-radius:14px;font-size:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
body.ott .pp-sheet .ot-btn{font-size:14px;line-height:1.15;padding:0 8px}body.ott .pp-sheet .ot-btn svg{flex:none;width:20px;height:20px}body.ott .pp-sheet .ot-lab{font-size:14px}body.ott .pp-sheet .ot-lab::after{content:none}
/* below the screen */
body.ott .ot-sec[aria-labelledby="up-h"]{padding-top:18px}
}
