/*
|--------------------------------------------------------------------------
| DIGITALBEANZ — ADVANCED EXPANSION STYLES
|--------------------------------------------------------------------------
|
| File: public/styles2.css
|
| This file styles everything created by script2.js:
|
| - Genetic profile panel
| - Advanced Bean controls
| - New egg themes
| - New body shapes
| - New head shapes
| - New eye styles
| - New horn styles
| - New wing styles
| - New core shapes
| - Markings
| - Auras
| - Mutations
| - Particle effects
| - Awaken and scan animations
|
| Load this file after style.css.
|
*/


/*
|--------------------------------------------------------------------------
| Shared advanced variables
|--------------------------------------------------------------------------
*/

:root {
  --advanced-effect-size: 8px;
  --advanced-effect-opacity: 0.8;
  --advanced-effect-speed: 4s;
}


/*
|--------------------------------------------------------------------------
| Genetic profile panel
|--------------------------------------------------------------------------
*/

.genetics-heading {
  margin-top: 4px;
}

.genetics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.genetic-reading {
  position: relative;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.04),
      rgba(255, 255, 255, 0.012)
    );
  overflow: hidden;
}

.genetic-reading::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background:
    radial-gradient(
      circle at top right,
      color-mix(
        in srgb,
        var(--primary) 13%,
        transparent
      ),
      transparent 65%
    );
}

.genetic-reading label {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.genetic-reading strong {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
  text-transform: capitalize;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.advanced-scan-flash {
  animation: advancedScanFlash 1.2s ease;
}


/*
|--------------------------------------------------------------------------
| Advanced controls
|--------------------------------------------------------------------------
*/

.advanced-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.advanced-controls .action-button {
  min-height: 74px;
}

.advanced-controls .action-icon {
  color: var(--primary);
  text-shadow:
    0 0 8px var(--glow),
    0 0 18px var(--glow);
}


/*
|--------------------------------------------------------------------------
| Automatically created visual layers
|--------------------------------------------------------------------------
*/

.genetic-markings,
.bean-accessories,
.advanced-aura-layer,
.advanced-particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.genetic-markings {
  z-index: 6;
  overflow: visible;
}

.bean-accessories {
  z-index: 8;
  overflow: visible;
  transform-style: preserve-3d;
}

.advanced-aura-layer {
  z-index: -1;
  overflow: visible;
  border-radius: 50%;
  transform: translateZ(-10px);
}

.advanced-particle-layer {
  z-index: 12;
  overflow: visible;
}


/*
|--------------------------------------------------------------------------
| Body genes
|--------------------------------------------------------------------------
*/

.gene-body-round .creature-body {
  inset: 24% 26% 15%;
  border-radius: 50%;
}

.gene-body-tall .creature-body {
  inset: 18% 32% 8%;
  border-radius:
    46% 54% 42% 58% /
    34% 36% 64% 66%;
}

.gene-body-wide .creature-body {
  inset: 31% 17% 18%;
  border-radius:
    58% 42% 50% 50% /
    44% 44% 56% 56%;
}

.gene-body-crystal .creature-body {
  inset: 23% 27% 13%;
  border-radius: 10%;
  clip-path:
    polygon(
      50% 0%,
      84% 13%,
      100% 48%,
      82% 88%,
      50% 100%,
      18% 88%,
      0% 48%,
      16% 13%
    );
}

.gene-body-armoured .creature-body {
  border-width: 2px;
  border-color:
    color-mix(
      in srgb,
      var(--secondary) 82%,
      transparent
    );
  box-shadow:
    inset 0 0 0 7px
      color-mix(
        in srgb,
        var(--primary) 9%,
        transparent
      ),
    inset 0 0 0 14px
      rgba(0, 0, 0, 0.2),
    inset 12px 12px 24px
      rgba(255, 255, 255, 0.1),
    inset -16px -20px 30px
      rgba(0, 0, 0, 0.75),
    0 0 32px
      color-mix(
        in srgb,
        var(--glow) 46%,
        transparent
      );
}

.gene-body-armoured .creature-body::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid
    color-mix(
      in srgb,
      var(--primary) 34%,
      transparent
    );
  border-radius: inherit;
  clip-path:
    polygon(
      50% 0,
      100% 23%,
      86% 100%,
      14% 100%,
      0 23%
    );
}

.gene-body-slender .creature-body {
  inset: 18% 35% 10%;
  border-radius:
    42% 58% 40% 60% /
    28% 28% 72% 72%;
}

.gene-body-orbital .creature-body {
  inset: 26%;
  border-radius: 50%;
  box-shadow:
    inset 10px 10px 24px
      rgba(255, 255, 255, 0.14),
    inset -18px -20px 34px
      rgba(0, 0, 0, 0.82),
    0 0 22px var(--glow),
    0 0 52px
      color-mix(
        in srgb,
        var(--glow) 32%,
        transparent
      );
}

.gene-body-ancient .creature-body {
  inset: 25% 25% 13%;
  border-radius:
    38% 62% 55% 45% /
    52% 42% 58% 48%;
  filter:
    saturate(0.72)
    contrast(1.08);
}

.gene-body-ancient .creature-body::after {
  content: "";
  position: absolute;
  inset: 12%;
  opacity: 0.5;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 13px,
      color-mix(
        in srgb,
        var(--secondary) 18%,
        transparent
      ) 14px 15px
    );
}


