/* ============================================================
   K Club — screen-specific components (tokens only)
   Extends ui.css for the non-Home screens.
   ============================================================ */

a{text-decoration:none;color:inherit}
.on-media{color:#fff !important}
[data-show]{cursor:pointer}

/* ---------- Auth / Onboarding ---------- */
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px var(--s6);text-align:center}
.auth .abrand{font-weight:800;font-size:22px;letter-spacing:.5px}
.auth .abrand b{color:var(--color-accent)}
.auth h1{font-size:24px;font-weight:800;margin-top:30px}
.auth .as{color:var(--color-text-secondary);font-size:14px;margin-top:8px}
.phoneinput{display:flex;gap:8px;width:100%;margin-top:24px}
.phoneinput .cc{height:52px;padding:0 14px;border-radius:var(--r-card);background:var(--color-surface);
  border:1px solid var(--color-line);display:flex;align-items:center;font-weight:600}
.phoneinput .pi{flex:1;height:52px;border-radius:var(--r-card);background:var(--color-surface);
  border:1px solid var(--color-line);padding:0 14px;color:var(--color-text);font-size:16px;
  font-family:var(--font-ui);outline:none}
.otp{display:flex;gap:10px;margin-top:26px}
.otp .d{width:46px;height:56px;border-radius:12px;background:var(--color-surface);
  border:1px solid var(--color-line);display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700}
.otp .d.f{border-color:var(--color-accent);box-shadow:var(--glow-accent)}
.resend{margin-top:18px;font-size:13px;color:var(--color-text-muted)}
.auth .btn{width:100%;justify-content:center;margin-top:26px;height:52px}
.langpick{display:flex;gap:8px;margin-top:24px;align-items:center}
.langpick .l{font-size:12px;color:var(--color-text-muted);margin-right:4px}
.biolink{margin-top:20px;font-size:13px;color:var(--color-accent);font-weight:600}
.bio{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:rgba(0,0,0,.62);backdrop-filter:blur(14px);
  text-align:center;padding:24px}
.bio.show{display:flex}
.bio .face{width:88px;height:88px;border-radius:24px;border:2px solid var(--color-accent);
  display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--color-accent);
  box-shadow:var(--glow-accent)}
.bio h2{color:#fff;font-size:18px;font-weight:700}
.bio p{color:rgba(255,255,255,.7);font-size:13px}

/* ---------- Title app bar ---------- */
.titlebar{height:54px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:0 var(--s4)}
.titlebar h2{font-size:var(--fs-headline);font-weight:800;flex:1}
.backbtn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--color-surface);border:1px solid var(--color-line);font-size:18px}

/* ---------- Explore ---------- */
.topbar2{display:flex;align-items:center;gap:10px;padding:4px var(--s4) 10px}
.searchbox{flex:1;height:42px;border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line);display:flex;align-items:center;gap:8px;padding:0 14px;
  color:var(--color-text-muted);font-size:14px}
.seg{display:flex;gap:6px;padding:0 var(--s4);overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg .s{height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line);color:var(--color-text-secondary);font-size:13px;font-weight:600;
  white-space:nowrap;display:flex;align-items:center}
.seg .s.on{background:var(--color-text);color:var(--color-bg);border-color:transparent}
.filterrow{display:flex;gap:8px;padding:12px var(--s4);overflow-x:auto;scrollbar-width:none}
.filterrow::-webkit-scrollbar{display:none}
.fchip{height:34px;padding:0 12px;border-radius:var(--r-pill);background:var(--color-surface-2);
  border:1px solid var(--color-line);color:var(--color-text-secondary);font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:6px;white-space:nowrap}
.fchip.on{border-color:var(--color-accent);color:var(--color-accent)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:6px var(--s4) 16px}
.grid .clip{width:auto}
.grid .clip .thumb{height:228px}

/* ---------- Search ---------- */
.searchfield{margin:4px var(--s4) 12px;height:46px;border-radius:var(--r-pill);
  background:var(--color-surface);border:1px solid var(--color-accent);display:flex;align-items:center;
  gap:10px;padding:0 16px;box-shadow:var(--glow-accent)}
