:root {
  color-scheme: dark;
  --bg: #08090d;
  --bg-soft: #141019;
  --text: #fff2c4;
  --gold: #f5c85c;
  --line: rgba(245, 200, 92, 0.36);
  --glow-warm: rgba(226, 171, 83, 0.18);
  --glow-cool: rgba(71, 120, 188, 0.16);
  --card-ink: #4b2d17;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

.page-shell {
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(100svh, 1fr) auto;
  gap: 0;
  padding: 0;
  background: var(--bg);
}

.site-header {
  position: absolute;
  left: 50%;
  top: clamp(44px, 8vw, 118px);
  z-index: 2;
  width: min(108vw, 1500px);
  pointer-events: none;
  transform: translateX(-50%);
}

.main-title-image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.12));
  user-select: none;
}

.dog-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #8fd1e8;
}

.stage-bg-video {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}

.stage-topline {
  position: absolute;
  left: clamp(24px, 4vw, 64px);
  right: clamp(24px, 4vw, 64px);
  top: clamp(20px, 3.2vw, 46px);
  z-index: 5;
  pointer-events: none;
  user-select: none;
}

.stage-topline-image {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.12));
}

.dog-stage.is-gacha-ready .site-header {
  display: none;
}

.speech-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 14px);
  z-index: 2;
  min-width: 190px;
  min-height: 56px;
  max-width: min(58vw, 760px);
  display: none;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 34px;
  padding: 12px 30px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(20, 24, 24, 0.46);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(1.18);
  font-size: clamp(1.2rem, 1.9vw, 1.92rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
}

.speech-bubble::after {
  display: none;
}

.speech-bubble.is-visible {
  display: grid;
}

.ambient-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  opacity: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.dog-button {
  position: absolute;
  z-index: 3;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 28px 28px rgba(37, 54, 24, 0.28));
  will-change: transform;
}

.dog-button::before,
.dog-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

.dog-button.is-guided::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(245, 200, 92, 0.36), rgba(245, 200, 92, 0.1) 45%, transparent 70%);
  filter: blur(2px);
  animation: guideGlow 1.8s ease-in-out infinite;
}

.dog-button.is-guided::after {
  border: 2px solid rgba(245, 200, 92, 0.46);
  animation: guideRipple 1.8s ease-out infinite;
}

.dog-button.is-click-glowing {
  filter:
    drop-shadow(0 28px 28px rgba(37, 54, 24, 0.28))
    drop-shadow(0 0 16px rgba(255, 242, 196, 0.72))
    drop-shadow(0 0 26px rgba(245, 200, 92, 0.44));
}

.dog {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.big-dog-button {
  left: 12%;
  bottom: -10%;
  width: clamp(330px, 40vw, 640px);
  animation: bigDogDrift 7.5s ease-in-out infinite;
}

.big-dog-button .speech-bubble {
  bottom: auto;
  top: clamp(12px, 2vw, 28px);
  max-width: min(62vw, 820px);
}

.small-dog-button {
  right: 14%;
  bottom: 8%;
  width: clamp(230px, 26vw, 410px);
  animation: smallDogDrift 6.8s ease-in-out infinite;
}

.dog-button.is-shaking .dog {
  animation: dogShake 0.34s linear;
}

.guide-cursor {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: clamp(48px, 7vw, 82px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.78);
  transition:
    left 0.52s cubic-bezier(0.2, 0.86, 0.24, 1.08),
    top 0.52s cubic-bezier(0.2, 0.86, 0.24, 1.08),
    opacity 0.18s ease,
    transform 0.18s ease;
}

.guide-cursor.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.guide-cursor.is-small-target {
  left: 76%;
  top: 62%;
}

.guide-cursor.is-big-target {
  left: 31%;
  top: 54%;
}

.guide-cursor img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.82))
    drop-shadow(0 0 18px rgba(245, 200, 92, 0.42))
    drop-shadow(0 10px 12px rgba(0, 0, 0, 0.34));
  transform-origin: 28% 28%;
  animation: guideCursorTap 1.08s ease-in-out infinite;
}

.guide-cursor-ring {
  position: absolute;
  left: 18%;
  top: 18%;
  z-index: 1;
  width: 42%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 242, 196, 0.82);
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(245, 200, 92, 0.52);
  animation: guideCursorRing 1.08s ease-out infinite;
}

.dog-stage.is-gacha-ready .guide-cursor {
  display: none;
}

.dog-stage.is-gacha-ready .big-dog-button,
.dog-stage.is-gacha-ready .small-dog-button {
  display: none;
}

.dog-stage.is-card-revealed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background: rgba(0, 0, 0, 0.76);
}

.dog-stage.is-card-revealed .background-card-dim {
  display: none;
}

.dog-stage.is-card-revealed .gacha-mode {
  filter: brightness(0.34);
}

.gacha-mode {
  position: absolute;
  left: 50%;
  bottom: -5%;
  z-index: 3;
  display: none;
  width: min(82vw, 820px);
  transform: translateX(-50%) scale(0.72);
  transform-origin: center bottom;
  animation: gachaEnter 1.45s ease forwards;
}

.dog-stage.is-gacha-ready .gacha-mode {
  display: block;
}

.gacha-bubble {
  left: 50%;
  top: 2%;
  bottom: auto;
  z-index: 7;
  min-width: 230px;
  max-width: min(44vw, 420px);
}

