/* Wildseed Gachapon Show – cinematic gacha overlay (see gacha-show.js) */
@property --gs-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.gs {
  --gs-c1: #fff3c4; --gs-c2: #e9e2cf; --gs-glow: rgba(255, 246, 214, 0.55); --gs-ray: rgba(255, 246, 214, 0.12);
  position: fixed; inset: 0; z-index: 120000; overflow: hidden;
  font-family: inherit; color: #fff; user-select: none; -webkit-user-select: none;
}
.gs.hidden { display: none; }
.gs[data-tier="uncommon"] { --gs-c1: #8ef09d; --gs-c2: #3fbf6a; --gs-glow: rgba(130, 240, 150, 0.6); --gs-ray: rgba(130, 240, 150, 0.14); }
.gs[data-tier="rare"] { --gs-c1: #8fd3ff; --gs-c2: #3b8ff0; --gs-glow: rgba(110, 190, 255, 0.65); --gs-ray: rgba(110, 190, 255, 0.16); }
.gs[data-tier="epic"] { --gs-c1: #e2a6ff; --gs-c2: #9b4dff; --gs-glow: rgba(200, 130, 255, 0.7); --gs-ray: rgba(200, 130, 255, 0.18); }
.gs[data-tier="legendary"] { --gs-c1: #ffe17a; --gs-c2: #ff9a3c; --gs-glow: rgba(255, 210, 90, 0.85); --gs-ray: rgba(255, 215, 110, 0.24); }

.gs-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(44, 98, 76, 0.92), rgba(8, 26, 20, 0.97) 62%, rgba(3, 10, 8, 0.99)),
    #04100c;
  animation: gs-fade-in 0.35s ease-out both;
}
.gs-rays {
  position: absolute; left: 50%; top: 50%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, var(--gs-ray) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 14%, transparent 38%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.6) 14%, transparent 38%);
  opacity: 0.42; animation: gs-spin 40s linear infinite; transition: opacity 0.6s ease;
  pointer-events: none;
}
.gs[data-phase="burst"] .gs-rays, .gs[data-phase="results"] .gs-rays, .gs[data-phase="capsule"] .gs-rays { opacity: 1; }
.gs[data-phase="burst"] .gs-rays { animation-duration: 6s; }
.gs-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }

/* Top bar */
.gs-top { position: absolute; top: 18px; left: 22px; right: 22px; display: flex; align-items: center; gap: 12px; z-index: 8; }
.gs-brand { font-size: 12px; font-weight: 900; letter-spacing: 0.16em; color: #ffe39a; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
.gs-count { padding: 4px 12px; border-radius: 999px !important; font-size: 12px; background: rgba(255, 227, 154, 0.14); border: 1px solid rgba(255, 227, 154, 0.45); color: #fff3cf; }
#gacha-show .gs-skip {
  margin-left: auto; padding: 8px 18px !important; border-radius: 999px !important; cursor: pointer;
  background: rgba(8, 22, 17, 0.78) !important; color: #fff3cf !important; border: 1.5px solid rgba(255, 227, 154, 0.55) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  font: inherit; font-size: 13px !important; font-weight: 800 !important; transition: background 0.2s, transform 0.15s;
}
#gacha-show .gs-skip:hover { background: rgba(255, 227, 154, 0.22) !important; transform: translateY(-1px); }
.gs[data-phase="results"] .gs-skip { visibility: hidden; }

/* Stages */
.gs-stage {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, transform 0.5s ease, visibility 0s 0.35s;
}
.gs[data-phase="machine"] .gs-machine-stage,
.gs[data-phase="cranking"] .gs-machine-stage,
.gs[data-phase="reel"] .gs-reel-stage,
.gs[data-phase="landed"] .gs-reel-stage,
.gs[data-phase="capsule"] .gs-capsule-stage,
.gs[data-phase="burst"] .gs-capsule-stage,
.gs[data-phase="results"] .gs-results-stage {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.35s ease, transform 0.5s ease, visibility 0s;
}
.gs-machine-stage { transform: scale(0.88); cursor: pointer; }
.gs[data-phase="reel"] .gs-machine-stage { transform: translateY(-30vh) scale(0.55); }
.gs-reel-stage { transform: translateY(40px); }

.gs-hint {
  margin: 18px 0 0; padding: 7px 20px; border-radius: 999px !important;
  background: rgba(10, 28, 20, 0.78); border: 1.5px solid rgba(255, 227, 154, 0.55);
  font-size: 18px; font-weight: 900; color: #fff6d6; letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6), 0 0 18px var(--gs-glow); animation: gs-hint 1.2s ease-in-out infinite;
}
.gs[data-phase="cranking"] .gs-hint { opacity: 0; }

/* ---------------- Stage 1: Wildseed Gachapon Machine ---------------- */
.gs-machine {
  position: relative; width: 356px; height: 486px; cursor: pointer;
  display: grid; place-items: center;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, 0.65));
  animation: gs-bob 3s ease-in-out infinite;
}
@media (max-height: 760px) { .gs-machine { scale: 0.84; } }
@media (max-height: 600px) { .gs-machine { scale: 0.68; } }
.gs[data-phase="cranking"] .gs-machine { animation: gs-shake 0.09s linear 10; }

