:root {
  --text-main: #f7efff;
  --text-soft: #ddd0ee;

  --emerald-1: #1f8a72;
  --emerald-2: #0d725c;
  --emerald-3: #084f41;

  --opal-1: #9d7df0;
  --opal-2: #7e65dd;
  --opal-3: #666fd8;
  --opal-4: #4d3f9f;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text-main);
  background:
    linear-gradient(rgba(4, 4, 10, 0.18), rgba(4, 4, 12, 0.50)),
    url("../assets/assetscathedral-bg.png.png") center center / cover no-repeat fixed;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.hero {
  position: absolute;
  top: 3vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 760px);
  z-index: 3;
}

.hero h1 {
  margin: 0;
  font-size: clamp(3.1rem, 8vw, 6rem);
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: #f0dcff;
  text-shadow:
    0 0 10px rgba(178, 102, 255, 0.74),
    0 0 22px rgba(138, 43, 226, 0.22);
}

.tagline {
  margin: 14px 0 0;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--text-soft);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}

.featured-label {
  margin: 26px 0 0;
  font-size: 1rem;
  color: #ebc8ff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}

.enter-btn {
  display: inline-block;
  margin-top: 22px;
  padding: 16px 40px;
  border-radius: 999px;
  text-decoration: none;
  color: #f7fff9;
  font-size: 1.05rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  background:
    linear-gradient(
      180deg,
      rgba(31, 138, 114, 0.98) 0%,
      rgba(13, 114, 92, 0.96) 42%,
      rgba(8, 79, 65, 0.98) 100%
    );
  border: 1px solid rgba(150, 255, 220, 0.42);
  box-shadow:
    0 0 12px rgba(0, 224, 160, 0.18),
    0 0 24px rgba(0, 170, 135, 0.10),
    inset 0 1px 0 rgba(230, 255, 248, 0.14),
    inset 0 -8px 14px rgba(0, 42, 34, 0.20);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.enter-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(180, 255, 232, 0.56);
  box-shadow:
    0 0 16px rgba(0, 224, 160, 0.24),
    0 0 28px rgba(0, 180, 145, 0.14),
    inset 0 1px 0 rgba(240, 255, 250, 0.18),
    inset 0 -8px 14px rgba(0, 42, 34, 0.24);
}

.fountain {
  position: fixed;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  width: min(230px, 22vw);
  z-index: 1;
  pointer-events: none;
  opacity: 0.65;
  mix-blend-mode: normal;
  filter:
    brightness(0.55)
    contrast(0.9)
    saturate(0.35)
    blur(0.5px)
    drop-shadow(0 0 6px rgba(0, 224, 160, 0.08))
    drop-shadow(0 0 14px rgba(0, 224, 160, 0.04));
}

.games-layer {
  position: absolute;
  left: 50%;
  bottom: 4.25vh;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  z-index: 2;
}

.game-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(380px, 100%);
  margin: 0 auto;
}

.game-grid a {
  min-width: 110px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  color: #f8f2ff;
  font-size: 0.95rem;
  background:
    linear-gradient(
      180deg,
      rgba(157, 125, 240, 0.97) 0%,
      rgba(126, 101, 221, 0.95) 35%,
      rgba(102, 111, 216, 0.92) 68%,
      rgba(77, 63, 159, 0.96) 100%
    );
  border: 1px solid rgba(214, 206, 255, 0.30);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    0 0 10px rgba(160, 130, 255, 0.14),
    0 0 18px rgba(95, 145, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -6px 10px rgba(34, 28, 86, 0.20);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.game-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(198, 232, 255, 0.42);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(110, 150, 255, 0.12),
    0 0 18px rgba(178, 102, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -6px 10px rgba(34, 28, 86, 0.24);
}

.game-grid a:active {
  transform: translateY(0);
}

.room-copy {
  margin: 24px auto 0;
  max-width: 520px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--text-soft);
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}

.credit {
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: #d8caea;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1100px) {
  .hero {
    top: 3vh;
  }

  .fountain {
    width: min(215px, 24vw);
    top: 54%;
  }

  .games-layer {
    bottom: 4vh;
  }
}

@media (max-width: 768px) {
  .hero {
    top: 2.5vh;
    width: min(94vw, 560px);
  }

  .hero h1 {
    font-size: clamp(3rem, 10vw, 5rem);
  }

  .tagline {
    font-size: 0.98rem;
  }

  .enter-btn {
    margin-top: 20px;
    padding: 13px 30px;
    font-size: 0.98rem;
  }

  .featured-label {
    margin-top: 24px;
    font-size: 0.98rem;
  }

  .fountain {
    width: min(180px, 28vw);
    top: 56%;
    opacity: 0.60;
    filter:
      brightness(0.56)
      contrast(0.9)
      saturate(0.35)
      blur(0.45px)
      drop-shadow(0 0 5px rgba(0, 224, 160, 0.07))
      drop-shadow(0 0 10px rgba(0, 224, 160, 0.03));
  }

  .games-layer {
    width: min(94vw, 460px);
    bottom: 3vh;
  }

  .game-grid {
    width: min(340px, 100%);
    gap: 10px;
  }

  .game-grid a {
    min-width: 98px;
    font-size: 0.9rem;
    padding: 9px 14px;
  }

  .room-copy {
    margin-top: 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .hero {
    top: 2vh;
    width: 94vw;
  }

  .hero h1 {
    font-size: clamp(2.7rem, 14vw, 4.2rem);
  }

  .tagline {
    margin-top: 12px;
    font-size: 0.95rem;
  }

  .enter-btn {
    margin-top: 18px;
    padding: 13px 30px;
    font-size: 0.96rem;
  }

  .featured-label {
    margin-top: 22px;
    font-size: 0.94rem;
  }

  .fountain {
    width: min(145px, 34vw);
    top: 58%;
    opacity: 0.56;
    filter:
      brightness(0.58)
      contrast(0.9)
      saturate(0.35)
      blur(0.4px)
      drop-shadow(0 0 4px rgba(0, 224, 160, 0.05))
      drop-shadow(0 0 8px rgba(0, 224, 160, 0.02));
  }

  .games-layer {
    width: 94vw;
    bottom: 2.5vh;
  }

  .game-grid {
    width: min(320px, 100%);
    gap: 9px;
  }

  .game-grid a {
    min-width: 90px;
    font-size: 0.86rem;
    padding: 8px 12px;
  }

  .room-copy {
    max-width: 300px;
    margin-top: 16px;
    font-size: 0.9rem;
  }

  .credit {
    margin-top: 10px;
    font-size: 0.84rem;
  }
}

/* ===== FINAL FOUNTAIN POSITION FIX ===== */

/* desktop */
.fountain {
  top: 53%;
}

/* tablet */
@media (max-width: 768px) {
  .fountain {
    top: 50%;
  }
}

/* mobile */
@media (max-width: 480px) {
  .fountain {
    top: 46%;
  }
}

/* ===== FINAL FOUNTAIN SIZE TWEAK ===== */

/* desktop */
.fountain {
  width: min(200px, 18vw);
}

/* tablet */
@media (max-width: 768px) {
  .fountain {
    width: min(165px, 24vw);
  }
}

/* mobile */
@media (max-width: 480px) {
  .fountain {
    width: min(125px, 30vw);
  }
}