/* AniZen web - restyled to match the approved AniZen app UI (mobile app source of truth:
   Theme.kt palette, Barlow Condensed/Bebas Neue/Archivo Black, PosterWallBackground, bottom capsule nav). */
@font-face{font-family:'BarlowCond';src:url(fonts/barlowcondensed_regular.ttf);font-weight:400}
@font-face{font-family:'BarlowCond';src:url(fonts/barlowcondensed_medium.ttf);font-weight:500}
@font-face{font-family:'BarlowCond';src:url(fonts/barlowcondensed_semibold.ttf);font-weight:600}
@font-face{font-family:'BarlowCond';src:url(fonts/barlowcondensed_bold.ttf);font-weight:700}
@font-face{font-family:'Bebas';src:url(fonts/bebas_neue.ttf)}
@font-face{font-family:'ArchivoBlack';src:url(fonts/archivo_black.ttf)}
:root{
 --bg:#0A0A0E; --s1:#14141C; --s2:#1D1D28; --acc:#A78BFA; --accdeep:#7C5CE0;
 --tx:#F5F5FA; --sec:#B8B8CA; --ontx:#12081F;
 --glass:rgba(20,20,28,.70); --stroke:rgba(184,184,202,.34);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--tx);font-family:'BarlowCond',sans-serif;font-weight:500;
 -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block}

/* --- poster wall background (same art the app ships) --- */
.wall{position:fixed;inset:0;z-index:-2;background:var(--bg)}
.wall img{width:100%;height:100%;object-fit:cover}
.wall::after{content:'';position:absolute;inset:0;
 background:linear-gradient(to bottom,rgba(10,10,14,.22),rgba(10,10,14,.45) 55%,rgba(10,10,14,.92))}

.shell{max-width:480px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:150px}

