/* ==========================================================
   N.P.P. ARENA — VENUE V5

   Not a dashboard.
   Not a corporate control center.
   A digital venue.
========================================================== */


/* ==========================================================
   THE BILLBOARD IS THE WORLD
========================================================== */

.npp-arena-billboard-media{

  opacity:.44 !important;

}


.npp-arena-billboard-media img,
.npp-arena-billboard-media video{

  filter:
    saturate(.92)
    contrast(1.08)
    brightness(.68)
    !important;

}


.npp-arena-billboard-shade{

  background:

    linear-gradient(
      180deg,
      rgba(4,4,6,.24) 0%,
      rgba(4,4,6,.36) 28%,
      rgba(4,4,6,.52) 68%,
      rgba(4,4,6,.82) 100%
    ),

    radial-gradient(
      circle at 48% 22%,
      transparent 0%,
      rgba(0,0,0,.10) 58%,
      rgba(0,0,0,.38) 100%
    ) !important;

}


/* ==========================================================
   STOP MAKING EVERYTHING A CARD
========================================================== */

.npp-arena-floor{

  width:
    min(
      1400px,
      calc(100% - 28px)
    ) !important;

  margin:
    18px auto 0 !important;

  padding:
    clamp(
      30px,
      6vw,
      84px
    ) !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

}


.npp-arena-floor::after{

  display:none;

}


/* ==========================================================
   ECONOMY = CULTURE TICKER, NOT ACCOUNTING PANEL
========================================================== */

.npp-economy{

  width:
    min(
      1180px,
      calc(100% - 28px)
    ) !important;

  margin:
    6px auto 38px !important;

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

  border-radius:
    999px !important;

  background:

    linear-gradient(
      100deg,
      rgba(104,20,38,.20),
      rgba(255,255,255,.050) 40%,
      rgba(255,255,255,.018)
    ) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.10),

    0 18px 60px
      rgba(0,0,0,.24)
    !important;

  backdrop-filter:
    blur(24px)
    saturate(135%)
    !important;

  -webkit-backdrop-filter:
    blur(24px)
    saturate(135%)
    !important;

}


/* ==========================================================
   DISCOVERY = OPEN FLOOR LANES
========================================================== */

.floor-discovery{

  width:
    min(
      1400px,
      100%
    );

  margin:
    0 auto;

  padding:
    0 0 90px;

  background:
    transparent !important;

}


.floor-module{

  width:
    100% !important;

  margin:
    0 auto !important;

  padding:
    clamp(
      30px,
      5vw,
      68px
    )
    max(
      18px,
      calc(
        (
          100vw -
          1380px
        ) /
        2
      )
    )
    !important;

  border:
    0 !important;

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

  border-radius:
    0 !important;

  background:

    linear-gradient(
      90deg,
      rgba(104,20,38,.08),
      rgba(10,10,13,.16) 36%,
      transparent 78%
    )
    !important;

  box-shadow:
    none !important;

  backdrop-filter:
    blur(10px)
    saturate(112%)
    !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(112%)
    !important;

  overflow:visible !important;

}


.floor-module::before{

  content:"";

  position:absolute;

  left:
    max(
      18px,
      calc(
        (
          100vw -
          1380px
        ) /
        2
      )
    );

  top:-1px;

  width:
    min(
      180px,
      28vw
    );

  height:1px;

  background:

    linear-gradient(
      90deg,
      rgba(154,41,69,.90),
      rgba(255,255,255,.26),
      transparent
    );

}


.floor-module::after{

  display:none !important;

}


/* ==========================================================
   TYPOGRAPHY SHOULD FEEL LIKE A VENUE MARQUEE
========================================================== */

.floor-module-head{

  margin-bottom:
    26px !important;

}


.floor-module-kicker{

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

  font-size:
    9px !important;

  letter-spacing:
    .22em !important;

}


.floor-module-head h2{

  font-size:
    clamp(
      34px,
      6vw,
      82px
    ) !important;

  line-height:
    .86 !important;

  letter-spacing:
    -.055em !important;

}


/* ==========================================================
   LIVE / RISING LANES SWIPE LIKE CONTENT
========================================================== */

.floor-live-list,
.floor-rising-rail,
.floor-tonight-list{

  scroll-snap-type:
    x mandatory;

  scrollbar-width:
    none;

}


.floor-live-list::-webkit-scrollbar,
.floor-rising-rail::-webkit-scrollbar,
.floor-tonight-list::-webkit-scrollbar{

  display:none;

}


.floor-live-list > *,
.floor-rising-rail > *,
.floor-tonight-list > *{

  scroll-snap-align:
    start;

}


/* ==========================================================
   FEATURED LIVE ITEM = CONTENT, NOT WORK CARD
========================================================== */

.floor-live-featured{

  position:relative;

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

  border-radius:
    28px !important;

  background:

    linear-gradient(
      120deg,
      rgba(104,20,38,.22),
      rgba(10,8,11,.26) 52%,
      rgba(0,0,0,.12)
    )
    !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.12),

    0 30px 90px
      rgba(0,0,0,.28)
    !important;

  backdrop-filter:
    blur(16px)
    saturate(130%)
    !important;

  -webkit-backdrop-filter:
    blur(16px)
    saturate(130%)
    !important;

}


/* ==========================================================
   BUTTONS: LOW-KEY, NOT ENTERPRISE
========================================================== */

.floor-command-rail a,
.floor-live-enter,
.ranking-preview a{

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

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.055)
    !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.08)
    !important;

  backdrop-filter:
    blur(14px)
    !important;

  -webkit-backdrop-filter:
    blur(14px)
    !important;

}


/* ==========================================================
   COMMAND BAR IS A FLOATING HUD, NOT NAVIGATION CHROME
========================================================== */

.npp-arena-commandbar{

  border:
    0 !important;

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

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

  box-shadow:
    none !important;

}


.arena-tabs{

  border:
    0 !important;

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

}


/* ==========================================================
   LIVE DIVIDER SHOULD FEEL LIKE LIGHT IN A ROOM
========================================================== */

.npp-live-divider{

  min-height:
    1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(154,41,69,.55),
      rgba(255,255,255,.12),
      transparent
    )
    !important;

  opacity:.70;

}


/* ==========================================================
   MOBILE — KEEP ENERGY, LOSE THE BOXES
========================================================== */

@media(max-width:700px){

  .npp-arena-billboard-media{

    opacity:.38 !important;

  }


  .npp-arena-floor{

    width:
      100% !important;

    padding:
      34px 18px 44px
      !important;

  }


  .npp-economy{

    width:
      calc(
        100% - 20px
      ) !important;

    border-radius:
      22px !important;

  }


  .floor-module{

    padding:
      42px 16px
      !important;

  }


  .floor-module-head h2{

    font-size:
      clamp(
        42px,
        14vw,
        68px
      ) !important;

  }

}