/*
|--------------------------------------------------------------------------
| Head genes
|--------------------------------------------------------------------------
*/

.gene-head-orb .creature-head {
  border-radius: 50%;
}

.gene-head-angular .creature-head {
  border-radius: 12%;
  clip-path:
    polygon(
      20% 0,
      80% 0,
      100% 34%,
      84% 100%,
      16% 100%,
      0 34%
    );
}

.gene-head-crown .creature-head {
  top: 8%;
  height: 46%;
  clip-path:
    polygon(
      0 32%,
      15% 4%,
      32% 25%,
      50% 0,
      68% 25%,
      85% 4%,
      100% 32%,
      90% 100%,
      10% 100%
    );
}

.gene-head-mask .creature-head {
  left: 28%;
  width: 44%;
  height: 48%;
  border-radius:
    34% 34% 52% 52% /
    22% 22% 78% 78%;
}

.gene-head-ancient .creature-head {
  top: 8%;
  height: 48%;
  border-radius:
    50% 50% 34% 34% /
    40% 40% 60% 60%;
  filter:
    saturate(0.7)
    contrast(1.1);
}

.gene-head-split .creature-head {
  clip-path:
    polygon(
      0 15%,
      44% 0,
      48% 42%,
      52% 42%,
      56% 0,
      100% 15%,
      88% 100%,
      12% 100%
    );
}

.gene-head-diamond .creature-head {
  top: 10%;
  left: 25%;
  width: 50%;
  height: 48%;
  border-radius: 8%;
  clip-path:
    polygon(
      50% 0,
      100% 45%,
      70% 100%,
      30% 100%,
      0 45%
    );
}

.gene-head-guardian .creature-head {
  top: 8%;
  left: 22%;
  width: 56%;
  height: 47%;
  border-radius:
    46% 54% 28% 28% /
    32% 32% 68% 68%;
  border-width: 2px;
}

.gene-head-guardian .creature-head::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -17%;
  width: 32%;
  height: 30%;
  border: 1px solid
    color-mix(
      in srgb,
      var(--primary) 55%,
      transparent
    );
  border-top: 0;
  transform: translateX(-50%);
  clip-path:
    polygon(
      0 0,
      100% 0,
      72% 100%,
      28% 100%
    );
  background:
    color-mix(
      in srgb,
      var(--primary) 12%,
      #07080e
    );
}


/*
|--------------------------------------------------------------------------
| Eye genes
|--------------------------------------------------------------------------
*/

.gene-eyes-normal .eye {
  width: 16%;
  height: 11%;
}

.gene-eyes-narrow .eye {
  top: 40%;
  width: 19%;
  height: 5%;
  border-radius: 30%;
}

.gene-eyes-large .eye {
  top: 34%;
  width: 22%;
  height: 19%;
}

.gene-eyes-vertical .eye {
  top: 29%;
  width: 7%;
  height: 25%;
  border-radius: 50%;
}

.gene-eyes-void .eye {
  border: 1px solid var(--secondary);
  background:
    radial-gradient(
      circle,
      var(--glow) 0 9%,
      #000 18% 55%,
      var(--primary) 72%,
      #000 100%
    );
  box-shadow:
    inset 0 0 9px var(--glow),
    0 0 10px var(--primary),
    0 0 28px var(--glow);
}

.gene-eyes-burning .eye {
  border-radius:
    65% 35% 70% 30%;
  background:
    radial-gradient(
      circle,
      white 0 12%,
      var(--secondary) 20%,
      var(--primary) 52%,
      transparent 74%
    );
  box-shadow:
    0 0 8px white,
    0 0 20px var(--primary),
    0 0 40px var(--glow);
  animation:
    advancedBurningEye
    0.75s
    ease-in-out
    infinite alternate;
}

.gene-eyes-triple .eye {
  width: 14%;
  height: 10%;
}

.gene-eyes-scanner .eye {
  top: 38%;
  width: 24%;
  height: 3px;
  border-radius: 999px;
  background: var(--secondary);
  box-shadow:
    0 0 8px var(--secondary),
    0 0 22px var(--glow);
  animation:
    advancedScannerEye
    1.6s
    ease-in-out
    infinite;
}

.advanced-third-eye {
  position: absolute;
  z-index: 10;
  top: 22%;
  left: 50%;
  width: 8%;
  height: 6%;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 8px white,
    0 0 18px var(--secondary),
    0 0 32px var(--glow);
  transform:
    translateX(-50%)
    translateZ(78px);
  animation:
    eyeBlink
    4s
    infinite;
}


/*
|--------------------------------------------------------------------------
| Horn genes
|--------------------------------------------------------------------------
*/

.gene-horns-none .horn {
  display: none;
}

.gene-horns-short .horn {
  top: 9%;
  height: 22%;
}

.gene-horns-curved .horn {
  width: 13%;
  height: 36%;
  border-radius:
    100% 10% 30% 12%;
}

