/* ═══════════════════════════════════════════════════
   AFLIX · PREMIUM iOS EDITION
   ═══════════════════════════════════════════════════ */

:root {
    --red:      #ff3b30;
    --red-dim:  rgba(255,59,48,0.13);
    --bg:       #000;
    --s1:       #0a0a0a;
    --s2:       #111;
    --s3:       #1c1c1c;
    --s4:       #262626;
    --glass:    rgba(12,12,12,0.9);
    --bd:       rgba(255,255,255,0.07);
    --t1:       #fff;
    --t2:       rgba(255,255,255,0.52);
    --t3:       rgba(255,255,255,0.22);
    --card-w:   clamp(86px,25.5vw,116px);
    --gap:      7px;
    --pad:      15px;
    --nav-h:    50px;
    --r-card:   8px;
    --r-btn:    10px;
    --r-search: 20px;
    --r-sheet:  16px;
    --r-tag:    6px;
    --spring:   cubic-bezier(0.34,1.38,0.64,1);
    --ease:     cubic-bezier(0.25,0.46,0.45,0.94);
    --sat:      env(safe-area-inset-top,0px);
    --sab:      env(safe-area-inset-bottom,0px);
}
@media(min-width:600px)  { :root { --card-w:clamp(110px,16.5vw,138px); --gap:9px;  --pad:20px; } }
@media(min-width:1024px) { :root { --card-w:145px; --gap:11px; --pad:32px; --nav-h:54px; } }

*,*::before,*::after { margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; }
body {
    background:var(--bg); color:var(--t1);
    font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
    overflow-x:hidden;
    padding-bottom:calc(68px + var(--sab));
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* ── SKELETON ── */
.sk {
    background:linear-gradient(90deg,var(--s1) 25%,var(--s2) 48%,var(--s1) 75%);
    background-size:300% 100%; animation:shim 1.8s ease-in-out infinite;
    border-radius:var(--r-card);
}
@keyframes shim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── HEADER ── */
#header {
    position:fixed; top:0; left:0; right:0;
    height:calc(var(--nav-h) + var(--sat));
    padding:var(--sat) var(--pad) 0;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:linear-gradient(to bottom,rgba(0,0,0,0.97) 55%,transparent);
    z-index:1500;
}
.logo {
    font-size:clamp(17px,4.8vw,21px); font-weight:900; letter-spacing:-0.4px;
    background:linear-gradient(130deg,#ff3b30 30%,#ff7b2e);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; cursor:pointer; flex-shrink:0; user-select:none;
}
.search-wrap { position:relative; flex:1; max-width:clamp(148px,44vw,228px); margin-left:auto; }
.search-ico {
    position:absolute; left:9px; top:50%; transform:translateY(-50%);
    width:13px; height:13px; pointer-events:none; opacity:0.28;
}
#search-input {
    width:100%; background:rgba(255,255,255,0.065);
    border:1px solid rgba(255,255,255,0.09);
    padding:7px 11px 7px 28px; border-radius:var(--r-search); color:var(--t1);
    font-size:clamp(11px,2.8vw,13px); font-family:'Outfit'; font-weight:500;
    transition:background .22s,border-color .22s;
    -webkit-appearance:none; appearance:none;
}
#search-input::placeholder { color:var(--t3); }
#search-input:focus { outline:none; background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.18); }

/* ── HERO ── */
#hero-wrap {
    position:relative; width:100%;
    height:clamp(295px,70vw,78vh);
    display:flex; align-items:flex-end; overflow:hidden; background:#000;
    margin-top:calc(var(--nav-h) + var(--sat));
}
@media(min-width:1024px) { #hero-wrap { height:75vh; margin-top:0; } }

#hero-canvas {
    position:absolute; inset:0;
    background-size:cover; background-position:center 18%;
    z-index:1; transform:scale(1.018); transition:opacity 1s var(--ease);
}
#hero-canvas::after {
    content:''; position:absolute; inset:0;
    background:
        linear-gradient(to top,#000 9%,rgba(0,0,0,0.6) 42%,transparent 76%),
        linear-gradient(to right,rgba(0,0,0,0.72) 0%,transparent 62%);
}
.hero-ui {
    position:relative; z-index:10;
    padding:clamp(18px,5vw,46px) var(--pad);
    width:100%; max-width:540px;
}
.h-chip {
    display:inline-flex; align-items:center; gap:4px;
    background:var(--red); color:#fff;
    font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:1.8px;
    padding:3px 8px; border-radius:var(--r-tag); margin-bottom:9px;
}
.h-chip::before { content:'▲'; font-size:5.5px; opacity:0.75; }
.h-meta {
    font-size:clamp(9px,2.3vw,10.5px); font-weight:600; color:var(--t2);
    margin-bottom:6px; text-transform:uppercase; letter-spacing:1.6px; min-height:10px;
}
.h-title {
    font-weight:900; font-size:clamp(21px,5.8vw,50px);
    line-height:0.91; margin-bottom:clamp(9px,2.5vw,14px);
    letter-spacing:-0.4px; text-shadow:0 2px 22px rgba(0,0,0,0.55); min-height:26px;
}
.h-desc {
    display:none;
    font-size:clamp(12px,2.6vw,13.5px); font-weight:400; color:var(--t2);
    line-height:1.62; margin-bottom:14px; max-width:330px;
}
@media(min-width:580px) { .h-desc { display:block; } }

