.stable-arena{background-image:url('assets/valle-gigante.webp');isolation:isolate}.stable-arena:after{content:none}.top-bag{position:absolute;z-index:20;left:18px;top:16px;display:flex;align-items:center;gap:10px;min-width:220px;padding:10px 14px;border:3px solid #f5d599;border-radius:18px;background:#5c321fe8;color:white;box-shadow:0 8px 22px #28150966;pointer-events:none}.top-bag>span{font-size:2.2rem}.top-bag strong{font-size:.8rem}.top-bag-slots{display:flex;gap:5px;margin-top:5px}.top-bag-slots i{display:block;width:17px;height:17px;border:2px solid #fff9;border-radius:50%;background:#2e1c15}.top-bag-slots i.filled{background:#c9bda6;box-shadow:inset 0 2px 3px #746958,0 0 0 2px #f6bd4c;animation:slotIn .4s}.top-bag.bag-pop{animation:bagTopPop .35s}.visible-stone{z-index:12;width:54px;height:54px;border:4px solid white;background:#a99d87;color:#655c4f;font-size:1.25rem;box-shadow:0 6px 13px #2b201477;animation:stoneBob 1.5s infinite;cursor:pointer}.visible-stone.collected{animation:none!important;opacity:1!important}.vs1{left:10%;bottom:7%}.vs2{left:19%;bottom:12%}.vs3{left:29%;bottom:7%}.vs4{left:39%;bottom:12%}.vs5{left:49%;bottom:7%}.sling-hotspot{position:absolute;z-index:15;left:10%;top:31%;width:105px;height:125px;border:0;background:transparent;cursor:pointer}.sling-hotspot span{position:absolute;left:13px;top:5px;width:58px;height:82px;border:8px solid #74431e;border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(-25deg);filter:drop-shadow(0 2px 2px #fff)}.sling-hotspot b{position:absolute;left:-8px;bottom:0;width:110px;padding:5px;border-radius:999px;background:#fffbd9dd;color:#4c351b;font-size:.62rem}.sling-hotspot.spinning span{animation:cleanSlingSpin .28s linear 3}.sling-hotspot.launching{animation:cleanThrow .66s ease-out}.sling-hotspot.launching span{animation:cleanSlingSpin .18s linear 3}.moving-aim{position:absolute;z-index:13;left:50%;top:38%;transform:translate(-50%,-50%);width:92px;height:92px;display:grid;place-items:center;border-radius:50%;background:#ffffff26;color:white;font-size:6rem;line-height:1;text-shadow:0 2px 7px #173f38,0 0 12px #ffd55c;pointer-events:none}.stable-shot{left:18%;top:42%;z-index:25}.stable-shot.stable-hit{opacity:1;animation:stableStoneHit .68s cubic-bezier(.3,.1,.75,.7) forwards}.stable-shot.stable-miss{opacity:1;animation:stableStoneMiss .68s cubic-bezier(.3,.1,.75,.7) forwards}.impact-effect{position:absolute;z-index:30;right:6%;top:20%;width:24%;height:56%;display:grid;place-items:center;align-content:center;border-radius:48% 48% 20% 20%;background:radial-gradient(circle,#ffe477e8 0,#d39035b8 27%,#7a4a2577 48%,transparent 70%);opacity:0;transform:scale(.25);pointer-events:none}.impact-effect span{font-size:5rem;color:white}.impact-effect b{padding:8px 13px;border-radius:999px;background:#fff;color:#553715}.impact-effect.show{animation:impactReveal 1.8s forwards}.dodge-effect{position:absolute;z-index:30;right:10%;top:29%;padding:13px 17px;border-radius:999px;background:#173f38e8;color:white;font-weight:950;opacity:0;transform:translateX(45px)}.dodge-effect.show{animation:dodgeWhoosh .85s}.stable-arena.arena-impact{animation:arenaShake .45s 2}
@keyframes slotIn{from{transform:translateY(-18px) scale(1.8);opacity:0}}@keyframes bagTopPop{50%{transform:scale(1.09) rotate(-2deg)}}@keyframes cleanSlingSpin{to{transform:rotate(335deg)}}@keyframes cleanThrow{0%{transform:rotate(-4deg)}55%{transform:rotate(15deg) translateX(20px)}100%{transform:none}}@keyframes stableStoneHit{0%{left:18%;top:42%;transform:scale(.6)}60%{transform:scale(1.2)}100%{left:79%;top:28%;transform:scale(.4)}}@keyframes stableStoneMiss{0%{left:18%;top:42%}100%{left:var(--target-x);top:4%;transform:scale(.3)}}@keyframes impactReveal{0%{opacity:0;transform:scale(.25)}25%{opacity:1;transform:scale(1.15)}65%{opacity:1;transform:scale(1)}100%{opacity:.96;transform:translateY(28%) scale(1.08)}}@keyframes dodgeWhoosh{25%,70%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(-70px)}}@keyframes arenaShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:700px){.top-bag{left:8px;top:8px;min-width:165px;padding:7px 9px}.top-bag>span{font-size:1.7rem}.top-bag-slots{gap:3px}.top-bag-slots i{width:13px;height:13px}.visible-stone{width:42px;height:42px}.vs1{left:5%;bottom:6%}.vs2{left:23%;bottom:10%}.vs3{left:41%;bottom:6%}.vs4{left:59%;bottom:10%}.vs5{left:77%;bottom:6%}.sling-hotspot{left:5%;top:35%;width:80px;height:100px}.sling-hotspot span{width:44px;height:64px;border-width:6px}.sling-hotspot b{display:none}.moving-aim{top:43%;width:68px;height:68px;font-size:4.4rem}.impact-effect{right:1%;top:26%;width:35%;height:48%}.impact-effect span{font-size:3.5rem}.impact-effect b{font-size:.7rem}.dodge-effect{right:4%;top:35%;font-size:.72rem}}

