:root{
  --bg:#050816;
  --panel:rgba(10,18,38,.78);
  --panel2:rgba(7,13,28,.9);
  --line:rgba(255,255,255,.16);
  --text:#f8fbff;
  --muted:#aab6d3;
  --npn:#38bdf8;
  --npn2:#22c55e;
  --n0par:#fb923c;
  --n0par2:#ef4444;
  --gold:#facc15;
  --green:#16a34a;
  --red:#dc2626;
  --gray:#64748b;
}

*{box-sizing:border-box}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,.22), transparent 35%),
    radial-gradient(circle at 75% 12%, rgba(251,146,60,.20), transparent 34%),
    radial-gradient(circle at 50% 85%, rgba(34,197,94,.16), transparent 34%),
    linear-gradient(180deg,#040711 0%,#081225 48%,#03050c 100%);
  overflow-x:hidden;
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,.15));
}

body:after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 70px, rgba(56,189,248,.06) 71px 73px, transparent 74px 150px);
  animation:rfpulse 12s linear infinite;
  opacity:.5;
}

@keyframes rfpulse{
  from{transform:scale(.98) rotate(0deg)}
  to{transform:scale(1.05) rotate(3deg)}
}

a{color:inherit}

.olympics-page{
  position:relative;
  z-index:1;
  width:min(1380px, calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 42px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.olympics-logo{
  display:inline-grid;
  width:36px;
  height:36px;
  place-items:center;
  border:1px solid rgba(34,197,94,.5);
  background:#050807;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  padding:3px;
}

.olympics-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 4px rgba(70,224,107,.35));
}

.live-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(22,163,74,.16);
  border:1px solid rgba(34,197,94,.45);
  color:#dcfce7;
  font-weight:800;
  box-shadow:0 0 22px rgba(22,163,74,.18);
}

.live-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 12px #22c55e;
  animation:blink 1.2s infinite;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:9px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:13px;
}

.btn:hover{background:rgba(255,255,255,.14)}

.hero{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(56,189,248,.18),transparent 28%),
    linear-gradient(225deg,rgba(251,146,60,.20),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)),
    var(--panel);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  padding:28px;
}

.hero:before{
  content:"";
  position:absolute;
  right:-80px;
  top:-80px;
  width:300px;
  height:300px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.22);
  box-shadow:0 0 80px rgba(56,189,248,.18);
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:24px;
  align-items:stretch;
}

.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:#fde68a;
  background:rgba(250,204,21,.12);
  border:1px solid rgba(250,204,21,.35);
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}

h1{
  margin:16px 0 8px;
  line-height:.94;
  font-size:clamp(48px,8vw,108px);
  letter-spacing:-.07em;
  text-transform:uppercase;
}

h1 span{
  display:block;
  background:linear-gradient(90deg,#facc15,#38bdf8,#22c55e,#fb923c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.45));
}

.subtitle{
  color:var(--muted);
  font-size:clamp(16px,2vw,22px);
  max-width:820px;
  line-height:1.45;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}

.mini-stat{
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.22);
}

.mini-stat .label{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:900;
}

.mini-stat .value{
  margin-top:5px;
  font-size:26px;
  font-weight:1000;
}

.clock-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:24px;
  padding:22px;
  border:1px solid rgba(250,204,21,.36);
  background:
    radial-gradient(circle at 50% 0%, rgba(250,204,21,.22), transparent 38%),
    rgba(0,0,0,.34);
  box-shadow:inset 0 0 28px rgba(250,204,21,.06);
}

.clock-label{
  color:#fde68a;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
}

.clock{
  font-family:"Courier New",monospace;
  font-size:clamp(42px,6vw,72px);
  font-weight:1000;
  letter-spacing:-.08em;
  color:#fef3c7;
  text-shadow:0 0 18px rgba(250,204,21,.40);
  margin:18px 0;
}

.clock-sub{
  color:var(--muted);
  line-height:1.5;
}

.score-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:20px;
}

.team-card{
  border-radius:26px;
  padding:22px;
  border:1px solid var(--line);
  background:var(--panel);
  min-height:220px;
  position:relative;
  overflow:hidden;
  box-shadow:0 22px 70px rgba(0,0,0,.36);
}

.team-card:before{
  content:"";
  position:absolute;
  inset:-80px auto auto -80px;
  width:220px;
  height:220px;
  border-radius:50%;
  opacity:.22;
  filter:blur(8px);
}

.team-npn:before{background:var(--npn)}
.team-n0par:before{background:var(--n0par)}

.team-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  position:relative;
}

.team-name{
  font-size:32px;
  font-weight:1000;
  letter-spacing:-.04em;
}

.team-sub{
  color:var(--muted);
  margin-top:4px;
}

.mascot{
  font-size:48px;
  line-height:1;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));
}

.score-row{
  display:flex;
  align-items:flex-end;
  gap:14px;
  margin-top:18px;
  position:relative;
}

.score{
  font-size:clamp(68px,10vw,116px);
  line-height:.82;
  font-weight:1000;
  letter-spacing:-.08em;
}

.team-npn .score{color:#bae6fd;text-shadow:0 0 24px rgba(56,189,248,.35)}
.team-n0par .score{color:#fed7aa;text-shadow:0 0 24px rgba(251,146,60,.35)}

.score-label{
  padding-bottom:8px;
  color:var(--muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:12px;
}

.team-footer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
  position:relative;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.07);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.badge.win{background:rgba(22,163,74,.2);border-color:rgba(34,197,94,.45);color:#dcfce7}
.badge.loss{background:rgba(220,38,38,.18);border-color:rgba(239,68,68,.42);color:#fee2e2}
.badge.tie{background:rgba(100,116,139,.2);border-color:rgba(148,163,184,.42);color:#e2e8f0}

.section-grid{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:18px;
  margin-top:18px;
}

.panel{
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--panel);
  padding:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.32);
}

.panel-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.panel-title h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.03em;
}

.panel-title small{
  color:var(--muted);
  font-weight:800;
}

.ticker{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:460px;
  overflow:auto;
  padding-right:4px;
}

.hit{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px;
}

.hit-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
}

.hit-main{
  min-width:0;
}

.hit-title{
  font-weight:1000;
}

.hit-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hit-time{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

.history{
  display:grid;
  gap:10px;
}

.game{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.11);
}

.game-title{
  font-weight:1000;
}

.game-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:3px;
}

.result-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.result-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:30px;
  border-radius:11px;
  font-weight:1000;
  color:white;
}

.result-badge.W{background:var(--green);box-shadow:0 0 18px rgba(22,163,74,.28)}
.result-badge.L{background:var(--red);box-shadow:0 0 18px rgba(220,38,38,.26)}
.result-badge.T{background:var(--gray)}

