:root{
  --net-size: 640px;
  --mesh-gap: 24px;
  --px: 2px;

  /* якорь верёвки — чтобы титул шёл ровно над ним */
  --anchor-vh: 28;
  --sky-h: 55vh;        /* высота неба */
  --water-h: 45vh;      /* высота воды (100 - sky-h) */
  --scan-opacity: .45;
}

/* Глобальный пиксель-режим */
html,body{
  height:100%; margin:0; overflow:hidden;
  background:#001428;               /* запасной фон */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  cursor: none;
  font-family: "Press Start 2P", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}



 /* Краб-курсор */
 .crab-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;   /* чтоб не мешал кликам */
  z-index: 999999;        /* выше всех элементов */
  transform: translate(-50%, -50%);
  animation: crabWalk 1s infinite alternate;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px #00BFFF);
}

.crab-cursor img {
  width: 32px;
  height: 32px;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 5px #00BFFF);
}


/* Привязываем якорь верёвки к переменной */
.anchor{ top: calc(var(--anchor-vh) * 1vh); }

.ships{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* базовый кораблик (пиксель-арт: корпус + мачта + парус) */
.ship{
  position:absolute; left:-20vw; bottom:22%;
  width: 40px; height: 10px;                 /* корпус */
  background: repeating-linear-gradient(90deg,#6b3c1a 0 4px,#8b5a2b 4px 8px);
  border: 2px solid #000;
  box-shadow: inset -2px 2px 0 rgba(255,255,255,.18), inset 2px -2px 0 rgba(0,0,0,.35);
  image-rendering: pixelated;
  /* плывёт слева направо + покачивается ступенчато */
  animation:
    shipDrift 36s linear infinite,
    shipBob   2.4s steps(12) infinite;
}

/* мачта */
.ship::before{
  content:"";
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:10px; width:2px; height:16px;
  background:#2b1a0d; border:1px solid #000;
}

/* парус */
.ship::after{
  content:"";
  position:absolute; left:50%;
  bottom:18px; width:14px; height:10px;
  transform: translateX(-2px);
  background:#fff; border:2px solid #000;
  box-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* разные размеры/высоты/скорости */
.s1{ bottom:24%; width:36px; height:9px;  animation-duration: 34s, 2.2s; }
.s2{ bottom:28%; width:46px; height:11px; animation-duration: 42s, 2.6s; animation-delay: .8s,  .2s; }
.s3{ bottom:20%; width:52px; height:12px; animation-duration: 50s, 2.8s; animation-delay: 1.4s, .1s; }

@keyframes shipDrift{
  0%   { left: -20vw; }
  100% { left: 110vw; }
}
@keyframes shipBob{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}






/* ==== СЛОИ ФОНА ==== */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}





/* НЕБО (верх) */
.sky{
  position:absolute; left:0; top:0; right:0; height:var(--sky-h);
  background:
    linear-gradient(#0b1a44 0%, #13286e 50%, #1b2e7f 100%);
}

/* «Луна» (пиксельная сияющая луна) */
.sun{
  position:absolute;
  right:6vw; 
  top:10vh;
  width:120px; height:120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,1) 0% 35%, rgba(220,220,220,.95) 36% 55%, rgba(180,200,255,.85) 56% 70%, transparent 72%),
    radial-gradient(circle at 60% 65%, rgba(200,200,200,.9) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, rgba(180,180,180,.7) 0 5%, transparent 6%),
    radial-gradient(circle at 70% 35%, rgba(160,160,160,.6) 0 4%, transparent 5%);
  image-rendering: pixelated;
  box-shadow: 
    0 0 12px rgba(200,220,255,.8),
    0 0 22px rgba(150,180,255,.6),
    0 0 42px rgba(120,160,255,.5);
  animation: moonGlow 4s ease-in-out infinite alternate;
  z-index: 2;
}

/* сияющий ореол вокруг луны */
.sun::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:260px; height:260px;
  border-radius:50%;
  background: radial-gradient(circle,
    rgba(180,200,255,.25) 0%,
    rgba(150,170,255,.15) 40%,
    rgba(120,140,200,.08) 70%,
    transparent 100%);
  filter: blur(2px);
  animation: haloPulse 6s ease-in-out infinite alternate;
  pointer-events:none;
  z-index: -1;
}

