/* ==========================================================
   AURA PLAY BRAND ALIGN V2
   Shared visual identity with Aura landing.
   ========================================================== */


.aura-play-page-shell {
  position:
    relative;

  min-height:
    100vh;

  overflow:
    clip;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(171,255,0,.065),
      transparent 38rem
    ),
    radial-gradient(
      circle at 8% 32%,
      rgba(120,255,0,.03),
      transparent 28rem
    ),
    radial-gradient(
      circle at 92% 58%,
      rgba(120,255,0,.025),
      transparent 26rem
    ),
    #010401;
}


.aura-play-page-shell::before {
  content:
    "";

  position:
    fixed;

  z-index:
    0;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    .14;

  background-image:
    linear-gradient(
      rgba(204,255,0,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(204,255,0,.025) 1px,
      transparent 1px
    );

  background-size:
    58px 58px;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 30%,
      #000,
      transparent 74%
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 30%,
      #000,
      transparent 74%
    );
}


/* ----------------------------------------------------------
   GAME PAGE OFFSET FOR SHARED FIXED HEADER
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page {
  position:
    relative;

  z-index:
    2;

  min-height:
    auto !important;

  padding-top:
    124px !important;

  padding-bottom:
    72px !important;

  background:
    transparent !important;
}


/* ----------------------------------------------------------
   ASCENSION CONTEXT RAIL
   ---------------------------------------------------------- */

.aura-play-context {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  width:
    min(1160px, calc(100% - 36px));

  min-height:
    58px;

  margin:
    0 auto 14px;

  padding:
    9px 14px;

  border:
    1px solid rgba(204,255,0,.11);

  border-radius:
    8px 20px 8px 20px;

  background:
    linear-gradient(
      90deg,
      rgba(8,15,7,.86),
      rgba(2,7,3,.76)
    );

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

  backdrop-filter:
    blur(14px);
}


.aura-play-context-signal {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;
}


.aura-play-context-signal > span {
  position:
    relative;

  width:
    32px;

  height:
    32px;

  border:
    1px solid rgba(204,255,0,.20);

  border-radius:
    50%;
}


.aura-play-context-signal > span::before {
  content:
    "";

  position:
    absolute;

  inset:
    7px;

  border:
    1px dashed rgba(204,255,0,.22);

  border-radius:
    50%;

  animation:
    auraPlayContextRotate
    8s linear infinite;
}


.aura-play-context-signal > span::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    6px;

  height:
    6px;

  transform:
    translate(-50%,-50%);

  border-radius:
    50%;

  background:
    #ccff00;

  box-shadow:
    0 0 10px rgba(204,255,0,.74);
}


.aura-play-context-signal small {
  display:
    block;

  margin-bottom:
    3px;

  color:
    rgba(204,255,0,.62);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .16em;
}


.aura-play-context-signal strong {
  display:
    block;

  color:
    rgba(244,248,241,.88);

  font-size:
    12px;

  letter-spacing:
    .04em;
}


.aura-play-context-state {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    7px 9px;

  color:
    rgba(239,246,234,.43);

  border:
    1px solid rgba(204,255,0,.08);

  border-radius:
    999px;

  background:
    rgba(0,0,0,.22);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .13em;
}


.aura-play-context-state i {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    #ccff00;

  box-shadow:
    0 0 8px rgba(204,255,0,.62);
}


/* ----------------------------------------------------------
   GAME SHELL ALIGNMENT
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell {
  width:
    min(1160px, calc(100% - 36px)) !important;

  margin:
    0 auto !important;

  border-color:
    rgba(204,255,0,.17) !important;

  border-radius:
    26px 8px 26px 8px !important;

  background:
    linear-gradient(
      150deg,
      rgba(7,14,6,.96),
      rgba(1,5,2,.99)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 32px 100px rgba(0,0,0,.30),
    0 0 60px rgba(166,255,0,.025) !important;
}


/* Holder gate becomes part of the same premium shell */

.aura-play-page-shell
.wallet-gate-panel {
  border-color:
    rgba(204,255,0,.20) !important;

  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(171,255,0,.075),
      transparent 43%
    ),
    linear-gradient(
      155deg,
      rgba(8,16,7,.98),
      rgba(2,7,3,.99)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 30px 90px rgba(0,0,0,.26) !important;
}


/* ----------------------------------------------------------
   COMPETITIVE / LEADERBOARD
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-competitive {
  width:
    min(1160px, calc(100% - 36px)) !important;

  margin:
    34px auto 0 !important;

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

  border-radius:
    26px 8px 26px 8px !important;

  background:
    linear-gradient(
      145deg,
      rgba(7,14,6,.95),
      rgba(2,6,3,.985)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.022),
    0 30px 90px rgba(0,0,0,.25) !important;
}


.aura-play-page-shell
.aura-board,
.aura-play-page-shell
.aura-recent,
.aura-play-page-shell
.aura-x-profile {
  border-color:
    rgba(204,255,0,.11) !important;

  background:
    rgba(3,9,4,.72) !important;
}


/* ----------------------------------------------------------
   SHARED FOOTER SEPARATION
   ---------------------------------------------------------- */

.aura-play-page-shell
.footer-v2 {
  position:
    relative;

  z-index:
    3;

  margin-top:
    0 !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 760px) {

  .aura-play-page-shell
  .game-page {
    padding-top:
      104px !important;

    padding-bottom:
      48px !important;
  }


  .aura-play-context {
    width:
      calc(100% - 20px);

    min-height:
      52px;

    margin-bottom:
      10px;

    padding:
      8px 10px;
  }


  .aura-play-context-state {
    display:
      none;
  }


  .aura-play-page-shell
  .game-shell,
  .aura-play-page-shell
  .aura-competitive {
    width:
      calc(100% - 20px) !important;

    border-radius:
      18px 6px 18px 6px !important;
  }

}


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

  .aura-play-page-shell *,
  .aura-play-page-shell *::before,
  .aura-play-page-shell *::after {
    animation:
      none !important;
  }

}


@keyframes auraPlayContextRotate {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


/* ==========================================================
   AURA PLAY PREMIUM CARDS V2
   Holder Gate + Competitive Observatory
   ========================================================== */

.aura-play-page-shell {
  --play-accent:
    #c9ff18;

  --play-accent-bright:
    #d8ff48;

  --play-accent-deep:
    #a9db16;

  --play-cream:
    #f0f5e9;

  --play-muted:
    rgba(226,235,218,.53);

  --play-dim:
    rgba(226,235,218,.27);

  --play-line:
    rgba(201,255,24,.12);

  --play-line-strong:
    rgba(201,255,24,.24);

  --play-surface:
    rgba(6,13,5,.96);

  --play-surface-2:
    rgba(10,18,8,.94);

  --play-black:
    #020501;
}


/* ==========================================================
   LOCKED ARENA LAYOUT
   Prevent holder panel clipping
   ========================================================== */

.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden])) {
  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  padding:
    24px 0 34px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]) {
  position:
    relative !important;

  inset:
    auto !important;

  width:
    100% !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  display:
    grid !important;

  place-items:
    center !important;

  overflow:
    visible !important;

  padding:
    0 18px !important;

  background:
    transparent !important;
}


/* Hide game layer visually while access gate owns the shell */

.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.game-canvas,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.game-hud,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.build-strip,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.xp-shell,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.pulse-control,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.world-stage-indicator,
.aura-play-page-shell
.game-shell:has(.wallet-gate:not([hidden]))
.aura-live-signal {
  opacity:
    0 !important;

  pointer-events:
    none !important;
}


/* ==========================================================
   HOLDER ACCESS // PREMIUM SIGNAL VAULT
   ========================================================== */

.aura-play-page-shell
.wallet-gate-panel {
  position:
    relative;

  isolation:
    isolate;

  width:
    min(760px, 100%) !important;

  max-width:
    760px !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 auto !important;

  padding:
    clamp(34px,4vw,50px) !important;

  overflow:
    hidden !important;

  border:
    1px solid
    var(--play-line-strong) !important;

  border-radius:
    10px 34px 10px 34px !important;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(201,255,24,.085),
      transparent 28%
    ),
    radial-gradient(
      circle at 10% 100%,
      rgba(139,188,30,.055),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      rgba(11,20,8,.985),
      rgba(3,8,3,.995) 60%,
      rgba(5,11,4,.99)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    inset 0 0 70px
    rgba(171,223,32,.018),
    0 34px 90px
    rgba(0,0,0,.38),
    0 0 60px
    rgba(172,226,27,.035) !important;
}


.aura-play-page-shell
.wallet-gate-panel::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -2;

  inset:
    0;

  opacity:
    .17;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(201,255,24,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(201,255,24,.035) 1px,
      transparent 1px
    );

  background-size:
    34px 34px;

  -webkit-mask-image:
    linear-gradient(
      135deg,
      #000,
      transparent 72%
    );

  mask-image:
    linear-gradient(
      135deg,
      #000,
      transparent 72%
    );
}


.aura-play-page-shell
.wallet-gate-panel::after {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  width:
    330px;

  height:
    330px;

  right:
    -175px;

  top:
    -185px;

  border:
    1px solid
    rgba(201,255,24,.08);

  border-radius:
    50%;

  box-shadow:
    0 0 0 28px
    rgba(201,255,24,.018),
    0 0 0 66px
    rgba(201,255,24,.010);
}


.aura-play-page-shell
.wallet-gate-panel > * {
  position:
    relative;

  z-index:
    2;
}


/* Signal core */

.aura-play-page-shell
.wallet-gate-signal {
  width:
    64px !important;

  height:
    64px !important;

  margin-bottom:
    26px !important;

  border:
    1px solid
    rgba(201,255,24,.22) !important;

  background:
    rgba(4,10,3,.72) !important;

  box-shadow:
    inset 0 0 24px
    rgba(201,255,24,.025) !important;
}


.aura-play-page-shell
.wallet-gate-signal::before {
  border-color:
    rgba(201,255,24,.20) !important;
}


.aura-play-page-shell
.wallet-gate-signal span,
.aura-play-page-shell
.wallet-gate-signal i {
  background:
    var(--play-accent) !important;

  box-shadow:
    0 0 12px
    rgba(201,255,24,.72),
    0 0 34px
    rgba(201,255,24,.18) !important;
}


/* Typography */

.aura-play-page-shell
.wallet-gate-kicker {
  margin:
    0 0 15px !important;

  color:
    var(--play-accent) !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .15em !important;

  text-transform:
    uppercase;
}


.aura-play-page-shell
.wallet-gate-panel h2 {
  max-width:
    630px;

  margin:
    0 !important;

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

  font-size:
    clamp(48px,5.2vw,72px) !important;

  font-weight:
    700 !important;

  line-height:
    .92 !important;

  letter-spacing:
    -.055em !important;
}


.aura-play-page-shell
.wallet-gate-panel h2 em {
  display:
    block;

  margin-top:
    4px;

  color:
    var(--play-accent) !important;

  font-style:
    normal;

  font-weight:
    600;

  text-shadow:
    0 0 28px
    rgba(201,255,24,.08);
}


.aura-play-page-shell
.wallet-gate-copy {
  max-width:
    620px !important;

  margin:
    30px 0 0 !important;

  color:
    var(--play-muted) !important;

  font-size:
    14px !important;

  line-height:
    1.65 !important;
}


.aura-play-page-shell
.wallet-gate-copy strong {
  color:
    rgba(240,245,233,.92) !important;
}


/* Status modules */

.aura-play-page-shell
.wallet-gate-status {
  display:
    grid !important;

  grid-template-columns:
    repeat(3,minmax(0,1fr)) !important;

  gap:
    10px !important;

  margin-top:
    26px !important;
}


.aura-play-page-shell
.wallet-gate-status > div {
  min-height:
    82px;

  padding:
    15px 16px !important;

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

  border-radius:
    7px 17px 7px 17px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      rgba(6,13,5,.76)
    ) !important;

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


.aura-play-page-shell
.wallet-gate-status small {
  color:
    rgba(231,237,224,.32) !important;

  font-size:
    7px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .12em !important;
}


.aura-play-page-shell
.wallet-gate-status strong {
  margin-top:
    8px !important;

  color:
    rgba(235,242,228,.88) !important;

  font-size:
    11px !important;
}


.aura-play-page-shell
.wallet-gate-message {
  min-height:
    20px;

  margin:
    20px 0 0 !important;

  color:
    rgba(229,236,221,.48) !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;
}


/* CTA */

.aura-play-page-shell
.wallet-gate-actions {
  margin-top:
    28px !important;
}


.aura-play-page-shell
.wallet-connect-button,
.aura-play-page-shell
.wallet-buy-button {
  width:
    100% !important;

  min-height:
    58px !important;

  border:
    1px solid
    rgba(218,255,73,.72) !important;

  border-radius:
    6px 20px 6px 20px !important;

  color:
    #071000 !important;

  background:
    linear-gradient(
      100deg,
      var(--play-accent-bright),
      var(--play-accent)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.30),
    0 14px 34px
    rgba(171,221,28,.10) !important;

  font-size:
    14px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.01em;
}


.aura-play-page-shell
.wallet-connect-button:hover,
.aura-play-page-shell
.wallet-buy-button:hover {
  transform:
    translateY(-2px);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.34),
    0 18px 42px
    rgba(171,221,28,.16) !important;
}


.aura-play-page-shell
.wallet-gate-note,
.aura-play-page-shell
.wallet-buy-help {
  max-width:
    620px;

  margin:
    16px auto 0 !important;

  color:
    rgba(226,235,218,.25) !important;

  font-size:
    8px !important;

  line-height:
    1.55 !important;

  text-align:
    center;
}


/* ==========================================================
   LEADERBOARD // PREMIUM SIGNAL COMMAND
   ========================================================== */

.aura-play-page-shell
.aura-competitive {
  position:
    relative;

  isolation:
    isolate;

  width:
    min(1280px,calc(100% - 36px)) !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    34px auto 78px !important;

  padding:
    clamp(28px,3vw,40px) !important;

  overflow:
    hidden !important;

  border:
    1px solid
    var(--play-line-strong) !important;

  border-radius:
    10px 34px 10px 34px !important;

  background:
    radial-gradient(
      circle at 89% 2%,
      rgba(201,255,24,.065),
      transparent 25%
    ),
    radial-gradient(
      circle at 8% 82%,
      rgba(143,188,28,.04),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      rgba(9,17,7,.98),
      rgba(3,8,3,.99) 57%,
      rgba(5,11,4,.98)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 36px 100px
    rgba(0,0,0,.34),
    0 0 70px
    rgba(174,226,28,.025) !important;
}


.aura-play-page-shell
.aura-competitive::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  inset:
    0;

  opacity:
    .13;

  pointer-events:
    none;

  background-image:
    linear-gradient(
      rgba(201,255,24,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(201,255,24,.035) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  -webkit-mask-image:
    linear-gradient(
      110deg,
      #000,
      transparent 72%
    );

  mask-image:
    linear-gradient(
      110deg,
      #000,
      transparent 72%
    );
}


/* Header */

.aura-play-page-shell
.aura-competitive-head {
  align-items:
    center !important;

  padding-bottom:
    28px !important;

  border-bottom:
    1px solid
    rgba(201,255,24,.075) !important;
}


.aura-play-page-shell
.aura-competitive-head p {
  margin-bottom:
    11px !important;

  color:
    var(--play-accent) !important;

  font-size:
    8px !important;

  letter-spacing:
    .15em !important;
}


.aura-play-page-shell
.aura-competitive-head h2 {
  color:
    var(--play-cream) !important;

  font-size:
    clamp(40px,4.6vw,62px) !important;

  font-weight:
    700 !important;

  line-height:
    .96 !important;

  letter-spacing:
    -.052em !important;
}


.aura-play-page-shell
.aura-competitive-head h2 em {
  display:
    inline !important;

  color:
    var(--play-accent) !important;

  font-style:
    normal;

  font-weight:
    600;
}


.aura-play-page-shell
.aura-competitive-head > div > span {
  margin-top:
    13px !important;

  color:
    rgba(226,235,218,.42) !important;

  font-size:
    10px !important;
}


/* Online state */

.aura-play-page-shell
.aura-online-card {
  min-width:
    162px !important;

  padding:
    12px 15px !important;

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

  border-radius:
    6px 18px 6px 18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(201,255,24,.035),
      rgba(3,8,3,.72)
    ) !important;
}


.aura-play-page-shell
.aura-online-card > i,
.aura-play-page-shell
.aura-live-signal i {
  background:
    var(--play-accent) !important;

  box-shadow:
    0 0 12px
    rgba(201,255,24,.62) !important;
}


.aura-play-page-shell
.aura-online-card strong {
  color:
    var(--play-cream) !important;
}


/* Player stat deck */

.aura-play-page-shell
.aura-player-stats {
  gap:
    10px !important;

  margin-top:
    18px !important;
}


.aura-play-page-shell
.aura-player-stats article {
  min-height:
    104px;

  padding:
    16px !important;

  border:
    1px solid
    rgba(201,255,24,.085) !important;

  border-radius:
    7px 18px 7px 18px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.018),
      rgba(5,12,5,.70)
    ) !important;
}