.rules{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.rule{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(0,0,0,.22);
  padding:15px;
}

.rule b{
  display:block;
  margin-bottom:6px;
}

.rule span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.footer{
  color:var(--muted);
  text-align:center;
  margin-top:22px;
  font-size:13px;
}

.empty{
  color:var(--muted);
  padding:18px;
  border:1px dashed var(--line);
  border-radius:16px;
}

.toast{
  position:fixed;
  right:18px;
  bottom:18px;
  max-width:360px;
  z-index:20;
  background:rgba(15,23,42,.96);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  box-shadow:0 20px 70px rgba(0,0,0,.45);
  transform:translateY(160%);
  transition:.35s ease;
}

.toast.show{transform:translateY(0)}

.toast b{display:block}
.toast span{display:block;color:var(--muted);font-size:13px;margin-top:4px}

@media (max-width:900px){
  .hero-grid,.score-grid,.section-grid,.rules{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr}
  .topbar{align-items:flex-start;flex-direction:column}
  h1{font-size:54px}
}

/* NPN fix: keep Mesh Olympics popup/toast text inside border */
.toast{
  width:min(420px, calc(100vw - 36px));
  max-width:min(420px, calc(100vw - 36px));
  overflow:hidden;
  word-break:break-word;
  overflow-wrap:anywhere;
  white-space:normal;
}

.toast b,
.toast span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

.toast span{
  display:block;
  line-height:1.35;
  max-height:4.2em;
}

/* ===== NPN Mesh Olympics enhanced league layer ===== */

.league-enhance{
  margin-top:18px;
  display:grid;
  gap:18px;
}

.league-hero-strip{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:24px;
  background:
    linear-gradient(90deg, rgba(56,189,248,.16), rgba(34,197,94,.10), rgba(251,146,60,.16)),
    rgba(0,0,0,.30);
  padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.30);
}

.league-hero-strip:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform:translateX(-100%);
  animation:leagueSweep 7s linear infinite;
  pointer-events:none;
}

@keyframes leagueSweep{
  to{transform:translateX(100%)}
}

.league-strip-inner{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
}

.league-title{
  font-size:clamp(26px,4vw,48px);
  font-weight:1000;
  letter-spacing:-.05em;
  line-height:1;
}

.league-subtitle{
  color:var(--muted);
  margin-top:6px;
  font-weight:700;
}

.broadcast-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.broadcast-chip{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.24);
  border-radius:999px;
  padding:8px 11px;
  color:#e5edff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.race-track-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:rgba(0,0,0,.28);
  padding:18px;
}

.race-row{
  display:grid;
  grid-template-columns:120px 1fr 70px;
  gap:12px;
  align-items:center;
  margin:14px 0;
}

.race-name{
  font-weight:1000;
  font-size:18px;
}

.race-track{
  position:relative;
  min-height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
}

.race-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  transition:width .8s ease;
}

.race-fill.npn{
  background:linear-gradient(90deg, rgba(56,189,248,.55), rgba(34,197,94,.70));
  box-shadow:0 0 22px rgba(56,189,248,.30);
}

.race-fill.n0par{
  background:linear-gradient(90deg, rgba(251,146,60,.55), rgba(239,68,68,.72));
  box-shadow:0 0 22px rgba(251,146,60,.28);
}

.race-mascot{
  position:absolute;
  top:50%;
  left:0%;
  transform:translate(-50%,-50%);
  font-size:24px;
  transition:left .8s ease;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}

.race-score{
  text-align:right;
  font-size:24px;
  font-weight:1000;
}

.awards-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.award-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  background:
    radial-gradient(circle at 80% 0%, rgba(250,204,21,.18), transparent 38%),
    rgba(0,0,0,.26);
  padding:16px;
  min-height:140px;
}

.award-card:before{
  content:"";
  position:absolute;
  right:-35px;
  bottom:-45px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
}

.award-icon{
  font-size:30px;
  margin-bottom:8px;
}

.award-label{
  color:var(--muted);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.award-name{
  margin-top:6px;
  font-size:18px;
  line-height:1.15;
  font-weight:1000;
  word-break:break-word;
  overflow-wrap:anywhere;
}

.award-meta{
  margin-top:7px;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.player-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.player-card{
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(0,0,0,.25);
  padding:14px;
  position:relative;
  overflow:hidden;
}

.player-rank{
  position:absolute;
  right:12px;
  top:10px;
  font-size:28px;
  font-weight:1000;
  color:rgba(255,255,255,.14);
}

.player-name{
  padding-right:45px;
  font-weight:1000;
  font-size:17px;
  line-height:1.18;
  overflow-wrap:anywhere;
}

.player-meta{
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
  overflow-wrap:anywhere;
}

.player-stats{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.player-pill{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e2e8f0;
  border-radius:999px;
  padding:5px 8px;
  font-size:12px;
  font-weight:900;
}

.sparkline-wrap{
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(0,0,0,.24);
  padding:14px;
}

.sparkline{
  width:100%;
  height:130px;
  display:block;
}

.broadcast-ticker{
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(0,0,0,.30);
  overflow:hidden;
}

.broadcast-ticker-line{
  white-space:nowrap;
  display:inline-block;
  padding:12px 0;
  font-weight:1000;
  color:#fef3c7;
  animation:tickerMove 28s linear infinite;
}

@keyframes tickerMove{
  from{transform:translateX(100%)}
  to{transform:translateX(-100%)}
}

@media (max-width:1100px){
  .awards-grid,.player-card-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .awards-grid,.player-card-grid{grid-template-columns:1fr}
  .race-row{grid-template-columns:1fr}
  .race-score{text-align:left}
}

/* NPN fix: smooth non-stuttering broadcast ticker */
.broadcast-ticker{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
}

.broadcast-ticker-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:npnTickerSmooth 55s linear infinite;
}

.broadcast-ticker-segment{
  flex:0 0 auto;
  white-space:nowrap;
  padding:12px 56px 12px 0;
  font-weight:1000;
  color:#fef3c7;
}

.broadcast-ticker:hover .broadcast-ticker-track{
  animation-play-state:paused;
}

@keyframes npnTickerSmooth{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* Disable older ticker-line animation when the new track is used */
.broadcast-ticker .broadcast-ticker-line{
  animation:none;
}

/* ===== NPN Mesh Olympics v2 arena enhancements ===== */

.v2-arena-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}

.v2-wide{
  grid-column:1 / -1;
}

.v2-panel{
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(0,0,0,.28);
  padding:18px;
  box-shadow:0 18px 55px rgba(0,0,0,.30);
  overflow:hidden;
  position:relative;
}

.v2-panel:before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius:24px;
  background:linear-gradient(90deg, rgba(56,189,248,.20), transparent, rgba(251,146,60,.20));
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:1px;
  opacity:.65;
}

.v2-title{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.v2-title h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.03em;
}

.v2-title small{
  color:var(--muted);
  font-weight:900;
}

.momentum-wrap{
  position:relative;
  padding:12px 0 6px;
}

.momentum-labels{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-weight:1000;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.momentum-bar{
  position:relative;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(90deg, rgba(56,189,248,.25), rgba(255,255,255,.06), rgba(251,146,60,.25));
  overflow:hidden;
}

.momentum-center{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.45);
  z-index:2;
}

.momentum-marker{
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  background:#0f172a;
  border:2px solid rgba(250,204,21,.85);
  box-shadow:0 0 25px rgba(250,204,21,.32);
  font-size:22px;
  transition:left .8s ease;
  z-index:3;
}

.momentum-status{
  margin-top:12px;
  font-size:20px;
  font-weight:1000;
}

.momentum-sub{
  color:var(--muted);
  margin-top:4px;
}

.noise-meter{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
}

.noise-icon{
  font-size:44px;
}

.noise-track{
  position:relative;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  overflow:hidden;
}

.noise-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#facc15,#fb923c,#ef4444);
  transition:width .8s ease;
}

.noise-value{
  font-size:28px;
  font-weight:1000;
}

.record-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
}

.record-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.24);
  padding:14px;
}

.record-team{
  color:var(--muted);
  font-weight:1000;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.10em;
}

.record-score{
  margin-top:6px;
  font-size:34px;
  font-weight:1000;
  letter-spacing:-.04em;
}

