:root {
  --game-green: #9cff22;
  --game-bg: #020402;
  --game-line: rgba(156, 255, 34, 0.14);
  --game-text: #f5f8f1;
  --game-muted: rgba(245, 248, 241, 0.52);
  --game-danger: #ff5757;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  background: var(--game-bg);
}

body {
  overflow: hidden;
}

.game-page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(112, 255, 0, 0.08),
      transparent 34rem
    ),
    #020402;
}

.game-header {
  position: relative;
  z-index: 50;

  height: 68px;
  flex: 0 0 68px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 24px;

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

  background:
    rgba(2, 5, 2, 0.86);

  backdrop-filter: blur(16px);
}

.game-brand,
.game-exit {
  color: var(--game-text);
  text-decoration: none;
}

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

.game-brand span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--game-green);

  box-shadow:
    0 0 16px var(--game-green);
}

.game-header-center {
  text-align: center;
}

.game-header-center small {
  display: block;

  color: var(--game-green);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.game-header-center strong {
  display: block;

  margin-top: 3px;

  font-size: 11px;
  letter-spacing: 0.12em;
}

.game-exit {
  justify-self: end;

  min-height: 36px;

  display: inline-flex;
  align-items: center;

  padding: 0 15px;

  border:
    1px solid
    rgba(255,255,255,0.09);

  border-radius: 999px;

  color: var(--game-muted);

  font-size: 12px;
  font-weight: 800;
}

.game-shell {
  position: relative;

  flex: 1;
  min-height: 0;

  overflow: hidden;

  isolation: isolate;
}

.game-canvas {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;
}

.game-vignette,
.game-scanlines {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.game-vignette {
  z-index: 8;

  box-shadow:
    inset 0 0 180px
    rgba(0,0,0,0.66);
}

.game-scanlines {
  z-index: 9;

  opacity: 0.10;

  background:
    linear-gradient(
      to bottom,
      transparent 50%,
      rgba(156,255,34,0.07) 50%
    );

  background-size:
    100%
    5px;
}

.game-hud {
  position: absolute;
  z-index: 20;

  top: 20px;
  left: 20px;
  right: 20px;

  display: grid;

  grid-template-columns:
    minmax(170px, 1.2fr)
    repeat(4, minmax(105px, 0.7fr));

  gap: 8px;

  pointer-events: none;
}

.hud-card {
  min-height: 64px;

  padding: 11px 13px;

  border:
    1px solid
    rgba(255,255,255,0.07);

  border-radius: 13px;

  background:
    rgba(2,6,2,0.7);

  backdrop-filter: blur(12px);
}

.hud-card small {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(245,248,241,0.35);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.hud-card strong {
  font-size: 17px;
}

.hud-card > span {
  display: block;

  margin-top: 2px;

  color: var(--game-green);

  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.hud-value-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.hud-value-row span {
  color: var(--game-muted);

  font-size: 10px;
}

.hud-progress,
.xp-track,
.boss-track {
  overflow: hidden;

  border-radius: 99px;

  background:
    rgba(255,255,255,0.08);
}

.hud-progress {
  height: 3px;

  margin-top: 7px;
}

.hud-progress i,
.xp-track i,
.boss-track i {
  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--game-green);

  box-shadow:
    0 0 12px
    rgba(156,255,34,0.5);

  transition:
    width
    120ms
    linear;
}

.xp-shell {
  position: absolute;
  z-index: 20;

  left: 20px;
  right: 20px;
  bottom: 17px;

  pointer-events: none;
}

.xp-shell > span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(245,248,241,0.38);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.xp-track {
  height: 4px;
}

.xp-track i {
  width: 0;
}


/* BOSS */

.boss-shell {
  position: absolute;
  z-index: 22;

  top: 100px;
  left: 50%;

  width:
    min(
      calc(100% - 40px),
      560px
    );

  transform:
    translateX(-50%);

  padding: 11px 14px 13px;

  border:
    1px solid
    rgba(255,70,70,0.25);

  border-radius: 14px;

  background:
    rgba(15,3,3,0.76);

  backdrop-filter: blur(12px);

  pointer-events: none;
}

.boss-shell[hidden] {
  display: none;
}

.boss-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 8px;
}

.boss-copy span {
  color:
    rgba(255,110,110,0.6);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.boss-copy strong {
  color: #ff7777;

  font-size: 10px;
  letter-spacing: 0.12em;
}

.boss-track {
  height: 4px;
}

.boss-track i {
  width: 100%;

  background:
    linear-gradient(
      90deg,
      #ff3838,
      #ff835d
    );

  box-shadow:
    0 0 15px
    rgba(255,55,55,0.42);
}


/* WAVE SIGNAL */

.wave-signal {
  position: absolute;
  z-index: 24;

  top: 50%;
  left: 50%;

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

  min-width: 260px;

  padding: 18px 22px;

  text-align: center;

  border:
    1px solid
    rgba(156,255,34,0.16);

  border-radius: 18px;

  background:
    rgba(3,7,3,0.78);

  backdrop-filter: blur(14px);

  pointer-events: none;
}

.wave-signal[hidden] {
  display: none;
}

.wave-signal small {
  display: block;

  margin-bottom: 6px;

  color:
    rgba(245,248,241,0.34);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.wave-signal strong {
  color: var(--game-green);

  font-size: 18px;
  letter-spacing: 0.08em;
}


/* PULSE */

.pulse-control {
  position: absolute;
  z-index: 25;

  right: 24px;
  bottom: 38px;

  min-width: 168px;
  min-height: 58px;

  display: grid;

  grid-template-columns:
    38px
    1fr
    auto;

  gap: 10px;

  align-items: center;

  padding:
    8px
    10px;

  border:
    1px solid
    rgba(156,255,34,0.19);

  border-radius: 18px;

  background:
    rgba(3,8,3,0.75);

  color: var(--game-text);

  backdrop-filter: blur(12px);

  cursor: pointer;

  transition:
    border-color 140ms ease,
    transform 140ms ease,
    opacity 140ms ease;
}

.pulse-control:hover {
  border-color:
    rgba(156,255,34,0.42);

  transform:
    translateY(-2px);
}

.pulse-control.is-cooling {
  opacity: 0.65;
}

.pulse-ring {
  position: relative;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(156,255,34,0.18);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(156,255,34,0.14),
      rgba(156,255,34,0.02)
    );
}

.pulse-ring::after {
  content: "";

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    var(--game-green);

  box-shadow:
    0 0 14px
    var(--game-green);
}

.pulse-ring i {
  position: absolute;
  inset: 3px;

  border:
    2px solid
    var(--game-green);

  border-radius: 50%;

  opacity: 0.8;
}

.pulse-copy {
  text-align: left;
}

.pulse-copy small {
  display: block;

  color:
    rgba(245,248,241,0.36);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.pulse-copy strong {
  display: block;

  margin-top: 3px;

  color: var(--game-green);

  font-size: 10px;
  letter-spacing: 0.08em;
}

.pulse-control kbd {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,0.08);

  border-radius: 7px;

  background:
    rgba(255,255,255,0.035);

  color:
    rgba(245,248,241,0.45);

  font-family: inherit;
  font-size: 7px;
  font-weight: 900;
}


/* PANELS */

.game-intro,
.game-over,
.upgrade-overlay {
  position: absolute;
  z-index: 40;
  inset: 0;
}

.game-intro,
.game-over {
  display: grid;
  place-content: center;
  justify-items: center;

  padding: 28px;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(25,54,13,0.52),
      rgba(2,5,2,0.92) 48%
    );

  backdrop-filter: blur(7px);
}

.game-intro > p:first-child,
.game-over > p,
.upgrade-panel > p {
  margin:
    0
    0
    15px;

  color: var(--game-green);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.game-intro h1,
.game-over h2,
.upgrade-panel h2 {
  max-width: 760px;

  margin: 0;

  font-size:
    clamp(50px, 7vw, 100px);

  line-height: 0.91;
  letter-spacing: -0.06em;
}

.game-intro h1 em,
.game-over h2 em,
.upgrade-panel h2 em {
  display: block;

  color: var(--game-green);

  font-style: normal;
}

.game-intro-copy {
  max-width: 600px;

  margin:
    24px
    auto
    0 !important;

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

  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;

  line-height: 1.7;
}

.controls-grid,
.result-grid {
  display: grid;

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

  gap: 8px;

  width:
    min(
      100%,
      700px
    );

  margin-top: 28px;
}

.result-grid {
  grid-template-columns:
    repeat(3, 1fr);
}

.controls-grid > div,
.result-grid > div {
  padding: 14px;

  border:
    1px solid
    rgba(255,255,255,0.07);

  border-radius: 14px;

  background:
    rgba(255,255,255,0.025);
}

.controls-grid strong,
.result-grid strong {
  display: block;

  color: var(--game-green);

  font-size: 12px;
}

.controls-grid span,
.result-grid small {
  display: block;

  margin-top: 4px;

  color: var(--game-muted);

  font-size: 9px;
}

.game-primary {
  min-height: 50px;

  margin-top: 26px;

  padding:
    0
    22px;

  border: 0;

  border-radius: 999px;

  background: var(--game-green);

  color: #071000;

  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 0 28px
    rgba(156,255,34,0.2);
}

.upgrade-overlay {
  display: grid;
  place-items: center;

  padding: 28px;

  background:
    rgba(1,4,1,0.78);

  backdrop-filter: blur(14px);
}

.upgrade-overlay[hidden],
.game-over[hidden] {
  display: none;
}

.upgrade-panel {
  width:
    min(
      100%,
      920px
    );
}

.upgrade-panel h2 {
  font-size:
    clamp(44px, 5vw, 72px);
}

.upgrade-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 30px;
}

.upgrade-card {
  min-height: 210px;

  padding: 22px;

  text-align: left;

  border:
    1px solid
    rgba(156,255,34,0.13);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(156,255,34,0.08),
      transparent 44%
    ),
    rgba(6,10,5,0.96);

  color: var(--game-text);

  cursor: pointer;
}

.upgrade-card:hover {
  border-color:
    rgba(156,255,34,0.42);

  transform:
    translateY(-3px);
}

.upgrade-card small {
  color: var(--game-green);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.upgrade-card strong {
  display: block;

  margin-top: 52px;

  font-size: 24px;
}

.upgrade-card p {
  margin:
    10px
    0
    0;

  color: var(--game-muted);

  line-height: 1.55;
}

.mobile-stick {
  display: none;
}


/* MOBILE */

@media (max-width: 900px) {
  .game-hud {
    grid-template-columns:
      repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .game-header {
    padding:
      0
      14px;
  }

  .game-header-center {
    display: none;
  }

  .game-hud {
    top: 12px;
    left: 12px;
    right: 12px;

    grid-template-columns:
      1fr
      1fr;
  }

  .hud-card:nth-child(5) {
    display: none;
  }

  .hud-card {
    min-height: 56px;
  }

  .xp-shell {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .boss-shell {
    top: 132px;
  }

  .pulse-control {
    right: 24px;
    bottom: 50px;

    width: 88px;
    min-width: 88px;
    min-height: 88px;

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

    gap: 5px;

    border-radius: 50%;

    touch-action: manipulation;
  }

  .pulse-ring {
    width: 34px;
    height: 34px;
  }

  .pulse-control kbd {
    display: none;
  }

  .pulse-copy {
    text-align: center;
  }

  .pulse-copy small {
    display: none;
  }

  .upgrade-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-card {
    min-height: 130px;
  }

  .upgrade-card strong {
    margin-top: 26px;
  }

  .controls-grid {
    grid-template-columns:
      1fr
      1fr;
  }

  .game-intro h1,
  .game-over h2 {
    font-size:
      clamp(44px, 14vw, 70px);
  }

  .mobile-stick {
    position: absolute;
    z-index: 25;

    left: 28px;
    bottom: 44px;

    width: 116px;
    height: 116px;

    display: block;

    border:
      1px solid
      rgba(156,255,34,0.18);

    border-radius: 50%;

    background:
      rgba(4,10,3,0.36);

    backdrop-filter: blur(8px);

    touch-action: none;
  }

  .mobile-stick-knob {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 44px;
    height: 44px;

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

    border:
      1px solid
      rgba(156,255,34,0.42);

    border-radius: 50%;

    background:
      rgba(156,255,34,0.12);

    box-shadow:
      0 0 18px
      rgba(156,255,34,0.12);
  }
}

/* AURA ASCENSION BUILD SYSTEM V3 START */


/* ==========================================================
   LIVE BUILD STRIP
   ========================================================== */

.build-strip {
  position: absolute;
  z-index: 21;

  left: 20px;
  top: 96px;

  display: flex;
  align-items: stretch;

  gap: 6px;

  pointer-events: none;
}

.build-strip-label {
  min-width: 82px;

  display: flex;
  align-items: center;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(255,255,255,0.055);

  border-radius: 11px;

  background:
    rgba(2,6,2,0.56);

  color:
    rgba(245,248,241,0.28);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.13em;

  backdrop-filter: blur(10px);
}

.build-path {
  position: relative;

  min-width: 86px;
  min-height: 42px;

  display: grid;
  grid-template-columns:
    1fr
    auto;

  column-gap: 10px;

  align-items: center;

  padding:
    8px
    10px;

  overflow: hidden;

  border:
    1px solid
    rgba(156,255,34,0.085);

  border-radius: 11px;

  background:
    linear-gradient(
      145deg,
      rgba(8,14,6,0.72),
      rgba(2,6,2,0.58)
    );

  backdrop-filter: blur(10px);
}

.build-path::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 2px;

  background:
    var(--game-green);

  opacity: 0.35;

  box-shadow:
    0 0 10px
    rgba(156,255,34,0.35);
}

.build-path small {
  color:
    rgba(245,248,241,0.34);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.build-path strong {
  color:
    var(--game-green);

  font-size: 12px;
  line-height: 1;
}

.build-path.is-active {
  border-color:
    rgba(156,255,34,0.22);

  background:
    linear-gradient(
      145deg,
      rgba(18,32,10,0.82),
      rgba(3,8,3,0.65)
    );
}

.build-path.is-active::before {
  opacity: 1;
}


/* ==========================================================
   BUILD-AWARE UPGRADE CARDS
   ========================================================== */

.upgrade-card {
  position: relative;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.upgrade-card::after {
  content: "";

  position: absolute;

  right: -44px;
  top: -44px;

  width: 120px;
  height: 120px;

  border:
    1px solid
    rgba(156,255,34,0.07);

  border-radius: 50%;

  pointer-events: none;
}

.upgrade-card[data-path="presence"] {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(156,255,34,0.13),
      transparent 42%
    ),
    rgba(6,10,5,0.96);
}

.upgrade-card[data-path="conviction"] {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(200,255,150,0.10),
      transparent 42%
    ),
    rgba(6,10,5,0.96);
}

.upgrade-card[data-path="influence"] {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(110,255,190,0.09),
      transparent 42%
    ),
    rgba(6,10,5,0.96);
}

.upgrade-card[data-path="core"] {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,255,255,0.055),
      transparent 42%
    ),
    rgba(6,10,5,0.96);
}