.aura-play-page-shell
.aura-player-stats small,
.aura-play-page-shell
.aura-x-profile small {
  color:
    rgba(229,236,221,.30) !important;
}


.aura-play-page-shell
.aura-player-stats strong {
  color:
    rgba(239,245,233,.90) !important;
}


.aura-play-page-shell
.aura-player-stats strong[data-state="success"] {
  color:
    var(--play-accent) !important;
}


/* Board + recent + identity */

.aura-play-page-shell
.aura-board,
.aura-play-page-shell
.aura-recent,
.aura-play-page-shell
.aura-x-profile {
  border:
    1px solid
    rgba(201,255,24,.09) !important;

  border-radius:
    7px 22px 7px 22px !important;

  background:
    linear-gradient(
      145deg,
      rgba(5,12,5,.82),
      rgba(2,7,3,.92)
    ) !important;

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


.aura-play-page-shell
.aura-board > header,
.aura-play-page-shell
.aura-recent > header {
  padding:
    18px 20px !important;

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


.aura-play-page-shell
.aura-board header small,
.aura-play-page-shell
.aura-recent header small {
  color:
    var(--play-accent) !important;
}


.aura-play-page-shell
.aura-board h3,
.aura-play-page-shell
.aura-recent h3 {
  color:
    var(--play-cream) !important;

  font-weight:
    700;
}


/* Tabs */

.aura-play-page-shell
.aura-board-tabs {
  padding:
    4px !important;

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

  background:
    rgba(0,0,0,.18);

  border-radius:
    999px !important;
}


.aura-play-page-shell
.aura-board-tabs button {
  color:
    rgba(230,237,222,.40) !important;
}


.aura-play-page-shell
.aura-board-tabs button.is-active {
  color:
    #071000 !important;

  background:
    linear-gradient(
      100deg,
      var(--play-accent-bright),
      var(--play-accent)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.24),
    0 6px 18px
    rgba(174,225,28,.08);
}


/* Rows */

.aura-play-page-shell
.aura-board-row {
  min-height:
    66px !important;

  border-bottom-color:
    rgba(201,255,24,.045) !important;
}


.aura-play-page-shell
.aura-board-row.is-top-1 {
  background:
    linear-gradient(
      90deg,
      rgba(201,255,24,.055),
      transparent 70%
    ) !important;
}


.aura-play-page-shell
.aura-board-row.is-top-1
.aura-rank {
  color:
    var(--play-accent) !important;
}


.aura-play-page-shell
.aura-player > a,
.aura-play-page-shell
.aura-recent-row a {
  color:
    rgba(209,255,91,.82) !important;
}


.aura-play-page-shell
.aura-score strong,
.aura-play-page-shell
.aura-recent-row strong {
  color:
    rgba(239,245,233,.88) !important;
}


.aura-play-page-shell
.aura-board-empty {
  padding:
    42px 20px !important;

  color:
    rgba(229,236,221,.28) !important;
}


/* Identity */

.aura-play-page-shell
.aura-x-profile {
  padding:
    18px !important;
}


.aura-play-page-shell
.aura-x-profile strong {
  color:
    var(--play-cream) !important;
}


.aura-play-page-shell
.aura-x-profile p {
  color:
    rgba(226,235,218,.38) !important;
}


.aura-play-page-shell
.aura-x-profile input {
  height:
    44px !important;

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

  border-radius:
    6px 15px 6px 15px !important;

  background:
    rgba(1,5,2,.74) !important;

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


.aura-play-page-shell
.aura-x-profile input:focus {
  border-color:
    rgba(201,255,24,.32) !important;
}


.aura-play-page-shell
.aura-x-profile button {
  height:
    44px !important;

  padding:
    0 17px !important;

  border-radius:
    5px 14px 5px 14px !important;

  color:
    #071000 !important;

  background:
    linear-gradient(
      100deg,
      var(--play-accent-bright),
      var(--play-accent)
    ) !important;

  box-shadow:
    0 8px 22px
    rgba(174,225,28,.08);
}


/* ==========================================================
   Remove remaining old toxic green from the two cards
   ========================================================== */

.aura-play-page-shell
.wallet-gate-panel
:is(
  .is-live,
  [data-state="success"]
),
.aura-play-page-shell
.aura-competitive
:is(
  .is-live,
  [data-state="success"]
) {
  color:
    var(--play-accent) !important;
}


.aura-play-page-shell
.wallet-gate-panel
:is(
  button,
  a
):focus-visible,
.aura-play-page-shell
.aura-competitive
:is(
  button,
  a,
  input
):focus-visible {
  outline:
    1px solid
    rgba(216,255,72,.62) !important;

  outline-offset:
    3px;
}


/* ==========================================================
   Vertical rhythm / clipping safety
   ========================================================== */

.aura-play-page-shell
.game-page {
  height:
    auto !important;

  max-height:
    none !important;

  overflow:
    visible !important;

  padding-bottom:
    24px !important;
}


.aura-play-page-shell
.aura-competitive,
.aura-play-page-shell
.wallet-gate-panel {
  max-height:
    none !important;
}


.aura-play-page-shell
.aura-competitive > *,
.aura-play-page-shell
.wallet-gate-panel > * {
  max-height:
    none;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 850px) {

  .aura-play-page-shell
  .wallet-gate-panel {
    padding:
      30px 24px !important;

    border-radius:
      8px 26px 8px 26px !important;
  }


  .aura-play-page-shell
  .wallet-gate-panel h2 {
    font-size:
      clamp(44px,10vw,60px) !important;
  }


  .aura-play-page-shell
  .aura-competitive {
    padding:
      25px 20px !important;

    border-radius:
      8px 26px 8px 26px !important;
  }

}


@media (max-width: 620px) {

  .aura-play-page-shell
  .game-shell:has(.wallet-gate:not([hidden])) {
    padding-top:
      12px !important;

    padding-bottom:
      20px !important;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]) {
    padding:
      0 10px !important;
  }


  .aura-play-page-shell
  .wallet-gate-panel {
    padding:
      26px 18px !important;
  }


  .aura-play-page-shell
  .wallet-gate-status {
    grid-template-columns:
      1fr !important;
  }


  .aura-play-page-shell
  .wallet-gate-status > div {
    min-height:
      68px;
  }


  .aura-play-page-shell
  .aura-competitive {
    width:
      calc(100% - 20px) !important;

    margin-bottom:
      46px !important;

    padding:
      22px 14px !important;
  }


  .aura-play-page-shell
  .aura-competitive-head {
    align-items:
      flex-start !important;
  }

}


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

  .aura-play-page-shell
  .wallet-gate-panel *,
  .aura-play-page-shell
  .aura-competitive * {
    transition:
      none !important;
  }

}


/* ==========================================================
   AURA PLAY GATE FLOW FIX V3

   When holder access is visible, the arena becomes a normal
   document-flow section. The competitive board cannot rise
   underneath the access panel.

   Once the gate unlocks, legacy arena geometry can take over.
   ========================================================== */


/* ----------------------------------------------------------
   LOCKED PAGE MODE
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
) {
  display:
    block !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  overflow:
    visible !important;
}


/* ----------------------------------------------------------
   LOCKED GAME SHELL

   Do NOT let legacy flex sizing determine the height.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-shell {
  position:
    relative !important;

  display:
    block !important;

  flex:
    none !important;

  width:
    min(1160px, calc(100% - 36px))
    !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 auto !important;

  padding:
    34px 18px 38px !important;

  overflow:
    visible !important;

  contain:
    none !important;

  isolation:
    isolate;
}


/* ----------------------------------------------------------
   WALLET GATE INTO REAL FLOW

   This is the important part.
   Legacy wallet-gate was absolute.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.wallet-gate {
  position:
    static !important;

  inset:
    auto !important;

  top:
    auto !important;

  right:
    auto !important;

  bottom:
    auto !important;

  left:
    auto !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    visible !important;

  transform:
    none !important;

  opacity:
    1;

  visibility:
    visible;
}


/* ----------------------------------------------------------
   HOLDER PANEL
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.wallet-gate-panel {
  position:
    relative !important;

  display:
    block !important;

  width:
    min(760px, 100%) !important;

  height:
    auto !important;

  min-height:
    0 !important;

  max-height:
    none !important;

  margin:
    0 auto !important;

  transform:
    none !important;
}


/* ----------------------------------------------------------
   HIDE ARENA OBJECTS WHILE HOLDER GATE OWNS THE SECTION

   They remain in DOM and runtime remains untouched.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-canvas,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-impact-flash,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-vignette,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-scanlines,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-hud,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.boss-shell,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.milestone-signal,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.wave-signal,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.build-strip,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.world-stage-indicator,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.xp-shell,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.pulse-control,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-intro,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-over,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.victory-overlay,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.upgrade-overlay,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.mobile-stick,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.aura-live-signal {
  pointer-events:
    none !important;

  visibility:
    hidden !important;
}


/* ----------------------------------------------------------
   LEADERBOARD MUST START AFTER GATE
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.aura-competitive {
  position:
    relative !important;

  z-index:
    2 !important;

  clear:
    both !important;

  width:
    min(1280px, calc(100% - 36px))
    !important;

  margin:
    48px auto 78px !important;

  transform:
    none !important;
}


/* ----------------------------------------------------------
   Give the locked arena section a deliberate bottom boundary
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-shell::after {
  content:
    "";

  display:
    block;

  clear:
    both;

  width:
    100%;

  height:
    1px;

  margin-top:
    38px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(201,255,24,.08),
      transparent
    );
}


/* ----------------------------------------------------------
   DESKTOP RHYTHM
   ---------------------------------------------------------- */

@media (min-width: 851px) {

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell {
    padding-top:
      42px !important;

    padding-bottom:
      20px !important;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 850px) {

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell {
    width:
      calc(100% - 20px) !important;

    padding:
      22px 10px 14px !important;
  }


  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .aura-competitive {
    width:
      calc(100% - 20px) !important;

    margin-top:
      32px !important;
  }

}


/* ==========================================================
   AURA PLAY LEADERBOARD MICRO POLISH V4
   ========================================================== */


/* ----------------------------------------------------------
   Align all major play shells to exact shared-header width
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-play-context,

.aura-play-page-shell
.aura-competitive,

.aura-play-page-shell
.game-page:has(
  .wallet-gate:not([hidden]):not(.is-unlocked)
)
.game-shell {
  width:
    min(
      calc(100% - 32px),
      var(--max)
    ) !important;

  max-width:
    none !important;
}


/* Leaderboard keeps comfortable internal padding */

.aura-play-page-shell
.aura-competitive {
  padding:
    clamp(
      30px,
      3vw,
      42px
    ) !important;
}


/* ----------------------------------------------------------
   READY STATUS

   Text stays premium cream.
   Only the signal dot carries accent.
   ---------------------------------------------------------- */

.aura-play-page-shell
[data-aura-ranked-status] {
  position:
    relative;

  display:
    inline-flex !important;

  align-items:
    center !important;

  gap:
    9px !important;

  width:
    fit-content;

  overflow:
    visible !important;

  color:
    rgba(
      240,
      245,
      233,
      .88
    ) !important;

  text-shadow:
    none !important;

  white-space:
    nowrap;
}


.aura-play-page-shell
[data-aura-ranked-status]::before {
  content:
    "";

  display:
    block;

  width:
    6px !important;

  min-width:
    6px !important;

  max-width:
    6px !important;

  height:
    6px !important;

  min-height:
    6px !important;

  max-height:
    6px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    0 0 6px !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    var(--play-accent) !important;

  box-shadow:
    0 0 7px
    rgba(201,255,24,.46),
    0 0 15px
    rgba(201,255,24,.10) !important;

  transform:
    none !important;

  animation:
    auraV2StatusPulse
    2.4s ease-in-out infinite;
}


/*
Kill any legacy decorative status elements that can
sit behind / beside the READY text.
*/

.aura-play-page-shell
.aura-player-stats
article:has(
  [data-aura-ranked-status]
)
> i {
  display:
    none !important;
}


.aura-play-page-shell
.aura-player-stats
article:has(
  [data-aura-ranked-status]
)::before {
  content:
    none !important;
}


/* ----------------------------------------------------------
   Neutral state language
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-v2-ready-label {
  color:
    rgba(
      228,
      235,
      220,
      .46
    ) !important;

  text-shadow:
    none !important;
}


.aura-play-page-shell
.aura-v2-unranked {
  color:
    rgba(
      240,
      245,
      233,
      .78
    ) !important;

  text-shadow:
    none !important;
}


/*
Some UNRANKED values can be server/client rendered with
a state attribute. Keep loading/error semantics untouched.
*/

.aura-play-page-shell
.aura-competitive
strong:not(
  [data-state="success"]
):not(
  [data-state="error"]
).aura-v2-unranked {
  color:
    rgba(
      240,
      245,
      233,
      .78
    ) !important;
}


/* ----------------------------------------------------------
   PLAY RANKED

   Deliberately NOT a solid lime CTA.
   Premium dark execution button.
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-v2-ranked-cta {
  min-height:
    42px !important;

  padding:
    0 17px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px;

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

  border-radius:
    5px 15px 5px 15px !important;

  color:
    rgba(
      229,
      242,
      207,
      .88
    ) !important;

  background:
    linear-gradient(
      145deg,
      rgba(201,255,24,.055),
      rgba(3,9,3,.92)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 10px 24px
    rgba(0,0,0,.18) !important;

  text-shadow:
    none !important;

  font-weight:
    850 !important;

  letter-spacing:
    .02em;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease !important;
}


.aura-play-page-shell
.aura-v2-ranked-cta:hover {
  border-color:
    rgba(201,255,24,.42) !important;

  color:
    var(--play-accent-bright) !important;

  background:
    linear-gradient(
      145deg,
      rgba(201,255,24,.09),
      rgba(4,11,4,.96)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.03),
    0 12px 28px
    rgba(0,0,0,.22),
    0 0 24px
    rgba(201,255,24,.035) !important;

  transform:
    translateY(-1px);
}


/* ----------------------------------------------------------
   Player position / bottom status row
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-board
.aura-v2-unranked {
  font-weight:
    800 !important;

  letter-spacing:
    .015em;

  color:
    rgba(
      240,
      245,
      233,
      .76
    ) !important;
}


/* ----------------------------------------------------------
   Reduce remaining old green emphasis in board utilities
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-board
small,

.aura-play-page-shell
.aura-recent
small {
  color:
    rgba(
      226,
      235,
      218,
      .40
    ) !important;
}


/*
Section kicker remains an accent but softer than old
toxic-green implementation.
*/

.aura-play-page-shell
.aura-board
header small,

.aura-play-page-shell
.aura-recent
header small {
  color:
    rgba(
      201,
      255,
      24,
      .64
    ) !important;
}


/* ----------------------------------------------------------
   Animation
   ---------------------------------------------------------- */

@keyframes auraV2StatusPulse {

  0%,
  100% {
    opacity:
      .72;

    box-shadow:
      0 0 6px
      rgba(201,255,24,.38),
      0 0 12px
      rgba(201,255,24,.07);
  }

  50% {
    opacity:
      1;

    box-shadow:
      0 0 8px
      rgba(201,255,24,.58),
      0 0 18px
      rgba(201,255,24,.12);
  }

}


/* ----------------------------------------------------------
   Mobile width parity
   ---------------------------------------------------------- */

@media (max-width: 850px) {

  .aura-play-page-shell
  .aura-play-context,

  .aura-play-page-shell
  .aura-competitive,

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell {
    width:
      calc(100% - 20px) !important;
  }

}


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

  .aura-play-page-shell
  [data-aura-ranked-status]::before {
    animation:
      none !important;
  }

}


/* ==========================================================
   AURA PLAY RUN GEOMETRY FIX V5
   Restore definite arena dimensions after holder unlock.
   ========================================================== */


/* ----------------------------------------------------------
   UNLOCKED / INTRO / RUN STATE

   Canvas is absolute + height:100%, therefore game-shell
   must have a real height once the holder gate releases.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked,

.aura-play-page-shell
.game-shell.aura-play-run-active,

.aura-play-page-shell
.game-shell:has(
  .wallet-gate.is-unlocked
),

.aura-play-page-shell
.game-shell:has(
  .wallet-gate[hidden]
) {
  position:
    relative !important;

  display:
    block !important;

  flex:
    none !important;

  width:
    min(
      calc(100% - 32px),
      var(--max)
    ) !important;

  height:
    clamp(
      680px,
      calc(100svh - 170px),
      860px
    ) !important;

  min-height:
    680px !important;

  max-height:
    none !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  contain:
    layout paint;

  border:
    1px solid
    rgba(201,255,24,.15) !important;

  border-radius:
    10px 30px 10px 30px !important;
}


/* ----------------------------------------------------------
   RESTORE ACTUAL GAME LAYERS

   Earlier locked-state styling intentionally suppressed them.
   Once unlocked they must return immediately.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.game-canvas,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-canvas,

.aura-play-page-shell
.game-shell:has(.wallet-gate.is-unlocked)
.game-canvas,

.aura-play-page-shell
.game-shell:has(.wallet-gate[hidden])
.game-canvas {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  opacity:
    1 !important;

  visibility:
    visible !important;
}


/* Core HUD */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.game-hud,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud,

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.build-strip,

.aura-play-page-shell
.game-shell.aura-play-run-active
.build-strip,

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.world-stage-indicator,

.aura-play-page-shell
.game-shell.aura-play-run-active
.world-stage-indicator,

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.xp-shell,

.aura-play-page-shell
.game-shell.aura-play-run-active
.xp-shell,

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.pulse-control,

.aura-play-page-shell
.game-shell.aura-play-run-active
.pulse-control,

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.aura-live-signal,

.aura-play-page-shell
.game-shell.aura-play-run-active
.aura-live-signal {
  opacity:
    1 !important;

  visibility:
    visible !important;
}


/* ----------------------------------------------------------
   INTRO remains centered inside the restored arena
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.game-intro:not([hidden]) {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    grid;

  place-content:
    center;

  width:
    100%;

  height:
    100%;

  max-height:
    none !important;

  overflow:
    visible !important;
}


/* Hidden means hidden, regardless of old CSS */

.aura-play-page-shell
.game-intro[hidden] {
  display:
    none !important;
}


/* ----------------------------------------------------------
   Keep competitive card below actual arena height
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
+
.aura-competitive,

.aura-play-page-shell
.game-shell.aura-play-run-active
+
.aura-competitive {
  margin-top:
    48px !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 850px) {

  .aura-play-page-shell
  .game-shell.aura-play-arena-unlocked,

  .aura-play-page-shell
  .game-shell.aura-play-run-active,

  .aura-play-page-shell
  .game-shell:has(
    .wallet-gate.is-unlocked
  ),

  .aura-play-page-shell
  .game-shell:has(
    .wallet-gate[hidden]
  ) {
    width:
      calc(100% - 20px) !important;

    height:
      max(
        580px,
        calc(100svh - 110px)
      ) !important;

    min-height:
      580px !important;

    border-radius:
      8px 22px 8px 22px !important;
  }

}


/* ==========================================================
   AURA_PLAY_ENTRY_PREMIUM_V6

   Premium signal command surface.
   Restrained Aura V2 lime, deep black-green, soft bloom.
   ========================================================== */

.aura-play-page-shell
.game-intro.aura-entry-premium {
  --entry-accent:
    #b9e65d;

  --entry-accent-bright:
    #d2f58c;

  --entry-accent-soft:
    #dcefb4;

  --entry-cream:
    #eef3e8;

  --entry-muted:
    rgba(220, 230, 212, .52);

  --entry-line:
    rgba(185, 230, 93, .13);

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    40;

  display:
    grid !important;

  place-items:
    center;

  width:
    100% !important;

  height:
    100% !important;

  padding:
    clamp(34px, 5vw, 68px) !important;

  overflow:
    hidden !important;

  text-align:
    left !important;

  background:
    radial-gradient(
      circle at 76% 43%,
      rgba(185,230,93,.085),
      transparent 22%
    ),
    radial-gradient(
      circle at 18% 110%,
      rgba(91,130,56,.06),
      transparent 40%
    ),
    linear-gradient(
      145deg,
      rgba(3,8,4,.985),
      rgba(1,5,3,.995)
    ) !important;
}


.aura-play-page-shell
.game-intro.aura-entry-premium[hidden] {
  display:
    none !important;
}


/* fine technical grid */

.aura-entry-grid {
  position:
    absolute;

  inset:
    0;

  opacity:
    .23;

  background-image:
    linear-gradient(
      rgba(185,230,93,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(185,230,93,.035) 1px,
      transparent 1px
    );

  background-size:
    54px 54px;

  mask-image:
    radial-gradient(
      circle at 65% 46%,
      black,
      transparent 72%
    );

  pointer-events:
    none;
}


.aura-entry-scan {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(185,230,93,.025) 47%,
      rgba(185,230,93,.055) 50%,
      rgba(185,230,93,.025) 53%,
      transparent 100%
    );

  opacity:
    .5;
}


/* ----------------------------------------------------------
   MAIN COMPOSITION
   ---------------------------------------------------------- */

.aura-entry-inner {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.16fr)
    minmax(280px, .84fr);

  column-gap:
    clamp(44px, 6vw, 90px);

  row-gap:
    clamp(34px, 4vw, 52px);

  align-items:
    center;

  width:
    min(1080px, 100%);

  margin:
    auto;
}