.record-meta{
  margin-top:5px;
  color:var(--muted);
  font-size:13px;
}

.achievement-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.achievement{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:rgba(0,0,0,.24);
  padding:14px;
  min-height:128px;
}

.achievement .icon{
  font-size:30px;
  margin-bottom:8px;
}

.achievement .label{
  color:var(--muted);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.achievement .value{
  margin-top:6px;
  font-weight:1000;
  font-size:17px;
  line-height:1.2;
  overflow-wrap:anywhere;
}

.achievement .meta{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  overflow-wrap:anywhere;
}

.heatmap{
  display:grid;
  grid-template-columns:repeat(24,1fr);
  gap:5px;
  align-items:end;
  min-height:110px;
  padding-top:10px;
}

.heat-cell{
  min-height:12px;
  border-radius:7px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  position:relative;
}

.heat-cell span{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:rgba(255,255,255,.45);
  margin-top:4px;
}

.announcer-feed{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  overflow:auto;
}

.announcer-line{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(0,0,0,.24);
  border-radius:16px;
  padding:12px;
}

.announcer-icon{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(250,204,21,.13);
  border:1px solid rgba(250,204,21,.25);
}

.announcer-main b{
  display:block;
}

.announcer-main span{
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-top:3px;
  overflow-wrap:anywhere;
}

.announcer-time{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

@media (max-width:1100px){
  .v2-arena-grid{grid-template-columns:1fr}
  .achievement-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .achievement-grid,.record-grid{grid-template-columns:1fr}
  .heatmap{grid-template-columns:repeat(12,1fr); row-gap:20px}
}

/* ===== NPN Mesh Olympics V3 League Broadcast Layer ===== */

#packetRainCanvas{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.30;
  mix-blend-mode:screen;
}

.olympics-page{
  z-index:2;
}

.v3-league-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  margin-top:18px;
}

.v3-panel{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(0,0,0,.30);
  box-shadow:0 20px 65px rgba(0,0,0,.32);
  padding:18px;
}

.v3-panel:after{
  content:"";
  position:absolute;
  inset:auto -40px -80px auto;
  width:180px;
  height:180px;
  background:radial-gradient(circle, rgba(56,189,248,.18), transparent 70%);
  pointer-events:none;
}

.v3-wide{
  grid-column:1 / -1;
}

.v3-title{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.v3-title h2{
  margin:0;
  font-size:23px;
  letter-spacing:-.03em;
}

.v3-title small{
  color:var(--muted);
  font-weight:900;
}

.power-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.power-player{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
}

.power-rank{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-weight:1000;
  color:#020617;
  background:linear-gradient(135deg,#facc15,#fb923c);
  box-shadow:0 0 20px rgba(250,204,21,.24);
}

.power-name{
  font-size:17px;
  font-weight:1000;
  line-height:1.15;
  overflow-wrap:anywhere;
}

.power-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
  overflow-wrap:anywhere;
}

.power-score{
  text-align:right;
}

.power-score b{
  display:block;
  font-size:24px;
}

.power-score span{
  color:var(--muted);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.position-pill{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.07);
  margin-top:6px;
  font-size:11px;
  font-weight:1000;
  color:#e2e8f0;
}

.division-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.division-card{
  min-height:132px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:
    radial-gradient(circle at 80% 0%, rgba(34,197,94,.14), transparent 45%),
    rgba(0,0,0,.26);
  padding:15px;
}

.division-name{
  font-size:24px;
  font-weight:1000;
  letter-spacing:-.04em;
}

.division-count{
  margin-top:8px;
  font-size:38px;
  font-weight:1000;
  color:#bbf7d0;
  text-shadow:0 0 18px rgba(34,197,94,.22);
}

.division-meta{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
}

.replay-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.replay-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  padding:12px;
}

.replay-badge{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:rgba(250,204,21,.14);
  border:1px solid rgba(250,204,21,.25);
  font-size:24px;
}

.replay-title{
  font-weight:1000;
}

.replay-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:4px;
  overflow-wrap:anywhere;
}

.replay-time{
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}

.quest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.quest-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(0,0,0,.25);
  padding:14px;
}

.quest-title{
  font-weight:1000;
  font-size:16px;
}

.quest-meta{
  color:var(--muted);
  font-size:12px;
  margin-top:5px;
}

.quest-bar{
  position:relative;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
}

.quest-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#22c55e,#facc15);
  transition:width .8s ease;
}

.hype-card{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:15px;
  align-items:center;
}

.hype-level{
  width:92px;
  height:92px;
  border-radius:28px;
  display:grid;
  place-items:center;
  font-size:44px;
  background:
    radial-gradient(circle at 50% 30%, rgba(250,204,21,.40), transparent 60%),
    rgba(0,0,0,.35);
  border:1px solid rgba(250,204,21,.35);
  box-shadow:0 0 35px rgba(250,204,21,.18);
}

.hype-text b{
  display:block;
  font-size:30px;
  line-height:1;
}

.hype-text span{
  display:block;
  color:var(--muted);
  margin-top:8px;
  line-height:1.45;
}

.scout-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}

.scout-card{
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:rgba(0,0,0,.25);
  padding:15px;
}

.scout-name{
  font-weight:1000;
  font-size:18px;
  line-height:1.16;
  overflow-wrap:anywhere;
}

.scout-class{
  display:inline-flex;
  margin-top:8px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(56,189,248,.13);
  border:1px solid rgba(56,189,248,.28);
  font-weight:1000;
  font-size:12px;
}

.scout-lines{
  margin-top:10px;
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:13px;
}

@media (max-width:1100px){
  .v3-league-grid{grid-template-columns:1fr}
  .division-grid,.quest-grid,.scout-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .division-grid,.quest-grid,.scout-grid{grid-template-columns:1fr}
  .power-player{grid-template-columns:42px 1fr}
  .power-score{grid-column:1 / -1;text-align:left}
}

/* ===== NPN visual tune: softer typography / less harsh brightness ===== */

:root{
  --text:#d7deec;
  --muted:#8994aa;
  --softText:#c4ccdc;
  --dimText:#7f8aa0;
}

