#home { background: #f3ead9; overflow: hidden; }
.scene-viewport { position: absolute; inset: 0; overflow: hidden; }
.scene-track { display: flex; width: 100%; height: 100%; transition: transform 0.45s cubic-bezier(.6,.05,.3,1); }
.scene-page { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; }
/* Lo que la escena no cubre se rellena con su pared/cielo arriba y su suelo/césped abajo. */
.scene-page-interior { background: linear-gradient(#ece6ce 0 74%, #c48241 74%); }
.scene-page-garden { background: linear-gradient(#bfe6ff 0 58%, #a9dc8a 58%); }
/* Caja 16:9 apoyada en el suelo: cubre la pantalla pero nunca se agranda más de un 8 % sobre
   "caber entera", así que como mucho recorta un 4 % por lado. Los huecos van en % de esta caja. */
.scene-box {
  --cover: max(var(--app-w), calc(var(--app-h) * 16 / 9));
  --contain: min(var(--app-w), calc(var(--app-h) * 16 / 9));
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(var(--cover), calc(var(--contain) * 1.08)); aspect-ratio: 16 / 9; container-type: inline-size;
}
.scene-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.scene-bg-interior { --scene-fallback: linear-gradient(#f1e6c8 0 66%, #efd2b6 66% 74%, #e3b07a 74%); }
.scene-bg-garden { --scene-fallback: linear-gradient(#bfe6ff 0 58%, #a9dc8a 58%); }
.scene-decor, .slot-item { position: absolute; object-fit: contain; object-position: center bottom; }
.slot-pattern { background-size: 24cqw; background-repeat: repeat; background-position: center bottom; opacity: 0.92; }
.slot-missing { display: flex; align-items: flex-end; justify-content: center; font-size: 4cqw; }
.scene-items { position: absolute; inset: 0; }
/* Vista previa: se ve tal cual quedará, con un halo suave que late para distinguirla. */
.slot-item.is-preview { animation: preview-glow 1.6s ease-in-out infinite; }
@keyframes preview-glow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); } 50% { filter: drop-shadow(0 0 18px rgba(255,236,150,.95)); } }
.slot-item[data-movable="1"] { touch-action: none; cursor: grab; }
.slot-item.dragging { cursor: grabbing; filter: drop-shadow(0 12px 14px rgba(58,51,87,.35)); transform: scale(1.06); transition: none; z-index: 30 !important; }
.slot-item.bounce { animation: slot-bounce 0.6s ease-out; }
@keyframes slot-bounce { 0% { transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.anim-wiggle { animation: anim-wiggle 0.7s ease-in-out; transform-origin: center bottom; }
.anim-swing { animation: anim-swing 1.4s ease-in-out; transform-origin: center top; }
.anim-glow { animation: anim-glow 1.2s ease-in-out; }
@keyframes anim-wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes anim-swing { 25% { transform: rotate(14deg); } 60% { transform: rotate(-10deg); } 85% { transform: rotate(4deg); } }
@keyframes anim-glow { 50% { filter: brightness(1.35) drop-shadow(0 0 18px #fff6b0); } }

.scene-box .bird { --bird-w: 13cqw; }

.home-coins { position: absolute; top: 22px; right: 26px; z-index: 30; cursor: pointer; }
.home-play { position: absolute; left: 28px; bottom: 28px; z-index: 30; }
.home-shop { position: absolute; right: 28px; bottom: 28px; z-index: 30; }
.btn-img { width: 44px; height: 44px; object-fit: contain; }
.btn-img.is-emoji { width: auto; height: auto; }
.scene-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; font-size: 3rem; line-height: 1; padding-bottom: 6px; opacity: 0.92; }
.arrow-left { left: 20px; }
.arrow-right { right: 20px; }
.scene-label {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: rgba(255,255,255,.85); padding: 6px 20px; border-radius: 999px; font-weight: 700; font-size: 1.2rem;
}
#home.is-shopping .home-play, #home.is-shopping .home-shop, #home.is-shopping .scene-arrow { display: none; }

.home-rain { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.home-rain-coin { position: absolute; bottom: -40px; width: 42px; height: 42px; font-size: 2.2rem; animation: coin-up 1.6s ease-in forwards; }
/* Las monedas suben hasta el contador de la esquina superior derecha. */
@keyframes coin-up { to { left: calc(100% - 110px); bottom: calc(100% - 80px); transform: scale(0.5); opacity: 0.3; } }