.aura-entry-copy {
  position:
    relative;

  min-width:
    0;
}


/* vertical authority line */

.aura-entry-copy::before {
  content:
    "";

  position:
    absolute;

  top:
    2px;

  bottom:
    4px;

  left:
    -28px;

  width:
    1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(185,230,93,.34) 22%,
      rgba(185,230,93,.08) 72%,
      transparent
    );
}


/* ----------------------------------------------------------
   TOPLINE
   ---------------------------------------------------------- */

.aura-entry-topline {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    42px;

  padding-bottom:
    15px;

  border-bottom:
    1px solid
    rgba(185,230,93,.09);
}


.aura-entry-topline span {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(224,238,204,.68);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .13em;
}


.aura-entry-topline span i {
  display:
    block;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--entry-accent);

  box-shadow:
    0 0 10px
    rgba(185,230,93,.45);
}


.aura-entry-topline small {
  color:
    rgba(214,225,207,.32);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .16em;
}


/* ----------------------------------------------------------
   COPY
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-entry-premium
.aura-entry-kicker {
  margin:
    0 0 17px !important;

  color:
    rgba(185,230,93,.72) !important;

  font-size:
    10px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .14em !important;
}


.aura-play-page-shell
.aura-entry-premium
h1 {
  max-width:
    690px;

  margin:
    0 !important;

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

  font-size:
    clamp(58px, 6.3vw, 94px) !important;

  font-weight:
    760 !important;

  line-height:
    .87 !important;

  letter-spacing:
    -.055em !important;

  text-wrap:
    balance;
}


.aura-play-page-shell
.aura-entry-premium
h1 span {
  display:
    block;
}


.aura-play-page-shell
.aura-entry-premium
h1 em {
  display:
    block !important;

  margin-top:
    9px;

  color:
    var(--entry-accent-bright) !important;

  font-style:
    normal !important;

  font-weight:
    760 !important;

  text-shadow:
    0 0 28px
    rgba(185,230,93,.10) !important;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-lead {
  max-width:
    610px;

  margin:
    25px 0 0 !important;

  color:
    var(--entry-muted) !important;

  font-size:
    clamp(13px, 1.1vw, 16px) !important;

  font-weight:
    560;

  line-height:
    1.65 !important;
}


/* ----------------------------------------------------------
   CTA + LIVE START STATE
   ---------------------------------------------------------- */

.aura-entry-action {
  display:
    grid;

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

  gap:
    20px;

  align-items:
    center;

  margin-top:
    34px;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-button {
  position:
    relative;

  min-width:
    190px;

  min-height:
    52px;

  padding:
    0 25px !important;

  border:
    1px solid
    rgba(215,245,156,.42) !important;

  border-radius:
    7px 19px 7px 19px !important;

  color:
    #091006 !important;

  background:
    linear-gradient(
      135deg,
      #d0f18b,
      #addb58
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.32),
    0 14px 34px
    rgba(79,110,38,.18),
    0 0 34px
    rgba(185,230,93,.055) !important;

  font-size:
    13px !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.01em;

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    filter 170ms ease;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-button:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.035);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.35),
    0 18px 40px
    rgba(79,110,38,.23),
    0 0 44px
    rgba(185,230,93,.08) !important;
}


.aura-entry-status {
  display:
    grid;

  grid-template-columns:
    8px minmax(0, 1fr);

  gap:
    11px;

  align-items:
    center;

  min-width:
    0;

  padding:
    10px 0;
}


.aura-entry-status > i {
  display:
    block;

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--entry-accent);

  box-shadow:
    0 0 10px
    rgba(185,230,93,.42);
}


.aura-entry-status strong,
.aura-entry-status span {
  display:
    block;
}


.aura-entry-status strong {
  color:
    rgba(234,241,226,.76);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .12em;
}


.aura-entry-status span {
  margin-top:
    4px;

  color:
    rgba(215,225,207,.35);

  font-size:
    8px;

  line-height:
    1.4;
}


.aura-entry-status[data-state="loading"]
> i {
  animation:
    auraEntryPulse 1.1s ease-in-out infinite;
}


.aura-entry-status[data-state="warning"]
> i {
  background:
    #d5ce79;

  box-shadow:
    0 0 10px
    rgba(213,206,121,.35);
}


.aura-entry-status[data-state="error"]
> i {
  background:
    #d98282;

  box-shadow:
    0 0 10px
    rgba(217,130,130,.34);
}


.aura-entry-status[data-state="error"]
strong {
  color:
    #e5b1b1;
}


/* ----------------------------------------------------------
   SIGNAL CORE
   ---------------------------------------------------------- */

.aura-entry-core {
  position:
    relative;

  width:
    min(100%, 360px);

  aspect-ratio:
    1;

  justify-self:
    center;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(185,230,93,.08),
      rgba(185,230,93,.018) 36%,
      transparent 68%
    );
}


.aura-entry-core::before {
  content:
    "";

  position:
    absolute;

  inset:
    16%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(203,239,128,.12),
      rgba(126,169,66,.025) 48%,
      transparent 70%
    );

  filter:
    blur(5px);
}


.aura-core-ring,
.aura-core-orbit,
.aura-core-axis {
  position:
    absolute;

  pointer-events:
    none;
}


.aura-core-ring {
  inset:
    10%;

  border:
    1px solid
    rgba(185,230,93,.11);

  border-radius:
    50%;
}


.aura-core-ring-two {
  inset:
    22%;

  border-color:
    rgba(185,230,93,.18);
}


.aura-core-ring-three {
  inset:
    35%;

  border-color:
    rgba(211,241,146,.26);

  box-shadow:
    0 0 30px
    rgba(185,230,93,.035);
}


.aura-core-axis-x {
  top:
    50%;

  left:
    5%;

  width:
    90%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185,230,93,.09),
      transparent
    );
}


.aura-core-axis-y {
  top:
    5%;

  left:
    50%;

  width:
    1px;

  height:
    90%;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(185,230,93,.09),
      transparent
    );
}


.aura-core-center {
  position:
    absolute;

  inset:
    36%;

  display:
    grid;

  place-content:
    center;

  text-align:
    center;

  border:
    1px solid
    rgba(204,239,132,.24);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(185,230,93,.12),
      rgba(5,12,5,.9) 68%
    );

  box-shadow:
    inset 0 0 26px
    rgba(185,230,93,.04),
    0 0 35px
    rgba(185,230,93,.04);
}


.aura-core-center > span {
  width:
    8px;

  height:
    8px;

  margin:
    0 auto 10px;

  border-radius:
    50%;

  background:
    var(--entry-accent-bright);

  box-shadow:
    0 0 16px
    rgba(210,245,140,.48);
}


.aura-core-center small {
  color:
    rgba(219,231,207,.38);

  font-size:
    6px;

  font-weight:
    850;

  letter-spacing:
    .14em;
}


.aura-core-center strong {
  margin-top:
    3px;

  color:
    var(--entry-cream);

  font-size:
    18px;

  font-weight:
    820;

  letter-spacing:
    .05em;
}


.aura-core-center em {
  margin-top:
    3px;

  color:
    var(--entry-accent);

  font-size:
    6px;

  font-style:
    normal;

  font-weight:
    850;

  letter-spacing:
    .14em;
}


.aura-core-orbit {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--entry-accent);
}


.aura-core-orbit-one {
  top:
    14%;

  left:
    50%;

  box-shadow:
    0 0 12px
    rgba(185,230,93,.42);
}


.aura-core-orbit-two {
  right:
    14%;

  bottom:
    29%;

  width:
    4px;

  height:
    4px;

  opacity:
    .62;
}


/* ----------------------------------------------------------
   CONTROL MODULES
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls {
  grid-column:
    1 / -1;

  display:
    grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    10px !important;

  width:
    100% !important;

  margin:
    0 !important;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls > div {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    flex-end;

  min-height:
    92px;

  padding:
    16px 17px !important;

  overflow:
    hidden;

  border:
    1px solid
    rgba(185,230,93,.095) !important;

  border-radius:
    6px 16px 6px 16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(12,20,12,.7),
      rgba(3,8,4,.88)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.018);
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls > div::after {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    30%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(185,230,93,.38),
      transparent
    );
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls small {
  margin-bottom:
    auto;

  color:
    rgba(205,222,191,.28);

  font-size:
    6px;

  font-weight:
    850;

  letter-spacing:
    .11em;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls strong {
  color:
    var(--entry-accent-soft) !important;

  font-size:
    12px !important;

  font-weight:
    850 !important;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls span {
  margin-top:
    4px;

  color:
    rgba(219,228,212,.38) !important;

  font-size:
    8px !important;
}


/* ----------------------------------------------------------
   ANIMATION
   ---------------------------------------------------------- */

@keyframes auraEntryPulse {
  0%,
  100% {
    opacity:
      .5;

    transform:
      scale(.82);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.1);
  }
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .aura-play-page-shell
  .game-intro.aura-entry-premium {
    overflow-y:
      auto !important;

    padding:
      42px 24px !important;
  }


  .aura-entry-inner {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .aura-entry-core {
    width:
      min(290px, 72vw);

    grid-row:
      2;
  }


  .aura-entry-controls {
    grid-row:
      3;
  }


  .aura-entry-copy::before {
    display:
      none;
  }

}