/* Global text softening */
body{
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

/* Main headings: still readable, less bright */
h1,
h2,
.panel-title h2,
.v2-title h2,
.v3-title h2,
.league-title,
.team-name,
.player-name,
.power-name,
.award-name,
.scout-name,
.division-name,
.game-title,
.hit-title,
.replay-title,
.announcer-main b{
  color:var(--softText) !important;
  font-weight:850 !important;
  text-shadow:none !important;
}

/* Secondary labels and helper text */
.subtitle,
.team-sub,
.panel-title small,
.v2-title small,
.v3-title small,
.mini-stat .label,
.score-label,
.award-label,
.record-team,
.achievement .label,
.clock-sub,
.game-meta,
.hit-meta,
.player-meta,
.power-meta,
.replay-meta,
.scout-lines,
.division-meta,
.quest-meta,
.announcer-main span,
.footer,
.league-subtitle{
  color:var(--muted) !important;
  font-weight:650 !important;
}

/* Numeric values: slightly dimmer, still strong */
.score,
.value,
.clock,
.record-score,
.division-count,
.noise-value,
.race-score,
.power-score b,
.mini-stat .value{
  color:#cbd5e1 !important;
  font-weight:900 !important;
  text-shadow:none !important;
}

/* Rank numbers were very bright/large visually; make them ghosted */
.player-rank,
.power-rank,
.rank,
[class*="rank"]{
  opacity:.42;
}

/* Pills/chips softer */
.badge,
.player-pill,
.position-pill,
.broadcast-chip,
.result-badge,
.stat,
.team-footer span,
.player-stats span{
  color:#c8d1e1 !important;
  font-weight:750 !important;
  text-shadow:none !important;
}

/* Card text inside live stats and leaderboards */
.award-card,
.player-card,
.power-player,
.scout-card,
.quest-card,
.record-card,
.division-card,
.replay-item,
.announcer-line,
.hit{
  color:#c9d2e2;
}

/* Reduce card border glow / visual sharpness a little */
.panel,
.v2-panel,
.v3-panel,
.team-card,
.award-card,
.player-card,
.power-player,
.race-track-card,
.league-hero-strip,
.record-card,
.achievement,
.division-card,
.quest-card,
.scout-card,
.replay-item,
.announcer-line,
.hit{
  border-color:rgba(255,255,255,.105) !important;
}

/* Soften bright accents but keep theme */
.kicker,
.clock-label,
.live-pill{
  filter:saturate(.85) brightness(.92);
}

/* Ticker text was bright yellow; soften it */
.broadcast-ticker-line,
.broadcast-ticker-segment{
  color:#d9c982 !important;
  font-weight:850 !important;
  text-shadow:none !important;
}

/* Toast popup softer too */
.toast b{
  color:#d7deec !important;
  font-weight:850 !important;
}

.toast span{
  color:#96a2b8 !important;
}

/* SVG/chart labels */
svg text{
  fill:rgba(203,213,225,.72) !important;
}

/* Keep links readable but not neon */
a{
  color:#b9d7ff;
}

a:hover{
  color:#d7e9ff;
}


/* ===== NPN Mesh Olympics Player Profiles / Badges ===== */

.player-card,
.power-player,
.scout-card{
  cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}

.player-card:hover,
.power-player:hover,
.scout-card:hover{
  transform:translateY(-2px);
  border-color:rgba(250,204,21,.34) !important;
  background:rgba(255,255,255,.045);
}

.player-click-hint{
  margin-top:8px;
  color:rgba(250,204,21,.75);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.player-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.player-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
  color:#cbd5e1;
  font-size:11px;
  font-weight:850;
}

.player-badge.hot{
  color:#fed7aa;
  background:rgba(251,146,60,.13);
  border-color:rgba(251,146,60,.25);
}

.player-badge.active{
  color:#bbf7d0;
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.24);
}

.player-badge.signal{
  color:#bae6fd;
  background:rgba(56,189,248,.13);
  border-color:rgba(56,189,248,.26);
}

.player-badge.ghost{
  color:#e9d5ff;
  background:rgba(168,85,247,.13);
  border-color:rgba(168,85,247,.25);
}

.player-badge.heavy{
  color:#fde68a;
  background:rgba(250,204,21,.12);
  border-color:rgba(250,204,21,.24);
}

.player-profile-backdrop{
  position:fixed;
  inset:0;
  z-index:999999;
  background:rgba(2,6,23,.72);
  backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.player-profile-backdrop.open{
  display:flex;
}

.player-profile-modal{
  width:min(920px, 100%);
  max-height:min(88vh, 900px);
  overflow:auto;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 15% 0%, rgba(56,189,248,.16), transparent 35%),
    radial-gradient(circle at 90% 10%, rgba(251,146,60,.14), transparent 36%),
    linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  box-shadow:0 40px 120px rgba(0,0,0,.62);
  color:#d7deec;
  position:relative;
}

.player-profile-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  padding:24px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.player-profile-title{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.player-profile-avatar{
  width:62px;
  height:62px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 0 28px rgba(56,189,248,.12);
}

.player-profile-name{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.05;
  color:#d7deec;
  overflow-wrap:anywhere;
}

.player-profile-class{
  display:inline-flex;
  margin-top:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.25);
  color:#bae6fd;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.player-profile-close{
  width:42px;
  height:42px;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#d7deec;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
}

.player-profile-close:hover{
  background:rgba(255,255,255,.12);
}

.player-profile-body{
  padding:22px 24px 24px;
}

.player-profile-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.profile-stat{
  border:1px solid rgba(255,255,255,.11);
  border-radius:18px;
  background:rgba(0,0,0,.24);
  padding:14px;
}

.profile-stat-label{
  color:#8994aa;
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.profile-stat-value{
  margin-top:7px;
  color:#d7deec;
  font-size:25px;
  font-weight:900;
  letter-spacing:-.04em;
  overflow-wrap:anywhere;
}

.profile-section{
  margin-top:18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:rgba(0,0,0,.20);
  padding:16px;
}

.profile-section-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}

.profile-section-title h3{
  margin:0;
  color:#c4ccdc;
  font-size:19px;
  font-weight:880;
}

.profile-section-title small{
  color:#8994aa;
  font-weight:750;
}

.profile-activity-list{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.profile-activity{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  border-radius:14px;
  padding:10px;
}

.profile-activity-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.065);
}

.profile-activity-main b{
  display:block;
  color:#cbd5e1;
  font-size:13px;
  overflow-wrap:anywhere;
}

.profile-activity-main span{
  display:block;
  color:#8994aa;
  font-size:12px;
  margin-top:2px;
  overflow-wrap:anywhere;
}

.profile-activity-time{
  color:#8994aa;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.profile-bars{
  display:grid;
  gap:10px;
}

.profile-bar-row{
  display:grid;
  grid-template-columns:120px 1fr auto;
  gap:10px;
  align-items:center;
}

.profile-bar-label{
  color:#8994aa;
  font-weight:800;
  font-size:13px;
}

.profile-bar-track{
  height:13px;
  border-radius:999px;
  background:rgba(255,255,255,.075);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

.profile-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#22c55e,#facc15);
}

.profile-bar-value{
  color:#cbd5e1;
  font-weight:850;
  font-size:13px;
}

@media (max-width:850px){
  .player-profile-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:560px){
  .player-profile-grid{
    grid-template-columns:1fr;
  }
  .player-profile-header{
    padding:18px;
  }
  .player-profile-body{
    padding:18px;
  }
  .player-profile-name{
    font-size:24px;
  }
  .profile-bar-row{
    grid-template-columns:1fr;
  }
}

/* ===== NPN Countdown frontend fix ===== */
.npn-countdown-fixed-info{
  margin-top:18px;
  color:#9aa7bd;
  font-size:18px;
  font-weight:800;
  line-height:1.55;
}

.npn-countdown-fixed-info b{
  color:#b8c3d6;
  font-weight:900;
}


/* ===== NPN authoritative countdown replacement ===== */

.npn-authoritative-countdown{
  margin-top:22px;
}

.npn-authoritative-timer{
  font-size:72px;
  line-height:1;
  letter-spacing:.04em;
  font-weight:850;
  color:#d7deec;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
}

.npn-authoritative-info{
  margin-top:22px;
  color:#9aa7bd;
  font-size:18px;
  font-weight:800;
  line-height:1.55;
}

.npn-authoritative-info b{
  color:#b8c3d6;
  font-weight:900;
}

.npn-original-countdown-hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

@media (max-width:800px){
  .npn-authoritative-timer{
    font-size:48px;
  }
}


/* ===== NPN authoritative countdown replacement ===== */

.npn-authoritative-countdown{
  margin-top:22px;
}

.npn-authoritative-timer{
  font-size:72px;
  line-height:1;
  letter-spacing:.04em;
  font-weight:850;
  color:#d7deec;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
}

