/* Cine Focus – reel player, action rail, comments, view badges, Hot and Top lists */

/* ---------- view badge (cards) ---------- */
.vbadge{position:absolute;left:6px;bottom:6px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:2px 7px 2px 5px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:11px;font-weight:700;line-height:1.5;pointer-events:none}
.vbadge[hidden]{display:none}
.vbadge .ic{width:12px;height:12px;stroke-width:2.2}
.vbadge.is-hot{background:linear-gradient(135deg,#ff7a18,#ff1f3d)}
.vbadge.is-hot .ic{fill:#fff;stroke:none}
.poster,.thumb,.shcard,.hot-img,.top-poster{position:relative}
.vline{color:var(--text2)}

/* ---------- Hot / Top rows ---------- */
.hot-h{display:flex;align-items:center;gap:8px}
.hot-h .ic{width:24px;height:24px;color:#ff6a1a;fill:#ff6a1a;stroke:none}
.top-sec .hot-h .ic{fill:none;stroke:#f1c27b;stroke-width:2;color:#f1c27b}
.hot-h.big{font-size:22px;margin:4px 0 2px}
.hot-sec:empty,.top-sec:empty{display:none}
.hot-row,.top-row{gap:12px}
.hot-tile{flex:0 0 auto;width:clamp(118px,30vw,160px);display:block;min-width:0;color:inherit;text-decoration:none}
.hot-img{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--border)}
.hot-img img{width:100%;height:100%;object-fit:cover;display:block}
.hot-rank{position:absolute;top:0;left:0;min-width:26px;padding:3px 8px 4px;border-radius:0 0 12px 0;background:linear-gradient(135deg,#ff7a18,#ff1f3d);color:#fff;font-weight:800;font-size:13px;z-index:2}
.hot-t{display:block;margin-top:7px;font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hot-tile small,.top-tile small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.hot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px 12px}
.hot-grid .hot-tile{width:auto}
.top-tile{position:relative;flex:0 0 auto;width:clamp(150px,42vw,200px);padding-left:34px;display:block;color:inherit;text-decoration:none}
.top-num{position:absolute;left:0;bottom:36px;font-size:76px;line-height:.8;font-weight:900;letter-spacing:-4px;color:transparent;-webkit-text-stroke:2px #f1c27b;text-shadow:0 0 18px rgba(241,194,123,.25)}
.top-poster{display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--border)}
.top-poster img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- episode number list (no poster / name) ---------- */
.epgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px;margin-bottom:12px}
.epnum{position:relative;display:grid;place-items:center;height:50px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--text);font-weight:800;font-size:17px;text-decoration:none;transition:border-color .15s,transform .15s}
.epnum:hover,.epnum:active{border-color:var(--cyan);transform:translateY(-1px)}
.epnum.cur{background:var(--g1);border-color:transparent;color:#fff}
.epnum.prog{border-color:#f1c27b}
.epnum.done{color:var(--muted)}
.epnum.done::after{content:"";position:absolute;right:6px;top:6px;width:7px;height:7px;border-radius:50%;background:#37d67a}
.epgrid.in-reel{grid-template-columns:repeat(5,1fr)}
.ep-season{margin:8px 0 8px;font-size:13px;color:var(--text2);font-weight:700}

/* ---------- full-screen reel (episodes + Shorts) ---------- */
.reel{position:fixed;inset:0;z-index:120;background:#000;color:#fff;display:flex;justify-content:center;touch-action:none;overscroll-behavior:contain}
.reel-col{position:relative;width:100%;max-width:480px;height:100%;overflow:hidden;background:#000;touch-action:none}
.reel-stage{position:absolute;inset:0;display:grid;place-items:center}
.reel-stage .xwrap{width:100%;height:100%}
.reel-stage.go-up{animation:reel-up .28s ease-out}.reel-stage.go-down{animation:reel-down .28s ease-out}
@keyframes reel-up{from{transform:translateY(40px);opacity:.2}to{transform:none;opacity:1}}
@keyframes reel-down{from{transform:translateY(-40px);opacity:.2}to{transform:none;opacity:1}}
.reel-video{width:100%;height:100%;object-fit:contain;background:#000}
.reel-video.cover{object-fit:cover}
.reel-err{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;background:rgba(0,0,0,.85)}
.reel-err[hidden]{display:none}
.reel-tap{position:absolute;inset:0;z-index:2;background:none;border:0;padding:0}
.reel-pp{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);pointer-events:none}
.reel-pp[hidden],.reel-load[hidden],.reel-end[hidden]{display:none}
.reel-pp .ic{width:34px;height:34px;fill:#fff;stroke:none;margin-left:4px}
.reel-load{position:absolute;z-index:3;inset:0;display:grid;place-items:center;pointer-events:none}
.reel-top{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 18px;background:linear-gradient(rgba(0,0,0,.65),transparent)}
.reel-top .iconbtn{background:rgba(0,0,0,.45);color:#fff;border-radius:50%;flex:none}
.reel-top .iconbtn[hidden]{display:none}
.reel-ttl{flex:1;min-width:0;text-align:center;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel-bottom{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:40px 72px calc(14px + env(safe-area-inset-bottom)) 14px;background:linear-gradient(transparent,rgba(0,0,0,.78));pointer-events:none}
.reel-info{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.reel-info b{font-size:16px}.reel-info span,.reel-info p{font-size:13px;color:#e4e6ee}
.reel-info small,.reel-views{font-size:12px;color:#c9ccd8}
.reel-seek{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(0px + env(safe-area-inset-bottom));width:100%;height:18px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
.reel-seek[hidden]{display:none}
.reel-seek::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,.35)}
.reel-seek::-moz-range-track{height:3px;background:rgba(255,255,255,.35)}
.reel-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;margin-top:-4.5px}
.reel-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.reel-end{position:absolute;z-index:7;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:rgba(0,0,0,.82);text-align:center}
.reel-end p{font-size:17px;font-weight:700}

/* ---------- right-hand action rail ---------- */
.reel-rail{position:absolute;z-index:6;right:8px;top:50%;transform:translateY(-45%);display:flex;flex-direction:column;align-items:center;gap:18px}
.rail-btn{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;background:none;border:0;padding:0;min-width:48px}
.rail-btn .ic{width:42px;height:42px;padding:10px;border-radius:50%;background:rgba(0,0,0,.45);stroke-width:2;transition:transform .15s}
.rail-btn:active .ic{transform:scale(.88)}
.rail-btn.on[data-r=like] .ic{fill:#ff3b5c;stroke:#ff3b5c}
.rail-btn.on[data-r=save] .ic{fill:#f1c27b;stroke:#f1c27b}
.rail-n{font-size:11px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.8)}

/* ---------- comments / episodes bottom sheet ---------- */
.csheet-wrap{position:absolute;inset:0;z-index:20}
.csheet-back{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.csheet{position:absolute;left:0;right:0;bottom:0;height:68%;display:flex;flex-direction:column;background:#15161d;color:#fff;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.5);animation:cs-in .22s ease-out;touch-action:pan-y}
@keyframes cs-in{from{transform:translateY(100%)}to{transform:none}}
.cs-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.cs-head .iconbtn{color:#fff}
.cs-n{font-weight:500;color:#9a9db0;font-size:13px}
.cs-list{flex:1;overflow-y:auto;padding:12px 16px;touch-action:pan-y;overscroll-behavior:contain}
.cs-empty{text-align:center;color:#9a9db0;font-size:14px;padding:28px 10px}
.cs-item{display:flex;gap:10px;margin-bottom:14px}
.cs-item b{font-size:13px}.cs-item small{margin-left:8px;color:#8f92a0;font-size:11px}
.cs-item p{font-size:14px;line-height:1.4;margin-top:2px;overflow-wrap:anywhere;color:#e8e9f0}
.cs-av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--g1);font-weight:800;font-size:14px}
.cs-form{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);touch-action:auto}
.cs-in{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:20px;border:1px solid rgba(255,255,255,.15);background:#0d0e13;color:#fff;font-size:14px}
.cs-send{height:40px;padding:0 16px;border-radius:20px;background:var(--g1);color:#fff;font-weight:700;border:0}

@media(min-width:720px){.reel{background:#05060a}.reel-col{border-left:1px solid rgba(255,255,255,.08);border-right:1px solid rgba(255,255,255,.08)}}
@media(prefers-reduced-motion:reduce){.reel-stage.go-up,.reel-stage.go-down,.csheet{animation:none}}

/* Shorts grid: keep the view badge at the top so it never covers the title */
.shcard .vbadge{top:8px;left:8px;bottom:auto}
.cwrap .shcard .sh-t small{font-weight:400;color:#d8dae4}