/* =========================================================
   N.P.P. ARENA — CINEMATIC V5
   BLACK × WINE × CREAM
========================================================= */

:root{
  --arena-black:#050405;
  --arena-ink:#090708;
  --arena-cream:#eee8df;
  --arena-muted:#8b8588;

  --arena-wine:#681426;
  --arena-wine-bright:#8a2138;
  --arena-wine-deep:#3a0a16;

  --arena-line:rgba(255,255,255,.10);
}


/* =========================================================
   WORLD
========================================================= */

html{
  background:var(--arena-black);
}

body{
  position:relative;
  isolation:isolate;

  background:
    radial-gradient(
      ellipse at 78% 6%,
      rgba(126,24,50,.28),
      transparent 31%
    ),
    radial-gradient(
      ellipse at 10% 55%,
      rgba(95,12,34,.13),
      transparent 37%
    ),
    radial-gradient(
      ellipse at 70% 92%,
      rgba(70,8,25,.16),
      transparent 33%
    ),
    linear-gradient(
      150deg,
      #0d090a 0%,
      #080607 48%,
      #040404 100%
    ) !important;

  background-attachment:fixed !important;

  color:var(--arena-cream);
}


/* film grain */

body::before{
  content:"";

  position:fixed;
  inset:0;

  z-index:9998;

  pointer-events:none;

  opacity:.10;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.94' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");

  mix-blend-mode:soft-light;
}


/* cinematic wine light */

body::after{
  content:"";

  position:fixed;

  width:72vw;
  height:125vh;

  right:-32vw;
  top:-38vh;

  z-index:-1;

  pointer-events:none;

  transform:rotate(-12deg);

  background:
    linear-gradient(
      110deg,
      transparent 26%,
      rgba(255,240,229,.035) 46%,
      rgba(138,33,56,.10) 54%,
      transparent 71%
    );

  filter:blur(18px);
}


/* =========================================================
   GLOBAL ACCENT OVERRIDE
========================================================= */

:root{
  --lime:var(--arena-wine);
  --acid:var(--arena-wine);
  --neon:var(--arena-wine);
}


/* hard-coded lime cleanup */

[style*="#681426"],
[style*="#681426"]{
  color:var(--arena-wine-bright) !important;
}


/* =========================================================
   TOP / BRAND
========================================================= */

.topbar,
.arena-topbar,
header{
  background:
    rgba(7,5,6,.72) !important;

  border-bottom:
    1px solid var(--arena-line) !important;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}


.brand,
.logo{
  color:var(--arena-cream) !important;
}


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

.broadcast-stage{
  position:relative;

  background:
    transparent !important;

  overflow:hidden;
}


.broadcast-stage::before{
  content:"N.P.P.";

  position:absolute;

  right:-3vw;
  top:4vh;

  z-index:-1;

  color:
    rgba(255,255,255,.018);

  font-family:
    Impact,
    "Arial Black",
    sans-serif;

  font-size:
    clamp(170px,31vw,520px);

  line-height:.65;

  letter-spacing:-.08em;
}


.broadcast-stage::after{
  content:"ARENA";

  position:absolute;

  left:-1vw;
  bottom:2vh;

  z-index:-1;

  color:
    rgba(104,20,38,.045);

  font-family:
    Impact,
    "Arial Black",
    sans-serif;

  font-size:
    clamp(120px,22vw,360px);

  line-height:.7;

  letter-spacing:-.06em;
}


/* =========================================================
   MATCHUP PRESENTATION
========================================================= */

.battle-card,
.match-card,
.fighter-card,
.side-card,
.entry-card{

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.024),
      rgba(255,255,255,.004)
    ) !important;

  border:
    1px solid rgba(255,255,255,.09) !important;

  box-shadow:
    none !important;

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}


.battle-card:hover,
.match-card:hover{

  border-color:
    rgba(138,33,56,.50) !important;
}


/* fighter names */

.fighter-name,
.entry-name,
.competitor-name,
.side-name{

  color:var(--arena-cream) !important;

  font-family:
    Impact,
    "Arial Black",
    sans-serif !important;

  letter-spacing:-.02em;
}


/* handles */

.npp-ig-handle{
  color:#8d868a !important;
}

.npp-ig-handle:hover{
  color:var(--arena-wine-bright) !important;
}


/* =========================================================
   LIVE / STATUS
========================================================= */

.live,
.live-pill,
.status-live,
[data-status="live"]{

  color:#d36a82 !important;

  border-color:
    rgba(138,33,56,.55) !important;
}


.live-dot,
.status-dot{

  background:
    var(--arena-wine-bright) !important;

  box-shadow:
    0 0 14px rgba(138,33,56,.65) !important;
}