.npn-authoritative-info{
  margin-top:22px;
  color:#9aa7bd;
  font-size:18px;
  font-weight:800;
  line-height:1.55;
}

.npn-authoritative-info b{
  color:#b8c3d6;
  font-weight:900;
}

.npn-original-countdown-hidden{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

@media (max-width:800px){
  .npn-authoritative-timer{
    font-size:48px;
  }
}


/* =====================================================================
   NPN Mesh Olympics — Angular HUD Style
   Less rounded UI + tactical corner accents
   ===================================================================== */

:root{
  --npn-cyan:#22d3ee;
  --npn-blue:#38bdf8;
  --npn-gold:#facc15;
  --npn-green:#22c55e;
  --npn-red:#ef4444;
  --npn-panel-border:rgba(148,163,184,.22);
  --npn-panel-border-soft:rgba(148,163,184,.14);
}

/* ------------------------------------------------------------
   Less-rounded global geometry
------------------------------------------------------------ */

.panel,
.v2-panel,
.v3-panel,
.league-hero,
.hero-card,
.scoreboard-hero,
.team-card,
.award-card,
.player-card,
.power-player,
.scout-card,
.quest-card,
.record-card,
.division-card,
.replay-item,
.announcer-line,
.hit,
.race-track-card,
.league-hero-strip,
.profile-stat,
.profile-section,
.player-profile-modal,
.stat-card,
.mini-stat,
.card,
[class*="card"],
[class*="panel"]{
  border-radius:12px !important;
}

button,
.btn,
a.btn,
.nav-button,
.top-button,
.header-button,
.badge,
.player-badge,
.player-pill,
.position-pill,
.broadcast-chip,
.result-badge,
.stat,
.team-footer span,
.player-stats span,
.live-pill,
.kicker,
[class*="badge"],
[class*="pill"],
[class*="chip"]{
  border-radius:7px !important;
}

/* Small pills can stay slightly softened but no more giant bubbles */
.live-pill{
  border-radius:9px !important;
}

/* ------------------------------------------------------------
   Main panels: sharper border, darker center, HUD trim
------------------------------------------------------------ */

.panel,
.v2-panel,
.v3-panel,
.league-hero,
.hero-card,
.scoreboard-hero,
.team-card,
.award-card,
.player-card,
.power-player,
.scout-card,
.quest-card,
.record-card,
.division-card,
.replay-item,
.announcer-line,
.race-track-card,
.league-hero-strip{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-color:var(--npn-panel-border) !important;
  background:
    linear-gradient(180deg, rgba(15,23,42,.74), rgba(2,6,23,.62)),
    rgba(2,6,23,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 20px 60px rgba(0,0,0,.30) !important;
}

/* Subtle scanline / HUD depth */
.panel::before,
.v2-panel::before,
.v3-panel::before,
.league-hero::before,
.hero-card::before,
.scoreboard-hero::before,
.team-card::before,
.award-card::before,
.player-card::before,
.power-player::before,
.scout-card::before,
.quest-card::before,
.record-card::before,
.division-card::before,
.replay-item::before,
.race-track-card::before,
.league-hero-strip::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(56,189,248,.045), transparent),
    radial-gradient(circle at 20% 0%, rgba(56,189,248,.08), transparent 30%),
    radial-gradient(circle at 92% 8%, rgba(250,204,21,.065), transparent 28%);
  opacity:.75;
}

/* ------------------------------------------------------------
   Corner accents — default cyan/gold tactical brackets
------------------------------------------------------------ */

.panel::after,
.v2-panel::after,
.v3-panel::after,
.league-hero::after,
.hero-card::after,
.scoreboard-hero::after,
.team-card::after,
.award-card::after,
.player-card::after,
.power-player::after,
.scout-card::after,
.quest-card::after,
.record-card::after,
.division-card::after,
.replay-item::after,
.race-track-card::after,
.league-hero-strip::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:3;
  border-radius:inherit;
  background:
    /* top left */
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 10px top 0 / 42px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 10px / 2px 42px no-repeat,

    /* top right */
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 10px top 0 / 42px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 top 10px / 2px 42px no-repeat,

    /* bottom left */
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 10px bottom 0 / 42px 2px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 0 bottom 10px / 2px 42px no-repeat,

    /* bottom right */
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 10px bottom 0 / 42px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 10px / 2px 42px no-repeat;
  opacity:.72;
}

/* Smaller cards get smaller corner accents */
.award-card::after,
.player-card::after,
.power-player::after,
.scout-card::after,
.quest-card::after,
.record-card::after,
.division-card::after,
.replay-item::after,
.profile-stat::after,
.mini-stat::after,
.stat-card::after{
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 7px top 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 7px / 2px 24px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 7px top 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 top 7px / 2px 24px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 7px bottom 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 0 bottom 7px / 2px 24px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 7px bottom 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 7px / 2px 24px no-repeat;
  opacity:.58;
}

/* ------------------------------------------------------------
   Team-specific accent colors
------------------------------------------------------------ */

.team-card:first-of-type::after,
.team-npn::after,
.npn-card::after{
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 10px top 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 10px / 2px 44px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) right 10px top 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) right 0 top 10px / 2px 44px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 10px bottom 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 bottom 10px / 2px 44px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) right 10px bottom 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) right 0 bottom 10px / 2px 44px no-repeat;
  opacity:.78;
}

.team-card:nth-of-type(2)::after,
.team-nopar::after,
.nopar-card::after{
  background:
    linear-gradient(var(--npn-gold), var(--npn-gold)) left 10px top 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) left 0 top 10px / 2px 44px no-repeat,
    linear-gradient(#fb923c, #fb923c) right 10px top 0 / 44px 2px no-repeat,
    linear-gradient(#fb923c, #fb923c) right 0 top 10px / 2px 44px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) left 10px bottom 0 / 44px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) left 0 bottom 10px / 2px 44px no-repeat,
    linear-gradient(#fb923c, #fb923c) right 10px bottom 0 / 44px 2px no-repeat,
    linear-gradient(#fb923c, #fb923c) right 0 bottom 10px / 2px 44px no-repeat;
  opacity:.78;
}

/* ------------------------------------------------------------
   Hero and countdown card accent emphasis
------------------------------------------------------------ */

.league-hero,
.hero-card,
.scoreboard-hero,
.league-hero-strip{
  border-radius:16px !important;
  border-color:rgba(56,189,248,.25) !important;
}

.league-hero::after,
.hero-card::after,
.scoreboard-hero::after,
.league-hero-strip::after{
  background:
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 16px top 0 / 76px 3px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 0 top 16px / 3px 76px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 16px top 0 / 76px 3px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 top 16px / 3px 76px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 16px bottom 0 / 76px 3px no-repeat,
    linear-gradient(var(--npn-blue), var(--npn-blue)) left 0 bottom 16px / 3px 76px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 16px bottom 0 / 76px 3px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 16px / 3px 76px no-repeat;
  opacity:.84;
}

/* Countdown/game clock panel usually lives in hero as a nested panel/card */
#clock,
#gameEnds{
  position:relative;
}

/* ------------------------------------------------------------
   Buttons: less pill, more command-console
------------------------------------------------------------ */

button,
.btn,
a.btn,
.nav-button,
.top-button,
.header-button,
[href$=".json"],
[href*="scoreboard-classic"],
[href*="scoreboard-games"],
[href*="classic"]{
  border-radius:8px !important;
  border-color:rgba(148,163,184,.24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.18) !important;
}

button:hover,
.btn:hover,
a.btn:hover,
.nav-button:hover,
.top-button:hover,
.header-button:hover{
  border-color:rgba(56,189,248,.45) !important;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.12),
    0 0 24px rgba(56,189,248,.10) !important;
}

/* ------------------------------------------------------------
   Stat boxes: angular trim
------------------------------------------------------------ */

.mini-stat,
.stat-card,
.profile-stat,
.score-stat,
[class*="stat-card"]{
  position:relative;
  border-radius:9px !important;
  border-color:rgba(148,163,184,.20) !important;
}

.mini-stat::after,
.stat-card::after,
.profile-stat::after,
.score-stat::after,
[class*="stat-card"]::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 7px top 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 7px / 2px 24px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 7px bottom 0 / 24px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 7px / 2px 24px no-repeat;
  opacity:.68;
}

