/* "See it on your TV": drawn Lion TV screens in a swipeable gallery (sizes in cqw = % of the screen width) */
.gtabs{direction:ltr;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-24px auto 34px;max-width:900px}
.gtabs button{font:700 14px var(--head);color:var(--soft);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .25s}
.gtabs button:hover{border-color:var(--or);color:var(--text)}
.gtabs button.on{background:var(--or);border-color:var(--or);color:#0B0A0C;box-shadow:0 0 18px rgba(255,122,26,.45)}
@media (max-width:640px){.gtabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding:2px 16px;margin:-12px -16px 22px;scroll-snap-type:x proximity}.gtabs::-webkit-scrollbar{display:none}.gtabs button{flex:none;scroll-snap-align:center}}

.gal{position:relative;max-width:1240px;margin:0 auto}
.gtrack{direction:ltr;display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:10px calc(50% - min(520px,44vw)) 26px;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch}
.gtrack::-webkit-scrollbar{display:none}
.gslide{flex:none;width:min(1040px,88vw);margin:0;scroll-snap-align:center;transition:opacity .4s,transform .4s;opacity:.35;transform:scale(.94)}
.gslide.cur{opacity:1;transform:none}
@media (max-width:640px){.gtrack{gap:14px;padding:6px 6vw 18px}.gslide{width:88vw}}
.gtv{border-radius:20px;padding:10px;background:#050506;border:1px solid var(--line);box-shadow:0 0 0 1px rgba(255,122,26,.18),0 30px 90px rgba(255,122,26,.18),0 24px 60px rgba(0,0,0,.6)}
@media (max-width:640px){.gtv{border-radius:12px;padding:5px}}
.gslide figcaption{text-align:center;margin-top:18px}
html[dir=rtl] .gslide figcaption{direction:rtl}
.gslide figcaption b{display:block;font:800 20px var(--head)}
.gslide figcaption span{display:block;font-size:15px;color:var(--mute);margin-top:4px;line-height:1.6}
.gnav{position:absolute;top:calc(50% - 60px);z-index:3;width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:rgba(21,19,23,.85);color:var(--text);font:400 30px/1 var(--head);cursor:pointer;transition:all .25s;backdrop-filter:blur(8px)}
.gnav:hover{border-color:var(--or);box-shadow:0 0 18px rgba(255,122,26,.4)}
.gnav.prev{left:12px}.gnav.next{right:12px}
@media (max-width:900px){.gnav{display:none}}
.gdots{display:flex;gap:8px;justify-content:center;margin-top:6px}
.gdots button{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:var(--line);cursor:pointer;transition:all .3s}
.gdots button.on{width:26px;background:var(--or);box-shadow:0 0 10px var(--or)}

/* ---------- the drawn screen ---------- */
.shot{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0B0A0C;container-type:inline-size;direction:ltr;text-align:left;font-family:'Outfit',sans-serif;color:var(--text)}
@media (max-width:640px){.shot{border-radius:8px}}
.shot:before{content:'';position:absolute;right:-12%;top:-35%;width:70%;height:95%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,122,26,.2),rgba(255,122,26,0));pointer-events:none}
.shot .live{position:absolute;left:4%;top:7%;font:800 1cqw 'Outfit',sans-serif;background:#E5372B;color:#fff;padding:.2cqw .7cqw;border-radius:.4cqw}
.shot .k{font:700 1.05cqw 'Outfit',sans-serif;letter-spacing:.2cqw;color:var(--or2)}
.shot .t{font:800 3.2cqw/1.08 'Outfit',sans-serif;margin:.9cqw 0}
.shot .d{font:500 1.15cqw/1.5 'Manrope',sans-serif;color:var(--mute)}

.g-top{position:absolute;left:3.5%;right:3.5%;top:4.5%;display:flex;align-items:center;gap:1.6cqw;z-index:2}
.g-logo{display:flex;align-items:center;gap:.6cqw;font:800 1.9cqw 'Outfit',sans-serif;letter-spacing:.2cqw}
.g-logo img{width:2.6cqw;height:2.6cqw}.g-logo i{font-style:normal;color:var(--or)}
.g-tabs{flex:1;display:flex;justify-content:center;gap:2.2cqw;font:600 1.25cqw 'Outfit',sans-serif;color:var(--soft)}
.g-tabs span{padding:.45cqw 1.3cqw;border-radius:999px}
.g-tabs .on{color:var(--or2);box-shadow:inset 0 0 0 .15cqw var(--or);background:rgba(255,122,26,.12)}
.g-ic{width:2.6cqw;height:2.6cqw;border-radius:50%;background:#1E1B21;border:.1cqw solid var(--line)}
.g-clock{font:800 1.6cqw 'Outfit',sans-serif}
.g-btns{display:flex;gap:1cqw;margin-top:1.8cqw}
.g-btns span{padding:.85cqw 2cqw;border-radius:.8cqw;font:800 1.2cqw 'Outfit',sans-serif;border:.1cqw solid var(--line);background:#151317}
.g-btns .pri{background:var(--or);color:#0B0A0C;border-color:var(--or);box-shadow:0 0 1.6cqw rgba(255,122,26,.55)}

/* home */
.g-hero{position:absolute;left:4%;top:17%;width:46%}
.g-pv{position:absolute;right:4%;top:15%;width:40%;aspect-ratio:16/9;border-radius:1cqw;border:.2cqw solid var(--or);box-shadow:0 0 2cqw rgba(255,122,26,.45);background:linear-gradient(150deg,#1B3557,#0D1B2A 50%,#3A1C0B);overflow:hidden}
.g-row{position:absolute;left:4%;right:4%}
.g-row.r1{top:51%}.g-row.r2{top:73%}
.g-h{font:700 1.25cqw 'Outfit',sans-serif;margin-bottom:.8cqw}
.g-cards{display:flex;gap:1.2cqw}
.cw{position:relative;width:13.4cqw;aspect-ratio:16/9;border-radius:.8cqw;background:linear-gradient(135deg,var(--a),var(--b));overflow:hidden}
.cw:first-child{box-shadow:0 0 0 .2cqw var(--or),0 0 1.6cqw rgba(255,122,26,.5)}
.cw i{position:absolute;left:0;bottom:0;height:.35cqw;background:var(--or)}
.mc{display:flex;align-items:center;justify-content:space-between;width:24cqw;padding:.8cqw 1.2cqw;border-radius:1cqw;background:#151317;border:.1cqw solid var(--line)}
.mc.on{border-color:var(--or);box-shadow:0 0 1.4cqw rgba(255,122,26,.45);background:#1E1B21}
.mt{display:flex;flex-direction:column;align-items:center;gap:.3cqw;width:6cqw}
.mt small{font:600 .9cqw 'Outfit',sans-serif;color:var(--soft)}
.cr{display:flex;align-items:center;justify-content:center;width:2.6cqw;height:2.6cqw;border-radius:50%;background:var(--c);font:800 .75cqw 'Outfit',sans-serif;color:#0B0A0C}
.mm{text-align:center}.mm strong{display:block;font:800 1.8cqw 'Outfit',sans-serif}
.mm small{font:700 .9cqw 'Outfit',sans-serif;color:var(--mute)}.mm small.lv,.sc small.lv{color:#FF5A4E}

/* live tv */
.g-live{position:absolute;left:3.5%;right:3.5%;top:14%;bottom:5%;display:flex;gap:1.4cqw}
.g-live .grp{width:17%;display:flex;flex-direction:column;gap:.5cqw}
.g-live .grp span{display:flex;justify-content:space-between;padding:.8cqw 1cqw;border-radius:.7cqw;font:600 1.15cqw 'Outfit',sans-serif;color:var(--soft)}
.g-live .grp small{color:var(--dim)}
.g-live .grp .on{background:rgba(255,122,26,.14);color:var(--or2);box-shadow:inset .25cqw 0 0 var(--or)}
.g-live .chl{width:38%;display:flex;flex-direction:column;gap:.6cqw}
.ch{display:flex;align-items:center;gap:1cqw;padding:.7cqw 1cqw;border-radius:.8cqw;background:#121014;border:.1cqw solid var(--line)}
.ch.on{border-color:var(--or);background:#1E1B21;box-shadow:0 0 1.4cqw rgba(255,122,26,.4)}
.ch .no{font:700 1cqw 'Outfit',sans-serif;color:var(--dim);width:2.4cqw}
.ch .lg{width:3.6cqw;height:2.4cqw;border-radius:.5cqw;background:linear-gradient(135deg,var(--c),#151317)}
.ch .nm{flex:1;font:700 1.15cqw 'Outfit',sans-serif;position:relative;padding-bottom:.7cqw}
.ch .nm small{display:block;font:500 .9cqw 'Manrope',sans-serif;color:var(--mute);margin-top:.15cqw}
.ch .nm i{position:absolute;left:0;bottom:0;height:.25cqw;border-radius:.2cqw;background:var(--or)}
.g-live .side{flex:1}
.pvs{position:relative;width:100%;aspect-ratio:16/9;border-radius:1cqw;border:.2cqw solid var(--or);background:linear-gradient(160deg,#16422A,#0B1F14 55%,#2A160B);box-shadow:0 0 2cqw rgba(255,122,26,.4);margin-bottom:1.4cqw}
.g-live .side .t{font-size:2.4cqw}
.g-live .bar,.g-seek{height:.35cqw;border-radius:.3cqw;background:var(--line);margin-top:1.2cqw;overflow:hidden}
.g-live .bar i,.g-seek i{display:block;height:100%;background:var(--or)}

/* movies */
.g-bd{position:absolute;right:0;top:0;width:62%;height:60%;background:linear-gradient(135deg,var(--a),var(--b));opacity:.55;-webkit-mask:linear-gradient(90deg,transparent,#000 45%),linear-gradient(0deg,transparent,#000 40%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 45%) ,linear-gradient(0deg,transparent,#000 40%);mask-composite:intersect}
.g-bd.full{width:75%;height:100%;opacity:.6}
.tags{display:flex;align-items:center;gap:.8cqw;font:600 1.1cqw 'Outfit',sans-serif;color:var(--soft)}
.tags .q{padding:.2cqw .7cqw;border-radius:.5cqw;border:.12cqw solid var(--soft);font-weight:800}
.tags .rt{padding:.2cqw .7cqw;border-radius:.5cqw;background:var(--or);color:#0B0A0C;font-weight:800}
.g-mhero{position:absolute;left:4%;top:16%;width:48%}
.g-mhero .t{font-size:3.6cqw}
.g-chips{position:absolute;left:4%;right:4%;top:46%;display:flex;gap:1cqw}
.g-chips span{padding:.6cqw 1.4cqw;border-radius:999px;border:.14cqw solid rgba(255,122,26,.55);font:700 1.1cqw 'Outfit',sans-serif;white-space:nowrap}
.g-chips .on{background:var(--or);color:#0B0A0C;box-shadow:0 0 1.4cqw rgba(255,122,26,.55)}
.g-grid{position:absolute;left:4%;right:4%;top:56%;display:flex;gap:1.3cqw}
.ps{position:relative;flex:none;width:11.4cqw;aspect-ratio:2/3;border-radius:.8cqw;background:linear-gradient(160deg,var(--a),var(--b));overflow:hidden;box-shadow:inset 0 0 0 .1cqw rgba(255,255,255,.06)}
.ps:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.75))}
.ps.on{box-shadow:0 0 0 .22cqw var(--or),0 0 1.8cqw rgba(255,122,26,.6);transform:scale(1.04)}
.ps b{position:absolute;left:.8cqw;right:.8cqw;bottom:1cqw;z-index:1;font:800 1.15cqw/1.1 'Outfit',sans-serif}
.ps em{position:absolute;left:0;top:0;z-index:1;font:800 1.2cqw 'Outfit',sans-serif;font-style:normal;color:var(--or2);background:rgba(11,10,12,.85);padding:.3cqw .7cqw;border-bottom-right-radius:.7cqw}
.ps u{position:absolute;right:.6cqw;top:.6cqw;z-index:1;text-decoration:none;font:800 .9cqw 'Outfit',sans-serif;background:var(--or);color:#0B0A0C;padding:.15cqw .5cqw;border-radius:.4cqw}
.ps.big{position:absolute;right:6%;top:14%;width:21cqw}

/* details */
.g-det{position:absolute;left:5%;top:12%;width:52%}
.g-det .t{font-size:4cqw}
.g-det .cast{font:500 1cqw 'Manrope',sans-serif;color:var(--mute);margin-top:1cqw}
.vh{font:700 1.1cqw 'Outfit',sans-serif;margin:2cqw 0 .8cqw;color:var(--soft)}
.ver{display:flex;gap:1cqw}
.ver span{display:flex;flex-direction:column;padding:.7cqw 1.4cqw;border-radius:.8cqw;border:.12cqw solid var(--line);background:#151317;font:800 1.15cqw 'Outfit',sans-serif}
.ver small{font:500 .85cqw 'Manrope',sans-serif;color:var(--mute);margin-top:.15cqw}
.ver .on{border-color:var(--or);box-shadow:0 0 1.4cqw rgba(255,122,26,.5);background:#1E1B21}

/* next episode */
.g-video{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 40%,var(--a),var(--b) 70%)}
.g-video:after{content:'';position:absolute;left:18%;top:28%;width:28%;height:44%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,140,.25),transparent)}
.g-osd{position:absolute;left:4%;right:4%;bottom:8%;display:flex;justify-content:space-between;font:700 1.2cqw 'Outfit',sans-serif;color:var(--soft)}
.g-seek{position:absolute;left:4%;right:4%;bottom:5%;margin:0}
.g-next{position:absolute;right:4%;bottom:15%;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 1.8cqw;border-radius:1.4cqw;background:rgba(18,16,20,.92);border:.15cqw solid var(--or);box-shadow:0 0 2.4cqw rgba(255,122,26,.45)}
.g-next .ring{width:5cqw;height:5cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--or) 0 72%,var(--line) 72%);position:relative}
.g-next .ring:before{content:'';position:absolute;inset:.45cqw;border-radius:50%;background:#121014}
.g-next .ring b{position:relative;font:800 1.7cqw 'Outfit',sans-serif}
.g-next .t{font-size:1.7cqw;margin:.4cqw 0}

/* football panel */
.dim{position:absolute;inset:0;background:rgba(5,5,6,.6);z-index:1}
.g-panel{position:absolute;left:27%;top:9%;width:46%;bottom:5%;z-index:2;border-radius:1.6cqw;background:linear-gradient(180deg,#1B171E,#121014);border:.15cqw solid rgba(255,122,26,.55);box-shadow:0 0 3cqw rgba(255,122,26,.35);padding:1.6cqw 2cqw;overflow:hidden}
.ph{display:flex;align-items:center;justify-content:space-between}
.ph .mt{flex-direction:row;width:auto;gap:.8cqw;font:800 1.4cqw 'Outfit',sans-serif}
.sc{text-align:center}.sc b{display:block;font:900 3cqw 'Outfit',sans-serif}.sc small{font:800 1cqw 'Outfit',sans-serif}
.g-panel .psec{display:flex;align-items:center;gap:1cqw;font:800 1cqw 'Outfit',sans-serif;letter-spacing:.15cqw;color:var(--or2);margin:1.4cqw 0 .9cqw}
.g-panel .psec i{flex:1;height:.1cqw;background:rgba(255,122,26,.3)}
.ev{display:grid;grid-template-columns:1fr 3.4cqw 1fr;align-items:center;margin-bottom:.7cqw}
.ev .mi{grid-column:2;justify-self:center;font:800 .95cqw 'Outfit',sans-serif;background:#2A262D;border-radius:999px;padding:.3cqw .6cqw}
.ev .tx{font:600 1.05cqw 'Outfit',sans-serif}
.ev.h .tx{grid-column:1;grid-row:1;text-align:right;padding-right:.8cqw}
.ev.a .tx{grid-column:3;grid-row:1;padding-left:.8cqw}
.ev .ic{display:none}
.st{display:grid;grid-template-columns:4cqw 1fr 4cqw;align-items:center;font:800 1.05cqw 'Outfit',sans-serif;margin-bottom:.9cqw}
.st span:last-of-type{text-align:right}
.st .lb{text-align:center;font-weight:600;color:var(--mute)}
.sb{grid-column:1/-1;height:.45cqw;border-radius:.3cqw;background:#38BDF8;margin-top:.4cqw;overflow:hidden}
.sb i{display:block;height:100%;background:var(--or)}

/* settings */
.g-set{position:absolute;right:0;top:0;bottom:0;width:34%;z-index:2;background:#151317;border-left:.1cqw solid var(--line);padding:2.4cqw 2cqw;box-shadow:-2cqw 0 4cqw rgba(0,0,0,.5)}
.g-set .sh{font:800 2.2cqw 'Outfit',sans-serif;margin-bottom:1.6cqw}
.si{padding:.9cqw 1.2cqw;border-radius:.8cqw;margin-bottom:.4cqw}
.si span{display:block;font:700 1.25cqw 'Outfit',sans-serif}
.si small{display:block;font:500 .9cqw 'Manrope',sans-serif;color:var(--mute);margin-top:.2cqw}
.si.on{background:rgba(255,122,26,.14);box-shadow:inset 0 0 0 .15cqw var(--or),0 0 1.4cqw rgba(255,122,26,.3)}

/* phone set-up */
.g-act{position:absolute;inset:0;display:flex;align-items:center;gap:5cqw;padding:0 6cqw}
.g-act .l{flex:1}
.g-act .t{font-size:3.6cqw}
.stp{display:flex;align-items:center;gap:1.2cqw;font:700 1.3cqw 'Outfit',sans-serif;margin-top:1.3cqw}
.stp span{width:3cqw;height:3cqw;border-radius:50%;display:flex;align-items:center;justify-content:center;border:.15cqw solid var(--or);font:800 1.2cqw 'Outfit',sans-serif}
.stp .on{background:var(--or);color:#0B0A0C;box-shadow:0 0 1.4cqw rgba(255,122,26,.6)}
.g-act .r{width:26cqw;text-align:center}
.g-act .qr{width:22cqw;height:22cqw;margin:0 auto;border-radius:1.6cqw;background:var(--text);padding:1.6cqw;display:grid;grid-template-columns:repeat(21,1fr);box-shadow:0 0 0 .2cqw var(--or),0 0 3cqw rgba(255,122,26,.5)}
.g-act .qr span{display:block}
.g-act .code{font:900 3cqw 'Outfit',sans-serif;letter-spacing:.4cqw;color:var(--or2);margin-top:1.6cqw;text-shadow:0 0 1.6cqw rgba(255,122,26,.5)}
.g-act .w{font:500 1.1cqw 'Manrope',sans-serif;color:var(--mute);margin-top:.6cqw}

/* the gallery sits in the hero, right under the buy buttons */
.hero-gal{position:relative;margin-top:54px}
.hero-gal .gtabs{margin:0 auto 26px}
@media (max-width:640px){.hero-gal{margin-top:36px}.hero-gal .gtabs{margin:0 -16px 18px}}
