/* 처음 찾은 보물을 보여 주는 한 장짜리 화면과, 도감에서 그 칸을 짚어 주는 강조. */
.treasure-discovery { width: min(92vw, 480px); max-width: min(92vw, 480px); text-align: center; }
.treasure-discovery h2 { margin: 10px 0 8px; }
.treasure-discovery .dialog-eyebrow { display: block; }
.treasure-discovery-note { margin: 0 0 14px; font-size: 12px; line-height: 1.9; color: #797e69; }

.treasure-discovery-stage {
  width: min(70vw, 320px); aspect-ratio: 1; margin: 0 auto 20px;
  border: 1px solid #dcd8c2; border-radius: 22px;
  background: radial-gradient(circle at 50% 38%, #fffdf3 0%, #f1ecda 62%, #e6e1cd 100%);
  box-shadow: inset 0 2px 14px #b9b39433;
  overflow: hidden; touch-action: none;
}
.treasure-discovery-canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; cursor: grab; }
.treasure-discovery-canvas:active { cursor: grabbing; }

.treasure-discovery-actions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; }
.treasure-discovery-actions button { min-width: 122px; }

@media (min-width: 700px) {
  .treasure-discovery-stage { width: 368px; }
}
@media (prefers-reduced-motion: reduce) {
  .treasure-collection > div.is-new { animation: none; }
}

/* 도감을 열었을 때 방금 기록한 칸을 짚어 준다. */
.treasure-collection > div.is-new {
  border-radius: 12px; outline: 2px solid #b98a4a; outline-offset: 4px;
  background: #fdf3dd; color: #6a5a3a;
  animation: treasure-new-pulse 1.1s ease-out 2;
}
.treasure-collection > div.is-new:focus-visible { outline-color: #3f5a40; }
@keyframes treasure-new-pulse {
  0% { box-shadow: 0 0 0 0 #c79c5a66; }
  70% { box-shadow: 0 0 0 9px #c79c5a00; }
  100% { box-shadow: 0 0 0 0 #c79c5a00; }
}