/* ------------------------------------------------------------
   Player cards / leaderboard: tighter tactical boxes
------------------------------------------------------------ */

.player-card,
.power-player,
.scout-card{
  border-radius:10px !important;
}

.player-card:hover,
.power-player:hover,
.scout-card:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(56,189,248,.34) !important;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.06),
    0 18px 44px rgba(0,0,0,.30) !important;
}

/* Keep rank ghosted and tactical */
.player-rank,
.power-rank,
.rank,
[class*="rank"]{
  opacity:.38;
  text-shadow:none !important;
}

/* ------------------------------------------------------------
   Player modal: less rounded, corner trim
------------------------------------------------------------ */

.player-profile-modal{
  border-radius:14px !important;
  border-color:rgba(56,189,248,.25) !important;
}

.player-profile-modal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 14px top 0 / 64px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 14px / 2px 64px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 14px top 0 / 64px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 top 14px / 2px 64px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 14px bottom 0 / 64px 2px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 bottom 14px / 2px 64px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 14px bottom 0 / 64px 2px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 14px / 2px 64px no-repeat;
  opacity:.75;
}

/* ------------------------------------------------------------
   Slightly more tactical top live badge
------------------------------------------------------------ */

.live-pill,
.kicker{
  border-radius:8px !important;
  position:relative;
}

.live-pill::after,
.kicker::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--npn-green), var(--npn-green)) left 6px top 0 / 20px 2px no-repeat,
    linear-gradient(var(--npn-green), var(--npn-green)) left 0 top 6px / 2px 20px no-repeat,
    linear-gradient(var(--npn-green), var(--npn-green)) right 6px bottom 0 / 20px 2px no-repeat,
    linear-gradient(var(--npn-green), var(--npn-green)) right 0 bottom 6px / 2px 20px no-repeat;
  opacity:.72;
}

/* ------------------------------------------------------------
   Mobile: reduce accent size so it does not crowd cards
------------------------------------------------------------ */

@media (max-width:800px){
  .panel::after,
  .v2-panel::after,
  .v3-panel::after,
  .league-hero::after,
  .hero-card::after,
  .scoreboard-hero::after,
  .team-card::after,
  .award-card::after,
  .player-card::after,
  .power-player::after,
  .scout-card::after,
  .quest-card::after,
  .record-card::after,
  .division-card::after,
  .replay-item::after,
  .race-track-card::after,
  .league-hero-strip::after{
    background:
      linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 8px top 0 / 30px 2px no-repeat,
      linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 8px / 2px 30px no-repeat,
      linear-gradient(var(--npn-gold), var(--npn-gold)) right 8px top 0 / 30px 2px no-repeat,
      linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 top 8px / 2px 30px no-repeat,
      linear-gradient(var(--npn-blue), var(--npn-blue)) left 8px bottom 0 / 30px 2px no-repeat,
      linear-gradient(var(--npn-blue), var(--npn-blue)) left 0 bottom 8px / 2px 30px no-repeat,
      linear-gradient(var(--npn-gold), var(--npn-gold)) right 8px bottom 0 / 30px 2px no-repeat,
      linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 8px / 2px 30px no-repeat;
    opacity:.58;
  }
}


/* =====================================================================
   NPN Angular HUD targeted cleanup:
   Fix Arena Announcer / Heat Map layout after corner accent pass
   ===================================================================== */

/* Keep the V2 grid panels from getting visually crowded */
#meshOlympicsV2Arena .v2-panel,
#meshOlympicsV2Arena .v3-panel{
  min-height:auto !important;
  overflow:hidden !important;
}

/* Heat map panel: cleaner internal spacing */
#meshOlympicsV2Arena .heatmap,
#meshOlympicsV2Arena .heat-map,
#meshOlympicsV2Arena [id*="Heat"],
#meshOlympicsV2Arena [class*="heat"]{
  max-width:100%;
}

/* Main announcer container cleanup */
#arenaAnnouncer,
#v2Announcer,
#announcerFeed,
.arena-announcer,
.announcer-feed,
.announcer-list,
.announcer-lines{
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.38) rgba(2,6,23,.35);
}

/* Chrome / Edge scrollbar styling */
#arenaAnnouncer::-webkit-scrollbar,
#v2Announcer::-webkit-scrollbar,
#announcerFeed::-webkit-scrollbar,
.arena-announcer::-webkit-scrollbar,
.announcer-feed::-webkit-scrollbar,
.announcer-list::-webkit-scrollbar,
.announcer-lines::-webkit-scrollbar{
  width:8px;
}

#arenaAnnouncer::-webkit-scrollbar-track,
#v2Announcer::-webkit-scrollbar-track,
#announcerFeed::-webkit-scrollbar-track,
.arena-announcer::-webkit-scrollbar-track,
.announcer-feed::-webkit-scrollbar-track,
.announcer-list::-webkit-scrollbar-track,
.announcer-lines::-webkit-scrollbar-track{
  background:rgba(2,6,23,.35);
  border-radius:0;
}

#arenaAnnouncer::-webkit-scrollbar-thumb,
#v2Announcer::-webkit-scrollbar-thumb,
#announcerFeed::-webkit-scrollbar-thumb,
.arena-announcer::-webkit-scrollbar-thumb,
.announcer-feed::-webkit-scrollbar-thumb,
.announcer-list::-webkit-scrollbar-thumb,
.announcer-lines::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.38);
  border-radius:0;
  border:1px solid rgba(250,204,21,.18);
}

/* Announcer rows: stop the huge pill/stack look */
.announcer-line,
.arena-announcer .announcer-line,
.announcer-feed .announcer-line,
.announcer-list .announcer-line,
.announcer-lines .announcer-line{
  min-height:unset !important;
  height:auto !important;
  padding:10px 12px !important;
  margin:0 0 8px 0 !important;
  border-radius:8px !important;
  display:grid !important;
  grid-template-columns:34px 1fr !important;
  gap:10px !important;
  align-items:center !important;
  overflow:hidden !important;
}

/* Make announcer corner accents smaller so they don't invade each row */
.announcer-line::after{
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 5px top 0 / 16px 1px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 5px / 1px 16px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 5px bottom 0 / 16px 1px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 5px / 1px 16px no-repeat !important;
  opacity:.35 !important;
}