.gacha-dog,
.gacha-dog-bright {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.gacha-dog {
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.2));
  animation: gachaDogWiggle 2.8s ease-in-out infinite;
}

.gacha-dog-bright {
  display: none;
}

.gacha-dog-tap {
  position: absolute;
  left: 36%;
  top: 7%;
  z-index: 6;
  width: 28%;
  height: 34%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.background-card-dim {
  display: none;
}

.card-hotspots {
  position: absolute;
  left: -7%;
  right: -7%;
  bottom: -9%;
  z-index: 7;
  height: 46%;
}

.card-hotspot {
  position: absolute;
  bottom: 0;
  width: 14.4%;
  height: 128%;
  border: 0;
  border-radius: 14px;
  background:
    url("./assets/card-back.png") center / contain no-repeat;
  box-shadow: none;
  color: transparent;
  cursor: pointer;
  transform-origin: center bottom;
  transform: translateY(var(--card-y)) rotate(var(--card-rotation));
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease;
}

.card-hotspot:hover {
  filter: brightness(1.08);
  transform: translateY(calc(var(--card-y) - 18px)) rotate(var(--card-rotation)) scale(1.03);
  box-shadow: none;
}

.card-hotspot.is-picked {
  animation: cardPickMagic 0.72s ease-in-out;
}

.card-hotspot.is-picked::before {
  display: none;
}

.gacha-back-action {
  position: absolute;
  left: clamp(26px, 3.6vw, 58px);
  top: clamp(76px, 7.2vw, 110px);
  z-index: 8;
  width: 54px;
  height: 54px;
  display: none;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.54));
  cursor: pointer;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    opacity 0.14s ease;
}

.dog-stage.is-gacha-ready:not(.is-card-revealed) .gacha-back-action {
  display: grid;
}

.gacha-back-action:hover {
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.54))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.52));
  transform: translateY(-2px) scale(1.08);
}

.gacha-back-action:active {
  transform: translateY(2px) scale(0.9);
}

.gacha-back-action img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
}

.card-hotspots.is-shuffling .card-hotspot {
  pointer-events: none;
  animation: cardShuffle 0.98s cubic-bezier(0.2, 0.82, 0.22, 1);
}

.draw-result {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 8;
  display: none;
  transform: translate(-50%, -50%);
  perspective: 900px;
}

.draw-result.is-visible {
  display: block;
}

.draw-card-face {
  width: min(46vw, 340px);
  aspect-ratio: 400 / 624;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 22px;
  color: var(--card-ink);
  background: url("./assets/result-card-frame.png") center / 100% 100% no-repeat;
  box-shadow: 0 24px 34px rgba(0, 0, 0, 0.34);
  font-size: clamp(1.35rem, 3.8vw, 2.75rem);
  font-weight: 900;
  animation: cardReveal 0.7s cubic-bezier(0.2, 0.86, 0.24, 1.12);
}

.draw-card-face.is-true-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.88), rgba(255, 240, 189, 0.36) 34%, transparent 58%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
  isolation: isolate;
}

.draw-card-face.is-true-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
}

.true-dog-card-stage {
  position: relative;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: end center;
}

.draw-card-face.is-roaring .true-dog-card-stage {
  animation: trueDogCardSqueeze 0.46s ease-in-out infinite;
  transform-origin: center 72%;
}

.true-dog-image {
  width: min(100%, 300px);
  max-height: 100%;
  object-fit: contain;
  grid-area: 1 / 1;
  filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.28));
  user-select: none;
  pointer-events: none;
}

.true-dog-calm {
  transform: translateY(4px) scale(1.08);
  transform-origin: center 74%;
  transition:
    opacity 0.12s ease,
    transform 0.12s ease;
}

.draw-card-face:not(.is-roaring) .true-dog-calm {
  animation: trueDogCalmIdle 2.4s ease-in-out infinite;
}

.true-dog-roar {
  opacity: 0;
  transform: translateY(6px) scaleX(1.14) scaleY(0.88);
  transform-origin: center 72%;
}

.draw-card-face.is-roaring .true-dog-calm {
  opacity: 0;
  transform: translateY(18px) scaleX(1.18) scaleY(0.76);
}

.draw-card-face.is-roaring .true-dog-roar {
  opacity: 1;
  animation: roarDogSquash 0.32s steps(2, end) infinite;
}

.sonar-ring {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: -1;
  width: 48%;
  aspect-ratio: 1;
  border: 3px solid rgba(18, 15, 11, 0.44);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.24);
  pointer-events: none;
}

.draw-card-face.is-roaring .sonar-ring {
  animation: sonarBurst 0.92s ease-out infinite;
}

.draw-card-face.is-roaring .sonar-ring-two {
  animation-delay: 0.16s;
}

.draw-card-face.is-roaring .sonar-ring-three {
  animation-delay: 0.32s;
}

.true-dog-card-title {
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-clown-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.88), rgba(255, 240, 189, 0.32) 34%, transparent 58%),
    radial-gradient(circle at 50% 36%, rgba(227, 22, 34, 0.4), transparent 28%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
}

.draw-card-face.is-clown-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.clown-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  animation: clownDogGrow 1.85s cubic-bezier(0.18, 0.82, 0.26, 1) forwards;
  transform-origin: center 62%;
}

.clown-dog-image {
  width: min(112%, 330px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 20px 20px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 12px rgba(227, 22, 34, 0.28));
  user-select: none;
  pointer-events: none;
  animation: clownDogShake 0.16s steps(2, end) infinite;
  transform-origin: center 62%;
}