.gene-horns-curved .horn-left {
  clip-path:
    polygon(
      72% 0,
      100% 10%,
      76% 42%,
      48% 70%,
      100% 100%,
      34% 82%,
      0 42%
    );
}

.gene-horns-curved .horn-right {
  clip-path:
    polygon(
      28% 0,
      0 10%,
      24% 42%,
      52% 70%,
      0 100%,
      66% 82%,
      100% 42%
    );
}

.gene-horns-crown .horn {
  top: 1%;
  width: 18%;
  height: 29%;
}

.gene-horns-antler .horn {
  width: 18%;
  height: 38%;
  clip-path:
    polygon(
      43% 100%,
      33% 64%,
      0 47%,
      37% 48%,
      23% 19%,
      50% 42%,
      53% 0,
      67% 41%,
      100% 25%,
      72% 57%,
      100% 61%,
      65% 68%,
      64% 100%
    );
}

.gene-horns-blade .horn {
  width: 10%;
  height: 42%;
  background:
    linear-gradient(
      to top,
      var(--primary),
      var(--secondary) 46%,
      white
    );
  clip-path:
    polygon(
      50% 0,
      100% 88%,
      65% 100%,
      0 88%
    );
}

.gene-horns-spiral .horn {
  width: 16%;
  height: 36%;
  border: 3px solid var(--primary);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: transparent;
  clip-path: none;
}

.gene-horns-halo .horn {
  display: none;
}

.advanced-halo {
  position: absolute;
  z-index: 4;
  top: 1%;
  left: 50%;
  width: 48%;
  height: 17%;
  border: 2px solid var(--secondary);
  border-radius: 50%;
  box-shadow:
    0 0 9px var(--secondary),
    0 0 26px var(--glow);
  transform:
    translateX(-50%)
    translateZ(65px)
    rotateX(68deg);
  animation:
    advancedHaloPulse
    2.2s
    ease-in-out
    infinite;
}


/*
|--------------------------------------------------------------------------
| Wing genes
|--------------------------------------------------------------------------
*/

.gene-wings-none .wing {
  display: none;
}

.gene-wings-blade .wing {
  border-radius: 2%;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--primary) 42%,
        transparent
      ),
      transparent
    );
}

.gene-wings-spectral .wing {
  opacity: 0.52 !important;
  border-style: dashed;
  filter:
    blur(1.4px)
    drop-shadow(0 0 12px var(--glow));
}

.gene-wings-angelic .wing {
  border-radius:
    70% 12% 70% 10%;
  background:
    repeating-linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.72) 0 4px,
      color-mix(
        in srgb,
        var(--primary) 22%,
        transparent
      ) 5px 11px,
      transparent 12px 18px
    );
  filter:
    drop-shadow(
      0 0 11px
      color-mix(
        in srgb,
        var(--glow) 60%,
        transparent
      )
    );
}

.gene-wings-demonic .wing {
  border-color:
    color-mix(
      in srgb,
      var(--danger) 80%,
      transparent
    );
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--danger) 34%,
        transparent
      ),
      rgba(0, 0, 0, 0.06)
    );
  box-shadow:
    0 0 26px
      color-mix(
        in srgb,
        var(--danger) 34%,
        transparent
      );
}

.gene-wings-crystal .wing {
  border-width: 2px;
  clip-path:
    polygon(
      100% 20%,
      65% 0,
      28% 18%,
      0 62%,
      38% 70%,
      20% 100%,
      100% 78%
    );
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.35),
      color-mix(
        in srgb,
        var(--primary) 22%,
        transparent
      )
    );
  backdrop-filter: blur(2px);
}

.gene-wings-energy .wing {
  border: 0;
  background:
    radial-gradient(
      ellipse at center,
      color-mix(
        in srgb,
        var(--secondary) 75%,
        transparent
      ),
      color-mix(
        in srgb,
        var(--primary) 26%,
        transparent
      ) 45%,
      transparent 72%
    );
  filter:
    blur(3px)
    drop-shadow(0 0 18px var(--glow));
  animation:
    advancedEnergyWing
    1.5s
    ease-in-out
    infinite alternate;
}

.gene-wings-orbital .wing {
  display: none;
}

.advanced-wing-orb {
  position: absolute;
  z-index: -2;
  top: 46%;
  width: 11%;
  aspect-ratio: 1;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      white,
      var(--secondary) 18%,
      var(--primary) 45%,
      transparent 72%
    );
  box-shadow:
    0 0 12px var(--secondary),
    0 0 30px var(--glow);
}

.advanced-wing-orb-left {
  left: 4%;
  animation:
    advancedOrbLeft
    3s
    ease-in-out
    infinite;
}

.advanced-wing-orb-right {
  right: 4%;
  animation:
    advancedOrbRight
    3s
    ease-in-out
    infinite;
}


/*
|--------------------------------------------------------------------------
| Core genes
|--------------------------------------------------------------------------
*/

.gene-core-diamond .core {
  border-radius: 0;
}

.gene-core-circle .core {
  border-radius: 50%;
}