/* Announcer text should clip cleanly */
.announcer-line b,
.announcer-main b,
.announcer-line .title,
.announcer-line strong{
  display:block !important;
  color:#cbd5e1 !important;
  font-size:15px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.announcer-line span,
.announcer-main span,
.announcer-line small,
.announcer-line .meta{
  display:block !important;
  color:#8d99af !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Icon bubble in announcer row */
.announcer-line > :first-child{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:7px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

/* If the script put every line inside a generic div, normalize those too */
#meshOlympicsV2Arena .v2-panel .announcer-line div,
#meshOlympicsV2Arena .v3-panel .announcer-line div{
  max-width:100%;
  min-width:0;
}

/* Prevent right-side panel from horizontal blowout */
#meshOlympicsV2Arena,
#meshOlympicsV2Arena *{
  box-sizing:border-box;
}

#meshOlympicsV2Arena .v2-panel,
#meshOlympicsV2Arena .v3-panel{
  max-width:100%;
}

/* If the announcer panel itself has too much content, keep it balanced with heatmap */
#meshOlympicsV2Arena .v2-panel:has(.announcer-line),
#meshOlympicsV2Arena .v3-panel:has(.announcer-line){
  max-height:470px !important;
}

/* Fallback for browsers without :has support is handled by list max-height above */

/* Heat map bars: keep them from touching the HUD corners */
.heatmap-bar,
.heat-bar,
[class*="heat"] .bar{
  border-radius:5px !important;
}

/* Make V2 section corner accents slightly less loud overall */
#meshOlympicsV2Arena .v2-panel::after,
#meshOlympicsV2Arena .v3-panel::after{
  opacity:.52 !important;
}


/* =====================================================================
   NPN Angular HUD targeted cleanup:
   Fix Arena Announcer / Heat Map layout after corner accent pass
   ===================================================================== */

/* Keep the V2 grid panels from getting visually crowded */
#meshOlympicsV2Arena .v2-panel,
#meshOlympicsV2Arena .v3-panel{
  min-height:auto !important;
  overflow:hidden !important;
}

/* Heat map panel: cleaner internal spacing */
#meshOlympicsV2Arena .heatmap,
#meshOlympicsV2Arena .heat-map,
#meshOlympicsV2Arena [id*="Heat"],
#meshOlympicsV2Arena [class*="heat"]{
  max-width:100%;
}

/* Main announcer container cleanup */
#arenaAnnouncer,
#v2Announcer,
#announcerFeed,
.arena-announcer,
.announcer-feed,
.announcer-list,
.announcer-lines{
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:8px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(56,189,248,.38) rgba(2,6,23,.35);
}

/* Chrome / Edge scrollbar styling */
#arenaAnnouncer::-webkit-scrollbar,
#v2Announcer::-webkit-scrollbar,
#announcerFeed::-webkit-scrollbar,
.arena-announcer::-webkit-scrollbar,
.announcer-feed::-webkit-scrollbar,
.announcer-list::-webkit-scrollbar,
.announcer-lines::-webkit-scrollbar{
  width:8px;
}

#arenaAnnouncer::-webkit-scrollbar-track,
#v2Announcer::-webkit-scrollbar-track,
#announcerFeed::-webkit-scrollbar-track,
.arena-announcer::-webkit-scrollbar-track,
.announcer-feed::-webkit-scrollbar-track,
.announcer-list::-webkit-scrollbar-track,
.announcer-lines::-webkit-scrollbar-track{
  background:rgba(2,6,23,.35);
  border-radius:0;
}

#arenaAnnouncer::-webkit-scrollbar-thumb,
#v2Announcer::-webkit-scrollbar-thumb,
#announcerFeed::-webkit-scrollbar-thumb,
.arena-announcer::-webkit-scrollbar-thumb,
.announcer-feed::-webkit-scrollbar-thumb,
.announcer-list::-webkit-scrollbar-thumb,
.announcer-lines::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.38);
  border-radius:0;
  border:1px solid rgba(250,204,21,.18);
}

/* Announcer rows: stop the huge pill/stack look */
.announcer-line,
.arena-announcer .announcer-line,
.announcer-feed .announcer-line,
.announcer-list .announcer-line,
.announcer-lines .announcer-line{
  min-height:unset !important;
  height:auto !important;
  padding:10px 12px !important;
  margin:0 0 8px 0 !important;
  border-radius:8px !important;
  display:grid !important;
  grid-template-columns:34px 1fr !important;
  gap:10px !important;
  align-items:center !important;
  overflow:hidden !important;
}

/* Make announcer corner accents smaller so they don't invade each row */
.announcer-line::after{
  background:
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 5px top 0 / 16px 1px no-repeat,
    linear-gradient(var(--npn-cyan), var(--npn-cyan)) left 0 top 5px / 1px 16px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 5px bottom 0 / 16px 1px no-repeat,
    linear-gradient(var(--npn-gold), var(--npn-gold)) right 0 bottom 5px / 1px 16px no-repeat !important;
  opacity:.35 !important;
}

/* Announcer text should clip cleanly */
.announcer-line b,
.announcer-main b,
.announcer-line .title,
.announcer-line strong{
  display:block !important;
  color:#cbd5e1 !important;
  font-size:15px !important;
  line-height:1.15 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

.announcer-line span,
.announcer-main span,
.announcer-line small,
.announcer-line .meta{
  display:block !important;
  color:#8d99af !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Icon bubble in announcer row */
.announcer-line > :first-child{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:7px !important;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
}

/* If the script put every line inside a generic div, normalize those too */
#meshOlympicsV2Arena .v2-panel .announcer-line div,
#meshOlympicsV2Arena .v3-panel .announcer-line div{
  max-width:100%;
  min-width:0;
}

/* Prevent right-side panel from horizontal blowout */
#meshOlympicsV2Arena,
#meshOlympicsV2Arena *{
  box-sizing:border-box;
}

#meshOlympicsV2Arena .v2-panel,
#meshOlympicsV2Arena .v3-panel{
  max-width:100%;
}

/* If the announcer panel itself has too much content, keep it balanced with heatmap */
#meshOlympicsV2Arena .v2-panel:has(.announcer-line),
#meshOlympicsV2Arena .v3-panel:has(.announcer-line){
  max-height:470px !important;
}

/* Fallback for browsers without :has support is handled by list max-height above */

/* Heat map bars: keep them from touching the HUD corners */
.heatmap-bar,
.heat-bar,
[class*="heat"] .bar{
  border-radius:5px !important;
}

/* Make V2 section corner accents slightly less loud overall */
#meshOlympicsV2Arena .v2-panel::after,
#meshOlympicsV2Arena .v3-panel::after{
  opacity:.52 !important;
}


/* =====================================================================
   FINAL FIX: Arena Announcer row clipping after angular HUD styling
   CSS-only. No JS. Fixes clipped "Packet storm!" / "NOPAR scored!" rows.
   ===================================================================== */

/* The panel can stay scrollable, but not with crushed rows */
.announcer-list,
.announcer-lines,
.announcer-feed,
.arena-announcer,
#arenaAnnouncer,
#v2Announcer,
#announcerFeed{
  max-height:430px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:10px !important;
}

/* Main row fix */
.announcer-line,
.arena-announcer .announcer-line,
.announcer-feed .announcer-line,
.announcer-list .announcer-line,
.announcer-lines .announcer-line,
#arenaAnnouncer .announcer-line,
#v2Announcer .announcer-line,
#announcerFeed .announcer-line{
  height:auto !important;
  min-height:68px !important;
  max-height:none !important;
  padding:13px 16px !important;
  margin:0 0 10px 0 !important;

  display:grid !important;
  grid-template-columns:42px minmax(0, 1fr) !important;
  align-items:center !important;
  gap:13px !important;

  overflow:visible !important;
  border-radius:8px !important;
}

