/* Mobile jitter fixes for 동물원 여행 intro / entry hint */
@media (max-width: 680px), (pointer: coarse) {
  .game-shell,
  .game-ui,
  .screen {
    height: 100svh !important;
    min-height: 0 !important;
    transition: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .game-shell:has(.intro-screen) .game-canvas {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .image-entry-hint {
    animation: none !important;
    top: auto !important;
    bottom: clamp(88px, 16vw, 120px) !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
    will-change: auto !important;
  }

  .image-entry-hint i {
    display: inline-block;
    animation: entry-arrow-bob 1.4s ease-in-out infinite;
  }

  .image-entry-hotspot {
    transition: none !important;
    top: auto !important;
    bottom: clamp(28px, 6vw, 52px) !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .image-entry-hotspot:active {
    transform: translate3d(-50%, 0, 0) scale(0.98) !important;
  }

  .intro-screen {
    background-attachment: scroll !important;
    contain: layout style paint;
  }
}

@keyframes entry-arrow-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -4px, 0);
  }
}

/* Wrong-food cute yuck reaction */
.detail-screen.is-feeding-yuck .detail-art {
  filter: saturate(0.92) brightness(0.98);
}

.yuck-burst {
  z-index: 5;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.yuck-expression {
  position: absolute;
  top: 38%;
  right: 24%;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  animation: 0.7s cubic-bezier(0.23, 1, 0.32, 1) both yuck-pop;
}

.yuck-expression .yuck-emoji {
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 #fff9);
  animation: 0.55s ease-in-out 0.08s both yuck-wobble;
}

.yuck-expression .yuck-eye {
  position: absolute;
  color: #5a3b2d;
  font-family: Jua, "Noto Sans KR", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 #fff8;
}

.yuck-expression .yuck-eye-left {
  top: 18px;
  left: 14px;
}

.yuck-expression .yuck-eye-right {
  top: 18px;
  right: 14px;
}

.yuck-expression .yuck-cheek {
  position: absolute;
  top: 8px;
  right: -2px;
  font-size: 14px;
  font-style: normal;
  animation: 0.9s ease-in-out 0.2s infinite yuck-sweat;
}

.yuck-expression .yuck-mouth {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  color: #8b4d3f;
  font-family: Jua, "Noto Sans KR", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -2px;
}

.yuck-burst > i {
  position: absolute;
  top: 43%;
  right: 26%;
  color: #c96a52;
  opacity: 0;
  font-family: inherit;
  font-size: 20px;
  font-style: normal;
  text-shadow: 0 2px 0 #fff9dfe6;
  animation: 1.6s cubic-bezier(0.23, 1, 0.32, 1) both yuck-scatter;
}

.yuck-burst > i:nth-of-type(2) {
  --yuck-x: -88px;
  --yuck-y: -70px;
  animation-delay: 0.04s;
}

.yuck-burst > i:nth-of-type(3) {
  --yuck-x: -42px;
  --yuck-y: -112px;
  font-size: 16px;
  animation-delay: 0.1s;
}

.yuck-burst > i:nth-of-type(4) {
  --yuck-x: 14px;
  --yuck-y: -96px;
  animation-delay: 0.06s;
}

.yuck-burst > i:nth-of-type(5) {
  --yuck-x: 68px;
  --yuck-y: -48px;
  font-size: 18px;
  animation-delay: 0.13s;
}

.yuck-burst > i:nth-of-type(6) {
  --yuck-x: 78px;
  --yuck-y: 10px;
  animation-delay: 0.09s;
}

.yuck-burst > i:nth-of-type(7) {
  --yuck-x: -72px;
  --yuck-y: 30px;
  font-size: 17px;
  animation-delay: 0.15s;
}

.yuck-burst > b {
  position: absolute;
  top: calc(38% + 54px);
  right: calc(22% - 12px);
  opacity: 0;
  padding: 3px 9px;
  border: 2px solid #ffd4c8;
  border-radius: 99px;
  background: #fff0ea;
  color: #8f4a3d;
  font-family: Jua, "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 0 #d88f7a;
  animation: 0.75s cubic-bezier(0.23, 1, 0.32, 1) 0.14s both yuck-label;
}

.animal-dialogue.is-yuck {
  border-color: #f0c4b8;
  background: linear-gradient(180deg, #fff8f4 0%, #ffece4 100%);
}

.animal-dialogue.is-yuck .dialogue-tail {
  border-color: #f0c4b8;
  background: #fff8f4;
}

.dialogue-face.is-yuck,
.yuck-face {
  position: relative;
}

.dialogue-face .yuck-face {
  position: absolute;
  inset: 0;
}

.dialogue-face .yuck-face .yuck-eye {
  position: absolute;
  top: 2px;
  color: #6a4338;
  font-family: Jua, "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.dialogue-face .yuck-face .yuck-eye-left {
  left: 1px;
}

.dialogue-face .yuck-face .yuck-eye-right {
  right: 1px;
}

.dialogue-face .yuck-face .yuck-cheek {
  position: absolute;
  top: -4px;
  right: -6px;
  font-size: 10px;
  font-style: normal;
  animation: 0.9s ease-in-out infinite yuck-sweat;
}

.dialogue-face .yuck-face .yuck-mouth {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  color: #9a5648;
  font-family: Jua, "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.food-feedback.is-yuck {
  border-color: #f0c0b2;
  background: linear-gradient(180deg, #fff6f1 0%, #ffe8df 100%);
}

.food-feedback.is-yuck b {
  color: #8f4a3d;
}

@keyframes yuck-pop {
  0% {
    opacity: 0;
    transform: scale(0.72) rotate(-8deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.08) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes yuck-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-7deg);
  }
  75% {
    transform: rotate(7deg);
  }
}

@keyframes yuck-sweat {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.85;
  }
  50% {
    transform: translateY(3px);
    opacity: 1;
  }
}

@keyframes yuck-scatter {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4) rotate(0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--yuck-x, 40px), var(--yuck-y, -60px)) scale(1.1) rotate(18deg);
  }
}