/* эффект дыхания для луны */
@keyframes moonGlow{
  from{ box-shadow: 0 0 12px rgba(200,220,255,.8), 0 0 22px rgba(150,180,255,.6), 0 0 42px rgba(120,160,255,.5); }
  to  { box-shadow: 0 0 18px rgba(220,240,255,.9), 0 0 32px rgba(160,200,255,.7), 0 0 60px rgba(140,180,255,.6); }
}

/* ореол тоже пульсирует */
@keyframes haloPulse{
  from{ transform:translate(-50%,-50%) scale(1); opacity:.6; }
  to  { transform:translate(-50%,-50%) scale(1.15); opacity:.9; }
}


/* Больше слоёв звёзд + мерцание */
.stars{
  position:absolute; inset:0;
  background:
    radial-gradient(#b6e3ff 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(#9cdcff 1px, transparent 1px) 4px 4px / 8px 8px,
    radial-gradient(#ffffff 1px, transparent 1px) 2px 6px / 10px 10px;
  opacity:.28;
  animation: starDrift 20s linear infinite;
}
.stars::before, .stars::after{
  content:""; position:absolute; inset:-10% -10%;
  background:
    radial-gradient(#9cdcff 1px, transparent 1px) 3px 7px / 10px 10px,
    radial-gradient(#b6e3ff 1px, transparent 1px) 6px 2px / 12px 12px;
  opacity:.22;
  animation: starTwinkle 2.6s steps(6) infinite;
}
.stars::after{
  opacity:.18; animation-duration:3.4s; mix-blend-mode:screen;
}

@keyframes starDrift{
  from{ transform: translateX(0); }
  to  { transform: translateX(-12px); }
}
@keyframes starTwinkle{
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}


@keyframes ropeSway{
  0%   { transform: translateX(calc(-50% - 3px)); }
  50%  { transform: translateX(calc(-50% + 3px)); }
  100% { transform: translateX(calc(-50% - 3px)); }
}
@keyframes knotSway{
  0%   { transform: translate(calc(-50% - 3px), -50%); }
  50%  { transform: translate(calc(-50% + 3px), -50%); }
  100% { transform: translate(calc(-50% - 3px), -50%); }
}

/* применяем покачивание (ступенчато, чтобы «8-бит») */
#rope{
  animation: ropeSway 3.6s steps(12) infinite;
}
#knot{
  animation: knotSway 3.6s steps(12) infinite;
  animation-delay: .12s; /* лёгкий сдвиг фазы */
}

/* Линия горизонта */
.horizon{
  position:absolute; left:0; right:0; top:var(--sky-h); height:4px;
  background:
    linear-gradient(90deg, #67e9ff, #b173ff, #67e9ff);
  box-shadow: 0 0 10px rgba(103,233,255,.75), 0 0 20px rgba(177,115,255,.45);
}

/* ВОДА (низ) */
.water{
  position:absolute; left:0; right:0; bottom:0; height:var(--water-h);
  background:
    linear-gradient(#06233b 0%, #082f4f 100%);
  overflow:hidden;
}

/* ВОЛНЫ — повторяющийся «плиточный» узор, двигаем ступенями */
.waves{
  position:absolute; inset:0;
  background:
    /* светлые гребни */
    repeating-linear-gradient(
      to right,
      rgba(103,233,255,.75) 0 2px,
      transparent 2px 12px
    ),
    /* тёмная полосатость воды */
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.15) 0 2px,
      transparent 2px 6px
    );
  mix-blend-mode: screen;
  animation: waveSlide 3.5s steps(20) infinite linear;
  opacity:.85;
}
@keyframes waveSlide{
  from{ transform: translateX(0); }
  to  { transform: translateX(-40px); }
}

/* ПУЗЫРИ — квадратики поднимаются «рывками» */
.bubbles{ position:absolute; left:0; right:0; bottom:0; height:100%; }
.bubbles span{
  position:absolute; bottom:-12px; width:6px; height:6px;
  background:#9ff2ff; box-shadow:0 0 6px #9ff2ff;
  image-rendering: pixelated;
  animation: rise 6s steps(20) infinite;
  opacity:.9;
}
/* случайные колонки и параметры (10 штук) */
.bubbles span:nth-child(1){ left:8%;  animation-duration:5.2s; animation-delay: .2s; }
.bubbles span:nth-child(2){ left:15%; animation-duration:6.8s; animation-delay: .7s; }
.bubbles span:nth-child(3){ left:23%; animation-duration:6.0s; animation-delay: 1.1s;}
.bubbles span:nth-child(4){ left:31%; animation-duration:5.6s; animation-delay: .4s; }
.bubbles span:nth-child(5){ left:40%; animation-duration:7.0s; animation-delay: .8s; }
.bubbles span:nth-child(6){ left:52%; animation-duration:5.4s; animation-delay: .1s; }
.bubbles span:nth-child(7){ left:63%; animation-duration:6.2s; animation-delay: 1.0s;}
.bubbles span:nth-child(8){ left:72%; animation-duration:5.8s; animation-delay: .5s; }
.bubbles span:nth-child(9){ left:84%; animation-duration:6.6s; animation-delay: .9s; }
.bubbles span:nth-child(10){left:91%; animation-duration:5.0s; animation-delay: .3s; }

@keyframes rise{
  0%   { transform: translateY(0)      translateX(0);   opacity:.0; }
  10%  { opacity:.9; }
  50%  { transform: translateY(-45vh)  translateX(-6px);}
  100% { transform: translateY(-90vh)  translateX(4px); opacity:0; }
}

/* НЕОНОВЫЙ ПИКСЕЛЬНЫЙ ТИТУЛ — над началом верёвки */
#titleBL{
  position:fixed; left:50%; transform:translateX(-50%);
  top: calc((var(--anchor-vh) * 1vh) - 120px);
  font-size: clamp(18px, 4.6vw, 56px);
  letter-spacing: 4px; text-transform: uppercase;
  color:#00f0ff;
  text-shadow:
    0 0 2px #00f0ff, 0 0 6px #00f0ff, 0 0 12px #00e0ff, 0 0 20px #7a00ff,
    2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000;
  filter: drop-shadow(0 0 16px rgba(0,240,255,.6));
  mix-blend-mode: screen;
  pointer-events:none; user-select:none;
  z-index: 10; /* <-- выше rope(3)/knot(4)/net(2) */
}

/* Буквы как отдельные блоки + «пиксельный» прыжок */
#titleBL span{
  display:inline-block;
  transform: translateY(0);
  animation: pixJump 1.2s steps(6) infinite;
}
#titleBL span:nth-child(odd){ animation-delay: .08s; }
#titleBL span:nth-child(3n){   animation-delay: .16s; }

