/* local Nunito Sans (Avenir stand-in) — no network needed */
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/nunito-sans-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Nunito Sans"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/nunito-sans-latin-800-normal.woff2") format("woff2"); }

/* ==========================================================
   TOKENS — every value below is measured off the 1886/1889px
   reference screenshots, not estimated.
   ========================================================== */
:root{
  --bg:#17171b;                        /* page background            */
  --nav:#050506;                       /* top bar                    */
  --tile:#2d2f36;                      /* brand tile fill (flat)     */
  --tile-line:#55575c;                 /* brand tile 1px border      */
  --panel:#101014; --panel-2:#1f2024;
  --text:#ffffff;                      /* active nav, meta, buttons  */
  --text-85:rgba(255,255,255,.85);     /* row headings, profile name */
  --text-70:rgba(255,255,255,.70);     /* inactive nav links         */
  --text-55:rgba(255,255,255,.55);     /* inactive dots              */
  --line:rgba(255,255,255,.1);
  --rating:#fbeb14;

  --gutter:64px;
  --nav-h:61px;
  --hero-h:700px;                      /* image continues behind tiles */
  --hero-overlap:95px;                 /* tiles pulled up over the hero */
  --gap:20px;
  --tile-r:6px;
  --tabbar-h:0px;

  /* 6 full posters + a 43px peek: 277px at 1889 */
  --poster-w:calc((100vw - var(--gutter) - 6*var(--gap) - 43px) / 6);

  --shadow-tile:0 26px 30px -10px rgba(0,0,0,.69), 0 16px 10px -10px rgba(0,0,0,.73);
  --frame:0 0 0 4px var(--bg), 0 0 0 7.5px rgba(255,255,255,.85);

  --splash-top:#011826; --splash-mid:#0a3a48; --splash-bot:#145b69;
  --font:"Avenir Next","Avenir","Nunito Sans","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}
body.kids{ --bg:#1b2a52; --nav:#0a1436; --panel:#101d45; --panel-2:#1c2c5c; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html,body{ background:var(--bg); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased; transition:background .4s; }
body{ overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
body.is-locked{ overflow:hidden; touch-action:none; }
body.is-loading{ overflow:hidden; }
img{ display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
input{ font:inherit; }
[hidden]{ display:none !important; }

/* ==========================================================
   SPLASH LOADER
   ========================================================== */
.splash{
  position:fixed; inset:0; z-index:900;
  background:linear-gradient(180deg,var(--splash-top) 0%,#042b37 30%,var(--splash-mid) 55%,var(--splash-bot) 100%);
  display:grid; place-items:center; transition:opacity .7s ease, visibility .7s;
}
.splash.is-done{ opacity:0; visibility:hidden; }
.splash__mark{ width:min(64vw,430px); overflow:visible; }
.splash__word{ font-family:var(--font); font-size:78px; font-weight:800; letter-spacing:-1px; fill:#dfe9ef; opacity:0; animation:wordIn 1.5s cubic-bezier(.22,.61,.36,1) .25s forwards; }
@keyframes wordIn{ 0%{ opacity:0; } 45%{ opacity:.75; } 100%{ opacity:1; } }
.splash__glow{ filter:url(#softGlow); }
.splash__arc{ fill:none; stroke:#fff; stroke-width:5.5; stroke-linecap:round; stroke-dasharray:520; stroke-dashoffset:520; animation:arcDraw 1.5s cubic-bezier(.4,0,.25,1) .35s forwards; }
@keyframes arcDraw{ to{ stroke-dashoffset:0; } }
.splash__plus{ stroke:#fff; stroke-width:6.5; stroke-linecap:round; opacity:0; animation:plusIn .5s ease .95s forwards; }
@keyframes plusIn{ to{ opacity:1; } }
.splash__tip{ fill:#fff; opacity:0; animation:tipIn .18s ease .38s forwards, tipOut .3s ease 1.7s forwards; }
@keyframes tipIn{ to{ opacity:1; } }
@keyframes tipOut{ to{ opacity:0; } }
.splash__sheen{ fill:#fff; opacity:0; animation:sheen 1.1s ease 1.15s forwards; }
@keyframes sheen{ 0%{ opacity:0; } 35%{ opacity:.28; } 100%{ opacity:0; } }
#splash-arcimg{ opacity:.98; }
#arc-wipe{ width:0; animation:arcWipe 1.5s cubic-bezier(.4,0,.25,1) .35s forwards; }
@keyframes arcWipe{ to{ width:var(--wipe-w,400px); } }

/* ==========================================================
   TOP NAV — 61px, #050506. Content sits 4px above centre
   (icons/text centred on y=26.5). Avatar 36px at x=30;
   search circle 36px ending 10px from the right edge.
   Links are centred between those two, i.e. +10px right of
   the viewport centre — that offset is real, not a bug.
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h); background:var(--nav);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 10px 8px 30px;
  transition:transform .35s ease, background .4s;
}
body.nav-hidden .nav{ transform:translateY(-100%); }

.nav__profile{ position:relative; display:flex; align-items:center; gap:16px; font-size:14px; font-weight:500; color:var(--text-85); cursor:pointer; height:var(--nav-h); }
.avatar{
  position:relative; width:36px; height:36px; border-radius:50%; overflow:hidden; flex:none;
  display:grid; place-items:center; font-weight:800; color:#fff; letter-spacing:.5px; background:#3a3f4f;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.c1{ background:linear-gradient(135deg,#4c6fff,#7b3fe4); }
.c2{ background:linear-gradient(135deg,#ff6a3d,#ff2d55); }
.c3{ background:linear-gradient(135deg,#00c2a8,#0077ff); }
.c4{ background:linear-gradient(135deg,#f7b733,#fc4a1a); }
.c5{ background:linear-gradient(135deg,#a8ff78,#1e9c4d); }
.c6{ background:linear-gradient(135deg,#232526,#414345); }

.nav__links{ display:flex; gap:39px; }
.nav__link{ display:flex; align-items:center; gap:11px; position:relative; padding:4px 0; font-size:15px; font-weight:600; letter-spacing:.2px; color:var(--text-70); white-space:nowrap; }
.nav__link svg{ width:20px; height:20px; fill:currentColor; }
.nav__link.is-active{ color:var(--text); }
.nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--text); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__search{ justify-self:end; width:36px; height:36px; border-radius:50%; background:#1a1b1e; display:grid; place-items:center; }
.nav__search svg{ width:16px; height:16px; stroke:var(--text); fill:none; stroke-width:2.2; }

.pmenu{
  position:absolute; top:calc(100% - 4px); left:-12px; width:262px; background:var(--panel);
  border-radius:6px; padding:8px 0; box-shadow:0 10px 30px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .2s;
}
.nav__profile:hover .pmenu, .nav__profile.is-open .pmenu{ opacity:1; visibility:visible; transform:none; }
.pmenu__item{ display:flex; align-items:center; gap:12px; padding:9px 18px; font-size:14px; color:var(--text-70); width:100%; text-align:left; }
.pmenu__item:hover{ color:var(--text); background:rgba(255,255,255,.04); }
.pmenu__item .avatar{ width:32px; height:32px; font-size:12px; }
.pmenu__item.is-current{ color:var(--text); }
.pmenu__sep{ height:1px; background:var(--line); margin:8px 0; }
.pmenu__count{ margin-left:auto; font-size:12px; color:var(--text-55); }

/* ==========================================================
   TABS PILL — 52px container (radius 26, padding 6/8, gap 12),
   40px tabs (radius 20, padding 0 22). Auto-width tabs, so the
   pill is not symmetric; it sits +10px right of centre like the
   nav links. top:80 at rest, 17 once the nav has hidden.
   ========================================================== */
.tabs{
  position:fixed; top:80px; left:calc(50% + 10px); transform:translateX(-50%); z-index:40;
  display:flex; align-items:center; height:52px; padding:0 8px; gap:12px; border-radius:26px;
  background:rgba(46,47,52,.72); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  transition:top .35s ease, opacity .25s, transform .35s ease;
}
body.nav-hidden .tabs{ top:17px; }
.tab{ height:40px; padding:0 22px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:600; color:var(--text); transition:background .2s; white-space:nowrap; }
.tab img{ height:26px; width:auto; display:block; }
.tab.is-active{ background:var(--text); color:#000; }
.tab:not(.is-active):hover{ background:rgba(255,255,255,.08); }

/* ==========================================================
   HERO — 700px, starts under the nav; brand tiles overlap
   its bottom 95px. Left fade is solid page-bg for the first
   8% then gone by 38%; bottom fade only starts at 78%.
   No top gradient (image runs straight into the nav).
   ========================================================== */
.hero{ position:relative; height:var(--hero-h); margin-top:var(--nav-h); overflow:hidden; background:#0d0f16; }
.hero__slide{ position:absolute; inset:0; }
.hero__slide img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.hero__bg{ filter:blur(28px) brightness(.55) saturate(1.1); transform:scale(1.08); }   /* poster fill until a banner is set */
.hero__banner{ object-position:center 20%; }
.hero__placeholder{
  width:100%; height:100%; display:grid; place-items:center; text-align:center; padding:0 24px;
  background:radial-gradient(ellipse at 62% 38%,#3b2a1d 0%,#1f1711 42%,#0b0b0f 100%);
  color:rgba(255,255,255,.3); font-size:15px; letter-spacing:.4px;
}
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg) 0%,var(--bg) 8%,rgba(23,23,27,.6) 22%,rgba(23,23,27,0) 38%),
    linear-gradient(180deg,rgba(23,23,27,0) 78%,rgba(23,23,27,.55) 86%,rgba(23,23,27,.92) 92%,var(--bg) 100%);
}
/* content column: logo art bottom → 38 → 20px badge row → 24 → 48px button → 56 → tile top */
.hero__content{ position:absolute; left:var(--gutter); bottom:calc(var(--hero-overlap) + 56px); z-index:2; }
.hero__logo{ width:258px; height:148px; margin-bottom:38px; display:flex; align-items:flex-end; }
.hero__logo img{ max-width:100%; max-height:100%; object-fit:contain; object-position:left bottom; }
.hero__logo-text{ font-size:38px; font-weight:800; line-height:1; text-transform:uppercase; letter-spacing:-.5px; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hero__meta{ display:flex; align-items:center; gap:8px; height:20px; font-size:15px; font-weight:500; margin-bottom:24px; }
.hero__rating{ width:20px; height:20px; border-radius:2px; background:var(--rating); color:#111; font-size:12px; font-weight:800; display:grid; place-items:center; flex:none; }
.hero__btn{ height:48px; padding:0 14px; min-width:105px; border-radius:24px; background:var(--text); color:#000; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; transition:background .2s; }
.hero__btn:hover{ background:#e2e2e2; }
/* chevrons: 14×26 visible, centred 26px from each edge, 235px below the hero top */
.hero__arrow{ position:absolute; top:235px; transform:translateY(-50%); z-index:3; width:44px; height:64px; display:grid; place-items:center; }
.hero__arrow svg{ width:14px; height:26px; fill:none; stroke:var(--text); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.hero__arrow--prev{ left:4px; }
.hero__arrow--next{ right:4px; }
/* dots: active 26×8, others 8×8, 13px apart, bottom edge 47px above the tiles */
.hero__dots{ position:absolute; left:calc(50% + 4px); bottom:calc(var(--hero-overlap) + 47px); transform:translateX(-50%); z-index:3; display:flex; gap:13px; align-items:center; }
.hero__dot{ width:8px; height:8px; border-radius:4px; background:var(--text-55); transition:all .3s; }
.hero__dot.is-active{ width:26px; background:var(--text); }

/* ==========================================================
   BRAND TILES — 5 × 337×188, flat #2d2f36, 1px #55575c border,
   6px radius, 20px gaps, heavy double drop shadow. Pulled up
   95px so they sit over the hero's fade.
   ========================================================== */
.brands{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap); padding:0 var(--gutter); margin-top:calc(-1 * var(--hero-overlap)); position:relative; z-index:3; }
.brand{
  position:relative; aspect-ratio:337/188; border-radius:var(--tile-r); overflow:hidden;
  background:var(--tile); border:1px solid var(--tile-line); box-shadow:var(--shadow-tile);
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.25,.46,.45,.94),border-color .3s;
}
.brand:hover,.brand:focus-visible{ transform:scale(1.05); border-color:rgba(255,255,255,.8); outline:none; }
.brand img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.brand__label{ font-size:clamp(13px,1.6vw,30px); font-weight:800; letter-spacing:1px; text-align:center; padding:0 8px; }

/* ==========================================================
   ROWS — heading 22px/30px line, 85% white, 22px to posters;
   tile bottom → first heading 36px; poster bottom → next
   heading 57px. Posters 277×415.5 (2:3), 6px radius, no
   border, drop shadow; hover = scale 1.025 + 4px gap + 3.5px
   85%-white frame.
   ========================================================== */
.rows{ padding:36px 0 0; }
.row{ margin-bottom:57px; }
.row__title{ font-size:22px; line-height:30px; font-weight:500; color:var(--text-85); padding:0 var(--gutter); margin-bottom:22px; }
/* row scroll arrows — desktop only, gutter-wide panels over the track, shown on row hover */
.row__body{ position:relative; }
.row__arrow{ position:absolute; top:0; bottom:0; width:var(--gutter); z-index:5; display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; background:linear-gradient(90deg,rgba(23,23,27,.92) 0%,rgba(23,23,27,.6) 60%,rgba(23,23,27,0) 100%); }
.row__arrow--prev{ left:0; }
.row__arrow--next{ right:0; background:linear-gradient(270deg,rgba(23,23,27,.92) 0%,rgba(23,23,27,.6) 60%,rgba(23,23,27,0) 100%); }
.row__arrow svg{ width:14px; height:26px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.row__arrow:hover svg{ transform:scale(1.2); }
.row:hover .row__arrow.is-on, .row:focus-within .row__arrow.is-on{ opacity:1; visibility:visible; }
/* vertical padding + matching negative margin gives the hover frame room without moving layout */
.row__track{ display:flex; gap:var(--gap); padding:14px 0 40px var(--gutter); margin:-14px 0 -40px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.row__track::after{ content:""; flex:0 0 var(--gutter); }
.row__track::-webkit-scrollbar{ display:none; }

.poster{
  flex:0 0 var(--poster-w); width:var(--poster-w); aspect-ratio:2/3;
  position:relative; border-radius:var(--tile-r); cursor:pointer; box-shadow:var(--shadow-tile);
  transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s;
}
.poster__face{
  position:absolute; inset:0; border-radius:var(--tile-r); overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(160deg,#2b2d35 0%,#1e2027 100%);
}
.poster__face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.poster__title{ padding:14px; text-align:center; font-size:clamp(12px,1.1vw,15px); font-weight:700; line-height:1.3; }
.poster__hint{ position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:10px; color:rgba(255,255,255,.3); }
.poster__add{
  position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%;
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.5); color:#fff; font-size:19px; line-height:1;
  display:grid; place-items:center; opacity:0; transition:opacity .2s,background .2s;
}
.poster:hover .poster__add,.poster:focus-within .poster__add{ opacity:1; }
.poster__add.is-on{ background:var(--text); color:#000; }
.poster:hover,.poster:focus-visible{ transform:scale(1.025); outline:none; box-shadow:var(--frame), var(--shadow-tile); }

/* ==========================================================
   PAGES
   ========================================================== */
.page{ padding:calc(var(--nav-h) + 48px) var(--gutter) 40px; min-height:70vh; }
.page__title{ font-size:28px; font-weight:600; color:var(--text-85); margin-bottom:28px; }
.grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--gap); padding:14px 0 40px; }
.grid .poster{ width:auto; flex:none; }
.grid--live{ grid-template-columns:repeat(4,1fr); }
.live{
  position:relative; aspect-ratio:16/9; border-radius:var(--tile-r); overflow:hidden; cursor:pointer;
  background:var(--tile); border:1px solid var(--tile-line); box-shadow:var(--shadow-tile);
  display:grid; place-items:center; font-weight:700; font-size:14px; transition:transform .25s,box-shadow .25s;
}
.live img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.live__badge{ position:absolute; top:10px; left:10px; background:#e5153b; color:#fff; font-size:11px; font-weight:800; letter-spacing:1px; padding:3px 7px; border-radius:3px; }
.live:hover{ transform:scale(1.03); box-shadow:var(--frame), var(--shadow-tile); }
.empty{ padding:60px 0; text-align:center; color:var(--text-55); font-size:15px; line-height:1.7; }
.empty strong{ display:block; color:var(--text); font-size:21px; font-weight:600; margin-bottom:6px; }

/* ==========================================================
   SEARCH
   ========================================================== */
.search{ position:fixed; inset:var(--nav-h) 0 var(--tabbar-h) 0; background:var(--bg); z-index:45; overflow-y:auto; padding:40px var(--gutter); }
.search__bar{ position:relative; margin-bottom:34px; }
.search__bar svg{ position:absolute; left:22px; top:50%; transform:translateY(-50%); width:22px; height:22px; stroke:var(--text-55); fill:none; stroke-width:2.2; }
.search__input{ width:100%; height:64px; padding:0 24px 0 60px; border:0; border-radius:4px; outline:none; background:#2d2f36; color:var(--text); font-size:22px; font-weight:500; }
.search__input::placeholder{ color:var(--text-55); }
.search__big{ text-align:center; font-size:clamp(70px,14vw,140px); font-weight:800; padding:50px 0; letter-spacing:-4px; }
.search__big small{ display:block; font-size:15px; letter-spacing:.5px; font-weight:500; color:var(--text-55); margin-top:8px; }

/* ==========================================================
   PROFILE PICKER
   ========================================================== */
.picker{ position:fixed; inset:0; min-height:100dvh; z-index:100; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:44px; padding:32px 20px; overflow-y:auto; }
.picker__title{ font-size:clamp(24px,4vw,36px); font-weight:500; color:var(--text-85); text-align:center; }
.picker__grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:30px 44px; max-width:1100px; }
.picker__item{ display:flex; flex-direction:column; align-items:center; gap:16px; width:150px; }
.picker__item .avatar{ width:150px; height:150px; font-size:54px; transition:box-shadow .2s,transform .2s; }
.picker__item:hover .avatar,.picker__item:focus-visible .avatar{ box-shadow:var(--frame); transform:scale(1.03); outline:none; }
.picker__item span{ font-size:17px; font-weight:500; color:var(--text-70); text-align:center; }
.picker__item:hover span{ color:var(--text); }
.avatar--add{ background:transparent; border:2px dashed rgba(255,255,255,.35); color:var(--text-70); font-weight:400; }
.avatar--edit::after{ content:"✎"; position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); font-size:36px; }
.btn-outline{ height:48px; padding:0 30px; border-radius:24px; border:1px solid rgba(255,255,255,.5); font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; transition:all .2s; }
.btn-outline:hover,.btn-outline.is-on{ background:var(--text); color:#000; border-color:var(--text); }
.btn-solid{ height:48px; padding:0 30px; border-radius:24px; background:var(--text); color:#000; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; }
.btn-solid:hover{ background:#e2e2e2; }
.btn-text{ height:48px; padding:0 18px; font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-70); }
.btn-text:hover{ color:var(--text); }

/* ==========================================================
   MODAL
   ========================================================== */
.modal{ position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.6); display:grid; place-items:center; padding:24px; }
.modal__box{ width:min(520px,100%); max-height:88vh; overflow-y:auto; background:var(--panel-2); border-radius:8px; padding:34px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.modal__body{ font-size:16px; line-height:1.6; color:var(--text-70); }
.modal__title{ font-size:22px; font-weight:600; margin-bottom:26px; }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13px; color:var(--text-55); margin-bottom:8px; }
.field input[type=text]{ width:100%; height:48px; padding:0 16px; border-radius:4px; border:0; background:#2d2f36; color:var(--text); font-size:16px; outline:none; }
.field input[type=text]:focus{ box-shadow:0 0 0 2px var(--text); }
.swatches{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{ width:42px; height:42px; border-radius:50%; border:3px solid transparent; transition:border-color .2s; }
.swatch.is-on{ border-color:var(--text); }
.ep-preview .avatar{ width:84px; height:84px; font-size:32px; }
.toggle{ display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.toggle input{ width:44px; height:24px; appearance:none; -webkit-appearance:none; background:#3a3f4f; border-radius:12px; position:relative; cursor:pointer; transition:background .2s; flex:none; }
.toggle input::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s; }
.toggle input:checked{ background:#4c6fff; }
.toggle input:checked::after{ transform:translateX(20px); }
.modal__actions{ display:flex; gap:10px; margin-top:28px; align-items:center; flex-wrap:wrap; }
.modal__actions .btn-text{ margin-left:auto; }
.sheet-list{ display:grid; }
.sheet-list button{ display:flex; align-items:center; gap:14px; padding:14px 4px; font-size:16px; color:var(--text-70); text-align:left; border-bottom:1px solid var(--line); }
.sheet-list button:last-child{ border-bottom:0; }
.sheet-list .avatar{ width:34px; height:34px; font-size:13px; }
.sheet-list .pmenu__count{ font-size:13px; }

/* ==========================================================
   FOOTER / TOAST
   ========================================================== */
.footer{ padding:52px var(--gutter) 44px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-55); border-top:1px solid var(--line); margin-top:20px; }
.toast{
  position:fixed; left:50%; bottom:calc(28px + var(--tabbar-h)); transform:translate(-50%,120px); z-index:200;
  max-width:calc(100vw - 32px); padding:13px 20px; border-radius:8px; background:var(--text); color:#000;
  font-size:14px; font-weight:600; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.toast.is-on{ transform:translate(-50%,0); opacity:1; }


/* ==========================================================
   ELEMENTS ONLY THE PHONE LAYOUT USES — hidden on desktop
   ========================================================== */
.mhead,.chips,.cards,.tabbar{ display:none; }

/* toast: on phone it becomes the "Welcome, name x" pill with an avatar */
.toast{ display:flex; align-items:center; justify-content:center; gap:12px; }
.toast__avatar .avatar{ width:28px; height:28px; font-size:12px; }

/* landscape variant of a poster (used in phone rows, grids, suggested) */
.poster--wide{ aspect-ratio:16/9; }
.poster--wide .poster__face img{ object-position:center 25%; }

/* ==========================================================
   TITLE DETAIL PAGE — phone spec (measured at 375px):
   hero 300px with 12px top corners, controls 30px down / 16px in,
   "New Movie" 18px badge, logo box 204×96 pulled up 81px,
   20px rating pills, 12px meta, 44px full-width PLAY, action row
   82px per item, 16/25 description, 15px letter-spaced tabs with a
   4px underline on a 1px #454548 rule, 2-up 16:9 grid.
   Desktop widens the same DOM (see the desktop block below).
   ========================================================== */
.detail{ position:relative; min-height:100vh; padding-bottom:calc(var(--tabbar-h) + 40px); }
.detail__top{ position:relative; padding-top:env(safe-area-inset-top); overflow:hidden; }
.detail__blur{ position:absolute; inset:-40px; width:calc(100% + 80px); height:calc(100% + 80px); object-fit:cover; filter:blur(30px) brightness(.55); z-index:0; }
.detail__hero{ position:relative; z-index:1; height:300px; border-radius:12px 12px 0 0; overflow:hidden; background:#0d0f16; }
.detail__img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; }
.detail__art{ display:none; }
.detail__placeholder{ width:100%; height:100%; display:grid; place-items:center; text-align:center; color:rgba(255,255,255,.3); font-size:15px; line-height:1.5; background:radial-gradient(ellipse at 50% 30%,#2b2d35 0%,#1a1c24 50%,#0b0b0f 100%); }
.detail__placeholder small{ font-size:11px; opacity:.7; }
.detail__shade{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(23,23,27,0) 50%,rgba(23,23,27,.85) 85%,var(--bg) 100%); }
.detail__controls{ position:absolute; top:30px; right:16px; display:flex; align-items:center; gap:14px; z-index:2; }
.detail__ctl{ width:20px; height:20px; display:grid; place-items:center; color:#fff; }
.detail__ctl svg{ width:20px; height:20px; fill:currentColor; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.detail__ctl--close{ width:26px; height:26px; border-radius:50%; background:rgba(23,30,35,.85); }
.detail__ctl--close svg{ width:14px; height:14px; }
.detail__badge{ position:absolute; left:50%; bottom:95px; transform:translateX(-50%); z-index:2; height:18px; padding:0 4px; border-radius:3px; background:#ededee; color:#000; font-size:10px; font-weight:600; line-height:18px; white-space:nowrap; }
.detail__body{ position:relative; z-index:2; }
.detail__logo{ width:204px; height:96px; margin:-81px auto 0; display:flex; align-items:flex-end; justify-content:center; text-align:center; }
.detail__logo img{ max-width:100%; max-height:100%; object-fit:contain; object-position:center bottom; }
.detail__logo-text{ font-size:26px; font-weight:800; line-height:1.05; text-transform:uppercase; letter-spacing:-.3px; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.detail__pills{ display:flex; justify-content:center; gap:4px; margin-top:34px; }
.pill{ height:20px; padding:0 6px; border-radius:4px; background:#31343e; color:#e9e9eb; font-size:12px; font-weight:600; line-height:20px; }
.pill--rating{ width:20px; padding:0; text-align:center; background:#fdee0b; color:#000; font-weight:700; }
.pill--rating.is-red{ background:#d42b1f; color:#fff; }
.pill--ad{ font-style:italic; font-weight:800; }
.pill--imax{ text-transform:uppercase; font-weight:400; letter-spacing:.2px; }
.pill--imax b{ font-weight:800; letter-spacing:0; margin-right:5px; }
.detail__meta{ margin-top:5px; text-align:center; font-size:12px; line-height:16px; color:var(--text-85); padding:0 20px; }
.detail__play{ display:flex; align-items:center; justify-content:center; gap:11px; height:44px; margin:12px 20px 0; border-radius:22px; background:#fff; color:#000; font-size:14px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; width:calc(100% - 40px); }
.detail__play svg{ width:20px; height:20px; fill:#000; }   /* triangle inside renders 12×13, as measured */
.detail__play:hover{ background:#e2e2e2; }
.detail__actions{ display:flex; justify-content:center; margin-top:16px; }
.detail__action{ width:82px; display:flex; flex-direction:column; align-items:center; gap:6px; color:#fff; }
.detail__action-icon{ width:24px; height:24px; display:grid; place-items:center; }
.detail__action-icon svg{ width:22px; height:22px; fill:#fff; }
.detail__action span:last-child{ font-size:10px; font-weight:500; letter-spacing:1px; text-transform:uppercase; }
.detail__desc{ margin:17px 20px 0; font-size:16px; line-height:25px; color:#fff; }
.detail__tabs{ display:flex; gap:32px; margin:34px 20px 0; border-bottom:1px solid #454548; }
.dtab{ position:relative; height:36px; padding:0 5px 2px; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-85); white-space:nowrap; }
.dtab.is-active{ color:#fff; }
.dtab.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:4px; border-radius:2px 2px 0 0; background:#fff; }
.detail__panel{ margin:13px 20px 0; }
.detail__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.detail__grid .poster{ width:auto; flex:none; }
.detail__season{ display:flex; justify-content:space-between; align-items:center; height:56px; font-size:15px; font-weight:500; }
.detail__dl{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:#fff; }
.detail__dl svg{ width:18px; height:18px; fill:#fff; }
.episodes{ display:grid; gap:14px; }
.episode{ display:grid; grid-template-columns:140px 1fr 32px; gap:14px; align-items:center; }
.episode__thumb{ aspect-ratio:16/9; border-radius:4px; overflow:hidden; background:linear-gradient(160deg,#2b2d35,#1e2027); }
.episode__thumb img{ width:100%; height:100%; object-fit:cover; }
.episode__title{ font-size:15px; font-weight:600; }
.episode__sub{ font-size:12px; color:var(--text-70); margin-top:4px; }
.episode__dl{ width:32px; height:32px; display:grid; place-items:center; color:#fff; }
.episode__dl svg{ width:20px; height:20px; fill:#fff; }

/* ---------- desktop widening of the detail page ---------- */
@media (min-width:821px){
  .detail__top{ padding-top:var(--nav-h); }
  .detail__hero{ height:520px; border-radius:0; }
  .detail__img{ object-position:center 15%; filter:blur(28px) brightness(.5); transform:scale(1.08); }
  .detail__art{ display:block; position:absolute; top:0; right:calc(var(--gutter) + 40px); height:100%; width:auto; object-fit:contain; }
  .detail__shade{ background:linear-gradient(90deg,var(--bg) 0%,rgba(23,23,27,.75) 35%,rgba(23,23,27,0) 60%),linear-gradient(180deg,rgba(23,23,27,0) 55%,var(--bg) 100%); }
  .detail__controls{ top:24px; right:var(--gutter); }
  .detail__badge{ left:var(--gutter); transform:none; bottom:auto; top:24px; }
  .detail__body{ padding:0 var(--gutter); max-width:1200px; }
  .detail__logo{ width:320px; height:150px; margin:-190px 0 0; justify-content:flex-start; text-align:left; }
  .detail__logo-text{ font-size:40px; }
  .detail__pills{ justify-content:flex-start; margin-top:26px; }
  .detail__meta{ text-align:left; padding:0; font-size:15px; line-height:20px; margin-top:12px; }
  .detail__play{ width:180px; margin:24px 0 0; display:inline-flex; vertical-align:middle; }
  .detail__actions{ display:inline-flex; margin:24px 0 0 12px; vertical-align:middle; }
  .detail__action{ width:auto; flex-direction:row; gap:8px; padding:0 16px; height:44px; border-radius:22px; border:1px solid rgba(255,255,255,.35); margin-right:8px; }
  .detail__action span:last-child{ font-size:13px; letter-spacing:1.2px; }
  .detail__desc{ margin:28px 0 0; max-width:640px; font-size:17px; line-height:26px; }
  .detail__tabs{ margin:40px 0 0; }
  .detail__panel{ margin:24px 0 0; }
  .detail__grid{ grid-template-columns:repeat(4,1fr); }
  .episode{ grid-template-columns:220px 1fr 32px; }
  body.is-detail .nav{ transform:none; }
}

/* ==========================================================
   BOTTOM TAB BAR — 48px + safe area, icon-only, 4 columns
   inside 14px side padding, translucent blurred fill
   ========================================================== */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(20,20,22,.78); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); padding:0 14px env(safe-area-inset-bottom); }
.tabbar__row{ display:grid; grid-template-columns:repeat(4,1fr); height:48px; }
.tabbar__btn{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.55); -webkit-tap-highlight-color:transparent; }
.tabbar__btn svg{ width:20px; height:20px; fill:currentColor; }
.tabbar__btn.is-active{ color:#fff; }
.tabbar__avatar .avatar{ width:24px; height:24px; font-size:10px; }

/* ==========================================================
   RESPONSIVE — laptop / tablet
   ========================================================== */
@media (max-width:1400px){ :root{ --gutter:48px; } }
@media (max-width:1200px){
  :root{ --gutter:40px; --poster-w:calc((100vw - var(--gutter) - 5*var(--gap) - 43px) / 5); }
  .nav__links{ gap:26px; }
  .grid{ grid-template-columns:repeat(5,1fr); }
}
@media (max-width:1000px){
  :root{ --gutter:32px; --hero-h:clamp(460px,62vw,700px); --hero-overlap:60px; --poster-w:calc((100vw - var(--gutter) - 4*var(--gap) - 43px) / 4); }
  .nav__links{ gap:20px; }
  .nav__link span{ display:none; }
  .hero__logo{ width:210px; height:116px; margin-bottom:20px; }
  .hero__logo-text{ font-size:32px; }
  .grid{ grid-template-columns:repeat(4,1fr); }
  .grid--live{ grid-template-columns:repeat(3,1fr); }
  .brands{ gap:14px; }
}

/* ==========================================================
   PHONE — the app layout, measured from the 375px screenshots
   ========================================================== */
@media (max-width:820px){
  :root{ --gutter:20px; --gap:13px; --nav-h:0px; --tabbar-h:48px; --tile-r:4px; --hero-overlap:0px; --poster-w:calc((100vw - 20px) * .696); }

  /* desktop chrome off */
  .nav,.tabs,.hero,.hero__arrow{ display:none; }
  .mhead,.chips,.cards{ display:flex; }
  .tabbar{ display:block; }

  /* header: "For You" 24px, icons 20px / 24px apart */
  .mhead{ height:40px; margin-top:env(safe-area-inset-top); padding:0 20px 0 18px; align-items:center; justify-content:space-between; }
  .mhead__title{ font-size:24px; font-weight:800; letter-spacing:-.2px; }
  .mhead__icons{ display:flex; gap:24px; }
  .mhead__icon{ width:20px; height:20px; color:#fff; }
  .mhead__icon svg{ width:20px; height:20px; fill:currentColor; }

  /* chips: 38px, 1px #38383d on #202126, 8px apart, 16px in */
  .chips{ margin-top:10px; padding:0 16px; gap:8px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .chips::-webkit-scrollbar{ display:none; }
  .chips::after{ content:""; flex:0 0 8px; }
  .chip{ flex:none; display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:19px; background:#202126; border:1px solid #38383d; color:#fff; font-size:15px; font-weight:500; white-space:nowrap; }
  .chip img{ height:20px; width:auto; }
  .chip svg{ width:16px; height:16px; fill:currentColor; }
  .chip.is-active{ background:#2b2c32; border-color:#4a4a50; }

  /* carousel cards: 327×440, 6px radius, 12px gap, 12px neighbour peek */
  .cards{ margin-top:20px; padding:0 24px; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
  .cards::-webkit-scrollbar{ display:none; }
  .card{ position:relative; flex:0 0 calc(100vw - 48px); height:440px; border-radius:6px; overflow:hidden; background:#0d0f16; scroll-snap-align:center; cursor:pointer; }
  .card img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .card__placeholder{ width:100%; height:100%; display:grid; place-items:center; color:rgba(255,255,255,.3); font-size:14px; background:radial-gradient(ellipse at 50% 35%,#3b2a1d 0%,#1f1711 45%,#0b0b0f 100%); }
  .card__shade{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.9) 100%); pointer-events:none; }
  .card__badge{ position:absolute; left:50%; top:48%; transform:translateX(-50%); padding:4px 8px; border-radius:4px; background:#1b7ea1; color:#fff; font-size:12px; font-weight:700; white-space:nowrap; }
  .card__text{ position:absolute; left:0; right:0; bottom:0; padding:0 24px 18px; text-align:center; }
  .card__kicker{ font-size:12px; font-weight:600; line-height:16px; margin-bottom:12px; }
  .card__title{ font-size:15px; font-weight:700; line-height:23px; margin-bottom:5px; }
  .card__meta{ font-size:12px; font-weight:500; line-height:16px; color:var(--text-85); }

  /* brand tiles become a row of 247-wide tiles after the first content row */
  .brands{ display:flex; gap:var(--gap); overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; padding:0 var(--gutter); margin:0 0 26px; scroll-snap-type:x proximity; scroll-padding-left:var(--gutter); }
  .brands::-webkit-scrollbar{ display:none; }
  .brands::after{ content:""; flex:0 0 7px; }
  .brand{ flex:0 0 var(--poster-w); scroll-snap-align:start; border:1px solid var(--tile-line); box-shadow:none; border-radius:var(--tile-r); }
  .brand:hover{ transform:none; }
  .brand__label{ font-size:15px; }
  #home{ display:flex; flex-direction:column; }
  #home .brands{ order:3; }            /* after the first content row (see .rows) */
  #home .rows{ order:2; display:contents; }
  #home .rows .row:first-child{ order:1; }
  #home .rows .row:not(:first-child){ order:4; }

  /* rows: 18px heading, 247×139 tiles, 13px gaps */
  .row{ margin:26px 0 0; }
  .row__title{ font-size:18px; line-height:24px; font-weight:700; color:#fff; margin-bottom:9px; padding:0 var(--gutter); }
  .row__track{ padding:0 0 0 var(--gutter); margin:0; gap:var(--gap); scroll-snap-type:x proximity; scroll-padding-left:var(--gutter); }
  .row__arrow{ display:none; }
  .row__track::after{ content:""; flex:0 0 7px; }
  .poster{ aspect-ratio:16/9; scroll-snap-align:start; box-shadow:none; }
  body.rows-portrait .row__track .poster{ aspect-ratio:2/3; flex-basis:calc((100vw - 20px) * .41); width:calc((100vw - 20px) * .41); }
  body.rows-portrait .row__track .poster__face img{ object-position:center; }
  body.rows-portrait .brand{ flex-basis:var(--poster-w); }
  .poster__face{ border-radius:var(--tile-r); }
  .poster__face img{ object-position:center 25%; }
  .poster:hover,.poster:focus-visible{ transform:none; box-shadow:none; }
  .poster__add{ display:none; }
  .poster__title{ font-size:12px; padding:10px; }
  .poster__hint{ font-size:9px; }
  #home::after{ content:""; order:5; height:calc(var(--tabbar-h) + 24px); }

  /* list pages, search, grids */
  .page{ padding:calc(env(safe-area-inset-top) + 20px) var(--gutter) calc(var(--tabbar-h) + 28px); }
  .page__title{ font-size:24px; font-weight:800; margin-bottom:16px; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:20px; padding:0; }
  .grid--live{ grid-template-columns:repeat(2,1fr); }
  .search{ inset:0 0 var(--tabbar-h) 0; padding:calc(env(safe-area-inset-top) + 16px) var(--gutter) 24px; }
  .search__input{ height:48px; font-size:16px; padding:0 16px 0 48px; border-radius:6px; }
  .search__bar svg{ left:16px; width:18px; height:18px; }
  .search__bar{ margin-bottom:22px; }

  /* picker, sheets, toast */
  .picker{ gap:32px; }
  .picker__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px 20px; width:100%; max-width:340px; }
  .picker__item{ width:100%; }
  .picker__item .avatar{ width:min(38vw,140px); height:min(38vw,140px); font-size:12vw; margin:0 auto; }
  .picker__item span{ font-size:15px; }
  .modal{ align-items:end; padding:0; }
  .modal__box{ width:100%; max-width:none; border-radius:16px 16px 0 0; padding:26px 20px calc(26px + env(safe-area-inset-bottom)); max-height:86dvh; }
  .modal__actions .btn-solid,.modal__actions .btn-outline{ flex:1; }
  .modal__actions .btn-text{ width:100%; margin-left:0; text-align:center; }
  .sheet-list a{ display:flex; align-items:center; gap:14px; padding:14px 4px; font-size:16px; color:var(--text-70); border-bottom:1px solid var(--line); }
  .sheet-list svg{ width:20px; height:20px; fill:currentColor; }
  .sheet-list .pmenu__count{ margin-left:auto; }
  .toast{ left:50%; bottom:auto; top:calc(env(safe-area-inset-top) + 610px); transform:translate(-50%,0) scale(.96); background:rgba(40,40,46,.92); color:#fff; padding:8px 24px 8px 10px; border-radius:26px; height:52px; font-size:15px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.5); backdrop-filter:blur(12px); }
  .toast.is-on{ transform:translate(-50%,0) scale(1); }
  .toast__avatar .avatar{ width:36px; height:36px; font-size:14px; }
  .footer{ padding:32px var(--gutter) calc(var(--tabbar-h) + 32px); flex-direction:column; gap:10px; text-align:center; align-items:center; font-size:11px; }
  .detail .empty{ padding:36px 0; }
}

/* ---------- small phones ---------- */
@media (max-width:380px){
  .chip{ padding:0 11px; font-size:14px; }
  .card{ height:calc((100vw - 48px) * 1.346); }
  .detail__tabs{ gap:26px; }
}
/* ---------- landscape phone ---------- */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  .card{ flex-basis:60vw; height:60vh; }
  .brand,.poster{ flex-basis:34vw; }
}
/* ---------- ultra-wide ---------- */
@media (min-width:2000px){
  :root{ --gutter:80px; --hero-h:min(40vw,860px); --poster-w:calc((100vw - var(--gutter) - 7*var(--gap) - 43px) / 7); }
  .grid{ grid-template-columns:repeat(7,1fr); }
}
@media (hover:none){
  .poster:hover,.brand:hover,.live:hover{ transform:none; }
  .poster:active,.card:active{ transform:scale(.98); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .splash__word,.splash__plus,.splash__arc{ opacity:1; stroke-dashoffset:0; }
  #arc-wipe{ width:var(--wipe-w,400px); }
}