.upgrade-meta {
  position: relative;
  z-index: 2;

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

  gap: 8px;
}

.upgrade-path-label,
.upgrade-tier {
  display: inline-flex;

  min-height: 24px;

  align-items: center;

  padding:
    0
    8px;

  border:
    1px solid
    rgba(156,255,34,0.12);

  border-radius: 999px;

  color:
    rgba(245,248,241,0.45);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.upgrade-path-label {
  color:
    var(--game-green);
}

.upgrade-card > strong {
  position: relative;
  z-index: 2;

  margin-top: 44px;
}

.upgrade-card > p {
  position: relative;
  z-index: 2;
}

.upgrade-stack {
  position: relative;
  z-index: 2;

  display: block;

  margin-top: auto;
  padding-top: 22px;

  color:
    rgba(245,248,241,0.27);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.upgrade-card.is-ascended {
  border-color:
    rgba(156,255,34,0.34);

  box-shadow:
    inset 0 0 40px
    rgba(156,255,34,0.04),
    0 0 30px
    rgba(156,255,34,0.035);
}

.upgrade-card.is-ascended::before {
  content: "ASCENDED";

  position: absolute;

  right: 16px;
  bottom: 15px;

  color:
    rgba(156,255,34,0.14);

  font-size: 17px;
  font-weight: 950;
  letter-spacing: -0.03em;
}


/* ==========================================================
   PATH RESPONSE
   ========================================================== */

.game-shell.build-presence-dominant::before,
.game-shell.build-conviction-dominant::before,
.game-shell.build-influence-dominant::before {
  content: "";

  position: absolute;
  z-index: 7;

  inset: 0;

  pointer-events: none;

  opacity: 0.12;
}

.game-shell.build-presence-dominant::before {
  background:
    radial-gradient(
      circle at center,
      rgba(156,255,34,0.12),
      transparent 48%
    );
}

.game-shell.build-conviction-dominant::before {
  background:
    radial-gradient(
      circle at center,
      transparent 32%,
      rgba(190,255,130,0.08) 60%,
      transparent 78%
    );
}

.game-shell.build-influence-dominant::before {
  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(120,255,190,0.045),
      transparent 72%
    );
}


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

@media (max-width: 900px) {
  .build-strip {
    top: 165px;
  }
}

@media (max-width: 760px) {
  .build-strip {
    display: none;
  }

  .upgrade-card > strong {
    margin-top: 26px;
  }

  .upgrade-stack {
    padding-top: 14px;
  }
}

/* AURA ASCENSION BUILD SYSTEM V3 END */

/* AURA ASCENSION PRESSURE V4 START */


/* ==========================================================
   BOSS PHASE HUD
   ========================================================== */

.boss-copy > div {
  min-width: 0;
}

.boss-copy > div > span {
  display: block;
}

.boss-copy > div > small {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,0.28);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.boss-shell {
  overflow: hidden;
}

.boss-shell::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,50,80,0.045),
      transparent
    );

  transform:
    translateX(-100%);

  animation:
    aura-boss-scan
    2.8s
    linear
    infinite;
}