.gs-machine-halo {
  position: absolute; inset: 4% -10% 8%; border-radius: 50% !important; z-index: 0;
  background: radial-gradient(circle, var(--gs-glow) 0%, rgba(120, 235, 160, 0.22) 44%, transparent 70%);
  filter: blur(14px); animation: gs-pulse 2s ease-in-out infinite; pointer-events: none;
}
.gs-machine-art {
  position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain;
  image-rendering: pixelated; pointer-events: none;
  filter: drop-shadow(0 0 22px rgba(255, 232, 148, 0.28));
}
.gs[data-phase="cranking"] .gs-machine-art {
  filter: brightness(1.12) drop-shadow(0 0 28px rgba(210, 255, 170, 0.65));
}

.gs-dome {
  position: absolute; top: 82px; left: 48%; translate: -50% 0; z-index: 3;
  width: 232px; height: 196px; border-radius: 50% !important; overflow: hidden;
  pointer-events: none;
}
.gs-balls { position: absolute; inset: 0; }
.gs-ball {
  position: absolute; left: var(--x); top: var(--y); width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border-radius: 50% !important; clip-path: circle(50%);
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95) 0 10%, transparent 25%),
    linear-gradient(var(--r), var(--c) 0 48%, #7a5520 48% 52%, #fdfbf2 52% 100%);
  box-shadow: inset -4px -6px 8px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gs[data-phase="cranking"] .gs-ball {
  opacity: 0.92;
  animation: gs-churn 0.28s var(--d) ease-in-out infinite alternate;
}
.gs-dome-shine {
  position: absolute; top: 10%; left: 16%; width: 34%; height: 18%; border-radius: 50% !important;
  background: linear-gradient(rgba(255, 255, 255, 0.72), transparent); rotate: -28deg; pointer-events: none;
}

#gacha-show .gs-handle {
  position: absolute; top: 274px; right: 6px; z-index: 5;
  width: 78px !important; height: 78px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; cursor: pointer;
  background: radial-gradient(circle at 38% 32%, #fff8d6, #f5c451 54%, #b57419) !important;
  border: 4px solid #6b3f0d !important;
  box-shadow: 0 5px 0 #4d2c07, 0 0 24px rgba(255, 224, 120, 0.75) !important;
  animation: gs-handle-pulse 1.3s ease-in-out infinite;
}
#gacha-show .gs-handle:focus-visible { outline: 3px solid #fff !important; outline-offset: 4px; }
.gs-handle-bar {
  position: absolute; left: 50%; top: 50%; width: 62px; height: 16px; margin: -8px 0 0 -31px;
  border-radius: 999px !important; background: linear-gradient(#fffbe9, #dfa93a); border: 3px solid #6b3f0d;
}
.gs-handle-knob {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50% !important; background: radial-gradient(circle at 35% 30%, #a9f5b8, #2d7a4c); border: 3px solid #163f27;
}
#gacha-show.gs[data-phase="cranking"] .gs-handle { animation: gs-crank 0.82s cubic-bezier(0.45, 0, 0.3, 1) both; }

.gs-chute {
  position: absolute; bottom: 26px; left: 48%; translate: -50% 0; z-index: 4;
  width: 96px; height: 82px; border-radius: 50% !important; pointer-events: none;
}
.gs-drop-ball {
  position: absolute; left: 50%; top: 14px; width: 54px; height: 54px; margin-left: -27px;
  border-radius: 50% !important; clip-path: circle(50%); opacity: 0;
  background:
    radial-gradient(circle at 32% 26%, #fff 0 11%, transparent 26%),
    linear-gradient(165deg, var(--gs-c1) 0 47%, #7a5520 47% 53%, #fdfbf2 53% 100%);
  box-shadow: inset -5px -7px 10px rgba(0, 0, 0, 0.25), 0 0 28px var(--gs-glow), 0 0 10px #fff;
}
.gs-machine-stage.is-dropping .gs-drop-ball { animation: gs-drop 0.65s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }

/* ---------------- Stage 2: High-Speed Item Reel ---------------- */
.gs-reel-title { margin: 0 0 16px; font-size: 23px; font-weight: 900; color: #fff3cf; letter-spacing: 0.05em; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); animation: gs-hint 0.9s ease-in-out infinite; }
.gs[data-phase="landed"] .gs-reel-title { animation: none; opacity: 0.65; }
.gs-reel-window {
  position: relative; width: min(94vw, 1020px); height: 204px; border-radius: 24px !important; overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 26, 20, 0.96), rgba(20, 52, 40, 0.96));
  border: 3px solid #e7b54c;
  box-shadow: 0 0 0 7px rgba(122, 74, 18, 0.85), 0 0 70px var(--gs-glow), inset 0 0 44px rgba(0, 0, 0, 0.65);
}
.gs-reel-track { position: absolute; top: 22px; left: 0; display: flex; gap: 14px; will-change: transform; }
.gs-reel-track.is-fast { filter: blur(1.4px); }
.gs-reel-card {
  --card-top: #3b4a55; --card-bot: #1d262d; --card-edge: #c9d4de; --card-glow: rgba(255, 255, 255, 0.2);
  position: relative; flex: 0 0 132px; height: 156px; border-radius: 16px !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px 8px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); border: 3px solid var(--card-edge);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 14px var(--card-glow); box-sizing: border-box;
}
.gs-reel-badge {
  position: absolute; top: 5px; left: 6px; padding: 1px 7px; border-radius: 999px !important;
  background: var(--card-edge); color: #1a1206; font-size: 9px; font-weight: 900; letter-spacing: 0.03em;
}
.gs-reel-card b { font-size: 12px; line-height: 1.2; text-align: center; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-reel-art, .gs-card-art { display: grid; place-items: center; font-style: normal; font-size: 34px; }
.gs-reel-art { width: 72px; height: 72px; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)); }
.gs-reel-art img, .gs-card-art img, .gs-reel-art canvas, .gs-card-art canvas { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.gs-reel-card.is-winner { animation: gs-winner 1s cubic-bezier(0.3, 1.6, 0.5, 1) both; z-index: 2; position: relative; }
.gs-reel-pointer {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; z-index: 3;
  background: linear-gradient(transparent, #fff 12%, #ffe28a 50%, #fff 88%, transparent); box-shadow: 0 0 18px #ffd45a, 0 0 4px #fff;
}
.gs-reel-pointer::before, .gs-reel-pointer::after { content: ""; position: absolute; left: 50%; width: 0; height: 0; margin-left: -13px; border: 13px solid transparent; filter: drop-shadow(0 0 6px #ffd45a); }
.gs-reel-pointer::before { top: -2px; border-top: 18px solid #ffe28a; }
.gs-reel-pointer::after { bottom: -2px; border-bottom: 18px solid #ffe28a; }
.gs-reel-fade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(5, 16, 12, 0.96), transparent 24%, transparent 76%, rgba(5, 16, 12, 0.96)); }
.gs-reel-caption { min-height: 32px; margin: 20px 0 0; font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 22px var(--gs-glow); }
.gs-reel-caption:not(:empty) { animation: gs-title-in 0.55s cubic-bezier(0.3, 1.6, 0.5, 1) both; }

/* Tier palettes (shared by reel + result cards) */
.gs .tier-uncommon { --card-top: #2f5a3a; --card-bot: #15301d; --card-edge: #7fe08f; --card-glow: rgba(127, 224, 143, 0.35); }
.gs .tier-rare { --card-top: #24507a; --card-bot: #0f2742; --card-edge: #6cc0ff; --card-glow: rgba(108, 192, 255, 0.45); }
.gs .tier-epic { --card-top: #55307e; --card-bot: #261241; --card-edge: #cc8bff; --card-glow: rgba(204, 139, 255, 0.55); }
.gs .tier-legendary { --card-top: #6b4a10; --card-bot: #2d1c04; --card-edge: #ffd45a; --card-glow: rgba(255, 212, 90, 0.75); }
.gs-reel-caption.tier-legendary { color: #ffe9a3; }
.gs-reel-caption.tier-epic { color: #f0d0ff; }
.gs-reel-caption.tier-rare { color: #d4efff; }

/* ---------------- Stage 3: Capsule & Light Explosion ---------------- */
.gs-capsule-stage { cursor: pointer; }
#gacha-show .gs-capsule {
  position: relative; width: 196px !important; height: 196px !important; min-height: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; outline: none !important; cursor: pointer;
  animation: gs-cap-in 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both, gs-cap-wobble 0.5s 0.7s ease-in-out infinite;
}
#gacha-show.gs[data-tier="legendary"] .gs-capsule, #gacha-show.gs[data-tier="epic"] .gs-capsule {
  animation: gs-cap-in 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both, gs-cap-wobble 0.3s 0.7s ease-in-out infinite;
}
#gacha-show .gs-capsule:focus-visible { outline: none !important; }
.gs-capsule i { position: absolute; display: block; pointer-events: none; }
.gs-cap-glow {
  inset: -90px; border-radius: 50% !important;
  background: radial-gradient(circle, var(--gs-glow), transparent 64%);
  animation: gs-pulse 0.85s ease-in-out infinite;
}
.gs-cap-rays {
  inset: -120px; border-radius: 50% !important;
  background: repeating-conic-gradient(from 0deg, transparent 0deg 10deg, rgba(255, 250, 210, 0.45) 12deg 15deg, transparent 17deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
  mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: gs-spin 8s linear infinite;
}
.gs-cap-top {
  left: 0; right: 0; top: 0; height: 50%; border-radius: 98px 98px 0 0 !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95) 0 9%, transparent 30%),
    linear-gradient(170deg, var(--gs-c1), var(--gs-c2));
  border: 4px solid #6b4510; border-bottom: 0;
  box-shadow: inset 0 -7px 0 rgba(0, 0, 0, 0.16), inset -10px 6px 16px rgba(0, 0, 0, 0.15);
}
.gs[data-tier="legendary"] .gs-cap-top { animation: gs-hue 2.4s linear infinite; }
.gs-cap-bottom {
  left: 0; right: 0; bottom: 0; height: 50%; border-radius: 0 0 98px 98px !important;
  background: linear-gradient(#fffdf6, #e2d9c2);
  border: 4px solid #6b4510; border-top: 0;
  box-shadow: inset -10px -10px 18px rgba(0, 0, 0, 0.16);
}
.gs-cap-band {
  left: -6px; right: -6px; top: 50%; height: 18px; margin-top: -9px; border-radius: 999px !important;
  background: linear-gradient(#fff6cf, #d8ad48); border: 3px solid #6b4510;
  box-shadow: 0 0 18px rgba(255, 240, 175, 0.85);
}
.gs-cap-core {
  left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50% !important;
  background: radial-gradient(circle, #fff 0 42%, var(--gs-c1) 70%, transparent 100%);
  border: 3px solid #6b4510; box-shadow: 0 0 22px #fff, 0 0 36px var(--gs-glow);
}
#gacha-show .gs-capsule.is-cracking { animation: none; }
.gs-capsule.is-cracking .gs-cap-top { animation: gs-cap-top-off 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.gs-capsule.is-cracking .gs-cap-bottom { animation: gs-cap-bottom-off 0.65s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.gs-capsule.is-cracking .gs-cap-band { animation: gs-fade-out 0.2s forwards; }
.gs-capsule.is-cracking .gs-cap-core, .gs-capsule.is-cracking .gs-cap-glow { animation: gs-glow-boom 0.7s ease-out forwards; }
.gs[data-phase="burst"] .gs-capsule-stage .gs-hint { opacity: 0; }

.gs-flash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fff 0, rgba(255, 255, 255, 0.94) 32%, var(--gs-glow) 72%, transparent 100%);
}
.gs-flash.is-on { animation: gs-flash 0.95s ease-out forwards; }

/* ---------------- Stage 4: Results Pop-Up Grid ---------------- */
.gs-results-stage { justify-content: center; gap: 10px; padding: 66px 18px 24px; box-sizing: border-box; }
.gs-results-title {
  margin: 0; font-size: clamp(26px, 4vw, 44px); font-weight: 900; color: #fff6d6; letter-spacing: 0.03em; text-align: center;
  text-shadow: 0 4px 0 #7a4a12, 0 0 28px var(--gs-glow); animation: gs-title-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.gs-results-sub { color: rgba(255, 246, 214, 0.82); font-size: 13px; animation: gs-fade-in 0.6s 0.2s both; }
.gs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 154px)); justify-content: center; gap: 14px;
  width: min(95vw, 940px); max-height: 58vh; overflow-y: auto; overflow-x: hidden; padding: 16px 10px; box-sizing: border-box;
  perspective: 900px; scrollbar-width: thin;
}
.gs-grid.is-compact { grid-template-columns: repeat(auto-fit, minmax(120px, 136px)); gap: 11px; }
.gs-card {
  --card-top: #3b4a55; --card-bot: #1d262d; --card-edge: #c9d4de; --card-glow: rgba(255, 255, 255, 0.18);
  position: relative; height: 192px; border-radius: 18px !important; padding: 12px 8px 10px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px; overflow: hidden;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)); border: 3px solid var(--card-edge);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 24px var(--card-glow), inset 0 0 24px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(60px) scale(0.3) rotateY(100deg);
  animation: gs-card-pop 0.6s cubic-bezier(0.3, 1.55, 0.5, 1) var(--delay, 0ms) forwards;
}
.gs-grid.is-compact .gs-card { height: 174px; }
.gs.is-instant .gs-card { animation-duration: 0.01s, 3s; animation-delay: 0ms; }
.gs-card.tier-legendary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot)) padding-box,
    conic-gradient(from var(--gs-angle), #ffd45a, #ff8fd0, #9ff3ff, #b8ff9f, #ffd45a) border-box;
  animation: gs-card-pop 0.6s cubic-bezier(0.3, 1.55, 0.5, 1) var(--delay, 0ms) forwards, gs-border-spin 3s linear infinite;
}
.gs-card-shine {
  position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  transform: translateX(-100%); animation: gs-shine 2.8s calc(var(--delay, 0ms) + 0.7s) ease-in-out infinite;
}
.gs-card.tier-common .gs-card-shine { display: none; }
.gs-card-tier {
  position: absolute; top: 7px; left: 7px; padding: 2px 8px; border-radius: 999px !important; z-index: 1;
  font-size: 10px; font-weight: 900; color: #1b1206; background: var(--card-edge); letter-spacing: 0.04em;
}
.gs-card-art { width: 80px; height: 80px; margin-top: 16px; flex: 0 0 auto; filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.5)); animation: gs-float 2.6s ease-in-out infinite; }
.gs-grid.is-compact .gs-card-art { width: 68px; height: 68px; }
.gs-card-name { font-size: 12.5px; line-height: 1.25; text-align: center; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs-card-qty { font-size: 15px; font-weight: 900; color: #ffe28a; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); text-align: center; line-height: 1.15; }
.gs-card-sub { font-size: 10px; font-style: normal; color: rgba(255, 255, 255, 0.72); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gs.is-collecting .gs-card { animation: gs-collect 0.6s cubic-bezier(0.5, 0, 0.8, 0.4) calc(var(--j) * 45ms) forwards; opacity: 1; transform: none; }

.gs-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
#gacha-show .gs-claim {
  min-width: 280px; padding: 15px 38px !important; border-radius: 999px !important; cursor: pointer;
  border: 3px solid #7a4a12 !important; background: linear-gradient(180deg, #fff3ad, #ffc94a 52%, #e79a23) !important;
  color: #4a2a05 !important; font: inherit; font-size: 19px !important; font-weight: 900 !important; letter-spacing: 0.03em;
  box-shadow: 0 6px 0 #7a4a12, 0 0 32px rgba(255, 212, 90, 0.6) !important; animation: gs-claim-pulse 1.6s ease-in-out infinite;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
}
#gacha-show .gs-claim:hover:not(:disabled) { transform: translateY(-2px); }
#gacha-show .gs-claim:active:not(:disabled) { transform: translateY(4px) !important; box-shadow: 0 2px 0 #7a4a12, 0 0 20px rgba(255, 212, 90, 0.5) !important; }
#gacha-show .gs-claim:disabled { cursor: default; filter: saturate(0.5) brightness(0.85); animation: none; opacity: 0.75 !important; }
#gacha-show .gs-claim:focus-visible { outline: 3px solid #fff !important; outline-offset: 4px; }
.gs-status { min-height: 16px; font-size: 12px; color: rgba(255, 246, 214, 0.82); text-align: center; }
.gs-status.is-error { color: #ffb4b4; animation: gs-shake 0.1s linear 4; }

body.gacha-show-open #lumira-gacha-reveal { display: none !important; }

/* ---------------- Keyframes ---------------- */
@keyframes gs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-fade-out { to { opacity: 0; } }
@keyframes gs-spin { to { rotate: 360deg; } }
@keyframes gs-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes gs-shake { 0% { translate: 0 0; rotate: 0deg; } 25% { translate: -5px 1px; rotate: -1.2deg; } 50% { translate: 4px -1px; rotate: 1deg; } 75% { translate: -3px 0; rotate: -0.6deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes gs-hint { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.65; transform: translateY(-4px); } }
@keyframes gs-handle-pulse { 0%, 100% { box-shadow: 0 5px 0 #4d2c07, 0 0 0 0 rgba(255, 236, 160, 0.85); } 50% { box-shadow: 0 5px 0 #4d2c07, 0 0 0 15px rgba(255, 236, 160, 0); } }
@keyframes gs-crank { 0% { rotate: 0deg; } 15% { rotate: -25deg; } 85% { rotate: 380deg; } 100% { rotate: 360deg; } }
@keyframes gs-churn { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(var(--jx), var(--jy)) rotate(180deg); } }
@keyframes gs-drop { 0% { opacity: 0; transform: translateY(-28px) scale(0.5); } 45% { opacity: 1; transform: translateY(10px) scale(1.06); } 72% { transform: translateY(2px) scale(1.04, 0.94); } 100% { opacity: 1; transform: translateY(8px) scale(1); } }
@keyframes gs-winner { 0% { transform: scale(1); } 45% { transform: scale(1.18); box-shadow: 0 0 46px var(--card-edge), inset 0 0 20px rgba(255, 255, 255, 0.35); } 100% { transform: scale(1.1); box-shadow: 0 0 34px var(--card-edge), inset 0 0 20px rgba(255, 255, 255, 0.25); } }
@keyframes gs-title-in { 0% { opacity: 0; transform: scale(0.4) translateY(20px); } 100% { opacity: 1; transform: none; } }
@keyframes gs-cap-in { 0% { opacity: 0; transform: translateY(-70vh) rotate(-200deg) scale(0.6); } 70% { opacity: 1; transform: translateY(14px) rotate(8deg) scale(1.04, 0.94); } 100% { opacity: 1; transform: none; } }
@keyframes gs-cap-wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -9deg; } 75% { rotate: 9deg; } }
@keyframes gs-pulse { 0%, 100% { opacity: 0.65; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes gs-hue { to { filter: hue-rotate(360deg); } }
@keyframes gs-cap-top-off { to { transform: translate(-65px, -160px) rotate(-55deg); opacity: 0; } }
@keyframes gs-cap-bottom-off { to { transform: translate(55px, 140px) rotate(35deg); opacity: 0; } }
@keyframes gs-glow-boom { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(5); opacity: 0; } }
@keyframes gs-flash { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gs-card-pop { 0% { opacity: 0; transform: translateY(60px) scale(0.3) rotateY(100deg); } 60% { opacity: 1; transform: translateY(-8px) scale(1.08) rotateY(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes gs-border-spin { to { --gs-angle: 360deg; } }
@keyframes gs-shine { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@keyframes gs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes gs-claim-pulse { 0%, 100% { box-shadow: 0 6px 0 #7a4a12, 0 0 22px rgba(255, 212, 90, 0.45); } 50% { box-shadow: 0 6px 0 #7a4a12, 0 0 44px rgba(255, 212, 90, 0.9); } }
@keyframes gs-collect { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: translateY(-14px) scale(1.06); } 100% { opacity: 0; transform: translateY(65vh) scale(0.15); } }

@media (prefers-reduced-motion: reduce) {
  .gs-rays, .gs-machine, .gs-card-art, .gs-card-shine, .gs-hint, .gs-claim { animation: none !important; }
}