@media (max-width: 640px) {

  .aura-play-page-shell
  .game-intro.aura-entry-premium {
    place-items:
      start center;

    padding:
      30px 18px 36px !important;
  }


  .aura-entry-topline {
    margin-bottom:
      28px;
  }


  .aura-play-page-shell
  .aura-entry-premium
  h1 {
    font-size:
      clamp(48px, 14vw, 66px)
      !important;
  }


  .aura-entry-action {
    grid-template-columns:
      1fr;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-button {
    width:
      100%;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-controls {
    grid-template-columns:
      1fr 1fr;
  }

}


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

  .aura-entry-status[data-state="loading"]
  > i {
    animation:
      none;
  }

}

/* ==========================================================
AURA PLAY FULLSCREEN HUD FINISH V1
========================================================== */

.aura-hud-premium {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.aura-hud-premium > .hud-card {
  position: relative;
  min-height: 104px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(168, 255, 54, 0.14);
  background:
    linear-gradient(180deg, rgba(7, 14, 8, 0.94), rgba(3, 8, 4, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(121, 255, 26, 0.08), transparent 55%);
  box-shadow:
    inset 0 1px 0 rgba(212, 255, 154, 0.05),
    0 16px 32px rgba(0, 0, 0, 0.32);
  overflow: visible;
}

.aura-hud-premium > .hud-health-card-premium {
  grid-column: span 3;
}

.aura-hud-premium > .hud-level-card-premium,
.aura-hud-premium > .hud-survival-card-premium,
.aura-hud-premium > .hud-power-card-premium,
.aura-hud-premium > .hud-wave-card-premium {
  grid-column: span 2;
}

.aura-hud-premium > .hud-score-card-premium {
  grid-column: span 3;
  min-width: 0;
  min-height: 112px;
  padding-top: 52px;
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hud-score-card-premium .aura-playing-now-pill {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  margin: 0 !important;
  max-width: calc(100% - 28px);
  z-index: 3;
  pointer-events: none;
}

.aura-playing-now-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168, 255, 54, 0.16);
  background: rgba(7, 14, 8, 0.92);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(211, 255, 153, 0.04);
  color: rgba(240, 246, 229, 0.92) !important;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aura-play-fullscreen-btn {
  appearance: none;
  border: 1px solid rgba(168, 255, 54, 0.16);
  background:
    linear-gradient(180deg, rgba(12, 22, 11, 0.94), rgba(5, 10, 5, 0.96));
  color: rgba(236, 243, 227, 0.92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(215, 255, 160, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.26);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.aura-play-fullscreen-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(190, 255, 72, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(215, 255, 160, 0.07),
    0 14px 28px rgba(0, 0, 0, 0.34);
}

.aura-play-fullscreen-btn.is-active {
  color: #061004;
  background:
    linear-gradient(180deg, rgba(193, 255, 48, 0.96), rgba(148, 255, 31, 0.96));
  border-color: rgba(206, 255, 112, 0.28);
}

.aura-play-fullscreen-icon {
  width: 14px;
  height: 14px;
  position: relative;
  display: inline-block;
}

.aura-play-fullscreen-icon::before,
.aura-play-fullscreen-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 3px;
  opacity: 0.92;
}

.game-shell:fullscreen,
.game-shell:-webkit-full-screen {
  background:
    radial-gradient(circle at 50% 24%, rgba(128, 255, 34, 0.05), transparent 36%),
    linear-gradient(180deg, #030703, #020402);
  padding: 18px;
  box-sizing: border-box;
}

.game-shell:fullscreen .game-canvas,
.game-shell:-webkit-full-screen .game-canvas {
  border-radius: 20px;
}

.aura-finish-premium {
  position: relative;
  max-width: min(860px, calc(100vw - 64px));
  margin: 0 auto;
  padding: 42px 42px 34px;
  border-radius: 28px;
  border: 1px solid rgba(168, 255, 54, 0.16);
  background:
    radial-gradient(circle at 50% 18%, rgba(164, 255, 58, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(8, 14, 8, 0.96), rgba(3, 8, 4, 0.98));
  box-shadow:
    0 36px 90px rgba(0, 0, 0, 0.56),
    inset 0 1px 0 rgba(216, 255, 160, 0.06);
  overflow: hidden;
}

.aura-finish-premium::before {
  content: "";
  position: absolute;
  inset: -20% auto auto 50%;
  width: 420px;
  height: 420px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(176, 255, 56, 0.18) 0%, rgba(176, 255, 56, 0.04) 42%, transparent 66%);
  pointer-events: none;
}

.aura-finish-premium h1,
.aura-finish-premium h2,
.aura-finish-premium strong {
  color: #f1f6ea;
}

.aura-finish-premium .accent,
.aura-finish-premium em,
.aura-finish-premium [data-accent] {
  color: #b9ff35;
}

.aura-finish-stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 22px;
  margin-bottom: 24px;
}

.aura-finish-stats > * {
  min-height: 88px;
  border-radius: 18px;
  border: 1px solid rgba(168, 255, 54, 0.14);
  background:
    linear-gradient(180deg, rgba(10, 18, 10, 0.96), rgba(5, 9, 5, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(216, 255, 160, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.22);
  padding: 14px 14px 12px;
}

.aura-finish-cta,
.aura-finish-premium button,
.aura-finish-premium a.button {
  appearance: none;
  border: 1px solid rgba(198, 255, 83, 0.24);
  background:
    linear-gradient(180deg, #d7ff3c, #a7ff12);
  color: #061004 !important;
  border-radius: 999px;
  padding: 14px 24px;
  font-weight: 800;
  box-shadow:
    0 12px 26px rgba(140, 255, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@media (max-width: 1240px) {
  .aura-hud-premium > .hud-health-card-premium,
  .aura-hud-premium > .hud-score-card-premium {
    grid-column: span 6;
  }

  .aura-hud-premium > .hud-level-card-premium,
  .aura-hud-premium > .hud-survival-card-premium,
  .aura-hud-premium > .hud-power-card-premium,
  .aura-hud-premium > .hud-wave-card-premium {
    grid-column: span 3;
  }
}

@media (max-width: 900px) {
  .aura-hud-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aura-hud-premium > .hud-card {
    grid-column: span 1 !important;
  }

  .aura-hud-premium > .hud-score-card-premium {
    grid-column: 1 / -1 !important;
  }

  .aura-finish-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ==========================================================
   AURA PLAY ENTRY OVERFLOW FIX V7

   Premium intro must fully contain the lower command modules.
   ========================================================== */


/* ----------------------------------------------------------
   Give the intro state its own deliberate arena height.

   Once the intro is hidden this selector stops matching and
   normal active-game geometry takes over again.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell:has(
  .game-intro.aura-entry-premium:not([hidden])
) {
  height:
    clamp(
      760px,
      calc(100svh - 118px),
      920px
    ) !important;

  min-height:
    760px !important;

  max-height:
    none !important;

  overflow:
    hidden !important;
}


/* ----------------------------------------------------------
   Never crop premium entry content
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-intro.aura-entry-premium:not([hidden]) {
  place-items:
    start center !important;

  overflow-x:
    hidden !important;

  overflow-y:
    auto !important;

  overscroll-behavior:
    contain;

  scrollbar-width:
    none;
}


.aura-play-page-shell
.game-intro.aura-entry-premium:not([hidden])
::-webkit-scrollbar {
  display:
    none;
}


/* ----------------------------------------------------------
   Full vertical composition
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-entry-premium
.aura-entry-inner {
  min-height:
    100%;

  align-content:
    center;

  padding:
    clamp(30px, 4vh, 48px)
    0
    clamp(46px, 6vh, 68px);

  margin:
    0 auto;

  row-gap:
    clamp(24px, 3.4vh, 38px);
}


/* ----------------------------------------------------------
   Control modules must remain completely inside the panel
   ---------------------------------------------------------- */

.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls {
  position:
    relative;

  z-index:
    4;

  align-self:
    end;

  margin-top:
    2px !important;

  margin-bottom:
    0 !important;
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls > div {
  min-height:
    86px;
}


/* ----------------------------------------------------------
   Short desktop viewport optimization

   Keep the entire composition usable without crushing it.
   ---------------------------------------------------------- */

@media
  (min-width: 901px)
  and (max-height: 860px) {

  .aura-play-page-shell
  .game-shell:has(
    .game-intro.aura-entry-premium:not([hidden])
  ) {
    height:
      720px !important;

    min-height:
      720px !important;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-inner {
    padding:
      26px 0 40px;

    row-gap:
      24px;
  }


  .aura-entry-topline {
    margin-bottom:
      28px;
  }


  .aura-play-page-shell
  .aura-entry-premium
  h1 {
    font-size:
      clamp(
        54px,
        5.6vw,
        80px
      ) !important;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-lead {
    margin-top:
      18px !important;
  }


  .aura-entry-action {
    margin-top:
      24px;
  }


  .aura-entry-core {
    width:
      min(
        100%,
        310px
      );
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-controls > div {
    min-height:
      78px;

    padding:
      13px 15px !important;
  }

}


/* ----------------------------------------------------------
   Tablet / mobile

   Natural scroll rather than clipping.
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .aura-play-page-shell
  .game-shell:has(
    .game-intro.aura-entry-premium:not([hidden])
  ) {
    height:
      max(
        760px,
        calc(100svh - 90px)
      ) !important;

    min-height:
      760px !important;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-inner {
    min-height:
      auto;

    align-content:
      start;

    padding-bottom:
      54px;
  }

}


/* ==========================================================
   AURA PLAY ACTIVE HUD REBUILD V2

   Stable layout based on actual game markup:
   - utility row
   - six stat cards
   - independent build strip
   - independent playing-now signal
   ========================================================== */


/* ----------------------------------------------------------
   ACTIVE ARENA UTILITY ROW
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-run-active
.aura-play-fullscreen-btn {
  position:
    absolute !important;

  z-index:
    32 !important;

  top:
    18px !important;

  left:
    22px !important;

  right:
    auto !important;

  width:
    auto !important;

  min-width:
    132px;

  height:
    38px;

  margin:
    0 !important;

  padding:
    0 15px !important;

  border:
    1px solid
    rgba(185,230,93,.17) !important;

  border-radius:
    7px 16px 7px 16px !important;

  background:
    linear-gradient(
      145deg,
      rgba(15,24,14,.94),
      rgba(4,9,5,.97)
    ) !important;

  color:
    rgba(230,239,219,.78) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.025),
    0 10px 24px
    rgba(0,0,0,.22) !important;

  font-size:
    9px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.aura-live-signal {
  position:
    absolute !important;

  z-index:
    32 !important;

  top:
    18px !important;

  right:
    22px !important;

  bottom:
    auto !important;

  left:
    auto !important;

  display:
    inline-flex !important;

  align-items:
    center;

  gap:
    8px;

  width:
    auto !important;

  min-width:
    136px;

  height:
    38px;

  margin:
    0 !important;

  padding:
    0 14px !important;

  border:
    1px solid
    rgba(185,230,93,.15) !important;

  border-radius:
    999px !important;

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

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

  transform:
    none !important;
}


/* ----------------------------------------------------------
   SIX-CARD HUD

   One deliberate row on full desktop.
   No giant score card.
   No overlapping online pill.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    72px !important;

  right:
    22px !important;

  bottom:
    auto !important;

  left:
    22px !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(190px, 1.28fr)
    repeat(
      4,
      minmax(135px, 1fr)
    )
    minmax(170px, 1.10fr)
    !important;

  gap:
    14px !important;

  width:
    auto !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  align-items:
    stretch !important;

  pointer-events:
    none;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card {
  position:
    relative !important;

  grid-column:
    auto !important;

  grid-row:
    auto !important;

  display:
    flex !important;

  flex-direction:
    column;

  justify-content:
    center;

  min-width:
    0 !important;

  width:
    auto !important;

  min-height:
    96px !important;

  height:
    96px !important;

  max-height:
    96px !important;

  margin:
    0 !important;

  padding:
    15px 17px !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(185,230,93,.12) !important;

  border-radius:
    7px 18px 7px 18px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(185,230,93,.055),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(10,17,10,.94),
      rgba(3,8,4,.97)
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.022),
    0 14px 30px
    rgba(0,0,0,.20)
    !important;

  transform:
    none !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    36%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(185,230,93,.36),
      transparent
    );
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > small {
  margin:
    0 0 7px !important;

  color:
    rgba(217,228,209,.38) !important;

  font-size:
    7px !important;

  font-weight:
    850 !important;

  line-height:
    1;

  letter-spacing:
    .10em;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > strong,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-value-row strong {
  color:
    #eef3e8 !important;

  font-size:
    clamp(
      20px,
      1.65vw,
      27px
    ) !important;

  font-weight:
    760 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.035em;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > span,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > em {
  margin-top:
    6px !important;

  color:
    #b9e65d !important;

  font-size:
    7px !important;

  font-style:
    normal !important;

  font-weight:
    850 !important;

  line-height:
    1.15;

  letter-spacing:
    .04em;
}


/* Core Integrity gets slightly more authority */

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-health {
  justify-content:
    flex-start;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-value-row {
  display:
    flex;

  align-items:
    baseline;

  gap:
    3px;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-progress {
  height:
    3px !important;

  margin-top:
    auto !important;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(209,232,191,.07) !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-progress i {
  background:
    linear-gradient(
      90deg,
      #a9d550,
      #c7ed7e
    ) !important;

  box-shadow:
    0 0 12px
    rgba(185,230,93,.16) !important;
}


/* Score is no longer a special giant card */

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-score {
  grid-column:
    auto !important;

  min-width:
    0 !important;

  min-height:
    96px !important;

  height:
    96px !important;

  padding:
    15px 17px !important;

  justify-content:
    center !important;
}


/* Kill every previous V1 premium layout side effect */

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud.aura-hud-premium
> .hud-card,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-score-card-premium,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-health-card-premium,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-level-card-premium,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-survival-card-premium,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-power-card-premium,

.aura-play-page-shell
.game-shell.aura-play-run-active
.hud-wave-card-premium {
  grid-column:
    auto !important;

  grid-row:
    auto !important;

  min-height:
    96px !important;

  height:
    96px !important;

  padding:
    15px 17px !important;
}


/* ----------------------------------------------------------
   CURRENT BUILD

   Separate second row.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-run-active
.build-strip {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    182px !important;

  left:
    22px !important;

  right:
    auto !important;

  bottom:
    auto !important;

  display:
    flex !important;

  align-items:
    stretch !important;

  gap:
    8px !important;

  width:
    auto !important;

  max-width:
    calc(100% - 44px);

  min-height:
    42px;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    none !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-strip-label,

.aura-play-page-shell
.game-shell.aura-play-run-active
.build-path {
  display:
    inline-flex !important;

  align-items:
    center;

  min-height:
    42px !important;

  margin:
    0 !important;

  border:
    1px solid
    rgba(185,230,93,.10) !important;

  border-radius:
    6px 14px 6px 14px !important;

  background:
    rgba(5,11,6,.88) !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-strip-label {
  padding:
    0 16px !important;

  color:
    rgba(217,228,209,.30) !important;

  font-size:
    6px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .09em;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-path {
  gap:
    14px;

  padding:
    0 14px !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-path small {
  color:
    rgba(217,228,209,.34) !important;

  font-size:
    6px !important;

  font-weight:
    800 !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-path strong {
  color:
    #c7ed7e !important;

  font-size:
    13px !important;

  font-weight:
    800 !important;
}


/* ----------------------------------------------------------
   FINISH SCREEN V2

   Direct stable selector, no heuristic layout dependency.
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-over:not([hidden]) {
  position:
    absolute !important;

  inset:
    clamp(32px, 5vw, 74px)
    !important;

  z-index:
    46 !important;

  display:
    flex !important;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    clamp(34px, 4.5vw, 58px)
    !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(185,230,93,.15)
    !important;

  border-radius:
    12px 34px 12px 34px
    !important;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(185,230,93,.075),
      transparent 32%
    ),
    radial-gradient(
      circle at 100% 100%,
      rgba(80,112,53,.055),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(5,11,6,.985),
      rgba(2,6,3,.995)
    ) !important;

  box-shadow:
    0 40px 100px
    rgba(0,0,0,.42),
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;

  text-align:
    center;
}


.aura-play-page-shell
.game-over:not([hidden])::before {
  content:
    "";

  position:
    absolute;

  top:
    -210px;

  left:
    50%;

  width:
    520px;

  height:
    520px;

  transform:
    translateX(-50%);

  border:
    1px solid
    rgba(185,230,93,.055);

  border-radius:
    50%;

  box-shadow:
    0 0 80px
    rgba(185,230,93,.025);

  pointer-events:
    none;
}


.aura-play-page-shell
.game-over:not([hidden])
> p:first-child {
  position:
    relative;

  z-index:
    2;

  margin:
    0 0 18px !important;

  color:
    rgba(185,230,93,.60) !important;

  font-size:
    9px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .16em !important;
}


.aura-play-page-shell
.game-over:not([hidden])
h2 {
  position:
    relative;

  z-index:
    2;

  max-width:
    790px;

  margin:
    0 !important;

  color:
    #eef3e8 !important;

  font-size:
    clamp(
      54px,
      6.4vw,
      92px
    ) !important;

  font-weight:
    750 !important;

  line-height:
    .89 !important;

  letter-spacing:
    -.055em !important;
}


.aura-play-page-shell
.game-over:not([hidden])
h2 em {
  display:
    block;

  margin-top:
    8px;

  color:
    #c7ed7e !important;

  font-style:
    normal !important;

  text-shadow:
    0 0 28px
    rgba(185,230,93,.08)
    !important;
}


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 {
  position:
    relative;

  z-index:
    2;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:
    12px !important;

  width:
    min(780px, 100%);

  margin:
    34px auto 0 !important;
}


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 > div {
  min-height:
    82px;

  padding:
    15px 12px !important;

  border:
    1px solid
    rgba(185,230,93,.105)
    !important;

  border-radius:
    7px 17px 7px 17px
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(10,17,10,.86),
      rgba(4,9,5,.92)
    ) !important;

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


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 small {
  color:
    rgba(217,228,209,.35)
    !important;

  font-size:
    7px !important;
}


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 strong {
  margin-top:
    7px;

  color:
    #eaf1e3 !important;

  font-size:
    20px !important;

  font-weight:
    760 !important;
}


.aura-play-page-shell
.game-over:not([hidden])
[data-restart] {
  position:
    relative;

  z-index:
    2;

  min-width:
    176px;

  min-height:
    50px;

  margin-top:
    28px !important;

  border:
    1px solid
    rgba(212,241,151,.30)
    !important;

  border-radius:
    7px 18px 7px 18px
    !important;

  color:
    #081006 !important;

  background:
    linear-gradient(
      135deg,
      #d2ef91,
      #afd961
    ) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.28),
    0 14px 32px
    rgba(75,105,42,.18)
    !important;
}


/* ----------------------------------------------------------
   RESPONSIVE ACTIVE HUD
   ---------------------------------------------------------- */

@media (max-width: 1220px) {

  .aura-play-page-shell
  .game-shell.aura-play-run-active
  .game-hud {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      )
      !important;
  }


  .aura-play-page-shell
  .game-shell.aura-play-run-active
  .build-strip {
    top:
      292px !important;
  }

}


@media (max-width: 720px) {

  .aura-play-page-shell
  .game-shell.aura-play-run-active
  .game-hud {
    top:
      66px !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      )
      !important;

    gap:
      8px !important;
  }


  .aura-play-page-shell
  .game-shell.aura-play-run-active
  .game-hud
  .hud-card {
    height:
      82px !important;

    min-height:
      82px !important;

    max-height:
      82px !important;

    padding:
      12px !important;
  }


  .aura-play-page-shell
  .game-shell.aura-play-run-active
  .build-strip {
    top:
      340px !important;

    right:
      16px !important;

    left:
      16px !important;

    overflow-x:
      auto;

    max-width:
      none;
  }


  .aura-play-page-shell
  .game-over:not([hidden])
  .result-grid-v2 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* ==========================================================
   AURA HUD / BOSS PROXIMITY V3
   ========================================================== */


/* Smooth visibility system */

.game-shell.aura-play-run-active .game-hud,
.game-shell.aura-play-run-active .build-strip,
.game-shell.aura-play-run-active .aura-live-signal,
.game-shell.aura-play-run-active .boss-shell {
  transition:
    opacity 210ms ease,
    filter 210ms ease,
    border-color 210ms ease,
    background-color 210ms ease;
}


/* ----------------------------------------------------------
   BOSS BAR
   Own row. Never behind HUD cards.
   ---------------------------------------------------------- */

.game-shell.aura-play-run-active
.boss-shell:not([hidden]) {
  position: absolute !important;

  z-index: 35 !important;

  top: 182px !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;

  width: min(
    680px,
    calc(100% - 44px)
  ) !important;

  min-height: 60px;

  margin: 0 !important;
  padding: 12px 16px 13px !important;

  transform:
    translateX(-50%) !important;

  border:
    1px solid
    rgba(221, 89, 82, .18)
    !important;

  border-radius:
    8px 20px 8px 20px
    !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(190, 61, 57, .075),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(12, 15, 11, .96),
      rgba(4, 8, 5, .98)
    )
    !important;

  box-shadow:
    0 16px 36px
    rgba(0,0,0,.30),
    inset 0 1px 0
    rgba(255,255,255,.025)
    !important;

  opacity: 1 !important;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-copy {
  display: flex !important;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 9px;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-copy span {
  color:
    rgba(222, 104, 96, .72)
    !important;

  font-size: 7px !important;
  font-weight: 850 !important;

  letter-spacing: .12em;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-copy small {
  color:
    rgba(227, 233, 219, .38)
    !important;

  font-size: 7px !important;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-copy > strong {
  color:
    #eef3e8 !important;

  font-size:
    clamp(11px, 1vw, 14px)
    !important;

  font-weight: 820 !important;

  letter-spacing: .06em;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-track {
  height: 4px !important;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(220, 232, 210, .055)
    !important;
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-track i {
  background:
    linear-gradient(
      90deg,
      #a83d38,
      #dc6259
    )
    !important;

  box-shadow:
    0 0 14px
    rgba(218, 80, 72, .22)
    !important;
}


/* Build row moves down only while boss exists */

.game-shell.aura-play-run-active:has(.boss-shell:not([hidden]))
.build-strip {
  top: 258px !important;
}


/* ----------------------------------------------------------
   PLAYER PROXIMITY MODE

   Player enters upper 32% of arena.
   HUD becomes glass instead of blocking gameplay.
   ---------------------------------------------------------- */

.game-shell.aura-play-run-active.aura-player-near-hud
.game-hud {
  opacity: .27 !important;

  filter:
    saturate(.65)
    brightness(.76)
    !important;
}


.game-shell.aura-play-run-active.aura-player-near-hud
.game-hud
.hud-card {
  background:
    rgba(4, 9, 5, .28)
    !important;

  border-color:
    rgba(185,230,93,.065)
    !important;

  box-shadow:
    none !important;
}


.game-shell.aura-play-run-active.aura-player-near-hud
.build-strip {
  opacity: .22 !important;

  filter:
    saturate(.6)
    brightness(.72)
    !important;
}


.game-shell.aura-play-run-active.aura-player-near-hud
.aura-live-signal {
  opacity: .34 !important;

  filter:
    brightness(.78)
    !important;
}


/*
 * Boss information is critical.
 * It fades, but remains significantly clearer
 * than normal HUD cards.
 */

.game-shell.aura-play-run-active.aura-player-near-hud
.boss-shell:not([hidden]) {
  opacity: .68 !important;

  filter:
    saturate(.82)
    brightness(.90)
    !important;
}


/* ----------------------------------------------------------
   MID-SIZE ARENA
   HUD becomes 2 rows, so boss starts lower.
   ---------------------------------------------------------- */

@media (max-width: 1220px) {

  .game-shell.aura-play-run-active
  .boss-shell:not([hidden]) {
    top: 292px !important;
  }


  .game-shell.aura-play-run-active:has(.boss-shell:not([hidden]))
  .build-strip {
    top: 368px !important;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 720px) {

  .game-shell.aura-play-run-active
  .boss-shell:not([hidden]) {
    top: 340px !important;

    left: 16px !important;
    right: 16px !important;

    width: auto !important;

    transform:
      none !important;
  }


  .game-shell.aura-play-run-active:has(.boss-shell:not([hidden]))
  .build-strip {
    top: 414px !important;
  }

}


/* ==========================================================
   AURA_VISUAL_PREMIUM_PASS_V1_1

   Comic / inked / premium Aura world layer.
   Visual-only. No gameplay geometry or mechanics.
   ========================================================== */


/* ----------------------------------------------------------
   CANONICAL VISUAL TOKENS
   ---------------------------------------------------------- */

.aura-play-page-shell {
  --aura-ink:
    #020402;

  --aura-ink-soft:
    #071007;

  --aura-acid:
    #baff16;

  --aura-acid-hot:
    #d8ff69;

  --aura-acid-soft:
    #bfe86d;

  --aura-bone:
    #edf4e5;

  --aura-line:
    rgba(186,255,22,.16);

  --aura-danger:
    #e05750;
}


/* ----------------------------------------------------------
   PAGE WORLD

   Less generic grid.
   More comic / signal / ascension atmosphere.
   ---------------------------------------------------------- */

.aura-play-page-shell {
  background:
    radial-gradient(
      ellipse at 50% -12%,
      rgba(179,255,34,.105),
      transparent 35%
    ),
    radial-gradient(
      circle at 8% 46%,
      rgba(88,142,46,.055),
      transparent 32%
    ),
    radial-gradient(
      circle at 94% 66%,
      rgba(164,255,38,.045),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #030703,
      #010301 54%,
      #020502
    ) !important;
}


.aura-play-page-shell::before {
  opacity:
    .20;

  background-image:
    linear-gradient(
      rgba(190,255,44,.024) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(190,255,44,.024) 1px,
      transparent 1px
    );

  background-size:
    72px 72px;
}


/* ----------------------------------------------------------
   GAME SHELL — COMIC FRAME
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell {
  border-color:
    rgba(186,255,22,.16) !important;

  background:
    #020502 !important;

  box-shadow:
    0 34px 100px
    rgba(0,0,0,.52),
    0 0 0 1px
    rgba(186,255,22,.025),
    inset 0 1px 0
    rgba(255,255,255,.025) !important;
}


/* static signal-art layer above canvas, below HUD */

.aura-arena-art-layer {
  position:
    absolute;

  z-index:
    3;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  opacity:
    .48;

  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 24%,
      rgba(188,255,36,.026) 24.2%,
      transparent 24.7% 42%,
      rgba(188,255,36,.018) 42.2%,
      transparent 42.7%
    ),
    linear-gradient(
      115deg,
      transparent 0 43%,
      rgba(182,255,31,.018) 43.2%,
      transparent 43.45% 100%
    );
}


.aura-arena-art-layer::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  opacity:
    .30;

  background-image:
    repeating-linear-gradient(
      118deg,
      transparent 0 92px,
      rgba(183,255,29,.032) 93px,
      transparent 94px 181px
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 50%,
      black,
      transparent 74%
    );
}


.aura-arena-art-layer::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    54%;

  width:
    min(70vw, 820px);

  aspect-ratio:
    1;

  transform:
    translate(-50%,-50%)
    rotate(-7deg);

  border:
    1px solid
    rgba(193,255,46,.035);

  border-radius:
    50%;

  box-shadow:
    0 0 90px
    rgba(160,255,30,.022),
    inset 0 0 90px
    rgba(160,255,30,.018);
}


.aura-arena-orbit,
.aura-arena-sigil {
  position:
    absolute;

  border-radius:
    50%;
}


.aura-arena-orbit-one {
  left:
    -11%;

  bottom:
    -26%;

  width:
    48%;

  aspect-ratio:
    1;

  border:
    1px solid
    rgba(190,255,37,.075);
}


.aura-arena-orbit-two {
  right:
    -8%;

  top:
    28%;

  width:
    31%;

  aspect-ratio:
    1;

  border:
    1px dashed
    rgba(190,255,37,.052);
}


.aura-arena-sigil {
  left:
    50%;

  top:
    52%;

  width:
    min(34vw, 420px);

  aspect-ratio:
    1;

  transform:
    translate(-50%,-50%);

  border:
    1px solid
    rgba(190,255,37,.026);

  box-shadow:
    inset 0 0 0 34px
    rgba(190,255,37,.008),
    inset 0 0 0 35px
    rgba(190,255,37,.018);
}


/* ----------------------------------------------------------
   CONTEXT RAIL
   ---------------------------------------------------------- */

.aura-play-context {
  border:
    1px solid
    rgba(186,255,22,.13);

  border-radius:
    0 18px 0 18px;

  background:
    linear-gradient(
      105deg,
      rgba(7,14,7,.94),
      rgba(2,6,3,.82)
    );

  clip-path:
    polygon(
      0 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% 100%,
      18px 100%,
      0 calc(100% - 18px)
    );
}


/* ----------------------------------------------------------
   PREMIUM ENTRY — GUARDIAN POSTER COMPOSITION
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-intro.aura-entry-premium {
  --entry-accent:
    var(--aura-acid);

  --entry-accent-bright:
    var(--aura-acid-hot);

  --entry-accent-soft:
    #d8f89c;

  --entry-cream:
    var(--aura-bone);

  background:
    radial-gradient(
      ellipse at 78% 46%,
      rgba(183,255,25,.14),
      transparent 26%
    ),
    radial-gradient(
      ellipse at 74% 84%,
      rgba(82,131,44,.09),
      transparent 32%
    ),
    linear-gradient(
      108deg,
      rgba(2,5,2,.995) 0 51%,
      rgba(4,10,4,.98) 70%,
      rgba(1,4,2,.995)
    ) !important;
}


.aura-entry-inner {
  grid-template-columns:
    minmax(0, 1.02fr)
    minmax(360px, .98fr);

  column-gap:
    clamp(30px, 4vw, 62px);

  width:
    min(1120px, 100%);
}


.aura-entry-copy {
  z-index:
    5;
}


.aura-entry-copy::before {
  left:
    -21px;

  width:
    2px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(186,255,22,.72) 18%,
      rgba(186,255,22,.12) 75%,
      transparent
    );
}


.aura-play-page-shell
.aura-entry-premium
h1 {
  max-width:
    650px;

  color:
    var(--aura-bone) !important;

  font-size:
    clamp(61px, 6.15vw, 96px)
    !important;

  font-weight:
    780 !important;

  line-height:
    .84 !important;
}


.aura-play-page-shell
.aura-entry-premium
h1 em {
  color:
    var(--aura-acid-hot) !important;

  text-shadow:
    0 0 32px
    rgba(186,255,22,.16)
    !important;
}


/*
 * The previous geometric core becomes the Guardian stage.
 * Existing orbit geometry is preserved around the artwork.
 */

.aura-entry-core {
  width:
    min(100%, 440px);

  aspect-ratio:
    .82;

  overflow:
    visible;

  isolation:
    isolate;

  border-radius:
    0;

  background:
    radial-gradient(
      ellipse at 50% 56%,
      rgba(183,255,24,.19),
      rgba(116,179,52,.045) 35%,
      transparent 67%
    );
}


.aura-entry-core::before {
  inset:
    14% 2% 2%;

  z-index:
    -2;

  border:
    1px solid
    rgba(187,255,29,.08);

  background:
    radial-gradient(
      ellipse,
      rgba(184,255,22,.12),
      transparent 62%
    );

  filter:
    blur(8px);

  clip-path:
    polygon(
      50% 0,
      100% 25%,
      88% 82%,
      50% 100%,
      12% 82%,
      0 25%
    );
}


.aura-entry-core::after {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  left:
    50%;

  bottom:
    3%;

  width:
    82%;

  height:
    18%;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(181,255,25,.20),
      rgba(181,255,25,.055) 42%,
      transparent 70%
    );

  filter:
    blur(6px);
}


.aura-entry-core
.aura-core-center {
  display:
    none;
}


.aura-entry-core
.aura-core-ring {
  z-index:
    0;

  border-color:
    rgba(186,255,22,.105);
}


.aura-entry-core
.aura-core-ring-one {
  inset:
    14% 1% 4%;
}


.aura-entry-core
.aura-core-ring-two {
  inset:
    23% 10% 13%;
}


.aura-entry-core
.aura-core-ring-three {
  inset:
    34% 21% 24%;

  border-color:
    rgba(202,255,75,.20);
}


.aura-entry-guardian {
  position:
    absolute;

  z-index:
    3;

  left:
    50%;

  bottom:
    -1%;

  width:
    112%;

  max-width:
    none;

  height:
    108%;

  transform:
    translateX(-50%);

  object-fit:
    contain;

  object-position:
    center bottom;

  user-select:
    none;

  pointer-events:
    none;

  filter:
    drop-shadow(
      0 24px 34px
      rgba(0,0,0,.72)
    )
    drop-shadow(
      0 0 22px
      rgba(166,255,21,.08)
    );
}


.aura-entry-guardian-mark {
  position:
    absolute;

  z-index:
    5;

  right:
    -3px;

  bottom:
    8%;

  display:
    grid;

  gap:
    2px;

  min-width:
    104px;

  padding:
    10px 13px;

  border-left:
    2px solid
    var(--aura-acid);

  background:
    linear-gradient(
      90deg,
      rgba(5,12,5,.92),
      rgba(2,6,3,.70)
    );

  box-shadow:
    0 14px 34px
    rgba(0,0,0,.36);

  clip-path:
    polygon(
      0 0,
      calc(100% - 12px) 0,
      100% 12px,
      100% 100%,
      0 100%
    );
}


.aura-entry-guardian-mark small {
  color:
    rgba(222,240,204,.46);

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.aura-entry-guardian-mark strong {
  color:
    var(--aura-acid-hot);

  font-size:
    16px;

  font-weight:
    900;

  letter-spacing:
    .03em;
}


/* Control modules become comic command plates */

.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls > div {
  border-radius:
    0 !important;

  border-color:
    rgba(186,255,22,.12)
    !important;

  background:
    linear-gradient(
      138deg,
      rgba(10,18,10,.88),
      rgba(2,7,3,.96)
    ) !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      12px 100%,
      0 calc(100% - 12px)
    );
}


.aura-play-page-shell
.aura-entry-premium
.aura-entry-controls > div::after {
  width:
    52%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--aura-acid),
      transparent
    );
}


/* ----------------------------------------------------------
   ACTIVE HUD — DARK COMIC COMMAND SURFACE
   ---------------------------------------------------------- */

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card {
  border-radius:
    0 !important;

  border-color:
    rgba(186,255,22,.13)
    !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(186,255,22,.065),
      transparent 44%
    ),
    linear-gradient(
      138deg,
      rgba(7,14,7,.955),
      rgba(2,6,3,.975)
    ) !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 14px) 0,
      100% 14px,
      100% 100%,
      12px 100%,
      0 calc(100% - 12px)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.022),
    0 16px 30px
    rgba(0,0,0,.30)
    !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card::before {
  width:
    54%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      var(--aura-acid),
      rgba(186,255,22,.16),
      transparent
    );
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > small {
  color:
    rgba(227,238,218,.39)
    !important;

  letter-spacing:
    .13em;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > strong,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-value-row strong {
  color:
    var(--aura-bone) !important;

  text-shadow:
    0 0 18px
    rgba(186,255,22,.025);
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > span,

.aura-play-page-shell
.game-shell.aura-play-run-active
.game-hud
.hud-card > em {
  color:
    var(--aura-acid-soft)
    !important;
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.build-strip-label,

.aura-play-page-shell
.game-shell.aura-play-run-active
.build-path {
  border-radius:
    0 !important;

  border-color:
    rgba(186,255,22,.105)
    !important;

  background:
    rgba(3,8,4,.92)
    !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 9px) 0,
      100% 9px,
      100% 100%,
      7px 100%,
      0 calc(100% - 7px)
    );
}


.aura-play-page-shell
.game-shell.aura-play-run-active
.aura-live-signal,

.aura-play-page-shell
.game-shell.aura-play-run-active
.aura-play-fullscreen-btn {
  border-radius:
    0 !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      8px 100%,
      0 calc(100% - 8px)
    );
}


/* ----------------------------------------------------------
   BOSS — CORRUPTED COMIC SIGNAL
   ---------------------------------------------------------- */

.game-shell.aura-play-run-active
.boss-shell:not([hidden]) {
  border-radius:
    0 !important;

  border-color:
    rgba(224,87,80,.28)
    !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(224,87,80,.12),
      transparent 60%
    ),
    linear-gradient(
      110deg,
      rgba(14,10,9,.975),
      rgba(3,7,4,.985)
    ) !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 18px) 0,
      100% 18px,
      100% 100%,
      14px 100%,
      0 calc(100% - 14px)
    );
}


.game-shell.aura-play-run-active
.boss-shell:not([hidden])
.boss-copy > strong {
  text-shadow:
    0 0 18px
    rgba(224,87,80,.10);
}


/* ----------------------------------------------------------
   DEFEAT / VICTORY — GUARDIAN POSTER LAYER
   ---------------------------------------------------------- */

.aura-finish-guardian {
  position:
    absolute;

  z-index:
    1;

  right:
    clamp(-48px, -2.2vw, -20px);

  bottom:
    -10%;

  width:
    min(40vw, 470px);

  max-height:
    104%;

  object-fit:
    contain;

  object-position:
    right bottom;

  pointer-events:
    none;

  user-select:
    none;

  mask-image:
    linear-gradient(
      180deg,
      black 0 74%,
      transparent 100%
    );

  filter:
    drop-shadow(
      0 24px 46px
      rgba(0,0,0,.76)
    );
}


.aura-finish-guardian-defeat {
  opacity:
    .23;

  filter:
    saturate(.62)
    brightness(.64)
    drop-shadow(
      0 24px 46px
      rgba(0,0,0,.80)
    );
}


.aura-finish-guardian-victory {
  opacity:
    .55;

  filter:
    saturate(1.04)
    brightness(.90)
    drop-shadow(
      0 0 36px
      rgba(174,255,26,.10)
    )
    drop-shadow(
      0 24px 48px
      rgba(0,0,0,.72)
    );
}


.aura-play-page-shell
.game-over:not([hidden]) {
  align-items:
    flex-start;

  padding-right:
    clamp(300px, 34vw, 470px)
    !important;

  text-align:
    left;

  border-radius:
    0 !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 34px) 0,
      100% 34px,
      100% 100%,
      28px 100%,
      0 calc(100% - 28px)
    );
}


.aura-play-page-shell
.game-over:not([hidden])::before {
  left:
    24%;

  transform:
    translateX(-50%);
}


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 {
  width:
    100%;

  margin-left:
    0 !important;

  margin-right:
    0 !important;
}


.aura-play-page-shell
.game-over:not([hidden])
.result-grid-v2 > div {
  border-radius:
    0 !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      8px 100%,
      0 calc(100% - 8px)
    );
}


/* Victory receives the same art direction without changing
   existing victory layout mechanics. */

.aura-play-page-shell
.victory-overlay:not([hidden]) {
  overflow:
    hidden;

  isolation:
    isolate;

  background:
    radial-gradient(
      ellipse at 76% 48%,
      rgba(184,255,24,.15),
      transparent 28%
    ),
    linear-gradient(
      112deg,
      rgba(3,8,3,.99),
      rgba(1,4,2,.99)
    ) !important;
}


.aura-play-page-shell
.victory-overlay:not([hidden])
> *:not(.aura-finish-guardian) {
  position:
    relative;

  z-index:
    2;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 900px) {

  .aura-entry-inner {
    grid-template-columns:
      1fr;
  }


  .aura-entry-core {
    width:
      min(430px, 86vw);

    aspect-ratio:
      .86;
  }


  .aura-entry-guardian {
    width:
      106%;

    height:
      105%;
  }


  .aura-entry-guardian-mark {
    right:
      4%;
  }


  .aura-finish-guardian {
    right:
      -70px;

    width:
      min(48vw, 380px);

    opacity:
      .16;
  }


  .aura-play-page-shell
  .game-over:not([hidden]) {
    align-items:
      center;

    padding-right:
      clamp(34px, 4.5vw, 58px)
      !important;

    text-align:
      center;
  }

}


@media (max-width: 640px) {

  .aura-entry-core {
    width:
      min(350px, 90vw);
  }


  .aura-entry-guardian-mark {
    right:
      2%;

    bottom:
      5%;
  }


  .aura-finish-guardian {
    right:
      -90px;

    bottom:
      -5%;

    width:
      290px;

    opacity:
      .10;
  }


  .aura-arena-art-layer {
    opacity:
      .32;
  }

}


/* AURA_VISUAL_PREMIUM_PASS_V1_1 */


/* ==========================================================
   AURA_PLAYFIELD_SAFE_ZONE_V1
   HUD owns a dedicated cockpit zone.
   No per-frame DOM proximity logic.
   ========================================================== */

.game-shell.aura-play-run-active {
  --aura-playfield-top: 250px;
}


/*
 * Actual canvas starts below the HUD.
 * Player/enemies therefore cannot disappear behind cards.
 */

.game-shell.aura-play-run-active
.game-canvas {
  top:
    var(--aura-playfield-top)
    !important;

  bottom:
    0 !important;

  width:
    100% !important;

  height:
    calc(
      100% -
      var(--aura-playfield-top)
    )
    !important;
}


.game-shell.aura-play-run-active
.aura-arena-art-layer {
  top:
    var(--aura-playfield-top);

  bottom:
    0;

  height:
    auto;
}


/*
 * During boss encounters CURRENT BUILD is secondary.
 * Remove it instead of stacking another HUD row over play.
 */

.game-shell.aura-play-run-active:has(.boss-shell:not([hidden]))
.build-strip {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* ----------------------------------------------------------
   PAUSE BUTTON
   ---------------------------------------------------------- */

.aura-pause-btn {
  display:
    none;
}


.game-shell.aura-play-run-active
.aura-pause-btn {
  position:
    absolute;

  z-index:
    36;

  top:
    18px;

  left:
    172px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    92px;

  height:
    38px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(186,255,22,.18);

  color:
    rgba(235,244,226,.78);

  background:
    linear-gradient(
      135deg,
      rgba(11,20,10,.96),
      rgba(3,8,4,.98)
    );

  clip-path:
    polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      8px 100%,
      0 calc(100% - 8px)
    );

  font:
    inherit;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .11em;

  cursor:
    pointer;
}


.game-shell.aura-play-run-active
.aura-pause-btn:hover {
  color:
    #d8ff69;

  border-color:
    rgba(186,255,22,.38);

  box-shadow:
    0 0 24px
    rgba(186,255,22,.06);
}


.game-shell.is-paused
.aura-pause-btn {
  color:
    #d8ff69;

  border-color:
    rgba(186,255,22,.42);
}


/* ----------------------------------------------------------
   PAUSE OVERLAY
   ---------------------------------------------------------- */

.aura-pause-overlay[hidden] {
  display:
    none !important;
}


.aura-pause-overlay {
  position:
    absolute;

  z-index:
    45;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  padding:
    28px;

  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(186,255,22,.09),
      transparent 32%
    ),
    rgba(1,4,2,.88);

  backdrop-filter:
    blur(9px);
}


.aura-pause-panel {
  position:
    relative;

  width:
    min(560px, 100%);

  padding:
    42px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(186,255,22,.18);

  background:
    linear-gradient(
      138deg,
      rgba(9,17,8,.98),
      rgba(2,6,3,.99)
    );

  clip-path:
    polygon(
      0 0,
      calc(100% - 26px) 0,
      100% 26px,
      100% 100%,
      22px 100%,
      0 calc(100% - 22px)
    );

  text-align:
    center;
}


.aura-pause-panel::before {
  content:
    "";

  position:
    absolute;

  inset:
    -40% 18%;

  border:
    1px solid
    rgba(186,255,22,.08);

  border-radius:
    50%;

  pointer-events:
    none;
}


.aura-pause-panel > * {
  position:
    relative;

  z-index:
    2;
}


.aura-pause-panel > p {
  margin:
    0 0 16px;

  color:
    #baff16;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .16em;
}


.aura-pause-panel h2 {
  margin:
    0;

  color:
    #edf4e5;

  font-size:
    clamp(48px, 6vw, 76px);

  line-height:
    .88;

  letter-spacing:
    -.05em;
}


.aura-pause-panel h2 em {
  display:
    block;

  color:
    #d8ff69;

  font-style:
    normal;
}


.aura-pause-panel > span {
  display:
    block;

  margin:
    22px 0 28px;

  color:
    rgba(230,239,220,.48);

  font-size:
    12px;
}


.aura-pause-panel
[data-pause-resume] {
  min-width:
    190px;
}


.aura-pause-panel > small {
  display:
    block;

  margin-top:
    14px;

  color:
    rgba(220,234,209,.30);

  font-size:
    7px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


/* ----------------------------------------------------------
   LEVEL-UP PREMIUM PASS
   ---------------------------------------------------------- */

.upgrade-overlay:not([hidden]) {
  background:
    radial-gradient(
      ellipse at 78% 45%,
      rgba(186,255,22,.12),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 15% 100%,
      rgba(112,180,45,.06),
      transparent 36%
    ),
    rgba(1,4,2,.96)
    !important;

  backdrop-filter:
    blur(10px);
}


.upgrade-panel {
  position:
    relative;

  isolation:
    isolate;

  overflow:
    hidden;

  width:
    min(1240px, calc(100% - 52px))
    !important;
}


.upgrade-panel::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  top:
    -8%;

  right:
    -4%;

  width:
    min(42vw, 520px);

  height:
    116%;

  opacity:
    .13;

  pointer-events:
    none;

  background:
    url("/images/brand-v2/aura-guardian-stride-premium.png")
    center bottom / contain
    no-repeat;

  filter:
    saturate(.8)
    brightness(.72);

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 32% 76%,
      transparent
    );
}


.upgrade-panel::after {
  content:
    "";

  position:
    absolute;

  z-index:
    -2;

  right:
    4%;

  top:
    8%;

  width:
    440px;

  max-width:
    42vw;

  aspect-ratio:
    1;

  border:
    1px solid
    rgba(186,255,22,.08);

  border-radius:
    50%;

  box-shadow:
    inset 0 0 0 36px
    rgba(186,255,22,.008);

  pointer-events:
    none;
}


.upgrade-panel > p {
  color:
    #baff16 !important;

  letter-spacing:
    .16em !important;
}


.upgrade-panel > h2 {
  max-width:
    650px;

  color:
    #edf4e5 !important;

  font-size:
    clamp(58px, 7vw, 96px)
    !important;

  line-height:
    .84 !important;

  letter-spacing:
    -.055em !important;
}


.upgrade-panel > h2 em {
  color:
    #baff16 !important;

  text-shadow:
    0 0 32px
    rgba(186,255,22,.12);
}


.upgrade-grid {
  position:
    relative;

  z-index:
    2;

  gap:
    16px !important;

  margin-top:
    38px !important;
}


.upgrade-card {
  position:
    relative;

  min-height:
    270px;

  overflow:
    hidden;

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

  border-radius:
    0 !important;

  color:
    #edf4e5;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(186,255,22,.075),
      transparent 42%
    ),
    linear-gradient(
      138deg,
      rgba(8,15,7,.96),
      rgba(2,6,3,.985)
    )
    !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 22px) 0,
      100% 22px,
      100% 100%,
      18px 100%,
      0 calc(100% - 18px)
    );

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}


.upgrade-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    58%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      #baff16,
      transparent
    );
}


.upgrade-card:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(186,255,22,.38)
    !important;

  box-shadow:
    0 24px 54px
    rgba(0,0,0,.35),
    0 0 34px
    rgba(186,255,22,.045);
}


