/* V2.13 — illustrated scenery only. Gameplay geometry lives in arcade-v2.css. */
body #scene {
  overflow: hidden;
  pointer-events: none;
  background: #123f70;
  contain: strict;
}
#scene > :not(.paradise-landscape) { display: none !important; }
#scene .paradise-landscape {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.8s ease;
}
#scene .paradise-landscape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Day remains the backing layer so a late image decode never reveals a blank sky. */
#scene .landscape-day,
body[data-paradise-phase="golden"] #scene .landscape-golden,
body[data-paradise-phase="sunset"] #scene .landscape-sunset,
body[data-paradise-phase="night"] #scene .landscape-night { opacity: 1; }
/* A soft glint over the water; no canvas loop or moving full-screen bitmap. */
body #scene::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 49% 9% 20% 65%;
  height: auto;
  clip-path: polygon(47% 0, 55% 0, 89% 100%, 0 100%);
  background: repeating-linear-gradient(178deg, transparent 0 13px, rgba(255,240,181,.19) 14px 15px, transparent 17px 25px);
  mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent);
  opacity: .28;
  filter: none;
  animation: paradise-water-glint 7s ease-in-out infinite;
}
body #scene::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  height: auto;
  clip-path: none;
  background: linear-gradient(90deg, rgba(2,19,40,.08), transparent 25% 75%, rgba(2,19,40,.08));
  filter: none;
  opacity: 1;
}
body[data-paradise-phase] #scene::before { filter: none; }
body[data-paradise-phase] #scene::after { filter: none; opacity: 1; }
@keyframes paradise-water-glint {
  0%, 100% { opacity: .16; transform: translateY(0); }
  50% { opacity: .38; transform: translateY(3px); }
}
/* Keep the existing expressive crab and its reactions; enlarge its illustration. */
#paradise-crab { scale: 1.65; }
.crab-body::after {
  content: ''; position: absolute; left: 8px; top: 6px;
  width: 6px; height: 3px; border-bottom: 1px solid #823239;
  border-radius: 0 0 50% 50%;
}
@media (orientation: portrait) {
  #scene .paradise-landscape img { object-position: center center; }
  body #scene::before { inset: 55% 9% 19% 64%; }
}
@media (orientation: portrait) and (max-width: 680px) {
  #paradise-crab { scale: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  #scene .paradise-landscape { transition: none; }
  body #scene::before { animation: none; }
  #paradise-crab, #paradise-crab * { animation: none !important; }
}