/* --- top row: wordmark + bell/person --- */
.toprow{display:flex;align-items:center;justify-content:space-between;padding:20px 22px}
.toprow .ticons{display:flex;gap:18px;align-items:center}
.ticons button,.ticons a{background:none;border:0;color:var(--sec);display:flex}
.ticons svg{width:24px;height:24px}
.brand{font-family:'ArchivoBlack';font-size:24px;letter-spacing:.5px;color:var(--tx)}
.wordmark span{display:inline-block;opacity:0;animation:wr 12s infinite}
.wordmark span:nth-child(1){animation-name:wr0}.wordmark span:nth-child(2){animation-name:wr1}
.wordmark span:nth-child(3){animation-name:wr2}.wordmark span:nth-child(4){animation-name:wr3}
.wordmark span:nth-child(5){animation-name:wr4}.wordmark span:nth-child(6){animation-name:wr5}
@keyframes wr0{0%{opacity:0}2.917%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes wr1{0%,1.667%{opacity:0}4.583%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes wr2{0%,3.333%{opacity:0}6.25%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes wr3{0%,5%{opacity:0}7.917%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes wr4{0%,6.667%{opacity:0}9.583%{opacity:1}97%{opacity:1}100%{opacity:0}}
@keyframes wr5{0%,8.333%{opacity:0}11.25%{opacity:1}97%{opacity:1}100%{opacity:0}}
.noanim .wordmark span{animation:none;opacity:1}
.notice{padding:0 22px;color:var(--sec);font-size:14px;display:none}

/* --- bottom capsule nav (app MainActivity) --- */
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:38px;z-index:20;
 width:min(432px,calc(100% - 48px));
 background:var(--glass);border:1px solid var(--stroke);border-radius:999px;
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 display:flex;padding:14px 10px}
.bottomnav a{flex:1;text-align:center;font-family:'Bebas';font-size:17px;letter-spacing:1.5px;
 color:var(--sec);position:relative;padding-top:1px}
.bottomnav a.active{color:var(--tx)}
.bottomnav a.active::after{content:'';position:absolute;left:50%;transform:translateX(-50%);
 bottom:-7px;width:6px;height:6px;border-radius:50%;background:var(--acc)}

/* --- honesty band (web preview only, not part of app UI) --- */
.prevband{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--acc);color:var(--ontx);
 font-family:'Bebas';font-size:14px;letter-spacing:1.6px;text-align:center;padding:7px 10px}

/* --- shared atoms --- */
.kicker{font-family:'Bebas';font-size:20px;letter-spacing:2.5px;color:var(--acc);text-align:center}
.sect{font-weight:600;font-size:20px;padding:22px 20px 12px}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;
 font-family:'Bebas';font-size:20px;letter-spacing:1.6px;padding:13px 30px;border:1.5px solid transparent}
.pillbtn.white{background:var(--tx);color:var(--bg)}
.pillbtn.line{background:transparent;color:var(--tx);border-color:var(--tx)}
.pillbtn.acc{background:var(--acc);color:var(--ontx)}
.pillbtn:disabled{opacity:.45}
.glass{background:var(--glass);border:1px solid var(--stroke);border-radius:28px;
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.rowscroll{display:flex;gap:14px;overflow-x:auto;padding:8px 20px;scrollbar-width:none}
.rowscroll::-webkit-scrollbar{display:none}
.item{flex:0 0 auto;width:124px}
.item .card{width:124px;height:176px;object-fit:cover;border-radius:14px}
.cardname{font-weight:600;font-size:15px;margin-top:6px;line-height:1.15}
.cardsub{color:var(--sec);font-size:13px;margin-top:2px}
.prog{height:4px;border-radius:2px;background:var(--s2);margin-top:6px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--acc)}
.chip{display:inline-block;font-family:'Bebas';font-size:16px;letter-spacing:1.2px;padding:7px 16px;
 border-radius:999px;background:var(--glass);border:1px solid var(--stroke);color:var(--tx)}
.chip.on{background:var(--acc);color:var(--ontx);border-color:var(--acc)}
.nores{color:var(--sec);text-align:center;padding:30px 20px;font-size:16px}

/* --- home --- */
.spot{text-align:center;padding-top:6px}
.spot h1{font-weight:700;font-size:34px;line-height:1.05;padding:4px 24px 0}
.spot .info{color:var(--sec);font-size:16px;margin-top:8px;padding:0 24px}
.stackwrap{position:relative;height:340px;margin:18px 0 4px}
.stkcard{position:absolute;left:50%;top:0;width:216px;height:310px;object-fit:cover;border-radius:22px;
 box-shadow:0 22px 50px rgba(0,0,0,.55);transform:translateX(-50%);transition:transform .45s ease,opacity .45s ease;
 cursor:pointer}
.stkcard.c{transform:translateX(-50%) scale(1);z-index:5}
.stkcard.l{transform:translateX(-118%) scale(.83) rotate(-11deg);z-index:4;opacity:.92}
.stkcard.r{transform:translateX(18%) scale(.83) rotate(11deg);z-index:4;opacity:.92}
.stkcard.off{opacity:0;pointer-events:none}
.stkname{text-align:center;color:var(--sec);font-size:14px;margin-top:10px}
.spot .actions{display:flex;gap:14px;justify-content:center;margin-top:16px}

/* --- search --- */
.searchwrap{padding:10px 20px 0}
.searchbar{display:flex;align-items:center;gap:12px;border-radius:999px;padding:14px 20px;
 background:var(--glass);border:1px solid var(--stroke);
 backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.searchbar svg{width:22px;height:22px;color:var(--sec);flex:0 0 auto}
.searchinput{flex:1;background:none;border:0;outline:0;color:var(--tx);
 font-family:'BarlowCond';font-weight:500;font-size:18px}
.searchinput::placeholder{color:var(--sec)}
.chips{display:flex;gap:10px;overflow-x:auto;padding:16px 20px 4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;padding:14px 20px}
.grid3 .item{width:auto}
.grid3 .item .card{width:100%;height:auto;aspect-ratio:2/3}

/* --- details --- */
.dbg{position:absolute;inset:0 0 auto;height:300px;overflow:hidden;z-index:-1}
.dbg img{width:100%;height:100%;object-fit:cover}
.dbg::after{content:'';position:absolute;inset:0;
 background:linear-gradient(to bottom,rgba(10,10,14,.25),rgba(10,10,14,.55) 60%,var(--bg))}
.dtop{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.dtop .dtlabel{font-family:'Bebas';font-size:17px;letter-spacing:2px;color:var(--tx)}
.backbtn{background:none;border:0;color:var(--tx);display:flex;padding:4px}
.backbtn svg{width:26px;height:26px}
.dhead{display:flex;align-items:flex-end;padding:96px 20px 0}
.dhead .poster{width:100px;height:146px;object-fit:cover;border-radius:12px;flex:0 0 auto;
 box-shadow:0 14px 30px rgba(0,0,0,.5)}
.dhead .dtt{padding:0 0 4px 16px}
.dhead .dtt .l1{font-family:'Bebas';font-size:30px;line-height:1;letter-spacing:1px}
.dhead .dtt .l2{font-family:'Bebas';font-size:32px;line-height:1;letter-spacing:1px;color:var(--acc)}
.dmeta{padding:14px 20px 0;color:var(--sec);font-size:16px}
.dactions{display:flex;gap:12px;padding:14px 20px 0}
.dsyn{padding:22px 20px 0}
.dsyn .h{font-family:'Bebas';font-size:20px;letter-spacing:1.6px}
.dsyn p{margin-top:8px;font-size:17px;line-height:1.35;color:var(--tx)}
.eps{padding:20px 20px 0}
.epchips{display:flex;gap:10px;padding:10px 0 4px}
.erow{display:flex;align-items:center;gap:12px;padding:10px 0}
.erow img{width:120px;height:68px;object-fit:cover;border-radius:10px;background:var(--s2);flex:0 0 auto}
.erow .ep{font-weight:600;font-size:16px}
.erow .dur{color:var(--sec);font-size:14px;margin-top:2px}
.erow .epplay{margin-left:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--tx);
 background:none;color:var(--tx);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.erow .epplay svg{width:16px;height:16px;margin-left:2px}
.dlbtn{display:block;text-align:center;color:var(--acc);font-size:16px;padding:14px 20px 6px}
.dlbtn.dis{color:var(--sec)}

/* --- saved / library --- */
.bighead{font-family:'Bebas';font-size:32px;letter-spacing:2px;padding:8px 20px 0}
.libtabs{display:flex;gap:12px;padding:14px 20px 0}
.libtab{flex:0 0 auto;font-family:'Bebas';font-size:17px;letter-spacing:1.5px;padding:10px 22px;
 border-radius:999px;background:var(--glass);border:1px solid var(--stroke);color:var(--tx)}
.libtab.on{background:var(--acc);color:var(--ontx);border-color:var(--acc)}
.cw2{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px;padding:16px 20px 0}
.cw2 .item{width:auto}
.cw2 .item .card{width:100%;height:96px;aspect-ratio:auto}
.subhead{font-family:'Bebas';font-size:22px;letter-spacing:1.8px;padding:24px 20px 0}

/* --- more / profile --- */
.pfhead{padding:8px 22px 0}
.pfavatar{width:64px;height:64px;border-radius:50%;background:var(--acc);color:var(--ontx);
 display:flex;align-items:center;justify-content:center;font-family:'Bebas';font-size:28px;margin-top:20px}
.pfname{font-weight:600;font-size:20px;margin-top:10px}
.pfmail{color:var(--sec);font-size:16px}
.pfsec{margin:24px 20px 0;padding:22px 24px}
.pfsec .h{font-family:'Bebas';font-size:22px;letter-spacing:1.6px}
.pfsec .s{color:var(--sec);font-size:15px;margin-top:4px}
.pfrow{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:17px}
.radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--sec);display:inline-block;position:relative}
.radio.on{border-color:var(--acc)}
.radio.on::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--acc)}
.pflinks{margin:24px 20px 0;display:flex;flex-direction:column;gap:12px}
.pflinks a{display:block;text-align:center;border:1px solid var(--stroke);border-radius:999px;
 padding:13px;font-family:'Bebas';font-size:17px;letter-spacing:1.5px;color:var(--tx);background:transparent}