.clown-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-chicken-soup-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 244, 204, 0.92), rgba(247, 190, 68, 0.24) 36%, transparent 62%),
    radial-gradient(circle at 48% 58%, rgba(179, 28, 28, 0.28), transparent 36%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
}

.draw-card-face.is-chicken-soup-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.chicken-soup-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  transform: translateY(8px) scale(0.78);
  transform-origin: center 56%;
  animation: chickenSoupGroupGrow 2.15s cubic-bezier(0.16, 0.84, 0.24, 1) 1.18s forwards;
}

.chicken-soup-dog-image,
.chicken-soup-bowl-image {
  grid-area: 1 / 1;
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 18px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 12px rgba(219, 26, 30, 0.22));
  user-select: none;
  pointer-events: none;
}

.chicken-soup-dog-image {
  align-self: start;
  width: min(76%, 230px);
  transform: translateY(4px) scale(0.94);
  animation: chickenSoupDogAppear 0.62s cubic-bezier(0.2, 0.86, 0.24, 1.12) both;
}

.chicken-soup-bowl-image {
  align-self: end;
  width: min(92%, 290px);
  opacity: 0;
  transform: translateY(42px) scale(0.72);
  animation: chickenSoupBowlAppear 0.48s cubic-bezier(0.16, 0.84, 0.24, 1.12) 1.12s forwards;
}

.chicken-soup-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-alien-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 30%, rgba(217, 255, 180, 0.78), rgba(97, 156, 74, 0.3) 35%, transparent 60%),
    radial-gradient(circle at 48% 56%, rgba(34, 255, 119, 0.22), transparent 34%),
    linear-gradient(145deg, #fff0bd, #cfdf7e);
}

.draw-card-face.is-alien-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.alien-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  transform: translateY(8px);
  animation: alienFloat 1.3s ease-in-out infinite;
}

.alien-image {
  grid-area: 1 / 1;
  width: min(112%, 330px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 20px 18px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 16px rgba(96, 255, 128, 0.26));
  user-select: none;
  pointer-events: none;
}

.alien-open {
  opacity: 0;
}

.draw-card-face.is-alien-speaking .alien-open {
  animation: alienMouthTalk 0.18s steps(1, end) infinite;
}

.alien-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-chicken-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 246, 217, 0.88), rgba(214, 123, 44, 0.28) 35%, transparent 62%),
    radial-gradient(circle at 38% 58%, rgba(190, 92, 24, 0.34), transparent 28%),
    linear-gradient(145deg, #fff0bd, #e1a34d);
}

.draw-card-face.is-chicken-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.chicken-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.chicken-dog-image {
  width: min(112%, 330px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(229, 128, 43, 0.28));
  transform-origin: center 76%;
  user-select: none;
  pointer-events: none;
}

.draw-card-face.is-chicken-dog-bouncing .chicken-dog-image {
  animation: chickenDogBounce 0.42s cubic-bezier(0.2, 0.72, 0.24, 1) infinite;
}

.chicken-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-fortune-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 244, 184, 0.95), rgba(214, 38, 28, 0.3) 36%, transparent 62%),
    radial-gradient(circle at 28% 24%, rgba(255, 232, 87, 0.46), transparent 24%),
    radial-gradient(circle at 74% 28%, rgba(255, 232, 87, 0.38), transparent 24%),
    linear-gradient(145deg, #fff0bd, #d82222 58%, #f5c85c);
}

.draw-card-face.is-fortune-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.fortune-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.fortune-dog-image {
  position: relative;
  z-index: 2;
  width: min(100%, 300px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(255, 216, 90, 0.38));
  transform-origin: center 76%;
  user-select: none;
  pointer-events: none;
}

.draw-card-face.is-fortune-dog-shaking .fortune-dog-image {
  animation: fortuneDogShake 0.22s steps(2, end) infinite;
}

.fortune-spark {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #fff2c4;
  box-shadow:
    0 0 0 4px rgba(255, 242, 196, 0.34),
    0 0 18px rgba(255, 232, 87, 0.86);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.2);
  animation: fortuneSparkBurst 0.92s ease-out both;
}

.fortune-spark-two {
  animation-delay: 0.06s;
  --spark-x: -108px;
  --spark-y: -88px;
}

.fortune-spark-three {
  animation-delay: 0.1s;
  --spark-x: 116px;
  --spark-y: -76px;
}

.fortune-spark-four {
  animation-delay: 0.14s;
  --spark-x: -124px;
  --spark-y: 36px;
}

.fortune-spark-five {
  animation-delay: 0.18s;
  --spark-x: 124px;
  --spark-y: 42px;
}

.fortune-spark-six {
  animation-delay: 0.22s;
  --spark-x: 0;
  --spark-y: -118px;
}

.fortune-spark-one {
  --spark-x: -72px;
  --spark-y: -124px;
}

.fortune-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-news-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 54% 30%, rgba(255, 246, 217, 0.9), rgba(245, 200, 92, 0.28) 36%, transparent 62%),
    radial-gradient(circle at 70% 18%, rgba(255, 242, 196, 0.42), transparent 22%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
}

.draw-card-face.is-news-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.news-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.news-dog-image {
  width: min(110%, 320px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(255, 242, 196, 0.34));
  transform-origin: center 72%;
  user-select: none;
  pointer-events: none;
}

