:root{--bg:#0b0b10;--fg:#f2f2f5;--mut:#9a9aa8;--accent:#1e3a8a;--acc:var(--accent);--card:#17171f;--ring:var(--accent)}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
:focus{outline:none}:focus-visible,.kb :focus{outline:3px solid var(--ring);outline-offset:3px;border-radius:8px}
header{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;padding:12px 4vw;background:linear-gradient(#000d,#0000)}
.brand{display:inline-flex;align-items:center;line-height:0}.brand img{height:26px;width:auto;display:block}
.search{flex:1;max-width:520px}.search input{width:100%;padding:10px 14px;border-radius:24px;border:1px solid #333;background:#000a;color:var(--fg);font-size:15px}
nav{display:flex;gap:8px;margin-left:auto}nav button,.btn{background:#ffffff1a;border:0;padding:9px 16px;border-radius:8px;transition:.15s}
nav button:hover,.btn:hover{background:#ffffff33}.btn.pri{background:var(--fg);color:#000;font-weight:700}.btn.pri:hover{background:#ddd}
.center{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center;
 background:radial-gradient(ellipse at top,#0c1836 0,#0b0b10 60%)}
.center h1{font-size:clamp(28px,5vw,52px);margin:0;font-weight:900}.center .sub{color:var(--mut)}
.choices{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.choice{width:200px;height:150px;border-radius:14px;border:2px solid #333;background:var(--card);font-size:22px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:.2s}
.choice:hover,.choice:focus{transform:scale(1.06);border-color:var(--fg)}.choice span{font-size:44px}
form.login{display:flex;flex-direction:column;gap:12px;width:min(360px,90vw)}form.login input{padding:14px;border-radius:8px;border:1px solid #333;background:#16161d;color:var(--fg);font-size:16px}
.err{color:#6b8cff;min-height:1.2em}
.hero{position:relative;min-height:62vh;display:flex;align-items:flex-end;padding:0 4vw 6vh;margin-top:-64px;background-size:cover;background-position:center top}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b10ee 0,#0b0b1066 55%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 40%)}
.hero>div{position:relative;max-width:640px}.hero img.logo{max-width:min(420px,70vw);max-height:150px;display:block;margin-bottom:12px}
.hero h1{font-size:clamp(28px,5vw,56px);margin:0 0 8px}.hero p{color:#ddd;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.row{padding:8px 4vw 4px}.row h2{font-size:19px;margin:12px 0 8px}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 4px 14px;scrollbar-width:none}.strip::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:150px;scroll-snap-align:start;transition:transform .18s;position:relative}
.card img{width:150px;height:225px;object-fit:cover;border-radius:8px;background:var(--card);display:block}
.card:hover,.card:focus{transform:scale(1.07);z-index:2}.card .t{font-size:13px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ccc}
.card.wide{width:260px}.card.wide img{width:260px;height:146px}
.bar{position:absolute;left:6px;right:6px;top:138px;height:4px;background:#fff4;border-radius:2px}.bar i{display:block;height:100%;background:var(--acc);border-radius:2px}
.card:not(.wide) .bar{top:216px}
.tile{flex:0 0 auto;width:210px;height:118px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.18s;border:2px solid #ffffff14;box-shadow:0 2px 10px #0006;overflow:hidden}
.tile .logo-i{object-fit:contain;display:block;pointer-events:none}
.tile:hover,.tile:focus{transform:scale(1.06);border-color:#fff8}.tile small{display:block;font-size:12px;font-weight:500;opacity:.75}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 4vw 40px}.grid .card,.grid .card img{width:100%}.grid .card img{height:auto;aspect-ratio:2/3}
.tabs{display:flex;gap:8px;padding:0 4vw}.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:8px 12px;font-size:16px;color:var(--mut)}.tabs button.on{color:var(--fg);border-color:var(--acc)}
.hubhead{padding:24px 4vw 12px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.hubhead h1{margin:0;font-size:clamp(28px,4vw,44px)}.hubhead input{padding:9px 14px;border-radius:20px;border:1px solid #333;background:#000a;color:var(--fg);min-width:240px}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:#ccc;font-size:14px;align-items:center}.badge{border:1px solid #fff6;border-radius:4px;padding:1px 6px;font-size:12px}
.badge.st{background:var(--acc);border:0;font-weight:700;color:#fff}
.title-body{padding:10px 4vw 40px;display:grid;grid-template-columns:1fr;gap:16px}
.sel{display:flex;gap:12px;flex-wrap:wrap}.sel label{display:flex;flex-direction:column;font-size:12px;color:var(--mut);gap:4px}
select{background:#16161d;color:var(--fg);border:1px solid #333;border-radius:6px;padding:8px;max-width:280px}
.eps{display:flex;flex-direction:column;gap:10px}.ep{display:flex;gap:14px;padding:10px;border-radius:10px;background:var(--card);text-align:left;border:0;align-items:flex-start}
.ep:hover,.ep:focus{background:#24242e}.ep img{width:200px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#000}
.ep b{display:block}.ep p{margin:4px 0 0;color:var(--mut);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cast .card img{border-radius:50%;width:110px;height:110px}.cast .card{width:110px;text-align:center}
.player{position:fixed;inset:0;background:#000;z-index:50}.player video{width:100%;height:100%;background:#000}
.player .back{position:absolute;top:16px;left:16px;z-index:2;background:#0008;border:0;padding:10px 16px;border-radius:8px;font-size:16px}
.player .ttl{position:absolute;top:22px;left:110px;z-index:2;text-shadow:0 1px 3px #000;transition:opacity .4s}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#222;padding:10px 18px;border-radius:8px;z-index:99}
.empty{color:var(--mut);padding:20px 4vw}.loading{padding:40px 4vw;color:var(--mut)}
@media(max-width:640px){header{flex-wrap:wrap;gap:8px}.search{order:3;flex-basis:100%;max-width:none}.card,.card img{width:112px}.card img{height:168px}
.card:not(.wide) .bar{top:160px}.tile{width:150px;height:86px;font-size:18px}.ep img{width:120px}.hero{min-height:52vh}}
.hubhead .hublogo img{height:56px;max-width:60vw;object-fit:contain;display:block}
.title-body .row.flush{padding-left:0;padding-right:0}
.login .pw{position:relative;display:block}
.login .pw input{width:100%;box-sizing:border-box;padding-right:48px}
.login .pw .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:inherit;font-size:20px;cursor:pointer;padding:6px;border-radius:6px;line-height:1}
.login .pw .eye:focus-visible{outline:2px solid #fff}
.ctile{background:#000;border:1px solid #fff3}.ctile span{font-size:17px;font-weight:600;color:#fff;letter-spacing:.02em}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;padding:0 4vw 40px}
.ctry-tile{position:relative;height:100px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#000;color:#fff;text-decoration:none;border:1px solid #fff3;transition:.18s}
.ctry-tile span{font-weight:600;font-size:16px;text-align:center;padding:0 10px;letter-spacing:.02em}.ctry-tile small{font-size:12px;opacity:.55}
.ctry-tile:hover,.ctry-tile:focus{transform:scale(1.05);border-color:#fff8}
.hublogo.ctry{border-radius:12px;padding:18px 40px;margin:0;background:#000;border:1px solid #fff3}
.hublogo.ctry span{color:#fff;font-size:34px;font-weight:600;letter-spacing:.02em}
/* streamer corner tab: size S, bottom-right, only top-left rounded */
.card:not(.wide){container-type:inline-size}
.st-tab{--m:14cqw;position:absolute;right:0;top:calc(100cqw * 1.5 - var(--th));--th:calc(var(--m)*1.4);display:flex;gap:calc(var(--m)*.22);align-items:center;padding:calc(var(--m)*.2) calc(var(--m)*.26);border-top-left-radius:calc(var(--m)*.38);border-bottom-right-radius:8px;background:rgba(14,16,22,.52);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.14);pointer-events:none}
.card .st-tab img{width:var(--m);height:var(--m);object-fit:contain;display:block;border-radius:0;background:none}
.card .st-tab img.wide{width:calc(var(--m)*1.85)}
/* ES/EN language chip: same frosted style/size as st-tab, bottom-left mirror */
.lg-tab{--m:14cqw;position:absolute;left:0;top:calc(100cqw * 1.5 - var(--m)*1.4);height:calc(var(--m)*1.4);box-sizing:border-box;display:flex;align-items:center;padding:0 calc(var(--m)*.32);border-top-right-radius:calc(var(--m)*.38);border-bottom-left-radius:8px;background:rgba(14,16,22,.52);backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.14);color:#fff;font:700 calc(var(--m)*.62)/1 system-ui,sans-serif;letter-spacing:.04em;pointer-events:none;white-space:nowrap}

/* pre-built hero carousel (5s crossfade) */
.hero.carousel{padding:0;display:block;min-height:0;height:68vh;overflow:hidden;background:#000}
.hero.carousel:before{display:none}
.hero.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none;display:flex;align-items:flex-end;padding:0 4vw 8vh}
.hero.carousel .slide.on{opacity:1;pointer-events:auto}
.hero.carousel img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero.carousel .slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0b10ee 0,#0b0b1066 55%,#0000),linear-gradient(0deg,var(--bg) 0,#0000 40%)}
.hero.carousel .cap{position:relative;z-index:1;max-width:640px}
.hero.carousel .cap img.logo{max-width:min(420px,70vw);max-height:150px;display:block;margin-bottom:12px}
.hnav{position:absolute;top:45%;z-index:2;background:#0006;color:#fff;border:0;font-size:38px;width:48px;height:64px;border-radius:8px;cursor:pointer;opacity:.6}
.hnav:hover,.hnav:focus{opacity:1}.hnav.prev{left:10px}.hnav.next{right:10px}
.dots{position:absolute;z-index:2;right:4vw;bottom:3vh;display:flex;gap:8px}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:#fff6;padding:0;cursor:pointer}.dots button.on{background:#fff;width:24px;border-radius:5px}
@media (max-width:700px){.hero.carousel{height:60vh}.hnav{display:none}.hero.carousel .slide{padding-bottom:6vh}}
/* title page poster */
.hero.detail{gap:32px}.hero.detail img.poster{position:relative;width:min(240px,22vw);aspect-ratio:2/3;object-fit:cover;border-radius:10px;box-shadow:0 10px 40px #000c;flex:none}
@media (max-width:700px){.hero.detail img.poster{width:110px}.hero.detail{gap:14px;align-items:flex-end}}
/* neutral streamer chip (no brand colors) */
.hero .meta .badge.st{background:#000000b3;color:#fff;border:0;font:inherit;font-size:inherit;font-weight:inherit;letter-spacing:normal;text-transform:none;padding:2px 8px;border-radius:4px}

.person{display:flex;gap:28px;padding:24px 4vw 8px;align-items:flex-start}.person img.poster{width:min(220px,30vw);aspect-ratio:2/3;object-fit:cover;border-radius:10px;flex:none}
.person h1{margin:0 0 8px;font-size:clamp(26px,4vw,44px)}.person p{color:#ccc;max-width:820px;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.noph{display:block;background:#1a1a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Crect width='100' height='150' fill='%231a1a22'/%3E%3Ccircle cx='50' cy='52' r='22' fill='%235a5a6a'/%3E%3Cpath d='M18 138c0-24 14.3-42 32-42s32 18 32 42' fill='%235a5a6a'/%3E%3C/svg%3E") center center/cover no-repeat;flex:none}
.cast .noph{width:110px;height:110px;border-radius:50%}
.person .noph.poster,.noph.poster{width:min(220px,30vw);aspect-ratio:2/3;border-radius:10px}
@media (max-width:700px){.person .noph.poster,.noph.poster{width:140px}}
@media (max-width:700px){.person{flex-direction:column}.person img.poster{width:140px}}
/* monochrome logo tiles: streamers white-on-black, studios black-on-white (originals in logos/ untouched) */
.tile.st-w img.logo-i{filter:brightness(0) invert(1)}
.tile.sd-k img.logo-i{filter:brightness(0)}
/* page end: breathing room + footer */
#app{padding-bottom:72px}
#foot{text-align:center;color:#6b6b75;font-size:12px;padding:8px 0 calc(32px + env(safe-area-inset-bottom));letter-spacing:.02em}
.hero.carousel>.slide{max-width:none;position:absolute}
.tile.picks{background:#000;border:1px solid #fff3;color:#fff;font-weight:700;font-size:17px;text-align:center;padding:0 10px;display:flex;align-items:center;justify-content:center}
header{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:14px}
/* hover-grow never clipped: strips bleed to the page edge with inner padding; edge tiles grow inward */
.row .strip{margin:0 -4vw;padding:12px 4vw 16px;scroll-padding:0 4vw}
.title-body .row.flush .strip{margin:0;padding-left:8px;padding-right:8px}
.strip>.edge-l{transform-origin:left center}.strip>.edge-r{transform-origin:right center}

/* elegant profile picker */
.choice{background:#0e0e12cc;border:1px solid #ffffff2e;border-radius:14px;font-family:inherit;font-size:19px;font-weight:600;color:#fff;height:190px;width:190px;gap:10px;backdrop-filter:blur(6px)}
.choice:hover,.choice:focus{transform:scale(1.03);border-color:#ffffffb3;box-shadow:0 0 24px #ffffff26;outline:none}
.choice span.mono{width:68px;height:68px;border-radius:50%;border:1px solid #ffffff59;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:300;color:#fff}
.choice small,.choice .sub{color:#9a9aa5;font-size:13px;font-weight:400}
/* fixed top bar: content always starts below it */
header#top{position:fixed;top:0;left:0;right:0;z-index:100;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}
header#top .search{margin:0 auto}.player{z-index:200}
body.hdr #app{padding-top:var(--hh,72px)}
.hero,.hero.carousel{margin-top:0}
/* JC 2026-10-12: poster titles ALWAYS visible below the card (EN club = English name, ES club = Spanish name) */
.card .t{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.25;min-height:2.5em;visibility:visible!important;opacity:1!important;color:#ddd}
.cast .card .t{min-height:0}

#profBtn{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid #fff3;font-weight:500}#profBtn:hover{border-color:#fff8;background:#ffffff14}
.hubsticky{position:sticky;top:var(--hh,72px);z-index:30;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid #ffffff12}.hubsticky .hubhead{padding-top:14px;padding-bottom:10px}.hubsticky .tabs{padding-bottom:4px}
.choice .lvn{font-size:30px;font-weight:200;color:#fff;font-family:inherit}
#app{min-height:calc(100vh - var(--hh,72px))}body.ld #foot{visibility:hidden}
/* Explore tiles pages */
.tilehead{display:flex;align-items:baseline;gap:18px;padding:18px 4vw 0}.tilehead h1{font-size:28px;font-weight:600;letter-spacing:.04em;margin:0}
.tilehead .more{color:#aaa;font-size:14px;text-decoration:none}.tilehead .more:hover{color:#fff}
.row h2 a{color:inherit;text-decoration:none}.row h2 a:hover{text-decoration:underline}.row h2 small{font-size:.7em;opacity:.5;font-weight:400}
.card.person img,.card.person .noph{width:150px;height:225px;border-radius:8px;object-fit:cover;background-color:#1a1a22}
.card .t.sub{color:#888;min-height:0}.card .cap{font-size:11.5px;line-height:1.3;color:#9a9a9a;margin-top:3px}

/* person cards in Explore tiles: do not inherit the person-page layout */
.card.person{display:block;padding:0;gap:0}

/* Oscar captions: fixed 3-line area + '+N' popover (2026-10-13) */
.card .cap{position:relative;height:calc(11.5px*1.3*3 + 20px);overflow:visible}
.card .cap .capmore{display:inline-block;margin-top:2px;font:600 11px Inter,system-ui,sans-serif;color:#fff;background:#ffffff1a;border:1px solid #fff3;border-radius:10px;padding:1px 8px;cursor:pointer}
.card .cap .capfull{display:none}
#cappop{position:fixed;z-index:1000;max-width:260px;background:#111;border:1px solid #fff3;border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.4;color:#ddd;box-shadow:0 8px 24px #000c}
.ctile.on{border-color:#fff}
.tilehead h1 a{color:inherit;text-decoration:none}
.hero .meta{flex-wrap:wrap;row-gap:4px}
.hero .meta{color:#fff}
.pinfo h1 .life{font-weight:300;opacity:.7;font-size:.6em}.pinfo .facts{display:flex;flex-direction:column;gap:4px;color:#fff;font-size:14px;margin:6px 0 12px}.pinfo .facts b{font-weight:600;margin-right:6px;color:#fff}.pinfo .facts .cnt{color:#aaa}
.pinfo p.bio{display:block;-webkit-line-clamp:unset;color:#ddd;line-height:1.5}.bio-more{background:none;border:1px solid #fff3;color:#fff;border-radius:14px;padding:4px 12px;min-height:32px;cursor:pointer;font:inherit;font-size:13px}
#navbar{position:fixed;left:0;top:var(--hh,72px);height:2px;width:0;background:#fff;z-index:150;opacity:0;pointer-events:none;box-shadow:0 0 6px #fff8}
#navbar.go{opacity:1;width:70%;transition:width 3s cubic-bezier(.1,.7,.2,1),opacity .05s}
#navbar.done{opacity:0;width:100%;transition:width .2s,opacity .3s .15s}
#app.naving{opacity:.55;transition:opacity .12s .05s}
.pageback{display:inline-flex;align-items:center;min-height:40px;margin:16px 4vw 24px;padding:6px 14px;background:transparent;border:1px solid #fff3;border-radius:20px;color:#fff;font:inherit;font-size:14px;cursor:pointer;position:relative;z-index:3}
.pageback:hover{border-color:#fff8}
.pageback+.hero{margin-top:0}
@media (max-width:600px){.pageback{margin:12px 4vw 16px;min-height:44px}}
.title-body .sel+.acts{margin-top:4px}.title-body .sel{margin-bottom:6px}
#app{position:relative}.pageback:has(+ .hero){position:absolute;top:calc(var(--hh,72px) + 4px);left:0;margin:12px 4vw}
#profMenu{position:fixed;z-index:300;min-width:200px;background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#profMenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer}
#profMenu button:hover,#profMenu button:focus{background:#ffffff14;outline:none}#profMenu .ck{width:16px;display:inline-block;text-align:center}
/* skeletons (2026-10-13) */
.skel{pointer-events:none}.loading.skel{padding:0;text-align:left;color:transparent}
.sk{background:linear-gradient(90deg,#16161c 0,#22222a 40%,#16161c 80%);background-size:300% 100%;animation:skm 1.4s ease-in-out infinite;border-radius:8px}
.sk-hero{height:min(62vh,560px);border-radius:0;margin-bottom:18px}
.sk-h2{width:180px;height:18px;margin:18px 0 10px;border-radius:5px}
.sk-card{flex:0 0 auto;width:150px;aspect-ratio:2/3}
@media (max-width:600px){.sk-card{width:calc((100vw - 8vw - 20px) / 3.35)}.sk-hero{height:52vh}}
@keyframes skm{0%{background-position:100% 0}100%{background-position:-100% 0}}
.card img{background:#16161c}
.card img.ld{animation:fi .28s ease-out}
@keyframes fi{from{opacity:.15}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}.card img.ld{animation:none}#navbar.go,#navbar.done{transition:none}}

/* ===== Mobile / iPhone layout (2026-10-13) ===== */
html,body{overflow-x:hidden;max-width:100%}
body{overscroll-behavior-x:none}
#app{overflow-x:clip}
.strip{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
img,video{max-width:100%}
@media (hover:none){.card:hover,.card:focus,.tile:hover,.tile:focus,.choice:hover,.choice:focus,.ctry-tile:hover,.ctry-tile:focus{transform:none}}
@media (max-width:600px){
  header#top{flex-wrap:nowrap;gap:6px;padding:calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 6px calc(10px + env(safe-area-inset-left));min-height:52px}
  header#top .brand img{height:14px;width:auto}
  header#top .search{order:0;flex:0 0 44px;max-width:44px;margin:0 0 0 auto;position:static}
  header#top .search input{width:44px;height:44px;padding:0;border-radius:22px;font-size:16px;color:transparent;cursor:pointer;
    background:#000a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m13 13 4 4'/%3E%3C/svg%3E") center/18px no-repeat}
  header#top .search input::placeholder{color:transparent}
  header#top .search:focus-within{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));max-width:none;z-index:5}
  header#top .search:focus-within input{width:100%;padding:0 14px 0 40px;color:var(--fg);background-position:14px center;cursor:text}
  header#top .search:focus-within input::placeholder{color:#888}
  nav{display:flex;gap:6px}nav button{min-height:44px;padding:0 10px;font-size:13px}
  .row{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  .row h2{font-size:17px}
  .card,.card img{width:calc((100vw - 8vw - 20px) / 3.35)}.card img{height:auto;aspect-ratio:2/3}
  .card:not(.wide) .bar{top:auto;bottom:auto}
  .card .t{font-size:12px}
  .tile{width:calc((100vw - 8vw - 10px) / 2.3);height:auto;aspect-ratio:16/9;min-height:44px}.ctile span{font-size:14px;text-align:center;padding:0 6px}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px;padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  .hero,.hero.carousel{width:100%;min-height:0;height:58vh}
  .hero.carousel .slide{padding:0 5vw 5vh}
  .hero h1,.hero.carousel h1{font-size:clamp(22px,7vw,32px)}
  .hero p,.hero.carousel p{-webkit-line-clamp:2;font-size:14px}
  .hero.carousel .cap img.logo,.hero img.logo{max-width:60vw;max-height:80px}
  .hero .acts .btn,.btn{min-height:44px;display:inline-flex;align-items:center}
  .hero.detail{flex-direction:row;height:auto;min-height:0;padding:80px 5vw 20px}
  .hero.detail img.poster{width:30vw}
  .hero.detail>div{min-width:0}
  .title-body{padding:10px 4vw 30px}
  .ep{gap:10px}.ep img{width:112px}
  .tabs button{min-height:44px}
  .choice{width:min(42vw,170px)!important;min-height:44px}
  .tilehead h1{font-size:22px}
  #foot{padding:24px 4vw calc(24px + env(safe-area-inset-bottom));font-size:12px}
  .person{flex-direction:column}
}
.title-body{grid-template-columns:minmax(0,1fr)}.title-body>*{min-width:0}.sel{display:flex;flex-wrap:wrap;gap:10px}.sel label{min-width:0;max-width:100%}.sel select{max-width:100%;min-height:44px}
@media (max-width:600px){.card.wide,.card.wide img{width:62vw}.card.wide img{height:auto;aspect-ratio:16/9}}
.meta .sc{display:inline-flex;align-items:center;gap:5px;color:#fff}.meta .sc .ic{height:1em;width:auto;display:block;color:#fff}.meta .sc .ic.rt{height:1.05em}
.player .back{top:calc(14px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;background:#000a;border:1px solid #fff3;border-radius:20px;color:#fff;font:inherit;font-size:14px;cursor:pointer}.player .back:hover{border-color:#fff8}
.player .ttl{left:50%;transform:translateX(-50%);top:calc(22px + env(safe-area-inset-top));max-width:calc(100vw - 2 * 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:15px;font-weight:600}
@media (max-width:600px){.player .ttl{max-width:calc(100vw - 2 * 120px);font-size:13px}.player .back{min-height:44px}}
/* JC button style (2026-10-13): one pill for every button = the inner-page Volver pill */
.btn,.btn.pri,.hero .acts .btn,.pageback,.player .back,.bio-more{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:8px 20px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .15s,background .15s}
.btn.pri{border-color:rgba(255,255,255,.6);font-weight:600}
.btn:hover,.btn:focus,.btn.pri:hover,.pageback:hover,.player .back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.75);color:#fff}
.pageback{min-height:40px;padding:6px 16px;font-size:14px}
/* player bar: Volver pill + title in one row, title left-aligned ~28px after the pill, gradient for readability */
.player .pbar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;gap:28px;padding:calc(14px + env(safe-area-inset-top)) 4vw 40px max(4vw,env(safe-area-inset-left));background:linear-gradient(180deg,rgba(0,0,0,.7) 0,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%);pointer-events:none;transition:opacity .4s}
.player .pbar>*{pointer-events:auto}
.player .pbar .back{position:static;margin:0;flex:none;min-height:40px;padding:6px 16px;font-size:14px}
.player .pbar .ttl{position:static;transform:none;left:auto;top:auto;max-width:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:16px;font-weight:600;text-shadow:0 1px 3px #000}
@media (max-width:600px){.player .pbar{gap:16px}.player .pbar .ttl{font-size:13px}.player .pbar .back{min-height:44px}}
/* hover-grow (2026-10-13): grow from centre, smaller scale, gap > growth so neighbours never touch; edge tiles grow inward */
.strip{gap:18px}
.tile,.ctile,.ctry-tile{transform-origin:center}
.tile:hover,.tile:focus,.ctile:hover,.ctile:focus,.ctry-tile:hover,.ctry-tile:focus{transform:scale(1.04)}
.card{transform-origin:center}.card:hover,.card:focus{transform:scale(1.05)}
.strip>.edge-l,.strip>:first-child{transform-origin:left center}.strip>.edge-r,.strip>:last-child{transform-origin:right center}
@media (hover:none){.tile:hover,.tile:focus,.ctile:hover,.ctile:focus,.card:hover,.card:focus{transform:none}}
/* award captions (2026-10-13): hover scales only the poster; 3 one-line captions + '+N' on its own line, fixed height */
.card:has(.cap):hover,.card:has(.cap):focus{transform:none}
.card:has(.cap) img{transition:transform .18s;transform-origin:center}
.card:has(.cap):hover img,.card:has(.cap):focus img{transform:scale(1.04)}
.strip>.card:has(.cap):first-child img{transform-origin:left center}.strip>.card:has(.cap):last-child img{transform-origin:right center}
.card .cap{height:calc(3 * 1.35em + 26px);overflow:hidden;line-height:1.35;font-size:11.5px}
.card .cap .cl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:1.35em}
.card .cap .capmore{display:block;width:max-content;margin-top:4px;line-height:16px}
.ynav{position:sticky;top:var(--hh,72px);z-index:25;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 4vw 8px;border-bottom:1px solid #ffffff12;margin-bottom:8px}
.ynav .ydec,.ynav .yyrs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.ynav .yyrs{margin-top:8px}.ynav .ydec::-webkit-scrollbar,.ynav .yyrs::-webkit-scrollbar{display:none}
.ypill{flex:none;display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.ypill.sm{min-height:28px;padding:2px 11px;font-size:12px}.ypill.on,.ypill:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12)}
.ynav .ysel{display:none}
@media (max-width:600px){.ynav .ydec,.ynav .yyrs{display:none}.ynav .ysel{display:block;min-height:44px;padding:0 14px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;font:inherit}}

.hubhead .hublogo.wl img{filter:brightness(0) invert(1)} /* new streamer hubs: white logo on black (2026-10-13) */
.ctile{display:flex;align-items:center;justify-content:center;padding:0 14%;text-align:center}.ctile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;text-align:center;line-height:1.25;max-width:100%}
html,body{overflow-x:clip!important}body{overflow-y:visible}
.tilehead{position:sticky;top:var(--hh,72px);z-index:30;background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tilehead~.ynav{top:calc(var(--hh,72px) + var(--th,64px))}
.er-sent{flex:0 0 1px;align-self:stretch}.er-sk{display:flex;gap:18px;flex:none}
a.tile.ctile{display:flex;align-items:center;justify-content:center;padding:0 12%;overflow:hidden;text-align:center;box-sizing:border-box}
a.tile.ctile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;text-align:center;max-width:100%;line-height:1.25;word-break:normal;overflow-wrap:anywhere}
/* z31: episode next-up line + in-player audio/subs menu (thin pill) */
.title-body .epnext{font-size:14px;color:var(--mut);margin-bottom:2px}
.player .pbar .trkB{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.player .pbar .trkB:hover,.player .pbar .trkB:focus{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12)}
.player .trkM{position:absolute;top:calc(64px + env(safe-area-inset-top));right:4vw;min-width:220px;max-width:min(320px,90vw);max-height:70vh;overflow:auto;background:rgba(10,10,10,.92);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.player .trkM[hidden]{display:none}
.player .trkM .h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:8px 10px 4px}
.player .trkM button{all:unset;cursor:pointer;padding:9px 12px 9px 30px;border-radius:8px;font-size:14px;color:#fff;position:relative}
.player .trkM button:hover,.player .trkM button:focus{background:rgba(255,255,255,.1)}
.player .trkM button.on::before{content:'✓';position:absolute;left:10px}
@media (max-width:600px){.player .pbar .trkB{min-height:44px;font-size:13px;padding:6px 12px}.player .trkM{right:3vw}}
/* z31: season poster tiles */
.seasons{display:flex;gap:16px;overflow-x:auto;padding:10px 4px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.seasons::-webkit-scrollbar{display:none}
.stile{all:unset;flex:none;width:130px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transform-origin:center;transition:transform .18s}
.stile .sp{position:relative;display:block;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#111;outline:1px solid transparent;outline-offset:2px}
.stile .sp img{width:100%;height:100%;object-fit:cover;display:block}
.stile .slab{position:absolute;inset:auto 0 0 0;padding:22px 8px 8px;background:linear-gradient(transparent,rgba(0,0,0,.85));font-size:13px;font-weight:600;text-align:center}
.stile.on .sp{outline:1px solid #fff}
.stile b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stile small{font-size:12px;color:var(--mut)}
.stile:hover,.stile:focus{transform:scale(1.04)}.stile:focus .sp{outline-color:#fffa}
@media (max-width:600px){.stile{width:104px}.seasons{gap:12px}}
@media (hover:none){.stile:hover{transform:none}}
/* z31: resume progress in play button + highlighted episode */
#playB{position:relative;overflow:hidden}#playB .pbp{position:absolute;left:20px;right:20px;bottom:6px;height:2px;background:#fff3;border-radius:1px}#playB .pbp i{display:block;height:100%;background:#fff}
.eps .ep.cur{outline:1px solid #fff;outline-offset:2px;border-radius:8px}
/* z31: in-page search fields readable (white text, 85% placeholder); top-bar #q untouched */
#app input[type=search],#hq{color:#fff;-webkit-text-fill-color:#fff}
#app input[type=search]::placeholder,#hq::placeholder{color:#fff;opacity:.85;-webkit-text-fill-color:rgba(255,255,255,.85)}
.sel select:disabled{opacity:1;color:#fff;-webkit-text-fill-color:#fff;cursor:default}
/* z31: Volver pinned under the top bar on every inner page */
.backrail{position:sticky;top:var(--hh,72px);z-index:35;height:0;overflow:visible;pointer-events:none}
.backrail .pageback{position:absolute;top:10px;left:max(4vw,env(safe-area-inset-left));margin:0;pointer-events:auto}
.backrail+*{padding-top:60px}.backrail+.hero{padding-top:0}
.pageback.inbar{position:static;margin:10px 4vw 0;flex:none}
.hubsticky:has(>.pageback.inbar),.tilehead:has(>.pageback.inbar){display:flex;flex-wrap:wrap;align-items:center}
.hubsticky>.pageback.inbar~*,.tilehead>.pageback.inbar~*{min-width:0}
@media (max-width:600px){.backrail .pageback{top:8px}.pageback.inbar{margin:8px 4vw 0}}
/* z31: shape-matched skeletons */
.sk.sk-tile{border:2px solid transparent;box-shadow:none;border-radius:12px}
.sk.sk-wide{aspect-ratio:16/9;height:auto;border-radius:8px}
.sk.sk-ep{height:96px;border-radius:8px;margin-bottom:10px}
/* z31: text tiles — span takes full inner width so balanced 2-line text is visible and centered */
a.tile.ctile span,.ctile span{flex:1 1 auto;width:100%;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-align:center;line-height:1.25}
.strip{scroll-padding-right:4vw}.strip::after{content:'';flex:0 0 4vw}
/* z31b: Volver rail is a real sticky strip (no overlap with headings) */
.backrail{height:auto;overflow:visible;pointer-events:auto;padding:8px max(4vw,env(safe-area-inset-left));background:#0b0b10f2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.backrail .pageback{position:static;margin:0}
.backrail+*{padding-top:0}
/* z31b: text tiles — plain block text, no mid-word breaks */
a.tile.ctile,.ctile{padding:0 10%}
a.tile.ctile span,.ctile span{display:block;width:100%;max-height:2.5em;overflow:hidden;overflow-wrap:normal;word-break:normal;hyphens:none;text-wrap:balance}
/* z32: brand-colored logo masks (tiles + hub headers) */
.logo-m{display:block;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.hubhead .hublogo .logo-m{flex:none}
/* z32: narrow screens — no tile clipped at the right edge: rows end with padding equal to the left margin */
@media (max-width:600px){.strip{padding-right:4vw;scroll-padding-inline:4vw}.strip>*:last-child{margin-right:0}}
/* z32: % padding resolved against the row width (blanked text on wide screens); use fixed padding */
a.tile.ctile,.ctile{padding:0 18px}@media (max-width:600px){a.tile.ctile,.ctile{padding:0 10px}}
/* z32f: second top-bar search (people/countries/genres/...) */
header#top .search{flex:1 1 0;max-width:340px;margin:0}header#top .search:first-of-type{margin-left:auto}header#top .search.s2{margin-right:auto;position:relative}
.q2r{position:absolute;top:calc(100% + 6px);left:0;right:0;min-width:300px;max-height:70vh;overflow:auto;background:rgba(10,10,10,.96);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:6px;z-index:60;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.q2r[hidden]{display:none}.q2r .h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999;padding:8px 10px 4px}
.q2r a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#fff;text-decoration:none;font-size:14px}.q2r a:hover,.q2r a:focus{background:rgba(255,255,255,.1);outline:none}
.q2r .av{flex:none;width:28px;height:28px;border-radius:50%;background:#1a1a22 center/cover}.q2r .av.noph{background:#1a1a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150'%3E%3Crect width='100' height='150' fill='%231a1a22'/%3E%3Ccircle cx='50' cy='52' r='22' fill='%235a5a6a'/%3E%3Cpath d='M18 138c0-24 14.3-42 32-42s32 18 32 42' fill='%235a5a6a'/%3E%3C/svg%3E") center 30%/85% no-repeat}.q2r .none{padding:12px;color:#999;font-size:14px}
@media (max-width:600px){
  header#top .search.s2{order:0;flex:0 0 44px;max-width:44px;margin:0;position:static}
  header#top .search.s2 input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Ccircle cx='9' cy='6' r='3.2'/%3E%3Cpath d='M3 17c.7-3.4 3.2-5.4 6-5.4s5.3 2 6 5.4'/%3E%3C/svg%3E")}
  header#top .search:first-of-type{margin-left:auto}
  header#top .search.s2:focus-within{position:absolute}
  .q2r{position:fixed;top:calc(58px + env(safe-area-inset-top));left:10px;right:10px;min-width:0}
  nav button{padding:0 8px}
}
/* z32f: genres separated by a wrap-safe dot attached to the following genre (never starts a line) */
.meta .g+.g::before{content:"· ";margin-left:-.15em}
.title-body .acts+.sel{margin-top:10px}
header#top .search input:focus{outline:none;border-color:rgba(255,255,255,.6)}
@media (max-width:600px){header#top .search.s2:focus-within{position:absolute;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(6px + env(safe-area-inset-top));max-width:none;flex:none;z-index:5}header#top .search.s2:focus-within input{width:100%;padding:0 14px 0 40px;background-position:14px center}}
@media (max-width:600px){nav button{white-space:nowrap;font-size:12px;padding:0 9px}#profBtn svg{display:none}header#top .search,header#top .search.s2{flex-basis:40px;max-width:40px}header#top .search input{width:40px;height:40px}header#top .search:focus-within input{background-color:#000;width:100%}header#top .brand{flex:none}}
/* z32g: in-progress episode card next to Ver */
.acts{align-items:center;flex-wrap:wrap}
.epcard{display:inline-flex;align-items:center;gap:12px;padding:6px 14px 6px 6px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(0,0,0,.45);color:#fff;text-decoration:none;max-width:min(420px,100%);transform-origin:center;transition:transform .18s,border-color .15s}
.epcard:hover,.epcard:focus{border-color:rgba(255,255,255,.75);transform:scale(1.03)}
.epcard .th{position:relative;flex:none;width:128px;aspect-ratio:16/9;border-radius:8px;background:#111 center/cover}
.epcard .pb{position:absolute;left:6px;right:6px;bottom:5px;height:3px;background:#fff4;border-radius:2px}.epcard .pb i{display:block;height:100%;background:#fff;border-radius:2px}
.epcard .tx{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}.epcard .tx b{font-weight:600}.epcard .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.epcard .tx small{color:var(--mut);font-size:12px}
@media (max-width:600px){.epcard{width:100%}.epcard .th{width:112px}}
@media (hover:none){.epcard:hover{transform:none}}
/* z32g: dark, readable track pickers on every browser (iOS rendered white boxes with faint text) */
.sel select{-webkit-appearance:none;appearance:none;background:#000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;color:#fff;-webkit-text-fill-color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:8px 34px 8px 12px;font:inherit;font-size:15px;min-height:42px;opacity:1}
.sel select:focus{outline:none;border-color:rgba(255,255,255,.75)}.sel select option{background:#000;color:#fff}
/* z32h: slim, single-row sticky title bar (awards / by-year / tiles), same rhythm as hub sticky headers */
.tilehead{display:flex;flex-wrap:nowrap;align-items:center;gap:28px;padding:14px 4vw 10px;min-height:0;border-bottom:1px solid #ffffff12}
.tilehead>.pageback.inbar{margin:0;flex:none}
.tilehead h1{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tilehead .more{flex:none;margin-left:auto}
.tilehead~.ynav{top:auto}
/* year jump: ONE compact row */
.ynav{display:flex;align-items:center;gap:10px;padding:8px 4vw;margin-bottom:8px;border-bottom:1px solid #ffffff12}
.ynav .yyrs{display:flex;gap:8px;margin:0;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.ynav .ydw{flex:none;position:relative;display:inline-flex}
.ynav .ydsel{-webkit-appearance:none;appearance:none;min-height:30px;padding:2px 30px 2px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center;color:#fff;-webkit-text-fill-color:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ynav .ydsel option{background:#000;color:#fff}
@media (max-width:600px){
  .tilehead{gap:16px;padding:10px 4vw 8px}.tilehead h1{font-size:20px}
  .ynav{padding:6px 4vw}.ynav .ydw,.ynav .yyrs{display:none}
  .ynav .ysel{display:block;min-height:36px;padding:0 14px;-webkit-appearance:none;appearance:none;background:rgba(0,0,0,.45);color:#fff;-webkit-text-fill-color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:999px;font:inherit;font-size:14px}
}
.card .cap .capmore[hidden]{display:none}
#app>.tilehead,#app>.tilehead:has(>.pageback.inbar){flex-wrap:nowrap;align-items:center;background:#0b0b10}
#app>.ynav{background:#0b0b10}
/* z32h: ONE accent for every selection / focus / active state = deep indigo */
:root{--accent:#1e3a8a;--acc:var(--accent);--ring:var(--accent)}
*{-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible,.kb :focus{outline:2px solid var(--accent);outline-offset:2px}
input,select,textarea{accent-color:var(--accent);caret-color:var(--accent)}
header#top .search input:focus,#app input[type=search]:focus,#hq:focus,.sel select:focus,.ynav .ydsel:focus,.ynav .ysel:focus,.login input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);outline:none}
.ypill.on,.ynav .ydsel{border-color:var(--accent)}.ypill.on{background:rgba(30,58,138,.18)}
.ctile.on,.stile.on .sp{border-color:var(--accent);outline-color:var(--accent)}
.stile:focus-visible .sp{outline:2px solid var(--accent)}
.eps .ep.cur{outline-color:var(--accent)}
.dots button.on{background:var(--accent)}
.card .cap .capmore[aria-expanded=true]{border-color:var(--accent);background:rgba(30,58,138,.18)}
.btn:focus-visible,.pageback:focus-visible,.capmore:focus-visible,.ypill:focus-visible,.epcard:focus-visible,.tile:focus-visible,.card:focus-visible,.ctry-tile:focus-visible,.q2r a:focus-visible,.player .trkB:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.player .trkM button.on,.player .trkM button[aria-checked=true]{color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.login .pw .eye:focus-visible{outline:2px solid var(--accent)}
/* z32j: hub bar first, attached under the top bar; compact brand band; magnifier icons in every search */
#app>.hubsticky:first-child{margin-top:0}
#app>.hubsticky{display:flex;flex-wrap:nowrap;align-items:center;gap:20px;padding:0 4vw;min-height:64px;background:#0b0b10}
#app>.hubsticky>.pageback.inbar{margin:0;flex:none}
#app>.hubsticky .hubhead{flex:0 1 auto;align-self:stretch;display:flex;align-items:center;flex-wrap:nowrap;gap:20px;padding:0 22px;min-height:64px;margin:0}
#app>.hubsticky .hubhead h1.hublogo{margin:0;display:flex;align-items:center;flex:none}
#app>.hubsticky .hubhead input{min-width:200px;width:min(280px,30vw)}
#app>.hubsticky .tabs{margin-left:auto;padding:0;align-self:stretch;display:flex;align-items:stretch}
#app>.hubsticky .tabs button{display:flex;align-items:center}
#app>.hubsticky .hublogo.ctry{padding:0;border:0;background:none}#app>.hubsticky .hublogo.ctry span{font-size:24px}
#app>.hubsticky+.hero{margin-top:0}
#q,#q2,#hq,#app input[type=search]{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffffcc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5.2'/%3E%3Cpath d='M11 11l3.6 3.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:13px center;background-size:15px 15px;padding-left:36px}
input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
@media (max-width:760px){
  #app>.hubsticky{flex-wrap:wrap;gap:12px;padding:12px 4vw;min-height:0}
  #app>.hubsticky>.pageback.inbar{flex:0 0 auto}
  #app>.hubsticky .hubhead{order:2;flex:1 1 100%;flex-wrap:wrap;gap:12px;padding:12px 14px;min-height:0;border-radius:10px}
  #app>.hubsticky .hubhead input{flex:1 1 160px;min-width:0;width:auto}
  #app>.hubsticky .tabs{order:3;flex:1 1 100%;margin:0}
}
/* z32k: every inner-page second row = the title page's slim Volver bar height (8px + 40px Volver + 8px) */
:root{--subh:56px}
#app>.backrail{min-height:var(--subh);display:flex;align-items:center;padding-top:0;padding-bottom:0}
#app>.backrail .pageback,#app>.hubsticky>.pageback.inbar,#app>.tilehead>.pageback.inbar{min-height:40px;height:40px;padding-top:0;padding-bottom:0}
#app>.hubsticky,#app>.tilehead{height:var(--subh);min-height:var(--subh);padding-top:0;padding-bottom:0}
#app>.hubsticky .hubhead{min-height:0;height:var(--subh);align-self:auto;padding:0 18px}
#app>.hubsticky .hubhead input{height:34px;padding-top:0;padding-bottom:0;font-size:14px}
#app>.hubsticky .tabs{height:var(--subh)}
#app>.tilehead h1{font-size:22px}
#app>.ynav{min-height:0}
@media (max-width:760px){
  #app>.hubsticky{height:auto;padding:8px 4vw 0;gap:8px}
  #app>.hubsticky>.pageback.inbar{height:40px}
  #app>.hubsticky .hubhead{height:var(--subh);padding:0 12px;flex-wrap:nowrap}
  #app>.hubsticky .hubhead input{height:36px;font-size:16px}
  #app>.hubsticky .tabs{height:44px}
  #app>.tilehead{height:var(--subh)}#app>.tilehead h1{font-size:18px}
}
/* z32k: everything in the top bar and sticky bars vertically centered, equal padding, no stray margins */
header#top{display:flex;align-items:center}
header#top>*{margin-top:0!important;margin-bottom:0!important;align-self:center}
header#top .brand{display:flex;align-items:center;height:40px;line-height:0}header#top .brand img{display:block;vertical-align:middle}
#app>.backrail,#app>.hubsticky,#app>.tilehead,#app>.ynav{align-items:center}
#app>.backrail>*,#app>.hubsticky>*,#app>.tilehead>*,#app>.ynav>*{margin-top:0;margin-bottom:0}
#app .pageback{display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
@media (max-width:760px){#app>.hubsticky{padding:8px 4vw}#app>.hubsticky .tabs{height:40px}}
/* z32l: gear settings menu (same look as the profile menu) */
#outBtn{width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid #fff3;color:#fff}
#outBtn:hover{border-color:#fffa}#outBtn[aria-expanded=true]{border-color:var(--accent)}
.gmenu{position:fixed;z-index:300;min-width:280px;max-width:calc(100vw - 16px);background:#0b0b10f7;border:1px solid #fff3;border-radius:12px;padding:6px;box-shadow:0 12px 32px #000c;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.gmenu button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none;border:0;border-radius:8px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer}
.gmenu button:hover,.gmenu button:focus-visible{background:#ffffff14;outline:none}
.gmenu .gl{flex:1}.gmenu .gv{color:var(--mut);font-size:13px;white-space:nowrap}
.gmenu .ck{width:16px;display:inline-block;text-align:center;color:var(--accent);font-weight:700}
.gmenu button[aria-checked=true]{color:#fff}
.gmenu .gback{color:var(--mut);font-size:13px;min-height:36px}
.gmenu hr{border:0;border-top:1px solid #ffffff1a;margin:4px 6px}
.gmenu .gnote{color:var(--mut);font-size:12px;line-height:1.35;padding:6px 12px 8px}
@media (max-width:600px){#outBtn{width:40px;height:40px}.gmenu{left:8px;right:8px!important;min-width:0}}
#profMenu .ck{color:var(--accent);font-weight:700}
/* z32m: brand band = a pill matching Volver (40px tall, fully rounded, 8px above/below inside the 56px bar) */
#app>.hubsticky .hubhead{height:40px;min-height:40px;align-self:center;border-radius:20px;padding:0 5px 0 16px;gap:14px}
#app>.hubsticky .hubhead input{height:30px;border-radius:15px;font-size:13px;width:min(240px,26vw);min-width:160px}
#app>.hubsticky .hublogo.ctry span{font-size:17px}
@media (max-width:760px){
  #app>.hubsticky .hubhead{height:40px;padding:0 5px 0 14px;border-radius:20px}
  #app>.hubsticky .hubhead input{height:30px;font-size:16px;min-width:0;width:auto;flex:1 1 120px}
}
/* z32n: catalog filter indicator */
#outBtn{position:relative}#outBtn.cfon::after{content:'';position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #0b0b10}
.gmenu .gv.on{color:#fff}
.cfnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 4vw 0;padding:8px 8px 8px 14px;border:1px solid #ffffff1f;border-left:3px solid var(--accent);border-radius:10px;background:#ffffff08;color:#ddd;font-size:13.5px;width:max-content;max-width:calc(100% - 8vw)}
.cfnote .cfoff{min-height:30px;padding:0 12px;border-radius:15px;border:1px solid #fff3;background:transparent;color:#fff;font:inherit;font-size:12.5px;cursor:pointer}.cfnote .cfoff:hover{border-color:#fffa}
.gmenu .gspin{width:12px;height:12px;margin-left:auto;border:1.5px solid #fff4;border-top-color:var(--accent);border-radius:50%;animation:gsp .7s linear infinite;flex:none}
@keyframes gsp{to{transform:rotate(360deg)}}
/* z32q: unified grouped search */
header#top .search{max-width:640px}
#gsp{position:fixed;top:var(--hh,72px);left:0;right:0;z-index:90;max-height:calc(100vh - var(--hh,72px));overflow:auto;background:#0b0b10;border-bottom:1px solid #ffffff1f;box-shadow:0 18px 40px #000c;-webkit-overflow-scrolling:touch}
#gsp[hidden]{display:none}
#gsp .gsp-in{padding:4px 0 18px}
#gsp .gsp-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4vw 0;color:var(--mut);font-size:13px}
#gsp .gs-all{color:#fff;border:1px solid #fff3;border-radius:15px;padding:5px 12px;font-size:13px;text-decoration:none}#gsp .gs-all:hover,#gsp .gs-all:focus-visible{border-color:var(--accent)}
.gs-row h2{font-size:17px}
.gs-chips{display:flex;gap:8px;overflow-x:auto;padding:2px 4vw 6px;scrollbar-width:none}.gs-chips::-webkit-scrollbar{display:none}
.gs-chip{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:17px;border:1px solid #fff3;background:#ffffff0d;color:#fff;font-size:14px;text-decoration:none;white-space:nowrap}
.gs-chip:hover,.gs-chip:focus-visible{border-color:var(--accent);outline:none}
@media (max-width:600px){#gsp{top:calc(52px + env(safe-area-inset-top));bottom:0;max-height:none}body.gsp-on{overflow:hidden}}
@media (min-width:601px){header#top .search{flex:1 1 auto;max-width:640px;margin:0 auto}}
/* z32r: rating limits menu + password gate */
#profMenu{max-height:calc(100vh - 80px);overflow:auto}#profMenu .rh{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999}
#profMenu hr{border:0;border-top:1px solid #ffffff1f;margin:6px 4px}#profMenu .rl{display:flex;flex-direction:column;line-height:1.2}#profMenu .rl small{color:#999;font-size:12px}
#pwGate{position:fixed;inset:0;z-index:400;background:#000b;display:flex;align-items:center;justify-content:center;padding:16px}
#pwGate .pwbox{width:min(380px,100%);background:#111117;border:1px solid #fff3;border-radius:14px;padding:20px}
#pwGate h3{margin:0 0 8px;font-size:18px}#pwGate p{margin:0 0 14px;color:#bbb;font-size:14px;line-height:1.45}
#pwGate .pwrow{display:flex;gap:6px}#pwGate input{flex:1;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff;font-size:16px}
#pwGate input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--ring)}#pwGate .eye{min-width:44px;border-radius:10px;border:1px solid #fff3;background:#000;color:#fff}
#pwGate .err{min-height:20px;color:#6b8cff;font-size:13px;margin:8px 0}#pwGate .pwact{display:flex;justify-content:flex-end;gap:8px}
.card .why{font-size:11.5px;color:#9a9aa3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* z33 (JC 2026-10-14): compact sticky category pill bar (awards / Oscars), stacked: title bar -> categories -> decade+years */
#app>section.row.catbar{position:sticky;z-index:29;background:#0b0b10;margin:0;padding:6px 4vw;border-bottom:1px solid #ffffff12}
#app>section.row.catbar>h2{display:none}
#app>section.row.catbar .strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin:0}
#app>section.row.catbar .strip::-webkit-scrollbar{display:none}
#app>section.row.catbar a.tile.ctile{flex:none;width:auto;height:34px;min-height:34px;aspect-ratio:auto;padding:0 16px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);transform:none}
#app>section.row.catbar a.tile.ctile span{display:block;width:auto;max-height:none;max-width:none;white-space:nowrap;font-size:14px;font-weight:500;line-height:1;letter-spacing:0;-webkit-line-clamp:unset}
#app>section.row.catbar a.tile.ctile span br{display:none}
#app>section.row.catbar a.tile.ctile:hover{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.12)}
#app>section.row.catbar a.tile.ctile.on{border-color:var(--accent);background:rgba(30,58,138,.18)}
#app>.ynav{margin-bottom:0}
#app section.row[id^="y-"]{scroll-margin-top:calc(var(--stk,128px) + 8px)}
@media (max-width:600px){#app>section.row.catbar{padding:5px 4vw}#app>section.row.catbar a.tile.ctile{padding:0 13px}#app>section.row.catbar a.tile.ctile span{font-size:13px}}
.awi{width:1em;height:1em;vertical-align:-.14em;margin-right:.3em;flex:none;color:#fff}
.awin b{font-weight:700}
/* z34a: Filters icon beside the gear */
#filtBtn{position:relative;width:40px;height:40px;min-height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:transparent;border:1px solid #fff3;color:#fff;flex:none}
#filtBtn:hover{border-color:#fffa}#filtBtn.cfon::after{content:'';position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #0b0b10}
.gmenu .rh{display:flex;align-items:center;gap:6px;padding:8px 12px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#999}
.gmenu .rl{display:flex;flex-direction:column;line-height:1.2;text-align:left}.gmenu .rl small{color:#999;font-size:12px}
.gmenu{max-height:calc(100vh - 80px);overflow:auto}
@media (max-width:600px){#filtBtn,#outBtn{width:36px;height:36px;min-height:36px}header#top nav{gap:6px}#profBtn span{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* z34a: user avatar circle (initials) */
#profBtn{width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid #fff3;background:transparent;display:inline-flex;align-items:center;justify-content:center;flex:none}
#profBtn .ini{font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;max-width:none}#profBtn:hover{border-color:#fffa}#profBtn svg{display:none}
.gmenu .uname{padding:10px 12px 6px;font-weight:600;color:#fff}
@media (max-width:600px){#profBtn{width:36px;height:36px;min-height:36px}#profBtn .ini{font-size:12px}}
#outBtn{display:none!important}.gmenu hr.soft{border-top-color:#ffffff14;margin:6px 10px}

/* z33c award logo tiles + emblem icons */
a.tile.awt{position:relative}a.tile.awt .awlogo{object-fit:contain;display:block;pointer-events:none}
a.tile.awt .awn{position:absolute;right:9px;bottom:6px;font-size:11px;opacity:.8;pointer-events:none}
.awi.awe{display:inline-block;width:1.5em;height:1em;background:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.scopehead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 4vw 0}.scopehead h2{margin:0;font-size:22px}.scopehead .cnt{color:#999;font-weight:400;font-size:16px}.scopehead a{color:#ddd;font-size:14px;text-decoration:none;border-bottom:1px solid #fff4}.scopehead a:hover{color:#fff;border-color:var(--accent)}

/* z34-rc row title counts */
section.row > h2 .rc{font-weight:300;opacity:.6;margin-left:.15em}
/* posterlang (JC 2026-10-14): site-drawn poster badges, same geometry as the old baked chips */
.card .pbx{position:absolute;left:0;top:0;width:100%;aspect-ratio:2/3;pointer-events:none;z-index:1}
.card .pbx i{display:flex;align-items:center;justify-content:center;font:700 5cqw/1 Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:rgba(15,15,20,.7);border-radius:1.7cqw;height:6.8cqw;min-width:19cqw;padding:0 2cqw;box-sizing:border-box;letter-spacing:.02em}
.card .pbl{position:absolute;left:3cqw;bottom:3cqw;display:flex;flex-direction:column;gap:1.6cqw}
.card .pbr{position:absolute;right:3cqw;bottom:3cqw}
/* oscreq (JC 2026-10-14): complete-the-collection tiles */
/* ribbon (JC 2026-10-14): full-color + dark .25 veil + indigo corner banner (replaces grayscale) */
.card.miss .t{color:#888}.card.miss .t small{color:#666;font-size:11px}
.card.miss .cap{opacity:.6}
.card.miss:hover,.card.miss:focus-within{transform:none}
.card.miss .pw{position:relative;display:block;overflow:hidden;border-radius:8px}
.card.miss .pw img{border-radius:8px;display:block}
.card.miss .pw::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:8px;background:rgba(0,0,0,.25)}
.card.miss .pw::after{content:"Not available";position:absolute;top:14px;right:-34px;z-index:2;pointer-events:none;width:120px;padding:4px 0;background:var(--accent,#1e3a8a);color:#fff;font:700 8.5px/1.1 Inter,system-ui,sans-serif;letter-spacing:.03em;text-align:center;text-transform:uppercase;transform:rotate(45deg);box-shadow:0 1px 4px rgba(0,0,0,.45)}
html[lang=es] .card.miss .pw::after{content:"No disponible"}
html[lang=en] .card.miss .pw::after{content:"Not available"}
@media(max-width:640px){.card.miss .pw::after{top:15px;right:-30px;width:110px;font-size:6.5px;padding:3px 0}}
.reqb{position:absolute;left:4cqw;right:4cqw;bottom:4cqw;display:block;width:auto;z-index:3;box-sizing:border-box;background:#000000c7;padding:3.2cqw 2cqw;border-radius:6px;border:1px solid var(--accent,#1e3a8a);color:#fff;font-weight:600;font-size:7cqw;line-height:1.15;font-family:inherit;cursor:pointer;letter-spacing:0;white-space:nowrap;text-align:center;overflow:hidden}
.reqb:hover,.reqb:focus-visible{background:var(--accent,#1e3a8a);outline:none}
.reqb.busy{opacity:.6;cursor:progress}
.reqb.done{border-color:#666;color:#ccc;background:#111111d9;cursor:default}
.reqb.lim{font-size:5.4cqw;padding:3.2cqw 1cqw;letter-spacing:0}
.tilehead .oonly{margin-left:auto;flex:none;height:32px;padding:0 14px;border-radius:16px;border:1px solid #ffffff33;background:transparent;color:#ddd;font:500 13px/1 inherit;font-family:inherit;cursor:pointer;white-space:nowrap}
.tilehead .oonly.on{background:var(--accent,#1e3a8a);border-color:var(--accent,#1e3a8a);color:#fff}
.tilehead .oonly:focus-visible{outline:2px solid var(--accent,#1e3a8a);outline-offset:2px}
.tilehead h1 .rc{font-weight:300;font-size:.7em;opacity:.75;margin-left:6px}
@media(max-width:640px){.tilehead .oonly{height:28px;padding:0 10px;font-size:12px}}
.tilehead .oos{display:none}
@media(max-width:640px){.tilehead .ool{display:none}.tilehead .oos{display:inline}}
.card.miss{cursor:pointer}
/* award status badge on the poster (JC 2026-10-14): same look as .pbx i */
.card .awb{position:absolute;left:0;top:3cqw;width:100%;display:flex;justify-content:flex-start;padding-left:3cqw;box-sizing:border-box;pointer-events:none;z-index:2}
.card .awb i{display:inline-flex;align-items:center;justify-content:center;gap:1.2cqw;font:700 5cqw/1 Inter,system-ui,sans-serif;font-style:normal;color:#fff;background:rgba(15,15,20,.7);border-radius:1.7cqw;height:6.8cqw;min-width:19cqw;padding:0 2cqw;box-sizing:border-box;letter-spacing:.02em}
.card .awb .awi{width:1em;height:1em;margin:0;flex:none}
.card.miss .awb{opacity:1}
.cap .capn{opacity:.6}

/* vmx-brand */header#top .brand img{height:34px;width:auto}@media (max-width:600px){header#top .brand img{height:13px}}