:root {
  color-scheme: dark;
  --purple: 164, 105, 255;
  --purple-soft: 202, 167, 255;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, #151426 0%, #070810 50%, #020306 100%);
  font-family: Arial, "Noto Sans KR", sans-serif;
}

.page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: #03040a;
}

.artboard {
  position: relative;
  width: min(100vw, calc(100dvh * 1.5));
  aspect-ratio: 3 / 2;
  max-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #060711;
  box-shadow: 0 0 90px rgba(0,0,0,.88);
}

.art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.soft-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  box-shadow:
    inset 0 0 64px rgba(0,0,0,.20),
    inset 0 -18px 44px rgba(0,0,0,.12);
}

.crystal-pulse {
  position: absolute;
  left: 46.45%;
  top: 24.7%;
  width: 7.1%;
  height: 13.1%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background:
    radial-gradient(circle,
      rgba(244,236,255,.31) 0%,
      rgba(202,167,255,.23) 27%,
      rgba(164,105,255,.13) 48%,
      transparent 75%);
  filter: blur(9px);
  mix-blend-mode: screen;
  transform-origin: center;
  animation: crystalPulse 5.6s cubic-bezier(.45,0,.35,1) infinite;
}

.hotspots { position: absolute; inset: 0; z-index: 5; }
.hotspot {
  position: absolute;
  display: block;
  border-radius: 12px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.hotspot:focus-visible {
  box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 0 0 5px rgba(var(--purple),.65);
}

.hs-voice-top    { left: 62.4%; top: 2.7%; width: 6.4%; height: 5.4%; }
.hs-schedule-top { left: 69.1%; top: 2.7%; width: 7.0%; height: 5.4%; }
.hs-info-top     { left: 76.4%; top: 2.7%; width: 6.8%; height: 5.4%; }
.hs-discord-top  { left: 84.1%; top: 2.9%; width: 13.3%; height: 5.0%; border-radius: 999px; }

/* 실제 프레임보다 살짝 여유 있게 잡아 클릭성을 높임 */
.hs-discord-main { left: 32.9%; top: 61.9%; width: 33.6%; height: 11.9%; border-radius: 24px; }

.hs-voice-bottom    { left: 30.1%; top: 76.2%; width: 15.6%; height: 8.8%; }
.hs-schedule-bottom { left: 45.5%; top: 76.2%; width: 15.8%; height: 8.8%; }
.hs-info-bottom     { left: 60.9%; top: 76.2%; width: 16.1%; height: 8.8%; }

.button-hit {
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease;
}
.button-hit::before {
  content: "";
  position: absolute;
  inset: 5% 2.5%;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(153,92,255,.10), rgba(89,44,146,.025) 62%, transparent 100%);
  box-shadow:
    inset 0 0 16px rgba(214,184,255,.10),
    0 0 18px rgba(117,62,232,.12);
  transition: opacity .22s ease;
}
.button-hit::after {
  content: "";
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -40%;
  width: 18%;
  transform: skewX(-17deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.18) 28%,
    rgba(var(--purple-soft),.52) 52%,
    rgba(255,255,255,.22) 70%,
    transparent 100%);
  filter: blur(1.2px);
  opacity: 0;
  pointer-events: none;
}
.button-hit:hover {
  transform: translateY(-1px) scale(1.006);
  filter: drop-shadow(0 0 8px rgba(132,73,245,.18));
}
.button-hit:hover::before { opacity: 1; }
.button-hit:hover::after {
  opacity: 1;
  animation: sweep .82s cubic-bezier(.22,.72,.2,1) forwards;
}
.button-hit:active { transform: translateY(1px) scale(.995); }

/* 하단 3개 기능 영역은 과하지 않게 한 번만 반짝임 */
.hs-voice-bottom:hover,
.hs-schedule-bottom:hover,
.hs-info-bottom:hover {
  box-shadow: inset 0 0 20px rgba(167,111,255,.045);
}

@keyframes sweep {
  from { left: -40%; }
  to   { left: 125%; }
}

@keyframes crystalPulse {
  0%   { opacity: .34; transform: scale(.95); }
  24%  { opacity: .56; transform: scale(1.00); }
  48%  { opacity: .82; transform: scale(1.075); }
  66%  { opacity: .50; transform: scale(.99); }
  82%  { opacity: .70; transform: scale(1.035); }
  100% { opacity: .34; transform: scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  .crystal-pulse { animation: none; opacity: .52; }
  .button-hit { transition: none; }
  .button-hit:hover::after { animation: none; opacity: 0; }
}

@media (max-aspect-ratio: 3/2) {
  body { overflow: auto; }
  .page { min-height: 100dvh; align-items: center; }
  .artboard {
    width: 100vw;
    height: auto;
    max-height: none;
  }
}