/* ===== 캡슐 뽑기 머신 — 타원 거울 돔 + 월넛 바디 + 황동 트림 ===== */
.gacha-stage {
  position: relative; width: 100%; max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center;
  --gs: 1;
}
@media (max-width: 700px) { .gacha-stage { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.gacha-col { position: relative; min-width: 0; }
/* 머신은 360×590 원본 좌표로 그리고, JS가 계산한 --gs 로 통째로 스케일 */
.gacha-fit { position: relative; width: calc(360px * var(--gs)); height: calc(590px * var(--gs)); margin: 0 auto; }
.gacha-scale { position: absolute; left: 0; top: 0; width: 360px; height: 590px; transform: scale(var(--gs)); transform-origin: 0 0; }

.gacha { position: absolute; left: 0; top: 64px; width: 360px; height: 520px; transform-origin: 50% 100%; }
.gacha.shaking { animation: gacha-shake .16s linear infinite; }
@keyframes gacha-shake {
  0% { transform: translate(0,0) rotate(0); } 25% { transform: translate(-2px,1px) rotate(-.4deg); }
  50% { transform: translate(2px,-1px) rotate(.4deg); } 75% { transform: translate(-1px,2px) rotate(-.2deg); } 100% { transform: translate(0,0) rotate(0); }
}

/* 램프 */
.gacha .lamp-cord { position: absolute; left: 50%; top: -60px; width: 1px; height: 46px; background: var(--brass-3); }
.gacha .lamp-shade { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); width: 64px; height: 12px; border-radius: 0 0 32px 32px; background: linear-gradient(180deg, var(--brass-2), var(--brass-3)); z-index: 3; }
.gacha .lamp-shade::after { content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 260px; height: 140px; background: radial-gradient(ellipse at 50% 0%, rgba(241,180,98,.45), transparent 70%); pointer-events: none; }

/* 타원 거울 돔 (photo의 검은 타원 거울) */
.gacha .dome {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
  width: 340px; height: 250px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(ellipse at 40% 30%, #3B2C24, #1B1310 70%);
  box-shadow: 0 0 0 7px #17110E, 0 0 0 8.5px var(--brass), 0 0 0 10px #17110E, 0 20px 50px rgba(0,0,0,.5), inset 0 0 40px rgba(0,0,0,.6);
}
.gacha .dome .glare { position: absolute; left: 14%; top: 10%; width: 30%; height: 18%; border-radius: 50%; background: rgba(243,235,221,.18); transform: rotate(-20deg); filter: blur(3px); pointer-events: none; }
.gacha .capsules { position: absolute; inset: 0; }
/* 캡슐 — 힉스필드 3D 렌더 스프라이트(6색, --i 로 선택). 공은 구르고(i), 빛은 고정(::after) */
.capsule { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.capsule i, .drop-capsule {
  background: url('../assets/gacha-capsules.webp') calc(var(--i, 0) * 20%) 0 / 600% 100% no-repeat,
    linear-gradient(to bottom, var(--c1) 0 50%, var(--c2) 50% 100%);
}
.capsule i { position: absolute; inset: 0; border-radius: 50%; will-change: transform; }
.capsule::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.5), rgba(255,255,255,0) 30%), radial-gradient(circle at 60% 80%, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); }

