:root {
  --digit-h: min(clamp(50px, 7vw, 104px), 15vh);
  --digit-w: min(clamp(36px, 4.6vw, 74px), 10.7vh);
  --gold: #f5c542;
  --text: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  color: var(--text);
  overflow: hidden;
  background: #0b0e1a;
}

/* ── 배경 영상 ─────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 화면 꽉 채우고 비율 유지 (잘리는 쪽이 자연스러움) */
}

/* 영상 로딩 실패/파일 없음 시 보이는 폴백 배경 */
.bg-fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #1a1040 0%, #0b0e1a 45%, #2a0a3a 100%);
  background-size: 300% 300%;
  animation: drift 18s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.8s;
}

body.no-video .bg-fallback { opacity: 1; }

@keyframes drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* 금가루 — 배경 위, 콘텐츠 뒤에서 은은하게 떠다님 */
.dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ── 레이아웃 (포스터형 배치) ─────────────── */
.content {
  position: relative;
  height: 100dvh;
}

.top-center {
  position: absolute;
  top: 8vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.title {
  font-size: clamp(22px, 2.4vw, 38px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* 타이틀 아래 Lucky Draw */
.page-lucky {
  margin-top: clamp(10px, 2vh, 22px);
  font-size: clamp(48px, 6.94vw, 118px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(20px, 5vh, 44px);
  font-size: clamp(20px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.site {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(20px, 5vh, 44px);
  font-size: clamp(11px, 1.2vw, 14px);
  opacity: 0.85;
}

/* 릴 무대 — 중앙보다 살짝 위 */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 1단계 묶음: 슬롯 + 7개 번호 */
.phase1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3.5vh, 32px);
}

/* hidden 속성이 display: flex 에 덮이지 않게 */
[hidden] {
  display: none !important;
}

/* ── 2단계: 경품(좌) + 릴(우) — 릴은 1단계보다 크게 ── */
.phase2 {
  --digit-h: min(clamp(120px, 18vw, 220px), 24vh);
  --digit-w: min(clamp(85px, 13vw, 164px), 17.2vh);
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
  animation: phase-in 0.5s ease;
}

@keyframes phase-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.prizes {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 32px);
  text-align: left;
}

.prize-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 22px);
  white-space: nowrap;
}

/* 등수는 윗줄, 경품명은 아랫줄 — 큼직하게 */
.prize-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 24px);
}

/* 등수 */
.prize-row .rank {
  font-size: clamp(32px, 3.75vw, 62px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}

.prize-row .prize {
  font-size: clamp(28px, 3.6vw, 60px);
  font-weight: 700;
  line-height: 1.2;
}

/* 등수 전환 애니메이션: 현재 등수는 위로 빠지고 다음 등수가 아래에서 등장 */
.prize-row.leaving {
  animation: prize-out 0.45s ease both;
}

.prize-row.entering {
  animation: prize-in 0.55s cubic-bezier(0.2, 1.2, 0.35, 1) both;
}

@keyframes prize-out {
  to {
    opacity: 0;
    transform: translateY(-28px) scale(0.94);
  }
}

@keyframes prize-in {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prize-row .pnum span {
  display: inline-block;
  animation: winner-pop 0.7s cubic-bezier(0.18, 1.5, 0.35, 1) both;
}

/* 번호 등장: 크게 튀어나왔다가 제자리로 (팝 + 페이드) */
@keyframes winner-pop {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(30px);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ── 당첨자 발표 화면 (디자인 6페이지) ─────── */
/* 번호 카드가 화면 정중앙에 오도록: 카드가 기준이고
 * 텍스트들은 카드 위/아래에 절대배치로 붙음 */
/* 상단 타이틀 아래 영역 전체에 세로로 차곡차곡 — 겹침 원천 차단 */
/* 디자인 7페이지: 카드 중심 44.6%, 등수 31%, 축하문구 62% */
.winner-screen {
  --digit-h: 18vh;
  --digit-w: 12.9vh;
  position: relative;
  animation: ws-in 0.7s ease;
}

.ws-rank {
  position: absolute;
  bottom: calc(100% + 1.8vh);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(24px, 3.1vw, 52px);
  font-weight: 700;
  white-space: nowrap;
  color: var(--gold);
}

/* Congratulations! */
.ws-congrats {
  position: absolute;
  top: calc(100% + 4.6vh);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: clamp(24px, 3vw, 48px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold);
}

@keyframes ws-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ws-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 24px);
  white-space: nowrap;
}

.ws-sub {
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 600;
}

.ws-lucky {
  font-family: "Palatino", "Georgia", "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(52px, 7.5vw, 120px);
  line-height: 1;
  background: linear-gradient(180deg,
    #fff7c9 0%, #f6dc82 25%, #d3a344 48%, #92651e 60%,
    #c89a3c 72%, #f8e296 90%, #fff3b6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* N등 당첨자 — 이미지 */

.ws-cards {
  display: flex;
  gap: 1.6vh;
}

/* 번호 카드 — 릴과 같은 글래스 스타일 (정지 상태) */
.ws-card {
  width: var(--digit-w);
  height: var(--digit-h);
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--digit-h) * 0.62);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── 슬롯 릴 ─────────────────────────────── */
.slot-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6vh;
}

.slot-row {
  display: flex;
  gap: clamp(28px, 3.8vw, 68px);
}

/* 번호 하나 = 릴 3개 묶음 */
.slot {
  display: flex;
  gap: clamp(5px, 0.7vw, 10px);
}

.reel {
  width: var(--digit-w);
  height: var(--digit-h);
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
}

/* 릴 위아래 그라데이션 — 숫자가 원통에서 도는 느낌 */
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.55) 0%, transparent 30%,
    transparent 70%, rgba(0,0,0,0.55) 100%);
}

.strip {
  will-change: transform;
}

.strip span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--digit-h);
  font-size: calc(var(--digit-h) * 0.62);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* ── 로딩 화면 ───────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  background: #070a14;
  transition: opacity 0.6s ease;
}

.loader.done {
  opacity: 0;
  pointer-events: none;
}

.loader-title {
  font-size: clamp(30px, 4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.loader-bar {
  width: min(360px, 40vw);
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.loader-bar i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d3a344, #f6dc82, #fff7c9);
  transition: width 0.25s ease;
}

.loader-pct {
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.55);
}

/* 준비 완료 — 클릭 안내 */
.loader-pct.ready {
  color: rgba(246, 220, 130, 0.9);
  letter-spacing: 0.06em;
  animation: ready-pulse 1.6s ease-in-out infinite;
}

@keyframes ready-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}