/* ==========================================================
   N.P.P. ARENA — COMMAND BAR V1
   Compact app-level navigation.
========================================================== */

.npp-arena-commandbar{
  position:sticky;
  top:0;
  z-index:110;

  width:100%;
  height:auto;
  min-height:66px;

  box-sizing:border-box;

  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr);

  align-items:center;

  gap:14px;

  padding:
    max(10px,env(safe-area-inset-top))
    18px
    10px;

  border-bottom:
    1px solid
    rgba(255,255,255,.08);

  background:
    linear-gradient(
      180deg,
      rgba(8,8,10,.97),
      rgba(5,5,7,.93)
    );

  backdrop-filter:
    blur(18px)
    saturate(140%);

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


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

.npp-command-brand{
  justify-self:start;

  display:flex;
  flex-direction:column;
  justify-content:center;

  min-width:0;

  color:#fff;
  text-decoration:none;
}

.npp-command-mark{
  font-family:
    Arial Black,
    Impact,
    sans-serif;

  font-size:18px;
  font-weight:950;
  line-height:.92;

  letter-spacing:.16em;

  white-space:nowrap;
}

.npp-command-sub{
  margin-top:5px;

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

  font-size:7px;
  font-weight:950;

  letter-spacing:.30em;
}


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

.npp-command-live{
  justify-self:center;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  min-height:32px;

  padding:
    0 12px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:999px;

  background:
    rgba(255,255,255,.025);

  color:#fff;

  font-size:8px;
  font-weight:950;
  letter-spacing:.18em;
}

.npp-command-live i{
  position:relative;

  width:7px;
  height:7px;

  flex:none;

  border-radius:50%;

  background:#b62a4c;

  box-shadow:
    0 0 0 4px
    rgba(182,42,76,.10);
}

.npp-command-live i::after{
  content:"";

  position:absolute;
  inset:-4px;

  border:
    1px solid
    rgba(182,42,76,.34);

  border-radius:50%;

  animation:
    nppLivePulse
    1.8s
    ease-out
    infinite;
}

@keyframes nppLivePulse{

  0%{
    opacity:.9;
    transform:scale(.6);
  }

  70%{
    opacity:0;
    transform:scale(1.6);
  }

  100%{
    opacity:0;
  }

}


/* ==========================================================
   PROFILE CONTROL
========================================================== */

.npp-command-profile{
  justify-self:end;

  display:grid;
  place-items:center;

  width:38px;
  height:38px;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.015)
    );

  color:#fff;

  text-decoration:none;

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

.npp-command-profile:active{
  transform:scale(.94);
}

.npp-profile-ring{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;
}

.npp-profile-ring svg{
  width:19px;
  height:19px;

  fill:none;
  stroke:currentColor;

  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;

  opacity:.82;
}


/* ==========================================================
   CATEGORY RAIL
========================================================== */

.arena-tabs{
  position:sticky !important;

  top:
    calc(
      66px +
      env(safe-area-inset-top)
    ) !important;

  z-index:100 !important;

  display:flex;

  gap:24px;

  width:100%;

  box-sizing:border-box;

  padding:
    14px
    18px
    10px !important;

  overflow-x:auto;

  background:
    rgba(5,5,7,.94) !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.07) !important;

  backdrop-filter:
    blur(16px);

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

  scrollbar-width:none;

  scroll-snap-type:
    x proximity;
}

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

.arena-tabs button{
  flex:none;

  scroll-snap-align:start;

  padding:
    0 0 8px !important;

  border:0;
  border-bottom:
    2px solid transparent !important;

  background:none;

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

  font-size:8px !important;
  font-weight:950 !important;

  letter-spacing:.16em !important;

  transition:
    color .16s ease,
    border-color .16s ease;
}

.arena-tabs button.active{
  color:#fff !important;

  border-bottom-color:
    #a72a49 !important;
}


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

@media(max-width:600px){

  .npp-arena-commandbar{
    min-height:62px;

    gap:10px;

    padding:
      max(8px,env(safe-area-inset-top))
      14px
      8px;
  }

  .npp-command-mark{
    font-size:16px;
    letter-spacing:.14em;
  }

  .npp-command-sub{
    margin-top:4px;

    font-size:6px;
  }

  .npp-command-live{
    min-height:30px;

    padding:
      0 10px;

    font-size:7px;
  }

  .npp-command-profile{
    width:36px;
    height:36px;
  }

  .arena-tabs{
    top:
      calc(
        62px +
        env(safe-area-inset-top)
      ) !important;

    gap:26px;

    padding:
      13px
      16px
      9px !important;
  }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media(max-width:360px){

  .npp-arena-commandbar{
    grid-template-columns:
      minmax(0,1fr)
      auto
      38px;
  }

  .npp-command-live{
    padding:
      0 8px;
  }

  .npp-command-mark{
    font-size:15px;
  }

}