.arcade-frame.l-legend{width:min(100vw,50dvh);aspect-ratio:1/2;background-image:url('assets/legends-concept-v1.webp');background-size:300% 100%;background-position:var(--legend-x) center}
.l-legend .a-back,.l-legend .a-sound{top:.7%;font-size:2.1cqw}
.l-legend .a-balance{left:4.3%;top:91.5%;width:23.5%;height:3.9%;background:#0b1115;border-radius:5px;font-size:4.1cqw;z-index:5}
.l-legend .a-bet{left:39%;top:91.6%;width:12%;height:3.8%;background:#0b1115;font-size:4.1cqw;z-index:5}
.l-legend .a-minus{left:32%;top:91.5%;width:6%;height:4%}
.l-legend .a-plus{left:52%;top:91.5%;width:6%;height:4%}
.l-legend .a-action{left:62%;top:87.8%;width:36%;height:9.5%;border-radius:20%}
.l-legend .a-action span{font-size:5.5cqw;background:#7b210b;border-radius:7px;padding:2cqw .8cqw}
[data-legend=perlas] .a-action span{background:#085b78}
[data-legend=fenix] .a-action span{background:#7d290d}
.l-legend .a-status{top:83.6%;height:3.2%;font-size:2.4cqw;left:7%;width:86%;background:#130d13ed;border:1px solid #c79858}
[data-legend=perlas] .a-status{background:#041e33f2;border-color:#92e4ed}
.l-legend .a-account,.l-legend .a-load{display:none}
.l-legend .a-info,.l-legend .a-menu{top:79.7%;width:8%;height:3.3%;border:1px solid #b59e74;background:#11202ad9;color:#fff}
.l-legend .a-info{left:3%}.l-legend .a-menu{left:89%}
.l-legend .a-info:after{content:'ⓘ';font-size:4cqw}.l-legend .a-menu:after{content:'☷';font-size:4cqw}
.l-legend .a-demo{bottom:.25%;left:14%;right:14%}.l-legend .a-demo button{font-size:2cqw}
.l-meter{position:absolute;left:16%;width:68%;top:22.1%;height:5%;display:grid;place-items:center;text-align:center;background:linear-gradient(90deg,#17100a,#47230e,#17100a);border:1px ridge #d9b16d;border-radius:6px;font:700 3.1cqw Georgia,serif;color:#fff0b9;text-shadow:0 0 12px #ffb24b;padding:1cqw;z-index:3}
[data-legend=perlas] .l-meter{top:19.5%;height:6.7%;background:linear-gradient(90deg,#062b3b,#0a546c,#062b3b);border-color:#aedee5;color:#e5ffff;text-shadow:0 0 10px #61d1e8}
[data-legend=fenix] .l-meter{top:17.7%;height:4.5%;font-size:2.8cqw}
.l-legend .l-volcan{left:9%;top:28%;width:82%;height:50%;overflow:visible;background:radial-gradient(ellipse,#3e1609b0,#140906dd);border:2px ridge #8b5c30;border-radius:5%}
.l-volcan svg{width:100%;height:100%;overflow:visible}
.l-ramp{fill:none;stroke:#8e6d42;stroke-width:13;stroke-linecap:round;filter:drop-shadow(0 4px 1px #130a03) drop-shadow(0 -1px 2px #ff7730)}
.l-gate{fill:#c38a35;stroke:#f5c67b;stroke-width:2;transform-box:fill-box;transform-origin:top center}
.l-fireball{filter:drop-shadow(0 0 9px #ff9d18) drop-shadow(0 0 14px #e42f00)}
.l-fire-trail{fill:none;stroke:#ffe493;stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 6px #ff6b00)}
.l-bins{position:absolute;bottom:-1%;left:1%;width:98%;height:12%;display:grid;grid-template-columns:repeat(3,1fr);gap:5%;pointer-events:none}
.l-bins div{display:grid;place-items:center;border:3px ridge #e7ba62;border-radius:12%;background:linear-gradient(#4b3120,#170b04);font:800 6cqw Georgia,serif;color:#fff0ae;box-shadow:inset 0 0 15px #ffad2533}
.l-bins div:nth-child(2){background:linear-gradient(#a56810,#4a2100)}.l-bins div:nth-child(3){background:linear-gradient(#a52b06,#470b00)}
.l-awarded{animation:lReward .6s ease-in-out infinite alternate}
.l-legend .l-perlas{left:11.5%;top:28%;width:78%;height:50%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:3.5% 4%;overflow:visible}
.l-shell{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:35% 35% 45% 45%;background:url('assets/legends-concept-v1.webp');background-size:1182% 931%;background-position:42% 33.5%;box-shadow:0 5px 10px #001a39aa,inset 0 0 10px #bce2ee44;overflow:hidden;isolation:isolate;color:#fff;font:800 3cqw Georgia,serif}
.l-shell:enabled{cursor:pointer;animation:lShellFloat 3s ease-in-out infinite alternate}
.l-shell:nth-child(3n+1){animation-delay:-1s}.l-shell:nth-child(3n+2){animation-delay:-2s}
.l-shell:enabled:hover{filter:brightness(1.25);box-shadow:0 0 15px #b3f9ff}
.l-shell.l-open{background:radial-gradient(ellipse at 50% 55%,#205469,#062c44);border:1px solid #8ccbd4;border-radius:40%;animation:lOpen .6s ease-out}
.l-shell.l-pearl-found{background:radial-gradient(ellipse at 50% 20%,#bf90d5,#254d6c 60%,#07273f);padding-top:55%;text-shadow:0 0 8px #b2fcff;box-shadow:0 0 18px #a9faff66}
.l-pearl-found:before{content:'';position:absolute;left:28%;top:10%;width:44%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 32% 25%,white,#ffe7f9 22%,#bc96d4 60%,#596d9f);box-shadow:0 0 15px #c2f5ff;animation:lPearl 1.5s ease-in-out infinite alternate}
.l-shell:disabled{opacity:1;cursor:default}
.l-opening{animation:lShellShake .36s ease!important}
.l-legend .l-fenix{left:8%;top:26.5%;width:84%;height:42%;overflow:visible}
.l-ring{position:absolute;inset:0;border-radius:50%;border:3px ridge #d7aa62;--radius:37cqw;background:radial-gradient(circle,transparent 60%,#1e1327e8 61%,#36202b 92%,#84602f);box-shadow:0 0 0 2px #3e2119,inset 0 0 15px #b65c2c66;will-change:transform}
.l-ring:nth-child(2){inset:12.5%;--radius:27cqw;background:radial-gradient(circle,transparent 55%,#1c1627f2 57%,#3a292c 90%,#86602c)}
.l-ring:nth-child(3){inset:25%;--radius:17cqw;background:radial-gradient(circle,transparent 48%,#241728ef 50%,#4b2d26 88%,#86602c)}
.l-rune{position:absolute;top:50%;left:50%;font:700 5cqw Georgia,serif;color:#f9d997;text-shadow:0 0 6px #ce814c;transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));line-height:1}
.l-core{position:absolute;inset:37%;border-radius:50%;box-shadow:0 0 20px #ff6b00,inset 0 0 20px #ffa12e33;pointer-events:none}
.l-aligner{position:absolute;left:44%;width:12%;top:-4%;text-align:center;color:#fff0ac;font-size:8cqw;text-shadow:0 0 12px #ff8b0c;pointer-events:none}
.l-sealed{box-shadow:0 0 0 2px #e6bb6c,inset 0 0 20px #edb56a66}
.l-phoenix-awake .l-core{animation:lPhoenix 1s ease-in-out infinite alternate}
.l-legend .a-win{top:36%}
[data-legend=perlas] .a-win{background:radial-gradient(ellipse,#1a697bed,#071e3cf7)}
[data-legend=volcan] .a-win,[data-legend=fenix] .a-win{background:radial-gradient(ellipse,#8a3c19ed,#1e0b15f7)}
.l-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.l-atmosphere i{position:absolute;width:3px;height:5px;border-radius:50%;background:#ffce64;box-shadow:0 0 8px #ff8c21;animation:lEmber 4s ease-in-out infinite}
[data-legend=perlas] .l-atmosphere i{width:7px;height:7px;background:#84e0ff22;border:1px solid #b9faff88;box-shadow:0 0 5px #b8faff55;animation-duration:7s}
@keyframes lEmber{0%,100%{opacity:0;transform:translateY(15px)}50%{opacity:.8;transform:translate(8px,-40px)}}
@keyframes lReward{to{filter:brightness(1.5);box-shadow:0 0 22px #ffbd49}}
@keyframes lShellFloat{to{transform:translateY(-3px)}}
@keyframes lShellShake{25%,75%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes lOpen{from{transform:scale(.8);filter:brightness(2)}to{transform:scale(1);filter:brightness(1)}}
@keyframes lPearl{to{filter:brightness(1.3);transform:translateY(-2px)}}
@keyframes lPhoenix{to{filter:brightness(1.7);box-shadow:0 0 70px #ffb048}}
@media(prefers-reduced-motion:reduce){.l-legend *{animation:none!important;transition:none!important}}
/* Preserve the approved ramp artwork and illuminate it with the live sphere. */
.l-legend .l-volcan{background:transparent;border-color:transparent;box-shadow:none}
.l-ramp{stroke:transparent;filter:none}
.l-gate{fill:url(#gateMetal);stroke:#e3b45f;stroke-width:2;rx:3;filter:drop-shadow(2px 2px 2px #000)}
.l-bins{bottom:-4%;height:9%}
.l-bins div{border:1px solid #e0b967;background:#211309;font-size:5.7cqw;border-radius:6px;box-shadow:none}
.l-bins div:nth-child(2){background:#6a3a05}.l-bins div:nth-child(3){background:#741706}
.l-ring{background:radial-gradient(closest-side,transparent 62%,#211525 63%,#342327 91%,#84602f)}
.l-ring:nth-child(2){background:radial-gradient(closest-side,transparent 55%,#211525 56%,#342327 91%,#84602f)}
.l-ring:nth-child(3){background:radial-gradient(closest-side,transparent 48%,#211525 49%,#342327 91%,#84602f)}
@media(min-width:1000px){#cards .game-card[aria-label="Jugar a Furia del Volcán"]{grid-column:1}}
.l-pearl-found:nth-child(3n+1):before{background:radial-gradient(circle at 32% 25%,white,#fffaf2 28%,#c8d9e3 65%,#70869c)}
.l-pearl-found:nth-child(3n):before{background:radial-gradient(circle at 32% 25%,white,#b9fbff 22%,#4bbdeb 60%,#24529d)}