.searchfield input{flex:1;background:none;border:none;outline:none;color:var(--color-text);
  font-size:15px;font-family:var(--font-ui)}
.searchfield .clearx{color:var(--color-text-muted)}
.lbl-row{display:flex;justify-content:space-between;align-items:center;padding:0 var(--s4);margin:12px 0 6px}
.lbl-row .t{font-size:13px;font-weight:700;color:var(--color-text-secondary)}
.lbl-row .c{font-size:12px;color:var(--color-accent)}
.sresult{display:flex;align-items:center;gap:12px;padding:8px var(--s4)}
.sresult .th{width:56px;height:56px;border-radius:10px;flex:0 0 auto}
.sresult .th.rnd{border-radius:50%}
.sresult .nm{font-size:14px;font-weight:600}
.sresult .ty{font-size:12px;color:var(--color-text-muted);margin-top:2px}
.sresult .go{margin-left:auto;color:var(--color-text-muted)}

/* ---------- Character page ---------- */
.cphero{position:relative;height:300px}
.cphero .art{position:absolute;inset:0}
.cphero .scrim{position:absolute;inset:0;background:var(--scrim)}
.cphero .back{position:absolute;top:46px;left:16px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.cphero .pinfo{position:absolute;left:var(--s4);right:var(--s4);bottom:var(--s4);display:flex;
  gap:14px;align-items:flex-end}
.cphero .pp{width:92px;height:92px;border-radius:18px;flex:0 0 auto;border:2px solid rgba(255,255,255,.5)}
.cphero h1{font-size:24px;font-weight:800;color:#fff}
.cphero .sub{color:rgba(255,255,255,.82);font-size:13px;margin-top:3px}
.cpactions{display:flex;gap:10px;padding:14px var(--s4) 0}
.cpactions .btn{flex:1;justify-content:center}
.statrow{display:flex;padding:16px var(--s4)}
.statrow .st{flex:1;text-align:center}
.statrow .st b{display:block;font-size:17px;font-weight:800}
.statrow .st span{font-size:11px;color:var(--color-text-muted)}
.statrow .st + .st{border-left:1px solid var(--color-line)}
.tabs{display:flex;gap:18px;padding:4px var(--s4) 0;border-bottom:1px solid var(--color-line)}
.tabs .tb{padding:10px 0;font-size:14px;font-weight:600;color:var(--color-text-muted);position:relative;white-space:nowrap}
.tabs .tb.on{color:var(--color-text)}
.tabs .tb.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--color-accent)}

/* ---------- Clip Play (player) ---------- */
.player{position:absolute;inset:0;background:#000;overflow:hidden}
.player .art{position:absolute;inset:0}
.player .botgrad{position:absolute;bottom:0;left:0;right:0;height:280px;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent)}
.player .topgrad{position:absolute;top:0;left:0;right:0;height:130px;
  background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)}