@keyframes pixJump{
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-8px); }
  60%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
/* Якорь верёвки: выше середины экрана */
.anchor {
  position: fixed;
  left: 50%;
  top: 28vh;
  transform: translateX(-50%);
  width: 0; height: 0; /* невидимый ориентир */
  z-index: 1;
}

/* Верёвка: от якоря до узла. Высоту меняем JS-ом. */
#rope{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20vh;
  width: 8px;                 /* было 16px */
  height: 100px;              /* JS меняет */
  background:
    linear-gradient(90deg, #8b5a2b 50%, #6b3c1a 50%) repeat,
    linear-gradient(0deg,  #7a4a28 50%, #5b3218 50%) repeat;
  background-size: 4px 4px, 4px 4px; /* более мелкая «шахматка» */
  box-shadow:
    inset -2px 2px 0 rgba(255,255,255,.25),
    inset  2px -2px 0 rgba(0,0,0,.35),
    0 0 0 1px #3a2413;
  border-radius: 0;
  image-rendering: pixelated;
  z-index: 3;
  cursor: grab;
  touch-action: none;
  animation: ropeSway 3.6s steps(12) infinite; /* твоё покачивание */
}

/* маленький «пиксель-узел» */
#knot{
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;     /* было 32x32 */
  background:
    linear-gradient(90deg, #8b5a2b 50%, #6b3c1a 50%) repeat,
    linear-gradient(0deg,  #7a4a28 50%, #5b3218 50%) repeat;
  background-size: 6px 6px, 6px 6px;
  border: 2px solid #3a2413;
  border-radius: 0;
  box-shadow:
    inset -2px 2px 0 rgba(255,255,255,.25),
    inset  2px -2px 0 rgba(0,0,0,.40),
    0 1px 0 #000;
  image-rendering: pixelated;
  z-index: 4;
  cursor: grab;
  touch-action:none;
  animation: knotSway 3.6s steps(12) infinite; /* твой sway */
}
#knot:active{ cursor: grabbing; }

/* Сеть — большой круг, тянуть можно за обод */
#net{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: var(--net-size);
  height: var(--net-size);
  top: calc(100vh + 200px);
  border-radius: 0; /* квадратная рамка как у ретро-окон */
  overflow: hidden;
  z-index: 2;
  /* 90s окантовка: свет сверху-слева, тёмный низ-справа */
  box-shadow:
    inset -6px 6px 0 rgba(255,255,255,.35),
    inset  6px -6px 0 rgba(0,0,0,.4),
    0 0 0 2px #cfcfcf,
    0 0 0 4px #1a1a1a;

  cursor: grab;
  touch-action:none;
  image-rendering: pixelated;
}
#net:active { cursor: grabbing; }

/* «Пиксельная» клетка — вместо диагоналей делаем true grid */
.mesh{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(255,255,255,.75) 0 var(--px), transparent var(--px)),
    linear-gradient(to bottom, rgba(255,255,255,.75) 0 var(--px), transparent var(--px));
  background-size: var(--mesh-gap) var(--mesh-gap), var(--mesh-gap) var(--mesh-gap);
  filter: none; /* без размытия */
  image-rendering: pixelated;
  pointer-events: none;
}