@keyframes aura-boss-scan {
  to {
    transform:
      translateX(100%);
  }
}


/* ==========================================================
   PRESSURE HUD RESPONSE
   ========================================================== */

.hud-card:last-child {
  position: relative;
  overflow: hidden;
}

.hud-card:last-child::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(156,255,34,0.35),
      transparent
    );

  opacity: 0.55;
}


/* ==========================================================
   BOSS PHASE RESPONSE
   ========================================================== */

.game-shell.boss-phase-2 .boss-shell {
  border-color:
    rgba(255,82,115,0.40);

  box-shadow:
    0 0 28px
    rgba(255,40,80,0.08);
}

.game-shell.boss-phase-3 .boss-shell {
  border-color:
    rgba(255,40,75,0.58);

  box-shadow:
    0 0 36px
    rgba(255,25,70,0.15);
}

.game-shell.boss-phase-3 .game-vignette {
  box-shadow:
    inset 0 0 190px
    rgba(30,0,8,0.76);
}


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

@media (max-width: 760px) {
  .boss-copy strong {
    font-size: 8px;
  }

  .boss-copy > div > small {
    font-size: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boss-shell::before {
    animation: none;
  }
}

/* AURA ASCENSION PRESSURE V4 END */

/* AURA ASCENSION RUN V5 START */


/* ==========================================================
   SCORE HUD
   ========================================================== */

.game-hud {
  grid-template-columns:
    minmax(160px, 1.15fr)
    repeat(5, minmax(100px, 0.66fr));
}

.hud-score {
  position: relative;
}

.hud-score strong {
  color:
    var(--game-green);
}

.hud-score em {
  display: block;

  margin-top: 3px;

  color:
    rgba(245,248,241,0.25);

  font-size: 6px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.hud-score.is-combo {
  border-color:
    rgba(156,255,34,0.24);

  box-shadow:
    inset 0 0 24px
    rgba(156,255,34,0.035);
}

.hud-score.is-combo > span {
  text-shadow:
    0 0 10px
    rgba(156,255,34,0.35);
}


/* ==========================================================
   MILESTONE SIGNAL
   ========================================================== */

.milestone-signal {
  position: absolute;
  z-index: 36;

  left: 50%;
  top: 50%;

  width:
    min(
      calc(100% - 40px),
      460px
    );

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

  padding:
    25px
    28px;

  text-align: center;

  overflow: hidden;

  border:
    1px solid
    rgba(156,255,34,0.22);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(156,255,34,0.11),
      transparent 60%
    ),
    rgba(2,7,2,0.88);

  box-shadow:
    0 25px 70px
    rgba(0,0,0,0.36),
    0 0 40px
    rgba(156,255,34,0.05);

  backdrop-filter:
    blur(16px);

  pointer-events: none;
}

.milestone-signal[hidden] {
  display: none;
}

.milestone-signal::before {
  content: "";

  position: absolute;

  left: 10%;
  right: 10%;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--game-green),
      transparent
    );

  box-shadow:
    0 0 18px
    rgba(156,255,34,0.45);
}