.player-top{position:absolute;top:46px;left:16px;right:16px;display:flex;align-items:center;gap:12px;
  color:#fff;z-index:3}
.player-top .pt-title{flex:1}
.player-top .pt-title b{font-size:14px;display:block}
.player-top .pt-title span{font-size:11px;color:rgba(255,255,255,.75)}
.cbfc-pill{position:absolute;top:92px;left:16px;z-index:3}
.player .center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px;
  color:#fff;z-index:3;opacity:.95}
.player-rail{position:absolute;right:14px;bottom:160px;display:flex;flex-direction:column;gap:18px;
  align-items:center;z-index:3;color:#fff}
.player-rail .ra{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px}
.player-rail .ra i{font-size:24px}
.player-controls{position:absolute;left:16px;right:16px;bottom:28px;z-index:3;color:#fff}
.pc-meta{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.pc-meta .cb{width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.pc-meta b{font-size:14px;display:block}.pc-meta span{font-size:11px;color:rgba(255,255,255,.75)}
.seek{height:4px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;margin:6px 0}
.seek i{position:absolute;left:0;top:0;bottom:0;width:42%;background:var(--color-accent);border-radius:2px}
.seek b{position:absolute;left:42%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;
  border-radius:50%;background:var(--color-accent)}
.pc-times{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.7)}
.pc-row{display:flex;align-items:center;gap:18px;font-size:12px;margin-top:10px}
.pc-row .sp{margin-left:auto}
.gatelink{position:absolute;bottom:96px;left:16px;z-index:3}
.gate{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;
  padding:24px;background:rgba(0,0,0,.5);backdrop-filter:blur(16px)}
.gate.show{display:flex}
.gate .card{background:var(--color-surface);border:1px solid var(--color-line);
  border-radius:var(--r-sheet);padding:26px 22px;text-align:center;width:100%}
.gate .crown{font-size:42px}
.gate h2{font-size:19px;font-weight:800;margin-top:12px}
.gate p{color:var(--color-text-secondary);font-size:13px;margin-top:8px;line-height:1.5}
.gate .btn{width:100%;justify-content:center;margin-top:18px}
.gate .later{margin-top:14px;font-size:13px;color:var(--color-text-muted)}

/* ---------- Profile ---------- */
.phead{display:flex;align-items:center;gap:14px;padding:10px var(--s4) 4px}
.phead .pa{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#6a5acd,#e8b23a);flex:0 0 auto}
.phead h1{font-size:19px;font-weight:800}
.phead .sub{font-size:12px;color:var(--color-text-muted);margin-top:4px}
.member{height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--color-exclusive);
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;margin-top:6px}
.coins-tile{margin:16px var(--s4);border-radius:var(--r-sheet);padding:16px;
  background:var(--color-exclusive-soft);border:1px solid var(--color-line);display:flex;align-items:center;gap:12px}
.coins-tile .big{font-size:22px;font-weight:800;color:var(--color-accent)}
.coins-tile .lab{font-size:11px;color:var(--color-text-muted)}
.coins-tile .go{margin-left:auto;color:var(--color-accent);font-weight:700;font-size:13px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--s4)}
.ptile{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--r-card);padding:14px}
.ptile .ic{font-size:20px;color:var(--color-accent)}
.ptile .t{font-size:14px;font-weight:700;margin-top:8px}
.ptile .s{font-size:11px;color:var(--color-text-muted);margin-top:2px}
.setlist{margin:18px 0 0}
.setrow{display:flex;align-items:center;gap:12px;padding:14px var(--s4);border-top:1px solid var(--color-line)}
.setrow .ic{width:22px;text-align:center;color:var(--color-text-secondary)}
.setrow .t{flex:1;font-size:14px}
.setrow .v{font-size:12px;color:var(--color-text-muted)}
.switch{width:42px;height:24px;border-radius:12px;background:var(--color-accent);position:relative;flex:0 0 auto}
.switch i{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff}
.switch.off{background:var(--color-line)}
.switch.off i{right:auto;left:2px}

/* ---------- Paywall ---------- */
.pw{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end}
.pw .bg{position:absolute;inset:0}
.pw .bgscrim{position:absolute;inset:0;background:linear-gradient(to top,var(--color-bg) 32%,rgba(0,0,0,.45))}
.pw .close{position:absolute;top:46px;right:16px;z-index:4;width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;display:flex;
  align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.pw .sheet{position:relative;z-index:3;padding:24px var(--s5) 26px;text-align:center}
.pw .crown{font-size:42px}
.pw h1{font-size:23px;font-weight:800;margin-top:8px}
.pw .subt{color:var(--color-text-secondary);font-size:13px;margin-top:6px}
.props{text-align:left;margin:18px auto;max-width:300px;display:flex;flex-direction:column;gap:11px}
.props .pr{display:flex;gap:10px;align-items:center;font-size:13px}
.props .pr .ck{color:var(--color-success);font-weight:800}
.plans{display:flex;flex-direction:column;gap:10px;margin:6px 0 16px}
.plan{border:1px solid var(--color-line);border-radius:var(--r-sheet);padding:14px 16px;display:flex;
  align-items:center;gap:12px;text-align:left;background:var(--color-surface)}
.plan.best{border-color:var(--color-accent);background:var(--color-exclusive-soft)}
.plan .rad{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-text-muted);flex:0 0 auto}
.plan.best .rad{border-color:var(--color-accent);background:radial-gradient(circle at center,var(--color-accent) 0 6px,transparent 7px)}
.plan .pn{flex:1}
.plan .pn b{font-size:15px}.plan .pn span{font-size:11px;color:var(--color-text-muted);display:block;margin-top:2px}
.plan .pp{font-weight:800;font-size:15px;text-align:right}
.badge-best{height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--color-accent);
  color:var(--color-on-accent);font-size:10px;font-weight:800;display:inline-flex;align-items:center;margin-left:6px}
.legal{font-size:10px;color:var(--color-text-muted);margin-top:14px;line-height:1.6}
.legal a{color:var(--color-text-secondary)}

/* ---------- Ads & sponsorship ---------- */
/* Sponsor lockup ("Presented by …") */
.sponsor{display:flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.85);margin-bottom:10px}
.sponsor .logo{height:20px;padding:0 8px;border-radius:6px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;font-weight:800;font-size:11px;letter-spacing:.5px}
/* Promoted / sponsored clip card */
.tag-ad{position:absolute;top:8px;left:8px;height:22px;padding:0 8px;border-radius:6px;background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.4);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;z-index:2}
.spon-by{font-size:10px;color:var(--color-text-muted);margin-top:5px}
/* Rewarded-ad entry card */
.rewardad{margin:var(--s2) var(--s4) 0;border-radius:var(--r-sheet);padding:14px 16px;
  background:var(--color-exclusive-soft);border:1px solid var(--color-line);display:flex;align-items:center;gap:12px}
