@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&display=swap');

* {

  box-sizing: border-box;

}

body {

  margin: 0;

  background: #03000A;

  font-family: 'Share Tech Mono', monospace;

  color: #DAD9FF;

  overflow-x: hidden;

}

/* ========================= */

/*  VORBO VIRUS GRID v2      */

/*  (NO IMAGES, PURE CSS)    */

/* ========================= */

.bg-image {

  position: fixed;

  inset: 0;

  z-index: 0;

  background:

    radial-gradient(circle at 20% 20%, #1a0035 0, transparent 45%),

    radial-gradient(circle at 80% 80%, #001a35 0, transparent 45%),

    radial-gradient(circle at 50% 50%, #050016 0, #000010 60%);

  overflow: hidden;

}

/* базовая сетка + диагонали */

.bg-image::before {

  content: "";

  position: absolute;

  inset: -200px; /* небольшой выход за края для движения */

  background:

    /* вертикаль */

    repeating-linear-gradient(

      to right,

      rgba(0, 255, 255, 0.09) 0px,

      rgba(0, 255, 255, 0.09) 1px,

      transparent 1px,

      transparent 80px

    ),

    /* горизонталь */

    repeating-linear-gradient(

      to bottom,

      rgba(180, 0, 255, 0.08) 0px,

      rgba(180, 0, 255, 0.08) 1px,

      transparent 1px,

      transparent 80px

    ),

    /* диагонали 1 */

    repeating-linear-gradient(

      45deg,

      rgba(0, 200, 255, 0.06) 0px,

      rgba(0, 200, 255, 0.06) 1px,

      transparent 1px,

      transparent 110px

    ),

    /* диагонали 2 */

    repeating-linear-gradient(

      -45deg,

      rgba(200, 0, 255, 0.05) 0px,

      rgba(200, 0, 255, 0.05) 1px,

      transparent 1px,

      transparent 110px

    );

  opacity: 0.24;

  animation: gridMove 28s linear infinite;

}

@keyframes gridMove {

  0%   { transform: translate(0, 0); }

  50%  { transform: translate(-260px, -160px); }

  100% { transform: translate(-520px, -320px); }

}

/* вирусные узлы + прожилки */

.bg-image::after {

  content: "";

  position: absolute;

  inset: -100px;

  background:

    radial-gradient(circle, #00eaff66 0%, transparent 55%) 15% 30% / 200px 200px no-repeat,

    radial-gradient(circle, #ff00ff55 0%, transparent 55%) 70% 65% / 220px 220px no-repeat,

    radial-gradient(circle, #00ffd555 0%, transparent 55%) 45% 80% / 190px 190px no-repeat,

    radial-gradient(circle, #ff00ff55 0%, transparent 55%) 85% 20% / 200px 200px no-repeat,

    /* прожилки */

    linear-gradient(115deg, transparent 0, transparent 45%, #00ffd533 50%, transparent 55%, transparent 100%),

    linear-gradient(250deg, transparent 0, transparent 40%, #ff00ff33 45%, transparent 55%, transparent 100%);

  filter: blur(8px);

  opacity: 0.32;

  animation: nodesPulse 6s ease-in-out infinite alternate;

}

@keyframes nodesPulse {

  0%   { filter: blur(6px); opacity: 0.22; transform: translate(0, 0); }

  100% { filter: blur(11px); opacity: 0.38; transform: translate(20px, -15px); }

}

/* ========================= */

/*  NOISE & SCANLINES        */

/*  (тоже без картинок)      */

/* ========================= */

.noise {

  pointer-events: none;

  position: fixed;

  inset: 0;

  z-index: 2;

  background:

    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0, transparent 40%),

    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04) 0, transparent 45%),

    repeating-radial-gradient(circle,

      rgba(255,255,255,0.06) 0px,

      rgba(255,255,255,0.02) 1px,

      transparent 2px,

      transparent 3px

    );

  mix-blend-mode: soft-light;

  animation: noiseAnim 0.4s infinite;

}

@keyframes noiseAnim {

  0%   { opacity: .18; transform: translate(0, 0); }

  50%  { opacity: .26; transform: translate(-1px, 1px); }

  100% { opacity: .18; transform: translate(0, 0); }

}

.scanlines {

  pointer-events: none;

  position: fixed;

  inset: 0;

  background: repeating-linear-gradient(

    to bottom,

    rgba(0,0,0,0) 0px,

    rgba(0,0,0,0) 2px,

    rgba(255,255,255,0.10) 3px,

    rgba(0,0,0,0) 4px

  );

  animation: scan 6s linear infinite;

  z-index: 3;

}

@keyframes scan {

  from { transform: translateY(-100%); }

  to   { transform: translateY(100%); }

}

/* ========================= */

/*  FLOATING LOGO            */

/* ========================= */

.floating-logo {

  position: fixed;

  width: 650px;

  left: 50%;

  top: 50%;

  opacity: 0.14;

  transform: translate(-50%, -50%) rotate(0deg) scale(1.05);

  z-index: 1;

  filter: blur(6px) drop-shadow(0 0 45px #7A00FF55);

  mix-blend-mode: screen;

  animation: floatLogo 22s infinite ease-in-out;

}

@keyframes floatLogo {

  0% {

    transform: translate(-50%, -50%) rotate(0deg) scale(1.03);

    filter: blur(4px) drop-shadow(0 0 30px #00EAFF55);

  }

  50% {

    transform: translate(-52%, -48%) rotate(7deg) scale(1.12);

    filter: blur(8px) drop-shadow(0 0 60px #7A00FF88);

  }

  100% {

    transform: translate(-50%, -50%) rotate(0deg) scale(1.03);

    filter: blur(4px) drop-shadow(0 0 30px #00EAFF55);

  }

}

/* ========================= */

/*  RUNE / ERROR / CURSOR    */

/* ========================= */

.rune-layer {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 4;

  font-size: 10px;

  color: #7CFFFD;

  mix-blend-mode: screen;

}

#error-layer {

  position: fixed;

  inset: 0;

  pointer-events: none;

  z-index: 5;

  font-size: 11px;

  color: #ff1aff;

  mix-blend-mode: difference;

}

.virus-cursor {

  position: fixed;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  border: 1px solid #00FFD5;

  box-shadow: 0 0 18px #00FFD5;

  mix-blend-mode: screen;

  pointer-events: none;

  z-index: 30;

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

  opacity: 0.8;

}

/* ========================= */

/*  BOOT SCREEN              */

/* ========================= */

.boot-screen {

  position: fixed;

  inset: 0;

  background: radial-gradient(circle at 20% 0%, #7A00FF33 0, #03000A 60%);

  z-index: 40;

  display: flex;

  align-items: center;

  justify-content: center;

}

.boot-content {

  text-align: center;

  max-width: 340px;

  padding: 24px 28px;

  background: rgba(5,0,20,0.9);

  border-radius: 14px;

  border: 1px solid #7A00FF;

  box-shadow: 0 0 30px #7A00FF55;

}

.boot-title {

  font-family: 'Orbitron', sans-serif;

  font-size: 15px;

  margin-bottom: 8px;

  text-shadow: 0 0 12px #7A00FF;

}

.boot-sub {

  font-size: 12px;

  opacity: 0.85;

  margin-bottom: 16px;

}

.boot-bar {

  width: 100%;

  height: 5px;

  border-radius: 999px;

  background: #150028;

  overflow: hidden;

}

.boot-bar-fill {

  width: 0%;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, #00FFD5, #7A00FF);

  box-shadow: 0 0 12px #00FFD5;

}

/* ========================= */

/*  MAIN CONTENT             */

/* ========================= */

.container {

  position: relative;

  z-index: 10;

  max-width: 880px;

  margin: auto;

  padding: 80px 18px 120px;

  text-align: center;

}

.logo {

  width: 240px;

  max-width: 70vw;

  filter: drop-shadow(0 0 22px #7A00FF) drop-shadow(0 0 40px #00EAFFAA);

}

.title {

  font-size: 40px;

  margin-top: 28px;

  text-shadow: 0 0 15px #7A00FF, 0 0 30px #00EAFF;

  animation: glitch 2.5s infinite;

}

@keyframes glitch {

  0%, 100% { transform: translate(0); }

  30% { transform: translate(-2px, 2px); }

  60% { transform: translate(2px, -2px); }

}

.subtitle {

  opacity: .85;

  max-width: 700px;

  margin: 15px auto 40px;

  font-size: 16px;

  transition: opacity 0.2s;

}

/* CA BLOCK */

.ca-box {

  background: rgba(20, 0, 40, 0.75);

  border: 1px solid #5F1AFF;

  border-radius: 16px;

  padding: 24px;

  margin-bottom: 60px;

  box-shadow: 0 0 40px #8200ff40, inset 0 0 25px #00eaff33;

  backdrop-filter: blur(10px);

  animation: infectionPulse 3.2s infinite;

}

@keyframes infectionPulse {

  0%,100% { box-shadow: 0 0 40px #8200ff50; }

  50% { box-shadow: 0 0 70px #00eaff60; }

}

.ca-label {

  color: #c7a3ff;

  font-size: 14px;

  margin-bottom: 6px;

}

.ca-flex {

  display: flex;

  gap: 10px;

  justify-content: center;

  padding: 12px 15px;

  background: rgba(70, 0, 120, 0.5);

  border-radius: 10px;

  overflow-x: auto;

}

#contractAddress {

  white-space: nowrap;

  font-size: 15px;

}

.copy-btn {

  background: #7A00FF;

  border: none;

  padding: 8px 12px;

  border-radius: 8px;

  font-family: 'Orbitron', sans-serif;

  font-size: 12px;

  cursor: pointer;

  color: white;

}

.copy-btn:hover {

  background: #B100FF;

  box-shadow: 0 0 10px #B100FF;

}

.live {

  color: #00FFD5;

  text-shadow: 0 0 10px #00FFD5;

}

/* LORE */

.lore {

  text-align: left;

  max-width: 760px;

  margin: 60px auto;

  line-height: 1.6;

  font-size: 17px;

}

/* FOOTER */

footer {

  opacity: .4;

  margin-top: 60px;

  font-size: 13px;

}

/* MOBILE */

@media (max-width: 600px) {

  .title {

    font-size: 26px;

  }

  .subtitle {

    font-size: 14px;

  }

  .lore {

    font-size: 15px;

  }

  .floating-logo {

    width: 420px;

  }

}

/* ========================= */

/*  VORBO MUTATION ENGINE    */

/* ========================= */

.vm-section {

  position: relative;

  margin: 60px auto;

  padding: 32px 14px 46px;

  overflow: hidden;

}

/* локальный bio-grid под движок */

.vm-bio-grid {

  position: absolute;

  inset: 0;

  background: radial-gradient(circle at center, rgba(5,0,20,0.9) 0%, rgba(3,0,10,0.95) 65%);

  overflow: hidden;

  z-index: 0;

}

.vm-bio-grid::before,

.vm-bio-grid::after {

  content: "";

  position: absolute;

  width: 220%;

  height: 220%;

  background: repeating-linear-gradient(

    rgba(0,255,180,0.09) 0px,

    rgba(0,255,180,0.09) 2px,

    transparent 3px,

    transparent 8px

  );

  opacity: 0.28;

  animation: vm-gridMove 16s linear infinite;

}

.vm-bio-grid::after {

  animation-duration: 23s;

  opacity: 0.18;

}

@keyframes vm-gridMove {

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

  100% { transform: translate(-40px, -60px) rotate(1turn); }

}

/* контент движка */

.vm-container {

  position: relative;

  z-index: 1;

  max-width: 540px;

  margin: 0 auto;

  text-align: center;

  color: #E7E6FF;

  font-family: 'Orbitron', system-ui, sans-serif;

}

.vm-title {

  font-size: 22px;

  letter-spacing: 3px;

  margin-bottom: 10px;

  text-shadow: 0 0 14px #7A00FF, 0 0 20px #00FFD5;

}

.vm-sub {

  font-family: 'Share Tech Mono', monospace;

  font-size: 13px;

  opacity: 0.8;

  max-width: 420px;

  margin: 0 auto 18px;

}

/* input + button */

.vm-input-wrap {

  display: flex;

  gap: 10px;

  justify-content: center;

  margin-bottom: 18px;

}

.vm-input-wrap input {

  width: 60%;

  padding: 12px 13px;

  border-radius: 12px;

  border: 1px solid #00FFD5;

  background: rgba(10,0,25,0.9);

  color: #DDFEFF;

  font-size: 14px;

  outline: none;

  font-family: 'Share Tech Mono', monospace;

}

.vm-input-wrap input::placeholder {

  color: rgba(140,255,230,0.5);

}

.vm-input-wrap button {

  padding: 12px 18px;

  background: #00FFD5;

  color: #050012;

  border-radius: 12px;

  border: none;

  font-weight: bold;

  cursor: pointer;

  font-size: 13px;

  font-family: 'Orbitron', system-ui, sans-serif;

  transition: 0.18s;

}

.vm-input-wrap button:hover {

  background: #40FFE4;

  transform: translateY(-1px);

}

/* result */

.vm-result {

  display: none;

  margin-top: 20px;

}

.vm-result canvas {

  width: 100%;

  border-radius: 20px;

  box-shadow: 0 0 35px rgba(0,255,213,0.28);

  display: block;

}

/* actions */

.vm-actions {

  display: flex;

  gap: 10px;

  margin-top: 14px;

}

.vm-btn {

  flex: 1;

  padding: 12px;

  border-radius: 13px;

  font-size: 13px;

  border: none;

  font-weight: 600;

  cursor: pointer;

  font-family: 'Orbitron', system-ui, sans-serif;

  transition: 0.18s;

}

.vm-download {

  background: #00FFD5;

  color: #050012;

}

.vm-download:hover {

  background: #40FFE4;

  transform: translateY(-1px);

}

.vm-share {

  background: transparent;

  color: #00FFD5;

  border: 1px solid #00FFD5;

}

.vm-share:hover {

  background: rgba(0,255,213,0.09);

  transform: translateY(-1px);

}

/* theme label */

.vm-theme-label {

  margin-top: 10px;

  font-size: 10px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0.75;

  font-family: 'Share Tech Mono', monospace;

}

/* адаптив */

@media (max-width: 600px) {

  .vm-input-wrap {

    flex-direction: column;

  }

  .vm-input-wrap input {

    width: 100%;

  }

  .vm-actions {

    flex-direction: column;

  }

}