.draw-card-face.is-news-dog-wobbling .news-dog-image {
  animation: newsDogWobble 0.34s ease-in-out infinite;
}

.news-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-milk-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 247, 214, 0.92), rgba(245, 200, 92, 0.28) 36%, transparent 62%),
    radial-gradient(circle at 50% 58%, rgba(245, 200, 92, 0.22), transparent 32%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
}

.draw-card-face.is-milk-dog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.milk-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  transform-origin: center 72%;
}

.draw-card-face.is-milk-dog-moving .milk-dog-card-stage {
  animation: milkDogSway 0.4s ease-in-out infinite;
}

.milk-dog-image {
  grid-area: 1 / 1;
  width: min(92%, 280px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(255, 224, 114, 0.34));
  user-select: none;
  pointer-events: none;
}

.milk-dog-two {
  opacity: 0;
}

.draw-card-face.is-milk-dog-moving .milk-dog-two {
  animation: milkDogSwap 0.22s steps(1, end) infinite;
}

.milk-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-hakimi-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 247, 214, 0.92), rgba(245, 200, 92, 0.28) 36%, transparent 62%),
    radial-gradient(circle at 50% 56%, rgba(255, 255, 255, 0.2), transparent 30%),
    linear-gradient(145deg, #fff0bd, #f5c85c);
}

.draw-card-face.is-hakimi-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(18, 15, 11, 0.22);
  border-radius: 7px;
  pointer-events: none;
}

.hakimi-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
}

.hakimi-video {
  width: min(94%, 285px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 12px rgba(255, 242, 196, 0.34));
  user-select: none;
  pointer-events: none;
}

.hakimi-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-flying-dog-card {
  position: relative;
  width: min(52vw, 370px);
  overflow: hidden;
  grid-template-rows: 1fr auto;
  gap: 8px;
  padding: 18px 16px 16px;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 0, 76, 0.26), transparent 34%),
    radial-gradient(circle at 72% 28%, rgba(0, 194, 255, 0.24), transparent 34%),
    radial-gradient(circle at 52% 62%, rgba(98, 255, 96, 0.18), transparent 36%),
    linear-gradient(145deg, #fff0bd, #312239 62%, #f5c85c);
}

.draw-card-face.is-flying-dog-card::before,
.draw-card-face.is-flying-dog-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 7px;
  pointer-events: none;
}

.draw-card-face.is-flying-dog-card::before {
  border: 2px solid rgba(18, 15, 11, 0.22);
}

.draw-card-face.is-flying-dog-card::after {
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.42) 44%, transparent 68%),
    radial-gradient(circle at 22% 24%, rgba(255, 0, 76, 0.42), transparent 28%),
    radial-gradient(circle at 76% 32%, rgba(0, 194, 255, 0.38), transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(98, 255, 96, 0.34), transparent 28%);
  mix-blend-mode: screen;
}

.draw-card-face.is-flying-dog-partying::after {
  animation: flyingDogLights 0.56s steps(2, end) infinite;
}

.flying-dog-card-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  transform-origin: center 74%;
}

.draw-card-face.is-flying-dog-partying .flying-dog-card-stage {
  animation: flyingDogPulse 0.48s ease-in-out infinite;
}

.flying-dog-image {
  width: min(100%, 305px);
  max-height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 22px 20px rgba(0, 0, 0, 0.34))
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.28));
  user-select: none;
  pointer-events: none;
}

.flying-dog-card-title {
  position: relative;
  z-index: 1;
  align-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  width: 100%;
  border-top: 2px solid rgba(18, 15, 11, 0.22);
  padding-top: 10px;
  color: #120f0b;
  font-size: clamp(1.3rem, 3.1vw, 2.2rem);
  line-height: 1.05;
  text-align: center;
}

.draw-card-face.is-true-dog-card,
.draw-card-face.is-clown-dog-card,
.draw-card-face.is-chicken-soup-card,
.draw-card-face.is-alien-card,
.draw-card-face.is-chicken-dog-card,
.draw-card-face.is-fortune-dog-card,
.draw-card-face.is-news-dog-card,
.draw-card-face.is-milk-dog-card,
.draw-card-face.is-hakimi-card,
.draw-card-face.is-flying-dog-card {
  width: min(50vw, 360px);
  aspect-ratio: 400 / 624;
  border: 0;
  border-radius: 22px;
  padding: 46px 34px 36px;
  background: url("./assets/result-card-frame.png") center / 100% 100% no-repeat;
  box-shadow: 0 24px 34px rgba(0, 0, 0, 0.34);
}

.draw-card-face.is-true-dog-card::before,
.draw-card-face.is-clown-dog-card::before,
.draw-card-face.is-chicken-soup-card::before,
.draw-card-face.is-alien-card::before,
.draw-card-face.is-chicken-dog-card::before,
.draw-card-face.is-fortune-dog-card::before,
.draw-card-face.is-news-dog-card::before,
.draw-card-face.is-milk-dog-card::before,
.draw-card-face.is-hakimi-card::before,
.draw-card-face.is-flying-dog-card::before {
  display: none;
}

