/* ===== Geometry Dash — Stereo Madness (kimi-k3) ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #05070f;
  overflow: hidden;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

#wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, #0a1230 0%, #05070f 80%);
}

#game {
  display: block;
  border-radius: 4px;
  box-shadow: 0 0 60px rgba(40, 120, 255, .25), 0 0 0 2px rgba(120, 200, 255, .15);
}

/* ---------- overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s ease;
}
.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.menu-inner {
  text-align: center;
  transform: translateY(-3%);
}

.title {
  font-size: clamp(34px, 7vw, 64px);
  font-style: italic;
  letter-spacing: 2px;
  color: #fff;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    0 0 24px rgba(0, 224, 255, .55);
}
.title.win {
  color: #8aff00;
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    0 0 30px rgba(138, 255, 0, .6);
}

.subtitle {
  margin-top: 4px;
  font-size: clamp(18px, 3.2vw, 30px);
  font-style: italic;
  letter-spacing: 6px;
  color: #6ee7ff;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}

.stars {
  margin-top: 10px;
  font-size: 40px;
  letter-spacing: 14px;
  color: #ffd94a;
  text-shadow: 0 0 18px rgba(255, 217, 74, .8), -2px -2px 0 #000, 2px 2px 0 #000;
}

/* ---------- GD play button ---------- */
.play-btn {
  margin: 34px auto 18px;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 4px solid #043b08;
  border-radius: 26px;
  background: linear-gradient(#a4ff4a, #4fce00 55%, #37a800);
  box-shadow: 0 6px 0 #043b08, 0 0 34px rgba(120, 255, 60, .45);
  transition: transform .12s ease, box-shadow .12s ease;
}
.play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 0 #043b08, 0 0 50px rgba(120, 255, 60, .75);
}
.play-btn:active { transform: scale(.96) translateY(3px); box-shadow: 0 2px 0 #043b08; }
.play-btn .tri {
  display: block;
  width: 0; height: 0;
  margin-left: 10px;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-left: 40px solid #fff;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.45));
}

/* ---------- text ---------- */
.hint {
  margin-top: 14px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.7;
  color: #cfe6ff;
  text-shadow: 0 2px 0 #000;
}
.hint b { color: #8aff00; }

.best {
  margin-top: 12px;
  font-size: 17px;
  color: #ffd94a;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.credit {
  margin-top: 22px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #7f95b8;
  text-shadow: 0 1px 0 #000;
}
.credit b { color: #6ee7ff; }

/* ---------- complete screen buttons ---------- */
.btn-row {
  margin-top: 26px;
  display: flex;
  gap: 18px;
  justify-content: center;
}
.gd-btn {
  padding: 14px 30px;
  font-family: inherit;
  font-size: 18px;
  font-style: italic;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  cursor: pointer;
  border: 3px solid #043b08;
  border-radius: 14px;
  background: linear-gradient(#a4ff4a, #4fce00 55%, #37a800);
  box-shadow: 0 4px 0 #043b08;
  transition: transform .1s ease;
}
.gd-btn.alt {
  border-color: #063a4a;
  background: linear-gradient(#54d8ff, #0099e0 55%, #0074b8);
  box-shadow: 0 4px 0 #063a4a;
}
.gd-btn:hover { transform: scale(1.06); }
.gd-btn:active { transform: translateY(2px); }