.rewardad .ic{font-size:22px;color:var(--color-accent)}
.rewardad .tx{flex:1}
.rewardad .tx b{font-size:14px;font-weight:700;display:block}
.rewardad .tx span{font-size:12px;color:var(--color-text-muted)}
.rewardad .chev{color:var(--color-text-muted);font-size:20px}
/* Character / house cross-promo ad banner */
.adbanner{margin:var(--s2) var(--s4) 0;border-radius:var(--r-sheet);padding:10px;border:1px solid var(--color-line);
  background:var(--color-surface);display:flex;align-items:center;gap:12px}
.adbanner .th{width:62px;height:62px;border-radius:10px;flex:0 0 auto;position:relative}
.adbanner .tx{flex:1}
.adbanner .lbl{font-size:10px;font-weight:800;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px}
.adbanner .tt{font-size:14px;font-weight:700;margin-top:2px}
.adbanner .ds{font-size:12px;color:var(--color-text-muted);margin-top:1px}
.adbanner .cta{color:var(--color-accent);font-weight:700;font-size:13px;white-space:nowrap}

/* ---------- Discover (merged browse + search) ---------- */
.flabel{font-size:11px;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;
  letter-spacing:.5px;padding:0 var(--s4);margin:16px 0 8px}
.countrow{display:flex;align-items:center;justify-content:space-between;padding:14px var(--s4) 4px}
.countrow .c{font-size:12px;color:var(--color-text-muted)}
.countrow .sort{font-size:12px;color:var(--color-accent);font-weight:700}
/* compact filter bar */
.filterbar{display:flex;gap:8px;padding:10px var(--s4);overflow-x:auto;scrollbar-width:none;align-items:center}
.filterbar::-webkit-scrollbar{display:none}
.fbtn{height:34px;padding:0 14px;border-radius:var(--r-pill);background:var(--color-surface);
  border:1px solid var(--color-line);color:var(--color-text);font-size:13px;font-weight:700;
  display:flex;align-items:center;gap:6px;white-space:nowrap;flex:0 0 auto;font-family:var(--font-ui);cursor:pointer}
.fbtn .badge-n{background:var(--color-accent);color:var(--color-on-accent);border-radius:999px;font-size:10px;
  font-weight:800;padding:0 6px;height:16px;min-width:16px;display:inline-flex;align-items:center;justify-content:center}
