/* ElCabezas · estilo v2 (interfaz de juego móvil) */
:root{--tinta:#1a0f2e;--fondo:#22164a;--panel:#2e2160;--panel2:#3b2c7a;--texto:#fff8ec;--oro:#ffcf3f;--rojo:#ff4d5e;--verde:#45d483;--azul:#3fa3ff;--morado:#a35cff;
  --t:"Lilita One","Arial Black",Impact,sans-serif;--f:"Nunito",system-ui,sans-serif;
  --borde:0 0 0 3px var(--tinta);--sombra:0 6px 0 var(--tinta),0 10px 18px #0007}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;color:var(--texto);font:700 15px/1.35 var(--f);overscroll-behavior:none;user-select:none;-webkit-user-select:none}
body{background:
  radial-gradient(ellipse at 50% -10%,#6a46d6 0,#3a2790 35%,transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 4l4 8 8 4-8 4-4 8-4-8-8-4 8-4z' fill='%23ffffff' fill-opacity='.035'/%3E%3C/svg%3E"),
  linear-gradient(#2a1b5e,#160d33 70%,#0d0820);background-attachment:fixed}
#app{max-width:520px;margin:0 auto;min-height:100vh;position:relative}
#app.con-nav{padding-bottom:84px}
.scr{padding:10px 12px 20px}
input{width:100%;min-height:52px;border-radius:14px;border:3px solid var(--tinta);background:#fff;color:var(--tinta);font:800 18px var(--f);padding:0 14px;margin:6px 0 12px;user-select:text;-webkit-user-select:text}
/* texto con contorno, típico de juego */
.tit,.tit-sec,.b,.hud,.logo,.m-tit,.r-tit,.fin-tit,.t-tit span,.gema,.c-nom,.precio,.c-niv{font-family:var(--t);font-weight:400;letter-spacing:.3px}
.contorno,.b,.hud b,.t-tit span,.tit-sec,.r-tit,.fin-tit,.m-tit{text-shadow:0 2px 0 var(--tinta),2px 0 0 var(--tinta),-2px 0 0 var(--tinta),0 -2px 0 var(--tinta),0 3px 0 var(--tinta)}
.tit{margin:0 0 8px;font-size:19px;color:var(--oro);text-shadow:0 2px 0 var(--tinta)}
.tit small{font:800 13px var(--f);color:#fff9;margin-left:6px}
.tit-sec{font-size:30px;text-align:center;margin:14px 0 4px;color:#fff}
.tit-sec small{font-size:18px;color:var(--oro)}
.nota{font:700 13px var(--f);color:#e6dcffcc;text-align:center;margin:4px 6px 10px}
.panel{background:linear-gradient(180deg,#3d2c86,#2b1f63);border-radius:20px;padding:12px;margin:12px 0;box-shadow:var(--borde),inset 0 3px 0 #ffffff1c,0 8px 18px #0006}
/* ---------------- botones */
.b{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;margin:10px 0;border:0;border-radius:16px;font-size:20px;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--c1) 0 50%,var(--c2) 50% 100%);box-shadow:var(--borde),inset 0 -5px 0 #0003,inset 0 3px 0 #fff5,0 6px 0 var(--tinta);transition:transform .06s;position:relative}
.b:active:not([disabled]){transform:translateY(4px);box-shadow:var(--borde),inset 0 -2px 0 #0003,inset 0 3px 0 #fff5,0 2px 0 var(--tinta)}
.b[disabled]{filter:grayscale(.8) brightness(.75);cursor:default}
.b small{font:800 11px var(--f);text-shadow:none;opacity:.9}
.b-oro{--c1:#ffe26a;--c2:#ffb81f;color:#fff}
.b-verde{--c1:#7bf0a6;--c2:#2fc463}
.b-rojo{--c1:#ff8291;--c2:#ea3446}
.b-azul{--c1:#7cc3ff;--c2:#2f8bff}
.b-morado{--c1:#c592ff;--c2:#8a3bf0}
.b-gris{--c1:#7a6fa6;--c2:#55498a;font-size:16px}
.b.xl{min-height:66px;font-size:28px;border-radius:20px}
.b.mini{min-height:42px;font-size:15px;width:auto;padding:0 14px;margin:0;border-radius:12px;flex-direction:column;gap:0;line-height:1}
.b.redondo{width:62px;min-height:62px;margin:0;border-radius:18px;flex-direction:column;gap:0;flex:none;font-size:26px;line-height:1}
.brilla{animation:brilla 1.4s ease-in-out infinite}
@keyframes brilla{50%{filter:brightness(1.25) drop-shadow(0 0 10px #c592ff)}}
/* ---------------- portada / alta */
.logo{font-size:56px;line-height:.9;text-align:center;margin:0 0 6px;color:#fff;transform:rotate(-3deg);
  text-shadow:0 3px 0 var(--tinta),3px 0 0 var(--tinta),-3px 0 0 var(--tinta),0 -3px 0 var(--tinta),0 7px 0 var(--tinta),0 12px 16px #000a}
.logo span{color:var(--oro)}
.logo.peque{font-size:34px;margin:6px 0 0}
.lema{text-align:center;color:#fffc;margin:6px 10px 4px}
.portada{position:relative;height:200px;margin:10px 0 -10px}
.portada img{position:absolute;bottom:0;filter:drop-shadow(0 8px 6px #0009);animation:flota 3s ease-in-out infinite}
.portada .esc0{left:50%;transform:translateX(-50%);width:185px;z-index:3}
.portada .esc1{right:0;width:165px;z-index:2;animation-delay:-1s}
.portada .esc2{left:2%;width:115px;z-index:4;animation-delay:-2s}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* ---------------- cabecera del perfil */
.perfil-hud{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#3d2c86,#2b1f63);border-radius:18px;padding:8px 10px;box-shadow:var(--borde),inset 0 3px 0 #ffffff1c,0 6px 14px #0006}
.avatar{--s:56px;width:var(--s);height:var(--s);flex:none;border-radius:16px;position:relative;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--col) 70%,#fff),var(--col) 60%,color-mix(in srgb,var(--col) 60%,#000));box-shadow:var(--borde),inset 0 -4px 0 #0004;overflow:visible}
.avatar img{position:absolute;left:-8%;bottom:0;width:116%;height:118%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 2px 2px #0008);border-radius:0 0 14px 14px}
.avatar>span:first-child{display:grid;place-items:center;height:100%;font-size:30px}
.av-nv{position:absolute;right:-6px;bottom:-6px;min-width:24px;height:24px;border-radius:12px;background:linear-gradient(#ffe26a,#ffb81f);color:#fff;font:400 14px/24px var(--t);text-align:center;box-shadow:0 0 0 2px var(--tinta);text-shadow:0 1px 0 var(--tinta),1px 0 0 var(--tinta),-1px 0 0 var(--tinta)}
.avatar.peq{--s:38px;border-radius:12px}.avatar.peq .av-nv{min-width:18px;height:18px;font-size:11px;line-height:18px;right:-5px;bottom:-5px}
.avatar.gran{--s:110px;border-radius:24px}.avatar.gran .av-nv{min-width:34px;height:34px;font-size:20px;line-height:34px}
.ph-quien{flex:1;min-width:0}
.ph-quien b{display:block;font:400 20px/1 var(--t);text-shadow:0 2px 0 var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-quien small{color:var(--oro);font-weight:800;font-size:12px}
.xp{position:relative;height:16px;border-radius:9px;background:#1a0f2e;box-shadow:0 0 0 2px var(--tinta);margin-top:3px;overflow:hidden}
.xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#8fe8ff,#2fa8ff);border-radius:9px;box-shadow:inset 0 -3px 0 #0003}
.xp span{position:relative;display:block;text-align:center;font:400 11px/16px var(--t);text-shadow:0 1px 0 var(--tinta)}
.ph-trofeos{text-align:center;line-height:1;background:#0004;border-radius:12px;padding:5px 9px}
.ph-trofeos b{display:block;font:400 22px var(--t);color:var(--oro);text-shadow:0 2px 0 var(--tinta)}
.ph-trofeos small{font-size:10px;color:#fffa}
/* ---------------- escaparate con el héroe en 3D */
.escaparate{position:relative;height:min(38vh,320px);margin:4px 0 6px}
.escaparate canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;opacity:0;transition:opacity .5s}
.escaparate canvas.listo{opacity:1}
.escaparate.con3d .heroe-2d{opacity:0}
.heroe-2d{position:absolute;left:50%;bottom:34px;height:78%;transform:translateX(-50%);z-index:1;filter:drop-shadow(0 8px 6px #0009);animation:flota 3s ease-in-out infinite;transition:opacity .4s}
.halo{position:absolute;left:50%;top:44%;width:280px;height:280px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--col) 55%,transparent),transparent 65%);animation:halo 4s ease-in-out infinite}
@keyframes halo{50%{transform:translate(-50%,-50%) scale(1.12)}}
.pedestal{position:absolute;left:50%;bottom:12px;width:210px;height:46px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#8d7bc9,#4b3a8a 60%,#2a1d5c);box-shadow:0 0 0 3px var(--tinta),0 8px 0 var(--tinta),0 14px 20px #000a}
.estandarte{position:absolute;right:12%;bottom:40px;width:46px;height:120px;z-index:1;background:linear-gradient(90deg,#0000 0 4px,var(--col) 4px);clip-path:polygon(0 0,100% 0,100% 85%,55% 70%,10% 85%,10% 100%,0 100%);filter:drop-shadow(0 4px 0 var(--tinta));opacity:.9}
.estandarte::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:#c9a46a}
.heroe-nom{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:3;font:400 16px var(--t);background:var(--tinta);padding:2px 12px;border-radius:10px;white-space:nowrap}
/* ---------------- reto diario */
.diaria{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#5a2b6e,#3a1d52);border-radius:18px;padding:10px;box-shadow:var(--borde),inset 0 3px 0 #ffffff1c,0 6px 0 var(--tinta);margin:14px 0}
.diaria.hecha{filter:saturate(.4)}
.d-ico{font-size:30px}.d-txt{flex:1}.d-txt b{font:400 18px var(--t);display:block;text-shadow:0 2px 0 var(--tinta)}.d-txt small{font-size:11.5px;color:#fffc}
/* ---------------- navegación inferior */
.nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);display:grid;grid-template-columns:repeat(4,1fr);z-index:30;
  background:linear-gradient(180deg,#3d2c86,#22174f);box-shadow:0 -3px 0 var(--tinta),0 -8px 20px #0007;padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.nav button{position:relative;border:0;background:none;color:#cfc3ff;font:400 12px var(--t);display:flex;flex-direction:column;align-items:center;gap:1px;min-height:58px;border-radius:14px;cursor:pointer}
.nav button span{font-size:26px;line-height:1.1;transition:transform .15s}
.nav button.on{background:linear-gradient(180deg,#6b54d6,#4b37a6);color:#fff;box-shadow:inset 0 0 0 2px var(--tinta),inset 0 3px 0 #fff3;text-shadow:0 1px 0 var(--tinta)}
.nav button.on span{transform:translateY(-6px) scale(1.25)}
.punto{position:absolute;top:6px;right:22%;width:12px;height:12px;border-radius:50%;background:var(--rojo);box-shadow:0 0 0 2px var(--tinta);animation:latido 1s infinite}
/* ---------------- Cabecilla */
.talentos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.talento{background:#1a0f2e88;border-radius:14px;padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:inset 0 0 0 2px #ffffff18}
.talento span{font-size:28px}.talento b{font:400 14px var(--t);color:var(--oro)}.talento small{font-size:11.5px;color:#fffc;font-weight:700}
.retratos{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.retrato{aspect-ratio:1;border:0;border-radius:12px;background:radial-gradient(circle at 50% 30%,#6b54d6,#2b1f63);box-shadow:inset 0 0 0 2px var(--tinta);padding:0;cursor:pointer;overflow:hidden;position:relative}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:top}
.retrato.on{box-shadow:inset 0 0 0 3px var(--oro),0 0 12px var(--oro)}
.retrato.bloq img{filter:brightness(0) opacity(.45)}
.colores{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.color{width:46px;height:46px;border-radius:12px;border:0;background:var(--c);box-shadow:0 0 0 3px var(--tinta),inset 0 -5px 0 #0003;cursor:pointer;color:#fff;font-size:10px}
.color.on{box-shadow:0 0 0 3px var(--tinta),0 0 0 6px var(--oro)}
.color.bloq{filter:grayscale(.7) brightness(.55)}
.titulos{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.chip-t{border:0;border-radius:12px;padding:7px 12px;background:#1a0f2e;color:#fff;font:400 14px var(--t);box-shadow:inset 0 0 0 2px #ffffff22;cursor:pointer;display:flex;flex-direction:column;align-items:center}
.chip-t small{font:700 10px var(--f);opacity:.7}
.chip-t.on{background:linear-gradient(#ffe26a,#ffb81f);color:var(--tinta);box-shadow:0 0 0 2px var(--tinta)}
.chip-t.bloq{opacity:.55}
/* ---------------- modal de talento */
.modal{position:fixed;inset:0;z-index:60;background:radial-gradient(circle,#4b2a9acc,#0d0820f0);display:grid;place-items:center;padding:16px;animation:aparece .25s}
.m-caja{width:min(460px,100%);text-align:center}
.m-tit{font-size:44px;color:var(--oro);animation:banner .5s cubic-bezier(.2,1.6,.4,1) both}
.m-caja p{margin:4px 0 16px}
.m-opciones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opcion{border:0;border-radius:20px;padding:16px 10px;min-height:210px;cursor:pointer;color:#fff;background:linear-gradient(180deg,#6b54d6,#3b2a8a);box-shadow:var(--borde),inset 0 3px 0 #fff3,0 8px 0 var(--tinta);display:flex;flex-direction:column;align-items:center;gap:6px;animation:carta-in .5s cubic-bezier(.2,1.5,.4,1) both}
.opcion span{font-size:56px;filter:drop-shadow(0 4px 0 var(--tinta))}
.opcion b{font:400 19px var(--t);color:var(--oro);text-shadow:0 2px 0 var(--tinta)}
.opcion small{font:700 13px var(--f)}
.opcion:active{transform:scale(.96)}
@keyframes carta-in{from{transform:rotateY(90deg) scale(.6);opacity:0}}
@keyframes aparece{from{opacity:0}}
/* ---------------- HUD de partida */
.hud{display:flex;align-items:center;gap:6px;padding:8px;position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#3d2c86,#2b1f63);box-shadow:0 3px 0 var(--tinta),0 8px 16px #0007;border-radius:0 0 18px 18px}
.hud-b{border:0;min-width:40px;height:40px;border-radius:12px;background:#1a0f2e;color:#fff;font:400 18px var(--t);cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff22}
.hud-vidas{display:flex;gap:1px;font-size:18px}.hud-vidas i{font-style:normal;color:#ff4d5e;text-shadow:0 2px 0 var(--tinta)}.hud-vidas i.vacio{color:#1a0f2e;text-shadow:0 0 0 #fff3}
.hud-ronda{flex:1;text-align:center;font-size:14px;color:#fffc}.hud-ronda b{font-size:22px;color:#fff}
.hud-vict{font-size:15px}.hud-vict b{font-size:20px;color:var(--oro)}
.hud-oro{background:#1a0f2e;border-radius:12px;padding:4px 10px;font-size:15px;box-shadow:inset 0 0 0 2px #ffcf3f55}.hud-oro b{font-size:22px;color:var(--oro)}
.hud-oro.baja{animation:latido .4s}.hud-oro.sube{animation:latido .4s}
@keyframes latido{40%{transform:scale(1.3)}}
.en-tienda{padding-bottom:96px}
/* ---------------- tablero, taberna y cartas */
.tablero,.taberna{margin:10px 8px;padding:10px 8px;border-radius:20px;box-shadow:var(--borde),inset 0 3px 0 #ffffff22,0 8px 16px #0006}
.tablero{background:linear-gradient(180deg,#8a5a34,#6b4226);background-image:repeating-linear-gradient(90deg,#0000 0 38px,#00000014 38px 40px),linear-gradient(180deg,#9a663b,#6b4226)}
.taberna{background:linear-gradient(180deg,#3d2c86,#2b1f63)}
.t-tit{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 8px}
.t-tit span{font-size:18px;color:#fff}.t-tit small{font-size:11px;color:#fffc}
.slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.slot{aspect-ratio:3/4.2;border-radius:14px;position:relative;background:#00000038;box-shadow:inset 0 0 0 2px #0000004d,inset 0 4px 8px #0006;display:grid;place-items:center;touch-action:none;transition:transform .12s}
.s-num{font:400 20px var(--t);color:#ffffff30}
.slot.sel .carta{transform:translateY(-6px) scale(1.06);box-shadow:0 0 0 3px var(--tinta),0 0 0 6px var(--oro),0 10px 18px #000a}
.carta{position:absolute;inset:0;border-radius:14px;overflow:visible;cursor:grab;transition:transform .12s;
  box-shadow:0 0 0 3px var(--tinta),inset 0 0 0 3px var(--marco,#c98a4a),0 5px 0 var(--tinta)}
.c-fondo{position:absolute;inset:0;border-radius:14px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 75%,#fff 20%),color-mix(in srgb,var(--c) 55%,#000) 80%);box-shadow:inset 0 0 0 3px var(--marco,#c98a4a),inset 0 -14px 0 #0003}
.carta.t1{--marco:#c98a4a}.carta.t2{--marco:#d9e2ee}.carta.t3{--marco:#ffcf3f}.carta.fus{--marco:#ff7bff}
.carta.t3 .c-fondo{box-shadow:inset 0 0 0 3px var(--marco),inset 0 0 14px #ffcf3f88,inset 0 -14px 0 #0003}
.carta.fus{animation:brillo 2s infinite}
@keyframes brillo{50%{filter:drop-shadow(0 0 8px #ff7bff)}}
.c-img{position:absolute;left:-6%;width:112%;bottom:24%;height:84%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 3px 2px #000a);pointer-events:none}
.c-emo{position:absolute;inset:10% 0 30%;display:grid;place-items:center;font-size:30px}
.c-nom{position:absolute;left:-4px;right:-4px;bottom:15%;text-align:center;font-size:11px;line-height:15px;color:#fff;background:var(--tinta);border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.gema{position:absolute;bottom:-8px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:#fff;box-shadow:0 0 0 2.5px var(--tinta),inset 0 -4px 0 #0004,inset 0 2px 0 #fff6;text-shadow:0 1.5px 0 var(--tinta),1px 0 0 var(--tinta),-1px 0 0 var(--tinta)}
.gema.atk{left:-5px;background:radial-gradient(circle at 35% 30%,#ffc07a,#e0601f)}
.gema.vida{right:-5px;background:radial-gradient(circle at 35% 30%,#ff8a9a,#d0203f)}
.c-niv{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:15px;color:var(--oro);text-shadow:0 2px 0 var(--tinta),1px 0 0 var(--tinta),-1px 0 0 var(--tinta);white-space:nowrap;z-index:2}
.c-fac{position:absolute;top:3px;left:4px;font-size:12px;filter:drop-shadow(0 1px 0 var(--tinta))}
.c-esc{position:absolute;top:3px;right:3px;font:400 11px var(--t);background:#1a0f2e;border-radius:6px;padding:0 3px}
.c-hielo{position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,#bdefffaa,#7fd6ff55);box-shadow:inset 0 0 0 3px #bdefff;display:grid;place-items:start end;padding:2px 5px;font-size:15px;pointer-events:none}
.precio{position:absolute;top:-9px;right:-6px;z-index:3;min-width:24px;height:24px;border-radius:12px;padding:0 5px;background:linear-gradient(#ffe26a,#ffb81f);color:#fff;font-size:14px;line-height:24px;text-align:center;box-shadow:0 0 0 2px var(--tinta);text-shadow:0 1px 0 var(--tinta),1px 0 0 var(--tinta),-1px 0 0 var(--tinta)}
.precio::before{content:"🪙";font-size:10px;margin-right:1px}
.destello{animation:destello .6s}
@keyframes destello{30%{filter:brightness(2.2);transform:scale(1.12)}}
.sinergias{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;justify-content:center;min-height:30px}
.sin{display:flex;align-items:baseline;gap:2px;background:#0005;border-radius:10px;padding:2px 8px;font-size:15px;box-shadow:inset 0 0 0 2px #ffffff22;cursor:pointer}
.sin b{font:400 16px var(--t)}.sin small{font-size:11px;opacity:.7}
.sin.on{background:var(--c);box-shadow:0 0 0 2px var(--tinta),0 0 10px var(--c)}
.sinergias .nota{margin:4px 0;color:#fff;opacity:.85}
.fusiones{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.fusiones .b{width:100%}
.items{display:flex;gap:6px;margin-top:14px}
.item{flex:1;min-height:52px;border-radius:14px;background:linear-gradient(#55449a,#3b2c7a);box-shadow:0 0 0 3px var(--tinta),inset 0 2px 0 #fff3,0 4px 0 var(--tinta);display:flex;align-items:center;gap:6px;padding:5px 8px;cursor:grab;position:relative;touch-action:none}
.item.sel{box-shadow:0 0 0 3px var(--tinta),0 0 0 6px var(--oro)}
.i-emo{font-size:26px}.i-txt{display:flex;flex-direction:column;line-height:1.1}.i-txt b{font:400 13px var(--t)}.i-txt small{font-size:10.5px;opacity:.85}
/* ficha de información */
.ficha{margin:0 8px;min-height:70px;background:#1a0f2ecc;border-radius:16px;padding:8px 10px;box-shadow:inset 0 0 0 2px #ffffff18;font-size:13px}
.f-ayuda{color:#e6dcff;font-weight:700}
.f-tal{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:18px}.f-tal small{font-size:11px;opacity:.7;margin-left:4px}
.f-fila{display:flex;align-items:center;gap:8px}
.f-img{width:48px;height:56px;object-fit:contain;object-position:bottom}
.f-emo{font-size:34px}
.f-txt{flex:1;line-height:1.25}.f-txt b{font:400 16px var(--t)}
.f-fam{display:inline-block;background:var(--c);border-radius:8px;padding:0 6px;font-size:11px;box-shadow:0 0 0 1.5px var(--tinta)}
.f-evo{color:var(--oro);margin-left:4px}.f-rec{color:#ffb0ff}.f-pista{opacity:.7;max-width:80px;text-align:center}
/* mando inferior */
.mando{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);display:flex;gap:8px;align-items:center;padding:10px 10px calc(10px + env(safe-area-inset-bottom));z-index:25;background:linear-gradient(180deg,#0000,#0d0820 40%)}
.mando .xl{margin:0;flex:1;animation:respira 1.6s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.03)}}
.zona-venta{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(520px,100%);height:96px;z-index:26;display:grid;place-items:center;background:linear-gradient(180deg,#ff6b7a,#c81f33);color:#fff;font:400 22px var(--t);box-shadow:0 -3px 0 var(--tinta);transition:transform .2s;text-shadow:0 2px 0 var(--tinta)}
body.arr-equipo .zona-venta{transform:translate(-50%,0)}
.zona-venta.encima{filter:brightness(1.25);font-size:26px}
/* arrastre */
.fantasma{position:fixed;left:0;top:0;z-index:100;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 14px 12px #000a)}
.fantasma.item{width:auto!important}
.origen .carta,.item.origen{opacity:.35}
body.arrastrando .slot.valido{box-shadow:inset 0 0 0 3px #45d483aa,inset 0 4px 8px #0006;animation:latido-s 1s infinite}
body.arrastrando .slot.valido.evoluciona{box-shadow:inset 0 0 0 3px var(--oro),0 0 12px var(--oro)}
body.arrastrando .slot.encima{transform:scale(1.1);box-shadow:inset 0 0 0 4px #45d483,0 0 16px #45d483}
@keyframes latido-s{50%{background:#45d48322}}
body.arrastrando{cursor:grabbing}
/* ---------------- combate */
.en-combate{padding-bottom:20px}
.hud.combate{justify-content:space-between}
.lado-j{display:flex;align-items:center;gap:6px;min-width:0;flex:1}.lado-j.der{justify-content:flex-end}
.lado-j b{font:400 15px var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.hud.combate .hud-ronda{flex:none;font-size:12px}
.ctrl-combate{display:flex;justify-content:center;gap:8px;margin:8px}
.ctrl-combate .hud-b{padding:0 14px}
.vs{position:fixed;inset:0;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:radial-gradient(circle,#0000,#0d0820ee 70%);pointer-events:none;transition:opacity .4s}
.vs.fuera{opacity:0}
.vs-l,.vs-r{display:flex;flex-direction:column;align-items:center;gap:8px;animation:vs-l .45s cubic-bezier(.2,1.4,.4,1) both}
.vs-r{animation-name:vs-r}
.vs-l b,.vs-r b{font:400 20px var(--t);text-shadow:0 2px 0 var(--tinta);background:var(--col);padding:2px 12px;border-radius:10px;box-shadow:0 0 0 3px var(--tinta)}
.vs-x{font:400 64px var(--t);color:var(--oro);text-shadow:0 4px 0 var(--tinta),3px 0 0 var(--tinta),-3px 0 0 var(--tinta),0 -3px 0 var(--tinta);animation:banner .5s .2s cubic-bezier(.2,1.6,.4,1) both}
@keyframes vs-l{from{transform:translateX(-120%)}}@keyframes vs-r{from{transform:translateX(120%)}}
.resultado{margin:12px;padding:14px;text-align:center;border-radius:20px;background:linear-gradient(180deg,#3d2c86,#2b1f63);box-shadow:var(--borde),0 8px 0 var(--tinta);animation:aparece .3s}
.r-tit{font-size:40px;color:#fff}
.resultado.gana .r-tit{color:#7bf0a6}.resultado.pierde .r-tit{color:#ff8291}
.r-info{margin:2px 0}.r-xp{display:inline-block;margin:8px 0 2px;background:#1a0f2e;border-radius:12px;padding:4px 12px;color:#8fe8ff;font:400 18px var(--t)}
.r-xp b{color:var(--oro)}
.resultado .mini{margin:6px auto 0}
.sin3d{display:grid;place-items:center;height:100%;text-align:center}
/* ---------------- fin, bestiario, ranking */
.fin{text-align:center}
.fin-tit{font-size:36px;margin:20px 0 6px}.fin-tit.gana{color:var(--oro);font-size:46px}
.fin-trofeos span{font-size:50px}.fin-trofeos b{display:block;font:400 60px/1 var(--t);color:var(--oro);text-shadow:0 4px 0 var(--tinta)}
.historial{display:flex;justify-content:center;gap:4px;margin:12px 0}.historial i{width:22px;height:22px;border-radius:6px;box-shadow:0 0 0 2px var(--tinta)}
.h-A{background:var(--verde)}.h-B{background:var(--rojo)}.h-empate{background:#aaa}
.fam-tit{display:flex;align-items:baseline;gap:8px;font:400 18px var(--t);margin:16px 4px 8px;padding:4px 10px;border-radius:12px;background:linear-gradient(90deg,var(--c),#0000);text-shadow:0 2px 0 var(--tinta)}
.fam-tit small{font:700 11px var(--f);opacity:.9}
.slots.best{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 12px;padding:0 6px}
.slots.best .slot{touch-action:auto}
.slot.bloq .c-img{filter:brightness(0) opacity(.6)}.slot.bloq .gema{filter:grayscale(1)}
.rk{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:6px;padding:8px;border-radius:12px;margin:4px 0;background:#1a0f2e88}
.rk small{grid-column:2/4;font-size:11px;opacity:.7;margin-top:-6px}
.rk-n{font:400 18px var(--t);text-align:center}.rk b{font:400 16px var(--t)}.rk-v{font:400 16px var(--t);color:var(--oro)}
.rk.top0{background:linear-gradient(90deg,#ffcf3f55,#1a0f2e88)}.rk.top1{background:linear-gradient(90deg,#d9e2ee44,#1a0f2e88)}.rk.top2{background:linear-gradient(90deg,#c98a4a44,#1a0f2e88)}
#toast{position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%) translateY(-10px);background:linear-gradient(#ffe26a,#ffb81f);color:var(--tinta);padding:10px 16px;border-radius:14px;font:400 16px var(--t);opacity:0;transition:.25s;z-index:200;pointer-events:none;max-width:92%;text-align:center;box-shadow:0 0 0 3px var(--tinta),0 6px 0 var(--tinta)}
#toast.ver{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- combate 3D (capas sobre el lienzo) */
.arena3d{position:relative;height:min(42vh,400px);margin:10px 8px 0;border-radius:20px;overflow:hidden;background:#1d1433;box-shadow:var(--borde),0 8px 0 var(--tinta)}
.capa3d{position:absolute;inset:0;pointer-events:none}
.vida3d{position:absolute;transform:translate(-50%,-100%);width:62px;text-align:center}
.vida3d i{display:block;height:7px;border-radius:4px;box-shadow:0 0 0 2px var(--tinta);background-image:linear-gradient(#fff6,transparent)!important}
.vida3d b{display:inline-block;margin-top:3px;font:400 11px var(--t);background:#1a0f2ecc;border-radius:6px;padding:0 4px;white-space:nowrap}
.pop3d{position:absolute;transform:translate(-50%,-50%);font:400 26px var(--t);color:#fff;text-shadow:0 2px 0 var(--tinta),2px 0 0 var(--tinta),-2px 0 0 var(--tinta),0 -2px 0 var(--tinta);animation:sube .9s forwards;white-space:nowrap}
.pop3d.grande{font-size:36px;color:var(--oro)}
@keyframes sube{from{transform:translate(-50%,-50%);opacity:1}to{transform:translate(-50%,-150%);opacity:0}}
.banner3d{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);font:400 48px var(--t);color:var(--oro);letter-spacing:1px;white-space:nowrap;animation:banner .5s cubic-bezier(.2,1.6,.4,1) both;
  text-shadow:0 4px 0 var(--tinta),3px 0 0 var(--tinta),-3px 0 0 var(--tinta),0 -3px 0 var(--tinta),0 0 24px #000}
.banner3d.gana{color:#7bf0a6}.banner3d.pierde{color:#ff8291}
.banner3d.tormenta{color:#cfe0ff;font-size:36px;text-align:center}
.banner3d small{display:block;font:800 13px var(--f);color:#fff;letter-spacing:0;text-shadow:0 1px 3px #000}
@keyframes banner{from{transform:translate(-50%,-50%) scale(2.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.m-tit{animation-name:banner-m}@keyframes banner-m{from{transform:scale(2.4);opacity:0}}
.rayo3d{position:absolute;inset:0;background:#e8f0ff;opacity:0;animation:rayo .35s ease-out;pointer-events:none}
@keyframes rayo{10%{opacity:.75}30%{opacity:.1}45%{opacity:.5}100%{opacity:0}}

a.b{text-decoration:none}
.nuevo-modo small{position:absolute;top:-10px;right:10px;background:#fff;color:#ea3446;border-radius:8px;padding:2px 6px;box-shadow:0 0 0 2px var(--tinta);font-size:11px;text-shadow:none}