.gene-core-triangle .core {
  border-radius: 0;
  clip-path:
    polygon(
      50% 0,
      100% 100%,
      0 100%
    );
}

.gene-core-star .core {
  border-radius: 0;
  clip-path:
    polygon(
      50% 0,
      61% 34%,
      98% 35%,
      68% 57%,
      79% 94%,
      50% 72%,
      21% 94%,
      32% 57%,
      2% 35%,
      39% 34%
    );
}

.gene-core-void .core {
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #000 0 28%,
      var(--secondary) 32%,
      var(--primary) 42%,
      #000 64%,
      var(--glow) 72%,
      transparent 76%
    );
  box-shadow:
    inset 0 0 12px #000,
    0 0 12px var(--secondary),
    0 0 38px var(--glow);
}

.gene-core-reactor .core {
  border-radius: 18%;
  background:
    repeating-conic-gradient(
      from 0deg,
      white 0 8deg,
      var(--secondary) 8deg 24deg,
      var(--primary) 24deg 38deg,
      #02030a 38deg 52deg
    );
  animation:
    advancedReactorCore
    1.25s
    linear
    infinite;
}

.gene-core-split .core {
  border-radius: 50%;
  background:
    linear-gradient(
      90deg,
      #63dfff 0 48%,
      #080912 48% 52%,
      #ff5d3c 52% 100%
    );
  box-shadow:
    -10px 0 22px #63dfff,
    10px 0 22px #ff5d3c;
}

.gene-core-eye .core {
  width: 30%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse,
      #000 0 12%,
      var(--secondary) 16% 28%,
      white 31% 38%,
      var(--primary) 48%,
      #05060a 72%
    );
  animation:
    advancedCoreEye
    3s
    ease-in-out
    infinite;
}


/*
|--------------------------------------------------------------------------
| Genetic markings
|--------------------------------------------------------------------------
*/

.genetic-mark {
  position: absolute;
  z-index: 8;
  width: 7%;
  aspect-ratio: 1;
  opacity: 0.65;
  transform:
    translateZ(74px)
    rotate(calc(var(--mark-index) * 27deg));
}

.genetic-mark-stripes {
  width: 2px;
  height: 20%;
  border-radius: 999px;
  background: var(--secondary);
  box-shadow:
    0 0 8px var(--glow);
}

.genetic-mark-runes {
  border: 1px solid var(--secondary);
  transform:
    translateZ(74px)
    rotate(45deg);
  box-shadow:
    0 0 8px var(--glow);
}

.genetic-mark-fracture {
  width: 2px;
  height: 18%;
  background: white;
  box-shadow:
    0 0 7px white,
    0 0 15px var(--glow);
  clip-path:
    polygon(
      0 0,
      100% 0,
      55% 32%,
      100% 34%,
      30% 68%,
      72% 70%,
      0 100%
    );
}

.genetic-mark-circuit {
  width: 13%;
  height: 2px;
  background: var(--primary);
  box-shadow:
    0 0 8px var(--glow);
}

.genetic-mark-circuit::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 7px;
  aspect-ratio: 1;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  transform: translateY(-50%);
}

.genetic-mark-spots {
  border-radius: 50%;
  background:
    color-mix(
      in srgb,
      var(--secondary) 70%,
      transparent
    );
  box-shadow:
    0 0 10px var(--glow);
}

.genetic-mark-ancient {
  width: 8%;
  border: 1px solid var(--primary);
  clip-path:
    polygon(
      50% 0,
      100% 50%,
      50% 100%,
      0 50%
    );
  opacity: 0.5;
}

.genetic-mark-pulse {
  border-radius: 50%;
  background: var(--secondary);
  box-shadow:
    0 0 7px var(--secondary),
    0 0 18px var(--glow);
  animation:
    advancedMarkPulse
    1.4s
    ease-in-out
    infinite;
}


/*
|--------------------------------------------------------------------------
| Body accessory ring
|--------------------------------------------------------------------------
*/

.advanced-body-ring {
  position: absolute;
  z-index: 4;
  top: 42%;
  left: 50%;
  width: 62%;
  height: 22%;
  border: 1px solid var(--secondary);
  border-radius: 50%;
  box-shadow:
    0 0 9px var(--secondary),
    0 0 25px var(--glow);
  transform:
    translateX(-50%)
    translateZ(28px)
    rotateX(70deg);
  animation:
    advancedBodyRing
    4s
    linear
    infinite;
}


/*
|--------------------------------------------------------------------------
| Aura genes
|--------------------------------------------------------------------------
*/

.gene-aura-soft {
  filter:
    drop-shadow(
      0 0 12px
      color-mix(
        in srgb,
        var(--glow) 35%,
        transparent
      )
    );
}

.gene-aura-storm {
  filter:
    drop-shadow(0 0 10px var(--glow))
    drop-shadow(
      0 0 24px
      color-mix(
        in srgb,
        var(--secondary) 65%,
        transparent
      )
    );
}

.gene-aura-storm .advanced-aura-layer {
  animation:
    advancedStormAura
    0.9s
    steps(2, end)
    infinite;
}

.gene-aura-mist .advanced-aura-layer {
  filter: blur(6px);
  opacity: 0.68;
}

