/* ===== Base ===== */

* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', monospace;
  background-color: #111;
  color: #eee;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: #ffd6f6;
}


/* ===== Marquee banner ===== */

.marquee {
  width: 100%;
  overflow: hidden;
  background: #000;
  border-bottom: 2px dashed #ff6ec7;
  padding: 0.4rem 0;
}

.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 16s linear infinite;
}

.marquee-track span {
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: #ff6ec7;
  letter-spacing: 0.05em;
}

/* Track is duplicated (two <span> copies) so this loop is seamless,
   same trick as the sidebar carousel: move by exactly half the width. */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}



 


/* ===== Breakpoints ===== */

@media (max-width: 768px) {
  .zone-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .deco-stack {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .zone {
    border-radius: 6px;
  }

  .marquee-track span {
    font-size: 0.75rem;
  }
}