/* =========================================================
   VOTE SYSTEM VISUALS
========================================================= */

.vote-btn,
.vote-button,
[data-vote]{

  border-color:
    rgba(255,255,255,.16) !important;

  background:
    rgba(8,7,8,.72) !important;

  color:
    var(--arena-cream) !important;

  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}


.vote-btn:hover,
.vote-button:hover,
[data-vote]:hover{

  border-color:
    var(--arena-wine-bright) !important;

  background:
    rgba(104,20,38,.18) !important;

  transform:
    translateY(-1px);
}


.vote-btn.active,
.vote-button.active,
[data-vote].active{

  background:
    var(--arena-wine) !important;

  border-color:
    var(--arena-wine-bright) !important;

  color:#fff !important;
}


/* vote bars */

.vote-bar,
.progress-bar,
.vote-fill{

  background:
    linear-gradient(
      90deg,
      var(--arena-wine-deep),
      var(--arena-wine-bright)
    ) !important;
}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown,
.timer,
.battle-clock{

  color:
    var(--arena-cream) !important;

  text-shadow:
    0 0 24px rgba(138,33,56,.12);
}


.countdown strong,
.timer strong,
.battle-clock strong{

  color:
    var(--arena-wine-bright) !important;
}


/* =========================================================
   VS MOMENT
========================================================= */

.vs,
.vs-mark,
.versus{

  color:
    rgba(255,255,255,.32) !important;

  font-family:
    Impact,
    "Arial Black",
    sans-serif !important;
}


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

button.primary,
.btn-primary,
.cta-primary,
.take-board,
.challenge-btn{

  background:
    var(--arena-wine) !important;

  border-color:
    var(--arena-wine) !important;

  color:#fff !important;
}


button.primary:hover,
.btn-primary:hover,
.cta-primary:hover,
.take-board:hover,
.challenge-btn:hover{

  background:
    var(--arena-wine-bright) !important;

  border-color:
    var(--arena-wine-bright) !important;
}


/* =========================================================
   CHALLENGE / ACCEPT FORMS
========================================================= */

form,
.form-panel,
.challenge-form,
.accept-panel{

  background:
    linear-gradient(
      145deg,
      rgba(18,13,15,.72),
      rgba(7,7,8,.55)
    ) !important;

  border:
    1px solid rgba(255,255,255,.10) !important;

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}


input,
select,
textarea{

  background:
    rgba(6,5,6,.78) !important;

  border:
    1px solid rgba(255,255,255,.13) !important;

  color:
    var(--arena-cream) !important;
}


input:focus,
select:focus,
textarea:focus{

  border-color:
    var(--arena-wine-bright) !important;

  outline:none !important;

  box-shadow:
    0 0 0 1px rgba(138,33,56,.20);
}


/* =========================================================
   LEADERBOARD
========================================================= */

.leaderboard-row,
.rank-row{

  background:
    transparent !important;

  border-bottom:
    1px solid var(--arena-line) !important;
}


.leaderboard-row:first-child,
.rank-row:first-child{

  border-top:
    1px solid var(--arena-line) !important;
}


.rank,
.position{

  color:
    var(--arena-wine-bright) !important;

  font-family:
    Impact,
    "Arial Black",
    sans-serif !important;
}


/* =========================================================
   EDITORIAL RAIL
========================================================= */

.arena-world-rail{

  display:flex;
  align-items:center;

  gap:0;

  overflow:auto;

  padding:
    14px 18px;

  border-bottom:
    1px solid var(--arena-line);

  background:
    rgba(5,4,5,.55);

  backdrop-filter:blur(12px);

  scrollbar-width:none;
}


.arena-world-rail::-webkit-scrollbar{
  display:none;
}


.arena-world-rail a{

  flex:0 0 auto;

  padding:
    0 18px;

  border-right:
    1px solid var(--arena-line);

  color:#7e777b;

  text-decoration:none;

  font-size:7px;
  font-weight:950;
  letter-spacing:.13em;
}


.arena-world-rail a:first-child{
  padding-left:0;
}


.arena-world-rail a:hover,
.arena-world-rail a.active{

  color:
    var(--arena-cream);
}


/* =========================================================
   REVEAL MOTION
========================================================= */

.arena-cinema-reveal{

  opacity:0;

  transform:
    translateY(18px);

  transition:
    opacity .7s ease,
    transform .7s
    cubic-bezier(.2,.7,.2,1);
}


.arena-cinema-reveal.visible{

  opacity:1;

  transform:none;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

  .broadcast-stage::before{

    right:-20vw;
    top:12vh;

  }


  .broadcast-stage::after{

    bottom:5vh;

  }

}


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

  .arena-cinema-reveal{

    opacity:1;
    transform:none;
    transition:none;

  }

}