/* filter bottom-sheet */
.fsheet{position:absolute;inset:0;z-index:7;display:none}
.fsheet.show{display:block}
.fsheet .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.fsheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:84%;display:flex;flex-direction:column;
  background:var(--color-bg);border-top:1px solid var(--color-line);border-radius:18px 18px 0 0}
.fsheet .grab{width:40px;height:4px;border-radius:2px;background:var(--color-line);margin:8px auto 0;flex:0 0 auto}
.fsheet .fhead{flex:0 0 auto;background:var(--color-bg);display:flex;align-items:center;
  justify-content:space-between;padding:12px var(--s4);border-bottom:1px solid var(--color-line)}
.fsheet .fhead h3{font-size:18px;font-weight:800}
.fsheet .fhead .reset{color:var(--color-accent);font-weight:700;font-size:13px;cursor:pointer}
.fsheet .filters{flex:1 1 auto;overflow-y:auto;padding-bottom:8px}
.fsheet .filters::-webkit-scrollbar{display:none}
.fsheet .ffoot{flex:0 0 auto;padding:14px var(--s4);background:var(--color-bg);border-top:1px solid var(--color-line)}
.fsheet .ffoot .btn{width:100%;justify-content:center;height:50px}

/* ---------- Forms (profile edit) ---------- */
.form{padding:4px var(--s4) 24px}
.field{margin-top:16px}
.field>label{display:block;font-size:12px;color:var(--color-text-secondary);font-weight:600;margin-bottom:6px}
.field input,.field select{width:100%;height:46px;border-radius:var(--r-card);background:var(--color-surface);
  border:1px solid var(--color-line);padding:0 14px;color:var(--color-text);font-size:15px;
  font-family:var(--font-ui);outline:none}
.field input:focus,.field select:focus{border-color:var(--color-accent)}
.row2{display:flex;gap:10px}
.row2>.field{flex:1;margin-top:16px}
.verified{color:var(--color-success);font-size:11px;font-weight:700;margin-left:6px}
.edit-ava{display:flex;align-items:center;gap:14px;padding:10px var(--s4) 0}
.edit-ava .pa{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#6a5acd,#e8b23a);flex:0 0 auto}
.edit-ava .ch{color:var(--color-accent);font-weight:700;font-size:13px}
.savebar{padding:16px var(--s4) 24px}
.savebar .btn{width:100%;justify-content:center;height:50px}

/* ---------- Fan Zone ---------- */
.fanhero{margin:10px var(--s4) 0;border-radius:var(--r-sheet);padding:16px;
  background:linear-gradient(120deg,var(--color-exclusive-soft),var(--color-surface));border:1px solid var(--color-line)}
.fanhero .lv{font-size:13px;color:var(--color-text-secondary)}
.fanhero .lv b{color:var(--color-accent)}
.fanhero .lvbar{height:8px;border-radius:4px;background:var(--color-surface-2);margin-top:10px;overflow:hidden}
.fanhero .lvbar i{display:block;height:100%;background:var(--color-accent)}
.mission{display:flex;align-items:center;gap:12px;padding:12px var(--s4);border-top:1px solid var(--color-line)}
.mission .mi{width:38px;height:38px;border-radius:10px;background:var(--color-exclusive-soft);color:var(--color-accent);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.mission .mt{flex:1}
.mission .mt b{font-size:14px;font-weight:700;display:block}
.mission .pbar2{height:6px;border-radius:3px;background:var(--color-surface-2);margin-top:7px;overflow:hidden}
.mission .pbar2 i{display:block;height:100%;background:var(--color-accent)}
.mission .rw{font-size:12px;font-weight:800;color:var(--color-accent);white-space:nowrap}
.lbrow{display:flex;align-items:center;gap:12px;padding:9px var(--s4)}
.lbrow .rk{width:20px;text-align:center;font-weight:800;color:var(--color-text-muted)}
.lbrow .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6a5acd,#e8b23a);flex:0 0 auto}
.lbrow .nm{flex:1;font-size:14px;font-weight:600}
.lbrow .pt{font-weight:800;color:var(--color-accent);font-size:13px}
.lbrow.me{background:var(--color-exclusive-soft)}

/* In-player video ad */
.adtop{position:absolute;top:46px;left:16px;right:16px;display:flex;align-items:center;gap:10px;z-index:3;color:#fff}
.ad-tag{height:22px;padding:0 9px;border-radius:6px;background:#fff;color:#000;font-size:11px;font-weight:800;
  display:flex;align-items:center}
.ad-skip{margin-left:auto;height:34px;padding:0 14px;border-radius:var(--r-pill);background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.4);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px}
.ad-reward{position:absolute;top:82px;left:16px;right:16px;z-index:3;display:flex;align-items:center;gap:8px;
  background:var(--color-exclusive-soft);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);
  padding:9px 14px;color:#fff;font-size:12px;font-weight:600}
.ad-bottom{position:absolute;left:16px;right:16px;bottom:30px;z-index:3;color:#fff}
.ad-advert{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ad-advert .lg{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.ad-advert b{font-size:15px;display:block}.ad-advert span{font-size:12px;color:rgba(255,255,255,.75)}
.ad-cta{width:100%;justify-content:center}
.ad-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.25);z-index:3}
.ad-progress i{display:block;height:100%;width:35%;background:var(--color-accent)}

/* ---------- Clip Play interactions ---------- */
@keyframes kenburns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.14) translate(-3%,-3%)}}
.player.playing .art{animation:kenburns 22s ease-in-out infinite alternate}
.vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.player-top,.player-controls,.player-rail,.cbfc-pill,.gatelink{transition:opacity .25s ease}
.player.ui-hidden .player-top,.player.ui-hidden .player-controls,.player.ui-hidden .player-rail,
.player.ui-hidden .cbfc-pill,.player.ui-hidden .gatelink{opacity:0;pointer-events:none}
.center{transition:opacity .2s ease;cursor:pointer}
.center.hidden{opacity:0;pointer-events:none}
.seek{cursor:pointer}
.player-rail .ra{cursor:pointer}
.player-rail .ra.on i{color:var(--color-accent)}
.pc-row span{cursor:pointer;user-select:none}
/* caption overlay */
.caption{position:absolute;left:24px;right:24px;bottom:150px;z-index:3;text-align:center;display:none}
.caption.show{display:block}
.caption .ln{display:inline-block;background:rgba(0,0,0,.6);color:#fff;padding:6px 12px;border-radius:8px;
  backdrop-filter:blur(4px)}