/* Cada círculo representa una de las cinco oportunidades. */
.top-bag-slots i{position:relative;display:grid;place-items:center;color:white;font-style:normal;font-weight:1000;line-height:1}
.top-bag-slots i.missed{border-color:#ffb7aa;background:#b82f2f;box-shadow:0 0 0 2px #fff3;animation:attemptMark .35s}
.top-bag-slots i.missed:after{content:"×";font-size:15px}
.top-bag-slots i.hit{border-color:#c9ffd7;background:#278d52;box-shadow:0 0 0 2px #fff3;animation:attemptMark .35s}
.top-bag-slots i.hit:after{content:"✓";font-size:13px}
@keyframes attemptMark{50%{transform:scale(1.35)}}

/* La piedra sale de la honda y termina exactamente en la posición de la mira. */
.stable-shot.stable-flight{opacity:1;animation:stoneToAim .68s cubic-bezier(.25,.05,.72,.72) forwards}
@keyframes stoneToAim{0%{left:18%;top:42%;transform:scale(.62)}55%{transform:scale(1.15)}100%{left:var(--target-x);top:38%;transform:translate(-50%,-50%) scale(.38)}}

/* Tras el acierto se revela una escena completa con Goliat caído. */
.victory-scene{position:absolute;z-index:5;inset:0;background:url('assets/valle-gigante-caido.webp') center/cover no-repeat;opacity:0;transition:opacity .75s ease;pointer-events:none}
.stable-arena.victory .victory-scene{opacity:1}
.stable-arena.victory .moving-aim,.stable-arena.victory .sling-hotspot,.stable-arena.victory .top-bag{opacity:0;transition:opacity .35s}
.stable-arena.victory .impact-effect{z-index:31;right:18%;top:34%;width:31%;height:32%;background:radial-gradient(circle,#ffe477cf 0,#d3903566 35%,transparent 70%)}

/* La mira y la piedra recorren exactamente la altura de la cabeza de Goliat. */
.moving-aim{top:22%;width:72px;height:72px;font-size:4.8rem}
@keyframes stoneToAim{0%{left:18%;top:42%;transform:scale(.62)}55%{transform:scale(1.15)}100%{left:var(--target-x);top:22%;transform:translate(-50%,-50%) scale(.34)}}
@media(max-width:700px){.moving-aim{top:27%;width:58px;height:58px;font-size:3.8rem}@keyframes stoneToAim{0%{left:18%;top:42%;transform:scale(.62)}55%{transform:scale(1.15)}100%{left:var(--target-x);top:27%;transform:translate(-50%,-50%) scale(.34)}}}

.arena-launch{position:absolute;z-index:22;left:50%;bottom:4%;transform:translateX(-50%);min-width:150px;padding:13px 22px;box-shadow:0 8px 24px #432b1980}.arena-launch:disabled{opacity:.48;filter:grayscale(1)}.giant-controls{justify-content:center;text-align:center}.rotate-hint{display:none}
@media(max-width:700px){.arena-launch{bottom:3%;min-width:130px;padding:11px 15px;font-size:.84rem}.stable-arena{min-height:430px}}
@media(max-width:700px) and (orientation:portrait){.rotate-hint{position:absolute;z-index:40;left:50%;top:10px;display:block;transform:translateX(-50%);width:max-content;max-width:85%;padding:7px 11px;border-radius:999px;background:#173f38e8;color:white;font-size:.68rem;font-weight:900}.top-bag{top:45px}}