.h-actions { display:flex; gap:9px; align-items:stretch; width:100%; }
@media(max-width:579px) { .h-actions { flex-direction:column; } }
@media(min-width:580px) { .h-actions { flex-direction:row; width:auto; } }

.btn-hero {
    border:none; cursor:pointer; font-family:'Outfit'; font-weight:700;
    font-size:clamp(13px,2.8vw,14px); text-transform:uppercase; letter-spacing:0.35px;
    padding:clamp(15px,3vw,14px) clamp(20px,4.5vw,32px);
    border-radius:var(--r-btn);
    transition:transform .16s var(--spring),opacity .14s;
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    -webkit-appearance:none; appearance:none; flex:1;
}
@media(min-width:580px) { .btn-hero { flex:none; } }
.btn-hero:active { transform:scale(0.95); opacity:0.82; }
.btn-primary   { background:#fff; color:#000; }
.btn-secondary {
    background:rgba(255,255,255,0.1); color:#fff;
    border:1px solid rgba(255,255,255,0.13);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* ── ROWS ── */
.row { padding:clamp(13px,3.2vw,22px) 0 0; }
.row-hd {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--pad); margin-bottom:clamp(7px,1.8vw,11px);
}
.row-title { font-weight:800; font-size:clamp(12.5px,3.2vw,16px); letter-spacing:-0.15px; }
.row-scroll-wrap { position:relative; }

/* Scroller arrows — desktop only */
.arr {
    display:none;
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:20; width:36px; height:56px;
    align-items:center; justify-content:center;
    background:linear-gradient(to right,rgba(0,0,0,0.92),rgba(0,0,0,0.6));
    border:none; cursor:pointer; color:#fff;
    transition:opacity .18s,transform .14s var(--spring);
    border-radius:0 6px 6px 0;
    opacity:0; pointer-events:none;
}
.arr-r {
    right:0;
    background:linear-gradient(to left,rgba(0,0,0,0.92),rgba(0,0,0,0.6));
    border-radius:6px 0 0 6px;
}
.arr svg { width:18px; height:18px; flex-shrink:0; }
@media(min-width:1024px) {
    .arr { display:flex; }
    .row-scroll-wrap:hover .arr.visible { opacity:1; pointer-events:auto; }
    .arr:hover { transform:translateY(-50%) scale(1.08); }
    .arr:active { transform:translateY(-50%) scale(0.95); }
}

.scroller {
    display:flex; gap:var(--gap); overflow-x:auto;
    padding:0 var(--pad) 6px;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch; scroll-behavior:smooth;
}
.scroller::-webkit-scrollbar { display:none; }

/* ── CARDS ── */
.card-m {
    flex:0 0 var(--card-w); position:relative;
    border-radius:var(--r-card); overflow:hidden;
    cursor:pointer; background:var(--s1);
    border:1px solid rgba(255,255,255,0.045);
    transition:transform .2s var(--spring),box-shadow .2s;
    will-change:transform;
}
.card-m:active { transform:scale(0.93) !important; }
@media(min-width:1024px) {
    .card-m:hover { transform:scale(1.06); box-shadow:0 14px 36px rgba(0,0,0,0.65); z-index:5; }
    .card-m:hover .c-over { opacity:1; }
}
.card-m img { width:100%; aspect-ratio:2/3; object-fit:cover; display:block; }
.c-over {
    position:absolute; inset:0; opacity:0; transition:opacity .18s;
    background:linear-gradient(to top,rgba(0,0,0,0.86) 0%,transparent 52%);
    display:flex; align-items:flex-end; padding:7px;
}
.c-over span { font-size:9.5px; font-weight:700; line-height:1.3; color:rgba(255,255,255,0.88); }
.rank-num {
    position:absolute; bottom:-6px; left:-2px;
    font-size:clamp(42px,10.5vw,54px); font-weight:900; color:transparent;
    -webkit-text-stroke:1.5px rgba(255,255,255,0.78);
    z-index:2; line-height:1; pointer-events:none; user-select:none;
}
.row-err { color:var(--t3); font-size:12px; font-weight:600; padding:13px var(--pad); }

/* ── GRID ── */
.grid-view {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:var(--gap); padding:13px var(--pad);
}
@media(min-width:580px)  { .grid-view { grid-template-columns:repeat(4,1fr); } }
@media(min-width:1024px) { .grid-view { grid-template-columns:repeat(6,1fr); gap:11px; } }

/* ── MODAL ── */
#modal {
    position:fixed; inset:0; z-index:5000;
    display:none; background:rgba(0,0,0,0);
    transition:background .28s;
}
#modal.open { background:rgba(0,0,0,0.52); }