.caption .te{font-family:var(--font-te);font-size:15px;display:block}
.caption .en{font-size:12px;color:rgba(255,255,255,.85);display:block;margin-top:2px}
/* quality menu */
.qmenu{position:absolute;right:16px;bottom:96px;z-index:5;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:12px;padding:6px;display:none;min-width:130px;box-shadow:var(--shadow-1)}
.qmenu.show{display:block}
.qmenu .qi{padding:8px 12px;border-radius:8px;font-size:13px;color:var(--color-text);cursor:pointer;
  display:flex;justify-content:space-between;gap:12px}
.qmenu .qi.on{color:var(--color-accent)}
/* heart burst */
.burst{position:absolute;z-index:7;pointer-events:none;font-size:30px;color:var(--color-error);
  transform:translate(-50%,-50%);animation:burst .8s ease-out forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}
  20%{opacity:1}100%{transform:translate(-50%,-190%) scale(1.4);opacity:0}}
/* pre-roll rating card */
.preroll{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.92);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:30px;transition:opacity .5s ease}
.preroll.hide{opacity:0;pointer-events:none}
.preroll .rt{font-size:28px;font-weight:800;color:#fff;border:2px solid #fff;border-radius:10px;padding:6px 16px}
.preroll .adv{color:rgba(255,255,255,.82);font-size:13px;max-width:240px}
.preroll .cd{color:rgba(255,255,255,.55);font-size:12px;margin-top:6px}
/* toast */
.toast{position:absolute;left:50%;bottom:118px;transform:translateX(-50%);z-index:9;background:rgba(0,0,0,.82);
  color:#fff;padding:8px 16px;border-radius:999px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
.toast.show{opacity:1}