.gene-aura-radiant {
  filter:
    brightness(1.12)
    drop-shadow(0 0 16px white)
    drop-shadow(0 0 34px var(--glow));
}

.gene-aura-fractured .advanced-aura-layer {
  animation:
    advancedFracturedAura
    1.2s
    steps(3, end)
    infinite;
}

.gene-aura-orbital .advanced-aura-layer {
  border: 1px solid
    color-mix(
      in srgb,
      var(--primary) 35%,
      transparent
    );
  border-radius: 50%;
  animation:
    advancedOrbitalAura
    5s
    linear
    infinite;
}

.gene-aura-flame {
  filter:
    drop-shadow(0 -8px 18px var(--primary))
    drop-shadow(0 -16px 34px var(--glow));
}

.gene-aura-flame .advanced-aura-layer {
  animation:
    advancedFlameAura
    0.65s
    ease-in-out
    infinite alternate;
}

.gene-aura-void {
  filter:
    contrast(1.22)
    drop-shadow(0 0 18px var(--glow));
}

.gene-aura-void .advanced-aura-layer {
  background:
    radial-gradient(
      circle,
      transparent 0 28%,
      rgba(0, 0, 0, 0.72) 36%,
      color-mix(
        in srgb,
        var(--primary) 24%,
        transparent
      ) 54%,
      transparent 72%
    );
  animation:
    advancedVoidAura
    2.5s
    ease-in-out
    infinite;
}


/*
|--------------------------------------------------------------------------
| Egg theme classes
|--------------------------------------------------------------------------
*/

.egg-theme-void {
  --primary: #7928ff;
  --secondary: #170025;
  --glow: #c14cff;
}

.egg-theme-void .egg {
  background:
    radial-gradient(
      circle at 38% 24%,
      rgba(255, 255, 255, 0.52),
      transparent 7%
    ),
    radial-gradient(
      circle at 50% 48%,
      #000 0 15%,
      #421077 32%,
      transparent 58%
    ),
    repeating-conic-gradient(
      from 20deg,
      #030007 0 17deg,
      #6a1b9a 17deg 30deg,
      #0a0012 30deg 48deg
    );
  box-shadow:
    inset -30px -32px 62px #000,
    inset 18px 18px 42px
      rgba(255, 255, 255, 0.08),
    0 0 30px #7928ff,
    0 0 90px
      rgba(193, 76, 255, 0.42);
}

.egg-theme-celestial {
  --primary: #fff0a8;
  --secondary: #5bdcff;
  --glow: #ffffff;
}

.egg-theme-celestial .egg {
  background:
    radial-gradient(
      circle at 35% 21%,
      white,
      transparent 8%
    ),
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.78),
      transparent 28%
    ),
    repeating-conic-gradient(
      from 0deg,
      #fff8cc 0 14deg,
      #64dfff 14deg 30deg,
      #edfaff 30deg 46deg
    );
  box-shadow:
    inset -24px -28px 54px
      rgba(60, 130, 180, 0.45),
    inset 18px 18px 38px white,
    0 0 30px white,
    0 0 90px
      rgba(91, 220, 255, 0.6);
}

.egg-theme-plasma {
  --primary: #ff35de;
  --secondary: #25e5ff;
  --glow: #ff70ef;
}

.egg-theme-plasma .egg {
  background:
    radial-gradient(
      circle at 34% 23%,
      white,
      transparent 7%
    ),
    repeating-conic-gradient(
      from 10deg,
      #ff1ad5 0 15deg,
      #1de7ff 15deg 30deg,
      #20002f 30deg 45deg
    );
  animation:
    eggBreathe 1.3s ease-in-out infinite,
    advancedPlasmaEgg 1.7s linear infinite;
}

.egg-theme-abyss {
  --primary: #006eff;
  --secondary: #001020;
  --glow: #00b7ff;
}

.egg-theme-abyss .egg {
  background:
    radial-gradient(
      circle at 36% 22%,
      rgba(120, 225, 255, 0.72),
      transparent 7%
    ),
    radial-gradient(
      ellipse at center,
      #00152c,
      #00040a 68%
    ),
    repeating-linear-gradient(
      130deg,
      transparent 0 15px,
      rgba(0, 183, 255, 0.28) 16px,
      transparent 18px 31px
    );
  box-shadow:
    inset -30px -30px 64px #000,
    inset 12px 12px 34px
      rgba(0, 183, 255, 0.18),
    0 0 25px #006eff,
    0 0 80px
      rgba(0, 183, 255, 0.38);
}

.egg-theme-solar {
  --primary: #ff9d00;
  --secondary: #fff078;
  --glow: #ff5100;
}

.egg-theme-solar .egg {
  background:
    radial-gradient(
      circle at 35% 23%,
      white,
      transparent 8%
    ),
    radial-gradient(
      circle at center,
      #fff078 0 8%,
      #ff9d00 26%,
      #a32600 54%,
      #180400 76%
    );
  box-shadow:
    inset -26px -30px 54px
      rgba(40, 0, 0, 0.7),
    inset 15px 15px 38px
      rgba(255, 255, 255, 0.25),
    0 0 26px #ff9d00,
    0 0 85px
      rgba(255, 81, 0, 0.52);
  animation:
    eggBreathe 1.4s ease-in-out infinite,
    advancedSolarEgg 1.1s ease-in-out infinite;
}

