:root{
  --yellow:#FFD24A; --yellow2:#FFC340; --ink:#e7ecf3; --dark:#090d14;
  --bd:#ffffff14;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--dark);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
a{color:inherit;text-decoration:none}

/* Header */
header{position:sticky;top:0;z-index:60;background:linear-gradient(90deg,#0b1220,#0b0f17 60%,#0b1220);
  border-bottom:1px solid var(--bd);backdrop-filter:saturate(140%) blur(6px);padding-top:env(safe-area-inset-top)}
.nav{max-width:1200px;margin:auto;display:flex;align-items:center;gap:18px;padding:12px 16px}
.nav .brand{font-family:Bangers;letter-spacing:.18em}
.nav .spacer{flex:1}
.nav a{color:#cbd5e1;opacity:.9}
.nav a:hover{opacity:1}
/* утилита для скрытия */
.is-hidden{ display:none !important; }

/* заголовок карточки графика */
.chart-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}

/* табы токенов */
.tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.tab-btn{
  background:#12192a; color:#e7ecf3; border:2px solid #22304a;
  border-radius:10px; padding:8px 14px; font-weight:800; cursor:pointer;
  transition:transform .15s ease, filter .15s ease;
}
.tab-btn:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.tab-btn.active{ background:#ffd24a; color:#111; border-color:#000; }

/* инфо возле табов */
.pair-info{ color:#9aa3b2; font-size:14px; }
.pair-info strong{ color:#e7ecf3; }

/* контейнер графика – на малых экранах увеличим высоту */
#tvchart{ height:360px; }
@media (max-width:600px){ #tvchart{ height:300px; } }

/* правый столбец с инфой о баттле */
.battle-info{ display:grid; gap:8px; font-size:15px; }
.battle-info strong{ color:#cbd5e1; }
/* HERO */
.hero{position:relative;min-height:100dvh;overflow:hidden;
  background:url('../assets/bg-comic.png') center/cover no-repeat, radial-gradient(120% 80% at 50% 20%, #0c121f, #0a0d14)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.28) 75%)}

/* Title */
.title-wrap{position:absolute;left:50%;top:28px;transform:translateX(-50%);z-index:44;text-align:center}
.title {
  font-family: Bangers;
  font-size: clamp(36px, 7.8vw, 104px);
  color: #FFD54F; /* золотисто-жёлтый */
  -webkit-text-stroke: 2px #000; /* жирная чёрная обводка */
  text-shadow:
    0 10px 0 #000,
    0 14px 12px rgba(0,0,0,0.6),
    0 0 25px rgba(255, 220, 100, 0.8);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0;
  line-height: .92;
  position: relative;
  top: 50px; /* смещение вниз */
}
/* Candles */
.candle{position:absolute;opacity:.9;max-width:140px;pointer-events:none;z-index:22}
.c1{ top:10%; left:4%; } .c2{ top:14%; right:4%; }
.c3{ bottom:12%; left:6%; } .c4{ bottom:16%; right:6%; }

/* Characters base */
.char{position:absolute;filter:drop-shadow(1px 1px 20px rgb(253, 249, 8))}
@keyframes bob {0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-8px,0)}}
.idle-1{animation:bob 4.4s ease-in-out infinite}
.idle-2{animation:bob 5.0s ease-in-out .2s infinite}
.idle-3{animation:bob 5.6s ease-in-out .4s infinite}
.idle-4{animation:bob 6.2s ease-in-out .6s infinite}

/* ===== Desktop layout как на рефе ===== */
/* Left (BONK) */
.bonk-cat   { left:3%;  top:2%;   height:52vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:8%; height:32vh; z-index:4; }
.bonk-girl  { left:30%; bottom:12%; height:36vh; z-index:6; }
.bonk-shiba { left:16%; bottom:14%;  height:56vh; z-index:7; }
/* ===== Last Battles cards ===== */
.history{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media (max-width:1100px){ .history{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:820px){  .history{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){  .history{ grid-template-columns:1fr; } }

.match{
  position:relative;
  background:linear-gradient(180deg,#111827,#0e1524);
  border:1px solid #ffffff14;
  border-radius:16px;
  padding:16px 16px 14px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.match:hover{
  transform:translateY(-3px);
  border-color:#ffffff26;
  box-shadow:0 22px 50px rgba(0,0,0,.45);
}

.match__title{
  margin:0 0 4px;
  font-weight:800;
  color:#e7ecf3;
}
.match__status{
  margin:0 0 10px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9aa3b2;
  opacity:.9;
}

/* строки со временем */
.match__row{
  display:flex; align-items:center; gap:8px;
  font-size:14px; color:#c7d0de;
  margin:2px 0;
}
.match__row .dot{
  width:6px; height:6px; border-radius:50%;
  background:#2f3a55; flex:0 0 6px;
}

/* подвал с победителем */
.match__footer{
  display:flex; align-items:center; justify-content:flex-start; gap:14px;
  margin-top:10px; padding-top:10px; border-top:1px dashed #ffffff1c;
}
.label-min{
  color:#9aa3b2; font-weight:700; letter-spacing:.04em;
}

/* бейдж победителя */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:900; font-size:12px; letter-spacing:.06em;
  padding:6px 10px; border-radius:12px;
  border:2px solid #000; box-shadow:0 3px 0 #000;
}
.badge--pepe{ background:#8fff7a; color:#10210f; }
.badge--doge{ background:#ffd24a; color:#111; }
/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:38vh; z-index:6; }
.pump-hippo { right:29%; bottom:7%; height:42vh; z-index:5; }
.pump-dog   { right:3%; bottom:6%; height:40vh; z-index:7; }
.pump-pill  { right:18%; bottom:19%; height:45vh; z-index:6; }

/* CTA */
.join-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:45}
.btn-join {
  font-family: Bangers;
  letter-spacing: .06em;
  font-size: clamp(20px, 3.8vw, 36px);
  height: 150px;
  width: 350px;
  background: linear-gradient(180deg, #FFD84D 0%, #FFB300 100%);
  color: #111;
  border: 4px solid #000;
  padding: 16px 28px;
  border-radius: 18px;
  box-shadow:
    0 8px 0 #000,
    0 0 20px rgba(255, 215, 64, 0.6);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ===== Glassy panels already exist; keep using panel--glass ===== */

/* ===== HOW IT WORKS ===== */
.howit{
  background: radial-gradient(120% 140% at 10% -20%, rgba(255,210,74,.08), rgba(255,210,74,0) 40%),
              radial-gradient(120% 140% at 90% -10%, rgba(31,186,255,.08), rgba(31,186,255,0) 45%),
              linear-gradient(180deg,#111a2c,#0b1220);
  border: 1px solid #ffffff1a;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 #ffffff12;
}

.howit__header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:16px;
}
.howit__title{
  margin:0; font-size:20px; letter-spacing:.04em; color:#e7ecf3;
}
.howit__badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; font-size:12px; font-weight:800; letter-spacing:.08em;
  border-radius:999px; border:2px solid #000; color:#111;
  background: linear-gradient(180deg,#ffd24a,#ffb300);
  box-shadow: 0 4px 0 #000;
}

.howit__row{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap:14px;
  padding:14px 0;
  border-top: 1px dashed #ffffff14;
}
.howit__row:first-of-type{ border-top: none; padding-top: 0; }

.howit__icon{
  width:56px; height:56px; display:grid; place-items:center;
  font-size:26px;
  background:#0f1626; border:1px solid #ffffff14; border-radius:14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.howit__body p{ margin:6px 0 0; color:#c7cfdb; line-height:1.55; }
.howit__h4{ margin:0; font-size:16px; color:#e7ecf3; }

/* Tiny tags for team names */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800;
  border:2px solid #000; box-shadow:0 3px 0 #000; color:#111;
  background:#cbd5e1;
}
.tag--bonk{ background:#ffd24a; }
.tag--pump{ background:#3fb0ff; }
/* Общий стиль панелей */
.panel--glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

.panel-title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin: 0 0 15px;
  text-align: center;
  letter-spacing: 1px;
}

/* Таймер */
.timer {
  display: flex;
  justify-content: center;
}
.clock {
  display: flex;
  gap: 25px;
}
.clock-box {
  text-align: center;
}
.clock-box .digit {
  font-size: 42px;
  font-weight: bold;
  background: linear-gradient(180deg, #FFD84D 0%, #FFB300 100%);
    color: #111;
    border: 4px solid #000;
    padding: 16px 28px;
    border-radius: 18px;
    box-shadow: 0 8px 0 #000, 0 0 20px rgba(255, 215, 64, 0.6);
  padding: 10px 20px;
  border-radius: 10px;
}
.clock-box .label {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #9ca3af;
}

/* История боёв */
.history {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.match {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 15px;
}
.match__title {
  color: #fff;
  font-size: 15px;
  font-weight: bold;
}
.match__status {
  color: #9ca3af;
  font-size: 12px;
  margin-bottom: 8px;
}
.match__row {
  font-size: 13px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 5px;
}
.match__footer {
  margin-top: 8px;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
}
.badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:6px;
  margin-left:6px;
}
.badge--pepe { background:#15d182; color:#000; }
.badge--doge { background:#ffcc00; color:#000; }
.pill{
  font-weight:800; font-size:12px; letter-spacing:.06em;
  color:#cbd5e1; border:1px solid #ffffff24; background:#0f1626; border-radius:999px; padding:6px 10px;
}

/* мелкие правки для мобильных */
@media (max-width:580px){
  .howit__row{ grid-template-columns:40px 1fr; gap:10px; }
  .howit__icon{ width:40px; height:40px; font-size:20px; }
}
/* Эффект наведения */
.btn-join:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow:
    0 12px 0 #000,
    0 0 28px rgba(255, 215, 64, 0.9);
  filter: brightness(1.05);
}

/* Эффект нажатия */
.btn-join:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 5px 0 #000,
    0 0 14px rgba(255, 215, 64, 0.7);
}
.socials {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

.btn-social {
  width: 64px;
  height: 64px;
  background: #fff;
  border: 3px solid #000;
  border-radius: 50%;
  box-shadow: 0 4px 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn-social img {
  width: 32px;
  height: 32px;
}

.btn-social:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 6px 0 #000;
}

.btn-social:active {
  transform: translateY(2px) scale(0.95);
  box-shadow: 0 2px 0 #000;
}
.btn-join:hover{filter:brightness(1.05)}
.btn-join:active{transform:translateY(3px);box-shadow:0 5px 0 #000}

/* ===== Остальные экраны ===== */
.screen{padding:clamp(48px,6vw,80px) 18px;background:linear-gradient(180deg,#0b0f17,#0a0d14)}
.wrap{max-width:1200px;margin:auto}
.panel{background:linear-gradient(180deg,#12192a,#0c1322);border:1px solid var(--bd);border-radius:22px;padding:22px;margin-top:18px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
h2.shout{font-family:Bangers;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(28px,5vw,56px);margin:0}
.timer{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.clock{display:flex;gap:10px}
.digit{font-family:Bangers;font-size:clamp(28px,4vw,52px);background:#12192a;padding:8px 14px;border:2px solid #22304a;border-radius:10px;min-width:64px;text-align:center}
.label{font-size:12px;color:#a9b4c6;text-transform:uppercase;letter-spacing:.16em;text-align:center}
.history{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.match{background:#0f1626;border:1px solid #ffffff12;border-radius:16px;padding:14px}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}
.chart-card{background:#0f1626;border:1px solid #ffffff12;border-radius:16px;padding:16px}
canvas{width:100%;height:360px;display:block}
.buy{display:grid;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-radius:14px;padding:14px 20px;border:2px solid #000;box-shadow:0 8px 0 #000;color:#111;background:#ffd24a}
.btn-white{background:#fff}
.btn-twitter{background:#1DA1F2;color:#fff;border-color:#0d1526;box-shadow:0 8px 0 #0d1526}
.btn-telegram{background:#2AABEE;color:#fff;border-color:#0d1526;box-shadow:0 8px 0 #0d1526}
.sep{border-color:#ffffff14;margin:16px 0}
footer{text-align:center;color:#9aa3b2;padding:36px 16px}

/* ===== Mobile tweaks ===== */


/* less motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
@media (max-width:1500px) {
    .bonk-cat   { left:3%;  top:2%;   height:36vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:26vh; z-index:4; }
.bonk-girl  { left:28%; bottom:12%; height:30vh; z-index:6; }
.bonk-shiba { left:8%; bottom:26%;  height:42vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:30vh; z-index:6; }
.pump-hippo { right:26%; bottom:7%; height:34vh; z-index:5; }
.pump-dog   { right:3%; bottom:4%; height:29vh; z-index:7; }
.pump-pill  { right:9%; bottom:26%; height:37vh; z-index:6; }
.title {
 
  top: 100px; /* смещение вниз */
}
}
@media (max-height:1448px) {
    .bonk-cat   { left:3%;  top:2%;   height:36vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:26vh; z-index:4; }
.bonk-girl  { left:28%; bottom:12%; height:30vh; z-index:6; }
.bonk-shiba { left:8%; bottom:26%;  height:42vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:30vh; z-index:6; }
.pump-hippo { right:26%; bottom:7%; height:34vh; z-index:5; }
.pump-dog   { right:3%; bottom:4%; height:29vh; z-index:7; }
.pump-pill  { right:9%; bottom:26%; height:37vh; z-index:6; }
.title {
 
  top: 180px; /* смещение вниз */
}
}
@media (max-height:1150px) {
    .bonk-cat   { left:3%;  top:2%;   height:36vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:26vh; z-index:4; }
.bonk-girl  { left:28%; bottom:12%; height:30vh; z-index:6; }
.bonk-shiba { left:8%; bottom:26%;  height:42vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:30vh; z-index:6; }
.pump-hippo { right:26%; bottom:7%; height:34vh; z-index:5; }
.pump-dog   { right:3%; bottom:4%; height:29vh; z-index:7; }
.pump-pill  { right:9%; bottom:26%; height:37vh; z-index:6; }
.title {
 
  top: 100px; /* смещение вниз */
}
}
@media (max-height:1448px) {
    .bonk-cat   { left:3%;  top:2%;   height:36vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:26vh; z-index:4; }
.bonk-girl  { left:28%; bottom:12%; height:30vh; z-index:6; }
.bonk-shiba { left:8%; bottom:26%;  height:42vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:30vh; z-index:6; }
.pump-hippo { right:26%; bottom:7%; height:34vh; z-index:5; }
.pump-dog   { right:3%; bottom:4%; height:29vh; z-index:7; }
.pump-pill  { right:9%; bottom:26%; height:37vh; z-index:6; }
.title {
 
  top: 100px; /* смещение вниз */
}
}
@media (max-width:1300px) {
    .bonk-cat   { left:3%;  top:2%;   height:30vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:8%; height:20vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:24vh; z-index:6; }
.bonk-shiba { left:7%; bottom:30%;  height:36vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:7%; top:5%;   height:26vh; z-index:6; }
.pump-hippo { right:23%; bottom:7%; height:28vh; z-index:5; }
.pump-dog   { right:3%; bottom:6%; height:26vh; z-index:7; }
.pump-pill  { right:8%; bottom:32%; height:31vh; z-index:6; }
.title {
 
  top: 120px; /* смещение вниз */
}
}
@media (max-width:1100px) {
    .bonk-cat   { left:3%;  top:4%;   height:22vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:20vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:5%; bottom:30%;  height:32vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:8%; top:6%;   height:20vh; z-index:6; }
.pump-hippo { right:23%; bottom:7%; height:23vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:22vh; z-index:7; }
.pump-pill  { right:6%; bottom:30%; height:29vh; z-index:6; }
.title {
 
  top:140px; /* смещение вниз */
  
}
.btn-join {

  height: 100px;
  width: 325px;
  

}
}
@media (max-width: 1024px) {
    .title {
 
  top: 160px; /* смещение вниз */
  
}
}
@media (max-width:750px) {
    .bonk-cat   { left:3%;  top:4%;   height:26vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:20vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:4%; bottom:30%;  height:32vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:5%; top:5%;   height:24vh; z-index:6; }
.pump-hippo { right:23%; bottom:7%; height:23vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:22vh; z-index:7; }
.pump-pill  { right:4%; bottom:30%; height:29vh; z-index:6; }
.title {
 
  top: 180px; /* смещение вниз */
  
}
.btn-join {

  height: 75px;
  width: 250px;
  

}
}
@media (max-width:620px) {
    .bonk-cat   { left:3%;  top:4%;   height:26vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:4%; height:20vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:2%; bottom:30%;  height:28vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:5%; top:5%;   height:24vh; z-index:6; }
.pump-hippo { right:23%; bottom:7%; height:23vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:22vh; z-index:7; }
.pump-pill  { right:2%; bottom:30%; height:26vh; z-index:6; }
.title {
 
  top: 200px; /* смещение вниз */
  font-size: 60px;
}
.btn-join {

  height: 75px;
  width: 250px;
  

}
}
@media (max-width:550px) {
.title {
 
  top: 150px; /* смещение вниз */
  font-size: 50px;
}
.btn-join {

  height: 75px;
  width: 180px;
  

}
}
@media (max-width:500px) {
    .bonk-cat   { left:3%;  top:4%;   height:24vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:2%; height:14vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:2%; bottom:35%;  height:22vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:4%; top:5%;   height:22vh; z-index:6; }
.pump-hippo { right:23%; bottom:7%; height:23vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:17vh; z-index:7; }
.pump-pill  { right:2%; bottom:35%; height:20vh; z-index:6; }
.title {
 
  top: 180px; /* смещение вниз */
  font-size: 50px;
}
.btn-join {

  height: 75px;
  width: 180px;
  

}
}
@media (max-width:430px) {
    .bonk-cat   { left:3%;  top:4%;   height:24vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:2%; height:14vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:1%; bottom:35%;  height:22vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:4%; top:5%;   height:22vh; z-index:6; }
.pump-hippo { right:21%; bottom:10%; height:20vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:17vh; z-index:7; }
.pump-pill  { right:1%; bottom:35%; height:20vh; z-index:6; }
.title {
 
  top: 170px; /* смещение вниз */
  font-size: 50px;
}
.btn-join {

  height: 75px;
  width: 180px;
  

}
}
@media (max-width:400px) {
    .bonk-cat   { left:3%;  top:4%;   height:24vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:2%; height:14vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:20vh; z-index:6; }
.bonk-shiba { left:1%; bottom:35%;  height:20vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:4%; top:5%;   height:22vh; z-index:6; }
.pump-hippo { right:21%; bottom:10%; height:20vh; z-index:5; }
.pump-dog   { right:3%; bottom:3%; height:17vh; z-index:7; }
.pump-pill  { right:1%; bottom:35%; height:18vh; z-index:6; }
.title {
 
  top: 170px; /* смещение вниз */
  font-size: 50px;
}
.btn-join {

  height: 75px;
  width: 140px;
  top: 40px;
  

}
}
@media (max-width:375px) {
    .bonk-cat   { left:3%;  top:4%;   height:18vh; z-index:5; }
.bonk-coin  { left:2%;  bottom:2%; height:13vh; z-index:4; }
.bonk-girl  { left:24%; bottom:12%; height:16vh; z-index:6; }
.bonk-shiba { left:1%; bottom:35%;  height:20vh; z-index:7; }

/* Правый блок (PUMP) */
.pump-sq    { right:4%; top:5%;   height:16vh; z-index:6; }
.pump-hippo { right:21%; bottom:10%; height:17vh; z-index:5; }
.pump-dog   { right:3%; bottom:2%; height:15vh; z-index:7; }
.pump-pill  { right:1%; bottom:35%; height:18vh; z-index:6; }
.title {
 
  top: 170px; /* смещение вниз */
  font-size: 50px;
}
.btn-join {

  height: 75px;
  width: 140px;
  top: 40px;
  

}
}