/* ===================================================================
   ARENA · linguagem de transmissão esportiva (torre de cronometragem)
   =================================================================== */
:root{
  --cut:14px;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
}
body.arena{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.014) 0 2px, transparent 2px 110px),
    radial-gradient(1200px 560px at 82% -14%, rgba(237,114,3,.16), transparent 62%),
    radial-gradient(700px 380px at -6% 112%, rgba(237,114,3,.05), transparent 60%),
    #0B0910;
}

/* ---------- topbar broadcast ---------- */
body.arena .topbar{
  height:60px;background:#0D0A11;border-bottom:1px solid var(--line);position:relative
}
body.arena .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--accent) 0 180px,transparent 480px)
}
.round-title{font-family:var(--display);font-style:italic;font-weight:800;font-size:24px;
  text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:baseline;gap:10px}
.round-title em{font-style:italic;color:var(--accent)}
.round-title .slash{color:var(--accent);font-weight:900}
.live-bug{display:flex;align-items:center;gap:8px;background:#B3121A;color:#fff;
  font-family:var(--display);font-style:italic;font-weight:800;font-size:14px;letter-spacing:.12em;
  padding:5px 14px 5px 11px;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.live-bug .live-dot{background:#fff}
.live-bug.demo{background:#8A6A00}

/* ---------- placar gigante ---------- */
.scorestrip{grid-area:kpis;display:flex;align-items:stretch;background:var(--panel);
  border:1px solid var(--line);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.score{flex:1;display:flex;flex-direction:column;justify-content:center;padding:10px 26px;position:relative}
.score + .score::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;
  background:var(--line2);transform:skewX(-14deg)}
.score .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);font-weight:700}
.score .num{font-family:var(--display);font-style:italic;font-weight:800;font-size:52px;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;margin-top:2px}
.score .num small{font-size:24px;font-weight:700;color:var(--sec);margin-left:2px}
.score .sub{font-size:11px;color:var(--sec);margin-top:4px}
.score.lead .num{color:var(--gold);text-shadow:0 0 26px rgba(246,165,0,.35)}
.score.acc .num{color:var(--accent)}

/* ---------- painéis com corte diagonal ---------- */
body.arena .panel{border-radius:0;background:rgba(20,16,25,.86);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
body.arena .p-head{border-bottom:1px solid var(--line);padding:12px 18px}
body.arena .p-head h2{font-family:var(--display);font-style:italic;font-weight:800;font-size:19px;
  letter-spacing:.06em;color:var(--ink)}
body.arena .p-head h2::before{content:"//";width:auto;height:auto;background:none;
  color:var(--accent);font-weight:900;margin-right:2px}

/* ---------- pista de corrida ---------- */
.gp{position:relative;display:flex;flex-direction:column;justify-content:space-evenly;height:100%}
.gp-row{display:grid;grid-template-columns:74px 1fr;gap:6px;align-items:center;position:relative;padding:6px 0}
.gp-pos{font-family:var(--display);font-style:italic;font-weight:900;font-size:58px;line-height:1;
  text-align:center;color:transparent;-webkit-text-stroke:1.5px var(--line2)}
.gp-row[data-pos="1"] .gp-pos{color:var(--gold);-webkit-text-stroke:0;text-shadow:0 0 30px rgba(246,165,0,.45)}
.gp-row[data-pos="2"] .gp-pos{color:#C8CDD7;-webkit-text-stroke:0;opacity:.85}
.gp-row[data-pos="3"] .gp-pos{color:#C47C49;-webkit-text-stroke:0;opacity:.85}
.gp-main{min-width:0}
.gp-name{display:flex;align-items:baseline;gap:12px;margin-bottom:5px}
.gp-name b{font-family:var(--display);font-style:italic;font-weight:800;font-size:26px;line-height:1;
  text-transform:uppercase;letter-spacing:.05em}
.gp-name small{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.gp-name .mv{font-weight:800}
.gp-pct{margin-left:auto;font-family:var(--display);font-style:italic;font-weight:800;font-size:34px;
  line-height:1;font-variant-numeric:tabular-nums}
.gp-row[data-pos="1"] .gp-pct{color:var(--gold)}
.gp-track{height:26px;background:rgba(0,0,0,.5);border:1px solid var(--line);position:relative;
  transform:skewX(-14deg);overflow:hidden}
.gp-goal{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed rgba(255,255,255,.28)}
.gp-fill{position:absolute;left:0;top:0;bottom:0;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg, color-mix(in srgb,var(--fc) 55%,#000), var(--fc));
  box-shadow:0 0 18px color-mix(in srgb,var(--fc) 60%,transparent)}
.gp-fill::before{content:"";position:absolute;inset:0;opacity:.28;
  background:repeating-linear-gradient(-60deg, rgba(255,255,255,.9) 0 3px, transparent 3px 16px);
  animation:chevrons 1.1s linear infinite}
@keyframes chevrons{from{background-position:0 0}to{background-position:32px 0}}
.gp-row[data-pos="1"] .gp-fill::after{content:"";position:absolute;top:0;bottom:0;width:70px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  animation:sweep 2.8s ease-in-out infinite}
@keyframes sweep{0%,55%{left:-90px}85%,100%{left:110%}}
.gp-foot{flex:none;border-top:1px solid var(--line);padding:10px 18px;display:flex;gap:22px}
.gp-foot .stat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.gp-foot .stat b{color:var(--ink);font-family:var(--display);font-style:italic;font-size:16px;
  font-weight:800;margin-left:6px;letter-spacing:.02em}

/* marca d'água do líder */
.gp-watermark{position:absolute;right:-8px;bottom:-30px;font-family:var(--display);font-style:italic;
  font-weight:900;font-size:150px;line-height:1;color:transparent;pointer-events:none;
  -webkit-text-stroke:1px rgba(237,114,3,.14);letter-spacing:.02em;user-select:none}

/* ---------- torre de cronometragem ---------- */
.tower-row{display:grid;grid-template-columns:40px 5px 1fr auto 64px;gap:10px;align-items:center;
  padding:7px 16px 7px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.tower-row .tw-pos{font-family:var(--display);font-style:italic;font-weight:800;font-size:19px;
  text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.tower-row:nth-child(1) .tw-pos{color:var(--gold)}
.tower-row:nth-child(2) .tw-pos{color:#C8CDD7}
.tower-row:nth-child(3) .tw-pos{color:#C47C49}
.tower-row .tw-stripe{width:5px;height:22px;transform:skewX(-14deg)}
.tower-row .tw-name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tower-row .tw-team{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.tower-row .tw-pct{font-family:var(--display);font-style:italic;font-weight:800;font-size:21px;
  text-align:right;font-variant-numeric:tabular-nums}
.tower-row:nth-child(1){background:linear-gradient(90deg,rgba(246,165,0,.12),transparent 70%)}

/* ---------- ticker broadcast ---------- */
body.arena .ticker{height:38px;background:#0D0A11;border-top:2px solid var(--accent)}
body.arena .ticker .tag{font-family:var(--display);font-style:italic;font-weight:800;font-size:15px;
  letter-spacing:.1em;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);padding:0 22px 0 16px}
body.arena .tk{font-family:var(--display);font-size:16px;letter-spacing:.03em}
body.arena .tk b{font-style:italic;font-weight:800;text-transform:uppercase}
body.arena .tk .v{font-style:italic;font-weight:800;font-size:17px}

/* legenda / gráfico */
body.arena .legend .lg{font-family:var(--display);font-size:14px;letter-spacing:.05em;text-transform:uppercase}

/* ===================================================================
   GESTÃO DE FLAGS · mesma linguagem broadcast
   =================================================================== */
.zones.scorestrip{display:flex;margin-bottom:16px;grid-area:auto}
.score.zrow{flex-direction:row;align-items:center;gap:16px;padding:14px 26px}
.score.zrow>div{display:flex;flex-direction:column}
.score.zrow .num{font-size:46px}
.score.zrow.z-red .num{color:var(--red);text-shadow:0 0 22px rgba(229,72,77,.35)}
.score.zrow.z-yel .num{color:var(--yellow);text-shadow:0 0 22px rgba(232,194,26,.3)}
.score.zrow.z-ok .num{color:var(--ok)}

body.arena .zone-sec{border-radius:0;position:relative;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
body.arena .zone-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;opacity:.8}
body.arena .zone-sec.z-red::before{
  background:repeating-linear-gradient(-55deg,var(--red) 0 14px,#20090B 14px 28px)}
body.arena .zone-sec.z-yellow::before{
  background:repeating-linear-gradient(-55deg,var(--yellow) 0 14px,#1E1905 14px 28px)}
body.arena .zone-sec.z-safe::before{background:linear-gradient(90deg,var(--ok) 0 160px,transparent 420px);opacity:.5}
body.arena .zone-head h2{font-family:var(--display);font-style:italic;font-weight:800;font-size:27px;
  text-transform:uppercase;letter-spacing:.05em}
body.arena .zone-head p{font-size:13px}

body.arena .fcard{border-radius:0;background:rgba(13,10,15,.6);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
body.arena .fcard-main>b{font-family:var(--display);font-style:italic;font-weight:800;font-size:24px;
  text-transform:uppercase;letter-spacing:.04em}
body.arena .fcard-main p{font-size:13px}
body.arena .fcard-main p b{font:inherit;font-weight:700;color:var(--ink)}
body.arena .fcard.crit{background:rgba(38,10,12,.55)}
body.arena .fcard-ring text{font-family:var(--display);font-style:italic}

body.arena .scard{border-radius:0;background:rgba(13,10,15,.55);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
body.arena .scard b{font-family:var(--display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
body.arena .scard .spct{font-family:var(--display);font-style:italic;font-weight:800;font-size:17px}
body.arena .scard .sdot{transform:skewX(-14deg);width:6px;height:16px;border-radius:0}

body.arena td b{font-family:var(--display);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.04em}
body.arena .hcell{border-radius:0;font-family:var(--display);font-style:italic;font-weight:700;font-size:12.5px}
body.arena .badge{border-radius:0;font-family:var(--display);font-style:italic;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
body.arena .chip{border-radius:0}
body.arena .chip i{transform:skewX(-14deg);border-radius:0;width:6px;height:10px}
body.arena .tdot{border-radius:0}
body.arena .tdot .v{font-family:var(--display);font-style:italic;font-size:13px}

/* ---------- como funciona (régua + regras) ---------- */
.rules-body{padding:22px 20px 16px}
.ruler-track{display:flex;height:26px;position:relative;margin:14px 6px 34px;
  transform:skewX(-14deg);border:1px solid var(--line2)}
.ruler-seg{display:flex;align-items:center;justify-content:center;position:relative}
.ruler-seg + .ruler-seg{border-left:2px solid #0B090F}
.ruler-seg span{transform:skewX(14deg);font-family:var(--display);font-style:italic;font-weight:800;
  font-size:14px;letter-spacing:.05em;color:rgba(0,0,0,.75)}
.ruler-mark{position:absolute;top:calc(100% + 6px);transform:translateX(-50%) skewX(14deg);
  font:700 10px Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--sec);white-space:nowrap}
.ruler-mark i{position:absolute;left:50%;bottom:calc(100% + 2px);width:2px;height:34px;background:var(--ink);opacity:.7}
.rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:6px}
.rule-lane{display:flex;gap:12px;align-items:flex-start;background:rgba(13,10,15,.55);
  border:1px solid var(--line);padding:14px 16px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.rule-lane .rule-ico{flex:none}
.rule-lane .rl-title{display:block;font-family:var(--display);font-style:italic;font-weight:800;
  font-size:19px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.rule-lane p{margin:0;font-size:12.5px;color:var(--sec);line-height:1.55}
.rule-lane p b{color:var(--ink)}
@media(max-width:1000px){.rules-grid{grid-template-columns:1fr}}

/* ---------- filtro de período ---------- */
.pd{position:relative}
.pd-btn{display:flex;align-items:center;gap:12px;background:var(--inset);border:1px solid var(--line2);
  color:var(--sec);padding:8px 16px;cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.pd-btn:hover{color:var(--ink);border-color:var(--accent)}
.pd-btn .pd-tag{font:700 9px Montserrat,sans-serif;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.pd-btn b{font-family:var(--display);font-style:italic;font-weight:800;font-size:17px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.pd-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:250px;z-index:80;
  background:#17121C;border:1px solid var(--line2);box-shadow:0 18px 48px rgba(0,0,0,.65);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  padding:8px}
.pd-opt{padding:10px 16px;cursor:pointer;font-family:var(--display);font-style:italic;font-weight:700;
  font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--sec);border-left:3px solid transparent}
.pd-opt:hover{background:rgba(237,114,3,.12);color:var(--ink)}
.pd-opt.active{color:var(--accent);border-left-color:var(--accent);background:rgba(237,114,3,.07)}
.pd-custom{display:none;flex-direction:column;gap:9px;border-top:1px solid var(--line);
  margin-top:8px;padding:12px 16px 8px}
.pd-custom.open{display:flex}
.pd-custom label{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:700 10px Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pd-custom select{flex:1;max-width:160px}
.pd-apply{margin-top:4px;background:var(--accent);color:#170B02;border:0;padding:9px 14px;cursor:pointer;
  font-family:var(--display);font-style:italic;font-weight:800;font-size:15px;letter-spacing:.08em;
  text-transform:uppercase;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.pd-apply:hover{filter:brightness(1.1)}

@media(prefers-reduced-motion:reduce){
  .gp-fill::before,.gp-row[data-pos="1"] .gp-fill::after{animation:none}
}