:root {
  color-scheme: dark;
  --ink: #f7fff8;
  --soft: rgba(247, 255, 248, 0.78);
  --glass: rgba(4, 14, 18, 0.56);
  --line: rgba(255, 255, 255, 0.22);
  --cyan: #31d7dd;
  --amber: #f0ad52;
  --rose: #f067b7;
  --green: #9be77b;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #071113;
  color: var(--ink);
  font-family:
    "Trebuchet MS", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: -4vmax;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(7, 17, 19, 0.78), rgba(7, 17, 19, 0.16) 48%, rgba(7, 17, 19, 0.78)),
    linear-gradient(0deg, rgba(7, 17, 19, 0.94), rgba(7, 17, 19, 0.16) 48%, rgba(7, 17, 19, 0.5)),
    url("assets/hero-dithmarschen-gaming.png") center / cover no-repeat;
  transform: scale(1.04);
  animation: background-drift 20s ease-in-out infinite alternate;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 28%, rgba(49, 215, 221, 0.22), transparent 27%),
    radial-gradient(circle at 72% 66%, rgba(240, 173, 82, 0.24), transparent 23%),
    radial-gradient(circle at 82% 34%, rgba(240, 103, 183, 0.15), transparent 18%),
    linear-gradient(180deg, transparent, rgba(7, 17, 19, 0.38));
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.scene-effects {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}

.scene-effects::before,
.scene-effects::after,
.scene-effects span {
  position: absolute;
  display: block;
  pointer-events: none;
}

.scene-effects::before {
  content: "";
  inset: -8%;
  opacity: 0.62;
  background:
    radial-gradient(circle at 10% 18%, rgba(247, 255, 248, 0.86) 0 1px, transparent 2px),
    radial-gradient(circle at 26% 12%, rgba(49, 215, 221, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 26%, rgba(247, 255, 248, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 14%, rgba(240, 173, 82, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 24%, rgba(240, 103, 183, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 10%, rgba(247, 255, 248, 0.68) 0 1px, transparent 2px);
  background-size: 32rem 20rem;
  filter: drop-shadow(0 0 8px rgba(49, 215, 221, 0.45));
  animation: sparkle-drift 12s linear infinite, sparkle-pulse 3.2s ease-in-out infinite;
}

.scene-effects::after {
  content: "";
  left: 44%;
  top: 20%;
  width: 42vw;
  height: 26vh;
  opacity: 0.22;
  background:
    linear-gradient(100deg, transparent 0 18%, rgba(49, 215, 221, 0.3), transparent 68%),
    linear-gradient(120deg, transparent 0 24%, rgba(240, 103, 183, 0.22), transparent 74%);
  filter: blur(20px);
  transform: skewX(-10deg);
  animation: aurora-sway 11s ease-in-out infinite alternate;
}

#depth-scene {
  position: fixed;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.72;
  mix-blend-mode: screen;
}

.water {
  left: -8vw;
  bottom: 20vh;
  width: 58vw;
  height: 18vh;
  opacity: 0.28;
  background:
    repeating-linear-gradient(102deg, transparent 0 1.2rem, rgba(49, 215, 221, 0.2) 1.35rem 1.55rem, transparent 1.8rem 2.7rem),
    linear-gradient(90deg, transparent, rgba(49, 215, 221, 0.3), transparent);
  clip-path: polygon(0 42%, 100% 0, 94% 74%, 8% 100%);
  filter: blur(10px);
  animation: water-flow 7s linear infinite;
}

.water--far {
  left: 8vw;
  bottom: 42vh;
  width: 36vw;
  height: 8vh;
  opacity: 0.16;
  animation-duration: 11s;
  animation-direction: reverse;
}

.fire-glow {
  right: 24vw;
  bottom: 27vh;
  width: 18vw;
  height: 20vh;
  opacity: 0.58;
  background:
    radial-gradient(circle at 48% 60%, rgba(255, 245, 168, 0.9) 0 4%, rgba(250, 156, 50, 0.62) 13%, rgba(235, 72, 32, 0.32) 28%, transparent 58%),
    radial-gradient(circle at 58% 44%, rgba(240, 103, 183, 0.28), transparent 45%);
  filter: blur(16px);
  transform-origin: 50% 80%;
  animation: fire-flicker 1.05s steps(7, end) infinite;
}

.stage {
  position: relative;
  z-index: 4;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.panel {
  position: relative;
  width: min(720px, 100%);
  display: grid;
  gap: 1.05rem;
  justify-items: center;
  padding: clamp(1.25rem, 4vw, 2.8rem);
  text-align: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(135deg, rgba(49, 215, 221, 0.62), rgba(240, 173, 82, 0.62), rgba(240, 103, 183, 0.48)) border-box;
  box-shadow:
    0 2rem 5rem rgba(0, 0, 0, 0.38),
    inset 0 0 3rem rgba(49, 215, 221, 0.05);
  backdrop-filter: blur(18px) saturate(1.2);
  overflow: hidden;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent),
    radial-gradient(circle at 50% 0%, rgba(49, 215, 221, 0.18), transparent 46%);
  transform: translateX(-70%);
  animation: panel-sheen 8s ease-in-out infinite;
}

.panel > * {
  position: relative;
  z-index: 1;
}

.kicker {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), var(--amber), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(0.9rem, 2.4vw, 1.05rem);
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: 0 0 22px rgba(49, 215, 221, 0.2);
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #d9fff4 34%, #62e7e3 67%, #f0ad52 116%);
  -webkit-background-clip: text;
  background-clip: text;
  font-family:
    "Arial Rounded MT Bold", "Trebuchet MS", Inter, ui-rounded, system-ui, sans-serif;
  font-size: clamp(3.2rem, 11vw, 6.65rem);
  line-height: 0.9;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow:
    0 0 20px rgba(49, 215, 221, 0.34),
    0 0 52px rgba(240, 173, 82, 0.18);
}

.teamspeak {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(560px, 100%);
  margin-top: 0.4rem;
}

.primary-link,
.copy-button {
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 1rem;
  color: var(--ink);
  font: inherit;
  font-weight: 850;
  letter-spacing: 0;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 0.8rem 2.2rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.primary-link {
  color: #071113;
  background: linear-gradient(135deg, var(--cyan), var(--green) 48%, var(--amber));
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    0 0 28px rgba(49, 215, 221, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.34);
}

.primary-link:hover,
.primary-link:focus-visible,
.copy-button:hover,
.copy-button:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  filter: brightness(1.08);
}

.primary-link svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.copy-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copy-button[data-state="done"] {
  color: #071113;
  background: #72d977;
}

.server-list {
  width: min(560px, 100%);
  display: grid;
  gap: 0.72rem;
  margin-top: 0.2rem;
}

.server-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0.75rem;
}

.server-row > span {
  color: var(--soft);
  font-weight: 850;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 0 18px rgba(49, 215, 221, 0.16);
}

@keyframes background-drift {
  from {
    transform: scale(1.04) translate3d(-1.2%, -0.6%, 0);
  }
  to {
    transform: scale(1.1) translate3d(1.2%, 0.8%, 0);
  }
}

@keyframes sparkle-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-10rem, 6rem, 0);
  }
}

