/* ===========================================================
   NETFLIX — Personalized Edition  (local only)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Bebas+Neue&display=swap');

/* NETFLIX wordmark (renders the literal word) */
.brand{
  font-family:"Bebas Neue","Arial Narrow",sans-serif;
  color:var(--red); font-weight:400; letter-spacing:.02em;
  text-transform:uppercase; line-height:.8; display:inline-block;
  text-shadow:0 0 18px rgba(229,9,20,.35);
  transform:scaleY(1.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --red:#e50914;
  --red-dark:#b1060f;
  --bg:#141414;
  --text:#fff;
  --muted:#b3b3b3;
}

html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }
button{ font-family:inherit; cursor:pointer; border:none; outline:none; color:inherit; }
.hidden{ display:none !important; }
::selection{ background:var(--red); color:#fff; }

/* ===================== LOGIN ===================== */
#login{
  position:fixed; inset:0; z-index:10000; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.login-bg{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(229,9,20,.35), transparent 60%), #000;
}
.login-box{
  position:relative; z-index:2; width:min(380px,88vw);
  background:rgba(0,0,0,.82); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:44px 38px 36px; text-align:center;
  box-shadow:0 20px 70px rgba(0,0,0,.6);
}
.login-brand{ font-size:38px; display:block; margin-bottom:8px; }
.login-sub{ color:#b3b3b3; font-size:14px; margin-bottom:26px; letter-spacing:.02em; }
.login-field{ margin-bottom:14px; }
.login-field input{
  width:100%; background:#333; border:1px solid #454545; color:#fff;
  padding:14px 16px; border-radius:5px; font-size:15px; outline:none;
  transition:border-color .2s, background .2s;
}
.login-field input:focus{ border-color:#e50914; background:#3a3a3a; }
.login-box button{
  width:100%; margin-top:8px; background:var(--red); color:#fff;
  padding:13px; border-radius:5px; font-weight:700; font-size:16px;
  transition:background .2s, transform .15s;
}
.login-box button:hover{ background:var(--red-dark); }
.login-error{ color:#ff6b6b; font-size:13px; margin-top:14px; }
.login-hint{ color:#666; font-size:11.5px; margin-top:22px; letter-spacing:.02em; }
.login-box.shake{ animation:loginShake .4s; }
@keyframes loginShake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-10px); } 40%{ transform:translateX(9px); }
  60%{ transform:translateX(-6px); } 80%{ transform:translateX(5px); }
}

/* ===================== BIRTHDAY CHAT SURPRISE ===================== */
#chat-surprise{
  position:fixed; inset:0; z-index:9500; background:#0b141a;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
#chat-surprise.show{ opacity:1; pointer-events:auto; }
.wa-wrap{ height:100%; display:flex; flex-direction:column; max-width:560px; margin:0 auto; }
.wa-header{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:#202c33; flex:0 0 auto; }
.wa-avatar-p{
  width:40px; height:40px; border-radius:50%; background:var(--red); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff;
}
.wa-who{ flex:1; }
.wa-name{ color:#e9edef; font-size:16px; font-weight:600; }
.wa-status{ color:#8696a0; font-size:12.5px; }
.wa-skip{ background:transparent; color:#8696a0; font-size:13px; padding:6px 10px; }
.wa-skip:hover{ color:#e9edef; }
.wa-body{
  flex:1; overflow-y:auto; padding:18px 14px;
  background-image:radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:14px 14px;
}
.wa-row{ display:flex; margin-bottom:8px; opacity:0; transform:translateY(6px); transition:opacity .25s,transform .25s; }
.wa-row.in{ opacity:1; transform:translateY(0); }
.wa-row.me{ justify-content:flex-end; }
.wa-row.her{ justify-content:flex-start; }
.wa-bubble{
  max-width:74%; padding:8px 12px; border-radius:8px; font-size:14.5px;
  line-height:1.4; color:#e9edef; box-shadow:0 1px 1px rgba(0,0,0,.3);
}
.wa-row.me .wa-bubble{ background:#005c4b; border-top-right-radius:2px; }
.wa-row.her .wa-bubble{ background:#202c33; border-top-left-radius:2px; }
.wa-bubble.wa-img{ padding:4px; }
.wa-bubble.wa-img img{ width:220px; max-width:60vw; border-radius:6px; display:block; }
.wa-typing{ display:flex; gap:4px; padding:11px 14px; }
.wa-typing span{ width:6px; height:6px; border-radius:50%; background:#8696a0; animation:waTyping 1.1s infinite ease-in-out; }
.wa-typing span:nth-child(2){ animation-delay:.15s; }
.wa-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes waTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }

/* ===================== INTRO ===================== */
#intro{
  position:fixed; inset:0; z-index:9999; background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1s ease;
}
.sound-hint{ text-align:center; }
.sound-hint .brand{ font-size:54px; margin-bottom:30px; }
.sound-hint button{
  background:var(--red); color:#fff; font-size:19px; font-weight:700;
  padding:15px 46px; border-radius:6px; letter-spacing:.01em;
  box-shadow:0 8px 40px rgba(229,9,20,.45); transition:transform .15s, background .2s;
}
.sound-hint button:hover{ transform:scale(1.05); background:var(--red-dark); }
.sound-hint p{ color:#777; margin-top:22px; font-size:12px; letter-spacing:.34em; text-transform:uppercase; }

#intro .intro-wordmark{
  font-size:clamp(64px,15vw,180px); opacity:0; transform:scale(.55);
}
#intro.play .intro-wordmark{ animation:logoZoom 3s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes logoZoom{
  0%{ transform:scale(.55); opacity:0; }
  14%{ opacity:1; }
  55%{ transform:scale(1); opacity:1; }
  80%{ transform:scale(1.02); opacity:1; }
  100%{ transform:scale(7); opacity:0; }
}

/* ===================== PROFILES ===================== */
#profiles{
  position:fixed; inset:0; z-index:900; background:#141414;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; opacity:0; transition:opacity .6s ease;
}
#profiles.show{ opacity:1; }
.profiles-title{ font-size:clamp(26px,3.6vw,52px); font-weight:500; color:#e5e5e5; text-align:center; }
.profiles-grid{ display:flex; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap; justify-content:center; }
.profile{ display:flex; flex-direction:column; align-items:center; gap:14px; cursor:pointer; }
.profile-avatar{
  width:clamp(92px,10vw,150px); height:clamp(92px,10vw,150px);
  border-radius:6px; overflow:hidden; border:3px solid transparent;
  transition:border-color .2s, transform .2s; background:#333;
}
.profile:hover .profile-avatar{ border-color:#fff; transform:scale(1.04); }
.profile-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.profile-name{ color:#808080; font-size:clamp(13px,1.2vw,19px); transition:color .2s; }
.profile:hover .profile-name{ color:#e5e5e5; }
.profile.add .profile-avatar{ display:flex; align-items:center; justify-content:center; background:transparent; font-size:54px; color:#5a5a5a; border:none; }
.manage-btn{
  margin-top:10px; background:transparent; color:#808080; border:1px solid #5a5a5a;
  padding:9px 26px; letter-spacing:.18em; text-transform:uppercase; font-size:12px;
  transition:color .2s,border-color .2s;
}
.manage-btn:hover{ color:#fff; border-color:#fff; }

/* ===================== NAV ===================== */
#main{ opacity:0; transition:opacity .6s; }
#main.show{ opacity:1; }
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4%; transition:background .4s;
  background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 50%,transparent 100%);
}
.navbar.solid{ background:#141414; }
.nav-left{ display:flex; align-items:center; gap:24px; }
.nav-logo svg{ height:25px; width:auto; display:block; }
.nav-logo .brand{ font-size:28px; }
.nav-links{ display:flex; gap:18px; list-style:none; }
.nav-links li{ color:#e5e5e5; font-size:13.5px; cursor:pointer; transition:color .2s; }
.nav-links li:hover{ color:#b3b3b3; }
.nav-links li.active{ font-weight:600; color:#fff; }
.nav-right{ display:flex; align-items:center; gap:20px; }
.nav-icon{ width:20px; height:20px; fill:#fff; cursor:pointer; }
.nav-right .kids{ color:#fff; font-size:13.5px; cursor:pointer; }
.nav-search{ display:flex; align-items:center; gap:8px; }
.nav-search input{
  background:rgba(0,0,0,.75); border:1px solid #fff; color:#fff;
  padding:6px 10px; width:0; opacity:0; transition:width .3s,opacity .3s; font-size:14px;
}
.nav-search.open input{ width:210px; opacity:1; }
.nav-avatar{ width:32px; height:32px; border-radius:4px; object-fit:cover; object-position:center 22%; }

/* ===================== HERO ===================== */
.hero{ position:relative; height:85vh; min-height:540px; display:flex; align-items:center; }
.hero-bg{ position:absolute; inset:0; overflow:hidden; background:#000; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.hero-fade-b{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,20,20,.5) 80%,#141414 100%); }
.hero-fade-l{ position:absolute; inset:0; background:linear-gradient(77deg,rgba(20,20,20,.92) 0%,rgba(20,20,20,.45) 40%,transparent 62%); }
.hero-content{ position:relative; z-index:2; padding:0 4%; max-width:38%; }
.hero-tag{ display:flex; align-items:center; gap:8px; margin-bottom:16px; font-weight:600; letter-spacing:.16em; font-size:14px; }
.hero-tag .n-badge{ color:var(--red); font-weight:900; font-size:24px; }
.hero-title{ font-size:clamp(32px,4.6vw,68px); font-weight:900; line-height:1.0; text-shadow:2px 2px 10px rgba(0,0,0,.55); margin-bottom:18px; }
.hero-meta{ display:flex; align-items:center; gap:11px; margin-bottom:16px; font-size:15px; flex-wrap:wrap; }
.match{ color:#46d369; font-weight:700; }
.maturity{ border:1px solid #aaa; padding:0 7px; font-size:13px; color:#ddd; }
.hero-desc{ font-size:clamp(14px,1.15vw,18px); color:#e5e5e5; line-height:1.45; text-shadow:1px 1px 5px rgba(0,0,0,.6); margin-bottom:22px; max-width:95%; }
.hero-btns{ display:flex; gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:9px 26px; border-radius:5px; font-size:18px; font-weight:600; transition:opacity .2s,background .2s; }
.btn svg{ width:24px; height:24px; }
.btn-play{ background:#fff; color:#000; }
.btn-play:hover{ background:rgba(255,255,255,.78); }
.btn-info{ background:rgba(109,109,110,.65); color:#fff; }
.btn-info:hover{ background:rgba(109,109,110,.4); }

/* ===================== ROWS ===================== */
.rows{ position:relative; z-index:5; margin-top:-8vh; padding-bottom:50px; }
.row{ margin:0 0 2.6vw 0; }
.row-title{ font-size:clamp(15px,1.25vw,21px); font-weight:700; color:#e5e5e5; padding:0 4% 0 4%; margin-bottom:6px; }
.row-strip-wrap{ position:relative; }
.row-strip{
  display:flex; gap:8px; padding:48px 4%; overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth; scrollbar-width:none; margin:-48px 0;
}
.row-strip::-webkit-scrollbar{ display:none; }

/* poster card (portrait 2:3) */
.card{ position:relative; flex:0 0 auto; width:clamp(135px,13.5vw,205px); cursor:pointer; }
.card-inner{
  position:relative; width:100%; aspect-ratio:2/3; border-radius:5px; overflow:hidden;
  background:#222; transition:transform .28s ease, box-shadow .28s ease; transform-origin:center bottom;
}
.card img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.card:hover{ z-index:30; }
.card:hover .card-inner{ transform:scale(1.13); box-shadow:0 14px 34px rgba(0,0,0,.7); }
.card-grad{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.9)); opacity:0; transition:opacity .28s; }
.card:hover .card-grad{ opacity:1; }
.card-cap{ position:absolute; left:9px; right:9px; bottom:8px; opacity:0; transform:translateY(6px); transition:opacity .28s,transform .28s; }
.card:hover .card-cap{ opacity:1; transform:translateY(0); }
.card-cap .ctitle{ font-size:12.5px; font-weight:700; margin-bottom:6px; text-shadow:0 1px 3px #000; }
.card-cap .mini-actions{ display:flex; gap:6px; align-items:center; }
.mini-btn{ width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.65); background:rgba(20,20,20,.6); display:flex; align-items:center; justify-content:center; }
.mini-btn svg{ width:12px; height:12px; fill:#fff; }
.mini-btn.play{ background:#fff; border-color:#fff; }
.mini-btn.play svg{ fill:#000; }

/* progress bar (Continue Watching) */
.card-progress{ position:absolute; left:0; right:0; bottom:0; height:4px; background:rgba(255,255,255,.35); }
.card-progress i{ display:block; height:100%; background:var(--red); }

/* ranked Top 10 */
.row.top10 .row-strip{ gap:0; }
.rank-card{ display:flex; align-items:flex-end; flex:0 0 auto; padding-right:6px; }
.rank-num{ font-size:clamp(96px,11vw,168px); font-weight:900; line-height:.74; color:#141414; -webkit-text-stroke:3px #6d6d6d; margin-right:-26px; letter-spacing:-.04em; }
.rank-card .card{ width:clamp(110px,10.5vw,160px); }
.rank-card .card-inner{ aspect-ratio:2/3; }

/* arrows */
.row-arrow{ position:absolute; top:48px; bottom:48px; width:4%; z-index:25; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.row-strip-wrap:hover .row-arrow{ opacity:1; }
.row-arrow:hover{ background:rgba(0,0,0,.8); }
.row-arrow svg{ width:28px; height:28px; fill:#fff; }
.row-arrow.left{ left:0; } .row-arrow.right{ right:0; }

/* ===================== MODAL ===================== */
.modal-backdrop{ position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.75); display:flex; align-items:flex-start; justify-content:center; padding:42px 0; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .3s; }
.modal-backdrop.show{ opacity:1; pointer-events:auto; }
.modal{ width:min(860px,92%); background:#181818; border-radius:8px; overflow:hidden; transform:translateY(20px) scale(.98); transition:transform .3s; box-shadow:0 20px 60px rgba(0,0,0,.8); }
.modal-backdrop.show .modal{ transform:translateY(0) scale(1); }
.modal-hero{ position:relative; aspect-ratio:16/9; max-height:460px; overflow:hidden; }
.modal-hero img{ width:100%; height:100%; object-fit:cover; object-position:center 22%; }
.modal-hero-fade{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,#181818); }
.modal-close{ position:absolute; top:16px; right:16px; z-index:5; width:36px; height:36px; border-radius:50%; background:#181818; display:flex; align-items:center; justify-content:center; }
.modal-close svg{ width:18px; height:18px; fill:#fff; }
.modal-hero-content{ position:absolute; bottom:22px; left:32px; right:32px; z-index:4; }
.modal-hero-content h2{ font-size:clamp(24px,3vw,42px); font-weight:900; margin-bottom:16px; text-shadow:2px 2px 8px rgba(0,0,0,.6); }
.modal-hero-btns{ display:flex; gap:12px; align-items:center; }
.modal-body{ padding:22px 32px 34px; display:grid; grid-template-columns:2fr 1fr; gap:24px; }
.modal-meta{ display:flex; gap:12px; align-items:center; margin-bottom:14px; font-size:14px; flex-wrap:wrap; }
.modal-meta .new{ color:#46d369; font-weight:700; }
.modal-desc{ color:#d2d2d2; line-height:1.5; font-size:15.5px; }
.modal-side{ font-size:13.5px; color:#777; line-height:1.7; }
.modal-side b{ color:#fff; font-weight:400; }
@media(max-width:620px){ .modal-body{ grid-template-columns:1fr; } }

/* ===================== LOVE LETTER ===================== */
#message-card{ position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.93); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .5s; }
#message-card.show{ opacity:1; pointer-events:auto; }
.love-letter{ max-width:620px; background:linear-gradient(160deg,#1b1b1b,#0b0b0b); border:1px solid rgba(229,9,20,.4); border-radius:14px; padding:46px 44px; text-align:center; box-shadow:0 0 90px rgba(229,9,20,.22); }
.love-letter .n-badge{ color:var(--red); font-weight:900; font-size:12px; letter-spacing:.3em; }
.love-letter h2{ font-size:clamp(24px,3.2vw,38px); margin:14px 0 22px; font-weight:800; }
.love-letter p{ color:#d8d8d8; line-height:1.75; font-size:clamp(15px,1.3vw,17px); margin-bottom:15px; }
.love-letter .sig{ margin-top:24px; color:var(--red); font-weight:700; font-size:19px; }
.love-letter button{ margin-top:28px; background:var(--red); color:#fff; padding:12px 34px; border-radius:6px; font-size:16px; font-weight:700; transition:background .2s,transform .15s; }
.love-letter button:hover{ background:var(--red-dark); transform:scale(1.04); }
.heart-float{ position:fixed; bottom:-40px; pointer-events:none; z-index:599; animation:floatUp linear forwards; }
@keyframes floatUp{ to{ transform:translateY(-112vh) rotate(35deg); opacity:0; } }

/* ===================== PLAYER (the "video") ===================== */
#player{ position:fixed; inset:0; z-index:700; background:#000; opacity:0; pointer-events:none; transition:opacity .6s ease; }
#player.show{ opacity:1; pointer-events:auto; }
.pl-stage{ position:absolute; inset:0; overflow:hidden; background:#000; }
.pl-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.6s ease; }
.pl-slide.front{ opacity:1; }
/* blurred fill so portrait photos never get black bars */
.pl-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  filter:blur(34px) brightness(.42); transform:scale(1.2); }
/* the actual photo — fully visible, gentle zoom, face stays centered */
.pl-fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transform-origin:center center; will-change:transform; }
.pl-vignette{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.pl-shade-top{ position:absolute; top:0; left:0; right:0; height:160px; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.75),transparent); opacity:0; transition:opacity .4s; }
.pl-shade-bot{ position:absolute; bottom:0; left:0; right:0; height:200px; pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.85),transparent); opacity:0; transition:opacity .4s; }
#player.chrome .pl-shade-top, #player.chrome .pl-shade-bot{ opacity:1; }

.pl-top{ position:absolute; top:24px; left:0; right:0; z-index:3; display:flex; align-items:center; gap:20px;
  padding:0 44px; opacity:0; transition:opacity .4s; }
#player.chrome .pl-top{ opacity:1; }
.pl-back{ display:flex; align-items:center; gap:10px; color:#fff; font-size:19px; font-weight:600; }
.pl-back svg{ width:30px; height:30px; fill:#fff; }
.pl-title{ color:#fff; font-size:20px; font-weight:700; opacity:.9; }

.pl-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; pointer-events:none; }
.pl-bigplay{ width:84px; height:84px; border-radius:50%; background:rgba(20,20,20,.55); border:2px solid rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:auto; transition:opacity .3s, transform .15s; }
.pl-bigplay svg{ width:38px; height:38px; fill:#fff; }
.pl-bigplay:hover{ transform:scale(1.08); }
#player.paused .pl-bigplay{ opacity:1; }

.pl-bottom{ position:absolute; bottom:30px; left:0; right:0; z-index:3; padding:0 44px;
  opacity:0; transition:opacity .4s; }
#player.chrome .pl-bottom{ opacity:1; }
.pl-scrub{ height:5px; background:rgba(255,255,255,.28); border-radius:3px; overflow:hidden; cursor:pointer; }
.pl-scrub i{ display:block; height:100%; width:0; background:var(--red); }
.pl-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.pl-meta .left{ display:flex; align-items:center; gap:18px; }
.pl-ctrl{ display:flex; align-items:center; justify-content:center; }
.pl-ctrl svg{ width:26px; height:26px; fill:#fff; cursor:pointer; }
.pl-time{ color:#fff; font-size:14px; opacity:.85; }
.pl-cap{ color:#fff; font-size:15px; font-weight:600; opacity:.85; }

/* ===================== FOOTER ===================== */
.site-footer{ color:#777; font-size:13px; padding:36px 4% 56px; line-height:1.6; }