.draw-card-face.is-true-dog-card {
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.92), rgba(255, 220, 85, 0.34) 30%, transparent 58%),
    conic-gradient(from 20deg, rgba(255, 214, 84, 0.34), rgba(255, 124, 197, 0.28), rgba(91, 221, 255, 0.28), rgba(255, 244, 126, 0.36), rgba(255, 214, 84, 0.34)),
    url("./assets/result-card-frame.png") center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 3px rgba(255, 236, 132, 0.76),
    0 0 24px rgba(255, 191, 36, 0.86),
    0 0 58px rgba(255, 108, 24, 0.52),
    0 26px 44px rgba(0, 0, 0, 0.42);
}

.draw-card-face.is-true-dog-card::before,
.draw-card-face.is-true-dog-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  display: block;
  border-radius: 14px;
  pointer-events: none;
}

.draw-card-face.is-true-dog-card::before {
  z-index: 0;
  border: 2px solid rgba(255, 246, 164, 0.68);
  background:
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, 0.6) 38%, rgba(255, 216, 78, 0.2) 48%, transparent 66%),
    radial-gradient(circle at 16% 18%, rgba(255, 238, 88, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 24%, rgba(255, 255, 255, 0.86) 0 1px, transparent 3px),
    radial-gradient(circle at 18% 74%, rgba(255, 164, 47, 0.7) 0 2px, transparent 4px),
    radial-gradient(circle at 78% 72%, rgba(255, 246, 162, 0.82) 0 2px, transparent 4px);
  mix-blend-mode: screen;
  animation: ssrCardShimmer 1.85s linear infinite;
}

.draw-card-face.is-true-dog-card::after {
  inset: -18px;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 219, 84, 0.52), transparent 54%),
    radial-gradient(circle at 24% 24%, rgba(255, 111, 30, 0.42), transparent 32%),
    radial-gradient(circle at 82% 20%, rgba(255, 255, 255, 0.36), transparent 28%);
  filter: blur(10px);
  animation: ssrGlowPulse 1.45s ease-in-out infinite;
}

.draw-card-face.is-true-dog-card .true-dog-card-stage,
.draw-card-face.is-true-dog-card .true-dog-card-title {
  position: relative;
  z-index: 1;
}

.true-dog-card-title,
.clown-dog-card-title,
.chicken-soup-card-title,
.alien-card-title,
.chicken-dog-card-title,
.fortune-dog-card-title,
.news-dog-card-title,
.milk-dog-card-title,
.hakimi-card-title,
.flying-dog-card-title {
  border-top-color: rgba(75, 45, 23, 0.24);
  color: var(--card-ink);
  font-size: clamp(1.08rem, 2.45vw, 1.78rem);
}

.result-action {
  position: absolute;
  top: 52%;
  z-index: 9;
  width: 54px;
  height: 54px;
  display: none;
  place-items: center;
  border: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.62));
  transform: translateY(-50%);
  cursor: pointer;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    opacity 0.14s ease;
}

.dog-stage.is-card-revealed .result-action {
  display: grid;
}

.result-action:hover {
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.52));
  transform: translateY(calc(-50% - 2px)) scale(1.08);
}

.result-action:active {
  transform: translateY(calc(-50% + 2px)) scale(0.9);
}

.result-action img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
}

.collect-action {
  right: calc(50% - min(26vw, 185px) - 84px);
}

.collect-action.is-collected {
  animation: collectPop 0.34s ease;
  opacity: 1;
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.62))
    drop-shadow(0 0 12px rgba(245, 200, 92, 0.72));
}

.back-action {
  left: calc(50% - min(26vw, 185px) - 84px);
}

.collection-book {
  position: relative;
  width: min(96vw, 1440px);
  margin: 34px auto 42px;
  border: 1px solid rgba(245, 200, 92, 0.42);
  border-radius: 8px;
  padding: clamp(16px, 2.2vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 242, 196, 0.1), transparent 32%),
    radial-gradient(circle at 50% 0%, rgba(245, 200, 92, 0.18), transparent 42%),
    rgba(12, 10, 9, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 42px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.collection-book::before {
  content: "";
  position: absolute;
  inset: 58px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 200, 92, 0.5), transparent);
  pointer-events: none;
}

.collection-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.collection-head h2 {
  margin: 0;
  color: rgba(255, 242, 196, 0.96);
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.48);
}

