/* BATTLE MVP - Round Review v3. Namespace .rv-* only.
   hx-* is the HUB shell; .hx-bar is the menu - never touched here.
   Motion is opt-out via prefers-reduced-motion at the bottom. */

.rv-shell{
  --rv-brand: var(--bm-brand,#00ffa6);
  --rv-card:  var(--bm-card,#0c1218);
  --rv-bg:    var(--bm-bg,#050b12);
  --rv-text:  var(--bm-text,#eaf1ff);
  --rv-muted: color-mix(in srgb, var(--rv-text) 46%, transparent);
  --rv-dim:   color-mix(in srgb, var(--rv-text) 26%, transparent);
  --rv-line:  color-mix(in srgb, var(--rv-text) 9%, transparent);
  --rv-sunk:  color-mix(in srgb, var(--rv-text) 5%, transparent);
  --rv-win:   var(--rv-brand);
  --rv-loss:  #ff4d63;
  --rv-ct:    #4d9dff;
  --rv-t:     #ffa733;
  --rv-unk:   color-mix(in srgb, var(--rv-text) 13%, transparent);
  --rv-glow:  0 0 24px color-mix(in srgb, var(--rv-brand) 22%, transparent);
  color: var(--rv-text);
  font-variant-numeric: tabular-nums;
}

@keyframes rvFill { from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes rvRise { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
@keyframes rvDash { from{ stroke-dashoffset:var(--rv-dash);} to{ stroke-dashoffset:var(--rv-off);} }
@keyframes rvDraw { from{ stroke-dashoffset:1200;} to{ stroke-dashoffset:0;} }
@keyframes rvPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--rv-brand) 55%,transparent);} 50%{ box-shadow:0 0 0 5px transparent;} }
@keyframes rvSweep{ from{ background-position:-140% 0;} to{ background-position:240% 0;} }

/* ---------- header ---------- */
.rv-top{
  display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--rv-line);
  animation:rvRise .34s ease both;
}
.rv-top h1{
  margin:0; font-size:22px; line-height:1; letter-spacing:-.01em;
  background:linear-gradient(92deg, var(--rv-text) 30%, var(--rv-brand));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rv-top p{ margin:7px 0 0; font-size:12.5px; color:var(--rv-muted); max-width:56ch; }
.rv-top-r{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.rv-seg{ display:inline-flex; border:1px solid var(--rv-line); border-radius:9px; overflow:hidden; }
.rv-seg a{
  padding:7px 14px; font-size:11px; font-weight:800; letter-spacing:.08em;
  color:var(--rv-muted); text-decoration:none; transition:background .18s,color .18s;
}
.rv-seg a + a{ border-left:1px solid var(--rv-line); }
.rv-seg a:hover{ color:var(--rv-text); background:var(--rv-sunk); }
.rv-seg a.is-active{ background:var(--rv-brand); color:var(--rv-bg); box-shadow:var(--rv-glow); }
.rv-seg a i{ font-style:normal; opacity:.6; margin-left:5px; font-weight:600; }

.rv-chip{
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; white-space:nowrap;
  padding:5px 10px; border-radius:7px; border:1px solid var(--rv-line); color:var(--rv-muted);
}
.rv-chip.is-warn{
  border-color:color-mix(in srgb, var(--rv-loss) 45%, transparent);
  color:color-mix(in srgb, var(--rv-loss) 88%, var(--rv-text));
}

/* ---------- SPINE: rounds first, right under the header ---------- */
.rv-spine{
  border:1px solid var(--rv-line); border-radius:14px; margin-bottom:14px;
  background:
    radial-gradient(120% 130% at 0% 0%, color-mix(in srgb,var(--rv-brand) 7%,transparent), transparent 62%),
    var(--rv-card);
  overflow:hidden; animation:rvRise .4s .04s ease both;
}
.rv-spine-h{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--rv-line);
}
.rv-spine-map{ font-weight:800; font-size:14px; letter-spacing:.01em; }
.rv-spine-sc{ font-weight:800; font-size:15px; }
.rv-spine-sc.is-w{ color:var(--rv-win); }
.rv-spine-sc.is-l{ color:var(--rv-loss); }
.rv-spine-meta{ font-size:11px; color:var(--rv-dim); margin-left:auto; }
.rv-spine-link{ font-size:11px; color:var(--rv-brand); text-decoration:none; }
.rv-spine-link:hover{ text-decoration:underline; }
.rv-spine-b{ padding:14px 16px 12px; }

/* momentum curve behind the rail */
.rv-mom{ display:block; width:100%; height:52px; margin-bottom:2px; overflow:visible; }
.rv-mom .ln{ fill:none; stroke:var(--rv-brand); stroke-width:2; stroke-linejoin:round; stroke-linecap:round;
             stroke-dasharray:1200; animation:rvDraw 1.1s .15s ease both; }
.rv-mom .ar{ fill:url(#rvMomG); opacity:.5; }
.rv-mom .zr{ stroke:var(--rv-line); stroke-width:1; stroke-dasharray:3 4; }
.rv-mom .pt{ fill:var(--rv-text); }

/* round rail */
.rv-rail{ display:flex; gap:4px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:thin; }
.rv-rail::-webkit-scrollbar{ height:5px; }
.rv-rail::-webkit-scrollbar-thumb{ background:var(--rv-line); border-radius:99px; }
.rv-r{
  flex:0 0 auto; width:34px; height:46px; padding:0; cursor:pointer; position:relative;
  border:0; border-radius:7px; background:var(--rv-unk); color:var(--rv-bg);
  font:800 11px/1 inherit; display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:7px; overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4), box-shadow .16s, filter .16s;
}
.rv-r::before{ content:''; position:absolute; inset:0 0 auto 0; height:5px; background:var(--rv-dim); }
.rv-r.side-ct::before{ background:var(--rv-ct); }
.rv-r.side-t::before{ background:var(--rv-t); }
.rv-r.is-w{ background:linear-gradient(180deg, color-mix(in srgb,var(--rv-win) 88%,#fff 12%), var(--rv-win)); }
.rv-r.is-l{ background:linear-gradient(180deg, color-mix(in srgb,var(--rv-loss) 88%,#fff 12%), var(--rv-loss)); }
.rv-r.obj::after{ content:''; position:absolute; inset:auto 0 0 0; height:4px; background:var(--rv-t); }
.rv-r.obj-def::after{ background:var(--rv-ct); }
.rv-r.is-open{ box-shadow:inset 0 0 0 2px rgba(0,0,0,.4); }
.rv-r:hover{ transform:translateY(-3px) scale(1.04); filter:brightness(1.1); z-index:2; }
.rv-r.is-sel{ transform:translateY(-3px); box-shadow:0 0 0 2px var(--rv-text), var(--rv-glow);
              animation:rvPulse 2s ease-in-out infinite; z-index:3; }
.rv-half{ flex:0 0 auto; width:2px; border-radius:1px; background:var(--rv-line); margin:6px 6px; align-self:stretch; }
.rv-legend{ display:flex; gap:15px; flex-wrap:wrap; font-size:10px; color:var(--rv-dim); }
.rv-legend b{ display:inline-block; width:9px; height:3px; border-radius:2px; margin-right:5px; vertical-align:middle; }

/* ---------- round detail ---------- */
.rv-det{ padding:14px 16px 16px; border-top:1px solid var(--rv-line);
         background:linear-gradient(180deg, var(--rv-sunk), transparent 70%); }
.rv-det[hidden]{ display:none; }
.rv-det-in{ animation:rvRise .3s ease both; }
.rv-det-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.rv-det-n{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
.rv-tag{
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:800;
  padding:4px 9px; border-radius:6px; border:1px solid var(--rv-line); color:var(--rv-muted);
}
.rv-tag.is-ct{ color:var(--rv-ct); border-color:color-mix(in srgb,var(--rv-ct) 42%,transparent);
               background:color-mix(in srgb,var(--rv-ct) 9%,transparent); }
.rv-tag.is-t{ color:var(--rv-t); border-color:color-mix(in srgb,var(--rv-t) 42%,transparent);
              background:color-mix(in srgb,var(--rv-t) 9%,transparent); }

/* time axis */
.rv-axis{ position:relative; height:30px; border-radius:8px; margin-bottom:6px;
          background:linear-gradient(90deg,var(--rv-sunk),color-mix(in srgb,var(--rv-text) 8%,transparent)); }
.rv-axis i{ position:absolute; top:6px; bottom:6px; width:2px; border-radius:2px;
            background:color-mix(in srgb,var(--rv-text) 42%,transparent); transition:transform .15s; }
.rv-axis i:hover{ transform:scaleY(1.25); }
.rv-axis i.me{ background:var(--rv-brand); width:3px; top:3px; bottom:3px;
               box-shadow:0 0 9px color-mix(in srgb,var(--rv-brand) 65%,transparent); }
.rv-axis i.blood{ background:var(--rv-text); width:3px; top:2px; bottom:2px; }
.rv-axis i.plant{ background:var(--rv-t); width:3px; top:0; bottom:0;
                  box-shadow:0 0 9px color-mix(in srgb,var(--rv-t) 65%,transparent); }
.rv-axis-l{ display:flex; gap:16px; flex-wrap:wrap; font-size:10.5px; color:var(--rv-dim); margin-bottom:14px; }
.rv-axis-l b{ color:var(--rv-text); font-weight:700; }

.rv-det-g{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; }
@media (max-width:820px){ .rv-det-g{ grid-template-columns:1fr; } }
.rv-ev{ display:grid; grid-template-columns:44px 1fr; gap:10px; padding:6px 0; font-size:12.5px; align-items:baseline; }
.rv-ev + .rv-ev{ border-top:1px solid var(--rv-line); }
.rv-ev-t{ color:var(--rv-dim); font-size:10.5px; font-weight:700; }
.rv-ev-b strong{ font-weight:700; }
.rv-ev-b em{ font-style:normal; color:var(--rv-dim); }
.rv-ev.is-me{ margin:0 -10px; padding-left:10px; padding-right:10px; border-radius:6px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--rv-brand) 13%,transparent), transparent 72%);
  box-shadow:inset 2px 0 0 var(--rv-brand); }
.rv-mini{ font-size:9px; padding:2px 6px; border-radius:4px; border:1px solid var(--rv-line);
          color:var(--rv-dim); margin-left:6px; letter-spacing:.05em; font-weight:700; }
.rv-mini.hs{ color:var(--rv-text); border-color:color-mix(in srgb,var(--rv-text) 26%,transparent); }
.rv-loading{ color:var(--rv-dim); font-size:12px; padding:16px 0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--rv-text) 12%,transparent),transparent);
  background-size:200% 100%; animation:rvSweep 1.3s linear infinite;
  -webkit-background-clip:text; background-clip:text; }

/* ---------- KPI + gauges ---------- */
.rv-kpis{
  display:grid; grid-template-columns:auto repeat(4,1fr); gap:1px; margin-bottom:14px;
  background:var(--rv-line); border:1px solid var(--rv-line); border-radius:14px; overflow:hidden;
  animation:rvRise .4s .08s ease both;
}
@media (max-width:980px){ .rv-kpis{ grid-template-columns:auto repeat(2,1fr); } }
@media (max-width:560px){ .rv-kpis{ grid-template-columns:1fr 1fr; } }
.rv-dial{ background:var(--rv-card); padding:14px 18px; display:flex; align-items:center; gap:14px; }
.rv-dial svg{ width:74px; height:74px; flex:0 0 auto; }
.rv-dial .tr{ fill:none; stroke:var(--rv-sunk); stroke-width:8; }
.rv-dial .vl{ fill:none; stroke:var(--rv-brand); stroke-width:8; stroke-linecap:round;
              animation:rvDash 1s .2s cubic-bezier(.3,.9,.3,1) both;
              filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rv-brand) 55%,transparent)); }
.rv-dial .vl.is-low{ stroke:var(--rv-loss); filter:drop-shadow(0 0 6px color-mix(in srgb,var(--rv-loss) 55%,transparent)); }
.rv-dial .vl.is-mid{ stroke:#ffcc55; filter:none; }
.rv-dial-t text{ fill:var(--rv-text); }
.rv-dial-m span{ display:block; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--rv-dim); }
.rv-dial-m b{ display:block; font-size:21px; font-weight:800; letter-spacing:-.02em; margin-top:3px; }
.rv-dial-m em{ font-style:normal; font-size:11px; color:var(--rv-dim); }
.rv-kpi{ background:var(--rv-card); padding:13px 15px; position:relative; overflow:hidden; }
.rv-kpi::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
                background:linear-gradient(90deg,var(--rv-brand),transparent); opacity:.28;
                transform-origin:left; animation:rvFill .7s .3s ease both; }
