*{
  box-sizing:border-box;
}

:root{
  --black:#050505;
  --black2:#080809;
  --panel:#0d0d0f;
  --panel2:#111113;
  --line:#28282c;
  --line2:#36363b;
  --soft:#707077;
  --soft2:#9b9b9f;
  --white:#f4f2ec;
  --lime:#681426;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-bottom:82px;
  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(104,20,38,.07),
      transparent 25%
    ),
    #050505;
  color:var(--white);
  font-family:
    Arial,
    Helvetica,
    sans-serif;
  overflow-x:hidden;
}

button,
a{
  font:inherit;
}

button{
  cursor:pointer;
}

a{
  color:inherit;
  text-decoration:none;
}

.hidden{
  display:none!important;
}



/* =====================================
   BROADCAST HEADER
===================================== */

.broadcast-header{
  position:sticky;
  top:0;
  z-index:100;
  height:70px;
  padding:
    env(safe-area-inset-top)
    18px
    0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.broadcast-brand{
  display:flex;
  align-items:center;
  gap:9px;
}

.brand-symbol{
  color:var(--lime);
  font-size:16px;
}

.broadcast-brand strong{
  display:block;
  font-size:18px;
  letter-spacing:.18em;
}

.broadcast-brand small{
  display:block;
  margin-top:2px;
  color:#6f6f74;
  font-size:7px;
  font-weight:950;
  letter-spacing:.25em;
}

.broadcast-live{
  padding:7px 10px;
  border:1px solid #333338;
  color:#fff;
  font-size:8px;
  font-weight:950;
  letter-spacing:.18em;
}

.broadcast-live i{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:
    0 0 12px var(--lime);
}

.broadcast-menu{
  justify-self:end;
  border:0;
  background:none;
  color:#777;
  letter-spacing:.18em;
}



/* =====================================
   CATEGORY TABS
===================================== */

.arena-tabs{
  position:sticky;
  top:70px;
  z-index:90;
  display:flex;
  gap:25px;
  padding:15px 18px 12px;
  overflow-x:auto;
  border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.95);
  scrollbar-width:none;
}

.arena-tabs::-webkit-scrollbar{
  display:none;
}

.arena-tabs button{
  flex:none;
  padding:0 0 8px;
  border:0;
  border-bottom:2px solid transparent;
  background:none;
  color:#67676d;
  font-size:8px;
  font-weight:950;
  letter-spacing:.17em;
}

.arena-tabs button.active{
  color:#fff;
  border-color:var(--lime);
}



/* =====================================
   STAGE
===================================== */

.broadcast-stage{
  width:min(100%,1080px);
  margin:auto;
}

.battle-broadcast{
  padding:
    24px
    18px
    45px;
}



/* =====================================
   FIGHT STRIP
===================================== */

.fight-strip{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
}

.fight-category{
  display:inline-block;
  padding:7px 9px;
  background:var(--lime);
  color:#050505;
  font-size:8px;
  font-weight:950;
  letter-spacing:.16em;
}

.fight-round{
  margin-left:8px;
  color:#69696f;
  font-size:8px;
  font-weight:950;
  letter-spacing:.15em;
}

.fight-clock{
  text-align:right;
}

.fight-clock small{
  display:block;
  color:#626268;
  font-size:7px;
  font-weight:950;
  letter-spacing:.16em;
}

.fight-clock strong{
  display:block;
  margin-top:3px;
  font-family:
    "Arial Black",
    Arial,
    sans-serif;
  font-size:13px;
  letter-spacing:.06em;
}



/* =====================================
   HEADLINE
===================================== */

.fight-headline{
  padding:42px 0 26px;
}

.fight-headline small{
  color:#6c6c72;
  font-size:8px;
  font-weight:950;
  letter-spacing:.2em;
}

.fight-headline h1{
  margin:5px 0 4px;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:
    clamp(
      64px,
      16vw,
      145px
    );
  line-height:.8;
  letter-spacing:-.02em;
}

.fight-headline h1 span{
  color:var(--lime);
}

.fight-headline p{
  margin:14px 0 0;
  color:#78787d;
  font-size:11px;
}



/* =====================================
   BATTLE
===================================== */

.battle-stage{
  position:relative;
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);
  gap:10px;
}

.competitor{
  min-width:0;
}

