:root{
  --noche:#1B1435; --panel:#2A1F52; --panel2:#352A63; --linea:#4A3A85; --texto:#EDE7FF; --tenue:#B9ADE0;
  --menta:#7BF2C8; --magenta:#FF6FB5;
  box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  color-scheme:dark; background:#000;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0; overscroll-behavior:none; -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action:manipulation}
*{-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none}
body,#menu,#bienvenida,#juego{-webkit-user-select:none; user-select:none}
img,svg,canvas{-webkit-user-drag:none; user-drag:none}
#juego,#juego *{touch-action:none}
#bienvenida,#bienvenida *{touch-action:manipulation}
#menu{touch-action:pan-y}
body{position:relative; overflow:hidden}
body{background:var(--noche); color:var(--texto); font-family:Fredoka,system-ui,sans-serif; overflow:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
h1,h2,b{font-family:'Bubblegum Sans',Fredoka,cursive; font-weight:700}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible{outline:3px solid var(--menta); outline-offset:2px}
[hidden]{display:none!important}

/* ---- menú ---- */
#menu{height:100%; overflow-y:auto; overscroll-behavior:contain;
  background:radial-gradient(800px 420px at 20% -10%,#3B2A72,transparent 60%),radial-gradient(600px 400px at 100% 0,#4A2560,transparent 55%)}
.menu-in{max-width:980px; margin:0 auto; padding:22px 16px 40px}
h1{font-size:clamp(34px,7vw,58px); margin:0; line-height:1.05; font-weight:700}
h1 span{background:linear-gradient(95deg,#FF6FB5,#FFD166,#7BF2C8,#7BC8FF,#B98CFF); -webkit-background-clip:text; background-clip:text; color:transparent}
.bajada{color:var(--tenue); margin:6px 0 22px; max-width:60ch}
h2{font-size:20px; margin:22px 0 10px; font-weight:700}
#mapas{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.mapa-op{background:var(--panel); border:2px solid var(--linea); border-radius:14px; padding:8px 8px 10px; text-align:left}
.mapa-op[aria-pressed="true"]{border-color:var(--menta); box-shadow:0 0 0 4px rgba(123,242,200,.18)}
.mapa-op .mini{border-radius:9px; overflow:hidden; aspect-ratio:16/9}
.mapa-op .mini svg{width:100%; height:100%; display:block}
.mapa-op b{display:block; font-size:18px; margin-top:6px}
.fila{display:flex; flex-wrap:wrap; gap:8px}
.op{background:var(--panel); border:2px solid var(--linea); border-radius:12px; padding:10px 16px; font-weight:700}
.op[aria-pressed="true"]{border-color:var(--magenta); background:var(--panel2)}
.jugar{margin-top:26px; background:var(--magenta); color:#2A0F22; border:0; border-radius:14px; padding:14px 34px; font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:22px; box-shadow:0 6px 0 #B83E7C}
.jugar:active{transform:translateY(3px); box-shadow:0 3px 0 #B83E7C}
.como{margin-top:26px; background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:14px 16px; color:var(--tenue); font-size:15px; line-height:1.55}
.como b{color:var(--texto)}

/* ---- carga ---- */
#cargando{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px}
.carga{width:min(320px,70vw); height:12px; border-radius:6px; background:var(--panel); overflow:hidden; border:1px solid var(--linea)}
#carga-barra{height:100%; width:0; background:linear-gradient(90deg,#FF5D8F,#FFD84D,#5FD48B,#4FB8FF,#9A7BFF); transition:width .2s}

/* ---- juego ---- */
#juego{position:relative; height:100%}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
#aviso-turno{position:absolute; top:34%; left:50%; transform:translate(-50%,-50%) scale(.8); background:rgba(27,20,53,.9); border:3px solid #fff; border-radius:16px;
  padding:10px 22px; font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:clamp(18px,3.4vw,28px); opacity:0; pointer-events:none; white-space:nowrap}
#aviso-turno.ver{animation:aviso 1.6s ease forwards}
@keyframes aviso{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
#ayuda{position:absolute; left:50%; bottom:78px; transform:translateX(-50%); background:rgba(27,20,53,.86); border-radius:12px; padding:8px 14px; font-size:14px; font-weight:700; max-width:min(90vw,520px); text-align:center; pointer-events:none}
#tuto-mecha{position:absolute; inset:0; z-index:30; background:rgba(12,8,28,.8); display:flex; align-items:center; justify-content:center; padding:14px}
.tuto-caja{position:relative; width:min(360px,100%); background:linear-gradient(160deg,var(--panel2) 0%,var(--panel) 70%); border:3px solid var(--menta); border-radius:20px;
  padding:16px 18px 18px; text-align:center; box-shadow:0 14px 30px rgba(0,0,0,.5), 0 0 18px -4px rgba(123,242,200,.45); animation:abrirMos .22s cubic-bezier(.3,1.6,.5,1)}
.tuto-caja h3{margin:0 0 4px; font-family:'Bubblegum Sans',cursive; font-size:20px; color:#FFD84D; text-shadow:0 2px 2px rgba(0,0,0,.5)}
.tuto-dibujo{width:min(240px,86%); margin:4px auto 6px}
.tuto-dibujo svg{width:100%; height:auto; display:block}
.lazo-giro{transform-origin:110px 92px; animation:lazoGira 3.2s linear infinite}
@keyframes lazoGira{to{transform:rotate(360deg)}}
.tuto-dibujo .pieza{animation-duration:4.4s; animation-iteration-count:infinite; animation-timing-function:ease-in-out}
.pieza-cabeza,.pieza-torso{animation-name:piezaEntraA}
.pieza-brazo-i,.pieza-brazo-d{animation-name:piezaEntraB}
.pieza-pierna-i,.pieza-pierna-d{animation-name:piezaEntraC}
@keyframes piezaEntraA{0%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}45%{transform:translate(0,0) scale(1); opacity:1}88%{transform:translate(0,0) scale(1); opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}}
@keyframes piezaEntraB{0%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}58%{transform:translate(0,0) scale(1); opacity:1}88%{transform:translate(0,0) scale(1); opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}}
@keyframes piezaEntraC{0%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}70%{transform:translate(0,0) scale(1); opacity:1}88%{transform:translate(0,0) scale(1); opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.35); opacity:0}}
@media (prefers-reduced-motion:reduce){ .lazo-giro,.tuto-dibujo .pieza{animation:none} .tuto-dibujo .pieza{transform:translate(0,0); opacity:1} }
.tuto-texto{margin:4px 0 10px; color:var(--texto); font-size:14px; line-height:1.45}
.tuto-texto b{color:#FFD84D}
#panel-armas{position:absolute; inset:0; background:rgba(15,10,34,.72); display:flex; align-items:center; justify-content:center; padding:14px}
.panel{background:var(--panel); border:1px solid var(--linea); border-radius:18px; padding:14px; width:min(620px,100%); max-height:100%; overflow-y:auto}
.panel-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.panel-top h2{margin:0}
#lista-armas{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:8px}
.arma-op{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; text-align:left; background:var(--panel2); border:2px solid transparent; border-radius:12px; padding:8px 10px}
.arma-op[aria-pressed="true"]{border-color:var(--magenta)}
.arma-op:disabled{opacity:.4; cursor:not-allowed}
.arma-op b{display:block; font-size:16px} .arma-op small{display:block; color:var(--tenue); font-size:12.5px; line-height:1.35}
.arma-op em{font-style:normal; font-weight:700; color:var(--menta)}
.cerrar{background:var(--panel2); border:1px solid var(--linea); border-radius:10px; padding:6px 12px; font-weight:700}
/* ---- bienvenida y girar ---- */
#bienvenida,#girar{position:fixed; top:env(safe-area-inset-top,0px); right:env(safe-area-inset-right,0px); bottom:env(safe-area-inset-bottom,0px); left:env(safe-area-inset-left,0px); z-index:50; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px;
  background:radial-gradient(700px 420px at 50% 20%,#4A2E8A,transparent 70%),radial-gradient(500px 360px at 90% 100%,#5A2560,transparent 60%),#1B1435}
#girar{z-index:60; background:#140E2C}
.estrellas{position:absolute; inset:0; pointer-events:none; opacity:.8;
  background-image:radial-gradient(2px 2px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 12%,#fff,transparent),radial-gradient(2px 2px at 86% 42%,#FFE66D,transparent),
  radial-gradient(1.5px 1.5px at 30% 70%,#fff,transparent),radial-gradient(2px 2px at 58% 84%,#7BF2C8,transparent),radial-gradient(1.5px 1.5px at 8% 88%,#FF9EC4,transparent),radial-gradient(1.5px 1.5px at 44% 30%,#fff,transparent);
  animation:titilar 3s ease-in-out infinite alternate}
@keyframes titilar{from{opacity:.45}to{opacity:.95}}
.bv-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; max-width:520px}
.bv-uni{width:min(46vw,210px); aspect-ratio:200/210}
.bv-uni svg{width:100%; height:100%; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
#bienvenida h1{font-size:clamp(34px,9vw,60px); margin:0}
.bv-sub{color:var(--tenue); margin:0 0 14px; font-weight:700}
#bv-jugar{margin:0; font-size:26px; padding:14px 46px; animation:latir 1.6s ease-in-out infinite}
@keyframes latir{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.bv-nota{color:var(--tenue); font-size:13px; max-width:34ch; margin:14px 0 0; line-height:1.45}
.gi-in{display:flex; flex-direction:column; align-items:center; gap:10px}
.gi-tel{width:min(60vw,230px); aspect-ratio:1}
.gi-tel svg{width:100%; height:100%; display:block}
.gi-tel .tel{transform-origin:115px 115px; animation:girarTel 2.6s ease-in-out infinite}
.gi-tel .flecha{animation:flechita 2.6s ease-in-out infinite}
@keyframes girarTel{0%,18%{transform:rotate(0)}50%,82%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@keyframes flechita{0%,18%{opacity:1}40%,100%{opacity:0}}
#girar b{font-family:'Bubblegum Sans',cursive; font-size:clamp(24px,7vw,34px)}
#girar p{color:var(--tenue); margin:0; font-weight:700}
.fs-menu{margin-top:12px}
@media (prefers-reduced-motion:reduce){ .estrellas,#bv-jugar,.gi-tel .tel,.gi-tel .flecha{animation:none} }
/* ---- marcador: nube pastel, retratos coronados y medallón alado de turno ---- */
.hud{position:absolute; top:12px; left:14px; right:14px; display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:flex-start; pointer-events:none}
.marcador{display:flex; align-items:center; gap:0; max-width:300px; min-width:190px}
.marcador.b{flex-direction:row-reverse; justify-self:end}
.marcador.a{--tono:#FF2E97} .marcador.b{--tono:#19E3C8}
.retrato{position:relative; z-index:2; width:56px; flex:0 0 56px; height:58px}
.retrato .nube{position:absolute; left:50%; bottom:-6px; width:78px; height:48px; translate:-50% 0; z-index:0; filter:drop-shadow(0 3px 4px rgba(20,8,45,.4))}
.retrato .emblema{position:absolute; left:50%; bottom:6px; translate:-50% 0; z-index:1; width:48px; height:48px; border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#fff,#FFD3EA 45%,var(--tono) 100%); border:3.5px solid #1C1440;
  box-shadow:0 0 0 3px var(--tono), 0 3px 7px rgba(20,8,45,.5)}
.retrato .emblema svg{width:100%; height:100%; display:block; border-radius:50%}
.retrato .emblema::after{content:""; position:absolute; left:50%; top:-15px; width:22px; height:16px; translate:-50% 0;
  background:linear-gradient(#FFE866,#FFA51E); clip-path:polygon(0% 100%,0% 40%,22% 65%,50% 0%,78% 65%,100% 40%,100% 100%);
  border-bottom:2px solid #1C1440; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.retrato .chispa{position:absolute; z-index:2; width:18px; height:18px; top:-7px; background:#FFE24D; border:2px solid #1C1440;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.marcador.a .chispa{left:-7px} .marcador.b .chispa{right:-7px}
.pildora{position:relative; z-index:1; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:5px;
  padding:7px 16px 7px 38px; margin-left:-26px;
  background:linear-gradient(160deg,#3C2A72 0%,#20153F 75%); border:3.5px solid var(--tono); border-radius:999px;
  box-shadow:0 5px 10px rgba(15,6,35,.55), 0 0 12px -2px var(--tono), inset 0 1px 0 rgba(255,255,255,.14)}
.marcador.b .pildora{padding:7px 38px 7px 16px; margin-left:0; margin-right:-26px; align-items:flex-end; text-align:right}
.pildora .nom{display:flex; align-items:center; gap:4px; font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:12.5px; letter-spacing:.2px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.marcador.b .pildora .nom{flex-direction:row-reverse}
.hud-estrella{flex:0 0 auto; width:10px; height:10px; background:#FFE24D; border:1.2px solid #1C1440;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.pildora .barra{display:block; position:relative; height:15px; width:100%; border-radius:999px; overflow:hidden;
  background:#120B2C; border:2.5px solid #F4EEFF; box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 2px rgba(0,0,0,.5)}
.pildora .barra i{display:block; height:100%; width:0; border-radius:999px; transition:width .35s cubic-bezier(.3,.9,.4,1);
  background:linear-gradient(#FF9ECE,var(--tono) 45%,color-mix(in srgb,var(--tono) 55%,#1C1440) 100%)}
.marcador.a .barra i{background:linear-gradient(90deg,#FF2E6B,#FF8F2E,#FFD500,#39D66B,#2E9BFF,#9147FF)}
.marcador.b .barra i{margin-left:auto; background:linear-gradient(90deg,#7A3FFF,#2E9BFF,#19E3C8)}
.pildora .barra::before{content:""; position:absolute; left:3px; right:3px; top:1.5px; height:4px; border-radius:999px; background:rgba(255,255,255,.65); filter:blur(.3px); pointer-events:none; z-index:2}
.centro{position:relative; min-width:120px; padding-top:4px; text-align:center; display:flex; flex-direction:column; align-items:center}
.gema-ala{position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:-12px; z-index:2}
.ala{width:24px; height:38px; flex:0 0 auto; filter:drop-shadow(0 2px 3px rgba(20,8,45,.4))}
.ala-i{margin-right:-11px} .ala-d{margin-left:-11px; transform:scaleX(-1)}
.gema{position:relative; width:72px; height:72px; z-index:1}
.gema svg{width:100%; height:100%; display:block; filter:drop-shadow(0 4px 6px rgba(20,8,45,.55))}
.gema-borde{stroke:var(--turnoColor,var(--linea)); transition:stroke .3s}
.gema-nucleo{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.pedestal{position:relative; width:130px; padding:13px 12px 7px; border-radius:18px; margin-top:6px;
  background:linear-gradient(160deg,var(--panel2) 0%,var(--panel) 60%,var(--noche) 100%); border:3px solid var(--turnoColor,var(--linea)); transition:border-color .3s;
  box-shadow:0 5px 10px rgba(10,5,25,.55), inset 0 1px 0 rgba(255,255,255,.14)}
#turno{font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:13px; line-height:1.2; color:var(--texto); text-shadow:0 1px 3px rgba(0,0,0,.6)}
#reloj{font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:25px; line-height:1; font-variant-numeric:tabular-nums; color:#fff; text-shadow:0 2px 2px rgba(0,0,0,.7)}
.viento-pill{position:relative; margin-top:-6px; display:inline-flex; align-items:center; gap:4px; padding:3px 12px; border-radius:999px;
  background:linear-gradient(var(--panel2),var(--panel)); border:2.5px solid var(--linea); box-shadow:0 3px 6px rgba(10,5,25,.4);
  font-family:'Bubblegum Sans',cursive; font-weight:700; font-size:11.5px; color:var(--tenue)}
.viento-pill .flecha{font-size:11px; line-height:1}
#viento{display:inline-block}
@media (max-width:460px){ .pildora .nom{font-size:11px} .marcador{min-width:132px} .gema{width:58px;height:58px} .pedestal{width:106px}}
@media (max-width:700px){ .marcador{min-width:140px} .retrato{width:44px; flex-basis:44px; height:48px} .retrato .emblema{width:38px;height:38px}
  .pildora{padding:5px 12px 5px 30px} .marcador.b .pildora{padding:5px 30px 5px 12px} .pildora .nom{font-size:11px} .pildora .barra{height:11px}
  .centro{min-width:100px} .gema{width:52px;height:52px} .pedestal{width:96px; padding:9px 9px 6px} #reloj{font-size:19px} #turno{font-size:11px} .viento-pill{font-size:10px; padding:2px 9px} .util{top:68px} }
/* ---- controles: joystick de cuerno, caramelo y mira ---- */
#ayuda{bottom:auto; top:80px}
.joy{position:absolute; left:14px; bottom:12px; width:114px; height:114px; touch-action:none; -webkit-user-select:none; user-select:none}
.joy-base,.joy-base svg{position:absolute; inset:0; width:100%; height:100%}
.joy-perilla{position:absolute; left:50%; top:50%; width:63px; height:63px; margin:-34px 0 0 -31.5px; pointer-events:none; transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.joy.activo .joy-perilla{transition:none}
.joy-perilla svg{width:100%; height:100%; display:block; filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.util{position:absolute; top:74px; right:8px; display:flex; gap:6px}
.ico{width:46px; height:46px; border-radius:14px; border:2.5px solid #2E1F55; background:linear-gradient(#4A3A85,#2A1F52); box-shadow:0 0 0 2px rgba(255,255,255,.18) inset; display:flex; align-items:center; justify-content:center; padding:0; color:#fff}
.ico[aria-pressed="true"]{border-color:var(--menta)}
.acciones{position:absolute; right:12px; bottom:10px; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.botones{display:flex; align-items:flex-end; gap:6px}
.b-caramelo,.b-mira{position:relative; background:none; border:0; padding:0; touch-action:none; -webkit-tap-highlight-color:transparent; overflow:visible}
.b-caramelo{width:94px; height:94px; margin-bottom:4px}
.b-mira{width:78px; height:85px}
.b-caramelo svg,.b-mira svg{width:100%; height:100%; display:block; overflow:visible}
.car-svg{transition:transform .22s cubic-bezier(.3,1.8,.5,1); transform-origin:50% 80%}
.b-caramelo.apretado .car-svg{transform:scale(1.14,.78); transition:transform .05s}
.b-mira .mira-g,.b-mira .globo-g{transform-box:fill-box; transform-origin:50% 55%; transition:transform .22s cubic-bezier(.3,1.7,.5,1), opacity .15s}
.b-mira .globo-g{transform:scale(0); opacity:0}
.b-mira.globo .globo-g{transform:scale(1); opacity:1}
.b-mira.globo .mira-g{transform:scale(.3) rotate(90deg); opacity:0}
.b-mira.globo.carga .globo-g{animation:inflar .5s ease-in-out infinite alternate}
@keyframes inflar{from{transform:scale(1)}to{transform:scale(1.12)}}
.b-mira.apagado,.b-caramelo.apagado{opacity:.45}
.fx{position:absolute; inset:0; pointer-events:none; overflow:visible}
.gota{position:absolute; left:50%; top:42%; width:calc(var(--s) * 1.35); height:calc(var(--s) * 1.35); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background:var(--c); border:2px solid #2E1F55;
  border-radius:50% 50% 50% 50% / 60% 60% 42% 42%; animation:gota .7s cubic-bezier(.15,.7,.4,1) forwards}
@keyframes gota{0%{transform:translate(0,0) scale(.4)}45%{transform:translate(var(--dx),var(--dy)) scale(1)}100%{transform:translate(calc(var(--dx) * 1.3),calc(var(--dy) + 46px)) scale(.55); opacity:0}}
.estrellita{position:absolute; left:50%; top:45%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); background:var(--c);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); animation:estrellita .6s ease-out forwards}
@keyframes estrellita{0%{transform:translate(0,0) scale(.3) rotate(0)}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg); opacity:0}}
@media (max-width:700px){ .joy{width:100px;height:100px} .b-caramelo{width:84px;height:84px} .b-mira{width:70px;height:76px} .eq{font-size:11px} }
@media (max-height:360px){ .joy{width:90px;height:90px} .b-mira{width:64px;height:70px} .b-caramelo{width:76px;height:76px} }
@media (prefers-reduced-motion:reduce){ .gota,.estrellita{animation-duration:.01s} }
.joycam{position:relative; width:78px; height:78px; margin-bottom:8px; touch-action:none; -webkit-user-select:none; user-select:none; opacity:.92}
.joycam .joy-base{position:absolute; inset:0}
.joycam .joy-base svg{width:100%; height:100%; display:block}
.joycam .joy-perilla{position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; pointer-events:none; transition:transform .16s cubic-bezier(.3,1.6,.5,1)}
.joycam.activo .joy-perilla{transition:none}
.joycam .joy-perilla svg{width:100%; height:100%; display:block; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
@media (max-width:700px){ .joycam{width:68px; height:68px} .joycam .joy-perilla{width:40px;height:40px;margin:-20px 0 0 -20px} }
@media (max-height:360px){ .joycam{width:60px; height:60px} .joycam .joy-perilla{width:36px;height:36px;margin:-18px 0 0 -18px} }
/* ---- botón de armas ---- */
.solo-lector{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.b-arma{position:relative; width:79px; height:79px; margin-bottom:10px; border-radius:50%; padding:0; border:3px solid #2E1F55;
  background:radial-gradient(circle at 35% 30%,#4A3A85,#241A48 70%); box-shadow:0 0 0 3px #FF6FB5, 0 6px 12px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; touch-action:none; -webkit-tap-highlight-color:transparent; transition:transform .12s}
.b-arma:active{transform:scale(.92)}
.b-arma #arma-icono{display:flex; transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.b-arma #arma-icono svg{width:48px; height:48px; display:block}
.b-arma.cambio #arma-icono{animation:popArma .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes popArma{0%{transform:scale(.4) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
.flechita{position:absolute; left:50%; top:-17px; width:26px; height:18px; margin-left:-13px; animation:flotaFlecha 1.4s ease-in-out infinite}
.flechita svg{width:100%; height:100%; display:block}
@keyframes flotaFlecha{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#arma-mun{position:absolute; right:-6px; bottom:-4px; min-width:24px; height:20px; padding:0 5px; border-radius:10px; background:#2E1F55; border:2px solid #7BF2C8;
  color:#7BF2C8; font:800 12px/16px Fredoka,sans-serif; text-align:center}
.b-arma.apagado{opacity:.45}
@media (max-width:700px){ .b-arma{width:71px; height:71px} .b-arma #arma-icono svg{width:42px; height:42px} }
@media (max-height:360px){ .b-arma{width:64px; height:64px; margin-bottom:4px} .b-arma #arma-icono svg{width:38px; height:38px} }
@media (prefers-reduced-motion:reduce){ .flechita,.b-arma.cambio #arma-icono{animation:none} }
/* ---- mosaico de armas ---- */
.mosaico{position:absolute; z-index:20; background:rgba(27,20,53,.94); border:3px solid #FF6FB5; border-radius:18px; padding:8px; box-shadow:0 10px 24px rgba(0,0,0,.45);
  transform-origin:var(--ox,50%) 100%; animation:abrirMos .2s cubic-bezier(.3,1.6,.5,1)}
@keyframes abrirMos{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}
.mos-grid{display:grid; grid-template-columns:repeat(5,50px); gap:6px}
.mos-op{position:relative; width:50px; height:50px; border-radius:12px; border:2px solid transparent; background:#352A63; padding:0; display:flex; align-items:center; justify-content:center; touch-action:none; -webkit-tap-highlight-color:transparent}
.mos-op svg{width:34px; height:34px; display:block; pointer-events:none}
.mos-op[aria-checked="true"]{border-color:#FF6FB5; background:#4A3585; box-shadow:0 0 0 2px rgba(255,111,181,.35)}
.mos-op:disabled,.mos-op.sin-mun{opacity:.38}
.mos-op em{position:absolute; right:-4px; bottom:-5px; font:800 10px/14px Fredoka,sans-serif; font-style:normal; color:#7BF2C8; background:#2E1F55; border:1.5px solid #7BF2C8; border-radius:8px; padding:0 4px; pointer-events:none}
.mos-op.pulsando{transform:scale(.92)}
.mos-op.mos-resalta{border-color:#FFD84D; animation:mosResalta 1s ease-in-out infinite}
.mos-op.mos-resalta::before{content:"¡Nuevo!"; position:absolute; left:50%; top:-22px; translate:-50% 0; white-space:nowrap;
  background:#FFD84D; color:#4A2E00; font:800 10px/14px 'Bubblegum Sans',cursive; border-radius:8px; padding:2px 7px; box-shadow:0 2px 4px rgba(0,0,0,.4); pointer-events:none}
@keyframes mosResalta{0%,100%{box-shadow:0 0 0 2px rgba(255,216,77,.4), 0 0 0 0 rgba(255,216,77,.6)} 50%{box-shadow:0 0 0 3px rgba(255,216,77,.75), 0 0 14px 3px rgba(255,216,77,.5)}}
.mos-punta{position:absolute; bottom:-13px; left:var(--px,50%); width:0; height:0; margin-left:-11px; border-left:11px solid transparent; border-right:11px solid transparent; border-top:12px solid #FF6FB5}
.mos-info{position:absolute; left:0; right:0; bottom:calc(100% + 8px); background:#2A1F52; border:2px solid #7BF2C8; border-radius:12px; padding:8px 10px; font-size:13px; line-height:1.35; color:#EDE7FF; box-shadow:0 6px 14px rgba(0,0,0,.4)}
.mos-info b{display:block; font-family:'Bubblegum Sans',cursive; font-size:16px; color:#FFE66D}
/* ---- pantallas iniciales ---- */
#logo,#inicio{position:relative; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(900px 520px at 50% 25%,#4A2E8C,transparent 65%),radial-gradient(700px 500px at 90% 100%,#5A2560,transparent 60%),#1B1435}
.logo-caja{width:min(84vw,520px); max-height:80vh; animation:entraLogo 2.2s ease}
.logo-caja svg{width:100%; height:auto; max-height:80vh; display:block; filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.lg-rayos{transform-origin:260px 120px; animation:giraRayos 12s linear infinite}
@keyframes giraRayos{to{transform:rotate(360deg)}}
@keyframes entraLogo{0%{opacity:0; transform:scale(.7)}25%{opacity:1; transform:scale(1.04)}35%{transform:scale(1)}100%{opacity:1}}
.ini-brillo{position:absolute; width:min(80vw,620px); aspect-ratio:1; border-radius:50%; left:50%; top:46%; transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,#FF5D8F33,#FFD84D33,#5FD48B33,#4FB8FF33,#B98CFF33,#FF5D8F33); filter:blur(18px); animation:giraRayos 18s linear infinite}
.ini-cuerpo{position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px; max-width:560px; width:100%}
.ini-uni{width:min(58vw,280px); aspect-ratio:200/210; filter:drop-shadow(0 10px 22px rgba(0,0,0,.4))}
.ini-uni svg{width:100%; height:100%; display:block}
.ini-botones{display:flex; flex-direction:column; align-items:center; gap:10px; width:100%}
.ini-fila{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.jugar.grande{font-size:30px; padding:14px 54px; letter-spacing:1px}
@media (max-height:430px){ .ini-cuerpo{flex-direction:row; gap:24px} .ini-uni{width:min(38vw,250px)} .jugar.grande{font-size:24px; padding:11px 38px} }
.ops.vol{align-items:center; gap:12px}
.ops.vol input[type=range]{flex:1; min-width:140px; accent-color:var(--magenta)}
.ops.vol span{font-weight:700; min-width:48px}
.creds{background:var(--panel); border:1px solid var(--linea); border-radius:16px; padding:16px; line-height:1.6; color:var(--tenue)}
.creds b{color:var(--texto); font-family:'Bubblegum Sans',cursive; font-size:18px}
.creds p{margin:0 0 14px}
.eq-trio{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:12px}
.tarjeta-uni{background:var(--panel); border:3px solid var(--linea); border-radius:18px; padding:10px; text-align:center; color:inherit}
.tarjeta-uni[aria-pressed="true"]{border-color:var(--menta); box-shadow:0 0 0 4px rgba(123,242,200,.2)}
.tarjeta-uni .vista{width:100%; max-width:180px; margin:0 auto; aspect-ratio:200/210}
.tarjeta-uni .vista svg{width:100%; height:100%; display:block}
.tarjeta-uni b{display:block; font-family:'Bubblegum Sans',cursive; font-size:21px}
.tarjeta-uni small{display:block; color:var(--menta); font-weight:700; margin-bottom:6px}
.stat{display:grid; grid-template-columns:78px 1fr; gap:8px; align-items:center; margin-bottom:5px; text-align:left}
.stat span{font-size:12.5px; font-weight:700; color:var(--tenue)}
.stat .barra{height:10px; border-radius:6px; border:2px solid var(--linea); background:rgba(255,255,255,.08); overflow:hidden}
.stat .barra i{display:block; height:100%; background:linear-gradient(90deg,var(--menta),#4FB8FF)}
/* ---- pantallas de equipo y personalización ---- */
#equipo,#personalizar{height:100%; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  background:radial-gradient(800px 420px at 20% -10%,#3B2A72,transparent 60%),radial-gradient(600px 400px at 100% 0,#4A2560,transparent 55%)}
.pant-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.pant-top h2{margin:0; font-size:clamp(20px,4vw,28px)}
.monedas{font-family:'Bubblegum Sans',cursive; font-size:20px; color:#FFE66D}
.eq-cuerpo{display:grid; grid-template-columns:minmax(220px,300px) 1fr; gap:16px; align-items:start; margin-top:14px}
@media (max-width:700px){ .eq-cuerpo{grid-template-columns:1fr} }
.eq-col{background:var(--panel); border:1px solid var(--linea); border-radius:16px; padding:12px; text-align:center}
.eq-vista{width:100%; max-width:230px; margin:0 auto; aspect-ratio:200/210}
.eq-vista svg{width:100%; height:100%; display:block}
.eq-col b{display:block; font-family:'Bubblegum Sans',cursive; font-size:22px}
.eq-col small{display:block; color:var(--menta); font-weight:700; margin-bottom:8px}
.eq-lista{display:flex; gap:8px; justify-content:center; margin-bottom:10px; flex-wrap:wrap}
.uni-mini{width:72px; background:var(--panel2); border:2px solid transparent; border-radius:12px; padding:2px}
.uni-mini[aria-pressed="true"]{border-color:var(--menta)}
.uni-mini svg{width:100%; height:auto; display:block}
.uni-mini b{font-size:11px; font-family:Fredoka,sans-serif; font-weight:700}
.eq-mejoras{display:flex; flex-direction:column; gap:10px}
.mejora{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:10px 12px}
.mj-ico{display:flex}
.mj-txt b{display:block; font-family:'Bubblegum Sans',cursive; font-size:17px}
.mj-txt small{display:block; color:var(--tenue); font-size:12.5px; line-height:1.3}
.puntos{display:flex; gap:5px; margin-top:5px}
.puntos i{width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,.14); border:2px solid var(--linea)}
.puntos i.on{background:var(--menta); border-color:var(--menta)}
.puntos i.nat{background:#FFE66D; border-color:#FFE66D}
.mj-btn{background:var(--magenta); color:#2A0F22; border:0; border-radius:12px; padding:9px 14px; font-family:'Bubblegum Sans',cursive; font-size:15px}
.mj-btn:disabled{background:var(--panel2); color:var(--tenue)}
.mj-btn.falta{animation:tiembla .35s}
@keyframes tiembla{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.fila-cust{background:var(--panel); border:1px solid var(--linea); border-radius:14px; padding:10px 12px}
.fila-cust b{font-family:'Bubblegum Sans',cursive; font-size:16px}
.fila-cust .ops{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.op-cust{background:var(--panel2); border:2px solid transparent; border-radius:10px; padding:7px 12px; font-weight:700; font-size:14px}
.op-cust.redonda{padding:4px; border-radius:50%}
.op-cust[aria-pressed="true"]{border-color:var(--menta)}
.muestra{display:block; width:28px; height:28px; border-radius:50%; border:2px solid #2E1F55}
#final{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,10,34,.55)}
#final .panel{text-align:center; width:min(420px,92%)}
#final h2{font-size:30px; margin:4px 0 14px}

/* ---- mecha: botón de pilotar/bajar y marcador de piezas ---- */
.b-mecha{background:linear-gradient(#FFD84D,#FFA93D); border:3px solid #2E2A3D; color:#2E2A3D; font-family:'Bubblegum Sans',cursive; font-size:15px; padding:9px 18px; margin-bottom:8px; box-shadow:0 4px 0 #B8791F; animation:pulsoMecha 1s ease-in-out infinite}
.b-mecha:active{transform:translateY(2px); box-shadow:0 2px 0 #B8791F}
@keyframes pulsoMecha{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#mecha-progreso{position:absolute; left:50%; top:96px; transform:translateX(-50%); background:rgba(27,20,53,.82); border:2px solid #FFD84D; border-radius:14px; padding:4px 14px; font-weight:800; color:#FFD84D; font-size:14px; z-index:5}

/* ---- pantalla final: picnic al atardecer ---- */
#fin-juego{position:fixed; inset:0; background:#2B1B5A; overflow:hidden; z-index:30}
#fj-cv{position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block}
#fj-ui{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:max(14px,env(safe-area-inset-top)) 16px max(22px,env(safe-area-inset-bottom)); pointer-events:none; text-align:center}
.fj-top{display:flex; flex-direction:column; align-items:center}
#fj-titulo{margin:0; font-family:'Bubblegum Sans',cursive; font-size:clamp(44px,10vw,92px); line-height:1.05; background:linear-gradient(90deg,#FF6FB5,#FFD84D,#7BF2C8,#4FB8FF,#B98CFF); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 rgba(46,31,85,.85)) drop-shadow(0 0 18px rgba(255,255,255,.35)); opacity:0}
#fj-sub{margin:4px 0 0; color:#fff; font-weight:800; font-size:clamp(14px,2.8vw,23px); text-shadow:0 2px 0 #2E1F55,0 0 16px rgba(0,0,0,.4); opacity:0}
#fj-ui.ver #fj-titulo{animation:fjTit 1.3s cubic-bezier(.2,1.5,.4,1) .2s both}
#fj-ui.ver #fj-sub{animation:fjSub 1.2s 1s both}
@keyframes fjTit{from{transform:scale(.15) rotate(-9deg); opacity:0}to{transform:none; opacity:1}}
@keyframes fjSub{from{transform:translateY(12px); opacity:0}to{transform:none; opacity:1}}
#fj-otra{pointer-events:auto; margin-top:0; animation:fjBtn .9s cubic-bezier(.2,1.5,.4,1) both, fjPulso 1.6s 1s ease-in-out infinite}
@keyframes fjBtn{from{transform:scale(.3); opacity:0}to{transform:none; opacity:1}}
@keyframes fjPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}