/* =================================================================
   PIE LAND — 우주 배경 (모든 페이지 공용)
   -----------------------------------------------------------------
   층 구성 (뒤 → 앞)
   1. html  : 깊은 우주색 + 성운(보라·청록·분홍 빛 번짐)
   2. body::before : 작은 별 (반복 타일)
   3. body::after  : 큰 별 (천천히 반짝임)
   4. .space-deco  : 고리 행성 · 작은 달 · 별똥별 (메인 페이지에만, HTML에 한 줄)
   모든 층은 화면에 고정되어 스크롤해도 제자리에 있고, 글·카드 뒤에 깔립니다.
   ================================================================= */

html {
  background-color: #060716;
  background-image:
    radial-gradient(ellipse 55% 40% at 12% 8%,  rgba(124, 92, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 45% 35% at 88% 22%, rgba(32, 212, 180, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 45% at 70% 92%, rgba(255, 94, 170, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 18% 70%, rgba(80, 120, 255, 0.12), transparent 70%),
    linear-gradient(180deg, #0a0b24 0%, #060716 55%, #08061a 100%);
  background-attachment: fixed;
  min-height: 100%;
}
body {
  background: transparent !important;   /* 페이지별 기존 배경 대신 우주 배경 사용 */
  position: relative;
  isolation: isolate;
}

/* 별 층: 화면에 고정된 반복 타일 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
/* 작은 별 */
body::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px,   rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1px 1px at 87px 133px,  rgba(255,255,255,.7), transparent 100%),
    radial-gradient(1px 1px at 151px 29px,  rgba(200,220,255,.8), transparent 100%),
    radial-gradient(1px 1px at 199px 187px, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 41px 211px,  rgba(255,230,250,.7), transparent 100%),
    radial-gradient(1px 1px at 121px 91px,  rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1px 1px at 233px 113px, rgba(190,255,240,.7), transparent 100%),
    radial-gradient(1px 1px at 63px 163px,  rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1px 1px at 173px 229px, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 9px 109px,   rgba(255,255,255,.5), transparent 100%);
  background-size: 250px 250px;
  opacity: .85;
}
/* 큰 별 (반짝반짝) */
body::after {
  background-image:
    radial-gradient(1.6px 1.6px at 61px 77px,   #fff, transparent 100%),
    radial-gradient(2px 2px     at 311px 191px, #ffe9a8, transparent 100%),
    radial-gradient(1.6px 1.6px at 213px 389px, #c8f5ff, transparent 100%),
    radial-gradient(2.2px 2.2px at 431px 59px,  #fff, transparent 100%),
    radial-gradient(1.6px 1.6px at 497px 331px, #ffd0ee, transparent 100%),
    radial-gradient(2px 2px     at 127px 463px, #fff, transparent 100%);
  background-size: 540px 540px;
  animation: pie-twinkle 4.5s ease-in-out infinite alternate;
}
@keyframes pie-twinkle {
  0%   { opacity: .35; }
  100% { opacity: 1; }
}

/* ---------- 장식: 고리 행성 · 달 · 별똥별 ---------- */
.space-deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.space-deco .planet {
  position: absolute; right: -40px; top: 120px;
  width: 170px; height: 170px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 30%, #b9a8ff 0%, #7c5cff 38%, #3b2a8f 72%, #1c1550 100%);
  box-shadow: inset -22px -18px 40px rgba(6, 7, 22, .65), 0 0 60px rgba(124, 92, 255, .35);
  opacity: .8;
}
.space-deco .planet::before {           /* 고리 */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 270px; height: 64px; margin: -32px 0 0 -135px;
  border-radius: 50%;
  border: 6px solid rgba(32, 212, 180, .55);
  border-top-color: rgba(32, 212, 180, .15);
  transform: rotate(-18deg);
}
.space-deco .moon {
  position: absolute; left: 4%; bottom: 14%;
  width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #f2c9a0 55%, #b08a6a 100%);
  box-shadow: inset -8px -6px 14px rgba(6, 7, 22, .55), 0 0 30px rgba(255, 210, 63, .25);
  opacity: .75;
}
.space-deco .shoot {
  position: absolute; top: 12%; left: -10%;
  width: 140px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9));
  transform: rotate(18deg);
  opacity: 0;
  animation: pie-shoot 9s ease-in 2s infinite;
}
.space-deco .shoot.s2 { top: 42%; animation-delay: 6.5s; animation-duration: 11s; }
@keyframes pie-shoot {
  0%   { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  2%   { opacity: 1; }
  10%  { transform: translate(110vw, 36vw) rotate(18deg); opacity: 0; }
  100% { transform: translate(110vw, 36vw) rotate(18deg); opacity: 0; }
}

@media (max-width: 600px) {
  .space-deco .planet { width: 110px; height: 110px; right: -44px; top: auto; bottom: 22%; opacity: .6; }   /* 휴대폰: 글과 겹치지 않게 아래쪽 가장자리로 */
  .space-deco .planet::before { width: 180px; height: 44px; margin: -22px 0 0 -90px; border-width: 4px; }
  .space-deco .moon { width: 30px; height: 30px; }
}

/* 움직임 줄이기 설정을 켠 사용자에게는 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
  body::after, .space-deco .shoot { animation: none; }
  .space-deco .shoot { display: none; }
}

/* 카드·패널이 별빛 위에서도 잘 읽히도록 살짝 반투명 + 블러 */
.game-card, .intro, .ps-result, .ps-board {
  background-color: rgba(29, 31, 58, .82) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.game-card:hover { background-color: rgba(37, 40, 74, .92) !important; }