.egg-theme-toxic {
  --primary: #73ff00;
  --secondary: #173900;
  --glow: #b6ff00;
}

.egg-theme-toxic .egg {
  background:
    radial-gradient(
      circle at 33% 23%,
      rgba(255, 255, 255, 0.62),
      transparent 8%
    ),
    repeating-radial-gradient(
      circle at center,
      #b6ff00 0 7px,
      #173900 8px 15px,
      #061000 16px 24px
    );
  filter:
    saturate(1.5)
    contrast(1.2);
  animation:
    eggBreathe 1.1s ease-in-out infinite,
    advancedToxicEgg 2s steps(3, end) infinite;
}

.egg-theme-frostfire {
  --primary: #73dfff;
  --secondary: #ff563b;
  --glow: #d8f7ff;
}

.egg-theme-frostfire .egg {
  background:
    radial-gradient(
      circle at 35% 22%,
      white,
      transparent 7%
    ),
    linear-gradient(
      90deg,
      #73dfff 0 46%,
      #f5fbff 47% 50%,
      #ff563b 51% 100%
    );
  box-shadow:
    -20px 0 46px
      rgba(115, 223, 255, 0.65),
    20px 0 46px
      rgba(255, 86, 59, 0.58);
}

.egg-theme-shadow {
  --primary: #3b3f58;
  --secondary: #05060c;
  --glow: #7580bd;
}

.egg-theme-shadow .egg {
  background:
    radial-gradient(
      circle at 35% 23%,
      rgba(255, 255, 255, 0.28),
      transparent 7%
    ),
    repeating-conic-gradient(
      from 0deg,
      #03040a 0 20deg,
      #1d2030 20deg 36deg,
      #05060c 36deg 54deg
    );
  box-shadow:
    inset -32px -34px 68px #000,
    inset 14px 14px 34px
      rgba(117, 128, 189, 0.11),
    0 0 22px #3b3f58,
    0 0 62px
      rgba(117, 128, 189, 0.25);
}


/*
|--------------------------------------------------------------------------
| Mutation effects
|--------------------------------------------------------------------------
*/

.gene-mutation-stable {
  --mutation-active: 0;
}

.gene-mutation-unstable {
  animation:
    advancedMutationGlitch
    0.32s
    steps(2, end)
    infinite;
}

.gene-mutation-celestial {
  filter:
    brightness(1.22)
    drop-shadow(0 0 14px white)
    drop-shadow(0 0 32px var(--glow));
}

.gene-mutation-voidborn {
  filter:
    contrast(1.35)
    saturate(1.25)
    drop-shadow(0 0 18px var(--glow));
  animation:
    advancedVoidbornGlitch
    1.1s
    steps(3, end)
    infinite;
}

.advanced-void-fracture {
  position: absolute;
  z-index: 20;
  inset: 13%;
  opacity: 0.82;
  background:
    repeating-linear-gradient(
      116deg,
      transparent 0 17px,
      rgba(255, 255, 255, 0.75) 18px,
      transparent 20px 34px
    );
  mix-blend-mode: screen;
  clip-path:
    polygon(
      48% 0,
      55% 27%,
      46% 42%,
      59% 55%,
      42% 75%,
      52% 100%,
      37% 77%,
      49% 55%,
      39% 42%,
      49% 26%
    );
  filter:
    drop-shadow(0 0 5px white)
    drop-shadow(0 0 13px var(--glow));
}


/*
|--------------------------------------------------------------------------
| Aura burst and awaken interactions
|--------------------------------------------------------------------------
*/

.advanced-aura-burst {
  animation:
    advancedAuraBurst
    1.6s
    ease-out;
}

.advanced-awaken {
  animation:
    advancedAwaken
    1.8s
    cubic-bezier(0.16, 1, 0.3, 1);
}

.advanced-rig-response {
  animation:
    advancedRigResponse
    1.8s
    ease;
}


/*
|--------------------------------------------------------------------------
| Passive particles
|--------------------------------------------------------------------------
*/

.advanced-passive-particle {
  position: absolute;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.65;
  background: var(--secondary);
  box-shadow:
    0 0 7px var(--secondary),
    0 0 16px var(--glow);
  animation:
    advancedPassiveFloat
    calc(
      2.6s +
      (var(--passive-index) * 0.18s)
    )
    ease-in-out
    infinite;
}

.passive-void {
  background: #000;
  border: 1px solid var(--primary);
}

.passive-stars {
  border-radius: 0;
  background: white;
  transform: rotate(45deg);
}

.passive-plasma {
  background: var(--secondary);
  animation-name:
    advancedPassiveFloat,
    advancedPlasmaParticle;
}

.passive-mist {
  width: 14px;
  filter: blur(5px);
  opacity: 0.28;
}

.passive-embers {
  width: 4px;
  background: #fff078;
  box-shadow:
    0 0 8px #ff9d00,
    0 0 18px #ff5100;
}

