@font-face{font-family:"Anton";src:url(/fonts/anton-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-wght-normal.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}

/* Layout: one-screen phone app. Header, a full-height deck of generated posters, and a tab bar. */
:root{
  color-scheme:dark;
  --bg:#0f2a25; --surface:#17382f; --surface-2:#1f463b; --line:#32594d;
  --fg:#f5f1e4; --muted:#afc4b9;
  --yeh:#79dd9b; --yeh-ink:#07281a; --nah:#ff8263; --nah-ink:#3a0d02;
  --gold:#ffc93c; --gold-ink:#2e2100;
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.45 var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#app{height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;max-width:520px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px 6px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.brand{font:400 25px/1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.brand i{font-style:normal;color:var(--nah)}
.brand{white-space:nowrap;flex:none}
.who{min-width:0;display:flex;align-items:center;gap:7px;padding:6px 11px 6px 7px;border:1px solid var(--line);border-radius:99px;font-weight:600;font-size:13px;max-width:42%}
.who span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot{flex:none;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font-size:11px;font-weight:700}
main{min-height:0;min-width:0;display:flex;flex-direction:column}
.pane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-block:6px 20px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.pane.swipe{overflow:hidden;display:flex;flex-direction:column;gap:9px;padding-bottom:10px}

/* Tab bar */
nav{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav button{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px 7px;font-size:11.5px;font-weight:600;color:var(--muted)}
nav button[aria-current=page]{color:var(--fg)}
nav button[aria-current=page] svg{color:var(--gold)}
nav svg{width:22px;height:22px}
.badge{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:var(--gold-ink);font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:tabular-nums}

/* Swipe view */
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.seg{display:inline-flex;background:var(--surface);border-radius:99px;padding:3px}
.seg button{padding:5px 13px;border-radius:99px;font-size:13px;font-weight:600;color:var(--muted)}
.seg button[aria-pressed=true]{background:var(--fg);color:var(--bg)}
.genres{flex:none;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;-webkit-overflow-scrolling:touch}
.genres::-webkit-scrollbar{display:none}
.genres button{flex:none;padding:4px 11px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.genres button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink);box-shadow:none}
.more{justify-self:start;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:2px;color:var(--gold)}
.left{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#deck{position:relative;flex:1;min-height:0;margin-bottom:10px}
.card{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.34);touch-action:none;user-select:none;-webkit-user-select:none;will-change:transform;transform-origin:50% 90%}
.card[data-depth="1"]{transform:translateY(7px) scale(.965)}
.card[data-depth="2"]{transform:translateY(14px) scale(.93)}
.card.settle{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
.card.fly{transition:transform .3s ease-in,opacity .3s ease-in;pointer-events:none;z-index:5}
.poster{position:relative;flex:1;min-height:0;container-type:inline-size;overflow:hidden}
.poster svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrim{position:absolute;inset:auto 0 0;height:66%}
.ptitle{position:absolute;left:6cqw;right:6cqw;bottom:5cqw;font-family:var(--display);line-height:1.04;text-transform:uppercase;letter-spacing:.012em;overflow-wrap:anywhere;text-wrap:balance}
.info{padding:11px 14px 13px;display:grid;gap:5px;background:var(--surface)}
.meta{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.015em}
.blurb{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{padding:2px 8px;border-radius:6px;background:var(--surface-2);font-size:12px;font-weight:600;white-space:nowrap}
.chip.free{background:transparent;box-shadow:inset 0 0 0 1px var(--yeh);color:var(--yeh)}
.stamp{position:absolute;top:22px;padding:2px 14px;border:5px solid currentColor;border-radius:10px;font:400 44px/1.1 var(--display);text-transform:uppercase;opacity:0;pointer-events:none;background:rgba(10,20,15,.28)}
.stamp.y{left:18px;color:var(--yeh);transform:rotate(-11deg)}
.stamp.n{right:18px;color:var(--nah);transform:rotate(11deg)}
.actions{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.act{display:flex;align-items:center;justify-content:center;gap:8px;height:54px;border-radius:16px;font:400 23px/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.act svg{width:22px;height:22px}
.act.n{background:var(--nah);color:var(--nah-ink)}
.act.y{background:var(--yeh);color:var(--yeh-ink)}
.act:active{transform:scale(.97)}
.undo{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--fg)}
.undo:disabled{opacity:.3;cursor:default}
.undo svg{width:20px;height:20px}
.done{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:20px}
.done h2{font:400 34px/1.1 var(--display);text-transform:uppercase;margin:0;text-wrap:balance}
.done p{margin:0;color:var(--muted);max-width:32ch}

/* Shared content */
h1.big{font:400 36px/1.08 var(--display);text-transform:uppercase;margin:6px 0 6px;letter-spacing:.012em;text-wrap:balance}
h2.sec{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:20px 0 9px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
h2.sec:first-child{margin-top:6px}
h2.sec b{color:var(--fg);font-variant-numeric:tabular-nums}
.lede{color:var(--muted);margin:0 0 10px;max-width:60ch}
.small{font-size:12.5px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 17px;border-radius:12px;font-weight:700;background:var(--surface-2);text-align:center}
.btn.primary{background:var(--gold);color:var(--gold-ink)}
.btn.ghost{background:none;box-shadow:inset 0 0 0 1px var(--line)}
.btn.wide{width:100%}
.link{text-decoration:underline;text-underline-offset:2px;color:var(--fg);font-size:13px;font-weight:600}
.row{display:flex;gap:8px;align-items:stretch}
.row>input{flex:1;min-width:0}
input[type=text],textarea{width:100%;min-height:44px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--fg)}
textarea{resize:none;font-size:13px;word-break:break-all;display:block}
label.f{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.panel{background:var(--surface);border-radius:16px;padding:14px;display:grid;gap:10px}
.panel h3{margin:0;font-size:16px;font-weight:700}
.panel p{margin:0;color:var(--muted);font-size:13.5px}
.status{font-size:13px;font-weight:600;color:var(--yeh)}
.status.err{color:var(--nah)}

/* Services */
.svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.svc button{display:flex;align-items:center;gap:9px;min-height:50px;padding:7px 10px;text-align:left;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.svc button[aria-pressed=true]{background:var(--surface-2);box-shadow:inset 0 0 0 2px var(--gold)}
.svc .tick{flex:none;width:20px;height:20px;border-radius:6px;box-shadow:inset 0 0 0 1.5px var(--muted);display:grid;place-items:center;color:transparent}
.svc button[aria-pressed=true] .tick{background:var(--gold);box-shadow:none;color:var(--gold-ink)}
.tick svg{width:14px;height:14px}
.svc b{display:block;font-size:14px;line-height:1.2;font-weight:600}
.svc small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.stick{position:sticky;bottom:-20px;margin:16px -2px -20px;padding:12px 2px 16px;background:linear-gradient(to top,var(--bg) 78%,transparent)}

/* Watch list */
.wl{display:grid;gap:8px}
.item{display:grid;grid-template-columns:62px minmax(0,1fr);gap:11px;padding:9px;border-radius:14px;background:var(--surface)}
.item.match{background:var(--gold);color:var(--gold-ink)}
.item.match .meta,.item.match .small{color:#54400a}
.item.match .chip{background:rgba(46,33,0,.14);box-shadow:none;color:var(--gold-ink)}
.item.match .link{color:var(--gold-ink)}
.thumb{position:relative;width:62px;height:88px;border-radius:9px;overflow:hidden}
.thumb svg{position:absolute;inset:0;width:100%;height:100%}
.item h3{margin:0;font-size:15.5px;font-weight:700;line-height:1.22}
.item .body{display:grid;gap:5px;align-content:start;min-width:0}
.pill{display:inline-block;justify-self:start;padding:1px 8px;border-radius:99px;background:var(--gold-ink);color:var(--gold);font-size:11.5px;font-weight:700}
.iacts{display:flex;flex-wrap:wrap;gap:6px 13px;align-items:center;margin-top:2px}
.tbtn{font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.empty{padding:24px 12px;text-align:center;color:var(--muted)}
.empty h2{font:400 28px/1.15 var(--display);text-transform:uppercase;color:var(--fg);margin:0 0 6px}

/* People */
.people{display:grid;gap:6px}
.pers{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--surface)}
.pers.on{box-shadow:inset 0 0 0 2px var(--gold)}
.pers .nm{flex:1;min-width:0}
.pers .nm b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Details sheet */
#sheet{position:fixed;inset:0;z-index:20;background:rgba(5,16,13,.68);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;max-height:92%;overflow-y:auto;background:var(--surface);border-radius:20px 20px 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom,0px))}
.shead{position:relative;height:clamp(150px,30vh,250px);overflow:hidden}
.shead .poster{position:absolute;inset:0}
.close{position:absolute;top:10px;right:max(10px,env(safe-area-inset-right,0px));width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(5,16,13,.72);color:#fff}
.close svg{width:18px;height:18px}
.sbody{display:grid;gap:12px;padding-block:14px 0;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sbody p{margin:0;font-size:15.5px;max-width:60ch}
.sbody h3{margin:0 0 5px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.linkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.linkgrid a{text-decoration:none;color:inherit}
.linkgrid .trailer{grid-column:1/-1}
.status-line{font-size:14px;font-weight:700;color:var(--gold)}
.sacts{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* Match overlay and toast */
#ov{position:fixed;inset:0;z-index:30;background:var(--gold);color:var(--gold-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding-block:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-bottom,0px));padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
#ov .yy{font:400 clamp(54px,18vw,84px)/1 var(--display);text-transform:uppercase;animation:pop .42s cubic-bezier(.2,1.5,.4,1) both}
#ov p{margin:0;font-size:16px;font-weight:600}
#ov .mp{position:relative;width:min(44vw,172px);aspect-ratio:3/4;border-radius:14px;overflow:hidden;container-type:inline-size;box-shadow:0 12px 26px rgba(46,33,0,.35);flex:0 1 auto;min-height:0}
#ov .mp .poster{position:absolute;inset:0}
#ov .btn.primary{background:var(--gold-ink);color:var(--gold)}
#ov .btn.ghost{box-shadow:inset 0 0 0 2px var(--gold-ink)}
#ov .chip{background:rgba(46,33,0,.14);color:var(--gold-ink);box-shadow:none}
#ov .chips{justify-content:center}
#ov .btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
@keyframes pop{from{transform:scale(.5) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
#toast{position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:25;width:max-content;max-width:calc(100% - 32px);padding:9px 15px;border-radius:12px;background:var(--fg);color:var(--bg);font-size:13.5px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4)}
@media (max-height:640px){.blurb{-webkit-line-clamp:1}.act{height:46px}.undo{width:42px;height:42px}.stamp{font-size:34px}}
@media (prefers-reduced-motion:reduce){.card.fly,.card.settle{transition-duration:.01s}#ov .yy{animation:none}}

/* Real posters */
.poster{display:grid;place-items:end start;padding:6cqw;container-type:inline-size}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.poster .ptitle{position:static;font-size:12cqw}
.ctitle{margin:0;font-size:17px;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.info{gap:4px;padding:10px 14px 12px}
.cfoot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px 10px;margin-top:2px}
.thumb{display:block;padding:0}
.thumb .poster{position:absolute;inset:0;padding:5px}
.thumb .ptitle{font-size:17cqw}
.tname{font-size:inherit;font-weight:inherit;text-align:left;text-decoration:none}
.mini{min-height:36px;padding:5px 11px;font-size:13px}
.btn.danger{background:var(--nah);color:var(--nah-ink)}
.btn:disabled{opacity:.5;cursor:default}
.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);animation:spin .8s linear infinite;justify-self:center}
@keyframes spin{to{transform:rotate(360deg)}}
.slogo{flex:none;width:26px;height:26px;border-radius:6px}
.svc button:disabled{opacity:.55;cursor:default}
.credits{display:grid;gap:8px}
.credits img{width:110px;height:auto}
.credits p{margin:0}

/* Details sheet additions */
.shead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shead{background:var(--surface-2)}
.stitle{margin:0;font:400 28px/1.12 var(--display);letter-spacing:.012em;text-transform:uppercase;text-wrap:balance}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.video iframe,.video button{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video img{width:100%;height:100%;object-fit:cover;display:block}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center}
.playbtn svg{width:28px;height:28px}
.vids{display:flex;gap:14px;flex-wrap:wrap}
.wheres{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.where{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 4px;border-radius:9px;background:var(--surface-2);font-size:13px;font-weight:600}
.where img{width:26px;height:26px;border-radius:6px}
.cast{font-size:14px!important;color:var(--muted)}
.cast b{color:var(--fg);font-weight:600}
.sbody .spinner{margin:18px auto}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}