.upgrade-card strong {
  color:
    #edf4e5 !important;
}


.upgrade-card p {
  color:
    rgba(225,235,216,.50)
    !important;

  line-height:
    1.55 !important;
}


/* ----------------------------------------------------------
   RESPONSIVE PLAYFIELD
   ---------------------------------------------------------- */

@media (max-width: 1220px) {

  .game-shell.aura-play-run-active {
    --aura-playfield-top:
      366px;
  }

}


@media (max-width: 720px) {

  .game-shell.aura-play-run-active {
    --aura-playfield-top:
      414px;
  }


  .game-shell.aura-play-run-active
  .aura-pause-btn {
    left:
      156px;

    min-width:
      76px;

    padding:
      0 10px;
  }


  .aura-pause-panel {
    padding:
      32px 20px;
  }

}


/* Hide pause control outside a live run */

.game-shell:has(.game-over:not([hidden]))
.aura-pause-btn,

.game-shell:has(.victory-overlay:not([hidden]))
.aura-pause-btn,

.game-shell:has(.game-intro:not([hidden]))
.aura-pause-btn {
  display:
    none !important;
}


/* AURA_PLAYFIELD_SAFE_ZONE_V1 */


/* ==========================================================
   AURA_LEVELUP_FACE_V1

   Guardian is intentionally framed as upper-body artwork.
   Face remains visible above the upgrade cards.
   ========================================================== */