/* 월넛 바디 */
.gacha .body {
  position: absolute; left: 50%; top: 262px; transform: translateX(-50%);
  width: 320px; height: 240px; border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, rgba(74,53,39,.25), rgba(26,19,16,.55)), url('../assets/tex-walnut.webp') center / 420px, #2B1F19;
  box-shadow: 0 0 0 1px rgba(201,162,77,.5), 0 24px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.gacha .body::before {
  content: ''; position: absolute; left: 12px; right: 12px; top: 12px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brass-3), var(--brass-2), var(--brass-3));
}
.gacha .label { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .28em; color: var(--brass-2); white-space: nowrap; }
.gacha .face { position: absolute; left: 26px; top: 58px; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; background: #150F0C; box-shadow: 0 0 0 2px var(--brass), 0 0 0 5px #17110E; display: flex; align-items: center; justify-content: center; }
.gacha .face img { width: 100%; height: 100%; object-fit: cover; }
.gacha .face .emoji-fallback { font-size: 50px; }
/* 레버 · 배출구 — 힉스필드 3D 렌더 */
.gacha .lever {
  position: absolute; right: 22px; top: 50px; width: 108px; height: 108px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #3A2B23, #1B1310);
  box-shadow: 0 8px 14px rgba(0,0,0,.55), 0 2px 3px rgba(0,0,0,.6);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: filter .2s;
}
@media (hover: hover) { .gacha .lever:hover { filter: brightness(1.08); } .gacha .lever:hover .lever-img { transform: rotate(18deg); } }
.gacha .lever:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.gacha .lever-img {
  position: absolute; inset: 0; border-radius: 50%;
  background: url('../assets/gacha-lever.webp') center / contain no-repeat;
  transition: transform .6s cubic-bezier(.2,1.3,.4,1);
}
.gacha .lever:active .lever-img { transform: rotate(40deg); transition-duration: .12s; }
/* 회전해도 빛 방향은 고정 — 위쪽 하이라이트/아래쪽 그림자 오버레이 */
.gacha .lever::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: linear-gradient(180deg, rgba(255,240,200,.16), transparent 45%, rgba(0,0,0,.22)); }
.gacha.shaking .lever { cursor: default; }
.gacha.shaking .lever .lever-img { animation: lever-spin .9s linear infinite; transition: none; }
@keyframes lever-spin { to { transform: rotate(360deg); } }
.gacha .chute {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 155px; height: 62px; border-radius: 12px;
  background: #0F0B09 url('../assets/gacha-chute.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}

/* 낙하 캡슐 */
.drop-capsule {
  position: absolute; left: 50%; top: 236px; width: 48px; height: 48px; margin-left: -24px;
  border-radius: 50%; opacity: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.drop-capsule.dropping { animation: capsule-drop 1.1s cubic-bezier(.3,.9,.4,1.15) forwards; }
@keyframes capsule-drop {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  55%  { opacity: 1; transform: translateY(201px) rotate(180deg) scale(.8); }
  70%  { transform: translateY(187px) rotate(200deg) scale(.8); }
  100% { opacity: 1; transform: translateY(199px) rotate(220deg) scale(.8); }
}

/* 롤링 숫자판 */
.roll-panel { text-align: center; }
.roll-panel .roll-label { font-family: var(--font-display); font-style: italic; font-size: 20px; letter-spacing: .18em; color: var(--brass-2); }
.roll-panel .roll-no {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 13vw, 170px); line-height: 1; letter-spacing: .02em; color: var(--cream);
  font-variant-numeric: tabular-nums; margin: 6px 0; min-height: 1em; text-shadow: 0 0 40px rgba(241,180,98,.35);
}
.roll-panel.rolling .roll-no { color: var(--brass-2); animation: roll-blur .12s linear infinite; }
@keyframes roll-blur { 0%,100% { filter: blur(0); transform: translateY(0); } 50% { filter: blur(1.5px); transform: translateY(-3px); } }
.roll-panel .roll-sub { font-family: var(--font-serif-kr); font-size: 20px; color: var(--on-dark-2); font-weight: 500; min-height: 1.6em; }

/* 캡슐 오픈 + 당첨 카드 */
/* 결과 레이어는 머신 전체를 덮은 채 남으므로 터치를 통과시킨다 (안 그러면 추첨 후 레버가 눌리지 않는다) */
.reveal { position: absolute; inset: 0; display: none; place-items: center; z-index: 5; pointer-events: none; }
.reveal.on { display: grid; }
.reveal .cap { position: relative; width: 180px; height: 180px; }
.reveal .half { position: absolute; left: 0; width: 180px; height: 90px; box-sizing: border-box; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.reveal .half.top { top: 0; border-radius: 90px 90px 0 0; background: url('../assets/gacha-capsules.webp') calc(var(--i, 0) * 20%) 0 / 600% 200% no-repeat, var(--c1); transform-origin: 20% 100%; }
.reveal .half.bot { bottom: 0; border-radius: 0 0 90px 90px; background: url('../assets/gacha-capsules.webp') calc(var(--i, 0) * 20%) 100% / 600% 200% no-repeat, var(--c2); transform-origin: 80% 0%; }
.reveal.on .cap { animation: cap-pop .45s cubic-bezier(.2,1.4,.4,1) both; }
.reveal.open .half.top { animation: half-top .5s cubic-bezier(.3,1.2,.4,1) forwards; }
.reveal.open .half.bot { animation: half-bot .5s cubic-bezier(.3,1.2,.4,1) forwards; }
@keyframes cap-pop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes half-top { to { transform: translate(-40px,-70px) rotate(-40deg); opacity: 0; } }
@keyframes half-bot { to { transform: translate(40px,70px) rotate(35deg); opacity: 0; } }
.reveal .win-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0);
  background: var(--cream) url('../assets/tex-paper.webp') center / 384px; color: var(--ink); border-radius: 18px; padding: 20px 34px 22px; text-align: center; min-width: 250px;
  box-shadow: 0 0 0 1px rgba(201,162,77,.7), 0 30px 60px rgba(0,0,0,.6), var(--glow-amber);
}
.reveal .win-card::before { content: ''; position: absolute; inset: 6px; border-radius: 13px; border: 1px solid rgba(201,162,77,.5); pointer-events: none; }
.reveal.open .win-card { animation: card-pop .55s cubic-bezier(.2,1.5,.4,1) .25s forwards; }
@keyframes card-pop { to { transform: translate(-50%,-50%) scale(1); } }
.win-card .wl { font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .2em; color: var(--wine-2); }
.win-card .wn { font-family: var(--font-display); font-size: 72px; font-weight: 700; line-height: 1.05; letter-spacing: .02em; color: var(--ink); }
.win-card .wname { font-family: var(--font-serif-kr); font-size: 22px; font-weight: 700; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .gacha.shaking, .gacha.shaking .lever .lever-img, .roll-panel.rolling .roll-no { animation: none; }
}