.passive-toxic {
  width: 7px;
  background: #b6ff00;
}

.passive-frostfire:nth-child(odd) {
  background: #73dfff;
  box-shadow:
    0 0 9px #73dfff;
}

.passive-frostfire:nth-child(even) {
  background: #ff563b;
  box-shadow:
    0 0 9px #ff563b;
}

.passive-shadow {
  background: #151827;
  border: 1px solid #7580bd;
  opacity: 0.42;
}


/*
|--------------------------------------------------------------------------
| Burst particles
|--------------------------------------------------------------------------
*/

.advanced-effect-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--particle-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow:
    0 0 8px var(--secondary),
    0 0 20px var(--glow);
  transform:
    translate(-50%, -50%);
  animation:
    advancedParticleBurst
    1.55s
    cubic-bezier(0.16, 1, 0.3, 1)
    var(--particle-delay)
    forwards;
}

.particle-void {
  background: #000;
  border: 1px solid var(--primary);
}

.particle-stars {
  border-radius: 0;
  background: white;
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

.particle-plasma {
  background:
    linear-gradient(
      135deg,
      #ff35de,
      #25e5ff
    );
}

.particle-mist {
  width:
    calc(var(--particle-size) * 2);
  filter: blur(5px);
  opacity: 0.45;
}

.particle-embers {
  background: #fff078;
  box-shadow:
    0 0 8px #ff9d00,
    0 0 22px #ff5100;
}

.particle-toxic {
  background: #b6ff00;
}

.particle-frostfire:nth-child(odd) {
  background: #73dfff;
  box-shadow:
    0 0 10px #73dfff;
}

.particle-frostfire:nth-child(even) {
  background: #ff563b;
  box-shadow:
    0 0 10px #ff563b;
}

.particle-shadow {
  background: #11131e;
  border: 1px solid #7580bd;
}


/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/

@keyframes advancedScanFlash {
  0% {
    filter: brightness(1);
  }

  20% {
    filter:
      brightness(1.9)
      drop-shadow(0 0 14px var(--glow));
  }

  45% {
    transform: translateX(2px);
  }

  70% {
    transform: translateX(-2px);
  }

  100% {
    filter: brightness(1);
    transform: translateX(0);
  }
}

@keyframes advancedBurningEye {
  from {
    transform: scale(0.92);
    filter: brightness(0.85);
  }

  to {
    transform: scale(1.08);
    filter: brightness(1.55);
  }
}

@keyframes advancedScannerEye {
  0%,
  100% {
    opacity: 0.55;
    transform: scaleX(0.72);
  }

  50% {
    opacity: 1;
    transform: scaleX(1.15);
  }
}

@keyframes advancedHaloPulse {
  0%,
  100% {
    opacity: 0.62;
    scale: 0.92;
  }

  50% {
    opacity: 1;
    scale: 1.08;
  }
}

@keyframes advancedEnergyWing {
  from {
    opacity: 0.42;
    filter:
      blur(4px)
      brightness(0.9);
  }

  to {
    opacity: 0.88;
    filter:
      blur(2px)
      brightness(1.55);
  }
}

@keyframes advancedOrbLeft {
  0%,
  100% {
    transform:
      translate3d(0, -12px, 18px)
      scale(0.8);
  }

  50% {
    transform:
      translate3d(-18px, 18px, 38px)
      scale(1.15);
  }
}

@keyframes advancedOrbRight {
  0%,
  100% {
    transform:
      translate3d(0, 12px, 18px)
      scale(1.05);
  }

  50% {
    transform:
      translate3d(18px, -18px, 38px)
      scale(0.78);
  }
}

@keyframes advancedReactorCore {
  to {
    transform:
      translate(-50%, -50%)
      translateZ(70px)
      rotate(405deg);
  }
}

@keyframes advancedCoreEye {
  0%,
  42%,
  48%,
  100% {
    scale: 1 1;
  }

  45% {
    scale: 1 0.1;
  }
}

@keyframes advancedMarkPulse {
  0%,
  100% {
    opacity: 0.35;
    scale: 0.7;
  }

  50% {
    opacity: 1;
    scale: 1.22;
  }
}

@keyframes advancedBodyRing {
  to {
    rotate: 360deg;
  }
}

@keyframes advancedStormAura {
  0%,
  100% {
    translate: 0;
    filter: brightness(1);
  }

  25% {
    translate: 2px -1px;
    filter: brightness(1.5);
  }

  50% {
    translate: -2px 2px;
  }

  75% {
    translate: 1px -2px;
  }
}

@keyframes advancedFracturedAura {
  0%,
  100% {
    clip-path:
      polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%
      );
  }

  35% {
    clip-path:
      polygon(
        0 8%,
        100% 0,
        92% 100%,
        5% 94%
      );
  }

  70% {
    clip-path:
      polygon(
        4% 0,
        95% 7%,
        100% 92%,
        0 100%
      );
  }
}

@keyframes advancedOrbitalAura {
  to {
    transform:
      translateZ(-10px)
      rotate(360deg);
  }
}