.collection-head span {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  color: rgba(255, 242, 196, 0.78);
  background: rgba(0, 0, 0, 0.18);
  font-weight: 800;
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(145px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.collection-slot {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: clamp(218px, 22vw, 310px);
  border: 1px solid rgba(255, 242, 196, 0.2);
  border-radius: 8px;
  padding: clamp(10px, 1vw, 14px);
  color: rgba(255, 242, 196, 0.46);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 34%),
    url("./assets/card-back.png") center / cover no-repeat,
    rgba(0, 0, 0, 0.3);
  box-shadow:
    inset 0 0 0 2px rgba(0, 0, 0, 0.48),
    0 10px 0 rgba(0, 0, 0, 0.24),
    0 16px 24px rgba(0, 0, 0, 0.34);
  font: inherit;
  font-weight: 900;
  cursor: default;
  overflow: hidden;
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    box-shadow 0.16s ease;
}

.collection-slot:disabled {
  opacity: 1;
}

.collection-slot.is-collected {
  border-color: rgba(245, 200, 92, 0.58);
  color: var(--card-ink);
  background:
    url("./assets/result-card-frame.png") center / 100% 100% no-repeat,
    linear-gradient(145deg, #f8edd8, #e9d6ad);
  box-shadow:
    0 8px 0 rgba(81, 52, 25, 0.68),
    0 18px 26px rgba(0, 0, 0, 0.34);
  cursor: pointer;
}

.collection-slot.is-collected:hover {
  filter: brightness(1.06);
  transform: translateY(-4px);
}

.collection-slot.is-collected.is-ssr-card {
  border-color: rgba(255, 232, 111, 0.92);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.48), transparent 36%),
    conic-gradient(from 30deg, rgba(255, 218, 77, 0.28), rgba(255, 112, 207, 0.18), rgba(84, 219, 255, 0.2), rgba(255, 244, 135, 0.3), rgba(255, 218, 77, 0.28)),
    url("./assets/result-card-frame.png") center / 100% 100% no-repeat,
    linear-gradient(145deg, #fff1c5, #e9d6ad);
  box-shadow:
    0 0 0 2px rgba(255, 242, 146, 0.7),
    0 0 22px rgba(255, 187, 32, 0.72),
    0 0 42px rgba(255, 119, 24, 0.32),
    0 9px 0 rgba(93, 54, 18, 0.78),
    0 18px 28px rgba(0, 0, 0, 0.36);
}

.collection-slot.is-collected.is-ssr-card::before,
.collection-slot.is-collected.is-ssr-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.collection-slot.is-collected.is-ssr-card::before {
  inset: 5px;
  border: 2px solid rgba(255, 248, 176, 0.72);
  border-radius: 7px;
  box-shadow:
    inset 0 0 14px rgba(255, 210, 66, 0.32),
    0 0 18px rgba(255, 195, 42, 0.48);
  animation: ssrCollectionGlow 1.7s ease-in-out infinite;
}

.collection-slot.is-collected.is-ssr-card::after {
  inset: 0;
  border-radius: 8px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 247, 166, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 20%, rgba(255, 255, 255, 0.78) 0 1px, transparent 3px),
    radial-gradient(circle at 22% 78%, rgba(255, 178, 54, 0.72) 0 2px, transparent 4px),
    radial-gradient(circle at 78% 74%, rgba(255, 235, 111, 0.8) 0 2px, transparent 4px),
    linear-gradient(118deg, transparent 26%, rgba(255, 255, 255, 0.32) 46%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0.82;
  animation: ssrCollectionShimmer 2.1s linear infinite;
}

.collection-slot.is-collected.is-ssr-card .collection-card-art,
.collection-slot.is-collected.is-ssr-card .collection-nameplate {
  position: relative;
  z-index: 1;
}

.collection-slot.is-wiggling {
  animation: collectionCardWiggle 0.18s ease-in-out;
}

.collection-card-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(8px, 1.2vw, 18px) clamp(4px, 0.8vw, 12px) 6px;
}

.collection-card-art img {
  width: min(96%, 190px);
  max-height: clamp(130px, 15vw, 220px);
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.24));
  user-select: none;
  pointer-events: none;
}

.collection-nameplate {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(92, 58, 28, 0.26);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--card-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(245, 226, 185, 0.54)),
    rgba(248, 235, 205, 0.68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.66),
    0 3px 8px rgba(70, 44, 19, 0.18);
  font-size: clamp(0.88rem, 1.25vw, 1.15rem);
  line-height: 1.08;
  text-align: center;
}

.collection-card-locked {
  display: grid;
  place-items: center;
  color: rgba(255, 242, 196, 0.34);
  font-size: clamp(3rem, 6vw, 5.4rem);
  text-shadow: 0 0 18px rgba(245, 200, 92, 0.16);
}

.collection-slot:not(.is-collected) .collection-nameplate {
  border-color: rgba(255, 242, 196, 0.12);
  color: rgba(255, 242, 196, 0.46);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: none;
}

@keyframes collectionCardWiggle {
  0%,
  100% {
    transform: translateY(-2px) rotate(0deg);
  }

  25% {
    transform: translateY(-2px) rotate(-1.8deg);
  }

  50% {
    transform: translateY(-2px) rotate(1.6deg);
  }

  75% {
    transform: translateY(-2px) rotate(-0.8deg);
  }
}

@keyframes bigDogDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(22px, -18px, 0) rotate(1deg);
  }
}

@keyframes smallDogDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(1deg);
  }

  50% {
    transform: translate3d(-18px, 16px, 0) rotate(-1deg);
  }
}

@keyframes dogShake {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  18% {
    transform: translate3d(-8px, 3px, 0) rotate(-2.4deg);
  }

  36% {
    transform: translate3d(7px, -4px, 0) rotate(2.2deg);
  }

  54% {
    transform: translate3d(-5px, -2px, 0) rotate(-1.6deg);
  }

  72% {
    transform: translate3d(4px, 3px, 0) rotate(1.2deg);
  }
}

@keyframes guideGlow {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0.72;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

@keyframes guideRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.78);
    opacity: 0.72;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.42);
    opacity: 0;
  }
}

@keyframes guideCursorTap {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-6deg);
  }

  48% {
    transform: translate3d(-5px, -5px, 0) scale(0.92) rotate(-6deg);
  }

  68% {
    transform: translate3d(4px, 4px, 0) scale(1.04) rotate(-6deg);
  }
}

@keyframes guideCursorRing {
  0% {
    opacity: 0;
    transform: scale(0.35);
  }

  34% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}

@keyframes collectPop {
  0%,
  100% {
    transform: translateY(-50%) scale(1);
  }

  50% {
    transform: translateY(-50%) scale(1.14) rotate(6deg);
  }
}

