/* ...existing styles... */
:root {
  --bg: #0a0a0a;
  --panel: #111;
  --border: #222;
  --text: #eaeaea;
  --accent: #67c587;
  --accent-2: #4aa46d;
  --glow: rgba(103, 197, 135, 0.6);
  --gap: 2cm;
  /* Rainbow gradient for new button */
  --rainbow-gradient: linear-gradient(90deg, #ff5733, #ffbd33, #33ff57, #33c7ff, #7f33ff, #ff33c7);
}
/* ...existing styles... */
html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
/* ...existing styles... */
.frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Мобильная версия ссылка */
.mobile-version-link {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  
  pointer-events: auto;
  appearance: none; 
  background: rgba(17, 17, 17, 0.9);
  color: var(--text);
  border: 1px solid var(--border); 
  border-radius: 6px;
  padding: 4px 8px; 
  font-size: 11px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
  z-index: 100; /* Ensure visibility above decorations */
  backdrop-filter: blur(2px);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.mobile-version-link:hover {
  background: var(--panel); 
  border-color: var(--accent);
}

.tabbar {
  position: fixed;
  top: calc(var(--gap) - 42px);
  left: var(--gap);
  right: var(--gap);
  height: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  pointer-events: auto;
}
/* ...existing styles... */
.tabbar-left .dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px;
}
.dot-red { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #28c840; }
/* ...existing styles... */
.tabbar-center {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: #cfcfcf; letter-spacing: 0.2px;
}
/* ...existing styles... */
.btn {
  pointer-events: auto;
  appearance: none; background: #1a1a1a; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; text-decoration: none;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn:hover { background: #222; border-color: #2a2a2a; transform: translateY(-1px); }
/* ...existing styles... */
.viewer {
  position: fixed;
  top: var(--gap); left: var(--gap); right: var(--gap); bottom: var(--gap);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  border: 1px solid var(--border);
}
/* ...existing styles... */
.viewer iframe {
  width: 100%; height: 100%; border: 0; background: #000;
}
/* ...existing styles... */
/* Vines */
.vine {
  position: fixed;
  stroke: var(--accent);
  stroke-width: 2.2;
  fill: none;
  opacity: 0.85;
  filter: drop-shadow(0 0 2px var(--glow));
}
.vine-top { top: calc(var(--gap) - 2px); left: var(--gap); right: var(--gap); height: 22px; width: auto; }
.vine-bottom { bottom: calc(var(--gap) - 2px); left: var(--gap); right: var(--gap); height: 22px; width: auto; }
.vine-left { left: calc(var(--gap) - 2px); top: var(--gap); bottom: var(--gap); width: 22px; height: auto; }
.vine-right { right: calc(var(--gap) - 2px); top: var(--gap); bottom: var(--gap); width: 22px; height: auto; }
/* ...existing styles... */
.vine path {
  stroke-dasharray: 6 14;
  animation: crawl 12s linear infinite, shimmer 2.6s ease-in-out infinite;
}
@keyframes crawl {
  to { stroke-dashoffset: -200; }
}

/* NEW JUNGLE PHOTO STYLES (Background layer) */
.jungle-photo {
  position: fixed;
  pointer-events: none;
  z-index: -2; /* Behind textures (-1) and vines/iframe (0+) */
  background-size: cover;
  background-position: center;
  /* Dark overlay effect */
  opacity: 0.7;
  filter: saturate(1.2) brightness(0.7);
}

.jungle-photo-top {
  top: 0; left: 0; right: 0;
  height: var(--gap);
  background-image: url('jungle_photo_top.png');
}

.jungle-photo-bottom {
  bottom: 0; left: 0; right: 0;
  height: var(--gap);
  background-image: url('jungle_photo_bottom.png');
}

.jungle-photo-left {
  top: 0; bottom: 0; left: 0;
  width: var(--gap);
  background-image: url('jungle_photo_left.png');
}

.jungle-photo-right {
  top: 0; bottom: 0; right: 0;
  width: var(--gap);
  background-image: url('jungle_photo_right.png');
}

/* NEW JUNGLE TEXTURE STYLES */
/* Replaces old .decal, .decal-1, .decal-2, .decal-3 styles */
.jungle-texture {
  position: fixed;
  pointer-events: none;
  background-image: url('jungle_vine_tile.png');
  background-repeat: repeat;
  opacity: 0.4;
  filter: blur(0.2px);
  z-index: -1; /* Ensure it stays behind the iframe and SVG vines */
  mix-blend-mode: screen;
}

/* Positioning the strips to cover the 2cm gap */
.jungle-top {
  top: 0; left: 0; right: 0;
  height: var(--gap);
  background-size: 100px auto;
  animation: creep-x 30s linear infinite reverse;
}
.jungle-bottom {
  bottom: 0; left: 0; right: 0;
  height: var(--gap);
  background-size: 100px auto;
  animation: creep-x 35s linear infinite;
}
.jungle-left {
  top: 0; bottom: 0; left: 0;
  width: var(--gap);
  background-size: auto 100px;
  animation: creep-y 25s linear infinite;
}
.jungle-right {
  top: 0; bottom: 0; right: 0;
  width: var(--gap);
  background-size: auto 100px;
  animation: creep-y 28s linear infinite reverse;
}

@keyframes creep-x {
  0% { background-position-x: 0; }
  100% { background-position-x: 500px; }
}

@keyframes creep-y {
  0% { background-position-y: 0; }
  100% { background-position-y: 500px; }
}

/* SEO Optimization Block Styles */
.seo-dump {
  position: absolute;
  bottom: 10px;
  left: 10px;
  max-width: 500px;
  padding: 5px;
  font-size: 8px; /* Extremely compact font size */
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.05); /* Very low contrast */
  background: transparent;
  z-index: -10; /* Ensure it's far behind everything */
  text-align: left;
}

.seo-dump h1, .seo-dump h2, .seo-dump p {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

.seo-dump h1 { font-size: 10px; }
.seo-dump h2 { font-size: 9px; margin-top: 5px; }

.seo-dump a {
  color: inherit;
  text-decoration: none;
  margin-right: 4px;
}

.seo-dump .seo-links {
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
}

.seo-dump .hashtags {
  margin-top: 5px;
}

/* ECO System Call to Action Button */
.eco-system-button {
  position: fixed;
  bottom: 20px; /* Offset from bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50; /* Above decorations and iframe */
  
  /* Styling */
  display: inline-block;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  color: #fff; /* White text for contrast */
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 100, 150, 0.5); /* A bit of shadow glow */
  transition: all 0.3s ease;
  text-align: center;
  
  /* Rainbow Gradient and Animation */
  background: var(--rainbow-gradient);
  background-size: 300% 100%;
  animation: gradient-shift 10s ease infinite;
}

.eco-system-button:hover {
  transform: translateX(-50%) scale(1.03);
  box-shadow: 0 0 25px rgba(255, 100, 150, 0.8);
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsive note: if 2cm слишком много на маленьких экранах, слегка уменьшаем */
@media (max-width: 400px) {
  :root { --gap: 1.5cm; }
  .tabbar { top: calc(var(--gap) - 40px); }
}