/* лёгкая «тёмная» окантовка по краю как виньетка, но без размытия */
.vignette{
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.25);
  pointer-events: none;
}

/* 4 фото внутри сети */
.lobsters{
  position: relative;
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 18px;
  box-sizing: border-box;
  pointer-events: none; /* чтобы не мешали перетаскиванию */
}
.lobsters img{
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: 0;                 /* без скруглений */
  border: 2px solid #000;           /* чёрная рамка как в старых галереях */
  box-shadow:
    inset -3px 3px 0 rgba(255,255,255,.25),
    inset  3px -3px 0 rgba(0,0,0,.35);
}

/* Подсказка внизу, можно удалить */
.hint{ position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); color: #000; font-size: 12px; letter-spacing: 0; padding: 6px 10px; background: #cfcfcf; border: 2px solid #000; box-shadow: inset -3px 3px 0 #fff, inset 3px -3px 0 #888, 2px 2px 0 #000; }



:root{
  --v90-cyan:   #00f0ff;
  --v90-mag:    #ff00e6;
  --v90-purple: #7a00ff;
  --v90-gold:   #ffd166;
  --v90-deep:   #0a0f2d;
}

/* ===== BACKGROUND TINT + CRT SCANLINES ===== */
html, body{
  /* REPLACE: фон с цветным тоном и блендингом (поверх твоей гифки) */
  background:
    radial-gradient(1200px 800px at 50% 65%,
      rgba(0,240,255,.18) 0%,
      rgba(255,0,230,.12) 35%,
      rgba(122,0,255,.10) 60%,
      transparent 78%),
    linear-gradient(180deg, rgba(10,15,45,.85) 0%, rgba(0,0,0,.30) 60%, rgba(10,15,45,.85) 100%),
    url('') center/cover no-repeat fixed;
  background-blend-mode: screen, multiply, normal;
}

/* мягкий «видеосвет» сверху */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(1000px 600px at 50% 0%,
    rgba(255,209,102,.20), transparent 60%);
  mix-blend-mode: screen; opacity:.8;
}

