:root{--cochonnet:#f2c230;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;--body:'Barlow','Segoe UI',Arial,sans-serif}
#stage{position:absolute;top:0;left:0;width:1920px;height:1080px;transform-origin:0 0;color:#fff;font-family:var(--body);overflow:hidden}
#stage .hide{opacity:0!important;transform:translateY(-20px)!important;pointer-events:none}

#board{position:absolute;left:var(--bx);top:var(--by);scale:var(--bs);transform-origin:0 0;width:620px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0008;transition:opacity .5s,transform .5s;background:color-mix(in srgb,var(--boardBg) var(--boardA),transparent)}
#head{display:flex;justify-content:space-between;padding:10px 18px;font:700 24px var(--display);letter-spacing:.12em;text-transform:uppercase;background:var(--headBg)}
.row{display:flex;align-items:center;height:80px;border-top:1px solid #fff2}
.bar{width:14px;align-self:stretch}
.name{flex:1;min-width:0;padding-left:18px;font:700 40px var(--display);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.balls{display:flex;gap:6px;margin-right:16px}
.ball{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#eef,#667);border:1px solid #000}
.ball.off{opacity:.15}
.score{width:104px;align-self:stretch;display:flex;align-items:center;justify-content:center;font:800 62px var(--display);background:var(--scoreBg);color:var(--scoreFg)}
.lead .name::after{content:"  ◀ MÈNE";font-size:20px;color:var(--cochonnet);letter-spacing:.1em}
#foot{display:flex;justify-content:space-between;padding:8px 18px;font-size:21px;background:#000a;color:#ddd;font-variant-numeric:tabular-nums}

#lower{position:absolute;left:var(--lx);top:var(--ly);scale:var(--ls);transform-origin:0 0;transition:opacity .5s,transform .5s}
#lower.hide{transform:translateX(-80px)!important}
#lower .n{background:var(--lowerBg);color:var(--lowerFg);font:800 54px var(--display);text-transform:uppercase;padding:6px 32px;border-left:16px solid var(--c)}
#lower .s{background:var(--lowerSubBg);color:var(--lowerSubFg);font-size:28px;padding:8px 32px}

#pop{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0b3d2eee;border:4px solid var(--cochonnet);border-radius:22px;padding:30px 80px;text-align:center;transition:.45s;box-shadow:0 12px 50px #000a}
#stage #pop.hide{transform:translate(-50%,-50%) scale(.6)!important}
#pop .t{font:700 40px var(--display);letter-spacing:.12em;color:var(--cochonnet);text-transform:uppercase}
#pop .v{font:800 130px/1 var(--display)}

#ticker{position:absolute;top:var(--ty);left:0;right:0;height:calc(64px*var(--ts));background:var(--tickerBg);color:var(--tickerFg);display:flex;align-items:center;justify-content:center;font-size:calc(30px*var(--ts));transition:opacity .5s,transform .5s}
#ticker.hide{transform:translateY(30px)!important}

#stats{position:absolute;left:var(--sx);top:var(--sy);scale:var(--ss);transform-origin:0 0;width:500px;border-radius:12px;overflow:hidden;box-shadow:0 8px 28px #0008;transition:opacity .5s,transform .5s;background:var(--statsBg);color:var(--statsFg)}
#stats .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 18px;border-left:14px solid var(--c);background:#0006;font:800 40px var(--display);text-transform:uppercase}
#stats .sh small{font:500 20px var(--body);opacity:.8;text-transform:none}
#stats .sg{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#fff2}
#stats .sg div{background:var(--statsBg);padding:12px 18px;display:flex;flex-direction:column}
#stats .sg b{font:800 56px/1 var(--display);font-variant-numeric:tabular-nums}
#stats .sg span{font-size:19px;opacity:.8;margin-top:2px}
#stats .rate b{color:var(--cochonnet)}

#logoImg{position:absolute;left:var(--gx);top:var(--gy);max-width:520px;object-fit:contain;transition:opacity .5s,transform .5s;filter:drop-shadow(0 6px 14px #0008);-webkit-user-drag:none}