@keyframes gachaDogWiggle {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  35% {
    transform: translate3d(-4px, 2px, 0) rotate(-0.7deg);
  }

  70% {
    transform: translate3d(4px, -2px, 0) rotate(0.7deg);
  }
}

@keyframes cardPickMagic {
  0%,
  100% {
    transform: translateY(var(--card-y)) rotate(var(--card-rotation));
    filter: brightness(1);
  }

  25% {
    transform: translateY(calc(var(--card-y) - 28px)) rotate(calc(var(--card-rotation) - 3deg)) scale(1.08);
    filter: brightness(1.7);
  }

  55% {
    transform: translateY(calc(var(--card-y) - 12px)) rotate(calc(var(--card-rotation) + 3deg)) scale(1.11);
    filter: brightness(2.1);
  }
}

@keyframes cardShuffle {
  0% {
    transform: translateY(var(--card-y)) rotate(var(--card-rotation));
  }

  24% {
    transform: translateX(var(--shuffle-x)) translateY(-18px) rotate(0deg) scale(0.92);
  }

  36% {
    transform: translateX(calc(var(--shuffle-x) - 10px)) translateY(-18px) rotate(-5deg) scale(0.92);
  }

  48% {
    transform: translateX(calc(var(--shuffle-x) + 10px)) translateY(-18px) rotate(5deg) scale(0.92);
  }

  60% {
    transform: translateX(calc(var(--shuffle-x) - 6px)) translateY(-18px) rotate(-3deg) scale(0.92);
  }

  72% {
    transform: translateX(var(--shuffle-x)) translateY(-18px) rotate(0deg) scale(0.92);
  }

  100% {
    transform: translateY(var(--card-y)) rotate(var(--card-rotation));
  }
}

@keyframes magicPulse {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  45% {
    opacity: 1;
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
    transform: scale(1.45);
  }
}

@keyframes gachaEnter {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.72) translateY(80px);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

@keyframes cardReveal {
  0% {
    opacity: 0;
    transform: translateY(80px) rotateY(82deg) scale(0.62);
  }

  100% {
    opacity: 1;
    transform: translateY(0) rotateY(0) scale(1);
  }
}

@keyframes ssrCardShimmer {
  0% {
    opacity: 0.52;
    background-position:
      -160px 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.58;
    background-position:
      180px 0,
      0 0,
      0 0,
      0 0,
      0 0;
  }
}

@keyframes ssrGlowPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes ssrCollectionGlow {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}

@keyframes ssrCollectionShimmer {
  0% {
    opacity: 0.5;
    transform: translateX(-8px);
  }

  50% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.56;
    transform: translateX(8px);
  }
}

@keyframes trueDogCardSqueeze {
  0%,
  100% {
    transform: scaleX(1) scaleY(1);
  }

  38% {
    transform: scaleX(1.045) scaleY(0.965);
  }

  68% {
    transform: scaleX(0.975) scaleY(1.035);
  }
}

@keyframes trueDogCalmIdle {
  0%,
  100% {
    transform: translateY(5px) scale(1.06) rotate(-0.5deg);
  }

  48% {
    transform: translateY(-3px) scale(1.09) rotate(0.6deg);
  }
}

@keyframes clownDogGrow {
  0% {
    transform: translateY(18px) scale(0.72);
  }

  62% {
    transform: translateY(-2px) scale(1.14);
  }

  100% {
    transform: translateY(-2px) scale(1.14);
  }
}

@keyframes clownDogShake {
  0%,
  100% {
    transform: translate3d(-4px, 2px, 0) rotate(-1.4deg);
  }

  50% {
    transform: translate3d(4px, -2px, 0) rotate(1.4deg);
  }
}

@keyframes chickenSoupDogAppear {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.74);
  }

  100% {
    opacity: 1;
    transform: translateY(4px) scale(0.94);
  }
}

@keyframes chickenSoupBowlAppear {
  0% {
    opacity: 0;
    transform: translateY(42px) scale(0.72);
  }

  100% {
    opacity: 1;
    transform: translateY(24px) scale(0.94);
  }
}

@keyframes chickenSoupGroupGrow {
  0% {
    transform: translateY(8px) scale(0.78);
  }

  72% {
    transform: translateY(-4px) scale(1.16);
  }

  100% {
    transform: translateY(-4px) scale(1.16);
  }
}

@keyframes alienFloat {
  0%,
  100% {
    transform: translateY(8px) rotate(-0.5deg);
  }

  50% {
    transform: translateY(0) rotate(0.5deg);
  }
}

@keyframes alienMouthTalk {
  0%,
  49% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes chickenDogBounce {
  0%,
  100% {
    transform: translateY(0) scaleX(1.04) scaleY(0.96);
  }

  38% {
    transform: translateY(-42px) scaleX(0.96) scaleY(1.05);
  }

  64% {
    transform: translateY(8px) scaleX(1.1) scaleY(0.9);
  }
}

@keyframes fortuneDogShake {
  0%,
  100% {
    transform: translate3d(-2px, 1px, 0) rotate(-0.8deg);
  }

  50% {
    transform: translate3d(2px, -1px, 0) rotate(0.8deg);
  }
}

@keyframes fortuneSparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(1.35);
  }
}

