/* Count the Stones — Stone Mine mini-game (JG-037). Shares the Chop Shop
   overlay (chop.css: top bar, sign, answers, end card); this adds the 3D belt,
   the reading question on the sign and the number tags. */

.stone {
  background: #bfe6f7;
}
.stone__3d {
  position: absolute;
  inset: 0;
}
.stone3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* swipes brush leaves away instead of scrolling (JG-041) */
}
.stone .chop__cargo {
  background: #eceff1;
}

/* the sign carries a sentence to read, not a sum */
.stone__sign {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: max-content; /* it sits at left: 50%, so don't let it shrink to half the screen */
  max-width: min(92vw, 52rem);
  box-sizing: border-box;
  padding: 0.35rem 1.4rem 0.45rem;
  font-size: clamp(1.45rem, 6.2vw, 2.3rem);
  white-space: normal;
}
.stone__ask {
  flex: 1;
  text-align: center;
}
.stone__hint {
  position: absolute;
  left: 50%;
  bottom: calc(max(14px, env(safe-area-inset-bottom)) + clamp(68px, 21vw, 116px) + 16px);
  transform: translateX(-50%);
  margin: 0;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #263238;
  font-weight: 800;
  font-size: 1.1rem;
  white-space: nowrap;
}
.stone__hint:empty {
  display: none;
}

/* the answers are grey stone discs instead of log rounds — four of them, so a bit smaller */
.stone .chop__answers {
  gap: clamp(8px, 2.5vw, 22px);
}
.stone__ans {
  flex-shrink: 0;
  width: clamp(68px, 21vw, 116px);
  height: clamp(68px, 21vw, 116px);
  background: radial-gradient(circle at 40% 35%, #f5f5f5 0 30%, #cfd8dc 60%, #b0bec5 100%);
  box-shadow:
    inset 0 0 0 9px #78909c,
    0 7px 0 #263238;
}
.stone__ans:active:not(:disabled) {
  box-shadow:
    inset 0 0 0 9px #78909c,
    0 2px 0 #263238;
}

/* numbers that pop over the counted stones */
.stone__tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stone__tag {
  position: absolute;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  transform: translate(-50%, -100%);
  border-radius: 999px;
  background: #ffd54f;
  border: 3px solid #263238;
  box-shadow: 0 3px 0 #263238;
  font-weight: 800;
  font-size: 1.1rem;
  animation: stone-tag 0.3s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes stone-tag {
  0% { transform: translate(-50%, -60%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .stone__sign {
    font-size: 1.25rem;
    max-width: 62vw;
  }
  .stone__hint {
    bottom: 96px;
    left: auto;
    right: 12px;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stone__tag {
    animation: none;
  }
}

/* ── JG-041: surprises on the belt ── */
.stone__coins {
  background: #fff3c4;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.stone__coins[hidden] {
  display: none;
}
.stone__coins.is-pop {
  animation: stone-coins 0.35s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes stone-coins {
  50% { transform: scale(1.2); }
}
.stone__flycoin {
  position: absolute;
  z-index: 5;
  margin: -17px 0 0 -17px;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.5, -0.3, 0.6, 1), opacity 0.6s;
  filter: drop-shadow(0 3px 0 rgba(38, 50, 56, 0.35));
}
.stone__pop {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  border: 3px solid #263238;
  box-shadow: 0 3px 0 #263238;
  font-weight: 800;
  font-size: 1.05rem;
  white-space: nowrap;
  pointer-events: none;
  animation: stone-pop 1.4s ease-out forwards;
}
.stone__pop.is-find {
  background: #fff8e1;
}
@keyframes stone-pop {
  0% { transform: translate(-50%, -60%) scale(0.4); opacity: 0; }
  15% { transform: translate(-50%, -100%) scale(1.08); opacity: 1; }
  25% { transform: translate(-50%, -100%) scale(1); }
  80% { opacity: 1; }
  100% { transform: translate(-50%, -150%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stone__pop,
  .stone__coins.is-pop {
    animation: none;
  }
  .stone__flycoin {
    transition: none;
  }
}