.upgrade-panel::before {
  top:
    -13% !important;

  right:
    1.5% !important;

  width:
    min(35vw, 440px) !important;

  height:
    122% !important;

  opacity:
    .20 !important;

  background-position:
    center top !important;

  background-size:
    auto 108% !important;

  filter:
    saturate(.88)
    brightness(.82)
    contrast(1.05) !important;

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0,0,0,.58) 13%,
      #000 32%,
      #000 100%
    ) !important;
}


.upgrade-panel::after {
  top:
    3% !important;

  right:
    1% !important;

  width:
    min(34vw, 420px) !important;

  opacity:
    .85;
}


@media (max-width: 900px) {

  .upgrade-panel::before {
    right:
      -4% !important;

    width:
      min(42vw, 340px)
      !important;

    opacity:
      .14 !important;
  }

}


@media (max-width: 640px) {

  .upgrade-panel::before {
    opacity:
      .09 !important;
  }

}


/* AURA_LEVELUP_FACE_V1 */


/* ==========================================================
   AURA_HOLDER_GATE_PREMIUM_V1

   Holder access becomes an Aura poster / signal terminal.
   Wallet logic remains untouched.
   ========================================================== */


/* ----------------------------------------------------------
   OUTER STAGE
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked) {
  padding:
    26px 28px 34px !important;

  background:
    radial-gradient(
      ellipse at 76% 47%,
      rgba(186,255,22,.075),
      transparent 30%
    ),
    radial-gradient(
      ellipse at 18% 100%,
      rgba(108,176,43,.038),
      transparent 34%
    ),
    transparent
    !important;
}


/* ----------------------------------------------------------
   MAIN PANEL
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel {
  position:
    relative !important;

  isolation:
    isolate;

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(330px, .72fr);

  grid-template-rows:
    auto;

  column-gap:
    clamp(34px, 5vw, 76px);

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

  max-width:
    1180px !important;

  min-height:
    600px;

  padding:
    clamp(48px, 5vw, 72px)
    clamp(48px, 5.5vw, 78px)
    !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(186,255,22,.16)
    !important;

  border-radius:
    0 !important;

  background:
    radial-gradient(
      ellipse at 77% 46%,
      rgba(186,255,22,.105),
      transparent 27%
    ),
    radial-gradient(
      ellipse at 16% 20%,
      rgba(114,177,55,.045),
      transparent 35%
    ),
    linear-gradient(
      118deg,
      rgba(4,10,4,.995) 0 56%,
      rgba(3,8,4,.99) 72%,
      rgba(1,4,2,.995)
    )
    !important;

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

  clip-path:
    polygon(
      0 0,
      calc(100% - 34px) 0,
      100% 34px,
      100% 100%,
      30px 100%,
      0 calc(100% - 30px)
    );
}


/*
 * Technical signal line through the left content plane.
 */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel::before {
  content:
    "";

  position:
    absolute;

  z-index:
    0;

  left:
    0;

  top:
    0;

  width:
    54%;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      #baff16 0%,
      rgba(186,255,22,.38) 36%,
      transparent 100%
    );
}


/*
 * Large restrained signal field.
 */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel::after {
  content:
    "";

  position:
    absolute;

  z-index:
    0;

  right:
    -15%;

  top:
    50%;

  width:
    62%;

  aspect-ratio:
    1;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(186,255,22,.045);

  border-radius:
    50%;

  box-shadow:
    inset 0 0 0 52px
    rgba(186,255,22,.007),
    inset 0 0 0 53px
    rgba(186,255,22,.015);

  pointer-events:
    none;
}


/* ----------------------------------------------------------
   LEFT CONTENT COLUMN
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel
> *:not(.wallet-gate-guardian) {
  position:
    relative;

  z-index:
    3;

  grid-column:
    1;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-signal {
  width:
    42px !important;

  height:
    42px !important;

  margin:
    0 0 26px !important;

  border:
    1px solid
    rgba(186,255,22,.26)
    !important;

  border-radius:
    50%;

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

  box-shadow:
    0 0 26px
    rgba(186,255,22,.05),
    inset 0 0 18px
    rgba(186,255,22,.035)
    !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-signal span {
  width:
    13px !important;

  height:
    13px !important;

  background:
    #baff16 !important;

  box-shadow:
    0 0 16px
    rgba(186,255,22,.72)
    !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-kicker {
  margin:
    0 0 16px !important;

  color:
    #baff16 !important;

  font-size:
    8px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .16em !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel h2 {
  max-width:
    650px;

  margin:
    0 !important;

  color:
    #edf4e5 !important;

  font-size:
    clamp(58px, 5.7vw, 88px)
    !important;

  font-weight:
    790 !important;

  line-height:
    .87 !important;

  letter-spacing:
    -.055em !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel h2 em {
  display:
    block;

  margin-top:
    5px;

  color:
    #baff16 !important;

  font-style:
    normal !important;

  text-shadow:
    0 0 36px
    rgba(186,255,22,.10);
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-copy {
  max-width:
    610px;

  margin:
    30px 0 0 !important;

  color:
    rgba(228,237,219,.48)
    !important;

  font-size:
    13px !important;

  line-height:
    1.65 !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-copy strong {
  color:
    #edf4e5 !important;

  font-weight:
    850 !important;
}


/* ----------------------------------------------------------
   ACCESS MODULES
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-status {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    10px !important;

  margin:
    30px 0 0 !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-status > div {
  min-width:
    0;

  min-height:
    82px;

  padding:
    17px 16px !important;

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

  border-radius:
    0 !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(186,255,22,.055),
      transparent 52%
    ),
    rgba(3,8,4,.86)
    !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 11px) 0,
      100% 11px,
      100% 100%,
      9px 100%,
      0 calc(100% - 9px)
    );
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-status > div:nth-child(2) {
  border-color:
    rgba(186,255,22,.23)
    !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-status small {
  display:
    block;

  margin-bottom:
    8px;

  color:
    rgba(225,237,215,.30)
    !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  letter-spacing:
    .13em !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-status strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #edf4e5 !important;

  font-size:
    11px !important;

  font-weight:
    850 !important;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ----------------------------------------------------------
   MESSAGE + CTA
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-message {
  margin:
    18px 0 0 !important;

  color:
    rgba(222,235,211,.34)
    !important;

  font-size:
    9px !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-actions {
  display:
    grid !important;

  grid-template-columns:
    1fr;

  width:
    100%;

  margin:
    26px 0 0 !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-connect-button,

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-buy-button {
  width:
    100% !important;

  min-height:
    58px;

  border:
    1px solid
    #baff16 !important;

  border-radius:
    0 !important;

  color:
    #071003 !important;

  background:
    linear-gradient(
      90deg,
      #d8ff69,
      #baff16
    )
    !important;

  clip-path:
    polygon(
      0 0,
      calc(100% - 15px) 0,
      100% 15px,
      100% 100%,
      12px 100%,
      0 calc(100% - 12px)
    );

  box-shadow:
    0 18px 40px
    rgba(186,255,22,.08)
    !important;

  font-weight:
    900 !important;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    filter 150ms ease;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-connect-button:hover,

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-buy-button:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.05);

  box-shadow:
    0 22px 50px
    rgba(186,255,22,.14)
    !important;
}


.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-note,

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-buy-help {
  max-width:
    590px;

  margin:
    14px 0 0 !important;

  color:
    rgba(219,231,208,.20)
    !important;

  font-size:
    7px !important;

  line-height:
    1.5 !important;
}


/* ----------------------------------------------------------
   GUARDIAN STAGE
   ---------------------------------------------------------- */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-guardian {
  position:
    relative;

  z-index:
    2;

  grid-column:
    2;

  grid-row:
    1 / span 8;

  align-self:
    stretch;

  min-height:
    480px;

  overflow:
    visible;

  pointer-events:
    none;
}