.m-sheet {
    position:absolute; inset:0;
    background:var(--bg); overflow:hidden; overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(100%);
    transition:transform .4s var(--spring);
}
#modal.open .m-sheet { transform:translateY(0); }

@media(min-width:768px) {
    #modal { display:none; align-items:center; justify-content:center; padding:28px 16px; overflow:auto; }
    .m-sheet {
        position:relative; inset:auto;
        width:100%; max-width:980px; max-height:91vh;
        border-radius:var(--r-sheet);
        transform:scale(0.95) translateY(14px);
        transition:transform .3s var(--spring),opacity .26s;
        opacity:0; border:1px solid rgba(255,255,255,0.08);
        box-shadow:0 32px 80px rgba(0,0,0,0.94);
    }
    #modal.open .m-sheet { transform:scale(1) translateY(0); opacity:1; }
}

.m-banner {
    width:100%; height:clamp(195px,46vw,255px);
    background-size:cover; background-position:center 22%;
    background-color:var(--s1); position:relative; flex-shrink:0;
}
@media(min-width:768px) { .m-banner { height:clamp(210px,30vw,300px); } }
.m-banner::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top,var(--bg) 6%,rgba(0,0,0,0.15) 55%,transparent);
}
.m-body {
    padding:0 var(--pad) calc(clamp(28px,5vw,42px) + var(--sab));
    margin-top:-34px; position:relative; z-index:10;
}
.m-title {
    font-weight:900; font-size:clamp(19px,5vw,33px);
    line-height:0.93; margin-bottom:9px; letter-spacing:-0.3px;
}
.m-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; align-items:center; }
.tag {
    font-size:10px; font-weight:700; letter-spacing:0.45px;
    padding:3px 8px; border-radius:var(--r-tag); line-height:1.5; white-space:nowrap;
}
.tag-dim  { background:var(--s3); color:var(--t2); }
.tag-red  { background:var(--red-dim); color:var(--red); }
.tag-gold { background:rgba(255,196,0,0.11); color:#ffc400; }
.tag-blue { background:rgba(10,132,255,0.11); color:#0a84ff; }
.m-desc {
    color:var(--t2); font-size:clamp(12px,2.7vw,13.5px); font-weight:400;
    line-height:1.7; margin-bottom:clamp(16px,3.5vw,24px);
}

.m-btns { display:flex; gap:9px; margin-bottom:clamp(18px,3.8vw,26px); flex-direction:column; }
@media(min-width:480px) { .m-btns { flex-direction:row; width:fit-content; } }

.btn-m {
    border:none; cursor:pointer; font-family:'Outfit'; font-weight:700;
    font-size:clamp(13.5px,3vw,14px); letter-spacing:0.3px;
    padding:clamp(15px,3vw,15px) clamp(20px,4vw,26px);
    border-radius:var(--r-btn);
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:transform .16s var(--spring),opacity .14s;
    white-space:nowrap; -webkit-appearance:none; appearance:none; width:100%;
}
@media(min-width:480px) { .btn-m { width:auto; } }
.btn-m:active { transform:scale(0.94); opacity:0.78; }
.btn-m-play { background:#fff; color:#000; }
.btn-m-save { background:var(--s2); color:var(--t1); border:1px solid var(--s4); }
.btn-m-save.listed { color:var(--t2); }

.m-sep { height:1px; background:var(--s3); margin:0 0 clamp(13px,2.8vw,18px); }
.m-sub {
    font-size:10.5px; font-weight:700; color:var(--t3);
    text-transform:uppercase; letter-spacing:2px; margin-bottom:12px;
}

/* Reco grid — 3 cols mobile · 6 cols desktop */
.reco-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
@media(min-width:768px) { .reco-grid { grid-template-columns:repeat(6,1fr); } }
.reco-grid .card-m { flex:none; width:100%; }

/* ── TAB BAR ── */
#tab-nav {
    position:fixed;
    bottom:calc(10px + var(--sab));
    left:50%; transform:translateX(-50%);
    width:clamp(195px,80vw,330px); height:48px;
    background:var(--glass);
    backdrop-filter:saturate(180%) blur(28px);
    -webkit-backdrop-filter:saturate(180%) blur(28px);
    display:flex; justify-content:space-around; align-items:center;
    border-radius:16px; border:1px solid var(--bd);
    z-index:2000;
    box-shadow:0 6px 26px rgba(0,0,0,0.48),inset 0 1px 0 rgba(255,255,255,0.05);
}
.tab-item {
    display:flex; flex-direction:column; align-items:center; gap:1.5px;
    color:var(--t3); cursor:pointer; padding:0 clamp(13px,4.5vw,22px);
    transition:color .18s var(--ease),transform .16s var(--spring); min-width:52px;
}
.tab-item:active { transform:scale(0.87); }
.tab-item.active { color:var(--t1); }
.tab-item.active .t-ico { transform:scale(1.1); }
.t-ico { font-size:18px; line-height:1; transition:transform .18s var(--spring); }
.t-lbl { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }

/* ── PLAYER ── */
#player-fs {
    position:fixed !important; inset:0 !important;
    width:100vw !important; height:100vh !important;
    background:#000 !important; z-index:99999 !important; display:none;
}
#fs-box { width:100% !important; height:100% !important; position:relative; overflow:hidden !important; }
#fs-box iframe {
    width:100% !important; height:100% !important;
    border:none !important; position:absolute !important; inset:0 !important;
}