@keyframes advancedFlameAura {
  from {
    translate: 0 4px;
    scale: 0.94;
    filter: blur(6px);
  }

  to {
    translate: 0 -9px;
    scale: 1.1;
    filter: blur(2px);
  }
}

@keyframes advancedVoidAura {
  0%,
  100% {
    opacity: 0.58;
    scale: 0.88;
  }

  50% {
    opacity: 1;
    scale: 1.16;
  }
}

@keyframes advancedPlasmaEgg {
  to {
    filter:
      hue-rotate(360deg)
      saturate(1.3);
  }
}

@keyframes advancedSolarEgg {
  0%,
  100% {
    filter:
      brightness(0.95)
      saturate(1.2);
  }

  50% {
    filter:
      brightness(1.45)
      saturate(1.6);
  }
}

@keyframes advancedToxicEgg {
  0%,
  100% {
    filter:
      saturate(1.4)
      hue-rotate(0deg);
  }

  50% {
    filter:
      saturate(1.8)
      hue-rotate(18deg)
      brightness(1.25);
  }
}

@keyframes advancedMutationGlitch {
  0%,
  100% {
    translate: 0;
    filter: none;
  }

  18% {
    translate: 2px -1px;
    filter:
      hue-rotate(32deg)
      brightness(1.28);
  }

  36% {
    translate: -3px 1px;
  }

  54% {
    translate: 1px 2px;
    filter:
      contrast(1.45)
      saturate(1.4);
  }

  72% {
    translate: -1px -2px;
  }
}

@keyframes advancedVoidbornGlitch {
  0%,
  100% {
    opacity: 1;
    translate: 0;
  }

  20% {
    opacity: 0.7;
    translate: -3px 1px;
  }

  40% {
    opacity: 1;
    translate: 4px -1px;
  }

  60% {
    filter:
      invert(0.1)
      hue-rotate(45deg);
  }

  80% {
    translate: -2px -2px;
  }
}

@keyframes advancedAuraBurst {
  0% {
    filter: brightness(1);
    scale: 1;
  }

  28% {
    filter:
      brightness(2)
      drop-shadow(0 0 26px var(--glow));
    scale: 1.16;
  }

  65% {
    filter:
      brightness(1.35)
      drop-shadow(0 0 50px var(--glow));
    scale: 0.96;
  }

  100% {
    filter: brightness(1);
    scale: 1;
  }
}

@keyframes advancedAwaken {
  0%,
  100% {
    transform:
      translateZ(42px)
      scale(1);
  }

  24% {
    transform:
      translateZ(76px)
      scale(1.12)
      rotate(-2deg);
  }

  52% {
    transform:
      translateZ(68px)
      scale(1.06)
      rotate(2deg);
  }

  76% {
    transform:
      translateZ(50px)
      scale(1.02);
  }
}

@keyframes advancedRigResponse {
  0%,
  100% {
    rotate: 0deg;
  }

  22% {
    rotate: -2deg;
  }

  48% {
    rotate: 2deg;
  }

  70% {
    rotate: -1deg;
  }
}

@keyframes advancedPassiveFloat {
  0%,
  100% {
    opacity: 0.15;
    transform:
      translate3d(0, 14px, 0)
      scale(0.55);
  }

  50% {
    opacity: 0.9;
    transform:
      translate3d(
        calc(
          (var(--passive-index) - 5) * 2px
        ),
        -28px,
        35px
      )
      scale(1.15);
  }
}

@keyframes advancedPlasmaParticle {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes advancedParticleBurst {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(0.4);
  }

  65% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(
          -50% +
          var(--particle-x)
        ),
        calc(
          -50% +
          var(--particle-y)
        )
      )
      scale(1.4)
      rotate(220deg);
  }
}


/*
|--------------------------------------------------------------------------
| Mobile layout
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {
  .genetics-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .advanced-controls {
    padding-top: 14px;
  }

  .advanced-third-eye {
    top: 24%;
  }

  .advanced-halo {
    width: 54%;
  }
}

@media (max-width: 420px) {
  .genetic-reading {
    padding: 9px;
  }

  .genetic-reading strong {
    font-size: 10px;
  }

  .advanced-controls .action-button {
    min-height: 68px;
  }
}


/*
|--------------------------------------------------------------------------
| Reduced motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
  .advanced-passive-particle,
  .advanced-effect-particle,
  .advanced-halo,
  .advanced-wing-orb,
  .advanced-body-ring,
  .gene-mutation-unstable,
  .gene-mutation-voidborn {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.play-engine-button{
    position:fixed;
    right:24px;
    bottom:24px;

    width:68px;
    height:68px;

    border:none;
    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;
    font-size:28px;
    cursor:pointer;

    box-shadow:
        0 0 18px var(--glow),
        0 0 40px color-mix(in srgb,var(--glow) 55%,transparent);

    z-index:9999;

    transition:
        transform .2s,
        box-shadow .2s;
}

.play-engine-button:hover{
    transform:scale(1.08);
}

.play-engine-button:active{
    transform:scale(.96);
}

@media (max-width:700px){

    .play-engine-button{

        width:58px;
        height:58px;

        right:16px;
        bottom:16px;

        font-size:22px;
    }

}