/* сканлайны + лёгкое «дрожание» */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.05) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: soft-light;
  animation: scanFlicker 1.8s ease-in-out infinite alternate;
  opacity:.55;
}
@keyframes scanFlicker{
  from{ opacity:.45; transform: translateY(0); }
  to  { opacity:.65; transform: translateY(-0.5px); }
}

/* ===== NEON GLOW AROUND ELEMENTS ===== */

/* сеть — добавим цветное свечение по контуру */
#net{
  box-shadow:
    inset -6px 6px 0 rgba(255,255,255,.35),
    inset  6px -6px 0 rgba(0,0,0,.40),
    0 0 0 2px #cfcfcf,
    0 0 0 4px #1a1a1a,
    0 0 14px var(--v90-cyan),
    0 0 28px rgba(122,0,255,.45);
}

/* сетка — белые линии заменим на неон-циан */
.mesh{
  background:
    linear-gradient(to right, var(--v90-cyan) 0 var(--px), transparent var(--px)),
    linear-gradient(to bottom, var(--v90-cyan) 0 var(--px), transparent var(--px));
  opacity:.9;
}

/* верёвка — лёгкий цветной отблеск */
#rope{
  box-shadow:
    inset -4px 4px 0 rgba(255,255,255,.25),
    inset  4px -4px 0 rgba(0,0,0,.35),
    0 0 0 2px #3a2413,
    0 0 10px rgba(255,209,102,.35),
    0 0 18px rgba(122,0,255,.30);
}

/* узел — «гамма» как на старых кнопках */
#knot{
  border-color:#23150b;
  box-shadow:
    inset -4px 4px 0 rgba(255,255,255,.25),
    inset  4px -4px 0 rgba(0,0,0,.40),
    0 2px 0 #000,
    0 0 12px rgba(255,209,102,.45),
    0 0 22px rgba(122,0,255,.35);
}

/* фото — подкрась и сделай контрастнее по-90s */
.lobsters img{
  filter: contrast(1.25) saturate(1.3) brightness(1.05);
  box-shadow:
    inset -3px 3px 0 rgba(255,255,255,.25),
    inset  3px -3px 0 rgba(0,0,0,.35),
    0 0 10px rgba(0,240,255,.25);
  border-color:#000;
}

/* подсказка — неоновая рамка */
.hint{
  background: #121212;
  color: var(--v90-cyan);
  border-color: var(--v90-purple);
  box-shadow:
    0 0 0 2px var(--v90-purple),
    0 0 12px var(--v90-mag),
    inset 0 -2px 0 rgba(255,255,255,.15);
  text-shadow: 0 0 6px rgba(0,240,255,.6);
}



/* ===== MAIN CONTENT (иконка + тайтл + адрес) ===== */
.main-content{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--anchor-vh) * 1vh - 180px); /* блок выше начала верёвки */
  text-align: center;
  z-index: 9999; /* поверх всего */
  pointer-events: auto;
}

.blue-lobster-title{
  margin: 0;
  font-family: "Press Start 2P", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(26px, 6vw, 64px);
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #00ccff;
  position: relative;
  pointer-events: none;
  user-select: none;

  /* мягкое неоновое свечение (убавил яркость) */
  text-shadow:
    0 0 2px #00e0ff,
    0 0 4px #00f0ff,
    0 0 6px #00ccff;
  filter: drop-shadow(0 0 5px rgba(0,240,255,.5));
}

/* подпрыгивающие буквы */
.blue-lobster-title span{
  display:inline-block;
  animation: pixJump 1.2s steps(6) infinite,
             neonWave 3s linear infinite;
}
.blue-lobster-title span:nth-child(odd){ animation-delay: .08s, .3s; }
.blue-lobster-title span:nth-child(3n){  animation-delay: .16s, .6s; }


/* ===== Анимации ===== */
@keyframes pixJump{
  0%{transform:translateY(0)}
  35%{transform:translateY(-6px)}
  60%,100%{transform:translateY(0)}
}