.media-stage{
  position:relative;
  overflow:hidden;
  border:1px solid #29292e;
  background:#09090a;
  isolation:isolate;
}

.stage-light{
  position:absolute;
  z-index:0;
  top:-80px;
  width:180px;
  height:300px;
  filter:blur(55px);
  opacity:.16;
}

.stage-light-a{
  left:10%;
  background:var(--lime);
}

.stage-light-b{
  right:10%;
  background:#fff;
}

.media-placeholder{
  position:relative;
  z-index:1;
  aspect-ratio:9/14;
  display:grid;
  place-items:center;
  align-content:center;
  gap:15px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 30%
    ),
    radial-gradient(
      circle at 50% 30%,
      #252529,
      #101012 45%,
      #070708 80%
    );
  color:#5d5d62;
  font-size:8px;
  font-weight:950;
  letter-spacing:.22em;
}

.media-placeholder-b{
  background:
    linear-gradient(
      215deg,
      rgba(255,255,255,.035),
      transparent 32%
    ),
    radial-gradient(
      circle at 55% 40%,
      #222226,
      #0e0e10 44%,
      #070708 80%
    );
}

.placeholder-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.15;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(255,255,255,.04) 4px
    );
}

.play-trigger{
  position:relative;
  z-index:4;
  width:55px;
  height:55px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
}

.competitor-identity{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  bottom:0;
  padding:
    70px
    13px
    13px;
  display:flex;
  gap:9px;
  align-items:flex-end;
  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.95)
    );
}

.competitor-seed{
  color:var(--lime);
  font-size:9px;
  font-weight:950;
}

.competitor-identity small{
  display:block;
  color:#777;
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.competitor-identity strong{
  display:block;
  margin-top:3px;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:
    clamp(
      25px,
      7vw,
      54px
    );
  line-height:.9;
  letter-spacing:.02em;
}

.competitor-identity span{
  display:block;
  margin-top:3px;
  color:#999;
  font-size:8px;
}

.record-chip{
  position:absolute;
  z-index:5;
  top:12px;
  right:12px;
  padding:8px 9px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:10px;
  font-weight:950;
}

.record-chip small{
  display:block;
  margin-top:2px;
  color:#777;
  font-size:6px;
  letter-spacing:.12em;
}



/* =====================================
   VS MARK
===================================== */

.versus-mark{
  position:absolute;
  z-index:20;
  left:50%;
  top:45%;
  transform:
    translate(
      -50%,
      -50%
    );
  width:52px;
  height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:
    3px
    solid
    #050505;
  border-radius:50%;
  background:var(--lime);
  color:#050505;
}

.versus-mark small{
  font-size:5px;
  font-weight:950;
}

.versus-mark strong{
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:17px;
}



/* =====================================
   SCORE + VOTE
===================================== */

.score-panel{
  min-height:67px;
  padding:12px 3px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.score-panel small{
  display:block;
  color:#67676c;
  font-size:6px;
  font-weight:950;
  letter-spacing:.14em;
}

.score-panel strong{
  display:block;
  margin-top:2px;
  color:var(--lime);
  font-size:27px;
}

.score-panel > span{
  color:#737378;
  font-size:7px;
  font-weight:950;
}

.arena-vote{
  width:100%;
  min-height:52px;
  padding:0 13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid var(--lime);
  background:transparent;
  color:var(--lime);
  font-size:9px;
  font-weight:950;
  letter-spacing:.13em;
}

.arena-vote.selected{
  background:var(--lime);
  color:#050505;
}



/* =====================================
   LIVE CROWD
===================================== */

.crowd-control{
  margin-top:27px;
  padding:20px;
  border:1px solid var(--line);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.015),
      transparent
    ),
    var(--panel);
}

.crowd-control-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}

.crowd-control-head small{
  display:block;
  color:#68686e;
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}

.crowd-control-head strong{
  display:block;
  margin-top:3px;
  font-size:14px;
}

#marginText{
  color:var(--lime);
  font-size:8px;
  font-weight:950;
  letter-spacing:.13em;
}

.crowd-meter{
  position:relative;
  height:8px;
  margin-top:15px;
  display:flex;
  overflow:visible;
  background:#242428;
}

.crowd-meter-a{
  width:52%;
  background:var(--lime);
}

.crowd-meter-b{
  width:48%;
  background:#55555b;
}