/* Fix icon bubble being half-cut on the left */
.announcer-line > :first-child,
.arena-announcer .announcer-line > :first-child,
.announcer-feed .announcer-line > :first-child{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  overflow:hidden !important;
}

/* Fix title text clipping */
.announcer-line b,
.announcer-line strong,
.announcer-main b,
.announcer-line .title{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;

  font-size:18px !important;
  line-height:1.18 !important;
  font-weight:850 !important;
  color:#cbd5e1 !important;
}

/* Fix subtitle/meta text */
.announcer-line span,
.announcer-line small,
.announcer-main span,
.announcer-line .meta{
  display:block !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;

  margin-top:3px !important;
  font-size:13px !important;
  line-height:1.25 !important;
  color:#8f9bb1 !important;
}

/* If old cleanup rules added weird hidden classes, neutralize them */
.npn-announcer-row-fixed,
.npn-announcer-descendant-fixed{
  max-height:none !important;
  overflow:visible !important;
}

/* Tone down row-level corner brackets only; keep the panel brackets */
.announcer-line::after,
.announcer-line::before{
  opacity:.18 !important;
}

/* Darker, thinner scrollbar so it doesn't look like a browser error */
.announcer-list::-webkit-scrollbar,
.announcer-lines::-webkit-scrollbar,
.announcer-feed::-webkit-scrollbar,
.arena-announcer::-webkit-scrollbar,
#arenaAnnouncer::-webkit-scrollbar,
#v2Announcer::-webkit-scrollbar,
#announcerFeed::-webkit-scrollbar{
  width:7px !important;
}

.announcer-list::-webkit-scrollbar-track,
.announcer-lines::-webkit-scrollbar-track,
.announcer-feed::-webkit-scrollbar-track,
.arena-announcer::-webkit-scrollbar-track,
#arenaAnnouncer::-webkit-scrollbar-track,
#v2Announcer::-webkit-scrollbar-track,
#announcerFeed::-webkit-scrollbar-track{
  background:rgba(2,6,23,.5) !important;
}

.announcer-list::-webkit-scrollbar-thumb,
.announcer-lines::-webkit-scrollbar-thumb,
.announcer-feed::-webkit-scrollbar-thumb,
.arena-announcer::-webkit-scrollbar-thumb,
#arenaAnnouncer::-webkit-scrollbar-thumb,
#v2Announcer::-webkit-scrollbar-thumb,
#announcerFeed::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.42) !important;
  border-radius:0 !important;
}

/* Firefox scrollbar */
.announcer-list,
.announcer-lines,
.announcer-feed,
.arena-announcer,
#arenaAnnouncer,
#v2Announcer,
#announcerFeed{
  scrollbar-width:thin !important;
  scrollbar-color:rgba(56,189,248,.42) rgba(2,6,23,.5) !important;
}


/* =====================================================================
   NPN Random Featured Matchup
   ===================================================================== */

.random-matchup-panel{
  margin:22px 0;
  padding:20px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,.13), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(250,204,21,.11), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.62));
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
}

.random-matchup-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 12px top 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 0 top 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 12px top 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 0 top 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 12px bottom 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 0 bottom 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 12px bottom 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 0 bottom 12px / 2px 58px no-repeat;
  opacity:.72;
}

.random-matchup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.random-matchup-kicker{
  color:#facc15;
  font-size:13px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.random-matchup-title{
  margin-top:6px;
  color:#d7deec;
  font-size:30px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.04em;
}

.random-matchup-sub{
  margin-top:7px;
  color:#8d99af;
  font-weight:750;
}

.random-matchup-clock{
  text-align:right;
  color:#cbd5e1;
  font-size:28px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

.random-matchup-clock small{
  display:block;
  color:#8d99af;
  font-size:12px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:5px;
}

.random-matchup-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:stretch;
}

.random-player-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  background:rgba(2,6,23,.42);
  padding:16px;
  min-width:0;
}

.random-player-name{
  color:#d7deec;
  font-size:24px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

.random-player-meta{
  color:#8d99af;
  margin-top:7px;
  font-weight:750;
}

.random-player-score{
  margin-top:18px;
  color:#e2e8f0;
  font-size:64px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
}

.random-player-score span{
  font-size:13px;
  color:#8d99af;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.random-vs{
  display:grid;
  place-items:center;
  color:#facc15;
  font-weight:1000;
  font-size:20px;
  letter-spacing:.10em;
}

.random-matchup-footer{
  margin-top:14px;
  color:#9aa7bd;
  font-weight:800;
}

@media (max-width:900px){
  .random-matchup-grid{
    grid-template-columns:1fr;
  }

  .random-vs{
    padding:4px;
  }

  .random-matchup-head{
    flex-direction:column;
  }

  .random-matchup-clock{
    text-align:left;
  }
}

/* =====================================================================
   NPN Random Featured Matchup
   ===================================================================== */

.random-matchup-panel{
  margin:22px 0;
  padding:20px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,.13), transparent 34%),
    radial-gradient(circle at 86% 0%, rgba(250,204,21,.11), transparent 34%),
    linear-gradient(180deg, rgba(15,23,42,.78), rgba(2,6,23,.62));
  box-shadow:0 18px 55px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
}

.random-matchup-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 12px top 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 0 top 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 12px top 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 0 top 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 12px bottom 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-cyan, #22d3ee), var(--npn-cyan, #22d3ee)) left 0 bottom 12px / 2px 58px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 12px bottom 0 / 58px 2px no-repeat,
    linear-gradient(var(--npn-gold, #facc15), var(--npn-gold, #facc15)) right 0 bottom 12px / 2px 58px no-repeat;
  opacity:.72;
}

.random-matchup-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
}

.random-matchup-kicker{
  color:#facc15;
  font-size:13px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.random-matchup-title{
  margin-top:6px;
  color:#d7deec;
  font-size:30px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:-.04em;
}

.random-matchup-sub{
  margin-top:7px;
  color:#8d99af;
  font-weight:750;
}

.random-matchup-clock{
  text-align:right;
  color:#cbd5e1;
  font-size:28px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
}

.random-matchup-clock small{
  display:block;
  color:#8d99af;
  font-size:12px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:5px;
}

.random-matchup-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:14px;
  align-items:stretch;
}

.random-player-card{
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  background:rgba(2,6,23,.42);
  padding:16px;
  min-width:0;
}

.random-player-name{
  color:#d7deec;
  font-size:24px;
  line-height:1.08;
  font-weight:950;
  letter-spacing:-.03em;
  overflow-wrap:anywhere;
}

.random-player-meta{
  color:#8d99af;
  margin-top:7px;
  font-weight:750;
}

.random-player-score{
  margin-top:18px;
  color:#e2e8f0;
  font-size:64px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
}

.random-player-score span{
  font-size:13px;
  color:#8d99af;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.random-vs{
  display:grid;
  place-items:center;
  color:#facc15;
  font-weight:1000;
  font-size:20px;
  letter-spacing:.10em;
}

.random-matchup-footer{
  margin-top:14px;
  color:#9aa7bd;
  font-weight:800;
}

@media (max-width:900px){
  .random-matchup-grid{
    grid-template-columns:1fr;
  }

  .random-vs{
    padding:4px;
  }

  .random-matchup-head{
    flex-direction:column;
  }

  .random-matchup-clock{
    text-align:left;
  }
}

/* Hide original public game log rows once hotfix renders the clean W/L cards */
[data-npn-hidden-old-game-log="1"]{
  display:none !important;
}

#npnPublicGameLogList{
  position:relative;
  z-index:20;
}