@keyframes neonWave{
  0%,100% { text-shadow: 0 0 2px #00e0ff, 0 0 4px #00f0ff, 0 0 6px #00ccff; }
  50%     { text-shadow: 0 0 4px #00f0ff, 0 0 6px #00ccff, 0 0 10px #00e0ff; }
}

/* === ЛАЗЕР-ШОУ (мягче и аккуратнее) === */
.blue-lobster-title::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width: 180%; height:180%;
  transform: translate(-50%,-50%);
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(0,240,255,0.10) 0deg 6deg,
      transparent 6deg 18deg
    );
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 25%, transparent 70%);
  mix-blend-mode: screen;
  animation: laserspin 18s linear infinite; /* медленнее и плавнее */
  pointer-events:none;
  z-index: -1;
}

@keyframes laserspin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}


/* ===== Twitter logo (ретро-90s) ===== */
.twitter-logo{
  display:inline-block;
  margin-bottom: 14px;
  padding: 6px;
  background: #ffffff; /* тёмный фон */
  border: 2px solid #000;
  box-shadow:
    inset -3px 3px 0 #fff,
    inset  3px -3px 0 #888,
    0 0 6px #00ccff,
    0 0 12px rgba(0,240,255,.7);
  image-rendering: pixelated;
  transition: transform .12s steps(4), box-shadow .12s steps(4);
}
.twitter-logo img{
  width: 42px; height: 42px; /* больше чем 32px */
  display:block;
  filter: drop-shadow(0 0 6px #00ccff);
  image-rendering: pixelated;
  pointer-events:none;
  cursor: none;
}
.twitter-logo:hover{
  transform: translateY(-2px);
  box-shadow:
    inset -3px 3px 0 #fff,
    inset  3px -3px 0 #888,
    0 0 8px #00f0ff,
    0 0 16px rgba(0,240,255,.9);
    cursor: none;
}



/* адрес + копировать */
.copy-container{
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: #121212;
  border: 2px solid #000;
  box-shadow:
    inset -3px 3px 0 #fff,
    inset  3px -3px 0 #888,
    0 0 10px rgba(0,240,255,.35);
}
#walletText{
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: clamp(12px, 2.6vw, 16px);
  color: #00f0ff;
  text-shadow: 0 0 6px rgba(0,240,255,.6);
  user-select: all;
}
#copyBtn{
  font-family: inherit;
  font-size: 14px;
  padding: 6px 10px;
  border: 2px solid #000;
  background: #cfcfcf;
  cursor: none;
  box-shadow:
    inset -3px 3px 0 #fff,
    inset  3px -3px 0 #888,
    2px 2px 0 #000;
}

#copyBtn:active{
  transform: translate(1px,1px);
  box-shadow:
    inset -2px 2px 0 #fff,
    inset  2px -2px 0 #888,
    1px 1px 0 #000;
}

/* Анимации */
@keyframes pixJump{
  0%{transform:translateY(0)}
  35%{transform:translateY(-14px)}
  60%,100%{transform:translateY(0)}
}
@keyframes underlineRun{
  from{ background-position:0 0 } to{ background-position:300% 0 }
}

/* мелкий респонсив */
@media (max-width: 560px){
  .blue-lobster-title{ letter-spacing: 6px; }
  .blue-lobster-title::after{ height: 6px; }
}


/* === Адаптив для мобилок === */
@media (max-width: 560px){
  :root{
    --net-size: 440px;   /* было 640px, уменьшаем */
    --mesh-gap: 18px;    /* сетку делаем плотнее */
  }

  .lobsters{
    gap: 10px;
    padding: 12px;
  }

  .lobsters img{
    border-width: 1px; /* рамки чуть тоньше */
  }
}

/* === Мобильный режим для тайтла === */
@media (max-width: 560px){
  .blue-lobster-title{
    font-size: clamp(20px, 5vw, 36px); /* чуть меньше */
    letter-spacing: 1px;               /* убираем сильный разлет */
    line-height: 1.1;                  /* плотнее */
    white-space: nowrap;               /* запрет переноса */
  }
}