@keyframes yuck-label {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 680px), (pointer: coarse) {
  .yuck-expression {
    top: 36%;
    right: 20%;
    width: 58px;
    height: 58px;
  }

  .yuck-expression .yuck-emoji {
    font-size: 42px;
  }

  .yuck-burst > b {
    font-size: 12px;
    top: calc(36% + 46px);
    right: calc(18% - 8px);
  }
}

/* Mobile readability pass: keep the illustrated UI from feeling clipped/cramped. */
@media (max-width: 680px), (pointer: coarse) {
  .intro-screen {
    background-size: 100% 100% !important;
    background-position: center center !important;
  }

  .intro-screen::after {
    content: "동물원 먹이주기\A오늘은 내가 동물 탐험대!";
    white-space: pre;
    z-index: 2;
    position: absolute;
    top: calc(max(12px, env(safe-area-inset-top)) + 8px);
    left: 50%;
    width: min(88vw, 350px);
    padding: 13px 14px 11px;
    border: 3px solid #ffe7a1;
    border-radius: 22px 22px 28px 18px;
    background:
      linear-gradient(180deg, #d78a35 0%, #a66120 100%);
    color: #fff7cc;
    box-shadow:
      0 5px 0 #6c3b13,
      0 10px 24px #2f190b55,
      inset 0 2px 0 #ffd58a;
    text-align: center;
    text-shadow: 0 2px 0 #653711, 0 3px 8px #47220f99;
    font-family: Jua, "Noto Sans KR", sans-serif;
    font-size: clamp(30px, 9vw, 39px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    pointer-events: none;
    transform: translateX(-50%) rotate(-0.5deg);
  }

  .intro-vignette::before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    background:
      linear-gradient(180deg, #43bfe9 0%, #51c6ed 46%, #5ec6eaf2 74%, transparent 100%);
    pointer-events: none;
  }

  .intro-screen::after {
    background-image:
      radial-gradient(circle at 13% 25%, #ffd471 0 5px, transparent 6px),
      radial-gradient(circle at 87% 25%, #ffd471 0 5px, transparent 6px),
      linear-gradient(180deg, #d78a35 0%, #a66120 100%);
  }

  .image-entry-hotspot {
    width: min(94vw, 420px) !important;
    height: clamp(76px, 20vw, 96px) !important;
    bottom: calc(max(30px, env(safe-area-inset-bottom)) + 8px) !important;
    border-radius: 26px !important;
  }

  .image-entry-hint {
    bottom: calc(max(30px, env(safe-area-inset-bottom)) + clamp(154px, 39vw, 184px)) !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .map-screen {
    overflow: hidden !important;
  }

  .map-screen .map-art {
    object-position: center 47% !important;
    transform: scale(0.985);
    transform-origin: center center;
  }

  .game-header {
    inset: 8px 9px auto !important;
    grid-template-columns: minmax(118px, 1fr) auto !important;
    gap: 6px !important;
    align-items: start !important;
  }

  .game-header::before {
    height: 104px !important;
    top: -8px !important;
    left: -9px !important;
    right: -9px !important;
  }

  .explorer-chip {
    min-width: 0 !important;
    padding: 5px 8px 5px 5px !important;
    border-width: 2px !important;
    border-radius: 14px !important;
  }

  .mini-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 12px !important;
    font-size: 22px !important;
  }

  .explorer-chip small {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-actions {
    width: auto !important;
    gap: 5px !important;
    justify-content: flex-end !important;
  }

  .header-actions button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 11px !important;
    font-size: 16px !important;
  }

  .header-actions small {
    display: none !important;
  }

  .mission-progress {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 5px 7px !important;
    border-width: 2px !important;
    border-radius: 13px !important;
  }

  .mission-label {
    font-size: 11px !important;
  }

  .map-title {
    top: 116px !important;
    width: min(92vw, 330px) !important;
    padding: 8px 10px 7px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, #2b5d2588, #163b1a55) !important;
    box-shadow: 0 8px 22px #07340f33 !important;
  }

  .map-title span {
    font-size: 11px !important;
    padding: 5px 11px !important;
  }

  .map-title h2 {
    margin-top: 6px !important;
    font-size: clamp(24px, 7.2vw, 30px) !important;
    line-height: 1.05 !important;
  }

  .zone-marker {
    width: clamp(116px, 31vw, 138px) !important;
    min-height: 72px !important;
    padding: 5px !important;
    border-width: 2px !important;
    border-radius: 20px 20px 23px 23px !important;
    box-shadow: 0 4px #a26513, 0 8px 14px #2a461145 !important;
  }

  .zone-marker img {
    width: 52px !important;
    height: 52px !important;
    border-radius: 15px !important;
  }

  .zone-marker-text {
    padding: 2px 5px 2px 7px !important;
    gap: 0 !important;
  }

  .zone-marker-text em {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .zone-marker-text b {
    max-width: 62px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    line-height: 1.05 !important;
    word-break: keep-all;
  }

  .zone-marker-text small {
    margin-top: 2px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
  }

  .map-bottom-card {
    width: min(86vw, 330px) !important;
    min-width: 0 !important;
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 2px) !important;
    padding: 9px 10px 9px 13px !important;
    gap: 10px !important;
    border-width: 2px !important;
    border-radius: 18px !important;
  }

  .map-bottom-card strong {
    font-size: 15px !important;
    line-height: 1.18 !important;
  }

  .secondary-round {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }

  .zone-intro {
    max-width: min(58vw, 230px) !important;
  }

  .zone-intro h2 {
    font-size: clamp(31px, 9vw, 40px) !important;
    line-height: 0.96 !important;
  }

  .zone-intro p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .zone-animal-picker {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(max(9px, env(safe-area-inset-bottom)) + 1px) !important;
    max-height: min(31vh, 190px) !important;
    padding: 9px 10px 10px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .picker-title {
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }

  .zone-animal-grid {
    gap: 6px !important;
  }

  .zone-animal-card {
    min-height: 54px !important;
    padding: 5px 6px !important;
  }

  .zone-animal-card img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
  }

  .zone-animal-card b {
    font-size: 13px !important;
  }

  .zone-animal-card small {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }
}