.rv-kpi span{ display:block; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
              color:var(--rv-dim); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-kpi b{ font-size:20px; font-weight:800; letter-spacing:-.02em; line-height:1; }
.rv-kpi b i{ font-style:normal; font-size:11px; color:var(--rv-dim); margin-left:2px; font-weight:700; }
.rv-kpi b u{ text-decoration:none; color:var(--rv-dim); font-weight:600; }

/* ---------- cards ---------- */
.rv-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:14px; align-items:start; }
@media (max-width:1040px){ .rv-grid{ grid-template-columns:1fr; } }
.rv-card{
  border:1px solid var(--rv-line); border-radius:14px; background:var(--rv-card);
  padding:15px 17px; margin-bottom:14px; animation:rvRise .4s .12s ease both;
  transition:border-color .2s;
}
.rv-card:hover{ border-color:color-mix(in srgb,var(--rv-text) 15%,transparent); }
.rv-card h2{ margin:0; font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
             color:var(--rv-dim); font-weight:800; }
.rv-hint{ margin:7px 0 13px; font-size:11.5px; color:var(--rv-muted); line-height:1.45; }
.rv-na{ color:var(--rv-dim); }

.rv-l{ display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:9px 0; align-items:baseline; }
.rv-l + .rv-l{ border-top:1px solid var(--rv-line); }
.rv-l-k{ font-size:12.5px; }
.rv-l-k em{ font-style:normal; color:var(--rv-dim); font-size:11px; margin-left:7px; }
.rv-l-v{ font-size:15px; font-weight:800; }
.rv-l-v small{ font-size:10.5px; color:var(--rv-dim); margin-left:2px; font-weight:700; }
.rv-l-t{ grid-column:1/-1; height:4px; border-radius:3px; background:var(--rv-sunk); overflow:hidden; }
.rv-l-f{ height:100%; border-radius:3px; background:var(--rv-brand);
         transform-origin:left; animation:rvFill .8s .25s cubic-bezier(.3,.9,.3,1) both; }
