/* ===========================================================
   F-ZERO TV - the broadcast look.
   Everything is laid out on a fixed 1920x1080 stage that is scaled
   to fit the window (tv-ui.js), so graphics never reflow and there
   are never scrollbars.  Same palette as the controller app.
   =========================================================== */
:root{
  --bg:#050816; --ink:#e8f4ff; --dim:#86a8cc; --acc:#4fd0ff; --acc2:#ff3da8; --go:#ffd23f; --red:#ff4d63; --grn:#4fe08a;
  --f:'Exo 2','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font:600 20px/1.25 var(--f);letter-spacing:.02em;-webkit-user-select:none;user-select:none}
body{cursor:default}
body.nocursor{cursor:none}
body.nocursor *{cursor:none!important}
img{-webkit-user-drag:none;user-drag:none}
[hidden]{display:none!important}
#screen{position:fixed;inset:0;overflow:hidden;background:#000}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--bg)}
section{position:absolute;inset:0}
b{font-weight:900}

/* ---------------------------------------------------------- idle */
#idle{background:#03050f;overflow:hidden}
.idle-bg{position:absolute;inset:-6%;background:url(../img/bg.gif) center/cover;filter:blur(4px) brightness(.8) saturate(1.2);animation:kb 50s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.idle-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(30,70,200,.28),rgba(3,5,16,.55) 52%,rgba(2,3,10,.94) 100%)}
.idle-streaks{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen}
.idle-streaks i{position:absolute;left:-30%;height:3px;width:30%;background:linear-gradient(90deg,transparent,rgba(120,210,255,.9),transparent);opacity:0;animation:streak linear infinite}
@keyframes streak{0%{transform:translateX(0);opacity:0}8%{opacity:.85}60%{opacity:.5}100%{transform:translateX(480%);opacity:0}}
.idle-logo{position:absolute;left:50%;top:48%;width:980px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 42px rgba(79,208,255,.55)) drop-shadow(0 12px 30px rgba(0,0,0,.8));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-53%) scale(1.025)}}
.idle-foot{position:absolute;left:0;right:0;bottom:64px;text-align:center;font:800 22px var(--f);letter-spacing:.5em;color:rgba(160,205,255,.75);text-transform:uppercase;text-shadow:0 0 18px rgba(79,208,255,.6)}
.idle-foot span{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}

/* ---------------------------------------------------------- live layer */
#live{background:#000}
#map3d{position:absolute;left:0;top:0;width:1920px;height:1080px;display:block}
#grade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse at 50% 50%,transparent 58%,rgba(0,0,12,.55) 100%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px);transition:background .4s,box-shadow .4s}
#grade.replay{background:radial-gradient(ellipse at 50% 50%,rgba(20,40,120,.0) 50%,rgba(0,0,30,.65) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 0 6px rgba(255,210,63,.0),inset 0 0 220px rgba(40,90,255,.35)}
#hud{position:absolute;inset:0;pointer-events:none;text-shadow:0 2px 0 rgba(0,0,0,.55);transition:opacity .4s}
#hud.off{opacity:0}
#hud>*{position:absolute}

/* top bar */
#topbar{left:0;right:0;top:0;height:112px;padding:26px 36px 0;display:flex;justify-content:space-between;align-items:flex-start;background:linear-gradient(180deg,rgba(2,6,22,.7),transparent)}
.tb-left{display:flex;align-items:center;gap:20px}
.tb-logo{height:56px;filter:drop-shadow(0 0 10px rgba(79,208,255,.5))}
.tb-title{padding-left:20px;border-left:3px solid var(--acc)}
.tb-title b{display:block;font:900 italic 38px/1 var(--f);text-transform:uppercase;letter-spacing:.03em}
.tb-title small{display:block;margin-top:5px;font:700 17px var(--f);letter-spacing:.16em;color:var(--acc);text-transform:uppercase}
.tb-right{display:flex;gap:12px;align-items:center}
.chip{height:50px;padding:0 24px;display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(6,14,38,.92),rgba(10,28,70,.8));border-top:3px solid var(--acc);clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);font:900 italic 28px var(--f)}
.chip.lap b{color:var(--go);font-size:34px}.chip.lap span{font-size:22px;color:var(--dim)}.chip.lap i{font-style:inherit}
.chip.clock{font:800 28px 'Exo 2',monospace;font-variant-numeric:tabular-nums;min-width:170px;justify-content:center;font-style:normal}
.chip.onair{border-top-color:var(--red);padding:0 22px;font-size:22px;letter-spacing:.14em}
.chip.onair i{width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red);animation:blink 1.4s infinite}
.chip.onair.replay{border-top-color:var(--go);color:var(--go)}.chip.onair.replay i{background:var(--go);box-shadow:0 0 14px var(--go)}

