.arcade-frame.r-arena{width:min(100vw,50dvh);aspect-ratio:1/2;background-image:url('assets/arena-concept-v1.webp');background-size:300% 100%;background-position:var(--arena-x) center}
.r-arena .a-back,.r-arena .a-sound{top:.7%;font-size:2cqw}
.r-arena .a-balance{left:4%;top:93.2%;width:21%;height:3.5%;font-size:4.2cqw;background:#07131b;border-radius:5px;z-index:5}
.r-arena .a-bet{left:37%;top:93.2%;width:10%;height:3.5%;background:#07131b;font-size:4cqw;z-index:5}
.r-arena .a-minus{left:28%;top:93.1%;width:7%;height:3.8%}.r-arena .a-plus{left:49%;top:93.1%;width:7%;height:3.8%}
.r-arena .a-action{left:61%;top:89.4%;width:37%;height:7.7%;border-radius:20%}
.r-arena .a-action span{font-size:5.5cqw;padding:1.8cqw .7cqw;background:#123e78;border-radius:7px}
[data-arena=arcanos] .a-action span{background:#48227b;font-size:5cqw}
[data-arena=canon] .a-action{top:85%;height:13%;left:68%;width:30%;border-radius:50%}
[data-arena=canon] .a-action span{background:#941e22;font-size:4.5cqw}
.r-arena .a-status{top:87%;height:2.6%;font-size:2.3cqw;left:5%;width:88%;background:#101329eb;border-color:#bb9c60;z-index:3}
[data-arena=canon] .a-status{top:83%;left:4%;width:90%}
.r-arena .a-account,.r-arena .a-load{display:none}
.r-arena .a-info,.r-arena .a-menu{top:85.2%;width:7%;height:3%;border:1px solid #b59e74;background:#11202ad9;color:#fff}
.r-arena .a-info{left:3%}.r-arena .a-menu{left:90%}
.r-arena .a-info:after{content:'ⓘ';font-size:4cqw}.r-arena .a-menu:after{content:'☷';font-size:4cqw}
[data-arena=canon] .a-info,[data-arena=canon] .a-menu{top:79%}
.r-arena .a-demo{bottom:.2%;left:14%;right:14%}
.r-arena .a-demo button{font-size:2cqw}
.r-hud{position:absolute;left:14%;width:72%;top:20.6%;height:4.3%;background:#0c2139ee;border:1px solid #cfbc88;border-radius:6px;display:grid;place-items:center;font:700 3cqw Georgia,serif;color:#fff2c6;text-align:center;z-index:4}
[data-arena=arcanos] .r-hud{top:73.8%;background:#251339f2}
[data-arena=canon] .r-hud{top:19%;height:4%;font-size:2.6cqw;background:#162943ee}
.r-arena .r-grifos{left:4%;top:27%;width:92%;height:58%;overflow:visible}
.r-lane{position:absolute;left:0;width:100%;height:25%;top:0;background:linear-gradient(90deg,#e5f8ff55,#d6efff99,transparent);border-bottom:1px dashed #e9d8a855;border-radius:40%}
.r-lane:nth-child(2){top:30%}.r-lane:nth-child(3){top:60%}
.r-racer{position:absolute;left:2%;width:30%;height:26%;background-image:url('assets/arena-concept-v1.webp');background-size:808% 539%;background-position:5.5% 26.4%;mask-image:radial-gradient(ellipse,black 43%,transparent 73%);filter:drop-shadow(0 0 5px #74ccff);animation:rGlide 1s ease-in-out infinite alternate;z-index:2}
.r-racer[data-racer="1"]{background-size:640% 445%;background-position:20.1% 32.8%;filter:drop-shadow(0 0 8px #f86b5e);animation-delay:-.4s}
.r-racer[data-racer="2"]{background-size:341% 366%;background-position:0 57.8%;filter:drop-shadow(0 0 8px #ffdb6c);animation-delay:-.7s}
.r-number{position:absolute;bottom:10%;left:45%;font:800 5cqw Georgia;color:#fff;background:#0b1b39a6;border-radius:50%;padding:1cqw}
.r-finish{position:absolute;right:0;top:0;bottom:10%;width:9%;background:repeating-conic-gradient(#fff9 0 25%,#172d3799 0 50%) 0/12px 12px;border:2px solid #dabd78;font:700 2.6cqw Georgia;color:#05142c;writing-mode:vertical-rl;text-align:center}
.r-picks{position:absolute;left:0;bottom:-1%;width:100%;height:11%;display:flex;gap:3%;z-index:3}
.r-picks .r-choice{flex:1;background:linear-gradient(#24476e,#071c31);color:#fff2b7;border:2px ridge #ad945e;border-radius:7px;font:700 3cqw Georgia;padding:0}
.r-picks .r-choice:nth-child(2){background:linear-gradient(#6e2e38,#280c14)}.r-picks .r-choice:nth-child(3){background:linear-gradient(#986e21,#2e2108)}
.r-choice.r-selected{border-color:#fff1a0!important;box-shadow:0 0 16px #ffe187;filter:brightness(1.2)}
.r-progress{position:absolute;left:1%;width:98%;height:3%;bottom:-7%;background:#051b35;border:1px solid #a8d7f2;border-radius:20px;overflow:hidden}
.r-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#73c3ff,#ffdc70)}
.r-victor{filter:drop-shadow(0 0 20px #ffedaa)!important}
.r-running .r-racer{animation-duration:.3s}
.r-arena .r-arcanos{left:6%;top:23%;width:88%;height:49%;overflow:visible}
.r-hand{position:absolute;bottom:0;left:0;width:100%;height:45%;display:flex;gap:3%}
.r-hand .r-choice{position:relative;flex:1;border:2px ridge #d2ba83;border-radius:8%;background-image:url('assets/arena-concept-v1.webp');background-size:1097% 465%;background-position:39.4% 64.7%;font-size:0;box-shadow:0 8px 16px #0008;transition:transform .25s;overflow:hidden}
.r-hand .r-choice:nth-child(2){background-size:1182% 488%;background-position:50.1% 66.3%}.r-hand .r-choice:nth-child(3){background-position:60.9% 67.8%}
.r-hand .r-selected{transform:translateY(-8%)}
.r-opponent{position:absolute;left:35%;top:0;width:30%;height:32%;border:2px ridge #cba663;border-radius:8%;background:repeating-conic-gradient(#34205f 0 25%,#251542 0 50%) 0/15px 15px;box-shadow:0 0 25px #9173ed66;color:#fff;text-align:center;display:grid;place-items:end center;font:700 3cqw Georgia}
.r-flipped{background-image:url('assets/arena-concept-v1.webp');background-size:1097% 465%;background-position:39.4% 64.7%;animation:rFlip .5s ease}
.r-flipped[data-element="1"]{background-size:1182% 488%;background-position:50.1% 66.3%}.r-flipped[data-element="2"]{background-position:60.9% 67.8%}
.r-magic-circle{position:absolute;left:22%;top:32%;width:56%;aspect-ratio:1;border:2px dashed #b6a3ff88;border-radius:50%;box-shadow:0 0 25px #805fff55;transform:scaleY(.55);pointer-events:none}
.r-duel-beam{position:absolute;bottom:15%;width:7%;height:58%;background:linear-gradient(0deg,#ff8b16,white,#f33);filter:blur(3px);clip-path:polygon(20% 100%,80% 100%,100% 0,0 0);transform:rotate(-20deg);transform-origin:bottom;animation:rBeam .65s ease both;pointer-events:none}
.r-duel-beam[data-element="1"]{background:linear-gradient(#56d9ff,white,#384dff);transform:rotate(0)}.r-duel-beam[data-element="2"]{background:linear-gradient(#69f5a3,white,#268a4f);transform:rotate(20deg)}
.r-won{box-shadow:0 0 35px #ffe48b!important}.r-lost{filter:brightness(.5) saturate(.3)!important}.r-tie{box-shadow:0 0 25px #cdb7ff!important}
.r-arena .r-canon{left:9%;top:24%;width:82%;height:49%;overflow:visible;background:radial-gradient(ellipse,#073348f5,#05122cf7);border:2px ridge #ad8d5c;border-radius:10%}
.r-canon svg{width:100%;height:100%;overflow:hidden}
.r-star{fill:#ffc94b;stroke:#fff4b9;stroke-width:2;filter:drop-shadow(0 0 9px #ffcd6d)}
[data-target="1"] .r-star{fill:#61bbff}[data-target="2"] .r-star{fill:#f5ce57}[data-target="3"] .r-star{fill:#cb6af1}[data-target="4"] .r-star{fill:#58dba7}
.r-targets text{fill:#fff;font:bold 13px Georgia;paint-order:stroke;stroke:#49364b;stroke-width:2px}
.r-aim{fill:none;stroke:#fff4a5;stroke-width:3;stroke-dasharray:4 10;opacity:.65}
.r-barrel{stroke:#bd8e36;stroke-width:20;stroke-linecap:round;filter:drop-shadow(0 0 3px #fff0a4)}
.r-cannon-base{fill:#b38233;stroke:#ffdc8a;stroke-width:3}
.r-projectile{fill:white;stroke:#ffc557;stroke-width:2;filter:drop-shadow(0 0 12px #ffe385)}
.r-hit{opacity:.1;filter:brightness(2)}
.r-aim-controls{position:absolute;left:0;top:103%;width:100%;display:grid;gap:1cqw;background:#10213bef;padding:1cqw;border:1px solid #c5b06a;border-radius:6px;font:600 2.6cqw Georgia;color:#fff1bb}
.r-aim-controls label{display:flex;align-items:center;justify-content:space-between;gap:3cqw}.r-aim-controls input{width:66%;accent-color:#f3cd68;height:3cqw}
@keyframes rGlide{to{transform:translateY(-5px) rotate(-2deg)}}
@keyframes rFlip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
@keyframes rBeam{from{opacity:0;transform:scaleY(.1)}40%{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.r-arena *{animation:none!important;transition:none!important}}
@media(min-width:1000px){#cards .game-card[aria-label="Jugar a Carrera de Grifos"]{grid-column:1}}
.r-arena .r-grifos{border:2px ridge #d2c796;border-radius:6%;background:linear-gradient(#b8dff2f5,#e7f5fcf5);box-shadow:inset 0 0 35px #fff9}
.r-lane{height:22%;background:linear-gradient(90deg,#f7fcffbb,#f5fbff44,transparent)}
.r-lane:nth-child(2){top:26%}.r-lane:nth-child(3){top:52%}
.r-racer{height:23%}.r-finish{bottom:22%;font-size:2.8cqw}
.r-picks{bottom:7%;height:11%}.r-progress{bottom:-1%}
.r-opponent{background-image:url('assets/arena-concept-v1.webp');background-size:1536% 706%;background-position:51% 27.9%}
.a-demo [data-demo=tie]{display:none}[data-mode=arcanos] .a-demo [data-demo=tie]{display:inline-block}
.r-arena .a-balance{left:3%;width:24%;height:4%;top:93.1%;background:#07131b}
.r-arena .a-bet{left:35.5%;width:16.5%;height:4%;top:93.1%;background:#07131b}
[data-arena=canon] .a-action span{position:absolute;top:25%;left:0;right:0;height:42%;display:grid;place-items:center;font-size:4.3cqw;background:#9d2024;padding:0}
.a-demo [data-demo=aim]{display:none}[data-mode=canon] .a-demo [data-demo=aim]{display:inline-block}
.r-arena .r-grifos{background:url('assets/gryphon-sky-v1.webp') center/100% 100% no-repeat;box-shadow:inset 0 0 20px #faffff44}
.r-lane{background:linear-gradient(90deg,#d6edff33,transparent);border-bottom:1px solid #fcf4d522}
.r-racer{filter:drop-shadow(0 0 7px #64c4ff);width:32%}
.r-picks{background:#18365388;padding:1cqw;border-radius:7px}
@media(min-width:641px){#cards .game-card[aria-label="Jugar a Carrera de Grifos"],#cards .game-card[aria-label="Jugar a Furia del Volcán"],#cards .game-card[aria-label="Jugar a Órbita Cósmica"]{grid-column:1}}
/* Dedicated transparent characters and full spell-card art, not cabinet crops. */
.r-arena .r-racer,.r-arena .r-racer[data-racer="1"],.r-arena .r-racer[data-racer="2"]{background-image:url('assets/interactive-polish-v1.webp');background-size:400% 300%;background-position:0 0;background-repeat:no-repeat;mask-image:none;width:34%;height:27%;filter:drop-shadow(0 5px 4px #09172b88) drop-shadow(0 0 6px #9ce9ff66)}.r-arena .r-racer[data-racer="1"]{background-position:33.333% 0;filter:drop-shadow(0 5px 4px #09172b88) drop-shadow(0 0 6px #ffab9166)}.r-arena .r-racer[data-racer="2"]{background-position:66.667% 0;filter:drop-shadow(0 5px 4px #09172b88) drop-shadow(0 0 6px #ffe4a166)}.r-arena .r-number{bottom:0;left:38%;font-size:3.2cqw;padding:.6cqw 1.3cqw;border:1px solid #edd59d;background:#07172ce8;border-radius:50%;line-height:1}.r-running .r-racer{animation:rFlight 420ms ease-in-out infinite alternate}.r-hand .r-choice,.r-hand .r-choice:nth-child(2),.r-hand .r-choice:nth-child(3),.r-opponent.r-flipped,.r-opponent.r-flipped[data-element="1"],.r-opponent.r-flipped[data-element="2"]{background-image:url('assets/interactive-polish-v1.webp');background-size:400% 300%;background-position:0 100%;background-repeat:no-repeat;background-color:#110e22;font-size:0;border:1px solid #ddbd77;box-shadow:0 5px 12px #000a,inset 0 0 12px #cba56a22}.r-hand .r-choice:nth-child(2),.r-opponent.r-flipped[data-element="1"]{background-position:33.333% 100%}.r-hand .r-choice:nth-child(3),.r-opponent.r-flipped[data-element="2"]{background-position:66.667% 100%}.r-hand .r-choice:after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#fff4 45%,transparent 60%);transform:translateX(-130%);pointer-events:none}.r-hand .r-selected:after{animation:rCardShine 2.6s ease-in-out infinite}.r-hand .r-selected{box-shadow:0 0 20px #e5c98a88!important}.r-opponent:not(.r-flipped):after{content:'☾';position:absolute;inset:0;display:grid;place-items:center;font-size:12cqw;color:#ddc487;text-shadow:0 0 15px #a98de4}.r-hand .r-choice:hover{filter:brightness(1.12)}@keyframes rFlight{from{transform:translateY(-2% ) rotate(-2deg)}to{transform:translateY(3%) rotate(2deg)}}@keyframes rCardShine{50%,100%{transform:translateX(140%)}}@media(prefers-reduced-motion:reduce){.r-running .r-racer,.r-hand .r-selected:after{animation:none!important}}
.r-opponent:not(.r-flipped):after{display:none}.r-opponent:not(.r-flipped){font-size:0}