.wallet-gate-guardian::before {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    5%;

  width:
    94%;

  height:
    22%;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse,
      rgba(186,255,22,.17),
      rgba(186,255,22,.04) 44%,
      transparent 72%
    );

  filter:
    blur(9px);
}


.wallet-gate-guardian img {
  position:
    absolute;

  z-index:
    3;

  left:
    50%;

  bottom:
    -5%;

  width:
    120%;

  max-width:
    none;

  height:
    108%;

  transform:
    translateX(-50%);

  object-fit:
    contain;

  object-position:
    center bottom;

  opacity:
    .82;

  filter:
    saturate(.88)
    brightness(.82)
    contrast(1.04)
    drop-shadow(
      0 26px 46px
      rgba(0,0,0,.72)
    )
    drop-shadow(
      0 0 26px
      rgba(186,255,22,.07)
    );
}


.wallet-gate-guardian-ring {
  position:
    absolute;

  left:
    50%;

  top:
    48%;

  aspect-ratio:
    1;

  transform:
    translate(-50%,-50%);

  border-radius:
    50%;

  pointer-events:
    none;
}


.wallet-gate-guardian
.ring-one {
  width:
    112%;

  border:
    1px solid
    rgba(186,255,22,.095);
}


.wallet-gate-guardian
.ring-two {
  width:
    86%;

  border:
    1px dashed
    rgba(186,255,22,.075);

  transform:
    translate(-50%,-50%)
    rotate(18deg);
}


.wallet-gate-guardian
.ring-three {
  width:
    60%;

  border:
    1px solid
    rgba(216,255,105,.11);

  box-shadow:
    0 0 60px
    rgba(186,255,22,.035);
}


/* ----------------------------------------------------------
   LOCK STATE
   ---------------------------------------------------------- */

.wallet-gate-lock-state {
  position:
    absolute;

  z-index:
    5;

  right:
    -4px;

  bottom:
    9%;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-width:
    150px;

  padding:
    11px 14px;

  border-left:
    2px solid
    #baff16;

  background:
    linear-gradient(
      90deg,
      rgba(6,14,6,.94),
      rgba(2,6,3,.70)
    );

  box-shadow:
    0 18px 40px
    rgba(0,0,0,.34);

  clip-path:
    polygon(
      0 0,
      calc(100% - 12px) 0,
      100% 12px,
      100% 100%,
      0 100%
    );
}


.wallet-gate-lock-state > i {
  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #baff16;

  box-shadow:
    0 0 14px
    rgba(186,255,22,.72);
}


.wallet-gate-lock-state div {
  display:
    grid;

  gap:
    2px;
}


.wallet-gate-lock-state small {
  color:
    rgba(224,237,213,.30);

  font-size:
    5px;

  font-weight:
    900;

  letter-spacing:
    .14em;
}


.wallet-gate-lock-state strong {
  color:
    #d8ff69;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .08em;
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 940px) {

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel {
    grid-template-columns:
      1fr;

    min-height:
      0;

    padding:
      42px 34px 38px
      !important;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel
  > *:not(.wallet-gate-guardian) {
    grid-column:
      1;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-guardian {
    display:
      none;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-status {
    grid-template-columns:
      1fr 1fr;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-status > div:last-child {
    grid-column:
      1 / -1;
  }

}


@media (max-width: 560px) {

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked) {
    padding:
      12px !important;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel {
    padding:
      34px 22px 30px
      !important;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel h2 {
    font-size:
      clamp(46px, 14vw, 64px)
      !important;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-status {
    grid-template-columns:
      1fr;
  }


  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-status > div:last-child {
    grid-column:
      auto;
  }

}


/* AURA_HOLDER_GATE_PREMIUM_V1 */


/* ==========================================================
   AURA_HOLDER_GATE_OVERFLOW_FIX_V1
   Prevent bottom cards from being clipped at 100% zoom.
   ========================================================== */

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked) {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding:
    clamp(24px, 3vh, 40px)
    clamp(18px, 2.4vw, 28px)
    clamp(34px, 4vh, 52px)
    !important;
}

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: flex-start !important;
  margin-bottom: 20px !important;
}

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-panel
> *:not(.wallet-gate-guardian) {
  min-width: 0;
}

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-guardian {
  align-self: stretch !important;
}

.aura-play-page-shell
.wallet-gate:not([hidden]):not(.is-unlocked)
.wallet-gate-guardian img {
  max-height: min(72vh, 760px) !important;
  object-fit: contain !important;
}

@media (max-height: 940px) {
  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked) {
    padding-bottom:
      40px !important;
  }

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel {
    gap:
      20px !important;
  }

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-guardian img {
    max-height:
      min(62vh, 640px) !important;

    opacity:
      .86 !important;
  }
}

@media (max-width: 1360px) {
  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-guardian {
    grid-column:
      1 !important;

    justify-self:
      end !important;
  }

  .aura-play-page-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-guardian img {
    max-height:
      420px !important;
  }
}

/* AURA_HOLDER_GATE_OVERFLOW_FIX_V1 */

/* ==========================================================
   AURA_ENTRY_CONTROLS_HEIGHT_FIX_V1

   Desktop intro must fully contain:
   copy + Guardian + four control modules.

   Previous short-viewport rule forced the shell to 720px,
   which clipped the controls at 100% browser zoom.
   Gameplay state is not affected.
   ========================================================== */

@media (min-width: 901px) {

  .aura-play-page-shell
  .game-shell:has(
    .game-intro.aura-entry-premium:not([hidden])
  ) {
    height:
      920px !important;

    min-height:
      920px !important;

    max-height:
      none !important;
  }


  .aura-play-page-shell
  .game-intro.aura-entry-premium:not([hidden]) {
    height:
      100% !important;

    min-height:
      100% !important;

    overflow:
      hidden !important;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-inner {
    min-height:
      100% !important;

    align-content:
      center !important;

    padding-top:
      38px !important;

    padding-bottom:
      48px !important;
  }


  .aura-play-page-shell
  .aura-entry-premium
  .aura-entry-controls {
    align-self:
      end !important;

    margin-bottom:
      0 !important;
  }

}


/* AURA_ENTRY_CONTROLS_HEIGHT_FIX_V1 */

/* ==========================================================
   AURA_SIGNAL_PERIMETER_V1

   One intentional arena perimeter on all four sides.
   Does not affect canvas dimensions.
   ========================================================== */

.game-shell.aura-play-run-active
.game-canvas {
  box-sizing:
    border-box !important;

  outline:
    1px solid
    rgba(186,255,22,.16);

  outline-offset:
    -1px;

  box-shadow:
    inset 0 1px 0
      rgba(216,255,105,.20),

    inset 1px 0 0
      rgba(186,255,22,.13),

    inset -1px 0 0
      rgba(186,255,22,.13),

    inset 0 -1px 0
      rgba(216,255,105,.22),

    inset 0 18px 32px
      rgba(186,255,22,.012),

    inset 0 -22px 34px
      rgba(186,255,22,.018)
    !important;
}


/*
 * The arena art shares exactly the same physical rectangle
 * as the canvas. Keep it clipped to that signal perimeter.
 */

.game-shell.aura-play-run-active
.aura-arena-art-layer {
  overflow:
    hidden;

  box-shadow:
    inset 0 -1px 0
      rgba(186,255,22,.08);
}


/*
 * Bottom rail gets slightly more authority because this was
 * previously the visually undefined edge of the arena.
 */

.game-shell.aura-play-run-active
.game-canvas {
  border-bottom:
    1px solid
    rgba(186,255,22,.22)
    !important;
}


/*
 * Fullscreen keeps the same boundary contract.
 */

:fullscreen
.game-shell.aura-play-run-active
.game-canvas {
  outline-color:
    rgba(186,255,22,.18);
}


/* AURA_SIGNAL_PERIMETER_V1 */
/* ==========================================================
   AURA_LEVELUP_SPACING_V1
   Give the level-up decision room to breathe.
   ========================================================== */

.upgrade-panel > p {
  margin:
    0 0 24px !important;
}

.upgrade-panel > h2 {
  line-height:
    .92 !important;

  letter-spacing:
    -.045em !important;
}

.upgrade-panel > h2 em {
  display:
    block !important;

  margin-top:
    12px !important;

  line-height:
    .86 !important;
}

.upgrade-grid {
  margin-top:
    54px !important;
}


@media (max-height: 820px) {

  .upgrade-panel > p {
    margin-bottom:
      16px !important;
  }

  .upgrade-panel > h2 {
    font-size:
      clamp(52px, 6.3vw, 82px)
      !important;
  }

  .upgrade-panel > h2 em {
    margin-top:
      8px !important;
  }

  .upgrade-grid {
    margin-top:
      36px !important;
  }

}


/* AURA_LEVELUP_SPACING_V1 */


/* ==========================================================
   AURA_SIGNAL_PERIMETER_V2

   Dedicated arena overlay.
   Independent from canvas border rendering.
   ========================================================== */

.game-shell.aura-play-run-active {
  position:
    relative;
}


.game-shell.aura-play-run-active
.game-canvas {
  outline:
    none !important;

  border-bottom:
    0 !important;
}


.game-shell.aura-play-run-active::before {
  content:
    "";

  position:
    absolute;

  z-index:
    31;

  top:
    calc(
      var(--aura-playfield-top) +
      12px
    );

  right:
    12px;

  bottom:
    14px;

  left:
    12px;

  pointer-events:
    none;

  border:
    1px solid
    rgba(186,255,22,.25);

  border-bottom-color:
    rgba(216,255,105,.52);

  background:
    linear-gradient(
      90deg,
      #baff16,
      #baff16
    )
    left top /
    44px 2px
    no-repeat,

    linear-gradient(
      #baff16,
      #baff16
    )
    left top /
    2px 44px
    no-repeat,

    linear-gradient(
      90deg,
      #baff16,
      #baff16
    )
    right top /
    44px 2px
    no-repeat,

    linear-gradient(
      #baff16,
      #baff16
    )
    right top /
    2px 44px
    no-repeat,

    linear-gradient(
      90deg,
      #d8ff69,
      #d8ff69
    )
    left bottom /
    52px 2px
    no-repeat,

    linear-gradient(
      #d8ff69,
      #d8ff69
    )
    left bottom /
    2px 52px
    no-repeat,

    linear-gradient(
      90deg,
      #d8ff69,
      #d8ff69
    )
    right bottom /
    52px 2px
    no-repeat,

    linear-gradient(
      #d8ff69,
      #d8ff69
    )
    right bottom /
    2px 52px
    no-repeat;

  box-shadow:
    inset 0 0 34px
      rgba(186,255,22,.015),

    inset 0 -26px 34px
      rgba(186,255,22,.030),

    0 0 22px
      rgba(186,255,22,.015);
}


.game-shell.aura-play-run-active::after {
  content:
    "";

  position:
    absolute;

  z-index:
    30;

  left:
    13px;

  right:
    13px;

  bottom:
    15px;

  height:
    3px;

  margin:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(186,255,22,.75),
      rgba(186,255,22,.16) 24%,
      rgba(186,255,22,.10) 50%,
      rgba(186,255,22,.16) 76%,
      rgba(186,255,22,.75)
    );

  box-shadow:
    0 0 14px
    rgba(186,255,22,.10);

  pointer-events:
    none;
}


/* AURA_SIGNAL_PERIMETER_V2 */


/* ==========================================================
   AURA_AUDIO_UI_V1
   ========================================================== */

.aura-audio-btn {
  display:
    none;
}


.game-shell.aura-play-run-active
.aura-audio-btn {
  position:
    absolute;

  z-index:
    37;

  top:
    18px;

  left:
    278px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-width:
    104px;

  height:
    38px;

  padding:
    0 14px;

  border:
    1px solid
    rgba(186,255,22,.18);

  border-radius:
    0;

  color:
    rgba(235,244,226,.76);

  background:
    linear-gradient(
      135deg,
      rgba(11,20,10,.96),
      rgba(3,8,4,.98)
    );

  clip-path:
    polygon(
      0 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% 100%,
      8px 100%,
      0 calc(100% - 8px)
    );

  font:
    inherit;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  cursor:
    pointer;
}


.game-shell.aura-play-run-active
.aura-audio-btn::before {
  content:
    "";

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    #baff16;

  box-shadow:
    0 0 12px
    rgba(186,255,22,.72);
}


.game-shell.aura-play-run-active
.aura-audio-btn[data-enabled="false"] {
  color:
    rgba(235,244,226,.36);

  border-color:
    rgba(235,244,226,.10);
}


.game-shell.aura-play-run-active
.aura-audio-btn[data-enabled="false"]::before {
  background:
    rgba(235,244,226,.24);

  box-shadow:
    none;
}


.game-shell.aura-play-run-active
.aura-audio-btn:hover {
  color:
    #d8ff69;

  border-color:
    rgba(186,255,22,.38);
}


@media (max-width: 720px) {

  .game-shell.aura-play-run-active
  .aura-audio-btn {
    left:
      242px;

    min-width:
      88px;

    padding:
      0 9px;

    font-size:
      7px;
  }

}


/* AURA_AUDIO_UI_V1 */

/* ==========================================================
   AURA_ENTRY_HERO_FRAME_V5

   Canonical frame:
   Desktop Header / Signal Arena / Holder Hero = exact parity.

   Header source of truth:
   min(calc(100% - 40px), 1380px)

   Wallet/game runtime untouched.
   ========================================================== */

.aura-play-page-shell {
  --aura-play-frame:
    min(
      calc(100% - 40px),
      1380px
    );
}


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

@media (min-width: 901px) {

  /* --------------------------------------------------------
     PAGE RHYTHM
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page {
    padding-top:
      94px !important;
  }


  /* --------------------------------------------------------
     SIGNAL ARENA = HEADER WIDTH
     -------------------------------------------------------- */

  .aura-play-page-shell
  .aura-play-context {
    width:
      var(--aura-play-frame)
      !important;

    max-width:
      none !important;

    min-height:
      50px !important;

    margin:
      0 auto 10px !important;

    padding:
      7px 12px !important;

    box-sizing:
      border-box;
  }


  .aura-play-context-signal > span {
    width:
      28px;

    height:
      28px;
  }


  /* --------------------------------------------------------
     LOCKED GAME SHELL = HEADER WIDTH

     Higher specificity intentionally defeats the older
     locked-flow / var(--max) rules.
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell {
    width:
      var(--aura-play-frame)
      !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 auto !important;

    padding:
      6px 0 14px !important;

    overflow:
      visible !important;

    box-sizing:
      border-box;
  }


  /* --------------------------------------------------------
     WALLET STAGE FILLS SHELL
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell
  .wallet-gate:not([hidden]):not(.is-unlocked) {
    position:
      static !important;

    inset:
      auto !important;

    display:
      block !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    overflow:
      visible !important;

    box-sizing:
      border-box;
  }


  /* --------------------------------------------------------
     HOLDER HERO = FULL HEADER FRAME

     This selector is intentionally more specific than the
     old 1180px holder panel rule.
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell
  .wallet-gate:not([hidden]):not(.is-unlocked)
  .wallet-gate-panel {
    position:
      relative !important;

    isolation:
      isolate;

    display:
      grid !important;

    grid-template-columns:
      minmax(0, 1.55fr)
      minmax(300px, .70fr)
      !important;

    grid-template-rows:
      auto !important;

    align-items:
      center !important;

    column-gap:
      clamp(
        34px,
        4vw,
        64px
      ) !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-width:
      0 !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      clamp(
        30px,
        3vw,
        42px
      )
      clamp(
        38px,
        4vw,
        58px
      )
      !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box;
  }


  /* --------------------------------------------------------
     LEFT CONTENT
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate-content {
    position:
      relative !important;

    z-index:
      5;

    grid-column:
      1 !important;

    grid-row:
      1 !important;

    display:
      flex !important;

    flex-direction:
      column;

    justify-content:
      center;

    width:
      100% !important;

    max-width:
      820px !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-signal {
    width:
      34px !important;

    height:
      34px !important;

    margin:
      0 0 14px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-kicker {
    margin:
      0 0 10px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  h2 {
    width:
      100% !important;

    max-width:
      800px !important;

    margin:
      0 !important;

    font-size:
      clamp(
        50px,
        4.3vw,
        68px
      ) !important;

    line-height:
      .89 !important;

    letter-spacing:
      -.055em !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  h2 em {
    display:
      block !important;

    width:
      max-content !important;

    max-width:
      100% !important;

    margin-top:
      3px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-copy {
    max-width:
      700px !important;

    margin:
      17px 0 0 !important;

    font-size:
      12px !important;

    line-height:
      1.5 !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-status {
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      ) !important;

    gap:
      9px !important;

    width:
      100% !important;

    max-width:
      760px !important;

    margin-top:
      17px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-status > div {
    min-height:
      62px !important;

    padding:
      10px 12px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-status strong {
    margin-top:
      6px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-message {
    min-height:
      15px !important;

    max-width:
      760px;

    margin:
      10px 0 0 !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-actions {
    width:
      100% !important;

    max-width:
      760px !important;

    margin-top:
      11px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-connect-button,

  .aura-play-page-shell
  .wallet-gate-content
  .wallet-buy-button {
    min-height:
      48px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content
  .wallet-gate-note,

  .aura-play-page-shell
  .wallet-gate-content
  .wallet-buy-help {
    max-width:
      760px !important;

    margin:
      9px 0 0 !important;

    text-align:
      left !important;
  }


  /* --------------------------------------------------------
     RIGHT GUARDIAN

     It owns its column but does not create a second screen.
     -------------------------------------------------------- */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate-guardian {
    position:
      relative !important;

    z-index:
      3;

    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      center !important;

    justify-self:
      stretch !important;

    display:
      block !important;

    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    height:
      390px !important;

    min-height:
      390px !important;

    max-height:
      390px !important;

    margin:
      0 !important;

    transform:
      none !important;

    overflow:
      visible !important;

    pointer-events:
      none;
  }


  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate-guardian img {
    position:
      absolute !important;

    top:
      50% !important;

    left:
      50% !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      min(
        100%,
        330px
      ) !important;

    max-width:
      330px !important;

    height:
      360px !important;

    max-height:
      360px !important;

    transform:
      translate(
        -50%,
        -50%
      ) !important;

    object-fit:
      contain !important;

    object-position:
      center !important;

    opacity:
      .88 !important;
  }


  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate-lock-state {
    right:
      0 !important;

    bottom:
      20px !important;

    transform:
      scale(.88);

    transform-origin:
      right bottom;
  }


  /* No fullscreen while wallet gate owns the page */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .aura-play-fullscreen-btn {
    display:
      none !important;
  }


  /* Reduce old locked-flow bottom whitespace */

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell::after {
    margin-top:
      12px !important;
  }

}


/* ==========================================================
   UNLOCKED ARENA FULLSCREEN
   ========================================================== */

.aura-play-page-shell
.game-shell.aura-play-arena-unlocked
.aura-play-fullscreen-btn,

.aura-play-page-shell
.game-shell:has(
  .wallet-gate[hidden]
)
.aura-play-fullscreen-btn {
  position:
    absolute !important;

  z-index:
    52 !important;

  top:
    18px !important;

  left:
    22px !important;

  right:
    auto !important;

  bottom:
    auto !important;

  display:
    inline-flex !important;

  align-items:
    center;

  justify-content:
    center;

  width:
    auto !important;

  min-width:
    128px;

  height:
    38px;

  margin:
    0 !important;

  padding:
    0 14px !important;
}


/* ==========================================================
   TABLET
   Header source = calc(100% - 24px)
   ========================================================== */

@media (max-width: 900px) {

  .aura-play-page-shell {
    --aura-play-frame:
      calc(100% - 24px);
  }


  .aura-play-page-shell
  .game-page {
    padding-top:
      90px !important;
  }


  .aura-play-page-shell
  .aura-play-context,

  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .game-shell {
    width:
      var(--aura-play-frame)
      !important;

    max-width:
      none !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;
  }


  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate {
    padding:
      0 !important;
  }


  .aura-play-page-shell
  .game-page:has(
    .wallet-gate:not([hidden]):not(.is-unlocked)
  )
  .wallet-gate-panel {
    display:
      block !important;

    width:
      100% !important;

    max-width:
      none !important;

    min-height:
      0 !important;

    padding:
      28px 26px !important;
  }


  .aura-play-page-shell
  .wallet-gate-content {
    width:
      100% !important;

    max-width:
      none !important;
  }


  .aura-play-page-shell
  .wallet-gate-guardian {
    display:
      none !important;
  }

}


/* ==========================================================
   MOBILE
   Header source = calc(100% - 18px)
   ========================================================== */

@media (max-width: 600px) {

  .aura-play-page-shell {
    --aura-play-frame:
      calc(100% - 18px);
  }


  .aura-play-page-shell
  .wallet-gate-panel {
    padding:
      24px 18px !important;
  }

}


/* AURA_ENTRY_HERO_FRAME_V5 */


/* ==========================================================
   AURA_LEVELUP_TAKEOVER_V2

   Level-up is a dedicated decision state.
   It must sit above the gameplay HUD instead of rendering
   its headline and cards underneath the stat deck.
   ========================================================== */

.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden]) {
  position:
    absolute !important;

  z-index:
    70 !important;

  inset:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  box-sizing:
    border-box !important;

  width:
    100% !important;

  height:
    100% !important;

  padding:
    clamp(72px, 8vh, 110px)
    clamp(34px, 6vw, 96px)
    clamp(46px, 6vh, 82px)
    !important;

  overflow:
    auto !important;

  background:
    radial-gradient(
      ellipse at 68% 38%,
      rgba(186,255,22,.075),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(1,5,2,.985),
      rgba(1,4,2,.965)
    )
    !important;

  backdrop-filter:
    blur(14px)
    saturate(.82);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(.82);
}


.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel {
  position:
    relative !important;

  z-index:
    2 !important;

  width:
    min(1340px, 100%)
    !important;

  max-width:
    1340px !important;

  min-height:
    0 !important;

  margin:
    auto !important;

  padding:
    0 !important;

  overflow:
    visible !important;
}


/*
 * Keep the level-up title completely clear of the HUD area.
 */

.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel > p {
  position:
    relative;

  z-index:
    4;

  margin:
    0 0 16px !important;
}


.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel > h2 {
  position:
    relative;

  z-index:
    4;

  max-width:
    720px !important;

  margin:
    0 !important;

  font-size:
    clamp(54px, 6vw, 94px)
    !important;

  line-height:
    .88 !important;
}


.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel > h2 em {
  margin-top:
    8px !important;
}


/*
 * Cards are the primary interaction.
 */

.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-grid {
  position:
    relative !important;

  z-index:
    5 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    )
    !important;

  gap:
    clamp(14px, 1.6vw, 22px)
    !important;

  width:
    100% !important;

  margin-top:
    clamp(32px, 4vh, 48px)
    !important;
}


