/* ===== ReelNook — dark cinema look: charcoal, gold and cinema red ===== */
:root{--bg:#0a0a0a;--pink:#1da1e2;--soft:#b9c0c9;--glass:rgba(255,255,255,.045);--line:rgba(29,161,226,.16);
  --gold:#1da1e2;--gold-dark:#0b6fa4;--red:#ff2d87;--ink:#141414;--cream:#f2f4f7;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:linear-gradient(180deg,#111214 0,var(--bg) 420px) fixed;color:var(--soft);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;padding-top:72px}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit}
button{cursor:pointer;border:0}
.center{text-align:center;margin:20px 0 50px}
.msg{padding:40px 4%;text-align:center}

/* NAV: full-width bar fixed to the top, thin gold line underneath */
.nav{position:fixed;top:0;left:0;right:0;width:100%;display:flex;align-items:center;gap:22px;padding:0 4%;height:64px;
  background:rgba(10,10,10,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(29,161,226,.28);z-index:50}
/* Whole site behaves like an app: clicking titles, descriptions or anything else shows no typing line
   and selects no text. Only boxes you type in (search, login, review) keep the typing line. */
html,body{-webkit-user-select:none;user-select:none;cursor:default;caret-color:transparent}
a,button,select,label,.card,.top-card{cursor:pointer}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;cursor:text;caret-color:auto}
input[type="range"],input[type="file"],input[type="checkbox"]{cursor:pointer}
/* Logo: "Reel" in cream, "Nook" in gold italic, classic serif. A gold line slides under it on hover. */
.logo{position:relative;font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:.3px;color:var(--cream);white-space:nowrap;line-height:1}
.logo span{color:var(--gold);font-style:italic}
.logo::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.logo:hover::after{transform:scaleX(1)}
.links{display:flex;gap:2px;flex:1;flex-wrap:wrap;align-self:stretch}
.links a{display:flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#aab1bb;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.links a:hover{color:var(--cream)}
.links a.active{color:var(--gold);border-bottom-color:var(--gold)}
.search{position:relative}
.search input{background:#17171a;border:1px solid #262a30;color:var(--cream);padding:9px 14px;border-radius:4px;width:230px;outline:none}
.search input:focus{border-color:var(--gold)}
.results{display:none;position:absolute;top:46px;right:0;width:330px;max-height:420px;overflow:auto;background:#141416;border:1px solid #262a30;border-radius:6px;padding:6px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.res{display:flex;gap:10px;align-items:center;padding:8px;border-radius:4px}
.res:hover{background:rgba(29,161,226,.08)}
.res img,.res .noimg{width:38px;height:56px;border-radius:3px;object-fit:cover;flex-shrink:0}
.res b{display:block;color:var(--cream);font-size:14px}
.res small{opacity:.8}
.none{padding:12px}
.auth-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;padding:8px 16px;border-radius:4px;border:1px solid var(--gold);color:var(--gold);white-space:nowrap;transition:background .2s,color .2s}
.auth-link:hover{background:var(--gold);color:var(--ink)}

/* HERO */
.hero{position:relative;height:72vh;min-height:430px;margin-top:0;background-size:cover;background-position:center top;display:flex;align-items:flex-end}
.hero::after,.d-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,var(--bg) 4%,transparent 60%),linear-gradient(to right,rgba(10,10,10,.92),transparent 65%)}
.hero-content{position:relative;z-index:2;padding:0 4% 70px;max-width:660px}

/* ===== MOVEMENT (saved copy of the files before this: data/before-motion/) — moves only, never fades ===== */
/* 1) home banner: the picture zooms very slowly, the title and buttons rise in */
.hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;background:center top/cover no-repeat;transform-origin:60% 40%;animation:heroZoom 22s ease-out both}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero-content{animation:riseIn .9s .15s cubic-bezier(.2,.7,.2,1) both}
/* 2) rows: the title and the posters glide up into place, one after another */
.row.reveal h2{transform:translateY(16px)}
.row.reveal.in h2{transform:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.row.reveal.in .row-scroll>*{animation:cardUp .65s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes cardUp{from{transform:translateY(34px)}}
/* 3) Discover panel slides down when it opens */
.dz:not([hidden]){animation:dzOpen .32s cubic-bezier(.2,.8,.2,1)}
@keyframes dzOpen{from{transform:translateX(-50%) translateY(-14px)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hero-bg,.hero-content,.row.reveal.in .row-scroll>*,.dz:not([hidden]){animation:none}.row.reveal h2{transform:none}}
h1,.hero-title{color:#fff;font-size:clamp(28px,5vw,52px);margin:10px 0;text-shadow:0 0 25px rgba(29,161,226,.5)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.meta{margin-bottom:10px}
.overview{color:#fff;opacity:.9;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 18px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{background:var(--pink);color:#fff;padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;display:inline-block;transition:.2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(29,161,226,.7)}
.btn.ghost{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.btn.glow{background:#ff2d87;box-shadow:0 0 18px rgba(255,45,135,.8)}

/* ROWS + CARDS */
.row{padding:0 4%;margin:26px 0}
.row h2{color:#fff;font-size:21px;margin-bottom:10px}
.row-wrap{position:relative}
.row-scroll{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:10px 4px 18px;scrollbar-width:none}
.row-scroll::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:0;bottom:18px;width:42px;background:rgba(10,10,10,.75);color:#fff;font-size:32px;z-index:5;opacity:0;transition:.2s}
.row-wrap:hover .arrow{opacity:1}
.arrow.left{left:0;border-radius:0 12px 12px 0}
.arrow.right{right:0;border-radius:12px 0 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;padding:0 4%}
.card{flex:0 0 170px;border-radius:14px;overflow:hidden;background:var(--glass);border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.grid .card{flex:auto}
.card:hover{transform:scale(1.06);box-shadow:0 0 24px rgba(29,161,226,.5);position:relative;z-index:3}
.poster{aspect-ratio:2/3;width:100%;background:#18181b;overflow:hidden;position:relative}
.air-badge{position:absolute;left:6px;right:6px;bottom:6px;padding:5px 6px;border-radius:8px;background:rgba(29,161,226,.93);color:#fff;font-size:11px;font-weight:700;line-height:1.25;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.air-badge.soon{background:rgba(255,45,135,.93)}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;background:#18181b}
.info{padding:10px}
.info h3{color:#fff;font-size:14px;margin:6px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info p{font-size:12px;opacity:.85;margin-bottom:8px}
.tag,.stag,.chip{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;color:#fff}
.tag.movie{background:#ff2d87}
.tag.tv{background:var(--pink)}
.tag.anime{background:#0ea5e9}
.chip{background:var(--glass);border:1px solid var(--line);margin:0 6px 6px 0;font-weight:500;font-size:13px;padding:4px 12px}
.add-btn,.rm{width:100%;background:#ff2d87;color:#fff;padding:7px;border-radius:10px;font-size:12px;font-weight:600}
.add-btn:hover{background:var(--pink)}
.hero .add-btn{width:auto;font-size:15px;padding:12px 26px;border-radius:999px;background:var(--glass);border:1px solid var(--line)}
.rm{background:rgba(239,68,68,.25);margin-top:6px}

/* TOP 10 */
.top-card{flex:0 0 210px;display:flex;align-items:flex-end;transition:transform .25s}
.top-card:hover{transform:scale(1.05)}
.rank{font-size:140px;font-weight:900;line-height:.78;color:transparent;-webkit-text-stroke:3px var(--pink);margin-right:-20px;z-index:1;text-shadow:0 0 20px rgba(29,161,226,.4)}
.top-card .poster{width:130px;flex-shrink:0;border-radius:10px;z-index:2}

/* STATUS COLORS */
.s-watching{background:#3b82f6}
.s-completed{background:#22c55e}
.s-dropped{background:#ef4444}
.s-plan{background:#f59e0b}
.s-hold{background:#64748b}
.status{display:block;width:100%;margin:8px 0;padding:11px;border-radius:12px;color:#fff;font-weight:700;font-size:15px}
.status:hover{filter:brightness(1.15)}
.status-box{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.status-box[hidden]{display:none}
.status-box .status{width:auto;margin:0;padding:10px 18px}

/* DETAILS — 1) wide picture on top  2) poster lower, overlapping its bottom edge  3) information beside the poster */
.d-top{position:relative;margin:-90px 0 18px;overflow:hidden;padding-bottom:6px}
/* the picture: slow zoom-in when the page opens, soft vignette, fades into the page */
.d-banner{position:relative;height:clamp(360px,62vh,660px);background:#18181b center 22%/cover no-repeat;transition:background-image .35s;animation:bannerIn 1.4s cubic-bezier(.2,.7,.2,1) both}
.d-banner.empty{background:radial-gradient(circle at 30% 20%,#0f1a24,#18181b 60%)}
.d-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgba(10,10,10,.55) 100%)}
.d-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.7) 0,rgba(10,10,10,0) 24%,rgba(10,10,10,.15) 55%,rgba(10,10,10,.85) 88%,var(--bg) 100%)}
/* movement only, no fading: content is visible even if a browser pauses animations */
@keyframes bannerIn{from{transform:scale(1.07)}to{transform:none}}
@keyframes riseIn{from{transform:translateY(18px)}to{transform:none}}

/* poster lower down, overlapping the picture; information beside it */
.d-main{position:relative;z-index:2;display:flex;align-items:flex-start;gap:40px;padding:0 4%}
.d-cover-box{position:relative;width:260px;flex-shrink:0;margin-top:-190px;transition:transform .35s ease;animation:riseIn .8s .1s cubic-bezier(.2,.7,.2,1) both}
.d-cover-box:hover{transform:translateY(-6px) rotate(-.6deg)}
.d-cover{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:20px;background:#18181b;
  outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 0 6px rgba(10,10,10,.55),0 0 40px rgba(29,161,226,.28);transition:box-shadow .35s ease}
.d-cover-box:hover .d-cover{box-shadow:0 38px 80px rgba(0,0,0,.75),0 0 0 6px rgba(10,10,10,.55),0 0 54px rgba(29,161,226,.45)}
/* small time label in a picture's corner: "45m", "1h 15m", "2h 47m" */
.time-tag{position:absolute;right:6px;bottom:6px;z-index:2;padding:2px 7px;border-radius:6px;background:rgba(10,10,12,.85);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.2px;line-height:1.4;backdrop-filter:blur(4px);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.time-tag.big{right:12px;bottom:12px;padding:4px 10px;font-size:13px;border-radius:8px}
.ep-thumb{position:relative;flex-shrink:0;line-height:0}
.d-text{flex:1;min-width:0;max-width:820px;padding-top:24px;animation:riseIn .8s .2s cubic-bezier(.2,.7,.2,1) both}
.d-head{margin-bottom:4px}
/* title: balanced size (26–40px), bold not heavy, neat wrapping for long names */
.d-text h1{font-size:clamp(26px,2.7vw,40px);font-weight:700;letter-spacing:-.015em;line-height:1.18;margin:12px 0 8px;
  text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.d-season{color:var(--pink);font-weight:700;font-size:17px;letter-spacing:.3px;margin:0 0 8px}
.d-season[hidden]{display:none}
/* 2024 • ★ 8.1 • 2h 47m */
.d-meta{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px;color:var(--soft);font-size:15px;font-weight:500;margin:2px 0 14px}
.d-meta span+span::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.55;margin:0 12px;vertical-align:middle}
.d-rate{color:#ffc94d;font-weight:700}
/* age badge: 13+ / 16+ / 18+ */
.d-age{display:inline-flex;align-items:center;padding:2px 8px;border:1.5px solid rgba(255,255,255,.6);border-radius:6px;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.3px;line-height:1.3;cursor:default}
.d-age.mid{border-color:#ff9f43;color:#ffc58a}
.d-age.hi{border-color:#ff4d6d;color:#ff8fa3;background:rgba(255,77,109,.12)}
.d-meta .d-age+span::before{margin-left:12px}
/* mood */
.d-moods{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 2px}
.d-moods-label{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink);font-weight:800;margin-right:2px}
.mood{font-size:12.5px;font-weight:600;padding:4px 12px;border-radius:999px;color:#cfeeff;background:linear-gradient(135deg,rgba(29,161,226,.16),rgba(255,45,135,.16));border:1px solid rgba(29,161,226,.38)}
.d-genres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.d-genres .chip{margin:0;background:rgba(255,255,255,.04);border:1px solid rgba(29,161,226,.28);font-size:12.5px;padding:5px 13px}
/* descriptions: clean reading font, soft white, comfortable spacing, real paragraphs */
.d-overview,.ep p{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-weight:400;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;white-space:pre-line}
.d-overview{color:#e9edf2;line-height:1.75;font-size:16px;margin:14px 0 26px;max-width:68ch}
.d-more{display:none}
/* buttons */
.d-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.d-actions .btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-size:15px}
.d-actions svg{width:18px;height:18px;fill:currentColor}
.btn-primary{background:linear-gradient(135deg,var(--pink),#0b6fa4);box-shadow:0 10px 28px rgba(29,161,226,.35)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(29,161,226,.55)}
.btn-glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px)}
.btn-glass:hover{background:rgba(255,255,255,.14);box-shadow:none}
.d-actions .btn-icon{width:50px;height:50px;padding:0;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.d-actions .btn-icon:hover{background:rgba(255,255,255,.16);box-shadow:none}
@media (prefers-reduced-motion:reduce){.d-banner,.d-cover-box,.d-text{animation:none}}

/* section titles get a small accent bar */
.row h2{display:flex;align-items:center;gap:10px}
.row h2::before{content:'';width:4px;height:.95em;border-radius:4px;background:linear-gradient(var(--pink),#ff2d87);flex-shrink:0}
.sel{background:rgba(18,18,21,.95);color:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:12px;margin-bottom:14px}
.ep{display:flex;gap:16px;padding:12px;border-radius:16px;background:var(--glass);border:1px solid var(--line);margin-bottom:10px;transition:background .2s,border-color .2s,transform .2s}
.ep:hover{background:rgba(255,255,255,.09);border-color:rgba(29,161,226,.5);transform:translateX(3px)}
.ep img,.ep .noimg{width:184px;height:104px;border-radius:10px;object-fit:cover;flex-shrink:0}
.ep b{color:#fff}
.ep.upcoming{border-style:dashed;border-color:rgba(29,161,226,.45)}
.ep.upcoming img{opacity:.6}
.ep-soon{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--pink);color:#fff;vertical-align:1px}
.sel + .sel{margin-left:8px}
.sel[hidden]{display:none}

/* NEWS */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.news-card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:var(--glass);border:1px solid var(--line);cursor:default}
.news-card small{font-size:12px;opacity:.75}
.news-card small b{color:var(--pink);text-transform:uppercase;letter-spacing:.8px;font-size:11px}
.news-card h3{color:#fff;font-size:15px;line-height:1.4} /* full headline, never cut off with "…" */
.ep p{font-size:14px;line-height:1.6;color:#bfc6ce;margin-top:6px;max-width:90ch}
.ep-tr{display:block;margin-top:4px;font-size:11px;opacity:.5;font-style:italic}
.cast-card{flex:0 0 140px;position:relative;border-radius:14px;overflow:hidden;background:#18181b;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.cast-card:hover{transform:translateY(-4px);box-shadow:0 0 22px rgba(29,161,226,.45)}
.cast-photo{aspect-ratio:2/3}
.cast-photo img{width:100%;height:100%;object-fit:cover;display:block}
.cast-initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff2d87,var(--pink))}
.cast-info{position:absolute;left:0;right:0;bottom:0;padding:38px 10px 10px;background:linear-gradient(to top,rgba(10,10,10,.97) 35%,rgba(10,10,10,0))}
.cast-info b{display:block;color:#fff;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-info small{display:block;font-size:11.5px;color:var(--soft);opacity:.85;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize}

/* WHERE TO WATCH (title pages) */
.d-where{margin-top:24px;padding-top:18px;border-top:1px solid rgba(29,161,226,.12);max-width:780px}
.wt-label{display:block;font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--pink);font-weight:800;margin-bottom:12px}
.wt-list{display:flex;flex-wrap:wrap;gap:10px}
/* one button style for every title: service icon + name */
.wt-site{--c:#1da1e2;display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 7px;border-radius:12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);color:#fff;font-size:13.5px;font-weight:600;transition:background .2s,border-color .2s,transform .2s}
.wt-site img{width:26px;height:26px;border-radius:7px;background:var(--c);padding:4px;display:block}
.wt-site img.full{padding:0;background:none;object-fit:cover}   /* full-colour service logos */
.wt-site img.logo-fit{object-fit:contain;background:#fff;padding:2px} /* channel logos (ITV, CBS…) are wide, keep them whole */
a.wt-site:hover{border-color:var(--c);background:rgba(255,255,255,.1);transform:translateY(-2px)}
span.wt-site{cursor:default}
.wt-note{font-size:14px;line-height:1.6;color:#d2d8df;margin:2px 0 4px;max-width:70ch}
.wt-note b{color:#fff;font-weight:600}
.wt-chip{display:inline-block;padding:3px 10px;margin-right:8px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:#ff2d87}
.wt-chip.live{background:#16a34a}

/* DISCOVER PANEL (opens from the search bar): choices on the left, recommendations on the right */
.dz{position:absolute;z-index:60;left:50%;transform:translateX(-50%);width:min(1000px,94vw);display:grid;grid-template-columns:310px 1fr;
  border-radius:20px;overflow:hidden;background:linear-gradient(160deg,rgba(30,28,24,.97),rgba(14,14,16,.985));
  border:1px solid rgba(29,161,226,.3);box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 44px rgba(29,161,226,.18);backdrop-filter:blur(18px)}
.dz[hidden]{display:none}
.dz-filters{padding:18px 18px 20px;border-right:1px solid rgba(29,161,226,.12);max-height:min(70vh,640px);overflow:auto;scrollbar-width:thin}
.dz-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dz-head b{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.dz-reset{background:none;color:var(--pink);font-weight:700;font-size:12.5px;padding:4px 2px}
.dz-reset:hover{text-decoration:underline}
.dz-group{margin-bottom:15px}
.dz-group small{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--soft);opacity:.7;font-weight:800;margin-bottom:8px}
.dz-pills{display:flex;flex-wrap:wrap;gap:6px}
.dz-pills button{padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:#e6eaef;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);transition:background .15s,border-color .15s,transform .15s}
.dz-pills button:hover{border-color:rgba(29,161,226,.7);transform:translateY(-1px)}
.dz-pills button.on{background:linear-gradient(135deg,var(--pink),#0b6fa4);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(29,161,226,.35)}
.dz-results{padding:18px 20px 20px;max-height:min(70vh,640px);overflow:auto;scrollbar-width:thin}
.dz-res-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.dz-res-head b{color:#fff;font-size:15px;font-weight:700}
.dz-all{color:var(--pink);font-weight:700;font-size:13px;white-space:nowrap}
.dz-all:hover{text-decoration:underline}
.dz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 14px}
.dz-card{display:block;min-width:0}
.dz-poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:#18181b;box-shadow:0 8px 20px rgba(0,0,0,.45);transition:transform .2s,box-shadow .2s}
.dz-card:hover .dz-poster{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.55),0 0 0 2px var(--pink)}
.dz-poster img{width:100%;height:100%;object-fit:cover;display:block}
.dz-rate{position:absolute;top:6px;left:6px;padding:2px 6px;border-radius:6px;background:rgba(10,10,12,.85);color:#ffc94d;font-size:11px;font-weight:800}
.dz-card b{display:block;color:#fff;font-size:12.5px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz-card small{display:block;font-size:11px;opacity:.65;margin-top:1px}
.dz-skel{aspect-ratio:2/3;border-radius:12px;background:linear-gradient(100deg,rgba(255,255,255,.04) 30%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.04) 70%);
  background-size:300% 100%;animation:dzShine 1.2s linear infinite}
@keyframes dzShine{to{background-position:-150% 0}}
.dz-empty{grid-column:1/-1;padding:40px 10px;text-align:center;opacity:.75}
@media (max-width:800px){
  .dz{grid-template-columns:1fr;width:94vw;max-height:78vh;overflow:auto}
  .dz-filters{border-right:0;border-bottom:1px solid rgba(29,161,226,.12);max-height:none;padding:14px}
  .dz-results{max-height:none;padding:14px}
  .dz-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}
}

/* HOVER PREVIEW (computers): grows out of the poster, streaming-site style
   picture with the title on it → round buttons → ★ rating · year · type → genres → short description */
.pv{position:fixed;z-index:120;border-radius:14px;overflow:hidden;background:#17171a;
  box-shadow:0 30px 80px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.08),0 0 40px rgba(29,161,226,.18);
  visibility:hidden;transform:scale(.86);pointer-events:none;transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.pv.show{visibility:visible;transform:none;pointer-events:auto} /* appears instantly (no fading), then grows into place */
.pv-img{position:relative;aspect-ratio:16/9;background:#18181b center/cover no-repeat}
.pv-img::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,#17171a 0,rgba(23,23,26,.55) 32%,rgba(23,23,26,0) 62%)}
.pv-hit{position:absolute;inset:0;z-index:1}
.pv-img h4{position:absolute;left:14px;right:14px;bottom:8px;z-index:2;pointer-events:none;color:#fff;font-size:18px;font-weight:800;
  line-height:1.2;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.85);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.pv-body{padding:10px 14px 15px}
/* round buttons: ▶ (white) · ＋ · ⌄ */
.pv-btns{display:flex;align-items:center;gap:8px;margin-bottom:11px}
.pv-play,.pv .pv-round{width:36px;height:36px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .15s,border-color .15s,transform .15s}
.pv-play{background:#fff;color:#111111}
.pv-play:hover{background:#cfeeff;transform:scale(1.06)}
.pv .pv-round{background:rgba(23,23,26,.6);border:2px solid rgba(255,255,255,.5);color:#fff}
.pv .pv-round:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:scale(1.06)}
.pv-btns svg{width:18px;height:18px;fill:currentColor;display:block}
.pv-more{margin-left:auto}
.pv-meta{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#eaedf1;margin-bottom:6px}
.pv-rate{color:#ffc94d;font-weight:700}
.pv-type{padding:0 6px;border:1px solid rgba(255,255,255,.4);border-radius:4px;font-size:11px;line-height:17px;letter-spacing:.3px}
.pv-genres{font-size:12.5px;color:#cdd3da;margin-bottom:8px}
.pv-genres i{font-style:normal;color:var(--pink);margin:0 7px}
.pv-body p{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:12.5px;line-height:1.55;color:#a9b0b9;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* MODAL + TOAST */
.overlay{position:fixed;inset:0;background:rgba(4,4,6,.82);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:100}
.modal{position:relative;background:rgba(22,22,25,.97);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(340px,92vw)}
.modal.video{width:min(920px,94vw);aspect-ratio:16/9;padding:0;overflow:hidden;background:#000}
.modal iframe{width:100%;height:100%;border:0}
.modal h3{color:#fff;margin-bottom:4px}
.close{position:absolute;top:6px;right:12px;background:none;color:#fff;font-size:28px;z-index:2}
/* STATUS PICKER */
.modal.picker{width:min(400px,92vw);padding:22px;background:linear-gradient(160deg,rgba(30,28,24,.97),rgba(16,16,18,.98));box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(29,161,226,.15)}
.pk-head{display:flex;gap:14px;align-items:center;padding-right:28px;margin-bottom:16px}
.pk-head img,.pk-noimg{width:54px;height:80px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#18181b;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.pk-head small{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--pink);font-weight:700}
.pk-head h3{font-size:18px;line-height:1.25;margin:4px 0 0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-list{display:flex;flex-direction:column;gap:8px}
.pk-opt{display:flex;align-items:center;gap:14px;width:100%;padding:11px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;text-align:left;transition:background .2s,border-color .2s,transform .2s}
.pk-opt:hover{background:rgba(255,255,255,.08);border-color:var(--c);transform:translateX(3px)}
.pk-opt:disabled{opacity:.6;cursor:wait}
.pk-ico{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent)}
.pk-ico svg,.pk-check svg{width:18px;height:18px;fill:currentColor;display:block}
.pk-txt{flex:1;min-width:0}
.pk-txt b{display:block;font-size:15px}
.pk-txt small{display:block;font-size:12px;opacity:.65;margin-top:1px}
.pk-check{color:var(--c);opacity:0;transition:opacity .2s}
.pk-opt.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.pk-opt.on .pk-check{opacity:1}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--pink);color:#fff;padding:12px 24px;border-radius:999px;z-index:200;font-weight:600;box-shadow:0 0 20px rgba(29,161,226,.6)}

/* FORMS + FILTERS */
.auth{max-width:380px;margin:50px auto;padding:30px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 0 30px rgba(29,161,226,.15)}
.auth h2{color:#fff;margin-bottom:16px}
.auth input{width:100%;padding:12px 16px;margin-bottom:12px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.25);color:#fff;outline:none}
.auth input:focus{border-color:var(--pink)}
.auth .btn{width:100%}
.auth .err{color:#ff8a70;min-height:20px;margin-bottom:8px;font-size:14px}
.auth p{margin-top:14px;font-size:14px}
.auth a{color:var(--pink)}
.auth .auth-note{margin:0 0 14px;font-size:13px;line-height:1.55;opacity:.75}
.auth .nf-title{font-size:28px;margin:0 0 12px}
.auth .field-label{display:block;margin:0 0 8px;font-size:14px;font-weight:600;color:#fff}
.auth .forgot-link{display:block;width:max-content;margin:-4px 0 10px auto;font-size:13px}
.auth .code-input{text-align:center;font-size:24px;font-weight:700;letter-spacing:10px}
.auth .code-input::placeholder{font-size:15px;font-weight:400;letter-spacing:normal}
.auth a.btn{color:#fff;text-decoration:none}
.filters{display:flex;gap:10px;flex-wrap:wrap;padding:0 4%;margin:10px 0 24px}
.filters button,.filters select{padding:9px 18px;border-radius:999px;background:var(--glass);color:var(--soft);border:1px solid var(--line)}
.filters select{background:rgba(18,18,21,.95)}
.filters button.on,.filters button:hover{background:var(--pink);color:#fff}
.page-title{color:#fff;padding:0 4%;margin-bottom:14px;font-size:30px}

/* "I accept the Terms" tick on sign-up and log-in */
.auth .terms-check{display:flex;gap:10px;align-items:flex-start;margin:2px 0 12px;font-size:13.5px;line-height:1.5}
.auth .terms-check input{width:18px;height:18px;margin:1px 0 0;padding:0;flex-shrink:0;accent-color:var(--pink)}

/* About / Terms / Privacy pages: same glass card as the log-in box, wider for reading */
.info-page{max-width:820px;margin:40px auto 60px;padding:36px 40px;border-radius:22px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 0 30px rgba(29,161,226,.15);line-height:1.7;-webkit-user-select:text;user-select:text;cursor:auto}
.info-page h1{color:#fff;font-size:32px;margin-bottom:6px}
.info-page h2{color:#fff;font-size:19px;margin:28px 0 8px}
.info-page p{margin-bottom:10px}
.info-page ul{margin:0 0 10px 22px}
.info-page li{margin-bottom:6px}
.info-page b{color:#fff}
.info-page a{color:var(--pink)}
.info-page .lead{font-size:17px;margin-top:10px}
.info-page .updated{font-size:13px;opacity:.65}
.info-page .info-links{margin-top:30px;padding-top:18px;border-top:1px solid var(--line)}

/* footer at the bottom of every page */
.site-footer{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;width:min(1250px,94%);margin:60px auto 24px;padding:30px 34px 22px;border-radius:24px;background:rgba(18,18,21,.6);border:1px solid var(--line);font-size:14px}
.site-footer .logo{display:inline-block;margin-bottom:10px}
.foot-about p{line-height:1.65;opacity:.85;max-width:430px}
.foot-links{display:flex;flex-direction:column;gap:8px}
.foot-links b{color:#fff;margin-bottom:2px}
.foot-links a:hover{color:var(--pink)}
.foot-note{grid-column:1/-1;padding-top:16px;border-top:1px solid var(--line);font-size:12px;line-height:1.6;opacity:.6}

@media(max-width:800px){
  .nav{border-radius:26px;flex-wrap:wrap;padding:12px 16px}
  .search input{width:150px}
  body{padding-top:130px}
    .hero{margin-top:0}
  .ep img,.ep .noimg{width:110px;height:64px}
  .rank{font-size:100px}
}

/* ===== MOBILE FRIENDLY ===== */
@media (max-width: 800px) {
  html, body { overflow-x: hidden; }
  body { padding-top: 140px; }

  /* navigation: logo + account on top, search, then scrolling links */
  .nav { position: absolute; top: 8px; width: 94%; padding: 8px 12px; gap: 8px; border-radius: 22px; }
  .logo { order: 1; font-size: 15px; letter-spacing: 1px; }
  .auth-link { order: 2; font-size: 12px; padding: 6px 10px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; }
  .search + .auth-link { margin-left: auto; }
  .search { order: 3; flex: 0 0 100%; }
  .search input { width: 100%; font-size: 15px; }
  .results { width: 100%; left: 0; right: 0; top: 44px; }
  .links { order: 4; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; gap: 2px; scrollbar-width: none; }
  .links::-webkit-scrollbar { display: none; }
  .links a { white-space: nowrap; padding: 6px 12px; font-size: 13px; }

  /* big banner */
    .hero { height: 60vh; min-height: 380px; margin-top: 0; }
  .hero-content { padding: 0 5% 36px; }
  h1, .hero-title { font-size: 26px; }
  .overview { -webkit-line-clamp: 3; line-clamp: 3; font-size: 14px; margin: 8px 0 14px; }
  .btn, .hero .add-btn { padding: 10px 18px; font-size: 14px; }

  /* rows and cards */
  .row { padding: 0 3%; margin: 18px 0; }
  .row h2 { font-size: 18px; }
  .arrow { display: none; }
  .card { flex: 0 0 125px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 10px; padding: 0 3%; }
  .info { padding: 8px; }
  .info h3 { font-size: 13px; }
  .info p { font-size: 11px; }
  .add-btn, .rm { font-size: 11px; padding: 6px; }
  .top-card { flex: 0 0 150px; }
  .top-card .poster { width: 95px; }
  .rank { font-size: 90px; -webkit-text-stroke-width: 2px; }

  /* details page */
  /* picture on top; small poster overlapping its bottom-left; title beside it; the rest full width below */
  .d-top { margin-top: -140px; }
  .d-banner { height: clamp(230px, 40vh, 330px); }
  .d-main { display: grid; grid-template-columns: 116px 1fr; column-gap: 16px; padding: 0 5%; }
  .d-cover-box { width: 116px; margin-top: -74px; grid-column: 1; grid-row: 1; }
  .d-cover-box:hover { transform: none; }
  .d-cover { border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.7), 0 0 0 4px rgba(10,10,10,.6), 0 0 26px rgba(29,161,226,.3); }
  .time-tag.big { right: 6px; bottom: 6px; padding: 2px 7px; font-size: 11.5px; }
  .d-text { animation: none; }
  .d-meta { font-size: 13px; margin-bottom: 0; }
  .d-meta span+span::before { margin: 0 8px; }
  .d-actions { gap: 8px; flex-wrap: nowrap; }
  .d-actions .btn { padding: 11px 12px; font-size: 13.5px; white-space: nowrap; justify-content: center; }
  .d-actions .btn-primary, .d-actions .btn-glass { flex: 1 1 auto; }
  .d-actions .btn-icon { width: 44px; height: 44px; flex: 0 0 44px; }  .d-text { display: contents; }
  .d-head { grid-column: 2; grid-row: 1; padding-top: 12px; min-width: 0; }
  .d-rest { grid-column: 1 / -1; grid-row: 2; padding-top: 16px; }
  .d-head h1 { font-size: 20px; line-height: 1.22; margin: 6px 0 4px; max-width: none; }
  .d-season { font-size: 15px; margin-bottom: 2px; }
  .d-overview { font-size: 15px; line-height: 1.7; margin: 10px 0 6px; display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
  .d-overview.open { display: block; }
  .d-more { display: inline-block; background: none; color: var(--pink); font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 16px; }
  .d-main.no-cover { grid-template-columns: 1fr; }
  .d-main.no-cover .d-head { grid-column: 1; }
  .status-box .status { padding: 8px 14px; font-size: 14px; }
  .sel { max-width: 100%; }
  .ep { gap: 10px; padding: 8px; }
  .ep img, .ep .noimg { width: 110px; height: 64px; }
  .ep p { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cast-card { flex: 0 0 112px; }
  .cast-info { padding: 30px 8px 8px; }
  .cast-info b { font-size: 12px; }
  .cast-info small { font-size: 11px; }

  /* other pages */
  .page-title { font-size: 24px; padding: 0 5%; }
  .filters { padding: 0 3%; gap: 8px; }
  .filters button, .filters select { padding: 7px 14px; font-size: 13px; }
  .auth { width: calc(100% - 28px); margin: 20px auto; padding: 22px; }
  .info-page { width: calc(100% - 28px); margin: 20px auto 40px; padding: 24px 20px; }
  .info-page h1 { font-size: 26px; }
  .info-page h2 { font-size: 17px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 22px; padding: 24px 20px 18px; margin-top: 40px; }
  .foot-about { grid-column: 1 / -1; }
  .modal.video { width: 96vw; }
  .toast { bottom: 18px; max-width: 90vw; text-align: center; }
}

/* on touch screens, no hover zoom */
@media (hover: none) {
  .card:hover, .top-card:hover, .cast-card:hover, .news-card:hover { transform: none; box-shadow: none; }
}
/* =====================================================================
   ReelNook look (overrides the shared layout above)
   squarer corners, classic serif titles, gold + cinema red, no neon glow
   ===================================================================== */
h1,h2,h3,.hero-title,.page-title,.d-text h1,.auth h2,.nf-title{font-family:var(--serif)}
h1,.hero-title{color:var(--cream);font-weight:700;letter-spacing:-.01em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hero-title::after{content:'';display:block;width:64px;height:3px;background:var(--gold);margin-top:14px}
.hero::after{background:linear-gradient(to top,var(--bg) 3%,transparent 55%),linear-gradient(to right,rgba(10,10,10,.95) 10%,rgba(10,10,10,.35) 55%,transparent 80%)}
.hero-content{padding-bottom:64px}
.meta{color:#aab1bb;font-size:14px;letter-spacing:.4px}

/* buttons */
.btn{background:var(--gold);color:var(--ink);border-radius:4px;font-size:13.5px;letter-spacing:1px;text-transform:uppercase;padding:13px 26px}
.btn:hover{transform:none;box-shadow:none;background:#4dbbf0}
.btn.ghost{background:rgba(10,10,10,.35);color:var(--cream);border:1px solid rgba(242,244,247,.55);backdrop-filter:none}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btn.glow{background:var(--red);color:#fff;box-shadow:none}
.hero .add-btn{border-radius:4px;background:transparent;border:1px solid rgba(242,244,247,.35);color:var(--cream);font-size:13.5px;letter-spacing:1px;text-transform:uppercase}
.hero .add-btn:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.auth a.btn,.auth .btn{color:var(--ink)}

/* row titles: serif with a short gold line in front */
.row h2{font-size:22px;font-weight:700;color:var(--cream);letter-spacing:.2px}
.row h2::before{width:26px;height:2px;border-radius:0;background:var(--gold)}
.page-title{color:var(--cream)}

/* cards: flat, square corners, gold outline on hover */
.card{border-radius:4px;border:0;background:#141416;transition:transform .25s,box-shadow .25s,outline-color .25s;outline:1px solid transparent;outline-offset:0}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(0,0,0,.6);outline-color:var(--gold)}
.poster,.noimg{background:#18181b}
.info h3{color:var(--cream);font-family:'Segoe UI',system-ui,sans-serif}
.tag,.stag{border-radius:2px;font-size:10px;letter-spacing:1px;text-transform:uppercase;padding:3px 7px}
.tag.movie{background:var(--red);color:#fff}
.tag.tv{background:var(--gold);color:var(--ink)}
.tag.anime{background:#e8ecf1;color:#0a0a0a}
.chip{border-radius:3px}
.add-btn,.rm{border-radius:3px;background:transparent;border:1px solid #333841;color:var(--cream)}
.add-btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.rm{border-color:rgba(255,45,135,.6);color:#ffb3d3}
.air-badge{border-radius:2px;color:var(--ink);font-weight:800}
.air-badge.soon{background:rgba(255,45,135,.95);color:#fff}
.arrow{background:rgba(10,10,10,.85);color:var(--gold)}
.arrow.left,.arrow.right{border-radius:0}

/* top 10: big serif numbers outlined in gold */
.rank{font-family:var(--serif);font-weight:700;-webkit-text-stroke:2px var(--gold);text-shadow:none}
.top-card .poster{border-radius:4px}

/* title pages */
.d-top{margin-top:-72px}
.d-cover{border-radius:6px;box-shadow:0 30px 70px rgba(0,0,0,.75),0 0 0 1px rgba(29,161,226,.35)}
.d-cover-box:hover .d-cover{box-shadow:0 38px 80px rgba(0,0,0,.8),0 0 0 1px var(--gold)}
.d-cover-box:hover{transform:translateY(-6px)}
.d-text h1{color:var(--cream)}
.btn-primary{background:var(--gold);color:var(--ink);box-shadow:none}
.btn-primary:hover{background:#4dbbf0;box-shadow:none}
.btn-glass{background:rgba(255,255,255,.05);border:1px solid rgba(242,244,247,.25);color:var(--cream);backdrop-filter:none}
.d-actions .btn-icon{border-radius:4px;color:var(--cream)}
.mood{border-radius:3px;color:#cfeeff;background:rgba(29,161,226,.08);border:1px solid rgba(29,161,226,.35)}
.d-genres .chip{border-radius:3px;border-color:rgba(242,244,247,.18)}
.time-tag{border-radius:2px}
.ep{border-radius:6px;background:#111214;border-color:#1f2328}
.ep:hover{background:#17171a;border-color:rgba(29,161,226,.5)}
.ep img,.ep .noimg{border-radius:3px}
.ep-soon{border-radius:2px;color:var(--ink)}
.sel{border-radius:4px;background:#141416}
.cast-card{border-radius:4px;background:#18181b}
.cast-card:hover{box-shadow:0 14px 30px rgba(0,0,0,.6),0 0 0 1px var(--gold)}
.cast-initials{background:linear-gradient(135deg,var(--red),var(--gold-dark))}
.news-card{border-radius:4px;background:#111214}
.wt-site{border-radius:4px}
.wt-chip{border-radius:2px;background:var(--red)}

/* discover panel */
.dz{border-radius:8px;background:#111214;border:1px solid rgba(29,161,226,.3);box-shadow:0 30px 80px rgba(0,0,0,.75)}
.dz-pills button{border-radius:3px}
.dz-pills button.on{background:var(--gold);color:var(--ink);box-shadow:none}
.dz-poster{border-radius:4px}
.dz-skel{border-radius:4px}

/* hover preview, pop-ups, messages */
.pv{border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 0 1px rgba(29,161,226,.25)}
.pv-play{color:var(--ink)}
.modal{border-radius:6px;background:#141416}
.modal.picker{background:#141416;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.pk-opt{border-radius:4px}
.pk-head img,.pk-noimg{border-radius:3px}
.toast{border-radius:4px;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* forms */
.auth{border-radius:6px;background:#111214;border:1px solid #1f2328;border-top:3px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.5);backdrop-filter:none}
.auth h2{color:var(--cream);font-size:26px}
.auth input{border-radius:4px;background:#0a0a0a;border-color:#262a30}
.filters button,.filters select{border-radius:3px}
.filters button.on,.filters button:hover{background:var(--gold);color:var(--ink)}

/* about / terms / privacy */
.info-page{border-radius:6px;background:#111214;border:1px solid #1f2328;border-top:3px solid var(--gold);box-shadow:0 30px 60px rgba(0,0,0,.5);backdrop-filter:none}
.info-page h1,.info-page h2,.info-page b{color:var(--cream)}

/* footer: full width, darker band with a gold line on top */
.site-footer{width:100%;margin:70px 0 0;padding:40px 4% 26px;border-radius:0;border:0;border-top:1px solid rgba(29,161,226,.3);background:#08080a}
.site-footer .logo{font-size:22px}
.foot-links b{font-family:var(--serif);color:var(--gold);font-size:15px}
.foot-links a:hover{color:var(--gold)}

/* phones */
@media (max-width:800px){
  body{padding-top:132px}
  .nav{position:absolute;top:0;left:0;right:0;width:100%;height:auto;padding:10px 4% 0;gap:8px;border-radius:0}
  .logo{font-size:21px}
  .links{align-self:auto}
  .links a{padding:10px 12px;font-size:12px}
  .auth-link{padding:6px 12px;font-size:12px}
  .d-top{margin-top:-132px}
  .site-footer{padding:30px 5% 22px}
}
/* medium screens: keep the menu on one line */
@media (min-width:801px) and (max-width:1150px){
  .nav{gap:14px}
  .links{flex-wrap:nowrap}
  .links a{padding:0 9px;font-size:12px;letter-spacing:.8px}
  .search input{width:170px}
}
/* =====================================================================
   3D MOVEMENT (backup of the design before this: data/before-3d/)
   ===================================================================== */
/* 1) posters tilt toward the mouse, lift up, shadow falls away from the light, a soft gold light follows the mouse */
.card,.cast-card,.dz-poster,.top-card .poster,.d-cover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s cubic-bezier(.2,.8,.2,1),outline-color .25s}
.card{position:relative}
.card:hover,.cast-card:hover,.dz-card:hover .dz-poster,.top-card:hover .poster{--lift:-8px}
.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
.tilting{transition:transform .1s linear,box-shadow .1s linear,outline-color .25s}
.card.tilting,.cast-card.tilting,.dz-poster.tilting,.top-card .poster.tilting{box-shadow:var(--sx) var(--sy) 38px rgba(0,0,0,.75)}
.d-cover.tilting{box-shadow:var(--sx) calc(var(--sy) + 16px) 70px rgba(0,0,0,.8),0 0 0 1px var(--gold)}
.card::before,.cast-card::before,.dz-poster::before,.top-card .poster::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;display:none;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(140,215,255,.22),rgba(140,215,255,.06) 35%,transparent 60%)}
.tilting::before{display:block}

/* 2) big banner: picture is a deeper layer (moves with mouse and scroll), larger so its edges never show */
.hero-bg{inset:-50px -44px;will-change:transform,translate}
.hero-content{will-change:translate}

/* 3) rows: title slides in from the left, posters swing in from the side in 3D, one after another */
.row.reveal h2{transform:translateX(-26px)}
.row.reveal.in h2{transform:none;transition:transform .7s cubic-bezier(.2,.75,.2,1)}
.row.reveal.in .row-scroll>*{animation:card3d .85s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes card3d{from{transform:perspective(900px) rotateY(-38deg) translate3d(80px,24px,-140px)}}

/* 4) Top 10 numbers: carved gold digits with depth */
.rank{text-shadow:3px 3px 0 rgba(11,111,164,.45),6px 6px 0 rgba(11,111,164,.22),9px 9px 18px rgba(0,0,0,.6)}

/* people who prefer less movement: everything stays still */
@media (prefers-reduced-motion:reduce){
  .card,.cast-card,.dz-poster,.top-card .poster,.d-cover{transform:none!important;transition:none}
  .row.reveal h2{transform:none}
  .row.reveal.in .row-scroll>*{animation:none}
}.cast-card:hover,.dz-card:hover .dz-poster,.top-card:hover .poster{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
/* =====================================================================
   COLORS: jet black + cerulean blue + neon rose
   (gold version saved in data/before-colors-gold/)
   cerulean = buttons, links, outlines · neon rose = glowing highlights
   ===================================================================== */
:root{--rose:#ff2d87;--ink:#0a0a0a}
body{background:linear-gradient(180deg,#0d0f12 0,#0a0a0a 420px) fixed}
.nav{border-bottom-color:rgba(29,161,226,.35);box-shadow:0 1px 18px rgba(29,161,226,.12)}
.logo span{color:var(--rose);text-shadow:0 0 10px rgba(255,45,135,.75),0 0 26px rgba(255,45,135,.35)}
.logo::after{background:linear-gradient(90deg,var(--gold),var(--rose))}
.links a.active{color:var(--gold);border-bottom-color:var(--rose)}
.hero-title::after{background:var(--rose);box-shadow:0 0 14px rgba(255,45,135,.8)}
.row h2::before{background:var(--rose);box-shadow:0 0 10px rgba(255,45,135,.8)}
.btn:hover,.btn-primary:hover{box-shadow:0 0 22px rgba(29,161,226,.55)}
.card:hover,.card.tilting{outline-color:var(--gold)}
.card.tilting,.cast-card.tilting,.dz-poster.tilting,.top-card .poster.tilting{box-shadow:var(--sx) var(--sy) 38px rgba(0,0,0,.8),0 0 26px rgba(29,161,226,.25)}
.rank{-webkit-text-stroke:2px var(--gold);text-shadow:3px 3px 0 rgba(255,45,135,.55),6px 6px 0 rgba(255,45,135,.25),0 0 22px rgba(255,45,135,.35)}
.auth,.info-page{border-top-color:var(--rose);box-shadow:0 -2px 22px rgba(255,45,135,.18),0 30px 60px rgba(0,0,0,.55)}
.site-footer{background:#060607;border-top-color:rgba(255,45,135,.4)}
.foot-links b{color:var(--rose)}
.mood{color:#ffd1e5;background:rgba(255,45,135,.08);border-color:rgba(255,45,135,.4)}
.d-moods-label,.wt-label,.pk-head small{color:var(--rose)}
.air-badge{background:rgba(29,161,226,.95)}
.ep-soon{background:var(--rose);color:#fff}
.toast{background:var(--gold);color:var(--ink)}
/* fixes found while testing before publishing */
.links a{white-space:nowrap}                                   /* "K-Drama" / "My List" never break onto two lines */
.auth-link{max-width:190px;overflow:hidden;text-overflow:ellipsis}
.auth .btn.ghost{color:var(--cream)}                            /* "Change photo" / "Remove" on the profile page were invisible */
.auth .btn.ghost:hover{color:var(--ink)}
@media (min-width:801px) and (max-width:1150px){
  .nav{gap:10px}
  .links a{padding:0 7px;font-size:11.5px;letter-spacing:.6px}
  .search input{width:150px}
  .auth-link{max-width:130px;padding:8px 12px}
}
/* row arrows sit in the empty margin beside the posters (they used to cover the first and last poster,
   which blocked the 3D movement there), and hide when there is nothing more to see that way */
.arrow{width:min(44px,4vw)}
.arrow.left{left:calc(-1 * min(44px,4vw))}
.arrow.right{right:calc(-1 * min(44px,4vw))}
.arrow.off{visibility:hidden}