#stage {
  flex: 1;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(6px, 1.2vmin, 14px);
  min-height: 0;
}

#board {
  position: relative;
  overflow: hidden;
  border-radius: clamp(10px, 2vmin, 20px);
  box-shadow: 0 0 0 4px rgba(255, 200, 61, 0.16), 0 0 0 8px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.55);
  touch-action: manipulation;
  cursor: crosshair;
  transition: filter 0.25s ease;
}
#board.paused { filter: blur(16px) brightness(0.5) saturate(0.7); pointer-events: none; }
#board.locked { cursor: wait; }
#board.near-found { cursor: pointer; }

#scene, #fx-layer { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
#scene { pointer-events: none; }
#fx-layer { pointer-events: none; z-index: 40; }

.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(8, 12, 24, 0.42) 100%);
  mix-blend-mode: multiply;
  z-index: 30;
}

.scene-item {
  position: absolute;
  transform: translate(-50%, -100%);
  will-change: auto;
}
.scene-item.anchor-c { transform: translate(-50%, -50%); }

.far-layer { position: absolute; inset: 0; pointer-events: none; }
.far-layer > svg { width: 100%; height: 100%; display: block; }

.sun, .moon { position: absolute; pointer-events: none; }

.island.buried > svg { clip-path: inset(0 0 44% 0 round 14%); }

.scene-item > svg { display: block; width: 100%; height: auto; }

.island { transition: opacity 0.3s ease; }
.island > svg { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }

.island.found > svg { animation: island-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.island.found { opacity: 0.45; }
.island.found::after {
  content: "";
  position: absolute;
  top: -6%; right: -10%;
  width: 34%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold-2) 55%, var(--gold-3));
  border-radius: 50%;
  border: max(2px, calc(var(--u) * 2)) solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  animation: badge-in 0.35s 0.15s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
}
@keyframes island-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-6deg); }
  70% { transform: scale(0.92) rotate(3deg); }
  100% { transform: scale(1); }
}
@keyframes badge-in {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.island.hint-flash > svg { animation: hint-flash 1.7s ease; }
@keyframes hint-flash {
  0%, 100% { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
  25%, 75% { filter: drop-shadow(0 0 18px rgba(255, 230, 120, 1)) brightness(1.5); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 230, 120, 1)) brightness(1.8); }
}

.island.camouflaged > svg { opacity: 0.88; }

.island.tucked > svg { transform: rotate(-6deg); }

.theme-island #scene {
  background: linear-gradient(180deg, #6fd3ff 0%, #aee9ff 38%, #ffe9b8 52%, transparent 52.5%),
              linear-gradient(180deg, #f9e2ab 0%, #eed9a4 100%);
}
.theme-jungle #scene {
  background: linear-gradient(180deg, #bfe8c6 0%, #8fd0a0 30%, #e8dca8 46%, #dcc98e 47%, #cdb87c 100%);
}
.theme-desert #scene {
  background: linear-gradient(180deg, #ffd98f 0%, #ffb96b 36%, #f79d4b 50%, #e8b06e 51%, #dd9f56 100%);
}
.theme-city #scene {
  background: linear-gradient(180deg, #1b1440 0%, #3d2a68 32%, #7c4a78 48%, #4a3a58 49%, #3a3050 100%);
}

.ground-band { position: absolute; left: 0; right: 0; bottom: 0; height: auto; }

.cloud { position: absolute; opacity: 0.85; animation: cloud-drift linear infinite; }
@keyframes cloud-drift {
  from { transform: translateX(-30%); }
  to { transform: translateX(calc(100vw)); }
}
.board-local .cloud { animation-name: cloud-drift-local; }
@keyframes cloud-drift-local {
  from { transform: translateX(-140px); }
  to { transform: translateX(var(--drift, 900px)); }
}

.wave-layer {
  position: absolute; left: -5%; right: -5%; height: 22%;
  background-image: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.35) 0 14px, transparent 14px 42px);
  border-radius: 50%/100%;
  opacity: 0.5;
  animation: wave-slide 7s linear infinite;
}
@keyframes wave-slide {
  from { background-position-x: 0; }
  to { background-position-x: 84px; }
}