.milestone-signal small {
  display: block;

  color:
    var(--game-green);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.milestone-signal strong {
  display: block;

  margin-top: 7px;

  color:
    var(--game-text);

  font-size:
    clamp(32px, 4vw, 48px);

  line-height: 1;
  letter-spacing: -0.045em;
}

.milestone-signal p {
  margin:
    9px
    auto
    0;

  max-width: 330px;

  color:
    var(--game-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* ==========================================================
   RESULT GRID
   ========================================================== */

.result-grid-v2 {
  width:
    min(
      100%,
      840px
    );

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

.result-grid-v2 strong,
.victory-results strong {
  font-size: 18px;
}


/* ==========================================================
   VICTORY / ASCENSION
   ========================================================== */

.victory-overlay {
  position: absolute;
  z-index: 60;

  inset: 0;

  display: grid;
  place-content: center;
  justify-items: center;

  padding: 28px;

  overflow: hidden;

  text-align: center;

  background:
    radial-gradient(
      circle at center,
      rgba(53,105,24,0.42),
      rgba(4,12,3,0.95) 46%,
      #010301 78%
    );

  backdrop-filter:
    blur(12px);
}

.victory-overlay[hidden] {
  display: none;
}

.victory-overlay::before,
.victory-overlay::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: min(70vw, 760px);
  aspect-ratio: 1;

  border:
    1px solid
    rgba(156,255,34,0.12);

  border-radius: 50%;

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

  pointer-events: none;
}

.victory-overlay::before {
  animation:
    aura-victory-orbit
    16s
    linear
    infinite;
}

.victory-overlay::after {
  width: min(52vw, 560px);

  border-style: dashed;

  opacity: 0.65;

  animation:
    aura-victory-orbit-reverse
    11s
    linear
    infinite;
}

.victory-overlay > * {
  position: relative;
  z-index: 2;
}

.victory-overlay > p {
  margin:
    0
    0
    16px;

  color:
    var(--game-green);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.victory-overlay h2 {
  max-width: 900px;

  margin: 0;

  color:
    var(--game-text);

  font-size:
    clamp(45px, 6.2vw, 90px);

  line-height: 0.92;
  letter-spacing: -0.058em;
}

.victory-overlay h2 em {
  display: block;

  color:
    var(--game-green);

  font-style: normal;
}

.victory-signal {
  margin-top: 23px;

  display: inline-flex;
  align-items: center;

  gap: 8px;

  min-height: 32px;

  padding:
    0
    12px;

  border:
    1px solid
    rgba(156,255,34,0.17);

  border-radius: 999px;

  background:
    rgba(156,255,34,0.045);

  color:
    rgba(245,248,241,0.55);

  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.victory-signal span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--game-green);

  box-shadow:
    0 0 14px
    var(--game-green);
}

.victory-results {
  width:
    min(
      100%,
      720px
    );

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

  margin-top: 26px;
}

.victory-actions {
  margin-top: 2px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.victory-secondary {
  min-height: 50px;

  display: inline-flex;
  align-items: center;

  padding:
    0
    20px;

  border:
    1px solid
    rgba(255,255,255,0.09);

  border-radius: 999px;

  color:
    rgba(245,248,241,0.62);

  text-decoration: none;

  font-size: 12px;
  font-weight: 850;
}

.victory-secondary:hover {
  border-color:
    rgba(156,255,34,0.22);

  color:
    var(--game-text);
}

.game-shell.is-ascended .game-vignette {
  box-shadow:
    inset 0 0 220px
    rgba(73,160,25,0.16);
}

.game-shell.is-ascended .game-scanlines {
  opacity: 0.035;
}

@keyframes aura-victory-orbit {
  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }
}

@keyframes aura-victory-orbit-reverse {
  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .game-hud {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .build-strip {
    top: 166px;
  }
}

@media (max-width: 760px) {
  .game-hud {
    grid-template-columns:
      1fr
      1fr;
  }

  .hud-card:nth-child(5) {
    display: none;
  }

  .result-grid-v2,
  .victory-results {
    grid-template-columns:
      1fr
      1fr;
  }

  .result-grid-v2 > div:last-child {
    grid-column:
      1 / -1;
  }

  .victory-overlay h2 {
    font-size:
      clamp(40px, 12vw, 62px);
  }

  .victory-actions {
    width: 100%;

    flex-direction: column;
  }

  .victory-actions > * {
    width: 100%;

    justify-content: center;
  }

  .milestone-signal {
    padding:
      22px
      18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .victory-overlay::before,
  .victory-overlay::after {
    animation: none;
  }
}

/* AURA ASCENSION RUN V5 END */

/* AURA ASCENSION GAME FEEL V6 START */


/* ==========================================================
   WORLD STAGE INDICATOR
   ========================================================== */

.world-stage-indicator {
  position: absolute;
  z-index: 23;

  left: 20px;
  bottom: 40px;

  min-width: 150px;

  padding:
    9px
    11px;

  border:
    1px solid
    rgba(156,255,34,0.08);

  border-radius: 11px;

  background:
    rgba(2,7,2,0.58);

  backdrop-filter:
    blur(10px);

  pointer-events: none;
}

.world-stage-indicator small {
  display: block;

  color:
    rgba(245,248,241,0.25);

  font-size: 6px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.world-stage-indicator strong {
  display: block;

  margin-top: 4px;

  color:
    var(--game-green);

  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}


/* ==========================================================
   IMPACT FLASH
   ========================================================== */

.game-impact-flash {
  position: absolute;
  z-index: 31;

  inset: 0;

  opacity: 0;

  pointer-events: none;
}

.game-impact-flash.is-hit {
  animation:
    aura-hit-feedback
    220ms
    ease-out;
}

.game-impact-flash.is-pulse {
  animation:
    aura-pulse-feedback
    300ms
    ease-out;
}

.game-impact-flash.is-boss {
  animation:
    aura-boss-feedback
    620ms
    ease-out;
}

.game-impact-flash.is-stage {
  animation:
    aura-stage-feedback
    520ms
    ease-out;
}

.game-impact-flash.is-ascend {
  animation:
    aura-ascend-feedback
    900ms
    ease-out;
}

@keyframes aura-hit-feedback {
  0% {
    opacity: 0.45;

    background:
      radial-gradient(
        circle at center,
        transparent 25%,
        rgba(255,45,65,0.22) 100%
      );
  }

  100% {
    opacity: 0;
  }
}

@keyframes aura-pulse-feedback {
  0% {
    opacity: 0.32;

    background:
      radial-gradient(
        circle at center,
        rgba(156,255,34,0.15),
        transparent 62%
      );
  }

  100% {
    opacity: 0;
  }
}

@keyframes aura-boss-feedback {
  0% {
    opacity: 0.38;

    background:
      radial-gradient(
        circle at center,
        rgba(255,40,80,0.16),
        rgba(25,0,8,0.28)
      );
  }

  100% {
    opacity: 0;
  }
}

@keyframes aura-stage-feedback {
  0% {
    opacity: 0.26;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(156,255,34,0.16),
        transparent
      );
  }

  100% {
    opacity: 0;
  }
}

@keyframes aura-ascend-feedback {
  0% {
    opacity: 0.75;

    background:
      radial-gradient(
        circle at center,
        rgba(220,255,190,0.58),
        rgba(156,255,34,0.16) 42%,
        transparent 78%
      );
  }

  100% {
    opacity: 0;
  }
}


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

.game-canvas {
  transition:
    filter
    900ms
    ease;
}

.game-shell.world-stage-1 .game-canvas {
  filter:
    saturate(0.95)
    contrast(1);
}

.game-shell.world-stage-2 .game-canvas {
  filter:
    saturate(1.03)
    contrast(1.015);
}

.game-shell.world-stage-3 .game-canvas {
  filter:
    saturate(1.08)
    contrast(1.025);
}

.game-shell.world-stage-4 .game-canvas {
  filter:
    saturate(1.13)
    contrast(1.035);
}

.game-shell.world-stage-5 .game-canvas {
  filter:
    saturate(1.22)
    contrast(1.05);
}

.game-shell.world-stage-2 .game-scanlines {
  opacity: 0.115;
}

.game-shell.world-stage-3 .game-scanlines {
  opacity: 0.13;
}

.game-shell.world-stage-4 .game-scanlines {
  opacity: 0.105;
}

.game-shell.world-stage-5 .game-scanlines {
  opacity: 0.055;
}

.game-shell.world-stage-2
.world-stage-indicator {
  border-color:
    rgba(156,255,34,0.12);
}

.game-shell.world-stage-3
.world-stage-indicator {
  border-color:
    rgba(175,110,255,0.16);
}

.game-shell.world-stage-4
.world-stage-indicator {
  border-color:
    rgba(255,185,80,0.15);
}

.game-shell.world-stage-5
.world-stage-indicator {
  border-color:
    rgba(200,255,160,0.27);

  box-shadow:
    0 0 28px
    rgba(156,255,34,0.05);
}


/* ==========================================================
   BOSS ENTRANCE
   ========================================================== */

.game-shell.boss-entering
.boss-shell {
  animation:
    aura-boss-arrival
    720ms
    cubic-bezier(
      0.16,
      1,
      0.3,
      1
    );
}

@keyframes aura-boss-arrival {
  0% {
    opacity: 0;

    transform:
      translateX(-50%)
      scale(0.92);

    filter:
      blur(8px);
  }

  55% {
    opacity: 1;
  }

  100% {
    transform:
      translateX(-50%)
      scale(1);

    filter:
      blur(0);
  }
}


/* ==========================================================
   PLAYER DAMAGE RESPONSE
   ========================================================== */

.game-shell.player-hit
.game-vignette {
  animation:
    aura-vignette-hit
    260ms
    ease-out;
}

@keyframes aura-vignette-hit {
  0% {
    box-shadow:
      inset 0 0 170px
      rgba(255,25,55,0.34);
  }

  100% {
    box-shadow:
      inset 0 0 180px
      rgba(0,0,0,0.66);
  }
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1100px) {
  .world-stage-indicator {
    bottom: 38px;
  }
}

@media (max-width: 760px) {
  .world-stage-indicator {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-impact-flash,
  .game-shell.boss-entering
  .boss-shell,
  .game-shell.player-hit
  .game-vignette {
    animation: none !important;
  }

  .game-canvas {
    transition: none;
  }
}

/* AURA ASCENSION GAME FEEL V6 END */

/* AURA_WALLET_GATE_V1 */

.wallet-gate {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(122, 255, 0, 0.1),
      rgba(3, 8, 3, 0.94) 42%,
      rgba(1, 4, 2, 0.985) 74%
    );
  backdrop-filter: blur(8px);
  transition:
    opacity 320ms ease,
    visibility 320ms ease;
}

.wallet-gate[hidden] {
  display: none !important;
}

.wallet-gate.is-unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.wallet-gate-panel {
  position: relative;
  width: min(560px, 100%);
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(149, 255, 56, 0.22);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(11, 22, 10, 0.98),
      rgba(3, 8, 4, 0.98)
    );
  box-shadow:
    0 0 0 1px rgba(149, 255, 56, 0.03) inset,
    0 28px 90px rgba(0, 0, 0, 0.62),
    0 0 70px rgba(116, 255, 0, 0.08);
}

.wallet-gate-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(151, 255, 51, 0.04),
      transparent
    );
  transform: translateX(-100%);
  animation:
    wallet-gate-scan 5s linear infinite;
}

.wallet-gate-signal {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  border: 1px solid rgba(149, 255, 56, 0.32);
  border-radius: 50%;
  box-shadow:
    0 0 30px rgba(126, 255, 0, 0.12);
}

.wallet-gate-signal span,
.wallet-gate-signal i {
  position: absolute;
  border-radius: 50%;
}

.wallet-gate-signal span {
  inset: 9px;
  border: 1px solid rgba(149, 255, 56, 0.52);
}

.wallet-gate-signal i {
  inset: 25px;
  background: #8dff19;
  box-shadow:
    0 0 12px #8dff19,
    0 0 30px rgba(141, 255, 25, 0.72);
}

.wallet-gate-kicker {
  margin: 0 0 10px;
  color: #8dff19;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.wallet-gate h2 {
  margin: 0;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.wallet-gate h2 em {
  display: block;
  color: #8dff19;
  font-style: normal;
}

.wallet-gate-copy {
  max-width: 460px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 14px;
  line-height: 1.65;
}

.wallet-gate-copy strong {
  color: #fff;
}

.wallet-gate-status {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 0;
}

.wallet-gate-status > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.wallet-gate-status small {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.wallet-gate-status strong {
  display: block;
  overflow: hidden;
  color: #dfffc7;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-gate-message {
  min-height: 20px;
  margin: 18px 0 12px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.wallet-gate-message[data-state="pending"] {
  color: #d8ffb8;
}

.wallet-gate-message[data-state="success"] {
  color: #8dff19;
}

.wallet-gate-message[data-state="error"] {
  color: #ff7e7e;
}

.wallet-connect-button {
  width: 100%;
  min-height: 52px;
}

.wallet-connect-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.wallet-gate-note {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.28);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}

@keyframes wallet-gate-scan {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@media (max-width: 680px) {
  .wallet-gate {
    padding: 14px;
  }

  .wallet-gate-panel {
    padding: 24px 18px;
  }

  .wallet-gate-status {
    grid-template-columns: 1fr;
  }

  .wallet-gate-status > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .wallet-gate-status small {
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wallet-gate-panel::before {
    animation: none;
  }
}

/* AURA_WALLET_GATE_V1_1 */

.wallet-gate-panel {
  padding: 42px;
}

.wallet-gate h2 {
  margin-bottom: 0;
}

.wallet-gate-copy {
  max-width: 510px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.75;
}

.wallet-gate-copy strong {
  color: #fff;
  font-weight: 800;
}

.wallet-gate-status {
  gap: 10px;
  margin-top: 30px;
}

.wallet-gate-status > div {
  padding: 15px 16px;
}

.wallet-gate-status strong {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.wallet-gate-message {
  margin-top: 22px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.wallet-gate-actions {
  display: grid;
  gap: 10px;
}

.wallet-buy-button,
.wallet-connect-button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  text-decoration: none;
}

.wallet-buy-button {
  border: 0;
  background: #8dff19;
  color: #071000;
  font-weight: 900;
  box-shadow:
    0 0 24px rgba(141, 255, 25, 0.18);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.wallet-buy-button:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 32px rgba(141, 255, 25, 0.26);
}

.wallet-connect-button.is-secondary {
  border: 1px solid rgba(141, 255, 25, 0.28);
  background: rgba(141, 255, 25, 0.055);
  color: #dfffca;
  box-shadow: none;
}

.wallet-buy-help {
  margin: 13px auto 0;
  max-width: 390px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 10px;
  line-height: 1.55;
  text-align: center;
}

.wallet-buy-button[hidden],
.wallet-buy-help[hidden] {
  display: none !important;
}

.wallet-gate-note {
  margin-top: 16px;
}

@media (max-width: 680px) {
  .wallet-gate-panel {
    padding: 28px 20px;
  }

  .wallet-gate-copy {
    margin-top: 24px;
  }

  .wallet-gate-status {
    margin-top: 24px;
  }
}