.meter-center{
  position:absolute;
  top:-5px;
  bottom:-5px;
  left:50%;
  width:1px;
  background:#fff;
  opacity:.45;
}

.meter-names{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  color:#666;
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}



/* =====================================
   CROWD ALERT
===================================== */

.crowd-alert{
  margin-top:10px;
  padding:25px 20px;
  border:1px solid var(--lime);
  background:
    radial-gradient(
      circle at 100% 0,
      rgba(104,20,38,.11),
      transparent 38%
    ),
    #09090a;
}

.crowd-alert-top{
  display:flex;
  justify-content:space-between;
  gap:15px;
  color:var(--lime);
  font-size:7px;
  font-weight:950;
  letter-spacing:.15em;
}

.crowd-alert-top b{
  color:#74747a;
}

.crowd-alert h2{
  margin:13px 0 6px;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:44px;
  line-height:.9;
}

.crowd-alert p{
  color:#8c8c91;
  font-size:11px;
}

.crowd-alert button{
  width:100%;
  margin-top:15px;
  min-height:52px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px;
  border:0;
  background:var(--lime);
  color:#050505;
  font-size:9px;
  font-weight:950;
  letter-spacing:.14em;
}



/* =====================================
   BOARD STAKES
===================================== */

.board-stakes{
  margin-top:42px;
  padding:27px 22px;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(104,20,38,.10),
      transparent 30%
    ),
    #080809;
}

.stakes-eyebrow{
  color:#6e6e74;
  font-size:7px;
  font-weight:950;
  letter-spacing:.2em;
}

.stakes-layout{
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.stakes-layout small{
  color:#999;
  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}

.stakes-layout h2{
  margin:4px 0 0;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:
    clamp(
      43px,
      11vw,
      88px
    );
  line-height:.82;
}

.stakes-layout h2 span{
  display:block;
  color:var(--lime);
}

.board-trophy{
  flex:0 0 90px;
  width:90px;
  height:90px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid #48484d;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(104,20,38,.08),
      transparent 60%
    );
}

.board-trophy span{
  color:var(--lime);
  font-size:7px;
  font-weight:950;
  letter-spacing:.16em;
}

.board-trophy strong{
  margin-top:3px;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:17px;
}

.board-trophy small{
  color:#777;
  font-size:6px;
}

.board-stakes > p{
  max-width:520px;
  margin:18px 0 0;
  color:#666;
  font-size:9px;
  line-height:1.6;
}



/* =====================================
   ACTIONS
===================================== */

.broadcast-actions{
  margin-top:12px;
  display:grid;
  grid-template-columns:
    1fr
    .72fr;
  gap:9px;
}

.action-callout,
.action-share{
  min-height:70px;
  padding:0 16px;
  border:1px solid #323237;
  background:#0c0c0e;
}

.action-callout{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.action-callout small{
  color:#6c6c72;
  font-size:6px;
  font-weight:950;
  letter-spacing:.15em;
}

.action-callout strong{
  margin-top:4px;
  color:#fff;
  font-size:9px;
  letter-spacing:.12em;
}

.action-share{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--lime);
  font-size:8px;
  font-weight:950;
  letter-spacing:.12em;
}



/* =====================================
   UP NEXT
===================================== */

.up-next{
  padding:50px 18px;
  border-top:1px solid var(--line);
}

.up-next-label{
  color:#67676c;
  font-size:7px;
  font-weight:950;
  letter-spacing:.2em;
}

.up-next-card{
  margin-top:13px;
  display:grid;
  grid-template-columns:
    110px
    1fr
    auto;
  gap:20px;
  align-items:center;
  border:1px solid var(--line);
  background:#0b0b0c;
}

.up-next-art{
  min-height:125px;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(
      circle at 50% 40%,
      #242427,
      #0c0c0e
    );
}

.up-next-art span{
  color:var(--lime);
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
}

.up-next-art strong{
  align-self:flex-end;
  color:#444;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:50px;
}

.up-next-copy small{
  color:#666;
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
}

.up-next-copy h3{
  margin:5px 0;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:27px;
  line-height:.9;
}

.up-next-copy p{
  margin:8px 0 0;
  color:#6d6d72;
  font-size:9px;
}

.up-next-time{
  padding-right:18px;
  text-align:right;
}

.up-next-time small{
  display:block;
  color:#666;
  font-size:6px;
}