/* timing tower */
#tower{left:36px;top:128px;width:392px;transition:opacity .4s,transform .5s}
.tw-head{display:flex;justify-content:space-between;align-items:baseline;height:38px;padding:0 18px 0 14px;background:linear-gradient(90deg,#1a62ff,#0c2c80);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);font:900 italic 21px/38px var(--f);letter-spacing:.1em}
.tw-head small{font:700 15px var(--f);letter-spacing:.08em;color:#bfe0ff;text-transform:uppercase}
.tw-rows{position:relative;margin-top:4px}
.tr{position:absolute;left:0;top:0;width:100%;height:36px;display:flex;align-items:center;gap:9px;padding:0 14px 0 0;background:linear-gradient(90deg,rgba(4,10,30,.9),rgba(8,22,58,.8));border-left:5px solid var(--pc,#456);clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .6s cubic-bezier(.25,.9,.3,1),opacity .4s,background .3s;will-change:transform}
.tr .r{width:42px;text-align:center;font:900 italic 23px var(--f);color:#fff;background:rgba(80,120,190,.28);align-self:stretch;display:flex;align-items:center;justify-content:center}
.tr.p1 .r{background:linear-gradient(180deg,#ffe27a,#e8a400);color:#241600;text-shadow:none}.tr.p2 .r{background:linear-gradient(180deg,#eef2fa,#a7b3c8);color:#10131a;text-shadow:none}.tr.p3 .r{background:linear-gradient(180deg,#e8a266,#b0642a);color:#1a0d00;text-shadow:none}
.tr img{width:28px;height:28px;border-radius:50%;background:#09112a;border:2px solid rgba(255,255,255,.55);object-fit:cover}
.tr .n{flex:1;min-width:0;font:800 italic 20px var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr .g{font:700 18px var(--f);font-variant-numeric:tabular-nums;color:#cfe6ff;min-width:62px;text-align:right}
.tr .g.lead{color:var(--go);font-weight:900}
.tr .bz{width:14px;color:var(--acc);font-size:16px;text-align:center;opacity:0}.tr.boost .bz{opacity:1;text-shadow:0 0 8px var(--acc)}
.tr.cam{background:linear-gradient(90deg,rgba(255,210,63,.4),rgba(60,50,10,.82))}
.tr.out{opacity:.62}.tr.out .g{color:var(--red);font-weight:900}.tr.out .n{text-decoration:line-through;text-decoration-color:rgba(255,77,99,.7)}
.tr.fin .g{color:var(--acc)}
.tr.hov{background:linear-gradient(90deg,rgba(79,208,255,.5),rgba(10,40,100,.9))}
.tr.sep{height:6px;background:none;border:0;clip-path:none;display:block}
.tw-foot{margin-top:6px;padding:4px 14px;font:700 15px var(--f);letter-spacing:.1em;color:var(--dim);text-transform:uppercase;background:rgba(3,8,24,.7);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.tw-foot b{color:var(--ink)}

/* camera tag + subject card */
#camtag{left:36px;bottom:176px;display:flex;align-items:center;gap:10px;font:800 17px var(--f);letter-spacing:.2em;color:#cfe8ff;text-transform:uppercase;padding:4px 16px 4px 12px;background:rgba(3,8,24,.72);clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
#camtag i{width:10px;height:10px;border-radius:50%;background:var(--go);box-shadow:0 0 10px var(--go)}
#subject{left:36px;bottom:36px;width:660px;height:128px;transition:opacity .35s}
.sj{position:relative;height:100%;display:flex;align-items:center;gap:20px;padding:0 24px 0 18px;background:linear-gradient(90deg,rgba(4,10,30,.93),rgba(10,26,66,.82));border-left:6px solid var(--pc);clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.sj-face{width:92px;height:92px;border-radius:50%;border:4px solid var(--pc);background:#09112a;box-shadow:0 0 22px color-mix(in srgb,var(--pc) 60%,transparent);object-fit:cover}
.sj-main{flex:1;min-width:0}
.sj-main small{display:block;font:800 15px var(--f);letter-spacing:.18em;color:var(--pc);text-transform:uppercase}
.sj-main b{display:block;font:900 italic 38px/1.02 var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-main span{display:block;font:600 17px var(--f);color:#a9c8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sj-chips{display:flex;gap:7px;margin-top:5px}
.sj-chips em{font:800 14px var(--f);font-style:normal;padding:1px 9px;background:rgba(120,200,255,.16);letter-spacing:.06em;text-transform:uppercase}
.sj-chips em b{color:var(--go)}
.sj-right{width:196px;text-align:right}
.sj-right .spd{font:900 italic 58px/1 var(--f)}.sj-right .spd small{font:700 17px var(--f);letter-spacing:.14em;color:var(--dim);margin-left:6px;font-style:normal}
.ebar{height:11px;background:rgba(0,0,0,.6);border:1px solid rgba(160,220,255,.5);transform:skewX(-20deg);margin:7px 0 4px;overflow:hidden}
.ebar i{display:block;height:100%;background:linear-gradient(90deg,#3fe07a,#c6ff4f);width:100%}.ebar i.mid{background:linear-gradient(90deg,#ffb02e,#ffe14a)}.ebar i.low{background:linear-gradient(90deg,#ff2d4a,#ff7a5a);animation:blink .5s infinite alternate}
.sj-right .bst{font:800 14px var(--f);letter-spacing:.16em;color:#6f8ab0;text-transform:uppercase}.bst.rdy{color:#7fe8ff}.bst.act{color:var(--go);animation:blink .3s infinite alternate}.bst.air{color:#ff7ae6;animation:blink .3s infinite alternate}

/* minimap */
#minimap{right:36px;bottom:36px;width:340px;height:286px;background:linear-gradient(180deg,rgba(4,10,30,.86),rgba(6,16,44,.74));border-top:3px solid var(--acc);clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);transition:opacity .4s}
.mm-head{display:flex;justify-content:space-between;align-items:baseline;padding:6px 14px 0;font:900 italic 16px var(--f);letter-spacing:.16em;color:var(--acc)}
.mm-head small{font:700 13px var(--f);color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
#mini{display:block;width:340px;height:250px}

/* lights / banners / lower thirds */
#lights{left:50%;top:150px;transform:translateX(-50%);display:flex;gap:34px;padding:20px 38px;background:rgba(2,4,12,.78);border:2px solid rgba(160,200,255,.28);border-radius:20px;opacity:0;transition:opacity .35s}
#lights.on{opacity:1}
#lights i{display:block;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a1118,#18050a);box-shadow:inset 0 0 12px rgba(0,0,0,.8);transition:background .08s,box-shadow .08s}
#lights i.r{background:radial-gradient(circle at 35% 30%,#ff8a8a,#ff1f3a 55%,#a00018);box-shadow:0 0 34px 6px rgba(255,40,70,.75)}
#lights.go i{background:radial-gradient(circle at 35% 30%,#d4ffd9,#2dff6f 55%,#00a83c);box-shadow:0 0 38px 8px rgba(40,255,110,.8)}
#banner{left:0;right:0;top:250px;text-align:center}
.bn{display:inline-block;max-width:1500px;padding:6px 120px 10px;font:900 italic 112px/1.05 var(--f);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;background:linear-gradient(90deg,transparent,rgba(8,26,86,.82) 22%,rgba(8,26,86,.82) 78%,transparent);text-shadow:0 0 40px rgba(79,208,255,.7),0 5px 0 rgba(0,0,0,.6);animation:bnIn .55s cubic-bezier(.2,1.2,.3,1) both}
.bn small{display:block;font:800 30px var(--f);letter-spacing:.3em;color:var(--acc);margin-top:-6px}
.bn.gold{color:var(--go);text-shadow:0 0 44px rgba(255,210,63,.7),0 5px 0 rgba(0,0,0,.6)}
.bn.red{color:#ff6b7d;text-shadow:0 0 44px rgba(255,60,80,.7),0 5px 0 rgba(0,0,0,.6)}
.bn.go{color:#6dff9d;text-shadow:0 0 50px rgba(60,255,120,.8),0 5px 0 rgba(0,0,0,.6)}
.bn.out{animation:bnOut .4s ease-in both}
@keyframes bnIn{from{transform:scale(1.7);opacity:0;letter-spacing:.3em}to{transform:scale(1);opacity:1}}
@keyframes bnOut{to{transform:scale(.9);opacity:0}}
#lower3{left:716px;bottom:122px;width:820px;height:84px}
.l3{position:absolute;left:0;bottom:0;width:100%;height:84px;display:flex;transform:translateX(-110%);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1),opacity .4s}
.l3.on{transform:none;opacity:1}.l3.off{transform:translateX(30%);opacity:0}
.l3 .tg{display:flex;align-items:center;padding:0 26px 0 22px;background:var(--tc,#4fd0ff);color:#06101e;font:900 italic 30px var(--f);letter-spacing:.06em;text-transform:uppercase;text-shadow:none;clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);margin-right:-10px;z-index:1;white-space:nowrap}
.l3 .ms{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 24px 0 28px;background:linear-gradient(90deg,rgba(4,10,30,.95),rgba(10,26,70,.82));clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.l3 .ms b{font:900 italic 34px/1.05 var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l3 .ms small{font:600 19px var(--f);color:#a9c8ea;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l3 .pt{width:84px;height:84px;margin-right:-6px;border-radius:0;background:#09112a;object-fit:cover;z-index:0}
#caption{left:716px;bottom:42px;width:820px;text-align:center;min-height:56px;display:flex;align-items:center;justify-content:center;transition:opacity .4s}
#caption span{display:inline-block;padding:8px 26px;font:700 25px/1.2 var(--f);background:rgba(3,8,24,.62);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);animation:capIn .3s both}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#caption .nm{font-weight:900}

/* replay + status */
#rbug{left:50%;top:158px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:0 34px 0 18px;height:62px;background:linear-gradient(90deg,#ffc400,#ff8a00);color:#1a0d00;text-shadow:none;clip-path:polygon(0 0,100% 0,calc(100% - 18px) 100%,18px 100%);opacity:0;transform:translateX(-50%) translateY(-24px);transition:opacity .3s,transform .4s cubic-bezier(.2,1.1,.3,1)}
#rbug.on{opacity:1;transform:translateX(-50%)}
#rbug b{font:900 italic 38px var(--f);letter-spacing:.14em}#rbug b::before{content:"◀◀ ";font-size:.7em}
#rbug span{font:800 20px var(--f);letter-spacing:.06em;text-transform:uppercase;max-width:640px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rbug small{font:900 16px var(--f);padding:2px 10px;background:#1a0d00;color:var(--go);letter-spacing:.12em}#rbug small:empty{display:none}
#pause{left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 60px;font:900 italic 64px var(--f);letter-spacing:.3em;background:rgba(3,8,24,.7);opacity:0;transition:opacity .3s}#pause.on{opacity:1}
#ffwd{right:36px;top:128px;padding:6px 20px;font:900 italic 26px var(--f);letter-spacing:.1em;background:rgba(255,200,0,.9);color:#1a0d00;text-shadow:none;opacity:0;transition:opacity .3s;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}#ffwd.on{opacity:1}

/* scene transitions */
#wipe{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#wipe i{position:absolute;top:-10%;bottom:-10%;left:-60%;width:46%;transform:skewX(-20deg) translateX(0);opacity:0}
#wipe i:nth-child(1){background:linear-gradient(90deg,#1a62ff,#4fd0ff)}#wipe i:nth-child(2){background:linear-gradient(90deg,#ffd23f,#ff8a00);width:30%}#wipe i:nth-child(3){background:linear-gradient(90deg,#050816,#0c1c50);width:70%}
#wipe.go i{animation:wipe .75s cubic-bezier(.6,0,.3,1) both}#wipe.go i:nth-child(2){animation-delay:.06s}#wipe.go i:nth-child(3){animation-delay:.12s}
@keyframes wipe{0%{transform:skewX(-20deg) translateX(0);opacity:1}100%{transform:skewX(-20deg) translateX(520%);opacity:1}}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}#flash.go{animation:flash .22s ease-out}
@keyframes flash{from{opacity:.34}to{opacity:0}}
#watch{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(2,6,18,.86);backdrop-filter:blur(8px);cursor:pointer}
#watch.on{display:flex}
.w-card{display:flex;flex-direction:column;align-items:center;gap:56px}.w-card img{width:760px;filter:drop-shadow(0 0 36px rgba(79,208,255,.5))}
#watch-btn{font:900 40px var(--f);letter-spacing:.2em;color:#fff;padding:22px 64px;background:linear-gradient(180deg,#2a7bff,#1747b8);border:2px solid rgba(160,220,255,.7);border-radius:6px;cursor:pointer;box-shadow:0 0 34px rgba(79,208,255,.45);animation:blink 1.8s infinite}

/* ---------------------------------------------------------- hover (the only interaction) */
.tr,#mini{pointer-events:auto}
#hud.hlmode #tower,#hud.hlmode #minimap,#hud.hlmode #subject{display:none}
#live.special #hud{display:none}
#tip{position:absolute;z-index:40;width:440px;pointer-events:none;background:linear-gradient(180deg,rgba(5,12,36,.97),rgba(8,20,56,.95));border:1px solid rgba(140,200,255,.35);border-top:4px solid var(--pc,#4fd0ff);box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 40px rgba(79,208,255,.15);padding:14px 16px 12px;font-size:16px}
.tp-top{display:flex;gap:12px;align-items:center}
.tp-top>img{width:76px;height:76px;object-fit:cover;border:3px solid var(--pc);background:#09112a}
.tp-nm{flex:1;min-width:0;display:flex;flex-direction:column}
.tp-nm small{font:700 13px var(--f);letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.tp-nm b{font:900 italic 29px/1.05 var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-nm span{font:600 15px var(--f);color:#a9c8ea}
.tp-rank{font:900 italic 38px var(--f);color:var(--go)}
.tp-mid{display:flex;gap:12px;margin-top:10px;align-items:center}
.tp-art{width:150px;height:84px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center}.tp-art img{max-width:100%;max-height:100%;object-fit:contain}
.tp-bars{flex:1;display:flex;flex-direction:column;gap:4px}
.tp-st{display:flex;align-items:center;gap:8px;font:800 12px var(--f);letter-spacing:.12em;color:var(--dim)}.tp-st span{width:50px}.tp-st div{flex:1;height:8px;background:rgba(255,255,255,.1)}.tp-st i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),#7affc9)}.tp-st b{width:28px;text-align:right;color:#fff;font-size:14px}
.tp-live{margin-top:10px;padding-top:8px;border-top:1px solid rgba(255,255,255,.12)}
.tp-ebar{height:8px;background:rgba(255,255,255,.12);margin-bottom:6px}.tp-ebar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4fe08a,#b8ff6d)}.tp-ebar i.mid{background:linear-gradient(90deg,#ffb84f,#ffe27a)}.tp-ebar i.low{background:linear-gradient(90deg,#ff4d63,#ff8a5c)}
.tp-g{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center}
.tp-g span{font:700 10.5px var(--f);letter-spacing:.1em;color:var(--dim);display:flex;flex-direction:column}.tp-g b{font:900 19px var(--f);color:#fff;letter-spacing:0}
.tp-state{margin-top:6px;font:900 13px var(--f);letter-spacing:.24em;color:var(--acc);text-align:center}
.tp-career{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:10px;padding:8px 0;background:rgba(255,255,255,.05);text-align:center}
.tp-career b{display:block;font:900 22px var(--f)}.tp-career small{font:700 10px var(--f);letter-spacing:.12em;color:var(--dim)}
.tp-form{display:flex;align-items:center;gap:5px;margin-top:8px;flex-wrap:wrap}.tp-form small{font:800 11px var(--f);letter-spacing:.14em;color:var(--dim);margin-right:4px}
.tp-form i{font-style:normal;font:900 14px var(--f);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12)}.tp-form i.f1{background:#e8a400;color:#241600}.tp-form i.f2{background:#a7b3c8;color:#10131a}.tp-form i.f3{background:#b9733a;color:#1a0b00}
.tp-ch{margin-left:auto;font:800 12px var(--f);letter-spacing:.08em;color:var(--go)}
.tp-bio{margin-top:8px;font:500 14px/1.35 var(--f);color:#b8d2ee;max-height:58px;overflow:hidden}
.tp-rel{margin-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.tp-rel small{font:800 10.5px var(--f);letter-spacing:.14em;color:var(--dim);margin:0 4px 0 6px}.tp-rel small:first-child{margin-left:0}
.tp-rel em{font:800 italic 12px var(--f);font-style:normal;padding:2px 8px;background:rgba(255,255,255,.1);text-transform:uppercase}.tp-rel em.bad{background:rgba(255,77,99,.25);color:#ffb3bd}.tp-rel em.good{background:rgba(79,224,138,.22);color:#b8ffd2}.tp-rel em.none{opacity:.45}

/* ---------------------------------------------------------- full screen boards */
#intro,#board{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#intro.on,#board.on{opacity:1}
#intro.t-out{opacity:0;transition:opacity .9s}

/* intro: title + starting grid */
.it-band{position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(3,8,26,.88) 0%,rgba(3,8,26,.5) 48%,transparent 78%);transition:opacity .7s}
.it-card{position:absolute;left:96px;top:50%;transform:translateY(-52%);width:1100px;transition:opacity .6s,transform .8s}
.it-card::before{content:"";position:absolute;left:-30px;top:6px;bottom:6px;width:10px;background:linear-gradient(180deg,var(--acc),var(--acc2));transform:skewX(-14deg)}
.it-kick{display:flex;align-items:center;gap:14px;font:900 28px var(--f);letter-spacing:.46em;color:var(--go);text-transform:uppercase}.it-kick i{width:70px;height:4px;background:var(--go);box-shadow:0 0 14px var(--go)}
.it-card h1,.bd-title h1,.ch-main h1{text-shadow:none}
.it-card h1{font:900 italic 168px/.98 var(--f);text-transform:uppercase;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 30%,#9fe0ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 0 rgba(0,0,0,.45)) drop-shadow(0 0 40px rgba(79,208,255,.45));animation:itIn .9s cubic-bezier(.2,.9,.2,1) both}
.it-card h2{font:800 italic 58px/1.1 var(--f);color:var(--acc);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;animation:itIn .9s .12s cubic-bezier(.2,.9,.2,1) both}
.it-meta{display:flex;gap:44px;margin-top:34px;font:800 26px var(--f);letter-spacing:.2em;color:var(--dim);animation:itIn .9s .3s both}.it-meta b{color:#fff;font-size:40px;margin-right:6px;letter-spacing:.02em}
@keyframes itIn{from{opacity:0;transform:translateX(-90px) skewX(-8deg)}to{opacity:1;transform:none}}
#intro.t-grid .it-card{opacity:0;transform:translateY(-52%) translateX(-80px)}
#intro.t-grid .it-band{opacity:0}
.it-grid{position:absolute;left:70px;top:150px;opacity:0;transition:opacity .6s;--per:11}
#intro.t-grid .it-grid{opacity:1}
.ig-head{display:flex;align-items:baseline;gap:20px;margin-bottom:12px;padding:8px 22px;background:linear-gradient(90deg,var(--acc),#1a62ff);width:max-content;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.ig-head b{font:900 italic 34px var(--f);letter-spacing:.12em;color:#04112c;text-shadow:none}.ig-head small{font:800 18px var(--f);letter-spacing:.2em;color:#06204a;text-transform:uppercase;text-shadow:none}
.ig-rows{display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--per),54px);grid-auto-columns:470px;gap:6px 14px}
.ig{display:flex;align-items:center;gap:10px;height:54px;padding:0 14px 0 0;background:linear-gradient(90deg,rgba(4,10,30,.92),rgba(8,24,64,.82));border-left:5px solid var(--pc);opacity:0;transform:translateX(-60px);transition:opacity .35s,transform .45s cubic-bezier(.2,1,.3,1)}
.ig.on{opacity:1;transform:none}
.ig .r{width:50px;align-self:stretch;display:flex;align-items:center;justify-content:center;background:rgba(80,120,190,.3);font:900 italic 28px var(--f)}
.ig:nth-child(-n+3) .r{background:linear-gradient(180deg,#ffe27a,#e8a400);color:#241600;text-shadow:none}
.ig img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);background:#09112a}
.ig .n{flex:1;min-width:0;font:800 italic 24px var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig small{font:700 13px var(--f);letter-spacing:.08em;color:var(--dim);white-space:nowrap}

/* post race boards share a dark glass backdrop */
#board.on.podium,#board.on.results,#board.on.standings,#board.on.champion{background:radial-gradient(ellipse at 50% 60%,rgba(8,20,60,.55),rgba(2,5,18,.9))}
.bd-title{position:absolute;left:0;right:0;top:58px;text-align:center;animation:itIn .8s both}
.bd-title.l{text-align:left;left:96px}
.bd-title small{display:block;font:800 26px var(--f);letter-spacing:.42em;color:var(--acc);text-transform:uppercase}
.bd-title h1{font:900 italic 104px/1 var(--f);letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(180deg,#fff 20%,#ffd23f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 5px 0 rgba(0,0,0,.5))}
.bd-title.l h1{font-size:76px;background:linear-gradient(180deg,#fff 30%,#9fe0ff);-webkit-background-clip:text;background-clip:text}

/* podium */
.pod{position:absolute;left:0;right:0;bottom:150px;height:640px;display:flex;justify-content:center;align-items:flex-end;gap:34px}
.pd{width:480px;display:flex;flex-direction:column;align-items:center;animation:pdIn 1s cubic-bezier(.2,1,.3,1) both}
.pd.p3{animation-delay:.2s}.pd.p2{animation-delay:1.5s}.pd.p1{animation-delay:3s}
@keyframes pdIn{from{opacity:0;transform:translateY(240px)}to{opacity:1;transform:none}}
.pd-card{width:100%;padding:18px 20px 16px;text-align:center;background:linear-gradient(180deg,rgba(6,14,40,.92),rgba(10,28,76,.88));border-top:6px solid var(--mc);position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.pd-face{width:150px;height:150px;border-radius:50%;object-fit:cover;border:5px solid var(--mc);background:#09112a;margin-top:-92px;box-shadow:0 0 38px color-mix(in srgb,var(--mc) 60%,transparent)}
.pd.p1 .pd-face{width:190px;height:190px;margin-top:-118px}
.pd-art{height:100px;display:flex;align-items:center}.pd-art img{max-height:100%;max-width:300px;object-fit:contain}
.pd-m{font:900 italic 40px/1 var(--f);text-transform:uppercase;white-space:nowrap}.pd.p1 .pd-m{font-size:48px;color:var(--go)}
.pd-n{font:700 20px var(--f);color:#a9c8ea;letter-spacing:.08em}
.pd-t{font:800 30px var(--f);font-variant-numeric:tabular-nums;margin-top:6px}
.pd-p{font:900 italic 22px var(--f);color:#6dff9d;font-style:normal}
.pd-step{width:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--mc),color-mix(in srgb,var(--mc) 40%,#050816));color:#10131a;text-shadow:none}
.pd-step b{font:900 italic 130px/1 var(--f)}.pd-step small{font:900 italic 44px var(--f);align-self:flex-start;margin-top:22px}
.pd.p1 .pd-step{height:190px}.pd.p2 .pd-step{height:130px}.pd.p3 .pd-step{height:90px}.pd.p3 .pd-step b{font-size:90px}.pd.p2 .pd-step b{font-size:110px}
.pod-foot{position:absolute;left:0;right:0;bottom:50px;display:flex;justify-content:center;gap:56px;font:800 21px var(--f);letter-spacing:.18em;color:var(--dim);animation:itIn 1s 3.4s both}.pod-foot b{color:#fff;margin:0 6px}

/* results table */
.rs{position:absolute;left:96px;right:96px;top:196px;--rh:36px}
.rs-h,.rr{display:grid;grid-template-columns:90px 1fr 330px 190px 100px 70px 80px 100px;align-items:center;height:var(--rh);padding-right:16px}
.rs-h{height:40px;font:900 16px var(--f);letter-spacing:.2em;color:var(--acc);border-bottom:2px solid rgba(79,208,255,.5)}
.rr{margin-top:3px;background:linear-gradient(90deg,rgba(4,10,30,.88),rgba(8,22,58,.78));border-left:6px solid var(--pc);font-size:calc(var(--rh) * .52);animation:rrIn .5s both}
@keyframes rrIn{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
.rr .c1{font:900 italic calc(var(--rh) * .62) var(--f);text-align:center}
.rr.pod1 .c1{color:var(--go)}.rr.pod2 .c1{color:#d5dcec}.rr.pod3 .c1{color:#e0a066}
.rr .c2{display:flex;align-items:center;gap:12px;min-width:0}.rr .c2 img{height:calc(var(--rh) - 8px);width:calc(var(--rh) - 8px);border-radius:50%;object-fit:cover;background:#09112a;border:2px solid rgba(255,255,255,.55)}
.rr .c2 b{font:900 italic 1em var(--f);text-transform:uppercase;white-space:nowrap}.rr .c2 small{font:600 .72em var(--f);color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr .c3{font:800 1em var(--f);font-variant-numeric:tabular-nums}.rr .c3 small{font:700 .72em var(--f);color:var(--dim);margin-left:10px}
.rr .c4,.rr .c5,.rr .c6,.rr .c7,.rr .c8,.rs-h .c4,.rs-h .c5,.rs-h .c6,.rs-h .c7,.rs-h .c8{text-align:right;font-variant-numeric:tabular-nums}
.rr .fl{color:#c58bff;font-weight:900}.rr .c8{color:#6dff9d;font-weight:900}
.rr.dnf{opacity:.78}.rr.dnf .c3{color:#ff8b9a;font-size:.88em}

/* highlight title card */
.hl{position:absolute;left:96px;bottom:160px;padding:16px 70px 20px 40px;background:linear-gradient(90deg,rgba(3,8,26,.92),rgba(8,26,86,.72) 80%,transparent);display:flex;flex-direction:column;animation:itIn .6s both}
.hl small{font:800 22px var(--f);letter-spacing:.4em;color:var(--go)}.hl b{font:900 italic 96px/1 var(--f);text-transform:uppercase}.hl span{font:800 italic 38px var(--f);text-transform:uppercase;color:#cfe8ff}
#board.hlcard{background:linear-gradient(0deg,rgba(2,5,18,.5),transparent 40%)}

/* championship standings */
.st{position:absolute;left:96px;right:96px;top:208px;display:flex;gap:46px}
.st-rows{flex:1;display:flex;flex-direction:column;gap:6px}
.sr{display:grid;grid-template-columns:62px 52px 360px 1fr 74px 120px 90px;align-items:center;gap:12px;height:46px;padding-right:14px;background:linear-gradient(90deg,rgba(4,10,30,.9),rgba(8,22,58,.78));border-left:6px solid var(--pc);animation:rrIn .55s both}
.sr .r{font:900 italic 30px var(--f);text-align:center}.sr.p1 .r{color:var(--go)}.sr.p2 .r{color:#d5dcec}.sr.p3 .r{color:#e0a066}
.sr img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6);background:#09112a}
.sr .n{font:900 italic 26px var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sr .n small{font:600 15px var(--f);color:var(--dim);margin-left:12px;text-transform:none}
.sr .bar{height:14px;background:rgba(255,255,255,.1);position:relative}.sr .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--pc),#fff);animation:barIn 1.2s .3s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes barIn{to{width:var(--w)}}
.sr .mv{font:900 17px var(--f);text-align:center;color:var(--dim)}.sr .mv.up{color:#6dff9d}.sr .mv.dn{color:#ff6b7d}
.sr .pt{text-align:right}.sr .pt b{font:900 italic 32px var(--f)}.sr .pt small{font:800 17px var(--f);color:#6dff9d;margin-left:8px}
.sr .wn{font:800 18px var(--f);color:var(--go);text-align:right}
.st-side{width:420px}
.ss-h{font:900 18px var(--f);letter-spacing:.3em;color:var(--acc);padding-bottom:8px;border-bottom:2px solid rgba(79,208,255,.5);margin-bottom:8px}
.ss{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;background:rgba(255,255,255,.06);margin-bottom:4px;font:600 18px var(--f)}.ss b{font-weight:800;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss span{color:var(--go);font-weight:800;text-transform:uppercase;white-space:nowrap}
.ss-lead{display:flex;flex-direction:column;align-items:center;padding:16px;background:linear-gradient(180deg,rgba(6,14,40,.9),rgba(10,28,76,.8));border-top:5px solid var(--pc)}.ss-lead img{max-width:300px;max-height:130px;object-fit:contain}.ss-lead b{font:900 italic 38px var(--f);text-transform:uppercase}.ss-lead small{font:800 18px var(--f);letter-spacing:.12em;color:var(--go)}

/* champion */
.conf{position:absolute;inset:0;overflow:hidden}
.conf i{position:absolute;top:-4%;height:14px;opacity:.9;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(1150px) rotate(720deg)}}
.ch{position:absolute;inset:0;display:flex;padding:110px 96px 70px;gap:70px;align-items:center}
.ch-main{flex:1;display:flex;flex-direction:column;align-items:flex-start}
.ch-main small{font:800 26px var(--f);letter-spacing:.44em;color:var(--acc)}
.ch-main h1{font:900 italic 190px/1 var(--f);text-transform:uppercase;background:linear-gradient(180deg,#fff 18%,#ffd23f 70%,#e8a400);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 8px 0 rgba(0,0,0,.5)) drop-shadow(0 0 60px rgba(255,210,63,.5));animation:itIn 1.1s both}
.ch-card{display:flex;gap:30px;align-items:center;margin-top:24px;animation:itIn 1.1s .5s both}
.ch-face{width:200px;height:200px;border-radius:50%;object-fit:cover;border:6px solid var(--go);background:#09112a;box-shadow:0 0 60px rgba(255,210,63,.5)}
.ch-card b{display:block;font:900 italic 84px/1 var(--f);text-transform:uppercase}.ch-card span{display:block;font:700 34px var(--f);color:#a9c8ea;margin-top:4px}.ch-card em{display:block;font:900 26px var(--f);font-style:normal;letter-spacing:.14em;color:var(--go);margin-top:10px}
.ch-art{margin-top:10px;height:210px;animation:itIn 1.2s .9s both}.ch-art img{height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(0,0,0,.6))}
.ch-tab{width:520px;display:flex;flex-direction:column;gap:6px;animation:itIn 1s .8s both}
.cr{display:flex;align-items:center;gap:14px;height:62px;padding:0 20px 0 0;background:linear-gradient(90deg,rgba(4,10,30,.9),rgba(8,22,58,.78));border-left:6px solid var(--pc)}
.cr b{width:56px;text-align:center;font:900 italic 32px var(--f)}.cr.p1 b{color:var(--go)}.cr.p2 b{color:#d5dcec}.cr.p3 b{color:#e0a066}
.cr img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.6)}.cr span{flex:1;font:900 italic 26px var(--f);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cr em{font:900 28px var(--f);font-style:normal}