/* 0.50 (Temporada 1): la apertura del Rayo (gacha-fx.js), en lugar de la máquina de gachapón. Un <dialog> a pantalla completa con la
   tormenta: título, cartas boca abajo (#caps .cap), aviso y botones; y la apertura especial (dialog.gspecial) del épico para arriba */
dialog.gfx{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;color:#fff;font-family:InaPixel,'Trebuchet MS',sans-serif;background:#050a24;-webkit-user-select:none;user-select:none}
dialog.gfx::backdrop{background:#050a24}
.gfx-scene{position:absolute;inset:0;z-index:0;overflow:hidden}
.gfx-title{position:relative;z-index:3;margin:0;padding:calc(12px + env(safe-area-inset-top,0px)) 14px 4px;font-size:20px;font-weight:700;text-align:center;text-shadow:2px 2px 0 rgba(0,0,0,.6);text-transform:none}
.gfx-slots{position:relative;z-index:2;align-self:center;display:grid;grid-template-columns:repeat(var(--cols,5),minmax(44px,112px));justify-content:center;gap:8px;padding:0 12px;
  width:100%;max-width:620px;margin:0 auto;box-sizing:border-box;min-height:0;grid-auto-rows:max-content;align-content:center}
.gfx.one .gfx-slots{grid-template-columns:min(46vw,230px)}
.gfx-hint{position:relative;z-index:3;margin:6px 12px 0;min-height:16px;text-align:center;font-size:12px;color:#e8eeff;text-shadow:1px 1px 0 #000}
.gfx-bar{position:relative;z-index:3;display:flex;gap:10px;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));max-width:620px;width:100%;margin:0 auto;box-sizing:border-box}
.gfx-bar button{flex:1;min-height:50px;border:3px solid #fff;border-radius:8px;font:inherit;font-size:15px;text-shadow:none;box-shadow:0 0 0 2px #0a1d5c,3px 4px 0 rgba(0,0,0,.45)}
.gfx-bar .cta{background:#ffd23c;color:#1a1d33}.gfx-bar .ghost{background:#fff;color:#1a1d33}
.gfx-bar [hidden]{display:none}
.gfx-flash{position:absolute;inset:0;z-index:9;opacity:0;pointer-events:none}
.gfx-bolts{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none;overflow:visible}
.rx-glow{fill:none;stroke-linejoin:round;stroke-linecap:round;opacity:.55;filter:blur(4px)}
.rx-core{fill:none;stroke:#fff;stroke-linejoin:round;stroke-linecap:round}
/* Cartas: boca abajo (el emblema del juego) y, abiertas, la carta del jugador */
.gfx-cap{position:relative;display:block;width:100%;height:auto;aspect-ratio:268/328;padding:0;border:0;background:none;cursor:pointer;animation:none;filter:none;transform-style:preserve-3d}
.gfx-cap:focus-visible{outline:3px solid #ffd23c;outline-offset:3px;border-radius:7px}
.gfx-cap.gfx-open{cursor:default}
.gfx-cap .gcard,.gs-card .gcard{width:100%;height:auto;margin:0;opacity:1;transform:none;animation:none}
.gfx-card .pc{width:100%}
.rx-back{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;border-radius:7px;background:repeating-linear-gradient(45deg,#1d48b8 0 10px,#1a41a6 10px 20px);
  border:3px solid #ffd23c;box-shadow:0 0 0 2px #0a1d5c,3px 4px 0 rgba(0,0,0,.45)}
.rx-back img{width:70%;height:auto;image-rendering:pixelated;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.45))}
.gfx-cap:not(.gfx-open):not(.opening) .rx-back{animation:rx-wait 2.4s ease-in-out infinite}
@keyframes rx-wait{50%{transform:translateY(-3px)}}
/* La tormenta */
.rx-sky{position:absolute;inset:0;background:linear-gradient(#03061a,#141a4d 55%,#24195a)}
.rx-clouds{position:absolute;left:-10%;right:-10%;top:0;height:22%;animation:rx-drift 14s ease-in-out infinite alternate}
.rx-clouds i{position:absolute;height:56px;border-radius:28px;background:#2b3163;box-shadow:inset 0 10px 0 #3b427c,0 6px 0 #1b1f45}
.rx-clouds i:nth-child(1){left:2%;top:20%;width:34%}.rx-clouds i:nth-child(2){left:26%;top:44%;width:30%}.rx-clouds i:nth-child(3){left:48%;top:12%;width:36%}
.rx-clouds i:nth-child(4){left:70%;top:48%;width:28%}.rx-clouds i:nth-child(5){left:84%;top:16%;width:24%}
@keyframes rx-drift{to{transform:translateX(5%)}}
.rx-stadium{position:absolute;left:0;right:0;bottom:0;height:26%;background:radial-gradient(circle at 12% 18%,#ffe9a8 0 4px,transparent 6px),radial-gradient(circle at 88% 18%,#ffe9a8 0 4px,transparent 6px),
  linear-gradient(transparent 0 20%,#0a0f24 20%),linear-gradient(#2f8f3a,#2f8f3a);background-size:auto,auto,auto,100% 30%;background-position:0 0,0 0,0 0,0 100%;background-repeat:no-repeat}
body.hw-event .rx-sky{background:linear-gradient(#12041f,#2a0d45 55%,#4a1660)}
body.hw-event .rx-clouds i{background:#3a2452;box-shadow:inset 0 10px 0 #4b2f6a,0 6px 0 #241536}

/* ---------- Apertura especial (épico o mejor): la carta grande boca abajo, la tormenta, la franja, el rayo y la carta con su rótulo ---------- */
dialog.gspecial{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:#fff;font-family:InaPixel,'Trebuchet MS',sans-serif;background:#050a24}
dialog.gspecial::backdrop{background:rgba(2,5,15,.85)}
.gs-stage{position:absolute;inset:0}
.gs-big{position:absolute;left:50%;top:44%;width:min(56vw,260px);aspect-ratio:268/328;transform:translate(-50%,-50%)}
.gs-big>.rx-back{position:absolute;inset:0}
.gs-big[hidden]{display:none}
.gs-rays{position:absolute;left:50%;top:44%;width:220vmax;height:220vmax;transform:translate(-50%,-50%);opacity:0;pointer-events:none;transition:opacity .3s;
  background:repeating-conic-gradient(from 0deg,var(--rc,#fff) 0 7deg,transparent 7deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 18%,transparent 46%);mask:radial-gradient(circle,#000 0 18%,transparent 46%)}
.gspecial[data-tier=unico] .gs-rays{background:repeating-conic-gradient(#ff5a5a 0 6deg,transparent 6deg 12deg,#ffcc22 12deg 18deg,transparent 18deg 24deg,#4fd27a 24deg 30deg,transparent 30deg 36deg,#3f8fff 36deg 42deg,transparent 42deg 48deg,#a24cff 48deg 54deg,transparent 54deg 60deg)}
.gspecial.rays .gs-rays{opacity:.42;animation:gs-spin 9s linear infinite}
@keyframes gs-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.gs-card{display:none;position:absolute;left:50%;top:44%;width:min(64vw,300px);transform:translate(-50%,-50%)}
.gs-card.in,.gs-card.now{display:block}
.gs-card.in{animation:gs-card .55s cubic-bezier(.2,1.3,.4,1) both}
@keyframes gs-card{from{transform:translate(-50%,-50%) scale(.15) rotateY(180deg);filter:brightness(3)}60%{filter:brightness(1.6)}to{transform:translate(-50%,-50%);filter:none}}
.gs-banner{visibility:hidden;position:absolute;left:-4%;right:-4%;top:calc(44% + min(39vw,183px));display:grid;place-items:center;height:70px;transform:skewY(-5deg);
  background:var(--rc,#fff);border-top:6px solid #fff;border-bottom:6px solid #fff;box-shadow:0 0 0 5px #0a0f24}
.gspecial[data-tier=unico] .gs-banner{background:linear-gradient(90deg,#ff5a5a,#ffcc22,#4fd27a,#3f8fff,#a24cff)}
.gs-banner span{font-size:clamp(26px,8vw,42px);color:#fff;white-space:nowrap;text-shadow:4px 0 0 #0a0f24,-4px 0 0 #0a0f24,0 4px 0 #0a0f24,0 -4px 0 #0a0f24}
.gs-banner.in,.gs-banner.now{visibility:visible}
.gs-banner.in{animation:gs-banner .45s .25s cubic-bezier(.2,1.2,.4,1) both}
@keyframes gs-banner{from{transform:translateX(-120%) skewY(-5deg)}to{transform:skewY(-5deg)}}
.gfx-band{position:absolute;left:-6%;right:-6%;top:62%;z-index:7;height:96px;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateX(-110%) skewY(-6deg);
  background:var(--bc,#ff6a10);border-top:7px solid #fff;border-bottom:7px solid #fff;box-shadow:0 0 0 6px #0a0f24,0 18px 40px rgba(0,0,0,.6)}
.gfx-band span{font-size:clamp(28px,9vw,50px);color:#fff;white-space:nowrap;text-shadow:5px 0 0 #0a0f24,-5px 0 0 #0a0f24,0 5px 0 #0a0f24,0 -5px 0 #0a0f24,5px 5px 0 #0a0f24,-5px 5px 0 #0a0f24,5px -5px 0 #0a0f24,-5px -5px 0 #0a0f24}
.gs-flash{position:absolute;inset:0;opacity:0;pointer-events:none}
.gs-hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);margin:0;text-align:center;font-size:13px;opacity:0;transition:opacity .2s}
.gspecial.done .gs-hint{opacity:1}
.gs-tap{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gs-tap:focus,.gs-tap:focus-visible,.pad-active .gspecial .gs-tap:focus{outline:none!important;box-shadow:none!important}
.gs-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:2;min-width:64px;min-height:44px;padding:4px 14px;
  font:14px InaPixel,'Trebuchet MS',sans-serif;color:#1a1d33;background:#fff;border:3px solid #fff;border-radius:8px;box-shadow:0 0 0 2px #0a1d5c;cursor:pointer}
@media (max-height:500px){
  .gs-big,.gs-card{top:46%;width:min(30vh,180px)}
  .gs-banner{top:calc(46% + 22vh);height:54px}
  .gfx-band{top:68%;height:72px}
  .gfx-slots{grid-template-columns:repeat(var(--cols,5),64px)}   /* tamaño fijo: WebKit las aplastaba por debajo de 44 px */
  .gfx-cap{height:78px}
}
@media (prefers-reduced-motion:reduce){.gs-rays,.rx-clouds,.rx-back{animation:none!important}}