/*
  Close button is ALWAYS visible at low opacity — blends into video.
  On interaction it snaps to full opacity, then fades back after 10s idle.
  It is never hidden — always clickable.
*/
.p-close {
    position:absolute !important;
    top:calc(16px + var(--sat)) !important;
    right:16px !important;
    z-index:100001 !important;
    /* Idle state: dim but present — blends with any video colour */
    background:rgba(0,0,0,0.25);
    color:rgba(255,255,255,0.35);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--r-btn);
    padding:9px 17px;
    font-family:'Outfit'; font-weight:700;
    font-size:12px; letter-spacing:0.4px; cursor:pointer;
    /* Smooth fade between idle ↔ active */
    transition:background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:flex; align-items:center; gap:5px;
    /* Always clickable — never pointer-events:none */
    pointer-events:auto !important;
}
/* Active state: fully visible, strong contrast */
.p-close.active {
    background:rgba(0,0,0,0.75);
    color:#fff;
    border-color:rgba(255,255,255,0.18);
    box-shadow:0 2px 12px rgba(0,0,0,0.5);
}
.p-close:hover { background:rgba(0,0,0,0.8); color:#fff; }

#player-err {
    display:none; position:absolute; inset:0;
    flex-direction:column; align-items:center; justify-content:center; gap:13px;
    color:var(--t3); font-weight:700; font-size:13px; letter-spacing:0.5px;
}
#player-err.show { display:flex; }
#player-err button {
    margin-top:4px; background:var(--s2); color:var(--t1);
    border:1px solid var(--s4); border-radius:var(--r-btn);
    padding:11px 22px; font-family:'Outfit'; font-weight:700;
    font-size:13px; cursor:pointer; letter-spacing:0.3px;
}

/* ── LIBRARY ── */
#view-lib { padding-top:calc(var(--nav-h) + var(--sat) + 12px); }
.lib-hd  { padding:0 var(--pad) 12px; }
.lib-ttl { font-size:clamp(19px,4.8vw,26px); font-weight:900; letter-spacing:-0.3px; }
.lib-sub { font-size:11.5px; font-weight:500; color:var(--t3); margin-top:2px; }

/* ── SEARCH ── */
#search-res { padding-top:calc(var(--nav-h) + var(--sat) + 8px); }
.srch-hd  { padding:0 var(--pad) 9px; }
.srch-lbl { font-size:10.5px; font-weight:600; color:var(--t3); letter-spacing:0.4px; }

.hidden { display:none !important; }