.signout{margin:26px 20px 0;display:block;text-align:center;border:1px solid var(--stroke);
 border-radius:999px;padding:14px;font-family:'Bebas';font-size:17px;letter-spacing:1.5px;color:var(--sec)}

/* --- login --- */
.loginwrap{min-height:calc(100vh - 150px);display:flex;align-items:center;justify-content:center;padding:20px}
.logincard{width:100%;padding:30px 24px}
.logincard .lcbrand{font-family:'ArchivoBlack';font-size:30px;text-align:center}
.logincard .lclead{text-align:center;color:var(--sec);font-size:16px;margin-top:8px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:22px;
 background:#F7F6FC;color:#111018;border-radius:999px;padding:13px;font-weight:600;font-size:17px;border:0}
.ordiv{display:flex;align-items:center;gap:20px;margin:18px 0;color:var(--sec);font-size:15px}
.ordiv::before,.ordiv::after{content:'';flex:1;height:1px;background:var(--stroke)}
.field{width:100%;background:var(--s2);border:1px solid transparent;border-radius:14px;color:var(--tx);
 font-family:'BarlowCond';font-weight:500;font-size:17px;padding:13px 16px;outline:0;margin-bottom:14px}
.field::placeholder{color:var(--sec)}
.field:focus{border-color:var(--acc)}
.signin{width:100%;background:var(--acc);color:var(--ontx);border:0;border-radius:999px;padding:13px;
 font-family:'Bebas';font-size:18px;letter-spacing:1.6px}
.lcalt{text-align:center;margin-top:14px;font-size:16px;color:var(--tx)}
.lcalt span{color:var(--acc)}

/* --- player (static controls preview per approved prism-06 reference; NO real video, NO fake clock) --- */
.player{position:relative;height:100vh;display:flex;flex-direction:column;justify-content:space-between}
.pbgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pscrim{position:absolute;inset:0;z-index:-1;
 background:linear-gradient(to bottom,rgba(10,10,14,.55),rgba(10,10,14,.15) 30%,rgba(10,10,14,.15) 70%,rgba(10,10,14,.7))}
.ptop{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px}
.ptitle{font-family:'Bebas';font-size:22px;letter-spacing:1.5px}
.pep{color:var(--sec);font-size:15px;margin-top:2px}
.pback{background:none;border:0;color:var(--tx);font-family:'Bebas';font-size:16px;letter-spacing:1.5px;
 display:flex;align-items:center;gap:6px}
.pcenter{flex:1;display:flex;align-items:center;justify-content:center;gap:34px}
.pround{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--tx);background:rgba(10,10,14,.35);
 color:var(--tx);display:flex;align-items:center;justify-content:center}