@keyframes newsDogWobble {
  0%,
  100% {
    transform: translate3d(-2px, 1px, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(2px, -1px, 0) rotate(1deg);
  }
}

@keyframes milkDogSway {
  0%,
  100% {
    transform: translateX(-8px) rotate(-2deg);
  }

  50% {
    transform: translateX(8px) rotate(2deg);
  }
}

@keyframes milkDogSwap {
  0%,
  49% {
    opacity: 0;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes flyingDogLights {
  0% {
    opacity: 0.2;
    filter: hue-rotate(0deg) brightness(1);
    transform: translateX(-18px) skewX(-8deg);
  }

  33% {
    opacity: 0.92;
    filter: hue-rotate(95deg) brightness(1.35);
    transform: translateX(10px) skewX(8deg);
  }

  66% {
    opacity: 0.68;
    filter: hue-rotate(210deg) brightness(1.22);
    transform: translateX(22px) skewX(-4deg);
  }

  100% {
    opacity: 0.18;
    filter: hue-rotate(320deg) brightness(1);
    transform: translateX(-18px) skewX(-8deg);
  }
}

@keyframes flyingDogPulse {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(-0.6deg);
    filter: saturate(1);
  }

  50% {
    transform: translateY(-5px) scale(1.035) rotate(0.6deg);
    filter: saturate(1.22);
  }
}

@keyframes roarDogSquash {
  0%,
  100% {
    transform: translateY(8px) scaleX(1.18) scaleY(0.84) rotate(-1.4deg);
    filter:
      drop-shadow(0 20px 20px rgba(0, 0, 0, 0.32))
      drop-shadow(0 0 12px rgba(255, 242, 196, 0.6));
  }

  50% {
    transform: translateY(-4px) scaleX(0.96) scaleY(1.14) rotate(1.4deg);
    filter:
      drop-shadow(0 24px 22px rgba(0, 0, 0, 0.34))
      drop-shadow(0 0 20px rgba(245, 200, 92, 0.72));
  }
}

@keyframes sonarBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.26);
  }

  24% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.05);
  }
}

@media (max-width: 760px) {
  .page-shell {
    min-height: 100vh;
    padding: 0;
    grid-template-rows: minmax(100svh, 1fr) auto;
  }

  .site-header {
    top: 42px;
    width: 138vw;
  }

  .main-title-image {
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.1));
  }

  .big-dog-button {
    left: -8%;
    bottom: 10%;
    width: min(84vw, 440px);
    transform-origin: center bottom;
  }

  .small-dog-button {
    right: 0%;
    bottom: 16%;
    width: min(50vw, 250px);
  }

  .guide-cursor {
    width: clamp(42px, 13vw, 68px);
  }

  .guide-cursor.is-small-target {
    left: 76%;
    top: 63%;
  }

  .guide-cursor.is-big-target {
    left: 32%;
    top: 58%;
  }

  .speech-bubble {
    min-width: 160px;
    min-height: 50px;
    max-width: min(92vw, 520px);
    padding: 10px 20px;
    bottom: calc(100% + 14px);
    border-radius: 28px;
    font-size: clamp(1rem, 4.8vw, 1.36rem);
  }

  .speech-bubble::after {
    display: none;
  }

  .big-dog-button .speech-bubble {
    top: 18px;
    max-width: min(94vw, 520px);
  }

  .gacha-mode {
    bottom: -8%;
    width: min(98vw, 520px);
  }

  .gacha-bubble {
    min-width: 168px;
    top: 1%;
    bottom: auto;
  }

  .collect-action {
    right: max(8px, calc(50% - min(38vw, 165px) - 52px));
  }

  .draw-card-face.is-true-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-clown-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-chicken-soup-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-alien-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-chicken-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-fortune-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-news-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-milk-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-hakimi-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .draw-card-face.is-flying-dog-card {
    width: min(76vw, 330px);
    padding: 14px 12px 12px;
  }

  .clown-dog-image {
    width: min(112%, 300px);
  }

  .chicken-soup-dog-image {
    width: min(74%, 210px);
  }

  .chicken-soup-bowl-image {
    width: min(90%, 270px);
  }

  .alien-image {
    width: min(108%, 300px);
  }

  .chicken-dog-image {
    width: min(108%, 300px);
  }

  .fortune-dog-image {
    width: min(96%, 280px);
  }

  .news-dog-image {
    width: min(106%, 290px);
  }

  .milk-dog-image {
    width: min(88%, 260px);
  }

  .hakimi-video {
    width: min(90%, 265px);
  }

  .flying-dog-image {
    width: min(96%, 280px);
  }

  .back-action {
    left: max(8px, calc(50% - min(38vw, 165px) - 52px));
  }

  .stage-topline {
    left: 18px;
    right: 18px;
    top: 18px;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }

  .stage-topline-left,
  .stage-topline-right {
    font-size: 0.78rem;
  }

  .stage-topline-left img {
    left: calc(100% - 6px);
    top: -11px;
    width: 38px;
  }

  .gacha-back-action {
    left: 18px;
    top: 66px;
    width: 46px;
    height: 46px;
  }

  .gacha-back-action img {
    width: 31px;
    height: 31px;
  }

  .collection-book {
    padding: 14px;
  }

  .collection-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .collection-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @keyframes bigDogDrift {
    0%,
    100% {
      transform: translate3d(0, 0, 0) rotate(-1deg);
    }

    50% {
      transform: translate3d(14px, -14px, 0) rotate(1deg);
    }
  }
}