/* VYRE Cast broadcast graphics. Drawn on a 1920x1080 stage; OBS shows it with a transparent background.
   Used by overlay.html (OBS) and by the control panel's live preview. */
.gfx{--navy:#060b18;--navy2:#0b1430;--panel:rgba(7,13,30,.94);--line:rgba(120,170,255,.28);--ink:#eef3fb;--muted:#9fb0c8;--orange:#ff7a1a;--gold:#f5b938;--win:#22c55e;--loss:#ef4444;
  --fd:"Russo One","Chakra Petch",sans-serif;--fl:"Rajdhani","Chakra Petch",sans-serif;
  position:relative;width:1920px;height:1080px;overflow:hidden;color:var(--ink);font-family:var(--fl);-webkit-font-smoothing:antialiased}
.gfx *{box-sizing:border-box}
.gfx img{display:block}

/* ---------- team logo (picture, or initials when there isn't one) ---------- */
.gfx .lg{display:grid;place-items:center;overflow:hidden}
.gfx .lg img{width:100%;height:100%;object-fit:contain}
.gfx .lg i{font:400 0.42em/1 var(--fd);font-style:normal;color:#fff;letter-spacing:.02em}
.gfx .lg.ini{border-radius:50%;background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 75%,#fff 10%),color-mix(in srgb,var(--c) 45%,#000));box-shadow:inset 0 0 0 3px rgba(255,255,255,.18)}

/* ---------- scorebug ---------- */
.gfx .bug{position:absolute;top:22px;left:50%;transform:translate(-50%,-160%);transition:transform .55s cubic-bezier(.2,.9,.25,1.05);filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.gfx .bug.on{transform:translate(-50%,0)}
.gfx .bug-row{display:flex;align-items:stretch;height:74px}
.gfx .bug-t{display:flex;align-items:center;background:linear-gradient(180deg,#101b3a,#070d1f);position:relative}
.gfx .bug-t.a{clip-path:polygon(22px 0,100% 0,100% 100%,0 100%);padding-left:26px}
.gfx .bug-t.b{clip-path:polygon(0 0,calc(100% - 22px) 0,100% 100%,0 100%);padding-right:26px;flex-direction:row-reverse}
.gfx .bug-t::after{content:"";position:absolute;bottom:0;left:0;right:0;height:5px;background:var(--c)}
.gfx .bug-t .lg{width:58px;height:58px;margin:0 14px;font-size:58px}
.gfx .bug-name{width:270px;font:400 30px/1 var(--fd);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfx .bug-t.b .bug-name{text-align:right}
.gfx .bug-ser{display:grid;place-items:center;width:70px;align-self:stretch;background:var(--c);font:400 44px/1 var(--fd);color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.gfx .bug-mid{width:200px;display:grid;place-items:center;align-content:center;gap:2px;background:linear-gradient(180deg,#0a1226,#03060f);border-left:2px solid rgba(255,255,255,.06);border-right:2px solid rgba(255,255,255,.06)}
.gfx .bug-sc{font:400 34px/1 var(--fd);letter-spacing:.02em;display:flex;gap:10px;align-items:center}
.gfx .bug-sc s{text-decoration:none;color:var(--muted);font-size:24px}
.gfx .bug-sc b{font-weight:400;min-width:56px;text-align:center;transition:color .3s}
.gfx .bug-sc b.lead{color:#fff}.gfx .bug-sc b.trail{color:#c5cfdf}
.gfx .bug-sc b.bump{animation:gfxBump .6s}
@keyframes gfxBump{0%{transform:scale(1)}35%{transform:scale(1.35);color:var(--gold)}100%{transform:scale(1)}}
.gfx .bug-md{font:700 13px/1 var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gfx .bug-tab{margin:0 auto;width:max-content;max-width:740px;display:flex;align-items:center;gap:14px;padding:6px 26px 7px;background:linear-gradient(180deg,#04070f,#0b1430);clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,16px 100%);
  font:700 15px/1 var(--fl);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.gfx .bug-tab b{color:var(--orange);font-weight:700}
.gfx .bug-tab i{width:5px;height:5px;background:var(--orange);transform:rotate(45deg)}

/* ---------- full-screen scenes ---------- */
.gfx .scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s;
  background:var(--bgs,none) center/cover no-repeat,radial-gradient(1200px 700px at 15% 50%,color-mix(in srgb,var(--ca) 22%,transparent),transparent 70%),radial-gradient(1200px 700px at 85% 50%,color-mix(in srgb,var(--cb) 22%,transparent),transparent 70%),
  linear-gradient(160deg,#081127,#03060f 60%,#060b18)}
.gfx .scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,170,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%)}
.gfx .scene::after{content:"";position:absolute;left:-10%;right:-10%;top:47%;height:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--orange) 70%,transparent),transparent);opacity:.35;transform:rotate(-4deg)}
.gfx .scene.on{opacity:1;visibility:visible;transition:opacity .45s}
.gfx .scene > *{position:relative;z-index:1}
.gfx .sc-head{position:absolute;top:64px;left:0;right:0;text-align:center}
.gfx .sc-kick{font:700 20px var(--fl);letter-spacing:.42em;text-transform:uppercase;color:var(--orange)}
.gfx .sc-title{font:400 76px/1.05 var(--fd);letter-spacing:.04em;text-transform:uppercase;margin-top:8px;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.gfx .sc-sub{display:inline-flex;align-items:center;gap:16px;margin-top:14px;font:600 24px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gfx .sc-sub .lg{width:40px;height:40px;font-size:40px}
.gfx .sc-sub b{font:400 30px var(--fd);color:#fff;letter-spacing:.04em}
.gfx .sc-foot{position:absolute;bottom:52px;left:0;right:0;display:flex;justify-content:center;gap:20px;align-items:center;font:700 18px var(--fl);letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.gfx .sc-foot img{height:40px;width:auto}
/* items fly in one after another when a scene opens */
.gfx .scene.on.settled .fly{animation:none}
.gfx .scene.on .fly{animation:gfxIn .6s cubic-bezier(.2,.9,.25,1.05) both;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes gfxIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- intro: team vs team ---------- */
.gfx .in-wrap{position:absolute;inset:0;display:grid;grid-template-columns:1fr 260px 1fr;align-items:center;padding:120px 140px 60px}
.gfx .in-team{display:grid;justify-items:center;gap:22px;text-align:center}
.gfx .in-team .lg{width:340px;height:340px;font-size:340px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.gfx .in-name{font:400 64px/1.05 var(--fd);text-transform:uppercase;letter-spacing:.03em;max-width:640px}
.gfx .in-bar{width:220px;height:6px;background:var(--c);box-shadow:0 0 20px var(--c)}
.gfx .in-rec{font:600 24px var(--fl);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gfx .in-rec b{color:#fff;font-family:var(--fd);font-weight:400;letter-spacing:.04em}
.gfx .in-vs{display:grid;justify-items:center;gap:12px}
.gfx .in-vs b{font:400 130px/1 var(--fd);background:linear-gradient(180deg,#fff,#9fb7da);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(47,140,255,.5))}
.gfx .in-vs span{font:700 22px var(--fl);letter-spacing:.32em;color:var(--orange);text-transform:uppercase}
.gfx .in-vs em{font:600 22px var(--fl);font-style:normal;letter-spacing:.18em;color:#e6edf7;text-transform:uppercase;white-space:nowrap}

/* ---------- map selection + veto ---------- */
.gfx .sc-intro{--bgs:var(--bg-intro,var(--bg-all,none))}.gfx .sc-player{--bgs:var(--bg-player,var(--bg-all,none))}
.gfx .sc-maps{--cut:20px}
.gfx .sc-maps::after{display:none}
.gfx .sc-maps{background-image:var(--bg-maps,var(--bg-all,none)),
  radial-gradient(900px 600px at 8% 30%,color-mix(in srgb,var(--ca) 38%,transparent),transparent 70%),radial-gradient(900px 600px at 92% 30%,color-mix(in srgb,var(--cb) 38%,transparent),transparent 70%),
  radial-gradient(1400px 260px at 50% 104%,rgba(120,170,255,.28),transparent 70%),radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 15%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 40% 8%,#cfe2ff,transparent),radial-gradient(1px 1px at 85% 55%,#fff,transparent),linear-gradient(180deg,#040814,#070d1f 55%,#02040a);background-size:cover;background-position:center}
/* metallic frame with a coloured inner line (team colour of whoever picked it) */
.gfx .mx-cw{position:relative;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--gl) 75%,transparent)) drop-shadow(0 16px 30px rgba(0,0,0,.6))}
.gfx .mx-card,.gfx .mx-in,.gfx .mx-body,.gfx .mx-bar,.gfx .mx-bar-in{clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
.gfx .mx-card,.gfx .mx-bar{padding:4px;background:linear-gradient(155deg,#f2f6fb,#8a97ad 18%,#2a3449 40%,#141b2b 55%,#9aa7bc 78%,#eef3f9)}
.gfx .mx-in{height:100%;padding:3px;background:var(--pg)}
.gfx .mx-body{height:100%;display:grid;grid-template-rows:44px 1fr 56px;background:#070c18}
.gfx .mx-row{position:absolute;left:58px;right:58px;top:262px;height:470px;display:flex;justify-content:center;gap:22px}
.gfx .mx-row .mx-cw{flex:0 1 340px;min-width:0}
.gfx .mx-row .mx-card{height:100%}
.gfx .mx-hd{display:grid;place-items:center;font:700 20px var(--fl);letter-spacing:.3em;text-transform:uppercase;color:#4fd2ff;background:linear-gradient(180deg,#0c1426,#060a14)}
.gfx .mx-cw.sel .mx-hd{color:#8fdcff}
.gfx .mx-pic{position:relative;overflow:hidden}
.gfx .mx-pic img,.gfx .mx-pic .none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gfx .mx-pic .none{background:linear-gradient(160deg,#1b2c5e,#070d1f)}
.gfx .mv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.gfx .mv.ok{opacity:1}
.gfx .mx-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(3,6,15,.55) 58%,rgba(3,6,15,.96))}
.gfx .mx-txt{position:absolute;z-index:1;left:10px;right:10px;bottom:16px;display:grid;justify-items:center;gap:4px;text-align:center}
.gfx .mx-emb{width:58px;height:58px;color:#fff;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gl) 90%,transparent))}
.gfx .mx-emb svg{width:100%;height:100%}
.gfx .mx-txt b{font:400 38px/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 10px #000}
.gfx .mx-txt small{font:600 20px var(--fl);letter-spacing:.18em;text-transform:uppercase;color:#d4dceb}
.gfx .mx-ft{display:flex;align-items:center;justify-content:center;font:700 20px var(--fl);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#0f1729,#080d1a);border-top:1px solid rgba(255,255,255,.1);white-space:nowrap;overflow:hidden}
.gfx .mx-ft b{font-weight:700}
.gfx .mx-ft.muted{color:var(--muted)}
.gfx .mx-ft.sel{background:linear-gradient(90deg,#4b2bd6,#2f6bff 60%,#4b2bd6);letter-spacing:.24em;font-size:24px;text-shadow:0 0 12px rgba(255,255,255,.4)}
.gfx .mx-ft.done{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 55%,#070c18),#0b1222)}
.gfx .mx-cw.sel{--gl:#5b6bff}
/* top: chrome title and the two teams */
.gfx .mx-head{position:absolute;top:92px;left:0;right:0;text-align:center}
.gfx .mx-title{font:400 96px/1 var(--fd);text-transform:uppercase;letter-spacing:.01em;background:linear-gradient(180deg,#ffffff 0%,#e6edf7 38%,#8796ad 50%,#f6f9fc 66%,#b3c0d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 1px #0a1430) drop-shadow(0 3px 0 #1a2a4a) drop-shadow(0 0 18px rgba(47,140,255,.55))}
.gfx .mx-sub{display:inline-flex;align-items:center;gap:18px;margin-top:6px;font:700 26px var(--fl);letter-spacing:.42em;text-transform:uppercase;color:#e6edf7}
.gfx .mx-sub i,.gfx .mx-status i{width:120px;height:2px;background:linear-gradient(90deg,transparent,#36c9ff)}
.gfx .mx-sub i:last-child,.gfx .mx-status i:last-child{background:linear-gradient(90deg,#36c9ff,transparent)}
.gfx .mx-side{position:absolute;top:96px;width:450px;height:104px;display:flex;align-items:center;gap:18px;padding:0 44px;background:linear-gradient(180deg,rgba(14,22,42,.92),rgba(4,8,18,.92));
  border-top:3px solid var(--tc);border-bottom:2px solid rgba(255,255,255,.12);box-shadow:0 0 30px color-mix(in srgb,var(--tc) 35%,transparent)}
.gfx .mx-side.a{left:0;clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%)}
.gfx .mx-side.b{right:0;flex-direction:row-reverse;clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%)}
.gfx .mx-side .lg{width:64px;height:64px;font-size:64px}
.gfx .mx-side span{font:400 28px var(--fd);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.gfx .mx-side b{margin-left:auto;font:400 56px var(--fd);color:#fff;text-shadow:0 0 18px var(--tc)}
.gfx .mx-side.b b{margin-left:0;margin-right:auto}
/* bottom: vetoes and picks */
.gfx .mx-bar{position:absolute;left:44px;right:44px;top:766px;height:196px;--cut:22px}
.gfx .mx-bar-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 34px;background:linear-gradient(180deg,#0a1122,#04070f)}
.gfx .mx-lab{font:700 16px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:#c9d4e6;text-align:center;margin-bottom:8px}
.gfx .mx-vt{flex:none}
.gfx .mx-bans{display:flex;gap:12px}
.gfx .mx-ban{width:150px;height:100px;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(180deg,#121a2c,#090e1a);border:1px solid rgba(255,255,255,.1);font:700 16px var(--fl);letter-spacing:.06em;text-transform:uppercase;color:#e6edf7}
.gfx .mx-ban svg{width:34px;height:34px;color:#e6edf7}
.gfx .mx-ban.empty span{color:var(--muted)}
.gfx .mx-div{width:3px;align-self:stretch;margin:34px 0}
.gfx .mx-div.a{background:linear-gradient(180deg,transparent,var(--ca),transparent)}.gfx .mx-div.b{background:linear-gradient(180deg,transparent,var(--cb),transparent)}
.gfx .mx-slots{display:flex;gap:14px;justify-content:center;flex:1;min-width:0}
.gfx .mx-slot{flex:0 1 160px;min-width:0}
.gfx .mx-sb{position:relative;height:128px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.14);background:#0b1222}
.gfx .mx-sb img,.gfx .mx-sb .none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gfx .mx-sb .none{background:linear-gradient(160deg,#1b2c5e,#070d1f)}
.gfx .mx-sb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(3,6,15,.85))}
.gfx .mx-sb span{position:relative;z-index:1;text-align:center;font:700 18px var(--fl);letter-spacing:.06em;text-transform:uppercase;padding-bottom:4px}
.gfx .mx-sb em{position:relative;z-index:1;font:700 15px var(--fl);font-style:normal;letter-spacing:.2em;text-align:center;padding:4px 0;text-transform:uppercase}
.gfx .mx-sb.empty{justify-content:center;align-items:center;gap:8px;background:linear-gradient(180deg,#0e1526,#080c17);color:#5e6d88}
.gfx .mx-sb.empty::after{display:none}
.gfx .mx-sb.empty svg{width:46px;height:46px}
.gfx .mx-sb.empty span{font-size:16px;letter-spacing:.2em;color:#6f7f9c}
.gfx .mx-status{position:absolute;left:0;right:0;bottom:30px;display:flex;align-items:center;justify-content:center;gap:22px;font:700 26px var(--fl);letter-spacing:.42em;text-transform:uppercase;color:#4fd2ff;text-shadow:0 0 14px rgba(79,210,255,.5)}

/* ---------- map intro (full screen) ---------- */
.gfx .sc-mapintro{background:#02040a}
.gfx .sc-mapintro::before,.gfx .sc-mapintro::after{display:none}
.gfx .mi-media{position:absolute;inset:0;overflow:hidden}
.gfx .mi-media img,.gfx .mi-media .none{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gfx .mi-media .none{background:linear-gradient(160deg,#1b2c5e,#03060f)}
.gfx .scene.on .mi-media .kb{animation:gfxKb 24s ease-in-out infinite alternate}
@keyframes gfxKb{from{transform:scale(1.04)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
.gfx .mi-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,4,10,.92) 0%,rgba(2,4,10,.55) 38%,transparent 65%),linear-gradient(180deg,rgba(2,4,10,.7),transparent 22%,transparent 70%,rgba(2,4,10,.85))}
.gfx .mi-top{position:absolute;top:44px;left:50%;transform:translateX(-50%);display:flex;align-items:stretch;filter:drop-shadow(0 10px 22px rgba(0,0,0,.55))}
.gfx .scene.on .mi-top.fly{animation-name:gfxInTop}
@keyframes gfxInTop{from{opacity:0;transform:translate(-50%,-30px)}to{opacity:1;transform:translateX(-50%)}}
.gfx .mi-team{display:flex;align-items:center;gap:14px;padding:12px 22px;background:linear-gradient(180deg,#101b3a,#070d1f);border-bottom:4px solid var(--tc)}
.gfx .mi-team.b{flex-direction:row-reverse}
.gfx .mi-team .lg{width:48px;height:48px;font-size:48px}
.gfx .mi-team span{font:400 26px var(--fd);text-transform:uppercase;min-width:150px}
.gfx .mi-team.b span{text-align:right}
.gfx .mi-team b{font:400 40px var(--fd);min-width:40px;text-align:center}
.gfx .mi-sc{display:grid;place-items:center;padding:0 22px;background:#03060f;font:700 15px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--orange)}
.gfx .mi-txt{position:absolute;left:120px;bottom:150px;display:grid;gap:14px;justify-items:start;max-width:1100px}
.gfx .mi-kick{font:700 30px var(--fl);letter-spacing:.5em;text-transform:uppercase;color:#4fd2ff;text-shadow:0 0 18px rgba(79,210,255,.5)}
.gfx .mi-map{font:400 170px/.95 var(--fd);text-transform:uppercase;letter-spacing:.01em;background:linear-gradient(180deg,#ffffff 0%,#e6edf7 40%,#8796ad 52%,#f6f9fc 68%,#b3c0d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #1a2a4a) drop-shadow(0 0 30px rgba(0,0,0,.6))}
.gfx .mi-mode{display:flex;align-items:center;gap:16px;font:700 38px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:#e6edf7}
.gfx .mi-mode .mx-emb{width:54px;height:54px;--gl:#4fd2ff}
.gfx .mi-pick{display:flex;align-items:center;gap:14px;margin-top:10px;padding:12px 22px;background:rgba(5,9,20,.8);border-left:5px solid var(--tc);font:700 24px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:#d4dceb}
.gfx .mi-pick .lg{width:42px;height:42px;font-size:42px}
.gfx .mi-pick b{color:var(--tc)}

/* ---------- holding screens: Starting soon / Stream ending ---------- */
.gfx .sc-starting{--bgs:var(--bg-starting,var(--bg-all,none))}.gfx .sc-ending{--bgs:var(--bg-ending,var(--bg-all,none))}
.gfx .sc-starting::after,.gfx .sc-ending::after{display:none}
.gfx .hs-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.gfx .hs-over{position:absolute;left:0;right:0;bottom:70px;display:flex;justify-content:center}
.gfx .hs-sweep{position:absolute;inset:0;overflow:hidden;z-index:0}
.gfx .hs-sweep::before,.gfx .hs-sweep::after{content:"";position:absolute;left:-40%;width:180%;height:3px;background:linear-gradient(90deg,transparent,var(--ca),transparent);opacity:.55;transform:rotate(-8deg);animation:gfxSweep 7s linear infinite;top:30%}
.gfx .hs-sweep::after{background:linear-gradient(90deg,transparent,var(--cb),transparent);top:72%;transform:rotate(-8deg);animation-delay:-3.5s;animation-direction:reverse}
@keyframes gfxSweep{from{translate:-30% 0}to{translate:30% 0}}
.gfx .hs-wrap{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;text-align:center;padding-bottom:40px}
.gfx .hs-kick{font:700 26px var(--fl);letter-spacing:.42em;text-transform:uppercase;color:#4fd2ff;text-shadow:0 0 16px rgba(79,210,255,.5)}
.gfx .hs-title{font:400 132px/1 var(--fd);text-transform:uppercase;letter-spacing:.01em;background:linear-gradient(180deg,#fff 0%,#e6edf7 40%,#8796ad 52%,#f6f9fc 68%,#b3c0d3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 #1a2a4a) drop-shadow(0 0 26px rgba(47,140,255,.5))}
.gfx .hs-cd{display:grid;justify-items:center;gap:4px;padding:16px 46px 18px;background:linear-gradient(180deg,rgba(14,22,42,.94),rgba(4,8,18,.94));border:2px solid rgba(120,170,255,.35);box-shadow:0 0 30px rgba(47,140,255,.3);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px)}
.gfx .hs-cd small{font:700 18px var(--fl);letter-spacing:.32em;text-transform:uppercase;color:var(--orange)}
.gfx .hs-cd b{font:400 64px/1 var(--fd);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.06em;text-shadow:0 0 20px rgba(79,210,255,.6)}
.gfx .hs-cd.big b{font-size:96px}
.gfx .hs-cd b.done{font-size:56px;color:#4fd2ff}
.gfx .hs-vs{display:flex;align-items:center;gap:20px;padding:14px 30px;background:rgba(5,9,20,.7);border-top:2px solid rgba(255,255,255,.08);border-bottom:2px solid rgba(255,255,255,.08)}
.gfx .hs-vs .lg{width:58px;height:58px;font-size:58px}
.gfx .hs-vs span{font:400 32px var(--fd);text-transform:uppercase;letter-spacing:.03em}
.gfx .hs-vs i{font:700 22px var(--fl);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--orange)}
.gfx .hs-when{font:600 24px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:#d4dceb}
.gfx .hs-res{display:flex;align-items:center;gap:40px}
.gfx .hs-res .lg{width:150px;height:150px;font-size:150px}
.gfx .hs-res div{display:flex;align-items:center;gap:20px;font:400 110px/1 var(--fd);color:#8796ad}
.gfx .hs-res b{font-weight:400}.gfx .hs-res b.w{color:#fff;text-shadow:0 0 24px rgba(79,210,255,.6)}.gfx .hs-res s{text-decoration:none;font-size:70px}
.gfx .hs-follow{font:700 22px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:#d4dceb}
.gfx .hs-foot{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;align-items:center;gap:22px;font:700 22px var(--fl);letter-spacing:.42em;text-transform:uppercase;color:#4fd2ff}
.gfx .hs-foot i{width:140px;height:2px;background:linear-gradient(90deg,transparent,#36c9ff)}.gfx .hs-foot i:last-child{background:linear-gradient(90deg,#36c9ff,transparent)}

/* ---------- player card ---------- */
.gfx .pl{position:absolute;left:110px;right:110px;top:150px;bottom:110px;display:grid;grid-template-columns:600px 1fr;gap:40px}
.gfx .pl-l{position:relative;display:grid;align-content:center;justify-items:start;gap:16px;padding:46px;border-radius:8px;background:linear-gradient(160deg,rgba(16,27,58,.95),rgba(5,9,20,.95));border:2px solid rgba(120,170,255,.25);overflow:hidden}
.gfx .pl-l::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tier) 30%,transparent),transparent 70%)}
.gfx .pl-kick{display:flex;align-items:center;gap:12px;font:700 20px var(--fl);letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.gfx .pl-kick .lg{width:52px;height:52px;font-size:52px}
.gfx .pl-name{font:400 82px/1 var(--fd);text-transform:uppercase;letter-spacing:.02em;word-break:break-word}
.gfx .pl-tags{display:flex;gap:10px}
.gfx .pl-tag{padding:7px 14px;font:700 16px var(--fl);letter-spacing:.24em;text-transform:uppercase;border-radius:3px;background:rgba(255,255,255,.08)}
.gfx .pl-tag.lg2{background:#2f8cff}.gfx .pl-tag.sc{background:var(--orange)}
.gfx .pl-ov{display:flex;align-items:center;gap:26px;margin-top:18px}
.gfx .pl-ring{position:relative;width:210px;height:210px}
.gfx .pl-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.gfx .pl-ring b{position:absolute;inset:0;display:grid;place-items:center;font:400 92px/1 var(--fd);color:#fff;text-shadow:0 0 30px var(--tier)}
.gfx .pl-ov small{display:grid;gap:6px;font:700 20px var(--fl);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.gfx .pl-ov small em{font:400 30px var(--fd);white-space:nowrap;font-style:normal;color:#fff;letter-spacing:.02em}
.gfx .pl-r{display:grid;grid-template-rows:repeat(3,1fr);gap:18px}
.gfx .pm{display:grid;grid-template-columns:150px 1fr;border-radius:8px;overflow:hidden;background:rgba(7,13,30,.94);border:2px solid rgba(255,255,255,.07)}
.gfx .pm-h{display:grid;place-items:center;align-content:center;gap:6px;background:linear-gradient(160deg,#16131a,#0a080c);border-right:3px solid var(--orange)}
.gfx .pm-h span{font:700 30px var(--fl);letter-spacing:.06em;color:var(--orange)}
.gfx .pm-h b{font:400 50px/1 var(--fd);color:var(--tc,#fff)}
.gfx .pm-h svg{width:30px;height:30px;color:var(--orange)}
.gfx .pm-s{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.gfx .pm-c{display:grid;align-content:center;gap:8px;padding:0 22px;border-left:1px solid rgba(255,255,255,.06)}
.gfx .pm-c small{font:700 15px var(--fl);letter-spacing:.14em;text-transform:uppercase;color:#8fb6ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gfx .pm-c b{font:700 38px/1 var(--fl);color:#fff}
.gfx .pm-bar{display:flex;align-items:center;gap:10px}
.gfx .pm-bar i{flex:1;height:10px;background:#0d1524;border:1px solid #2b3850;position:relative}
.gfx .pm-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);background:var(--tc)}
.gfx .pm-bar em{font:700 18px var(--fl);font-style:normal;min-width:30px;text-align:right;color:var(--tc,#fff)}
.gfx .pm.empty{opacity:.45}