.pround svg{width:20px;height:20px}
.pround.big{width:84px;height:84px}
.pround.big svg{width:32px;height:32px}
.pbot{padding:0 22px 90px}
.pseek{height:4px;border-radius:2px;background:rgba(245,245,250,.28);position:relative}
.pseek i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--acc);border-radius:2px}
.pseek b{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;
 border-radius:50%;background:var(--acc)}
.ptimes{display:flex;justify-content:space-between;color:var(--sec);font-size:14px;margin-top:8px}
.pdemoline{text-align:center;color:var(--sec);font-size:13px;margin-top:14px;letter-spacing:.4px}

/* --- profiles / splash / downloads --- */
.centerwrap{min-height:calc(100vh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}
.profcards{display:flex;gap:18px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.profcard{width:104px}
.profcard .pcimg{width:104px;height:104px;border-radius:22px;object-fit:cover}
.profcard .pcname{margin-top:8px;font-weight:600;font-size:15px}
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;text-align:center}
.splash .brand{font-size:44px}
.splash .tag{color:var(--sec);font-size:16px;margin-top:10px;letter-spacing:.4px}
.splash .go{margin-top:34px}
.dlrow{display:flex;align-items:center;gap:14px;padding:12px 20px}
.dlrow img{width:96px;height:56px;object-fit:cover;border-radius:10px;background:var(--s2)}
.dlrow .dt{font-weight:600;font-size:16px}
.dlrow .ds{color:var(--sec);font-size:14px;margin-top:2px}
@media (max-width:430px){.prevband{font-size:12px;letter-spacing:.8px;padding:6px 6px}}

/* Details parity: mobile poster/title flow; TV's wide heading on wide screens. */
.dhead{padding-top:208px;align-items:flex-end;gap:16px;flex-wrap:wrap}
.dhead .dtt{padding:0;flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.dhead .dtt .l1,.dhead .dtt .l2{line-height:1.12;letter-spacing:.4px}
.dmeta{padding-top:18px;line-height:1.4;overflow-wrap:anywhere}
.dactions{flex-wrap:wrap}
@media(min-width:720px){body:has(.dhead) .shell{max-width:960px}body:has(.dhead) .dbg{height:440px}.dhead{padding-top:245px;gap:24px}.dhead .poster{width:155px;height:222px}.dhead .dtt .l1,.dhead .dtt .l2{font-size:42px}.dhead .dtt{flex-basis:460px}}
@media(max-width:719px){.dhead.long-title{padding-top:150px;align-items:flex-start}.dhead.long-title .dtt{flex-basis:100%;padding-top:4px}.dhead.long-title .dtt .l1,.dhead.long-title .dtt .l2{display:inline;font-size:28px;line-height:1.14}.dhead.long-title .dtt .l1::after{content:' '}}
/* Fade the entire banner layer into the poster wall, not an opaque rectangle. */
.dbg{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 100%)}
@media(max-width:719px){.dbg{height:410px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%)}}