*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:Arial,sans-serif;background:#fff}.app,.scene{width:100vw;height:100vh;position:relative;overflow:hidden}.scene{background:center/100% 100% no-repeat}.scene-element{position:absolute;transform:translate(-50%,-50%);cursor:pointer;user-select:none;transition:transform .25s ease,filter .25s ease}.scene-element img{width:100%;height:auto;display:block;pointer-events:none}.scene-element.hover-scale:hover{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.08)}.scene-element.hover-glow:hover{transform:translate(-50%,-50%) scale(1.05);filter:drop-shadow(0 0 12px rgba(255,220,0,.95))}.scene-element.hover-bounce:hover{animation:hoverBounce .45s ease}.tooltip{position:absolute;background:#fff4b4;border:3px solid #ffc107;color:#10215c;padding:8px 14px;border-radius:16px;font-weight:bold;font-size:clamp(12px,1.2vw,18px);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease;box-shadow:0 5px 0 rgba(0,0,0,.25);z-index:999}.scene-element:hover .tooltip{opacity:1}.tooltip.top{left:50%;bottom:105%;transform:translateX(-50%)}.tooltip.bottom{left:50%;top:105%;transform:translateX(-50%)}.tooltip.left{right:105%;top:50%;transform:translateY(-50%)}.tooltip.right{left:105%;top:50%;transform:translateY(-50%)}.scene-text{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:min(900px,85%);min-height:60px;background:rgba(255,255,255,.92);border:3px solid #ffc107;border-radius:22px;padding:15px;text-align:center;font-size:clamp(13px,1.4vw,22px);font-weight:bold;color:#10215c;z-index:1000}.narration-button{position:absolute;right:3%;bottom:4%;z-index:1001;border:0;border-radius:18px;background:#ffc107;color:#10215c;font-weight:bold;padding:13px 18px;font-size:16px;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.25)}.options-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2000;display:flex;gap:22px;align-items:center;justify-content:center;padding:22px;background:rgba(255,255,255,.92);border:4px solid #ffc107;border-radius:28px;box-shadow:0 8px 0 rgba(0,0,0,.25)}.option-card{width:190px;min-height:150px;border:0;border-radius:22px;background:#fff4b4;color:#10215c;font-weight:bold;font-size:18px;padding:16px;cursor:pointer;box-shadow:0 6px 0 rgba(0,0,0,.28);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.option-card img{max-width:110px;max-height:80px}.hidden{display:none}.idle-float{animation:idleFloat 2.8s ease-in-out infinite}.idle-pulse{animation:idlePulse 2s ease-in-out infinite}.idle-swing{animation:idleSwing 2.4s ease-in-out infinite;transform-origin:center bottom}.idle-hop{animation:idleHop 2.2s ease-in-out infinite}.idle-spin-soft{animation:idleSpinSoft 5s linear infinite}.click-pop{animation:clickPop .35s ease}.click-jump{animation:clickJump .45s ease}.click-shake{animation:clickShake .35s ease}.click-spin{animation:clickSpin .55s ease}@keyframes idleFloat{0%,100%{margin-top:0}50%{margin-top:-12px}}@keyframes idlePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}@keyframes idleSwing{0%,100%{rotate:-3deg}50%{rotate:3deg}}@keyframes idleHop{0%,100%{margin-top:0}50%{margin-top:-8px}}@keyframes idleSpinSoft{from{rotate:0}to{rotate:360deg}}@keyframes hoverBounce{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-57%) scale(1.08)}}@keyframes clickPop{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}@keyframes clickJump{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-72%)}}@keyframes clickShake{0%,100%{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-54%,-50%) rotate(-5deg)}75%{transform:translate(-46%,-50%) rotate(5deg)}}@keyframes clickSpin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}.aviso-vertical{display:none;position:fixed;inset:0;z-index:9999;background:#fff4b4;color:#10215c;align-items:center;justify-content:center;text-align:center;padding:30px}.aviso-contenido{max-width:420px;background:#fff;border:4px solid #ffc107;border-radius:28px;padding:30px 24px;box-shadow:0 8px 0 rgba(0,0,0,.25)}.icono-girar{font-size:64px;margin-bottom:20px;animation:girar 1.6s infinite ease-in-out}.aviso-contenido h1{font-size:26px;margin-bottom:12px}.aviso-contenido p{font-size:18px;line-height:1.4}@keyframes girar{0%{transform:rotate(0)}50%{transform:rotate(90deg)}100%{transform:rotate(0)}}@media screen and (orientation:portrait){.app{display:none}.aviso-vertical{display:flex}}