@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200;600&display=swap');


* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
body.changa { font-family: 'Changa', sans-serif; font-weight: 200; }

/* Layers */
#starfield,
#particles,
#hexagon-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
}
canvas { pointer-events: none; }
#hexagon-container { pointer-events: auto; }

/* UI */
#ui {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 32px;
  z-index: 50;
}
#score, #timer, #round { margin: 0 20px; }

#start-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 20px 40px;
  background: #444;
  color: #fff;
  font-size: 36px;
  border: none;
  cursor: pointer;
  z-index: 100;
}

/* Hex button */
.hex-btn {
  position: absolute;
  width: 300px;
  height: 260px;
  background: linear-gradient(145deg, #707070, #585858);
  clip-path: polygon(
    25% 0%, 75% 0%,
    100% 50%, 75% 100%,
    25% 100%, 0% 50%
  );
  box-shadow: 4px 4px 10px rgba(0,0,0,0.5),
              inset -2px -2px 5px rgba(255,255,255,0.1);
  transition: background 0.2s;
}
.hex-btn.flash {
  animation: flash 0.2s ease-out;
}
@keyframes flash {
  from { filter: brightness(2); }
  to   { filter: brightness(1); }
}
.dimmed { background: #111111 !important; }


/* style.css */

/* Attract‐mode scroll */
#attract-scroll {
  position: absolute;
  bottom: -150%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;       /* fewer words per line */
  color: #009bba;   /* Teal */
  font-size: 70px;  /* much larger */
  font-weight: 600; 
  line-height: 1.5;
  text-align: center;
  z-index: 150;
  opacity: 1;
}

@keyframes scrollUp {
  0%   { bottom: -100%; }
  100% { bottom: 150%; }
}

.attract-active #attract-scroll {
  animation: scrollUp 40s linear forwards;
  animation-delay: 0s; /* start immediately */
}