.star-dot { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: twinkle ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }

.firefly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #d9ffa8; box-shadow: 0 0 8px 2px rgba(190, 255, 130, 0.65); animation: firefly-wander ease-in-out infinite alternate; }
@keyframes firefly-wander {
  from { transform: translate(0, 0); opacity: 0.15; }
  50% { opacity: 0.9; }
  to { transform: translate(var(--wx, 30px), var(--wy, -20px)); opacity: 0.3; }
}

.sway { transform-origin: 50% 100%; animation: sway-soft 5.5s ease-in-out infinite alternate; }
@keyframes sway-soft {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(1.8deg); }
}
.scene-item.sway { animation: sway-item 5.5s ease-in-out infinite alternate; }
@keyframes sway-item {
  from { transform: translate(-50%, -100%) rotate(-1.6deg); }
  to { transform: translate(-50%, -100%) rotate(1.8deg); }
}

.flicker { animation: flame-flicker 0.9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes flame-flicker {
  from { transform: scaleY(0.92) scaleX(1.04); opacity: 0.9; }
  to { transform: scaleY(1.08) scaleX(0.95); opacity: 1; }
}

.rune-glow { animation: rune-pulse 2.6s ease-in-out infinite alternate; }
@keyframes rune-pulse {
  from { opacity: 0.25; }
  to { opacity: 0.95; filter: drop-shadow(0 0 6px #7ef3ff); }
}

.glint {
  position: absolute;
  transform: translate(-50%, -50%);
  animation: glint-twinkle 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glint-twinkle {
  0%, 100% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 0.9; }
}

.ripple-ring {
  position: absolute;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 3px solid rgba(255, 120, 100, 0.9);
  animation: ripple-grow 0.55s ease-out forwards;
}
.ripple-ring.soft { border-color: rgba(255, 255, 255, 0.75); }
@keyframes ripple-grow {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(5.5); opacity: 0; }
}

.spark {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background: radial-gradient(circle at 35% 30%, #fff, var(--gold-2) 60%, var(--gold-3));
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
  animation: spark-fly 0.72s ease-out forwards;
}
@keyframes spark-fly {
  from { transform: translate(0, 0) scale(1.15) rotate(0deg); opacity: 1; }
  to { transform: translate(var(--sx, 40px), var(--sy, -46px)) scale(0.1) rotate(220deg); opacity: 0; }
}

.pop-score {
  position: absolute;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: max(15px, calc(var(--u) * 21));
  color: #fff;
  text-shadow: 0 2px 0 var(--gold-deep), 0 0 12px rgba(255, 200, 61, 0.8);
  white-space: nowrap;
  animation: score-rise 0.95s ease-out forwards;
}
.pop-score.bonus { color: var(--gold-1); }
.pop-score.penalty { color: #ffb3aa; text-shadow: 0 2px 0 #7c150c, 0 0 10px rgba(255, 80, 60, 0.7); }
@keyframes score-rise {
  from { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  20% { transform: translate(-50%, -12px) scale(1.1); opacity: 1; }
  to { transform: translate(-50%, -64px) scale(1); opacity: 0; }
}

.hint-ring {
  position: absolute;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 4px solid var(--gold-2);
  box-shadow: 0 0 18px rgba(255, 200, 61, 0.8), inset 0 0 12px rgba(255, 200, 61, 0.5);
  animation: hint-pulse 0.85s ease-out 3;
}
@keyframes hint-pulse {
  from { transform: scale(0.35); opacity: 1; }
  to { transform: scale(3.4); opacity: 0; }
}

.chip-mistakes.lost { animation: shake-chip 0.4s ease; }
@keyframes shake-chip {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

#hud .chip-time.warn b { color: #ffd2cb; animation: time-danger 0.8s steps(2) infinite; }
@keyframes time-danger { 50% { color: #ff8f7e; } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .wave-layer, .star-dot, .firefly, .glint, .sway, .scene-item.sway, .flicker, .rune-glow { animation: none !important; }
}