.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-card {
  min-height:
    clamp(230px, 28vh, 300px)
    !important;
}


/*
 * Guardian remains atmosphere, never content obstruction.
 */

.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel::before {
  z-index:
    0 !important;

  top:
    -5% !important;

  right:
    0 !important;

  width:
    min(31vw, 400px)
    !important;

  height:
    104% !important;

  opacity:
    .13 !important;

  pointer-events:
    none !important;
}


.game-shell.aura-play-run-active
.upgrade-overlay:not([hidden])
.upgrade-panel::after {
  z-index:
    1 !important;

  pointer-events:
    none !important;
}


/*
 * During the decision state the takeover owns the screen.
 * No HUD card should compete visually with the choices.
 */

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.game-hud,

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.aura-build-strip,

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.aura-pulse-control,

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.aura-live-signal,

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.aura-pause-btn,

.game-shell:has(
  .upgrade-overlay:not([hidden])
)
.aura-play-fullscreen-btn {
  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


/* Desktop with limited vertical room */

@media (max-height: 820px) {

  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden]) {
    align-items:
      flex-start !important;

    padding:
      46px
      42px
      36px
      !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-panel > h2 {
    font-size:
      clamp(46px, 5.4vw, 72px)
      !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-grid {
    margin-top:
      28px !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-card {
    min-height:
      220px !important;
  }

}


/* Tablet */

@media (max-width: 900px) {

  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden]) {
    align-items:
      flex-start !important;

    padding:
      54px
      24px
      36px
      !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-grid {
    grid-template-columns:
      1fr !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-card {
    min-height:
      180px !important;
  }


  .game-shell.aura-play-run-active
  .upgrade-overlay:not([hidden])
  .upgrade-panel::before {
    opacity:
      .07 !important;
  }

}


/* AURA_LEVELUP_TAKEOVER_V2 */


/* ==========================================================
   AURA_SIGNAL_HOLDS_TAKEOVER_V1

   Milestone signals are cinematic arena-state transitions.
   The gameplay world remains underneath, but cannot visually
   interfere with the milestone message.
   ========================================================== */

.game-shell
.milestone-signal[hidden] {
  display:
    none !important;
}


.game-shell
.milestone-signal:not([hidden]) {
  position:
    absolute !important;

  z-index:
    64 !important;

  inset:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  box-sizing:
    border-box !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    clamp(28px, 5vw, 76px)
    !important;

  overflow:
    hidden !important;

  pointer-events:
    auto !important;

  isolation:
    isolate !important;

  /*
   * Intentionally strong enough that Guardian, enemies,
   * projectiles and enemy labels cannot compete behind it.
   */

  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(105, 165, 20, .075) 0%,
      rgba(5, 12, 5, .76) 38%,
      rgba(1, 5, 2, .94) 76%
    ),
    rgba(1, 5, 2, .90)
    !important;

  backdrop-filter:
    blur(7px)
    brightness(.38)
    saturate(.65)
    !important;

  -webkit-backdrop-filter:
    blur(7px)
    brightness(.38)
    saturate(.65)
    !important;

  animation:
    auraSignalTakeoverIn
    220ms
    cubic-bezier(.2,.78,.2,1)
    both;
}


/*
 * Subtle signal wash behind the card.
 */

.game-shell
.milestone-signal:not([hidden])::before {
  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(174,255,42,.025) 38%,
      rgba(174,255,42,.055) 50%,
      rgba(174,255,42,.025) 62%,
      transparent 100%
    );

  opacity:
    .9;
}


/*
 * Dedicated milestone card.
 */

.game-shell
.milestone-signal
.milestone-signal-panel {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  width:
    min(
      620px,
      calc(100% - 32px)
    );

  min-height:
    clamp(
      170px,
      24vh,
      230px
    );

  margin:
    0;

  padding:
    clamp(30px, 4vh, 46px)
    clamp(28px, 5vw, 64px);

  overflow:
    hidden;

  text-align:
    center;

  background:
    linear-gradient(
      180deg,
      rgba(3, 9, 4, .99),
      rgba(1, 6, 3, .985)
    )
    !important;

  border:
    1px solid
    rgba(161,255,31,.38)
    !important;

  border-radius:
    22px;

  box-shadow:
    0 28px 90px
      rgba(0,0,0,.62),
    0 0 0 1px
      rgba(174,255,45,.035)
      inset,
    0 0 70px
      rgba(140,255,24,.055);

  transform:
    translateZ(0);

  animation:
    auraSignalPanelIn
    260ms
    cubic-bezier(.16,.84,.22,1)
    both;
}


/*
 * Thin premium signal line.
 */

.game-shell
.milestone-signal
.milestone-signal-panel::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    14%;

  width:
    72%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(179,255,43,.76),
      transparent
    );

  box-shadow:
    0 0 18px
      rgba(174,255,39,.28);

  pointer-events:
    none;
}


.game-shell
.milestone-signal
[data-milestone-kicker] {
  position:
    relative;

  z-index:
    3;

  display:
    block;

  margin:
    0 0 12px
    !important;

  color:
    #b7ff28
    !important;

  font-size:
    clamp(9px, .7vw, 11px)
    !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    .09em
    !important;

  text-transform:
    uppercase;
}


.game-shell
.milestone-signal
[data-milestone-title] {
  position:
    relative;

  z-index:
    3;

  display:
    block;

  margin:
    0 !important;

  color:
    #f2f6eb
    !important;

  font-size:
    clamp(58px, 6vw, 86px)
    !important;

  font-weight:
    900 !important;

  line-height:
    .9 !important;

  letter-spacing:
    -.055em
    !important;

  text-shadow:
    0 6px 34px
      rgba(0,0,0,.6);
}


.game-shell
.milestone-signal
[data-milestone-copy] {
  position:
    relative;

  z-index:
    3;

  margin:
    18px 0 0
    !important;

  color:
    rgba(218,228,208,.62)
    !important;

  font-size:
    clamp(13px, 1vw, 16px)
    !important;

  font-weight:
    600 !important;

  line-height:
    1.45 !important;
}


/*
 * Level-up remains the highest gameplay decision state.
 */

.game-shell
.upgrade-overlay:not([hidden]) {
  z-index:
    70 !important;
}


@keyframes auraSignalTakeoverIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


@keyframes auraSignalPanelIn {

  from {
    opacity:
      0;

    transform:
      translateY(10px)
      scale(.975);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

}


@media (max-width: 700px) {

  .game-shell
  .milestone-signal:not([hidden]) {
    padding:
      18px !important;

    backdrop-filter:
      blur(5px)
      brightness(.34)
      !important;

    -webkit-backdrop-filter:
      blur(5px)
      brightness(.34)
      !important;
  }


  .game-shell
  .milestone-signal
  .milestone-signal-panel {
    width:
      min(
        520px,
        100%
      );

    min-height:
      170px;

    padding:
      28px 22px;
  }

}


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

  .game-shell
  .milestone-signal:not([hidden]),

  .game-shell
  .milestone-signal
  .milestone-signal-panel {
    animation:
      none !important;
  }

}


/* AURA_SIGNAL_HOLDS_TAKEOVER_V1 */

/* ==========================================================
   AURA_MILESTONE_POSITION_FIX_V2
   ========================================================== */

.game-shell
.milestone-signal:not([hidden]) {
  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  transform:
    none !important;

  translate:
    none !important;
}


/*
 * Pause must always own the screen when explicitly activated.
 */

.game-shell.is-paused
.aura-pause-overlay:not([hidden]) {
  z-index:
    90 !important;
}

/* ==========================================================
   AURA_MILESTONE_TRANSPARENT_V3
   Live gameplay remains visible during milestone signals.
   ========================================================== */

.game-shell
.milestone-signal:not([hidden]) {
  background:
    transparent !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  pointer-events:
    none !important;
}


/* Remove full-screen cinematic shade / vignette. */

.game-shell
.milestone-signal:not([hidden])::before {
  display:
    none !important;

  content:
    none !important;
}


/* Keep only the readable central signal card. */

.game-shell
.milestone-signal
.milestone-signal-panel {
  background:
    rgba(3, 8, 4, 0.76) !important;

  backdrop-filter:
    blur(8px) saturate(1.08);

  -webkit-backdrop-filter:
    blur(8px) saturate(1.08);

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(157, 255, 37, 0.07) !important;
}


/* Pause remains a true blocking takeover. */

.game-shell.is-paused
.aura-pause-overlay:not([hidden]) {
  pointer-events:
    auto !important;

  z-index:
    90 !important;
}

/* ==========================================================
   AURA_MILESTONE_TRANSPARENT_V3
   Live gameplay remains visible during milestone signals.
   ========================================================== */

.game-shell
.milestone-signal:not([hidden]) {
  background:
    transparent !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  pointer-events:
    none !important;
}


/* Remove full-screen cinematic shade / vignette. */

.game-shell
.milestone-signal:not([hidden])::before {
  display:
    none !important;

  content:
    none !important;
}


/* Keep only the readable central signal card. */

.game-shell
.milestone-signal
.milestone-signal-panel {
  background:
    rgba(3, 8, 4, 0.76) !important;

  backdrop-filter:
    blur(8px) saturate(1.08);

  -webkit-backdrop-filter:
    blur(8px) saturate(1.08);

  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(157, 255, 37, 0.07) !important;
}


/* Pause remains a true blocking takeover. */

.game-shell.is-paused
.aura-pause-overlay:not([hidden]) {
  pointer-events:
    auto !important;

  z-index:
    90 !important;
}