@keyframes sparkle-pulse {
  0%, 100% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.86;
  }
}

@keyframes aurora-sway {
  from {
    transform: translate3d(-2%, -3%, 0) skewX(-10deg);
  }
  to {
    transform: translate3d(3%, 4%, 0) skewX(-4deg);
  }
}

@keyframes water-flow {
  from {
    background-position: 0 0, 0 0;
    transform: translate3d(0, 0, 0);
  }
  to {
    background-position: 16rem 0, 8rem 0;
    transform: translate3d(3vw, -0.4vh, 0);
  }
}

@keyframes fire-flicker {
  0%, 100% {
    transform: scale(0.95, 0.88) translate3d(0, 0, 0);
    opacity: 0.42;
  }
  30% {
    transform: scale(1.05, 1.18) translate3d(-0.4vw, -0.5vh, 0);
    opacity: 0.72;
  }
  63% {
    transform: scale(0.88, 1.08) translate3d(0.35vw, -0.25vh, 0);
    opacity: 0.56;
  }
  82% {
    transform: scale(1.12, 0.96) translate3d(0.15vw, 0, 0);
    opacity: 0.66;
  }
}

@keyframes panel-sheen {
  0%, 35% {
    transform: translateX(-78%);
    opacity: 0;
  }
  52% {
    opacity: 1;
  }
  72%, 100% {
    transform: translateX(78%);
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .panel {
    gap: 0.85rem;
  }

  .teamspeak,
  .server-row {
    grid-template-columns: 1fr;
  }

  .server-row {
    gap: 0.35rem;
  }

  .server-row > span {
    text-align: center;
  }

  .primary-link,
  .copy-button {
    width: 100%;
  }

  .fire-glow {
    right: 6vw;
    bottom: 23vh;
    width: 34vw;
  }

  .water {
    left: -16vw;
    bottom: 20vh;
    width: 72vw;
  }
}

@media (max-width: 380px) {
  h1 {
    font-size: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }

  .scene-effects,
  .scene-effects::before,
  .scene-effects::after,
  .scene-effects span,
  .panel::before {
    animation: none;
  }

  #depth-scene {
    display: none;
  }
}