/* UCA TV - the Tokyo design (neon city at night), the home page (/tv), the full-screen player and the admin library / moods. */

/* ===================================================================== Tokyo theme */
.tokyo{display:none}
.theme-tokyo{--bg:#05040d;--bg2:#0b0920;--fg:#f3f0ff;--mut:#a59fc8;--line:rgba(255,46,136,.14);--glass:rgba(16,12,38,.62);--glass2:rgba(34,22,70,.72);
--a:#ff2e88;--b:#00e5ff;--c:#8b5cff;--grad:linear-gradient(110deg,#ff2e88,#8b5cff 50%,#00e5ff)}
.theme-tokyo .aurora i:nth-child(1){background:#ff2e88;opacity:.2}.theme-tokyo .aurora i:nth-child(2){background:#00e5ff;opacity:.14}.theme-tokyo .aurora i:nth-child(3){background:#8b5cff;opacity:.18}
.theme-tokyo .tokyo{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.theme-tokyo .sky{position:absolute;inset:0;background:linear-gradient(180deg,#05040d 0%,#0d0726 55%,#2a0b3d 85%,#41104a 100%);opacity:.9}
.theme-tokyo .city{position:absolute;left:0;right:0;bottom:0;width:100%;height:22vh;opacity:.9;fill:#06040f;filter:drop-shadow(0 -2px 14px rgba(255,46,136,.35))}
.theme-tokyo .sign{position:absolute;font-style:normal;font-weight:700;writing-mode:vertical-rl;letter-spacing:.2em;font-size:clamp(14px,1.6vw,22px);
color:#fff;text-shadow:0 0 6px var(--a),0 0 18px var(--a),0 0 40px var(--a);opacity:.55;animation:flick 7s infinite}
.theme-tokyo .s1{right:3vw;bottom:24vh}
.theme-tokyo .s2{left:2.4vw;bottom:30vh;text-shadow:0 0 6px var(--b),0 0 18px var(--b),0 0 40px var(--b);animation-delay:2.3s}
.theme-tokyo .s3{right:16vw;bottom:33vh;font-size:clamp(20px,2.2vw,32px);text-shadow:0 0 6px #ffd23f,0 0 18px #ffb703;animation-delay:4.1s}
@keyframes flick{0%,19%,21%,62%,64%,100%{opacity:.6}20%,63%{opacity:.15}}
.theme-tokyo .rainfx{position:absolute;inset:-20% 0 0;background-image:repeating-linear-gradient(105deg,transparent 0 22px,rgba(160,200,255,.07) 22px 23px,transparent 23px 61px);
background-size:300px 300px;animation:rain 1.2s linear infinite;opacity:.6}
@keyframes rain{to{background-position:-60px 300px}}
.theme-tokyo .top{background:rgba(5,4,13,.62);border-bottom:1px solid rgba(255,46,136,.22);box-shadow:0 1px 0 rgba(0,229,255,.12)}
.theme-tokyo .brand{letter-spacing:.04em}.theme-tokyo .brand b{filter:drop-shadow(0 0 8px rgba(255,46,136,.7))}
.theme-tokyo .logo{background:linear-gradient(135deg,#ff2e88,#00e5ff);box-shadow:0 0 18px #ff2e88,0 0 40px -6px #00e5ff}
.theme-tokyo .btn{background:linear-gradient(110deg,#ff2e88,#8b5cff);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 10px 30px -8px #ff2e88}
.theme-tokyo .btn:hover{box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 26px #ff2e88,0 0 50px -10px #00e5ff}
.theme-tokyo .btn.ghost{background:rgba(0,229,255,.06);box-shadow:0 0 0 1px rgba(0,229,255,.45) inset;color:#dffbff}
.theme-tokyo .btn.danger{background:linear-gradient(120deg,#ff3d6e,#ff7a59)}
.theme-tokyo .glass{border:1px solid rgba(139,92,255,.18)}
.theme-tokyo .kicker{color:#00e5ff;text-shadow:0 0 10px rgba(0,229,255,.6)}
.theme-tokyo .shine{background:none;color:#fff;-webkit-text-fill-color:#fff;animation:none;text-shadow:0 0 4px #fff,0 0 14px #ff2e88,0 0 34px #ff2e88,0 0 70px #8b5cff}
.neon{color:#fff;text-shadow:0 0 4px #fff,0 0 12px var(--a),0 0 30px var(--a),0 0 60px var(--c)}
.theme-tokyo .face{background:linear-gradient(150deg,rgba(255,46,136,.35),rgba(0,229,255,.16));box-shadow:0 0 30px -6px #ff2e88;border-color:rgba(255,255,255,.25)}
.theme-tokyo .plan.hot{background:linear-gradient(160deg,rgba(255,46,136,.28),rgba(0,229,255,.1));box-shadow:0 0 0 1px rgba(255,46,136,.6) inset,0 0 60px -20px #ff2e88}
.theme-tokyo .admtabs a.on,.theme-tokyo .chip.on,.theme-tokyo .pill.hot{background:linear-gradient(110deg,#ff2e88,#8b5cff)}
.theme-tokyo .ico{background:linear-gradient(135deg,#ff2e88,#00e5ff);box-shadow:0 0 24px -4px #ff2e88}

/* ===================================================================== home (/tv) */
.homepage main{max-width:none;padding:0}
.homepage footer{margin-top:20px}
.billboard{position:relative;height:min(78vh,760px);min-height:440px;overflow:hidden;margin-bottom:-90px}
.bb-media{position:absolute;inset:0}
.bb-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.bb-layer.in{opacity:1}
.bb-layer img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-out forwards}
.bb-layer img.logo{object-fit:contain;padding:12% 8% 22% 50%;animation:none;filter:drop-shadow(0 0 40px rgba(255,46,136,.5))}
@keyframes kb{from{transform:scale(1.12) translate3d(1.5%,1%,0)}to{transform:scale(1) translate3d(0,0,0)}}
.bb-shade{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(5,4,13,.85) 32%,rgba(5,4,13,.25) 62%,transparent),linear-gradient(0deg,var(--bg) 0%,transparent 40%)}
.billboard .rain{position:absolute;inset:0;background-image:repeating-linear-gradient(100deg,transparent 0 28px,rgba(180,210,255,.06) 28px 29px,transparent 29px 70px);animation:rain 1s linear infinite;mix-blend-mode:screen}
.bb-copy{position:absolute;left:clamp(16px,4vw,64px);bottom:150px;max-width:640px;opacity:0;transform:translateY(20px)}
.bb-copy.in{opacity:1;transform:none;transition:opacity .8s ease .2s,transform .8s cubic-bezier(.2,.8,.2,1) .2s}
.bb-copy h1{font-size:clamp(34px,6vw,76px);margin:0 0 10px;line-height:1}
.bb-meta{color:#d8d2ff;margin:0 0 10px;font-size:15px}
.bb-copy .lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#cfc9ef}
.bb-dots{position:absolute;right:clamp(16px,4vw,64px);bottom:160px;display:flex;gap:8px}
.bb-dots button{width:26px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer}
.bb-dots button.on{background:var(--a);box-shadow:0 0 10px var(--a)}
.billboard.empty{height:420px;margin-bottom:0}
.homebar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:0 clamp(16px,4vw,64px);margin-bottom:10px}
.homebar .chips{width:auto}.homebar input{max-width:260px;margin-left:auto}
.home .upsell{margin:10px clamp(16px,4vw,64px)}
.home .empty{margin:20px clamp(16px,4vw,64px)}
.shelves{position:relative;z-index:2;padding-bottom:40px}
.row{margin:22px 0 6px;animation:rowin .7s both;animation-delay:var(--d)}
@keyframes rowin{from{opacity:0;transform:translateY(24px)}}
.row h2{font-size:20px;margin:0 0 10px;padding:0 clamp(16px,4vw,64px);font-weight:600}
.scroller{position:relative}
.track{display:flex;gap:14px;overflow-x:auto;padding:14px clamp(16px,4vw,64px) 22px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.arrow{position:absolute;top:14px;bottom:22px;width:48px;z-index:3;border:0;cursor:pointer;color:#fff;font-size:34px;background:linear-gradient(90deg,rgba(5,4,13,.9),transparent);opacity:0;transition:opacity .2s}
.arrow.r{right:0;background:linear-gradient(270deg,rgba(5,4,13,.9),transparent)}.arrow.l{left:0}
.scroller:hover .arrow{opacity:1}
.card{flex:0 0 auto;position:relative;border:0;padding:0;cursor:pointer;color:var(--fg);text-align:left;border-radius:14px;background:var(--glass);scroll-snap-align:start;
transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;font:inherit}
.card:hover,.card:focus-visible{transform:translateY(-6px) scale(1.06);z-index:2;outline:none;box-shadow:0 0 0 2px #fff inset,0 18px 40px -12px var(--a),0 0 30px -8px var(--b)}
.card.title,.card.chan{width:clamp(220px,19vw,300px);aspect-ratio:16/9;overflow:hidden}
.card .art{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,46,136,.25),rgba(0,229,255,.1))}
.card .art img{width:100%;height:100%;object-fit:cover}.card.chan .art img{object-fit:contain;width:62%;height:62%}
.card .art b{font-size:36px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(transparent,rgba(5,4,13,.95))}
.card .cap b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .cap small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .bar{display:block;height:3px;background:rgba(255,255,255,.18);border-radius:2px;margin-top:6px;overflow:hidden}.card .bar i{display:block;height:100%;background:var(--grad)}
.card .tag{position:absolute;top:8px;left:8px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.6);z-index:1}
.card .tag.live{background:#ff2e55;box-shadow:0 0 12px #ff2e55}.card .tag.lock{left:auto;right:8px}
.card.chan.down{opacity:.5}
.card.mood{width:clamp(280px,27vw,420px);aspect-ratio:2/1;overflow:hidden;background:linear-gradient(125deg,var(--c1),var(--c2))}
.card.mood::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.25),transparent 50%),linear-gradient(0deg,rgba(5,4,13,.75),transparent 70%)}
.mood-pics{position:absolute;right:-10px;top:12px;bottom:12px;width:60%;perspective:600px}
.mood-pics img{position:absolute;top:8%;height:84%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;right:calc(var(--j) * 22%);
transform:rotateY(-18deg) translateZ(calc(var(--j) * -30px));box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .5s}
.card.mood:hover .mood-pics img{transform:rotateY(-6deg) translateX(calc(var(--j) * -14px))}
.mood-copy{position:absolute;left:18px;bottom:16px;z-index:1;max-width:62%}
.mood-copy small{text-transform:uppercase;letter-spacing:.14em;font-size:11px;opacity:.9}
.mood-copy b{display:block;font-size:clamp(20px,2vw,28px);line-height:1.1;text-shadow:0 0 18px rgba(255,255,255,.5)}
.mood-copy span{display:block;font-size:13px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noscroll{overflow:hidden}

/* details */
.modal{position:fixed;inset:0;z-index:40;background:rgba(3,2,10,.78);backdrop-filter:blur(6px);display:grid;place-items:start center;overflow-y:auto;padding:40px 12px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.md-box{position:relative;width:min(880px,100%);border-radius:20px;overflow:hidden;background:var(--bg2);box-shadow:0 0 0 1px rgba(255,46,136,.25),0 40px 120px -20px #000;animation:pop .35s cubic-bezier(.2,.8,.2,1)}
.md-hero{position:relative;aspect-ratio:16/8;background:#0b0920}.md-hero img{width:100%;height:100%;object-fit:cover}
.md-shade{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg2),transparent 70%)}
.md-copy{position:absolute;left:30px;right:30px;bottom:20px}.md-copy h2{font-size:clamp(28px,4vw,46px);margin:0 0 12px}
.md-body{padding:6px 30px 30px}.md-body h3{margin:18px 0 10px}
.md-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:18px;cursor:pointer}
.md-item{display:flex;align-items:center;gap:14px;width:100%;border:0;background:none;color:var(--fg);padding:10px;border-radius:12px;cursor:pointer;text-align:left;font:inherit}
.md-item:hover{background:var(--glass2)}.md-item span{width:22px;color:var(--mut)}
.md-item img,.md-item i{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--glass2);flex:none}
.md-item small{display:block;color:var(--mut)}

/* the full-screen player */
.fullplayer{position:fixed;inset:0;z-index:50;background:#000;animation:fade .3s}
.fullplayer video{width:100%;height:100%;background:#000}
.fp-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:14px;padding:16px 20px 40px;background:linear-gradient(rgba(0,0,0,.75),transparent);opacity:0;transition:opacity .3s}
.fullplayer:hover .fp-top{opacity:1}
.fp-top small{display:block;color:var(--b);font-size:12px;letter-spacing:.1em;text-transform:uppercase}.fp-top b{font-size:20px}
.fp-acts{margin-left:auto;display:flex;gap:8px}
.fp-btn{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer}.fp-btn:hover{background:var(--a)}
.fp-msg{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;font-size:18px;background:rgba(5,4,13,.8)}
.fp-spin{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:var(--a);opacity:0;animation:rot 1s linear infinite;pointer-events:none}
.fp-spin.on{opacity:1}
.fp-upnext{position:absolute;right:30px;bottom:90px;width:340px;padding:20px;border-radius:16px;background:rgba(10,8,28,.92);box-shadow:0 0 0 1px rgba(255,46,136,.4),0 0 40px -10px #ff2e88;animation:pop .4s}
.fp-upnext small{color:var(--b);text-transform:uppercase;letter-spacing:.12em;font-size:12px}.fp-upnext b{display:block;font-size:20px;margin:4px 0}.fp-upnext span{color:var(--mut);font-size:13px}
.fp-upnext div{display:flex;gap:8px;margin-top:12px}.fp-upnext em{position:absolute;top:16px;right:20px;font-style:normal;font-size:22px;font-weight:700;color:var(--a)}

/* admin: library and moods */
.imgs{display:flex;gap:14px;margin:10px 0}.imgs figure{margin:0}.imgs img{height:140px;border-radius:10px;display:block}.imgs figcaption{font-size:12px;color:var(--mut)}
.moodgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:14px 0}
.moodcard,.moodhero{position:relative;display:flex;align-items:flex-end;aspect-ratio:2/1;border-radius:16px;overflow:hidden;color:#fff;background:linear-gradient(125deg,var(--c1),var(--c2));padding:16px}
.moodcard:hover{text-decoration:none;transform:translateY(-3px)}
.moodcard img,.moodhero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.moodcard div,.moodhero div{position:relative}.moodcard b,.moodhero b{display:block;font-size:22px}.moodcard span,.moodhero span{font-size:13px;opacity:.9}
.moodhero{aspect-ratio:auto;height:160px;margin-bottom:16px}
.moodlist{list-style:none;padding:0;margin:0}.moodlist li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.moodlist img{width:64px;aspect-ratio:16/9;object-fit:cover;border-radius:6px}.moodlist b{flex:1}.moodlist small{color:var(--mut)}.moodlist form{margin:0}
.handle{width:22px;color:var(--mut)}.picks{max-height:420px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.upbar{position:relative;height:28px;border-radius:14px;background:var(--glass2);overflow:hidden}
.upbar i{position:absolute;inset:0 auto 0 0;background:var(--grad);width:0;transition:width .3s}
.upbar span{position:relative;display:block;text-align:center;font-size:13px;line-height:28px}

@media (max-width:700px){.billboard{height:70vh}.bb-copy{bottom:120px}.homebar input{margin-left:0;max-width:none}
.card.title,.card.chan{width:62vw}.card.mood{width:84vw}.fp-upnext{left:12px;right:12px;width:auto}.fp-top{opacity:1}}
.track{scroll-padding-inline:clamp(16px,4vw,64px)}
.mood-copy{display:flex;flex-direction:column;gap:2px}
.homepage.theme-tokyo .city{opacity:.28}.homepage.theme-tokyo .sign{opacity:.3}