.rv-l-f.is-low{ background:var(--rv-loss); }
.rv-l-f.is-mid{ background:#ffcc55; }
.rv-l-f.is-ct{ background:linear-gradient(90deg,var(--rv-ct),color-mix(in srgb,var(--rv-ct) 55%,transparent)); }
.rv-l-f.is-t{ background:linear-gradient(90deg,var(--rv-t),color-mix(in srgb,var(--rv-t) 55%,transparent)); }

.rv-dist{ display:flex; height:9px; border-radius:5px; overflow:hidden; margin:5px 0 12px; background:var(--rv-sunk); }
.rv-dist i{ display:block; height:100%; transform-origin:left; animation:rvFill .7s .3s ease both; }
.rv-dist-l{ display:flex; gap:13px; flex-wrap:wrap; font-size:10.5px; color:var(--rv-muted); margin-bottom:5px; }
.rv-dist-l b{ display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:5px; }

/* zone bars: deaths vs kills by callout */
.rv-z{ display:grid; grid-template-columns:1fr 84px; gap:9px; align-items:center; padding:5px 0; font-size:12px; }
.rv-z-n{ color:var(--rv-muted); }
.rv-z-b{ display:flex; align-items:center; gap:4px; }
.rv-z-b i{ display:block; height:7px; border-radius:4px; transform-origin:left;
           animation:rvFill .7s .3s ease both; }
.rv-z-b i.d{ background:var(--rv-loss); }
.rv-z-b i.k{ background:var(--rv-brand); }
.rv-z-b b{ font-size:10px; color:var(--rv-dim); font-weight:700; }

/* ---------- empty ---------- */
.rv-empty{ text-align:center; padding:52px 24px; }
.rv-empty-i{ font-size:36px; margin-bottom:13px; }
.rv-empty h3{ margin:0 0 8px; font-size:19px; }
.rv-empty p{ margin:0 auto 20px; color:var(--rv-muted); max-width:44ch; font-size:13px; }
.rv-cta{ display:inline-flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.rv-cta a{ padding:11px 20px; border-radius:10px; text-decoration:none; font-weight:800; font-size:12.5px;
           background:var(--rv-brand); color:var(--rv-bg); box-shadow:var(--rv-glow); transition:transform .15s; }
.rv-cta a:hover{ transform:translateY(-2px); }
.rv-cta a.is-ghost{ background:transparent; color:var(--rv-text); border:1px solid var(--rv-line); box-shadow:none; }

@media (prefers-reduced-motion: reduce){
  .rv-shell *{ animation:none !important; transition:none !important; }
}