.up-next-time strong{
  display:block;
  margin-top:3px;
  font-size:19px;
}

.up-next-time span{
  color:#777;
  font-size:7px;
}



/* =====================================
   RANKINGS PREVIEW
===================================== */

.ranking-preview{
  padding:
    55px
    18px
    130px;
  border-top:1px solid var(--line);
}

.ranking-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}

.ranking-head small{
  color:var(--lime);
  font-size:7px;
  font-weight:950;
  letter-spacing:.18em;
}

.ranking-head h2{
  margin:8px 0 0;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:
    clamp(
      40px,
      10vw,
      76px
    );
  line-height:.85;
}

.ranking-head a{
  color:#777;
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}

.ranking-strip{
  margin-top:25px;
}

.rank-person{
  display:grid;
  grid-template-columns:
    45px
    1fr
    auto;
  align-items:center;
  gap:12px;
  padding:18px 0;
  border-top:1px solid var(--line);
}

.rank-person b{
  color:var(--lime);
  font-size:9px;
}

.rank-person strong{
  display:block;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size:24px;
}

.rank-person span{
  display:block;
  margin-top:2px;
  color:#666;
  font-size:7px;
  font-weight:950;
  letter-spacing:.11em;
}

.rank-person em{
  color:#999;
  font-style:normal;
  font-size:8px;
  font-weight:950;
}



/* =====================================
   FLOAT BUTTON
===================================== */

.callout-fab{
  position:fixed;
  right:16px;
  bottom:84px;
  z-index:80;
  min-height:46px;
  padding:0 15px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--lime);
  color:#050505;
  box-shadow:
    0 16px 45px
    rgba(0,0,0,.55);
  font-size:8px;
  font-weight:950;
  letter-spacing:.11em;
}

.callout-fab span{
  font-size:16px;
}



/* =====================================
   BOTTOM NAV
===================================== */

.arena-bottom-nav{
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  bottom:0;
  height:
    calc(
      70px +
      env(safe-area-inset-bottom)
    );
  padding-bottom:
    env(safe-area-inset-bottom);
  display:grid;
  grid-template-columns:
    repeat(
      4,
      1fr
    );
  border-top:1px solid var(--line);
  background:rgba(5,5,5,.96);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.arena-bottom-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#5e5e64;
  font-size:6px;
  font-weight:950;
  letter-spacing:.11em;
}

.arena-bottom-nav a span{
  font-size:16px;
}

.arena-bottom-nav a.active{
  color:var(--lime);
}



/* =====================================
   TABLET / DESKTOP
===================================== */

@media(min-width:760px){

  .battle-broadcast{
    padding:
      45px
      45px
      70px;
  }

  .battle-stage{
    gap:18px;
  }

  .media-placeholder{
    aspect-ratio:9/12;
  }

  .competitor-identity strong{
    font-size:54px;
  }

  .versus-mark{
    width:65px;
    height:65px;
  }

  .versus-mark strong{
    font-size:22px;
  }

  .crowd-control,
  .crowd-alert,
  .board-stakes{
    padding-left:28px;
    padding-right:28px;
  }

  .up-next,
  .ranking-preview{
    padding-left:45px;
    padding-right:45px;
  }

}



/* =====================================
   SMALL PHONE
===================================== */

@media(max-width:390px){

  .battle-broadcast{
    padding-left:12px;
    padding-right:12px;
  }

  .competitor-identity{
    padding-left:9px;
    padding-right:9px;
  }

  .competitor-identity strong{
    font-size:25px;
  }

  .score-panel strong{
    font-size:23px;
  }

  .up-next-card{
    grid-template-columns:
      90px
      1fr;
  }

  .up-next-time{
    display:none;
  }

}



/* =====================================
   REDUCED MOTION
===================================== */

@media(
  prefers-reduced-motion:reduce
){

  *{
    scroll-behavior:auto!important;
    animation:none!important;
    transition:none!important;
  }

}


/* =====================================
   N.P.P. ARENA — SOCIAL IDENTITY
===================================== */

.npp-ig-handle{
  color:#a7a7ad;
  text-decoration:none;
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  transition:
    color .18s ease,
    opacity .18s ease;
}

.npp-ig-handle:hover{
  color:#681426;
}

.npp-ig-handle:focus-visible{
  outline:1px solid #681426;
  outline-offset:3px;
}