/* ===== Aniimo Lab · estilos ===== */
@font-face{font-family:'Inter';src:url('/arte/fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/arte/fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/arte/fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Fredoka';src:url('/arte/fonts/fredoka-var.woff2') format('woff2');font-weight:300 700;font-display:swap}
@font-face{font-family:'Baloo 2';src:url('/arte/fonts/baloo2-var.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  /* ---- chicle kawaii: pastel de base, neon de acento ---- */
  --bg:#fff2fb; --bg2:#ffeaf7;
  --panel:rgba(255,255,255,.86); --panel2:#fff7fd; --card:rgba(255,255,255,.92);
  --line:#ffd6ef; --line2:#f3dcff;
  --tx:#4a2a5c; --tx2:#8a6f9e; --tx3:#b39ec4;
  --acc:#ff4fd8; --acc2:#ffd23d; --ok:#2fd18f; --bad:#ff5f7e;
  --r:22px; --sh:0 14px 30px -12px rgba(255,79,216,.35), 0 4px 14px -6px rgba(120,80,200,.18);
  --neon-pink:#ff4fd8; --neon-cyan:#25dfff; --neon-lime:#a8ff3e; --neon-violet:#a86bff;
  --neon-yellow:#ffd23d; --neon-orange:#ff9a3d;
  --mint:#b8f5e0; --peach:#ffd9c9; --lav:#e5d4ff; --sky:#d6ecff; --lemon:#fff3c4; --bubble:#ffd9f2;
  --fire:#ff7a59; --water:#4fb8ff; --grass:#7ee08a; --lightning:#ffd23d; --ice:#7fe3ff;
  --earth:#e0b98a; --wind:#9ff0c8; --light:#fff3a8; --dark:#b98aff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,-apple-system,'Segoe UI',system-ui,sans-serif;background:
    radial-gradient(1200px 600px at 85% -10%, #1d2a45 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, #241d3a 0%, transparent 55%), var(--bg);
  color:var(--tx); font-size:14px; overflow:hidden;
}
button,input,select{font-family:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#2a3651;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#3a4a6d}
::-webkit-scrollbar-track{background:transparent}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:216px 1fr;height:100vh}
.side{background:linear-gradient(180deg,#0e1422,#0b101c);border-right:1px solid var(--line);
  padding:18px 12px;display:flex;flex-direction:column;gap:6px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:38px;height:38px;border-radius:11px;background:conic-gradient(from 210deg,#5aa9f0,#9b7fd6,#e8706e,#e0c33f,#5aa9f0);
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(90,169,240,.35)}
.brand .logo span{font-size:19px}
.brand b{font-size:15px;letter-spacing:.3px;display:block;line-height:1.1}
.brand small{color:var(--tx3);font-size:11px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.nav button{display:flex;align-items:center;gap:10px;background:transparent;border:0;padding:10px 11px;border-radius:10px;
  cursor:pointer;color:var(--tx2);font-size:13.5px;text-align:left;transition:background .14s,color .14s,transform .14s}
.nav button:hover{background:#19233a;color:var(--tx)}
.nav button.on{background:linear-gradient(90deg,rgba(90,169,240,.22),rgba(90,169,240,.06));color:#fff;
  box-shadow:inset 0 0 0 1px rgba(90,169,240,.35)}
.nav button i{font-style:normal;font-size:16px;width:20px;text-align:center}

/* ---------- buscador global ---------- */
.buscar-global{position:relative;margin:2px 0 8px}
.buscar-global input{width:100%;background:#111a2b;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12.5px}
.buscar-global input:focus{outline:none;border-color:#3a5b8c;box-shadow:0 0 0 3px rgba(90,169,240,.14)}
.bg-lista{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120;background:#0f1829;border:1px solid #26324a;border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);overflow:hidden;max-height:330px;overflow-y:auto}
.bg-item{display:flex;gap:8px;align-items:center;padding:7px 9px;cursor:pointer;border-bottom:1px solid #182337}
.bg-item:last-child{border-bottom:0}
.bg-item:hover,.bg-item.sel{background:#182337}
.bg-item img{width:30px;height:30px;border-radius:7px;object-fit:cover;background:#0d1421}
.bg-item b{font-size:12.5px}
.bg-item .hint{font-size:10.5px}
.side .pie{margin-top:auto;font-size:11px;color:var(--tx3);padding:8px;line-height:1.5}
.side .pie b{color:var(--tx2);font-weight:500}

main{overflow:hidden;display:flex;flex-direction:column;height:100vh}
.topbar{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);
  background:rgba(11,14,22,.72);backdrop-filter:blur(8px)}
.topbar h1{font-size:16px;margin:0;font-weight:600;letter-spacing:.2px}
.topbar .sub{color:var(--tx3);font-size:12px}
.topbar .spacer{flex:1}
.vista{flex:1;overflow:auto;padding:18px 20px 26px}

/* ---------- controles ---------- */
input[type=text],input[type=search],select{background:#0e1524;border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;font-size:13px}
input[type=text]:focus,input[type=search]:focus,select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(90,169,240,.14)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;border:1px solid var(--line);
  background:#111a2c;cursor:pointer;font-size:12.5px;color:var(--tx2);transition:.14s}
.chip:hover{border-color:#39507a;color:var(--tx)}
.chip.on{background:color-mix(in srgb,var(--c,#5aa9f0) 26%,#101828);border-color:var(--c,#5aa9f0);color:#fff}
.chip img{width:15px;height:15px;object-fit:contain}
.btn{display:inline-flex;align-items:center;gap:8px;background:#1c2740;border:1px solid var(--line);color:var(--tx);
  padding:9px 13px;border-radius:10px;cursor:pointer;font-size:13px;transition:.14s}
.btn:hover{background:#243352;transform:translateY(-1px)}
.btn.prim{background:linear-gradient(135deg,#2f6bb0,#5aa9f0);border-color:#5aa9f0;color:#06121f;font-weight:600}
.btn.prim:hover{filter:brightness(1.07)}
.btn.mini{padding:6px 9px;font-size:12px}
.btn.on{background:linear-gradient(135deg,#2f6bb0,#5aa9f0);color:#06121f;border-color:#5aa9f0;font-weight:600}
.card{background:linear-gradient(180deg,var(--panel),#111828);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--tx2)}
.grid{display:grid;gap:12px}
.hint{color:var(--tx3);font-size:11.5px;line-height:1.5}
.pillnum{display:inline-block;min-width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- rejilla del aniidex ---------- */
.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.ficha__tw{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:rgba(9,13,22,.82);color:var(--tx2);font-size:14px;cursor:pointer;opacity:0;transition:opacity .16s,transform .16s,color .16s,background .16s;backdrop-filter:blur(4px)}
.ficha:hover .ficha__tw{opacity:1}
.ficha__tw:hover{color:#0b1220;background:var(--c);transform:scale(1.08)}
.ficha{background:linear-gradient(180deg,#151d30,#101627);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;cursor:pointer;position:relative;transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,border-color .16s}
.ficha:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c,#5aa9f0) 60%,#243049);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.ficha .thumb{height:auto;aspect-ratio:1/1;display:grid;place-items:center;position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 12%, color-mix(in srgb,var(--c,#5aa9f0) 30%,transparent), transparent 70%)}
/* la imagen NO puede empujar la altura: caja fija cuadrada + contain (todo el dex al mismo tamano) */
.ficha .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.55));transition:transform .18s,filter .18s}
.ficha:hover .thumb img{transform:scale(1.06)}
.ficha .meta{padding:8px 10px 10px;border-top:1px solid #1c2437}
.ficha .n{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.ficha .n b{font-size:13.5px}
.ficha .n span{font-size:11px;color:var(--tx3)}
.ficha .tagline{display:flex;align-items:center;gap:5px;margin-top:5px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:2.5px 7px;border-radius:999px;
  background:#1a2438;border:1px solid #26324a;color:var(--tx2)}
.tag img{width:12px;height:12px}
.tag.rol{color:#0b1220;font-weight:700;background:var(--rc,#5aa9f0);border-color:transparent}

/* ---------- ficha detalle ---------- */
.detalle{display:grid;grid-template-columns:minmax(320px,42%) 1fr;gap:18px;align-items:start}
.viewer{position:relative;height:min(58vh,520px);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(90% 70% at 50% 8%,color-mix(in srgb,var(--c,#5aa9f0) 34%,#0d1424), #0a0f1a 70%)}
.viewer canvas{display:block;width:100%;height:100%}
.viewer .vctl{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:3}
.viewer .vfx{position:absolute;right:10px;top:10px;display:flex;gap:6px;z-index:3}
.viewer .cargando{position:absolute;inset:0;display:grid;place-items:center;color:var(--tx3);font-size:12.5px;
  background:rgba(8,12,20,.55);z-index:4}
.viewer .cargando.hide{display:none}
.art2d{position:absolute;inset:0;display:none;place-items:center;z-index:2}
.art2d img{max-height:88%;max-width:90%;filter:drop-shadow(0 22px 30px rgba(0,0,0,.6));animation:flota 5s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
.stats .fila{display:grid;grid-template-columns:58px 1fr 68px;gap:11px;align-items:center;margin:8px 0}
.stats .k{font-size:11.5px;color:var(--tx3);letter-spacing:.04em}
.stats .barra{height:11px;border-radius:7px;background:#162034;overflow:hidden;position:relative}
.stats .barra i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--c,#5aa9f0) 65%,#ffffff22),var(--c,#5aa9f0));
  transition:width .4s cubic-bezier(.2,.8,.2,1)}
.stats .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.tabla{width:100%;border-collapse:collapse;font-size:12.5px}
.tabla th{text-align:left;color:var(--tx3);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--line)}
.tabla td{padding:7px 8px;border-bottom:1px solid #1a2233;vertical-align:top}
.tabla tr:hover td{background:#151d2f}
.rasgo{margin-bottom:7px}
.rasgo b{font-size:12.5px}
.rasgo p{margin:2px 0 0;color:var(--tx2);font-size:12px;line-height:1.45}
.kv{display:grid;grid-template-columns:88px 1fr;gap:6px 10px;font-size:12.5px}
.kv i{font-style:normal;color:var(--tx3)}
.radar{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}

/* ---------- taller / laboratorio ---------- */
.talleres{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.slot{display:flex;align-items:center;gap:9px;background:#121a2b;border:1px solid var(--line);border-radius:11px;padding:8px 10px}
.slot img{width:34px;height:34px;object-fit:contain}
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:640px}
.tiposMatriz{border-collapse:separate;border-spacing:3px;font-size:11.5px}
.tiposMatriz th{font-size:10.5px;color:var(--tx3);font-weight:500}
.tiposMatriz td{width:60px;height:34px;text-align:center;border-radius:8px;font-variant-numeric:tabular-nums;font-weight:600}
.c1{background:rgba(111,196,143,.20);color:#9fe0b8}
.c0{background:#19223a;color:#8294b3}
.c2{background:rgba(232,112,110,.22);color:#f0a09e}
.c3{background:rgba(224,195,63,.22);color:#f0dd8f}
.dano{font-variant-numeric:tabular-nums;font-weight:700}
.bueno{color:#8fe0ac}.malo{color:#f09a98}.medio{color:#f0dd8f}
.flexlinea{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
input[type=range]{-webkit-appearance:none;height:22px;background:transparent;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:#22304a}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,#7fc0ff,#5aa9f0);margin-top:-5px;box-shadow:0 2px 8px rgba(90,169,240,.6);cursor:pointer}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);background:#131c2e;border:1px solid var(--line);border-radius:8px;padding:4px 8px}
.aviso{font-size:11.5px;color:var(--tx3);border-left:2px solid #2c3a58;padding-left:10px;line-height:1.5}
.hide{display:none !important}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.statmini{background:#121a2b;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.statmini b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.statmini span{font-size:11px;color:var(--tx3)}
.delta{font-size:11px;font-weight:600}
.delta.up{color:#8fe0ac}.delta.dn{color:#f09a98}

/* ---------- Modo Twining (inmersivo) ---------- */
.inm{position:fixed;inset:0;z-index:900;display:grid;grid-template-columns:1fr minmax(360px,30vw);grid-template-rows:auto 1fr;grid-template-areas:'barra barra' 'visor hud';
  background:#05080f;opacity:0;transform:scale(.99);transition:opacity .18s ease,transform .22s cubic-bezier(.2,.8,.2,1)}
.inm--dentro{opacity:1;transform:none}
.inm__fondo{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 50% at 30% 30%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),
  radial-gradient(50% 50% at 80% 70%,color-mix(in srgb,var(--c2,var(--c)) 18%,transparent),transparent 70%),
  linear-gradient(180deg,#060a13,#04070d)}
.inm__barra{position:relative;z-index:2;grid-area:barra;display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid #162035;background:color-mix(in srgb,#0a1120 80%,transparent);backdrop-filter:blur(6px)}
.inm__titulo{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.inm__titulo h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.4px}
.inm__no{font-family:var(--mono,monospace);font-size:12px;color:var(--tx3);background:#0d1524;border:1px solid var(--line);border-radius:8px;padding:3px 7px}
.inm__tags{display:flex;gap:6px;flex-wrap:wrap}
.inm__total{text-align:right;line-height:1.1}
.inm__total b{font-size:22px;color:var(--c)}
.inm__total span{display:block;font-size:10.5px;color:var(--tx3)}
.inm__visor{position:relative;z-index:1;grid-area:visor;position:relative;display:flex;flex-direction:column;min-height:0}
.iv--tw{flex:1;min-height:0}
.iv__vid{position:absolute;inset:4% 6%;width:88%;height:92%;object-fit:contain;z-index:3;display:block}
.iv__vid[hidden]{display:none !important}
.iv__img{transition:opacity .2s ease}
.inm__visorpie{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid #162035;flex-wrap:wrap}
.inm__vsel{display:flex;gap:5px;flex-wrap:wrap}
.vsel{background:#0d1524;border:1px solid var(--line);color:var(--tx2);border-radius:9px;padding:3px 8px;font-size:11.5px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.vsel:hover{border-color:var(--c)}
.vsel.on{background:color-mix(in srgb,var(--c) 20%,#0d1524);border-color:var(--c);color:var(--tx)}
.inm__hud{position:relative;z-index:1;grid-area:hud;overflow-y:auto;overflow-x:hidden;min-width:0;padding-right:16px;padding:12px 14px 18px;display:flex;flex-direction:column;gap:10px;border-left:1px solid #162035;background:color-mix(in srgb,#080d18 88%,transparent)}
.inm__pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.inm__pasos>li{background:#0b1220;border:1px solid var(--line);border-radius:14px;padding:9px 11px}
.inm__pasos h4{margin:0 0 7px;font-size:13px;display:flex;align-items:center;gap:7px}
.inm__pasos h4 b{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:color-mix(in srgb,var(--c) 26%,#0d1524);color:var(--tx);font-size:11px}
.inm__statscaja{background:#0b1220;border:1px solid var(--line);border-radius:14px;padding:9px 11px}
.inm__statscaja h4{margin:0 0 6px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.inm__statscaja h4 .hint{min-width:0;white-space:normal}
.inm__statscaja .fila .v .hint{margin-left:6px}
.inm__botones{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.inm__atajos{text-align:center}
.potfila.mini{display:grid;grid-template-columns:30px 26px minmax(0,1fr) 26px 26px;gap:4px;align-items:center;margin:4px 0;width:100%}
.potfila.mini input[type=range]{min-width:0;width:100%}
.potfila.mini .btn.mini{padding:0 4px;font-size:12px;line-height:18px;height:20px;min-width:0}
.potfila.mini .pillnum{text-align:right;font-size:11.5px;min-width:0;overflow:hidden}
.potfila.mini .potfila__k{font-size:11px;color:var(--tx3)}
.potfila.mini .btn.mini{padding:1px 5px;min-width:0;line-height:1.5}
.aviso.mini{font-size:11px;padding:6px 8px}
.inm .hint,.inm .aviso{overflow-wrap:anywhere;word-break:break-word}
.inm__total{flex-shrink:0}

/* ---------- Mapa interactivo ---------- */
.mapa{display:flex;flex-direction:column;gap:12px;height:calc(100vh - 104px);min-height:540px}
.mapa__barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.buscador{background:#111a2b;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;min-width:280px}
.buscador:focus{outline:none;border-color:#3a5b8c;box-shadow:0 0 0 3px rgba(90,169,240,.15)}
.chips-elem{display:flex;gap:4px;flex-wrap:wrap;max-width:52%}
.chip-e{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:3px 8px;border-radius:999px;cursor:pointer;
  background:#141d2f;border:1px solid var(--line);color:var(--tx2);transition:background .15s,color .15s,transform .15s}
.chip-e img{width:12px;height:12px}
.chip-e:hover{transform:translateY(-1px);color:var(--tx)}
.chip-e.on{background:linear-gradient(90deg,rgba(90,169,240,.3),rgba(90,169,240,.12));color:#fff;border-color:rgba(90,169,240,.5)}
.mapa__cuerpo{display:grid;grid-template-columns:1fr 355px;gap:14px;flex:1;min-height:0}
.mapa__lienzo{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#08111f}
.mapa__fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:saturate(.8) brightness(.82) blur(1px)}
.mapa__velo{position:absolute;inset:0;background:radial-gradient(100% 90% at 45% 45%, rgba(8,14,26,.35), rgba(5,9,16,.88))}
.mapa__lienzo .mapa__grid{position:relative;height:100%;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;padding:12px;align-content:start}
.zona{text-align:left;background:rgba(16,23,38,.9);border:1px solid color-mix(in srgb,var(--zc) 38%,#26324a);
  border-left:3px solid var(--zc);border-radius:12px;padding:7px 9px;cursor:pointer;backdrop-filter:blur(4px);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,opacity .18s;display:block}
.zona:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.5),0 0 0 1px var(--zc);z-index:5}
.zona--foco{box-shadow:0 0 0 2px var(--zc),0 10px 22px rgba(0,0,0,.5)}
.zona--apagada{opacity:.3}
.zona__cab{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.zona__et{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.zona__lv{font-size:9.5px;color:var(--zc);font-weight:700;white-space:nowrap}
.zona__n{font-size:12.5px;font-weight:650;line-height:1.22;margin-top:2px}
.zona__en{font-size:9.5px;color:var(--tx3);margin-top:1px}
.zona__pies{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.zona__thumbs{display:flex;gap:3px;align-items:center}
.zona__thumbs img{width:24px;height:24px;border-radius:6px;object-fit:cover;background:#131c2e;border:1px solid #1e2a41}
.zona__thumbs .mas{font-size:9.5px;color:var(--tx3)}
.zona__icos{font-size:11px;display:flex;gap:4px}
.mapa__panel{overflow:auto;background:#0e1624;border:1px solid var(--line);border-radius:16px;padding:14px}
.mapa__panel .mapa__grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mapa__panel .mapa__grid .mini-cri{background:rgba(19,28,46,.75)}
.mini-cri{display:flex;gap:7px;align-items:center;background:#131c2e;border:1px solid #1e2a41;border-radius:10px;padding:5px 7px;cursor:pointer;
  transition:transform .16s,border-color .16s}
.mini-cri:hover{transform:translateY(-2px);border-color:var(--c)}
.mini-cri img{width:30px;height:30px;border-radius:7px;object-fit:cover;background:#0d1421}
.mini-cri b{font-size:11.5px}
.linea-mini{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;background:#131c2e;border:1px solid #1e2a41;
  border-radius:10px;padding:6px 8px;margin-bottom:6px;font-size:11.5px}
.linea-mini .hint{grid-column:1/-1}
.pillx{font-size:9.5px;padding:2px 6px;border-radius:999px;background:#1c2740;color:#9fb6d8;white-space:nowrap}
.pillx.oro{background:#3a2f12;color:#ffd479}
.atlas__barra{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center}

/* ---------- visor de imagen 4K ---------- */
.viewer--img{position:relative;height:min(560px,72vh);overflow:hidden;border:1px solid var(--line);border-radius:16px;
  background:radial-gradient(75% 62% at 50% 44%, color-mix(in srgb, var(--c) 20%, transparent), transparent 72%), linear-gradient(180deg,#0e1726,#0a111d);}
.iv{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.iv--agarre{cursor:grabbing}
.iv__halo{position:absolute;width:58%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;opacity:.45;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 48%, transparent), transparent 66%);filter:blur(30px)}
/* caja absoluta: la imagen SIEMPRE cabe entera (el % de altura no se resuelve en grid) */
.iv__img{position:absolute;left:6%;top:4%;width:88%;height:92%;object-fit:contain;object-position:center;opacity:0;transform:scale(.985);
  transition:opacity .5s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));
  user-select:none;-webkit-user-drag:none;will-change:transform}
.iv--lista .iv__img{opacity:1}
.iv__pie{position:absolute;left:12px;bottom:10px;font-size:10.5px;color:var(--tx3);background:rgba(8,12,20,.6);
  padding:3px 9px;border-radius:9px;border:1px solid var(--line);pointer-events:none}
.inm__visor .iv__halo{width:46%}
.inm__visor .iv__img{left:8%;top:5%;width:84%;height:90%}
.viewer--img .vfx{top:10px;right:10px}

/* ---------- tipo de habilidad ---------- */
.tipo{font-size:10.5px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.t-fis{background:rgba(226,86,79,.14);border-color:rgba(226,86,79,.45);color:#ffb3ae}
.t-mag{background:rgba(90,169,240,.14);border-color:rgba(90,169,240,.45);color:#a9d4ff}
.dano.aplica{background:rgba(111,196,143,.14);border-radius:6px}
.dano.noaplica{opacity:.4}

/* ---------- iconos de habilidad ---------- */
.hab{display:flex;align-items:center;gap:8px}
.hab__ico{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.05);border:1px solid var(--line);object-fit:contain;flex:none}

/* ---------- bloques nuevos de la ficha (formas, video, evolucion, equipo) ---------- */
.tipo.t-sup{background:color-mix(in srgb,#6fc48f 18%,transparent);border-color:#6fc48f55;color:#a9e3c0}
.formas{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.forma{background:linear-gradient(180deg,#0e1726,#0b1220);border:1px solid var(--line);border-radius:14px;padding:9px;display:flex;flex-direction:column;gap:6px}
.forma--base{border-color:color-mix(in srgb,var(--fc) 45%,var(--line))}
.forma__art{height:140px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--fc) 20%,transparent),transparent 70%);border-radius:10px}
.forma__art img{height:132px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.forma__txt b{font-size:13px}
.forma__txt p{font-size:11.5px;line-height:1.45}
.tag.tiponuevo{background:color-mix(in srgb,#e8892f 22%,transparent);border-color:#e8892f66;color:#f3b57c;font-size:10px}
.tag.hb{cursor:pointer;transition:transform .15s,border-color .15s}
.tag.hb:hover{transform:translateY(-1px);border-color:var(--c)}
.vwrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--fc) 22%,transparent),#0a111d 75%)}
.voficial{display:block;width:100%;height:auto;min-height:260px;max-height:62vh;object-fit:contain;background:radial-gradient(70% 60% at 50% 40%,color-mix(in srgb,var(--fc) 16%,transparent),transparent 75%);border-radius:12px}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);backdrop-filter:blur(3px)}
.paso{border-left:2px solid color-mix(in srgb,#5aa9f0 40%,var(--line));padding:2px 0 6px 10px;margin:6px 0}
.paso b{font-size:12px;color:var(--tx)}
.equipo{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pieza{display:flex;gap:9px;align-items:center;background:#0d1524;border:1px solid var(--line);border-radius:12px;padding:8px}
.pieza img{width:40px;height:40px;object-fit:contain;border-radius:9px;background:#162034}
.pieza b{font-size:12.5px}
.evo--oculto{opacity:.55;border-style:dashed}

/* ---------- objetos ---------- */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px}
.icard{display:flex;gap:10px;align-items:flex-start;background:linear-gradient(180deg,#0e1726,#0b1220);border:1px solid var(--line);border-left:3px solid var(--rc,#5aa9f0);border-radius:12px;padding:9px}
.icard img{width:46px;height:46px;object-fit:contain;border-radius:10px;background:#162034;flex-shrink:0}
.icard__tx b{font-size:12.5px;line-height:1.25}
.icard__tx p{font-size:11.5px;line-height:1.4;color:var(--tx3);margin:3px 0 0}

/* ---------- enciclopedia ---------- */
.enc{display:grid;grid-template-columns:264px 1fr;gap:14px;align-items:start}
.enc__nav{position:sticky;top:8px}
.enc__lista{display:flex;flex-direction:column;gap:4px;max-height:70vh;overflow:auto}
.enc__btn{text-align:left;padding:7px 9px;border-radius:9px;border:1px solid transparent;background:#0d1524;color:var(--tx2);cursor:pointer;font-size:12.5px;transition:background .15s,color .15s,border-color .15s}
.enc__btn:hover{background:#14203a;color:var(--tx)}
.enc__btn.on{background:color-mix(in srgb,#5aa9f0 18%,#0d1524);border-color:#5aa9f055;color:var(--tx)}
.enc__txt{font-size:13px;line-height:1.62;color:var(--tx2);max-width:78ch}
.enc__txt p{margin:9px 0}
.enc__h1{font-size:21px;color:var(--tx);margin:4px 0 10px}
.enc__h2{font-size:15.5px;color:var(--tx);margin:20px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.enc__h3{font-size:13.5px;color:var(--tx);margin:14px 0 4px}
.enc__ul{margin:6px 0 6px 4px;padding-left:18px}
.enc__ul li{margin:4px 0}

/* ---------- ejes de personalidad ---------- */
.eje{display:grid;grid-template-columns:44px 1fr 74px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed #1b2740}
.eje:last-child{border-bottom:0}
.eje__par{font-weight:700;font-size:12px;color:var(--ec,#5aa9f0);background:color-mix(in srgb,var(--ec,#5aa9f0) 14%,transparent);border-radius:8px;text-align:center;padding:3px 0}
.eje__opts{display:flex;gap:6px;flex-wrap:wrap}
.eje__p{background:#0d1524;border:1px solid var(--line);color:var(--tx2);border-radius:10px;padding:5px 8px;font-size:11.5px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.eje__p b{color:var(--tx);margin-right:3px}
.eje__p i{color:var(--tx3);font-style:normal;font-size:10.5px;margin-left:3px}
.eje__p em{color:#e8c46a;font-style:normal;font-size:10.5px;margin-left:5px}
.eje__p:hover{border-color:#2e4a75}
.eje__p.on{background:color-mix(in srgb,#6fc48f 16%,#0d1524);border-color:#6fc48f88;color:var(--tx)}
.eje__v{background:#0d1524;border:1px solid var(--line);color:var(--tx);border-radius:9px;padding:4px 6px;font-size:11.5px}

/* ---------- catálogo de objetos ---------- */
.objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;margin-top:12px}
.obj{display:grid;grid-template-columns:52px 1fr;gap:10px;background:var(--card,#0e1626);border:1px solid var(--line);border-left:3px solid var(--rc,#8c96a5);border-radius:12px;padding:10px}
.obj img{width:52px;height:52px;object-fit:contain;image-rendering:auto}
.obj__sin{width:52px;height:52px;border-radius:10px;background:#0b1320;border:1px dashed #243450}
.obj__tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.obj__tx b{font-size:13px;color:var(--tx)}
.obj__rar{font-size:10.5px;color:var(--rc,#8c96a5);text-transform:uppercase;letter-spacing:.4px}
.obj__tx i{font-style:normal;font-size:11.5px;color:var(--tx3);line-height:1.35}
.obj__tx em{font-style:normal;font-size:10.5px;color:#5d6b83}

/* ---------- chip de tier (valoracion de la comunidad) ---------- */
.tag.tier{background:color-mix(in srgb, var(--tc) 18%, transparent);border:1px solid color-mix(in srgb, var(--tc) 45%, transparent);color:var(--tc);font-weight:700;letter-spacing:.2px}
.tag.tier b{color:var(--tc);font-weight:900}
.tag.tier.mini{font-size:10px;padding:0 5px;margin-left:2px}

/* ---------- combate: tarjetas VS, desglose, simulacion ---------- */
.vs{display:grid;grid-template-columns:1fr 150px 1fr;gap:14px;align-items:start}
.vs__lado{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#0e1726),#0b1220);border:1px solid color-mix(in srgb,var(--c) 30%,var(--line));border-radius:16px;padding:12px}
.vs__lado h3{margin:0 0 8px;font-size:14px}
.vs__cab{display:flex;gap:10px;align-items:center}
.vs__cab img{width:66px;height:88px;object-fit:contain;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--c) 26%,transparent),transparent 70%);border-radius:12px}
.vs__cab b{font-size:15px}
.vs__els{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.vs__centro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-top:34px}
.vs__x{font-family:var(--font-display,inherit);font-size:30px;font-weight:900;letter-spacing:1px;color:var(--tx3)}
.vs__elem{font-size:12px;text-align:center;color:var(--tx2);line-height:1.5}
.vs__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.vs__stats span{background:#0d1524;border:1px solid var(--line);border-radius:9px;padding:5px 6px;text-align:center}
.vs__stats i{display:block;font-style:normal;font-size:10px;color:var(--tx3)}
.vs__stats b{font-size:13px}
label.sl{display:block;margin-top:10px;font-size:12px;color:var(--tx2)}
label.sl span b{color:var(--tx)}
label.sl input[type=range]{width:100%;margin-top:4px}
label.chk{display:flex;gap:7px;align-items:center;margin-top:9px;font-size:11.5px;color:var(--tx2)}
label.chk input{accent-color:var(--c,#5aa9f0)}
.desglose{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.desglose>div{display:flex;justify-content:space-between;gap:8px;background:#0d1524;padding:7px 10px;font-size:12px}
.desglose>div span{color:var(--tx3)}
.desglose>div.tot{background:#122036}
.desglose>div.tot b{font-size:15px;color:#8fd0a0}
.veredicto{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:13px;border:1px solid var(--line);background:#0e1726}
.veredicto b{font-size:16px}
.veredicto span{font-size:11.5px;color:var(--tx3)}
.veredicto.ganoA{border-color:#6fc48f88;background:color-mix(in srgb,#6fc48f 12%,#0e1726)}
.veredicto.ganoD{border-color:#f07a7a88;background:color-mix(in srgb,#f07a7a 12%,#0e1726)}
table.tabla.sim td,table.tabla.sim th{padding:4px 7px;font-size:11.5px}
tr.ladoA{background:color-mix(in srgb,#6fc48f 7%,transparent)}
tr.ladoD{background:color-mix(in srgb,#f07a7a 7%,transparent)}
tr.sel{outline:1px solid #5aa9f055}
.hpmini{display:inline-block;width:46px;height:6px;border-radius:4px;background:#1b2740;overflow:hidden;vertical-align:middle;margin-right:5px}
.hpmini i{display:block;height:100%;background:var(--c,#5aa9f0);transition:width .25s}
.crit{font-size:10px;color:#e8c46a;border:1px solid #e8c46a55;border-radius:6px;padding:0 4px}
.prob{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.prob__fila{display:grid;grid-template-columns:110px 1fr 58px;gap:8px;align-items:center;font-size:12px}
.prob__barra{height:10px;border-radius:6px;background:#1b2740;overflow:hidden}
.prob__barra i{display:block;height:100%;background:var(--c,#5aa9f0);border-radius:6px;transition:width .4s}

/* ---------- taller de builds: cabecera, potencial con botones ---------- */
.tall__cri{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,#0e1726),#0b1220);border-color:color-mix(in srgb,var(--c) 26%,var(--line))}
.tall__cab{display:flex;gap:12px;align-items:center}
.tall__cab img{width:54px;height:74px;object-fit:contain;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%);border-radius:11px}
.tall__nom{font-size:16px}
.potfila{display:grid;grid-template-columns:42px 24px minmax(0,1fr) 24px 40px;gap:5px;align-items:center;margin:5px 0;width:100%}
.potfila input[type=range]{min-width:0}
.potfila .pillnum{text-align:right;font-size:11.5px;overflow:hidden;padding:0 4px;min-width:0;background:#131c30;border-radius:6px}
.potfila__k{font-size:12px;color:var(--tx3)}
.potfila .btn.mini{padding:0 5px;line-height:18px;height:20px;min-width:0}
.criCab{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;margin-top:10px}
.criCab img{width:52px;height:52px;object-fit:contain;background:#162034;border-radius:10px}
.potfila input[type=range]{width:100%}
.delt70{font-size:10px}
.talleres .delta{font-size:11px;margin-left:4px}
/* inmersivo: nada de textos cortados */
.inm__hud{overflow-wrap:anywhere}
.pctrel{font-style:normal;font-size:10px;color:var(--tx3);margin-left:4px}
.inm__hud .sl{min-width:0}
.inm .potfila.mini{grid-template-columns:44px 24px minmax(0,1fr) 24px 40px}
.inm .stats .fila{grid-template-columns:52px minmax(0,1fr) 116px;gap:8px}
.inm .stats .v{white-space:nowrap;text-align:right}
.inm .stats .fila .v .delta{font-size:10.5px}
/* ---------- mapa interactivo de Idyll (canvas) ---------- */
.mp{display:flex;flex-direction:column;gap:12px}
.mp__barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mp__tabs{display:flex;gap:6px;flex-wrap:wrap}
.mtab{background:#131b28;border:1px solid var(--line);color:var(--tx2);padding:7px 12px;border-radius:9px;cursor:pointer;font:inherit;font-size:13px;transition:background .16s,color .16s,border-color .16s}
.mtab:hover{color:var(--tx)}
.mtab.on{background:linear-gradient(180deg,#26334e,#1a2233);color:#fff;border-color:#3d5178}
.mtab span{opacity:.6;font-size:11px}
.mp__buscar{position:relative;flex:1;min-width:210px}
.mp__buscar input{width:100%;background:#0f1624;border:1px solid var(--line);border-radius:9px;color:var(--tx);padding:8px 12px;font:inherit;font-size:13px}
.mp__buscar input:focus{outline:none;border-color:#3d69a8}
.mp__sug{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;background:#121a29;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh);overflow:hidden}
.mp__sug.hide{display:none}
.mp__sug div{display:flex;justify-content:space-between;gap:10px;padding:8px 11px;cursor:pointer;font-size:13px;align-items:baseline}
.mp__sug div:hover{background:#1a2437}
.mp__nivel{background:#121a29;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;color:var(--tx)}
.mp__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:14px;align-items:start}
@media (max-width:1150px){.mp__cuerpo{grid-template-columns:minmax(0,1fr)}}
.mp__izq{display:flex;flex-direction:column;gap:10px;min-width:0}
.mp__der{display:flex;flex-direction:column;gap:10px}
.mp__lienzo{position:relative;background:#070c14;border:1px solid var(--line);border-radius:16px;overflow:hidden;width:fit-content;margin:0 auto;box-shadow:var(--sh)}
.mp__lienzo canvas{display:block;cursor:grab;touch-action:none;user-select:none}
.mp__lienzo.arrastrando canvas{cursor:grabbing}
.mp__tip{position:absolute;z-index:6;pointer-events:none;background:rgba(8,13,21,.96);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:6px 9px;font-size:12px;max-width:240px;box-shadow:0 8px 20px rgba(0,0,0,.55)}
.mp__ctrls{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:5}
.mp__ctrls .btn{width:32px;height:32px;display:grid;place-items:center;font-size:15px;background:rgba(11,17,27,.9);backdrop-filter:blur(6px)}
.mp__pie{position:absolute;left:10px;bottom:9px;font-size:11px;color:var(--tx2);background:rgba(7,12,20,.82);border:1px solid rgba(255,255,255,.08);padding:3px 9px;border-radius:8px;pointer-events:none}
.mp__zonas{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.mzona{flex:0 0 auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 9px;cursor:pointer;text-align:left;font:inherit;color:var(--tx);transition:border-color .14s,transform .14s}
.mzona:hover{transform:translateY(-2px);border-color:#33507d}
.mzona.on{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc) inset}
.mzona.hit{border-color:#4e9e6c;box-shadow:0 0 0 1px #4e9e6c inset}
.mzona__cab{display:flex;align-items:center;gap:6px;font-size:12.5px;white-space:nowrap}
.mzona__cab i{width:8px;height:8px;border-radius:50%}
.mzona__cab span{color:var(--tx3);font-size:11px}
.mzona__minis{display:flex;gap:3px;margin-top:6px;align-items:center}
.mzona__minis img{width:26px;height:26px;object-fit:contain;background:#0f1624;border-radius:7px;padding:1px}
.mzona__minis span{color:var(--tx3);font-size:11px;padding-left:2px}
.mp__capas{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.mp__capasCab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13px}
.mlayers{display:flex;flex-direction:column;gap:3px}
.mlayer{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:9px;padding:5px 7px;cursor:pointer;font:inherit;font-size:12.5px;color:var(--tx2);text-align:left;transition:background .14s,color .14s,border-color .14s}
.mlayer:hover{background:#18202f;color:var(--tx)}
.mlayer i{width:10px;height:10px;border-radius:50%;opacity:.4;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.mlayer b{font-size: 12.5px;color:var(--tx3);font-weight:600}
.mlayer.on{background:#16203a;border-color:#2c4370;color:#eaf2ff}
.mlayer.on i{opacity:1}
.mlayer.on b{color:#9fc4f5}
.mnombres{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2);margin-top:8px;padding-top:8px;border-top:1px solid var(--line);cursor:pointer}
.mp__panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;max-height:44vh;overflow:auto}
.mp__cuenta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.mp__cuenta span{display:flex;align-items:center;gap:5px;background:#101825;border:1px solid var(--line);border-radius:8px;padding:3px 8px;font-size:11.5px;color:var(--tx2)}
.mp__cuenta i{width:8px;height:8px;border-radius:50%}
.mp__cuenta b{color:var(--tx)}
.mp__clima{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}
.chip-punto{width:11px;height:11px;border-radius:50%;display:block;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.mp__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.zona__cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.zona__cab h3{margin:0;font-size:17px}
.zona__desc{margin:6px 0;font-size:13px;line-height:1.55;color:var(--tx2)}
.zona__rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:8px}
.zcri{background:#131a25;border:1px solid var(--line);border-radius:11px;padding:6px;cursor:pointer;font:inherit;color:var(--tx);display:flex;flex-direction:column;gap:3px;align-items:center;transition:transform .14s,border-color .14s}
.zcri:hover{transform:translateY(-2px);border-color:#3d69a8}
.zcri img{width:100%;height:70px;object-fit:contain}
.zcri b{font-size:11px;font-weight:600;line-height:1.15;text-align:center;overflow-wrap:anywhere}
.zcri i{font-size:9.5px;font-style:normal;color:var(--tx2);letter-spacing:.04em}
/* ---------- tabla de tipos: matriz clara, duelo y matchups ---------- */
.tipos__leyenda{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge.v16{color:#9fe0b8;border-color:#2f5c42;background:#13251c}
.badge.v0625{color:#f0a09e;border-color:#5c3030;background:#251416}
.badge.v1{color:#c3ccd9}
.matrizCaja{overflow:auto;margin-top:8px}
table.tiposMatriz{border-collapse:separate;border-spacing:4px}
table.tiposMatriz.grande th,table.tiposMatriz.grande td{min-width:74px;padding:8px 6px;font-size:12.5px;border-radius:8px;text-align:center}
table.tiposMatriz.grande thead th{background:#141b26;border:1px solid var(--borde)}
table.tiposMatriz.grande tbody th{background:#141b26;border:1px solid var(--borde);text-align:left}
table.tiposMatriz.grande td{background:#101620;border:1px solid #1c2533;font-weight:600;transition:transform .12s,background .12s}
table.tiposMatriz.grande td.v16{background:#16301f;color:#9fe0b8;border-color:#2b5340}
table.tiposMatriz.grande td.v0625{background:#2a1618;color:#f0a09e;border-color:#573030}
table.tiposMatriz.grande td.v1{color:#7f8b9c}
table.tiposMatriz.grande tbody tr:hover td{background:#1b2433}
table.tiposMatriz.grande tbody tr:hover td.v16{background:#1d3d28;transform:scale(1.05)}
table.tiposMatriz.grande tbody tr:hover td.v0625{background:#381d20;transform:scale(1.05)}
table.tiposMatriz.grande .esq{background:transparent;border:0}
.etag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:3px 8px;border-radius:7px;background:color-mix(in srgb,var(--c,#666) 22%,#0e131c);border:1px solid color-mix(in srgb,var(--c,#666) 45%,transparent);color:#eaf1fb;white-space:nowrap}
.etag img{width:14px;height:14px;object-fit:contain}
.vsdos{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:10px}
.vsdos__lado{display:flex;flex-direction:column;gap:8px}
.vsdos__lado select{width:100%;background:#111722;border:1px solid var(--borde);border-radius:9px;color:var(--txt);padding:8px 10px;font:inherit;font-size:13px}
.vsdos__ficha{display:flex;gap:10px;align-items:center;background:#121924;border:1px solid var(--borde);border-radius:12px;padding:9px}
.vsdos__retrato{width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center;background:#0e141d;border-radius:10px}
.vsdos__retrato img{width:100%;height:100%;object-fit:contain}
.vsdos__x{font:700 22px/1 inherit;color:#6f7d92;letter-spacing:.06em}
.duelo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.duelo__col{background:#121924;border:1px solid var(--borde);border-radius:12px;padding:10px}
.duelo__col h4{margin:0 0 8px;font-size:13px;color:var(--txt2);font-weight:600}
.duelo__barra{display:flex;height:12px;border-radius:8px;overflow:hidden;background:#0e131c;margin-bottom:6px}
.seg{display:block;height:100%}
.seg.flojo{background:linear-gradient(90deg,#c8574f,#e2857f)}
.seg.resto{background:linear-gradient(90deg,#3f7d5a,#63c98a)}
.seg.resto{background:#263243}
.veredicto2{margin-top:10px;padding:10px 12px;border-radius:11px;background:#131c2a;border:1px solid #26364f;font-size:13.5px}
.matchups{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;margin-top:12px}
.mu{position:relative;background:#121924;border:1px solid var(--borde);border-radius:12px;padding:8px 6px 9px;cursor:pointer;font:inherit;color:var(--txt);display:flex;flex-direction:column;align-items:center;gap:3px;transition:transform .13s,border-color .13s,box-shadow .13s;content-visibility:auto;contain-intrinsic-size:132px 150px}
.mu:hover{transform:translateY(-3px)}
.mu img{width:74px;height:74px;object-fit:contain}
.mu b{font-size:11.5px;font-weight:600;text-align:center;line-height:1.15}
.mu i{font-size:9.5px;font-style:normal;color:var(--txt2);text-align:center;line-height:1.2}
.mu__x{position:absolute;top:6px;left:6px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:7px;background:#0e141d;border:1px solid var(--borde)}
.mu.v16{border-color:#2f5c42}
.mu.v16 .mu__x{color:#9fe0b8;border-color:#2f5c42;background:#13251c}
.mu.v0625{border-color:#5c3030}
.mu.v0625 .mu__x{color:#f0a09e;border-color:#5c3030;background:#251416}
.mu.v1 .mu__x{color:#c3ccd9}

/* =====================================================================
   PIEL CHICLE KAWAII · pastel + neon estilo Aniimo (sustituye el look oscuro)
   ===================================================================== */
html,body{height:100%}
body{
  color:var(--tx);
  background:
    radial-gradient(920px 620px at 10% -8%, var(--sky) 0%, transparent 62%),
    radial-gradient(760px 520px at 92% 2%, var(--bubble) 0%, transparent 60%),
    radial-gradient(860px 640px at 46% 112%, var(--mint) 0%, transparent 62%),
    linear-gradient(180deg,#fff9fe 0%,#fff2fb 55%,#fdf4ff 100%);
  background-attachment:fixed;
}
body::before{
  content:''; position:fixed; inset:-20%; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(closest-side, rgba(255,79,216,.20), transparent 70%) 12% 22%/46vmax 46vmax no-repeat,
    radial-gradient(closest-side, rgba(37,223,255,.18), transparent 70%) 84% 30%/40vmax 40vmax no-repeat,
    radial-gradient(closest-side, rgba(168,255,62,.14), transparent 70%) 62% 86%/42vmax 42vmax no-repeat;
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.07)}}
.burbujas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.burbujas i{position:absolute;bottom:-14vh;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #fff 0%, rgba(255,255,255,.35) 42%, rgba(255,255,255,0) 70%),
             linear-gradient(140deg, rgba(255,79,216,.30), rgba(37,223,255,.28));
  box-shadow:0 0 18px rgba(255,79,216,.18) inset, 0 6px 18px -8px rgba(120,80,200,.35);
  animation:sube linear infinite; opacity:.55}
.burbujas i:nth-child(1){left:6%;width:90px;height:90px;animation-duration:29s;animation-delay:-3s}
.burbujas i:nth-child(2){left:22%;width:44px;height:44px;animation-duration:22s;animation-delay:-9s}
.burbujas i:nth-child(3){left:41%;width:120px;height:120px;animation-duration:34s;animation-delay:-16s;opacity:.4}
.burbujas i:nth-child(4){left:63%;width:60px;height:60px;animation-duration:25s;animation-delay:-6s}
.burbujas i:nth-child(5){left:78%;width:34px;height:34px;animation-duration:19s;animation-delay:-12s}
.burbujas i:nth-child(6){left:91%;width:100px;height:100px;animation-duration:31s;animation-delay:-20s;opacity:.42}
@keyframes sube{from{transform:translateY(0) scale(.9)}to{transform:translateY(-124vh) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.burbujas,.ficha__tw{display:none}body::before{animation:none}.brand .logo{animation:none}}

/* ---------- estructura flotante ---------- */
.app{grid-template-columns:238px minmax(0,1fr);gap:14px;height:100vh;padding:14px;position:relative;z-index:1}
.side{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,246,253,.86));
  border:2px solid #fff;border-radius:30px;padding:16px 12px;
  box-shadow:0 18px 40px -18px rgba(160,90,200,.35), 0 0 0 1px rgba(255,214,239,.7) inset,
             0 0 34px -12px rgba(255,79,216,.35);
  backdrop-filter:blur(14px)
}
.brand{position:relative;padding:4px 8px 14px}
.brand .logo{width:46px;height:46px;border-radius:16px;position:relative;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,#fff 0%,#ffd9f2 38%,#e5d4ff 72%,#d6ecff 100%);
  box-shadow:0 10px 22px -10px rgba(255,79,216,.55), 0 0 0 3px #fff inset;
  animation:bob 4.6s ease-in-out infinite}
.brand .logo__aro{position:absolute;inset:-4px;border-radius:20px;padding:2px;
  background:conic-gradient(from 200deg,var(--neon-pink),var(--neon-cyan),var(--neon-lime),var(--neon-violet),var(--neon-pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.brand .logo__paw{font-size:21px;filter:drop-shadow(0 2px 3px rgba(160,90,200,.35))}
@keyframes bob{0%,100%{transform:translateY(-1.5px) rotate(-1.5deg)}50%{transform:translateY(2px) rotate(1.5deg)}}
.brand b{font-size:16.5px;font-weight:800;letter-spacing:.2px;
  background:linear-gradient(92deg,var(--neon-pink),#ff8ae0 40%,var(--neon-violet) 75%,var(--neon-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{color:var(--tx2);font-size:11.5px}
.nav{gap:5px}
.nav button{border-radius:16px;padding:10px 12px;color:var(--tx2);font-size:13.5px;font-weight:600;
  border:2px solid transparent;transition:transform .16s cubic-bezier(.2,.9,.3,1.2),background .16s,color .16s,box-shadow .16s}
.nav button i{font-style:normal;font-size:15px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(140deg,#fff,#ffe9f8);box-shadow:0 4px 10px -6px rgba(160,90,200,.5);transition:transform .16s}
.nav button:hover{background:#fff0fa;color:var(--tx);transform:translateX(2px)}
.nav button:hover i{transform:scale(1.08) rotate(-4deg)}
.nav button.on{color:#fff;
  background:linear-gradient(100deg,var(--neon-pink),#ff8ae0 45%,var(--neon-violet));
  box-shadow:0 12px 24px -12px rgba(255,79,216,.75), 0 0 0 2px rgba(255,255,255,.8) inset}
.nav button.on i{background:rgba(255,255,255,.92);box-shadow:0 3px 8px -4px rgba(80,20,90,.5)}
.side .pie{color:var(--tx2);background:linear-gradient(180deg,#fff,#fff3fb);border:2px solid #fff;
  border-radius:18px;padding:10px;box-shadow:0 10px 20px -14px rgba(160,90,200,.5)}
.side .pie b{color:var(--tx);font-weight:700}
.pie__nota{color:var(--tx3)}
main{height:auto;min-height:0;background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,247,253,.6));
  border:2px solid #fff;border-radius:30px;overflow:hidden;
  box-shadow:0 20px 44px -22px rgba(160,90,200,.4), 0 0 0 1px rgba(255,214,239,.6) inset}
.topbar{padding:15px 22px;border-bottom:0;background:linear-gradient(92deg,rgba(255,214,242,.55),rgba(214,236,255,.5) 55%,rgba(184,245,224,.45));
  backdrop-filter:blur(10px)}
.topbar h1{font-size:17.5px;font-weight:800;color:#3f2350}
.topbar .sub{color:#8b6ba8}
.vista{padding:18px 22px 30px}

/* ---------- buscador, controles y tarjetas ---------- */
.buscar-global input{border-radius:999px;background:#fff;border:2px solid #ffe0f4;padding:9px 15px;font-size:12.5px;
  box-shadow:0 6px 14px -10px rgba(160,90,200,.5)}
.buscar-global input:focus{border-color:var(--neon-pink);box-shadow:0 0 0 4px rgba(255,79,216,.16)}
.bg-lista{border-radius:20px;border:2px solid #fff;background:#fff;box-shadow:0 22px 46px -18px rgba(160,90,200,.5)}
.bg-item{border-bottom:1px solid #ffeaf7}
.bg-item:hover,.bg-item.sel{background:linear-gradient(92deg,#fff2fb,#f4f9ff)}
.bg-item img{border-radius:12px;background:linear-gradient(140deg,#fff0fa,#eef8ff)}
input[type=text],input[type=search],select{border-radius:999px;background:#fff;border:2px solid #ffe0f4;padding:9px 14px;
  box-shadow:0 6px 14px -10px rgba(160,90,200,.45)}
input[type=text]:focus,input[type=search]:focus,select:focus{border-color:var(--neon-violet);box-shadow:0 0 0 4px rgba(168,107,255,.16)}
.chip{border-radius:999px;background:#fff;border:2px solid #ffe0f4;color:var(--tx2);font-weight:600;
  box-shadow:0 6px 14px -12px rgba(160,90,200,.6)}
.chip:hover{border-color:var(--neon-pink);color:var(--tx);transform:translateY(-1px)}
.chip.on{background:linear-gradient(100deg,var(--neon-pink),#ff9ae6);border-color:#fff;color:#fff;
  box-shadow:0 10px 20px -12px rgba(255,79,216,.85)}
.btn{border-radius:999px;background:#fff;border:2px solid #ffe0f4;color:var(--tx);font-weight:700;
  box-shadow:0 8px 18px -14px rgba(160,90,200,.7);transition:transform .16s cubic-bezier(.2,.9,.3,1.3),box-shadow .16s,background .16s}
.btn:hover{background:#fff6fc;transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(255,79,216,.75)}
.btn.prim,.btn.on{background:linear-gradient(100deg,var(--neon-pink),#ff8ae0 48%,var(--neon-violet));border-color:#fff;color:#fff;
  box-shadow:0 12px 24px -12px rgba(255,79,216,.85), 0 0 0 2px rgba(255,255,255,.75) inset}
.btn.prim:hover,.btn.on:hover{filter:saturate(1.1) brightness(1.03)}
.card{background:linear-gradient(180deg,#ffffff,#fff8fd);border:2px solid #fff;border-radius:26px;
  box-shadow:0 16px 34px -20px rgba(160,90,200,.5), 0 0 0 1px rgba(255,214,239,.55) inset}
.card h3{color:var(--tx2);letter-spacing:.08em}
.hint{color:var(--tx3)}
.badge{background:linear-gradient(140deg,#fff,#fff1fa);border:2px solid #ffe4f5;color:var(--tx2);border-radius:999px;padding:3.5px 11px;font-weight:600}
.tag{background:linear-gradient(140deg,#fff,#fdf1ff);border:1.5px solid #f6e2fb;color:var(--tx2);border-radius:999px;padding:3px 9px}
.tag.rol{color:color-mix(in oklab,var(--rc,#5aa9f0) 42%,#241238)!important;background:color-mix(in srgb,var(--rc,#5aa9f0) 20%,#fff);border-color:color-mix(in srgb,var(--rc,#5aa9f0) 34%,#fff);box-shadow:0 6px 14px -10px rgba(90,60,140,.3)}
.tag.hb:hover{background:#fff6fc;border-color:var(--neon-pink);color:var(--tx)}
.tabla th{color:var(--tx3);border-bottom:2px solid #ffe4f5}
.tabla td{border-bottom:1px solid #fff0f9}
.tabla tr:hover td{background:linear-gradient(92deg,#fff4fc,#f3f9ff)}
.tabla thead th:first-child{border-top-left-radius:14px}
.aviso{background:linear-gradient(120deg,#fff6e6,#fff);border:2px solid #ffe4b8;border-radius:18px;color:#8a6431}

/* ---------- aniidex ---------- */
.ficha{border-radius:26px;border:2px solid #fff;background:linear-gradient(180deg,#fff,#fff7fd);
  box-shadow:0 16px 30px -20px rgba(160,90,200,.55);overflow:hidden}
.ficha:hover{transform:translateY(-5px) rotate(-.4deg);border-color:#fff;
  box-shadow:0 26px 44px -22px rgba(255,79,216,.6), 0 0 0 2px rgba(255,255,255,.9) inset}
.ficha .thumb{background:radial-gradient(120% 90% at 50% 10%, color-mix(in srgb,var(--c,#ff4fd8) 26%,#fff), transparent 72%)}
.ficha .thumb img{filter:drop-shadow(0 14px 16px rgba(120,60,140,.35))}
.ficha .meta{border-top:1px solid #ffeef8;background:linear-gradient(180deg,#fffdfe,#fff6fc)}
.ficha .n span{color:var(--tx3)}
.ficha__tw{border-radius:12px;border:2px solid #fff;background:linear-gradient(140deg,#fff,#ffe9f8);color:var(--tx2);
  box-shadow:0 8px 16px -10px rgba(160,90,200,.7)}
.ficha__tw:hover{background:var(--c);color:#fff}

/* ---------- ficha de la criatura ---------- */
.detalle{gap:20px}
.viewer{border-radius:26px;border:2px solid #fff;
  background:radial-gradient(90% 70% at 50% 8%, color-mix(in srgb,var(--c,#ff4fd8) 28%,#fff), #fdf6ff 72%);
  box-shadow:0 18px 36px -22px rgba(160,90,200,.6)}
.viewer .vctl .btn,.viewer .vfx .btn{background:rgba(255,255,255,.9)}
.art2d img{filter:drop-shadow(0 20px 26px rgba(120,60,140,.4))}
.stats .fila{margin:9px 0}
.stats .k{color:var(--tx2);font-weight:700}
.stats .barra{height:13px;border-radius:999px;background:#fdeaf7;box-shadow:0 2px 6px -3px rgba(160,90,200,.35) inset}
.stats .barra i{border-radius:999px;background:linear-gradient(90deg,#fff9,transparent),
  linear-gradient(90deg,color-mix(in srgb,var(--c,#ff4fd8) 55%,#fff),var(--c,#ff4fd8));box-shadow:0 0 12px -2px var(--c)}
.stats .v{color:#3f2350}
.statmini{background:#fff;border:2px solid #ffe4f5;border-radius:16px}
.delta.up{color:#12a86b} .delta.dn{color:#e8437a}
.kv i{color:var(--tx3)}
.radar{filter:drop-shadow(0 10px 16px rgba(160,90,200,.25))}
.rasgo b{color:#3f2350}
.rasgo p{color:var(--tx2)}

/* ---------- barras de scroll y detalles ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffc9ec,#e2c2ff);border:3px solid transparent;border-radius:99px;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--neon-pink),var(--neon-violet));background-clip:content-box}
.nav{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding-right:2px}
.nav::-webkit-scrollbar{width:8px}

/* ---------- taller de builds y combate ---------- */
.talleres{gap:16px}
.tall__cab{background:linear-gradient(120deg,#fff2fb,#eef8ff);border:2px solid #fff;border-radius:24px;
  box-shadow:0 14px 28px -20px rgba(160,90,200,.5)}
.pieza,.slot,.statmini,.potfila,.eje,.desglose,.sim,.dano,.prob{background:linear-gradient(180deg,#fff,#fff8fd);
  border:2px solid #fff;border-radius:20px;box-shadow:0 12px 24px -20px rgba(160,90,200,.55)}
.pot{background:linear-gradient(120deg,#fff4fb,#f3f0ff);border:2px solid #fff;border-radius:22px}
.potfila{border-radius:999px;padding:6px 10px}
.potfila__k{color:var(--tx2);font-weight:700}
.eje__opts .chk{border-radius:999px}
.chk{background:#fff;border:2px solid #ffe4f5;border-radius:999px}
.chk.on{background:linear-gradient(100deg,var(--neon-violet),#ff9ae6);border-color:#fff;color:#fff}
.prob__barra,.barra,.hpmini,.sl{background:#fdeaf7;border-radius:999px}
.prob__barra i,.barra i,.hpmini i{background:linear-gradient(90deg,var(--neon-cyan),var(--neon-lime));border-radius:999px;
  box-shadow:0 0 10px -1px rgba(37,223,255,.7)}
.dano{color:#e8437a;font-weight:700}
.dano.t-mag{color:#8a5cd8}
.warn{color:#c96a00}
.crit{color:#ff4fd8}

/* ---------- tabla de tipos ---------- */
table.tiposMatriz,table.tiposMatriz.grande{border-spacing:5px}
table.tiposMatriz.grande thead th{background:linear-gradient(180deg,#fff,#fdf1ff);border:2px solid #fff;border-radius:12px;color:var(--tx2)}
table.tiposMatriz.grande tbody th{background:linear-gradient(90deg,#fff,#fff3fb);border:2px solid #fff;border-radius:12px}
table.tiposMatriz.grande td{background:#fff;border:2px solid #fff0f9;border-radius:12px;color:#5b3a6e}
table.tiposMatriz.grande td.v16{background:linear-gradient(140deg,#dcffed,#f4fff9);border-color:#b6f0d2;color:#12855a}
table.tiposMatriz.grande td.v0625{background:linear-gradient(140deg,#ffe3ec,#fff5f8);border-color:#ffc9d8;color:#d63a68}
table.tiposMatriz.grande td.v1{color:#a894bd}
.duelo__col,.matchups{background:#fff;border:2px solid #fff;border-radius:22px;box-shadow:0 12px 26px -20px rgba(160,90,200,.55)}

/* ---------- objetos y enciclopedia ---------- */
.objs{gap:12px}
.obj{background:linear-gradient(180deg,#fff,#fff8fd);border:2px solid #fff;border-radius:20px;
  box-shadow:0 12px 24px -20px rgba(160,90,200,.5);transition:transform .16s,box-shadow .16s}
.obj:hover{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(255,79,216,.55)}
.obj__rar{background:linear-gradient(120deg,#fff3fd,#f4f0ff);border-radius:999px;border:1.5px solid #f6e2fb}
.obj__tx{color:var(--tx2)}
.enc__nav{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,246,253,.9));border:2px solid #fff;border-radius:24px;
  box-shadow:0 14px 28px -20px rgba(160,90,200,.5)}
.enc__nav a,.enc__lista a{border-radius:999px}
.enc__cuerpo{background:linear-gradient(180deg,#fff,#fffafd);border:2px solid #fff;border-radius:26px;padding:20px 22px;
  box-shadow:0 16px 32px -22px rgba(160,90,200,.5)}
.enc__cuerpo h1,.enc__cuerpo h2,.enc__cuerpo h3{color:#3f2350}
.enc__txt{color:#5b3a6e;line-height:1.65}
.enc__ul li{color:#5b3a6e}

/* ---------- mapa: piel pastel ---------- */
.mp__lienzo{border:3px solid #fff;border-radius:26px;background:linear-gradient(140deg,#eaf6ff,#f6ecff);
  box-shadow:0 18px 38px -22px rgba(160,90,200,.6)}
.mp__panel,.mp__der .mp__capas{background:linear-gradient(180deg,#fff,#fff8fd);border:2px solid #fff;border-radius:24px;
  box-shadow:0 16px 32px -22px rgba(160,90,200,.5)}
.mtab{background:#fff;border:2px solid #ffe4f5;border-radius:999px;color:var(--tx2);font-weight:700}
.mtab:hover{border-color:var(--neon-pink);color:var(--tx)}
.mtab.on{background:linear-gradient(100deg,var(--neon-pink),#ff9ae6 50%,var(--neon-violet));color:#fff;border-color:#fff;
  box-shadow:0 10px 20px -12px rgba(255,79,216,.8)}
.mtab span{color:inherit;opacity:.8}
.mzona{background:linear-gradient(180deg,#fff,#fff8fd);border:2px solid #fff;border-radius:20px;color:var(--tx);
  box-shadow:0 10px 20px -18px rgba(160,90,200,.6)}
.mzona:hover{transform:translateY(-3px);border-color:#ffe0f4;box-shadow:0 16px 26px -18px rgba(255,79,216,.6)}
.mzona.on{border-color:var(--neon-pink);box-shadow:0 0 0 3px rgba(255,79,216,.18), 0 14px 26px -18px rgba(255,79,216,.7)}
.mzona.hit{border-color:var(--neon-lime);box-shadow:0 0 0 3px rgba(168,255,62,.22)}
.mzona__minis img{border-radius:10px;background:linear-gradient(140deg,#fff0fa,#eef8ff)}
.mlgh{border-radius:16px;background:linear-gradient(140deg,#fff,#fff4fc);border:2px solid #fff}
.mlayer{background:#fff;border:2px solid #ffe9f7;border-radius:999px;color:var(--tx2)}
.mlayer:hover{border-color:var(--neon-pink);color:var(--tx)}
.mlayer.on{background:linear-gradient(100deg,#fff,#fff0fa);border-color:var(--neon-pink)}
.mp__ctrls .btn{background:rgba(255,255,255,.95)}
.mp__tip{background:#fff;border:2px solid #fff;border-radius:16px;color:var(--tx);
  box-shadow:0 14px 28px -16px rgba(160,90,200,.7)}
.mp__pie{background:rgba(255,255,255,.9);border:2px solid #fff;border-radius:999px;color:var(--tx2)}
.mp__q,.mp__nivel,.mp__sug{background:#fff}
.mp__sug{border:2px solid #fff;border-radius:18px;box-shadow:0 18px 34px -18px rgba(160,90,200,.6)}
.mp__sug div:hover{background:linear-gradient(92deg,#fff2fb,#f1f8ff)}
.mchip{background:#fff;border:2px solid #ffe9f7;color:var(--tx2);border-radius:999px;font-weight:700}
.mchip:hover{border-color:var(--neon-pink);color:var(--tx)}
.mchip.on{background:linear-gradient(100deg,var(--neon-pink),#ff9ae6);border-color:#fff;color:#fff}
.mchip.on b{color:rgba(255,255,255,.85)}
.zcri{background:#fff;border:2px solid #ffe9f7;border-radius:16px;color:var(--tx)}
.zcri:hover{transform:translateY(-2px);border-color:var(--neon-pink)}
.mp__cuenta span{background:#fff;border:2px solid #ffe9f7;border-radius:999px;color:var(--tx2)}

/* ---------- guia visual (tarjetas con imagen, nada de tochos) ---------- */
.gui{display:flex;flex-direction:column;gap:16px}
.gui__hero{position:relative;overflow:hidden;border:3px solid #fff;border-radius:30px;min-height:210px;display:flex;align-items:flex-end;
  background:linear-gradient(120deg,#ffd9f2,#e5d4ff 45%,#d6ecff);
  box-shadow:0 22px 44px -26px rgba(160,90,200,.7)}
.gui__hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.55}
.gui__hero .velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.9) 78%)}
.gui__hero .txt{position:relative;padding:20px 24px;width:100%}
.gui__hero h2{margin:0;font-size:29px;font-weight:900;letter-spacing:-.4px;color:#3f2350}
.gui__hero h2 em{font-style:normal;background:linear-gradient(92deg,var(--neon-pink),var(--neon-violet) 55%,var(--neon-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gui__hero p{margin:6px 0 0;color:#6b4a80;font-size:13.5px;max-width:760px}
.gui__pastillas{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gpill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border:2px solid #fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;font-weight:700;color:#5b3a6e;box-shadow:0 10px 20px -14px rgba(160,90,200,.7)}
.gpill i{width:9px;height:9px;border-radius:50%;background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));
  box-shadow:0 0 8px rgba(255,79,216,.8)}
.gui__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:14px}
.gcard{position:relative;overflow:hidden;text-align:left;border:3px solid #fff;border-radius:26px;cursor:pointer;padding:0;
  background:linear-gradient(180deg,#fff,#fff8fd);box-shadow:0 16px 32px -22px rgba(160,90,200,.6);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.3),box-shadow .18s}
.gcard:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 26px 46px -22px rgba(255,79,216,.6)}
.gcard__top{display:flex;align-items:center;gap:10px;padding:13px 14px 0}
.gcard__ico{width:44px;height:44px;flex:0 0 auto;border-radius:15px;display:grid;place-items:center;font-size:22px;
  background:linear-gradient(140deg,#fff,#ffe9f8);box-shadow:0 8px 18px -10px rgba(160,90,200,.7), 0 0 0 2px #fff inset}
.gcard h3{margin:0;font-size:15px;font-weight:800;color:#3f2350;line-height:1.2}
.gcard__num{font-size:11px;color:var(--tx3);font-weight:700;letter-spacing:.08em}
.gcard__cuerpo{display:flex;gap:12px;padding:10px 14px 0;align-items:flex-start}
.gcard__foto{width:88px;height:88px;flex:0 0 auto;border-radius:18px;overflow:hidden;border:2px solid #fff;
  background:linear-gradient(140deg,#fff0fa,#eef8ff);display:grid;place-items:center;box-shadow:0 10px 20px -14px rgba(160,90,200,.7)}
.gcard__foto img{width:100%;height:100%;object-fit:contain}
.gcard__resumen{margin:0;color:#6b4a80;font-size:12.5px;line-height:1.5}
.gcard__claves{display:flex;flex-direction:column;gap:4px;margin:9px 0 0;padding:0;list-style:none}
.gcard__claves li{display:flex;gap:6px;align-items:flex-start;color:#5b3a6e;font-size:12px;line-height:1.4}
.gcard__claves li i{width:6px;height:6px;margin-top:6px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,var(--neon-cyan),var(--neon-violet))}
.gcard__pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 14px 14px}
.gcard__ver{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(100deg,var(--neon-pink),#ff9ae6 50%,var(--neon-violet));
  color:#fff;border:2px solid #fff;border-radius:999px;padding:6px 13px;font-size:12px;font-weight:800;
  box-shadow:0 10px 20px -12px rgba(255,79,216,.85)}
.gcard__etiquetas{display:flex;gap:4px;flex-wrap:wrap}
.gcard.abierta{border-color:#fff;box-shadow:0 0 0 3px rgba(255,79,216,.22), 0 26px 46px -22px rgba(255,79,216,.6)}
.gpanel{margin-top:14px;border:3px solid #fff;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#fff,#fffcfe);
  box-shadow:0 24px 48px -26px rgba(160,90,200,.65)}
.gpanel__cab{position:relative;display:flex;align-items:center;gap:14px;padding:18px 22px;
  background:linear-gradient(100deg,#ffe6f7,#e9dcff 55%,#dff0ff)}
.gpanel__cab .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:27px;background:rgba(255,255,255,.9);
  box-shadow:0 10px 22px -12px rgba(160,90,200,.7)}
.gpanel__cab h2{margin:0;font-size:22px;font-weight:900;color:#3f2350}
.gpanel__cab p{margin:3px 0 0;color:#6b4a80;font-size:13px}
.gpanel__cab .cerrar{margin-left:auto;border-radius:999px}
.gpanel__cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,30%);gap:18px;padding:18px 22px 22px}
.gpanel__texto p{color:#4f3363;font-size:13.5px;line-height:1.68;margin:0 0 11px}
.gpanel__texto p:first-child{font-size:14.5px;color:#3f2350;font-weight:600}
.gpanel__texto h4{margin:16px 0 7px;font-size:14px;color:#3f2350}
.gpanel__lado{display:flex;flex-direction:column;gap:12px}
.gpanel__fig{border:2px solid #fff;border-radius:20px;overflow:hidden;background:linear-gradient(140deg,#fff0fa,#eef8ff);
  box-shadow:0 14px 28px -20px rgba(160,90,200,.6);display:grid;place-items:center;padding:10px}
.gpanel__fig img{max-width:100%;max-height:190px;object-fit:contain}
.gpanel__fig figcaption{color:var(--tx3);font-size:11px;text-align:center;padding-top:6px}
.gpanel__tiras{display:flex;gap:6px;flex-wrap:wrap}
.gpanel__tiras img{width:42px;height:42px;object-fit:contain;border-radius:12px;border:2px solid #fff;
  background:linear-gradient(140deg,#fff,#fff5fc);padding:2px}
@media (max-width:1000px){.gpanel__cuerpo{grid-template-columns:minmax(0,1fr)}}

/* guia: hero mas vivo, miniatura de tarjeta como pegatina */
.gui__hero .velo{background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 42%,rgba(255,244,252,.30) 78%,rgba(255,240,250,.10) 100%) !important}
.gui__hero .bg{filter:saturate(1.15) brightness(1.04) !important}
.gcard__foto{width:104px !important;height:104px !important;background:linear-gradient(150deg,#fff0fa,#f3ecff 60%,#e8fbff) !important}
.gcard__foto img{object-fit:contain !important;padding:5px;filter:drop-shadow(0 6px 12px rgba(180,120,220,.25))}
.gcard__ico{width:38px !important;height:38px !important}
.nav{overflow:auto}
.gui .mp__barra input{max-width:420px}

/* ==== TALLER Y COMBATE KAWAII ==== */
/* Piel pastel+neon del Taller de builds y del Laboratorio de combate.
   Solo clases nuevas (prefijos .tb / .aa / .tbb / .cb); no reescribe nada de arriba. */

/* ---------- 1. estructura del taller ---------- */
.talleres{grid-template-columns:336px minmax(0,1fr);gap:16px;align-items:start}
.tb__izq,.tb__der{display:grid;gap:14px;align-content:start;min-width:0}
.tb__der{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.tb__aa{grid-column:1/-1}
.tb__techo{grid-column:1/-1}
.tb__recom{grid-column:1/-1}

/* ---------- 2. tarjeta de la criatura + nivel ---------- */
.tb__hero{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:16px}
.tb__retrato{position:relative;display:grid;place-items:center;border-radius:24px;padding:4px;
  background:radial-gradient(70% 62% at 50% 40%,color-mix(in srgb,var(--c,#ff4fd8) 32%,#fff),transparent 74%)}
.tb__retrato img{width:100px;height:112px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(120,60,140,.28))}
.tb__nivelchip{position:absolute;bottom:-4px;right:-6px;background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet));
  color:#fff;font-size:11px;font-weight:800;padding:3px 11px;border-radius:999px;border:2px solid #fff;
  box-shadow:0 10px 18px -10px rgba(255,79,216,.95)}
.tb__nivelchip b{font-size:13px}
.tb__datos{min-width:0}
.tb__nom{font-size:19px;font-weight:900;color:var(--tx);display:flex;gap:6px;align-items:center;flex-wrap:wrap;line-height:1.2}
.tb__sel{grid-column:1/-1;width:100%}
.tb__nivel{grid-column:1/-1;display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:10px;align-items:center;margin-top:6px}
.tb__nbtn{width:46px;height:46px;border-radius:999px;border:2px solid #fff;background:linear-gradient(140deg,#fff,#fff0fa);
  color:var(--tx);font-size:23px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 22px -14px rgba(160,90,200,.85);transition:transform .14s cubic-bezier(.2,.9,.3,1.3),background .16s,box-shadow .16s}
.tb__nbtn:hover{background:linear-gradient(140deg,#fff,#ffe9f8);transform:translateY(-2px)}
.tb__nbtn:active{transform:scale(.9)}
.tb__npills{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tb__npills .btn.mini,.tb__presets .btn{background:linear-gradient(140deg,#fff,#fff2fb);border:2px solid var(--line);
  color:var(--tx2);border-radius:999px;padding:8px 13px;font-size:12.5px;font-weight:800;
  box-shadow:0 10px 18px -16px rgba(160,90,200,.95)}
.tb__npills .btn.mini:hover,.tb__presets .btn:hover{background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet));
  border-color:#fff;color:#fff;transform:translateY(-2px)}
.tb__npills .btn.on,.tb__presets .btn.on{background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet));border-color:#fff;
  color:#fff;box-shadow:0 12px 22px -12px rgba(255,79,216,.95)}
.tb__curva{grid-column:1/-1;margin-top:12px;border-top:2px dashed #ffe4f5;padding-top:10px}
.tb__curvalbl{font-size:12px;color:var(--tx2);font-weight:700}
.tb__curvalbl b{color:var(--acc)}

/* ---------- 3. reparto de potencial: filas chicle ---------- */
.tb__potcard{padding:16px}
.tb__potcab{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tb__potcab h3{margin:0}
.tb__contador{margin-left:auto;display:flex;align-items:baseline;gap:7px;padding:6px 15px;border-radius:999px;
  border:2px solid #fff;background:linear-gradient(140deg,#fff,#f3fffa);box-shadow:0 12px 22px -14px rgba(47,209,143,.9)}
.tb__contador b{font-size:25px;font-weight:900;font-variant-numeric:tabular-nums;color:#0f8a5c;line-height:1.1}
.tb__contador span{font-size:10.5px;color:var(--tx3);font-weight:800;letter-spacing:.03em}
.tb__contador[data-estado="poco"]{background:linear-gradient(140deg,#fff,#fff8e4);box-shadow:0 12px 24px -12px var(--neon-yellow)}
.tb__contador[data-estado="poco"] b{color:#b8860b;animation:tbLatido 1.7s ease-in-out infinite}
.tb__contador[data-estado="pasado"]{background:linear-gradient(140deg,#fff,#ffeef1);box-shadow:0 12px 24px -12px var(--bad)}
.tb__contador[data-estado="pasado"] b{color:var(--bad)}
@keyframes tbLatido{0%,100%{text-shadow:0 0 0 rgba(255,210,61,0)}50%{text-shadow:0 0 13px rgba(255,210,61,.95)}}
.tb__tanque{position:relative;height:16px;border-radius:999px;background:#fdeaf7;border:2px solid #fff;margin:10px 0 12px;
  box-shadow:0 3px 8px -5px rgba(160,90,200,.5) inset;overflow:hidden;display:flex;justify-content:flex-end}
.tb__tanque i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--neon-cyan),var(--neon-lime));
  box-shadow:0 0 14px -2px var(--neon-lime);transition:width .22s cubic-bezier(.2,.9,.3,1.3)}
.tb__potrows{display:grid;gap:8px}
.tbpot{display:grid;grid-template-columns:66px 44px 46px 44px minmax(0,1fr);gap:8px;align-items:center;
  background:linear-gradient(120deg,#fff,#fff7fd);border:2px solid #fff;border-radius:20px;padding:8px 10px;
  box-shadow:0 14px 24px -22px rgba(160,90,200,.9)}
.tbpot__k{font-size:11.5px;font-weight:900;letter-spacing:.05em;color:var(--tx2)}
.tbpot__val{text-align:center;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--tx)}
.tbpot__barra{display:block;height:12px;border-radius:999px;background:#fdeaf7;overflow:hidden;
  box-shadow:0 2px 7px -4px rgba(160,90,200,.55) inset}
.tbpot__barra i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--mint),var(--neon-cyan) 55%,var(--neon-violet));
  box-shadow:0 0 12px -2px var(--neon-cyan);transition:width .18s cubic-bezier(.2,.9,.3,1.3)}
.tbpot input.pot{grid-column:1/-1;width:100%;height:20px;margin:0}
.tbpm{width:44px;height:44px;border-radius:999px;border:2px solid #fff;background:linear-gradient(140deg,#fff,#fff0fa);
  color:var(--tx);font-size:22px;font-weight:900;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 10px 18px -12px rgba(160,90,200,.9);
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3),background .16s,color .16s,box-shadow .16s}
.tbpm:hover{background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));color:#fff;
  box-shadow:0 12px 22px -10px rgba(255,79,216,.95);transform:translateY(-2px)}
.tbpm:active{transform:scale(.87)}
.tb__presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

/* ---------- 4. personalidad como pildoras pastel ---------- */
.tb__perscard{padding:16px}
.talleres .eje{display:grid;grid-template-columns:38px minmax(0,1fr) 84px;gap:9px;align-items:center;
  background:linear-gradient(120deg,#fff,#fdf6ff);border:2px solid #fff;border-radius:20px;padding:9px 11px;margin-bottom:8px;
  box-shadow:0 14px 24px -24px rgba(160,90,200,.95)}
.talleres .eje__par{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;font-weight:900;font-size:12.5px;
  color:#fff;background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));border:2px solid #fff;
  box-shadow:0 8px 16px -10px rgba(255,79,216,.95)}
.talleres .eje__opts{display:flex;gap:6px;flex-wrap:wrap}
.talleres .eje__p{border-radius:999px;border:2px solid #f6e2fb;background:linear-gradient(140deg,#fff,#fdf1ff);color:var(--tx2);
  padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3),background .16s,color .16s,box-shadow .16s}
.talleres .eje__p i{font-style:normal;color:var(--tx3);font-size:11px}
.talleres .eje__p em{font-style:normal;color:var(--acc);font-size:11px;font-weight:800}
.talleres .eje__p:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(160,90,200,.95)}
.talleres .eje__p.on{background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet));color:#fff;border-color:#fff;
  box-shadow:0 10px 22px -12px rgba(255,79,216,.95)}
.talleres .eje__p.on i,.talleres .eje__p.on em{color:#fff;opacity:.94}
.talleres .eje__v{border-radius:999px;background:#fff;border:2px solid #ffe0f4;padding:6px 10px;font-size:12px;font-weight:700;color:var(--tx2)}
.tb__vivo{margin-top:10px;padding:9px 13px;border-radius:16px;border:2px solid #fff;
  background:linear-gradient(120deg,#eef9ff,#fff);font-size:12.5px;color:var(--tx2);
  box-shadow:0 14px 26px -20px rgba(37,223,255,.95)}
.tb__vivo b{color:var(--tx)}
.tb__nombrada{color:var(--acc);font-weight:900}

/* ---------- 5. bonos y acciones ---------- */
.tb__bonoscard{padding:16px}
.tb__bonoslinea{margin:-2px 0 8px}
.tb__bonofila{margin-top:8px}
.tb__bonok{display:inline-block;width:120px;font-size:12px;color:var(--tx3)}
.tb__acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- 6. resultado + antes / ahora ---------- */
.tb__ahora{padding:16px}
.tb__res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:4px 0 12px}
.tb__radar{display:grid;place-items:center}
.tb__radar svg{width:min(340px,100%);height:auto;display:block}
.tb__aa{padding:16px 18px}
.aa__leyenda{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 12px}
.aa__lg{font-size:11.5px;font-weight:800;color:var(--tx2);display:inline-flex;gap:7px;align-items:center}
.aa__lg::before{content:'';width:24px;height:11px;border-radius:999px}
.aa__lg--antes::before{background:linear-gradient(90deg,#e5d4ff,#d6ecff)}
.aa__lg--ahora::before{background:linear-gradient(90deg,var(--neon-pink),var(--neon-violet))}
.aa__fila{display:grid;grid-template-columns:66px minmax(0,1fr) 124px 116px;gap:10px;align-items:center;
  padding:7px 0;border-bottom:1px dashed #ffe4f5}
.aa__k{font-size:11.5px;font-weight:900;color:var(--tx2);letter-spacing:.04em}
.aa__barras{display:grid;gap:4px}
.aa__barra{display:block;height:11px;border-radius:999px;background:#fdeaf7;overflow:hidden}
.aa__barra i{display:block;height:100%;border-radius:999px;transition:width .22s cubic-bezier(.2,.9,.3,1.3)}
.aa__barra--antes i{background:linear-gradient(90deg,#e5d4ff,#d6ecff)}
.aa__barra--ahora i{background:linear-gradient(90deg,var(--neon-pink),var(--neon-violet));
  box-shadow:0 0 12px -2px var(--neon-pink)}
.aa__nums{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:right;font-variant-numeric:tabular-nums}
.aa__nums b{font-size:12.5px;color:var(--tx3)}
.aa__nums .aa__vn{font-size:15.5px;font-weight:900;color:var(--tx)}
.aa__delta{justify-self:end;text-align:right;font-size:11.5px;font-weight:800;border-radius:999px;padding:3px 10px;
  background:#f6f2fb;color:var(--tx3)}
.aa__delta.up{background:color-mix(in srgb,var(--ok) 18%,#fff);color:#0f8a5c}
.aa__delta.dn{background:color-mix(in srgb,var(--bad) 16%,#fff);color:#c93b56}
.aa__tot{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--tx2)}
.aa__tot b{font-size:16px;color:var(--tx);font-variant-numeric:tabular-nums}
.aa__flecha{color:var(--acc);font-weight:900}

/* ---------- 7. builds guardadas ---------- */
.tb__guardadas{padding:16px}
.tbbs{display:grid;gap:10px}
.tbb{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:linear-gradient(120deg,#fff,#fff7fd);border:2px solid #fff;border-radius:20px;padding:10px 12px;
  box-shadow:0 14px 26px -22px rgba(160,90,200,.9)}
.tbb__img{width:56px;height:56px;object-fit:contain;border-radius:16px;background:linear-gradient(140deg,#fff3fb,#eef8ff)}
.tbb__info{min-width:0}
.tbb__info b{font-size:14px;color:var(--tx)}
.tbb__stats{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.tbb__btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tb__recom{padding:16px}

/* ---------- 8. laboratorio de combate ---------- */
.cblab{display:grid;gap:14px}
.cb__arena{display:grid;grid-template-columns:minmax(0,1fr) 218px minmax(0,1fr);gap:14px;align-items:start;padding:18px;
  background:radial-gradient(120% 80% at 50% 0%,#fff5fd,#ffffff 62%)}
.cb__lado{display:grid;gap:8px;border-radius:24px;padding:14px;min-width:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c,#ff4fd8) 13%,#fff),#fff);border:2px solid #fff;
  box-shadow:0 18px 32px -24px color-mix(in srgb,var(--c,#ff4fd8) 55%,rgba(160,90,200,.9))}
.cb__rol{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.cb__retrato{position:relative;display:grid;place-items:center;border-radius:22px;padding:4px;
  background:radial-gradient(70% 62% at 50% 38%,color-mix(in srgb,var(--c,#ff4fd8) 36%,#fff),transparent 74%)}
.cb__retrato img{width:146px;height:164px;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(120,60,140,.3))}
.cb__lv{position:absolute;bottom:0;right:0;background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet));color:#fff;
  font-size:11.5px;font-weight:800;padding:3px 12px;border-radius:999px;border:2px solid #fff;
  box-shadow:0 10px 18px -10px rgba(255,79,216,.95)}
.cb__nom{font-size:16px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.cb__nom b{color:var(--tx)}
.cb__hp{display:grid;gap:4px;margin:2px 0 4px}
.cb__hpbar{height:16px;border-radius:999px;background:#fdeaf7;border:2px solid #fff;overflow:hidden;
  box-shadow:0 3px 8px -5px rgba(160,90,200,.5) inset}
.cb__hpbar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ok),var(--neon-lime));
  box-shadow:0 0 14px -2px var(--neon-lime);transition:width .45s cubic-bezier(.2,.9,.3,1.3)}
.cb__lado--D .cb__hpbar i{background:linear-gradient(90deg,var(--neon-pink),var(--neon-orange))}
.cb__hpnum{font-size:11.5px;font-weight:800;color:var(--tx2);font-variant-numeric:tabular-nums;text-align:right}
.cb__centro{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:24px}
.cb__vs{width:94px;height:94px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:29px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));border:3px solid #fff;
  box-shadow:0 20px 32px -16px rgba(255,79,216,.95),0 0 30px -4px var(--neon-violet),0 0 0 8px rgba(255,255,255,.7) inset;
  animation:cbVsPop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes cbVsPop{0%{transform:scale(.6) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.cb__matchup{text-align:center;font-size:12px;color:var(--tx2);line-height:1.5}
.cb__matchup b{display:block;font-size:20px;color:var(--tx)}
.cb__matchup .bueno{color:#0f8a5c}
.cb__matchup .malo{color:#c93b56}
.cb__atacar.btn.prim{font-size:16px;padding:13px 28px;min-width:196px;letter-spacing:.02em;
  box-shadow:0 16px 30px -14px rgba(255,79,216,.95),0 0 0 2px rgba(255,255,255,.8) inset}
.cb__atacar.btn.prim:active{transform:scale(.94)}
.cb__sim.btn{font-size:13.5px;padding:10px 22px;min-width:196px}
.cb__sim100.btn{font-size:12.5px;padding:9px 22px;min-width:196px}
.cb__rescard{padding:16px 18px}
#simSalida{margin-top:8px}
.cb__ajustes{padding:16px}
.cb__flags{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cb__flags .badge{white-space:nowrap}
.cb__flags input[type=range]{max-width:130px;vertical-align:middle;margin-left:4px}
.cb__lado .vs__stats span{background:linear-gradient(140deg,#fff,#fff6fc);border:2px solid #fff;border-radius:16px;
  box-shadow:0 10px 18px -18px color-mix(in srgb,var(--c,#ff4fd8) 70%,rgba(160,90,200,.9))}
.cb__lado .vs__stats i{color:var(--tx3);font-weight:800}
.cb__lado label.chk{display:inline-flex;width:100%;background:linear-gradient(140deg,#fff,#fff6fc);border:2px solid #fff;
  border-radius:999px;padding:7px 12px;color:var(--tx2);box-shadow:0 10px 18px -18px rgba(160,90,200,.9)}
.cb__lado label.chk input{width:16px;height:16px}
.cb__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:14px;align-items:start}
.cb__lado2{display:grid;gap:14px}
.cb__golpes,.cb__ver,.cb__cuentas{padding:16px}

/* ---------- 9. resultado de un golpe suelto ---------- */
.cbg{display:grid;gap:14px}
.cbg__cab{display:flex;gap:12px;align-items:center}
.cbg__ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:24px;flex:none;
  background:linear-gradient(140deg,#fff0fa,#eef8ff);border:2px solid #fff;box-shadow:0 14px 24px -18px rgba(160,90,200,.95)}
.cbg__ico img{width:46px;height:46px;object-fit:contain}
.cbg__nom{font-size:14.5px;color:var(--tx)}
.cbg__nom b{color:var(--acc)}
.cbg__cuerpo{display:grid;grid-template-columns:236px minmax(0,1fr);gap:16px;align-items:center}
.cbg__num{font-size:66px;font-weight:900;line-height:1;text-align:center;font-variant-numeric:tabular-nums;
  background:linear-gradient(100deg,var(--neon-pink),var(--neon-violet) 62%,var(--neon-cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 12px 18px rgba(255,79,216,.45))}
.cbg__num.pop{animation:cbPop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes cbPop{0%{transform:scale(.55);opacity:0}55%{transform:scale(1.09);opacity:1}100%{transform:scale(1);opacity:1}}
.cbg__pills{display:flex;gap:8px;flex-wrap:wrap;align-content:center}
.cbpill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--tx2);
  background:linear-gradient(140deg,#fff,#fdf1ff);border:2px solid #f6e2fb;border-radius:999px;padding:6px 13px}
.cbpill--up{background:color-mix(in srgb,var(--ok) 16%,#fff);border-color:color-mix(in srgb,var(--ok) 42%,#fff);color:#0f8a5c}
.cbpill--dn{background:color-mix(in srgb,var(--bad) 14%,#fff);border-color:color-mix(in srgb,var(--bad) 40%,#fff);color:#c93b56}
.cbpill--hp{background:linear-gradient(140deg,#eef9ff,#fff);border-color:#d6ecff;color:var(--tx)}

/* ---------- 10. registro de turnos ---------- */
.cbres{display:grid;gap:12px}
.cbres__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.cblog{display:flex;flex-direction:column;gap:7px;max-height:350px;overflow:auto;padding:2px 4px 2px 2px}
.cbt{display:grid;grid-template-columns:30px 32px minmax(74px,auto) minmax(0,1fr) 74px 86px 104px 104px;gap:8px;align-items:center;
  align-items:center;font-size:12px;border-radius:18px;padding:7px 10px;border:2px solid #fff;min-width:566px;
  background:linear-gradient(120deg,#f1fff9,#fff);box-shadow:0 14px 24px -24px rgba(160,90,200,.95)}
.cbt--D{background:linear-gradient(120deg,#fff2f7,#fff)}
.cbt__n{font-size:11px;font-weight:900;color:var(--tx3)}
.cbt__img{width:34px;height:34px;object-fit:contain;border-radius:12px;background:linear-gradient(140deg,#fff,#fff3fb)}
.cbt__quien{font-weight:800;color:var(--tx2)}
.cbt__hab{color:var(--tx);font-weight:700}
.cbt__hab i{font-style:normal;color:var(--tx3);font-size:11px}
.cbt__tipo{font-size:11px;color:var(--tx3)}
.cbt__dano{font-weight:900;color:#0f8a5c;font-variant-numeric:tabular-nums}
.cbt--D .cbt__dano{color:#c93b56}
.cbt__hp{font-size:11px;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cblog .hpmini{background:#fdeaf7}
.cbprob{display:grid;gap:12px}

/* ---------- 11. sliders pastel (nivel, potencial, curva y ajustes) ---------- */
.talleres input[type=range],.cblab input[type=range]{height:22px;background:transparent}
.talleres input[type=range]::-webkit-slider-runnable-track,.cblab input[type=range]::-webkit-slider-runnable-track{
  height:8px;border-radius:999px;background:linear-gradient(90deg,#ffe4f5,#fdeaf7);border:1px solid #fff;
  box-shadow:0 2px 7px -4px rgba(160,90,200,.6) inset}
.talleres input[type=range]::-webkit-slider-thumb,.cblab input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;margin-top:-6px;border-radius:999px;border:2px solid #fff;
  background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));cursor:pointer;
  box-shadow:0 8px 16px -8px rgba(255,79,216,.95)}
.talleres input[type=range]::-moz-range-track,.cblab input[type=range]::-moz-range-track{
  height:8px;border-radius:999px;background:#fdeaf7;border:1px solid #fff}
.talleres input[type=range]::-moz-range-thumb,.cblab input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:2px solid #fff;border-radius:999px;background:var(--neon-pink)}
.talleres input[type=range]:focus-visible,.cblab input[type=range]:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.aa__barra--antes i{background:linear-gradient(90deg,#d9c4ff,#bfe3ff)}

/* ---------- 12. restos de la piel oscura dentro del taller y del laboratorio ---------- */
.cblab .veredicto{align-items:flex-start;gap:5px;padding:15px 18px;border:2px solid #fff;border-radius:22px;
  background:linear-gradient(160deg,#fff,#fff6fc);box-shadow:0 16px 30px -22px rgba(160,90,200,.75)}
.cblab .veredicto b{color:var(--tx);font-size:17px}
.cblab .veredicto span{color:var(--tx2);font-size:12px}
.cblab .veredicto.ganoA{background:linear-gradient(160deg,#e9fff5,#fff);box-shadow:0 16px 30px -22px rgba(47,209,143,.85)}
.cblab .veredicto.ganoD{background:linear-gradient(160deg,#ffeef3,#fff);box-shadow:0 16px 30px -22px rgba(255,95,126,.85)}
.cblab .desglose{background:#fff;border:2px solid #fff;border-radius:22px;gap:3px;padding:6px}
.cblab .desglose>div{background:transparent;padding:8px 12px;font-size:12.5px;border-radius:14px}
.cblab .desglose>div:nth-child(odd){background:linear-gradient(92deg,#fff6fc,#f7fbff)}
.cblab .desglose>div span{color:var(--tx2)}
.cblab .desglose>div b{color:var(--tx);font-variant-numeric:tabular-nums}
.cblab .desglose>div.tot{background:linear-gradient(100deg,#ffe6f7,#efe6ff);border:2px solid #fff}
.cblab .desglose>div.tot b{color:var(--acc);font-size:16px}
.cblab .hpmini{height:8px;width:52px}
.cblab .tabla.sim td,.cblab .tabla.sim th{font-size:11.5px}
.cb__lado label.chk{width:auto}

/* ---------- 13. adaptacion y accesibilidad ---------- */
@media (max-width:1180px){.talleres{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1080px){
  .cb__grid{grid-template-columns:minmax(0,1fr)}
  .cb__arena{grid-template-columns:minmax(0,1fr)}
  .cb__centro{order:-1;padding-top:0}
}
@media (max-width:760px){
  .tb__der{grid-template-columns:minmax(0,1fr)}
  .cbg__cuerpo{grid-template-columns:minmax(0,1fr)}
  .aa__fila{grid-template-columns:56px minmax(0,1fr) 104px;gap:8px}
  .aa__delta{grid-column:2/4}
  .tbb{grid-template-columns:48px minmax(0,1fr)}
  .tbb__btns{grid-column:1/-1;justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .tb__contador[data-estado="poco"] b,.cb__vs,.cbg__num.pop{animation:none !important}
  .tbpm,.tb__nbtn,.btn,.eje__p,.tb__tanque i,.aa__barra i,.tbpot__barra i,.cb__hpbar i{transition:none !important}
}
/* ==== fin TALLER Y COMBATE KAWAII ==== */

/* guia: claves grandes y texto completo plegado */
.gpanel__claves{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px}
.gpanel__claves li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:2px solid #fff;
  border-radius:16px;padding:11px 13px;font-size:13.6px;color:var(--tx);box-shadow:0 10px 22px -14px rgba(180,120,220,.55);line-height:1.45}
.gpanel__claves li i{width:10px;height:10px;border-radius:50%;margin-top:5px;flex:0 0 10px;
  background:linear-gradient(140deg,var(--neon-pink),var(--neon-violet));box-shadow:0 0 8px rgba(255,79,216,.6)}
.gpanel__todo{margin-top:6px;border-radius:18px;background:linear-gradient(180deg,#fff9fe,#fff);border:2px dashed #ffd6ee;padding:6px 12px}
.gpanel__todo summary{cursor:pointer;font-size:13px;font-weight:700;color:#c22f9e;padding:8px 2px;list-style:none}
.gpanel__todo summary::-webkit-details-marker{display:none}
.gpanel__todo summary:before{content:"📖 "}
.gpanel__todo[open] summary:before{content:"📕 "}
.gpanel__largo{margin:6px 0 10px;max-height:52vh;overflow:auto;padding-right:6px}
.gpanel__largo p{line-height:1.7;color:var(--tx2);font-size:13.3px;margin:0 0 11px}
.gpanel__largo h4{margin:16px 0 6px;font-size:14px;color:var(--tx);font-weight:800}
.gpanel__largo h4:first-child{margin-top:2px}

/* mapa: leyenda de niveles de zona */
.mleyenda{margin-top:10px;padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,#fff8fd,#fff);
  border:2px solid #fff;box-shadow:0 10px 22px -16px rgba(180,120,220,.6);display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:11.5px;color:var(--tx2)}
.mleyenda b{flex:1 0 100%;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#c22f9e}
.mleyenda span{display:flex;align-items:center;gap:5px;background:#fff;border:1.5px solid #ffe4f5;border-radius:999px;padding:3px 9px}
.mleyenda i{width:9px;height:9px;border-radius:50%;display:block}

/* restos oscuros: enciclopedia, objetos y huecos de equipo */
.enc__btn{background:#fff;border:2px solid #ffe9f7;border-radius:16px;color:var(--tx2);cursor:pointer;font:inherit;font-size:12.5px;padding:9px 12px;text-align:left;transition:transform .16s,border-color .16s,color .16s}
.enc__btn:hover{transform:translateX(3px);border-color:var(--neon-pink);color:var(--tx)}
.enc__btn.on{background:linear-gradient(100deg,#fff,#ffeef9);border-color:var(--neon-pink);color:#c22f9e;font-weight:700}
.obj__sin{background:#fff6fb;border:1.5px dashed #ffd0e8;border-radius:999px;color:#a8829b;font-size:11px;padding:3px 9px}
.slot{background:linear-gradient(180deg,#fff,#fff5fb);border:2px dashed #ffd6ee;border-radius:20px;color:var(--tx3)}
.slot.on,.slot.lleno{background:linear-gradient(180deg,#fff,#f7f0ff);border-style:solid;border-color:#e3d3ff}
.equipo .slot:hover{border-color:var(--neon-violet)}
.aegis,.prim,.seg,.tot{color:var(--tx)}
select,option{background:#fff;color:var(--tx)}
.vsdos__ficha,.vsdos__retrato{background:linear-gradient(180deg,#fff,#fff6fc);border:2px solid #fff;border-radius:22px}
.duelo__barra{background:#fff0f8}
.duelo__col h4{color:var(--tx3)}

/* cuadricula de enfrentamientos, segmentos y veredicto en pastel */
.mu{background:linear-gradient(180deg,#fff,#fff7fd);border:2px solid #fff;border-radius:20px;color:var(--tx);box-shadow:0 12px 24px -20px rgba(170,100,210,.6)}
.mu:hover{border-color:var(--neon-pink);box-shadow:0 18px 30px -18px rgba(255,79,216,.5)}
.mu__x,.mu i{background:#fff0f8;border-radius:999px;padding:2px 8px;font-size:11px;color:#a8628f;font-style:normal}
.mu b{color:var(--tx)}
.badge.v16{color:#12855a;border-color:#b6f0d2;background:linear-gradient(140deg,#dcffed,#f4fff9)}
.badge.v0625{color:#d63a68;border-color:#ffc9d8;background:linear-gradient(140deg,#ffe3ec,#fff5f8)}
.badge.v1{color:#8f7ba6;background:#fff;border-color:#f0e6f8}
.seg{display:block;height:100%;border-radius:999px}
.seg.resto{background:linear-gradient(90deg,#b8f5e0,#63c98a)}
.seg.flojo{background:linear-gradient(90deg,#ffb3c9,#ff6f8f)}
.veredicto2{margin-top:10px;padding:12px 14px;border-radius:18px;background:linear-gradient(120deg,#fff2fb,#f3ecff);border:2px solid #fff;color:var(--tx);font-size:13.5px;box-shadow:0 12px 26px -20px rgba(170,100,210,.55)}
.matchups .mu__x{color:#9c86b3}

/* mapa: contraste de las capas activas y buscador en claro */
.mlayer,.mlayer.on{color:var(--tx)}
.mlayer b,.mlayer.on b{color:#b46a9e}
.mlayer.on{background:linear-gradient(100deg,#fff,#ffeefb);border-color:var(--neon-pink);box-shadow:0 8px 18px -14px rgba(255,79,216,.6)}
.mlayer:hover{background:#fff;color:var(--tx)}
.mp__buscar input,#mq{background:#fff;border:2px solid #ffe9f7;border-radius:999px;color:var(--tx);padding:10px 14px;font:inherit;font-size:13px}
.mp__buscar input::placeholder,#mq::placeholder{color:#bda3c4}
.mp__buscar input:focus,#mq:focus{outline:none;border-color:var(--neon-pink);box-shadow:0 0 0 4px rgba(255,79,216,.14)}
.mp__nivel,select.mp__nivel{background:#fff;border:2px solid #ffe9f7;border-radius:999px;color:var(--tx);padding:9px 12px}
.mp__sug{background:#fff;border:2px solid #fff;border-radius:18px;box-shadow:0 18px 34px -18px rgba(170,100,210,.55)}
.mp__sug div{border-radius:14px;color:var(--tx)}
.mp__sug div:hover{background:#fff2fb}
.mp__lienzo{background:#f6f2fb;border:2px solid #fff;border-radius:26px;box-shadow:0 20px 40px -26px rgba(150,90,190,.55)}
.mp__pie{background:rgba(255,255,255,.92);border:2px solid #fff;color:var(--tx2)}
.mp__ctrls .btn{background:rgba(255,255,255,.94);border:2px solid #fff;color:var(--tx);box-shadow:0 10px 20px -14px rgba(170,100,210,.7)}
.mp__ctrls .btn:hover{background:#fff;border-color:var(--neon-pink);color:#c22f9e}
.mp__panel,.mp__capas{background:rgba(255,255,255,.92);border:2px solid #fff;border-radius:26px;box-shadow:0 18px 36px -26px rgba(150,90,190,.5)}
.mzona{background:#fff;border:2px solid #fff0fa;border-radius:18px;color:var(--tx)}
.mzona:hover{border-color:var(--neon-pink)}
.mzona.on{border-color:var(--neon-pink);box-shadow:0 12px 22px -16px rgba(255,79,216,.7)}
.mnombres{color:var(--tx2)}
.mleyenda b{color:#c22f9e}

/* especificidad: variantes de enfrentamiento y selectores del duelo */
.mu .mu__x{background:#fff0f8;border:2px solid #fff;color:#a8628f}
.mu.v16 .mu__x,.mu.v16 .mu__x *{color:#12855a;background:linear-gradient(140deg,#dcffed,#f4fff9);border-color:#b6f0d2}
.mu.v0625 .mu__x,.mu.v0625 .mu__x *{color:#d63a68;background:linear-gradient(140deg,#ffe3ec,#fff5f8);border-color:#ffc9d8}
.mu.v1 .mu__x,.mu.v1 .mu__x *{color:#8f7ba6;background:#fff;border-color:#f0e6f8}
.vsdos__lado select,#selA,#selB,#selD,#orden{background:#fff;border:2px solid #ffe0f4;border-radius:14px;color:var(--tx);padding:9px 12px;font:inherit;font-size:13px}

/* ==== cuadriculas de estadisticas animadas ==== */
/* al cambiar un valor, las barras se deslizan hasta el nuevo ancho (nada de saltos) */
.barra > i, .barra i, .aa__barra, .tbpot__barra > i, .tbpot__barra i, .cb__hpbar > i, .cb__hpbar i,
.prob__barra > i, .prob__barra i, .cbprob > i, .cbprob i, .tb__tanque > i, .tb__tanque i, .bar i,
.statmini i, .tier i, .vsdos__barra > i {
  transition: width .52s cubic-bezier(.2,.9,.25,1), background-color .35s ease, background .35s ease, box-shadow .35s ease;
}
/* la primera vez que aparece una barra, se rellena de cero */
@keyframes creceBarra { from { width: 0 } }
.crece { animation: creceBarra .62s cubic-bezier(.22,1,.36,1) }
/* pop rapido del numero al cambiar: una pasada y vuelta, sin oscilar */
@keyframes chiclePop { 0% { transform: scale(1) } 36% { transform: scale(1.17) } 100% { transform: scale(1) } }
.pop { animation: chiclePop .34s cubic-bezier(.22,1,.36,1) }
b.pop, span.pop, strong.pop, i.pop, em.pop { display: inline-block }
.pop--sube { color: #0f9d58 !important }
.pop--baja { color: #e0396b !important }
/* el radar: relleno y trazo suaves al recolorear */
svg.radarSvg polygon { transition: fill .3s ease, stroke .3s ease }
@media (prefers-reduced-motion: reduce) {
  .pop, .crece { animation: none }
  .barra i, .aa__barra, .tbpot__barra i, .cb__hpbar i, .prob__barra i { transition: none }
}
/* ==== fin cuadriculas animadas ==== */

/* ==== galeria de formas y variantes (ficha) ==== */
.varcard { padding: 12px 14px 14px; }
.varcard__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px }
.varcard__cab h3 { font-size: 15px }
.varfiles { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin }
.varfig { flex: 0 0 auto; width: 92px; background: linear-gradient(180deg,#fff,#fff6fc); border: 2px solid #ffe6f6;
  border-radius: 18px; padding: 6px 6px 7px; cursor: pointer; font: inherit; color: var(--tx2); display: flex;
  flex-direction: column; align-items: center; gap: 5px; transition: transform .16s cubic-bezier(.22,1,.36,1), border-color .16s, box-shadow .2s }
.varfig:hover { transform: translateY(-3px) }
.varfig.on { border-color: var(--neon-pink); box-shadow: 0 10px 22px -12px rgba(255,79,216,.75); color: var(--tx) }
.varfig__foto { position: relative; width: 100%; height: 92px; border-radius: 13px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 30%, #fff 0%, #ffeef8 100%); display: flex; align-items: center; justify-content: center }
.varfig__foto img { max-width: 100%; max-height: 100%; object-fit: contain }
.varfig__play { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--neon-pink); color: #fff; font-size: 9px; font-style: normal; display: flex; align-items: center;
  justify-content: center; box-shadow: 0 2px 6px rgba(255,79,216,.5) }
.varfig__nombre { font-size: 10.5px; line-height: 1.15; text-align: center; font-weight: 600 }
.varcard__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2px }
.varcard__desc { margin: 0; font-size: 12.5px; color: var(--tx2); flex: 1 1 320px; line-height: 1.45 }
.varcard__btns { display: flex; gap: 8px; flex: 0 0 auto }
.iv__vid { width: 100%; height: 100%; object-fit: contain; border-radius: 20px }
@media (max-width: 520px) { .varfig { width: 84px } .varfig__foto { height: 74px } }
/* ==== fin galeria de variantes ==== */

/* pie del visor: pastilla legible sobre la imagen o el video */
.iv__pie { background: rgba(255, 255, 255, .92) !important; color: var(--tx2) !important; border: 2px solid #fff;
  border-radius: 999px; padding: 5px 12px !important; box-shadow: 0 8px 18px -10px rgba(160, 90, 200, .6);
  font-size: 11.5px !important; max-width: calc(100% - 20px); text-align: center }
/* nombres de variante: dos lineas como mucho, sin cortar palabras a lo bruto */
.varfig__nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 24px; font-size: 10px; letter-spacing: .1px }
.varfig { width: 96px }
/* ==== fin pie del visor ==== */

/* chapita de variantes en las tarjetas del Aniidex */
.varbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: #a8388f;
  background: linear-gradient(180deg, #fff0fa, #ffe6f7); border: 1.5px solid #ffd0ec; border-radius: 999px;
  padding: 1px 7px; box-shadow: 0 4px 10px -6px rgba(255, 79, 216, .8) }
/* ==== fin chapita de variantes ==== */

/* chapitas de forma: se pueden pulsar y llevan a la variante */
.tag--forma { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease }
.tag--forma:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -10px rgba(255, 79, 216, .9) }
/* ==== fin chapitas de forma ==== */

/* ==== tipografia chicle: titulos redondeados, cuerpo Inter ==== */
:root { --font-chicle: 'Fredoka', 'Baloo 2', 'Inter', system-ui, sans-serif }
.brand b, .brand span, h1, h2, h3, .card h3, .detalle h2, .marca b,
.cb__nom, .aa__k, .tb__cab b, .enc__btn, .mlayer b, .titulo, #titulo {
  font-family: var(--font-chicle) !important;
  letter-spacing: .1px;
}
.brand b, h1, #titulo { font-weight: 600 }
h2, h3, .card h3 { font-weight: 600 }
.mvarios, .pie, .hint, p, td, th, input, select, button { font-family: inherit }

/* barras del perfil a Lv 70 (cuando el indice no publica el desglose base) */
.barra > i.barra--70 { background: linear-gradient(90deg,#9fe8ff,#a86bff); box-shadow: 0 0 8px rgba(168,107,255,.35) }

/* ==== modo twining: pie del visor sin montarse sobre el arte + hud kawaii ==== */
.inm__visor { position: relative }
.inm__visorpie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border-top: 0;
  padding: 34px 16px 12px; align-items: center; flex-wrap: nowrap;
  background: linear-gradient(180deg, rgba(6,9,16,0) 0%, rgba(6,9,16,.82) 46%, rgba(6,9,16,.97) 100%) }
.inm__visorpie > .btn { white-space: nowrap; flex: 0 0 auto }
.inm__visorpie > .hint { flex: 0 0 auto; text-align: right; max-width: 190px; line-height: 1.25 }
.inm__vsel { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%;
  padding: 2px 2px 6px; scrollbar-width: thin }
.inm__vsel::-webkit-scrollbar { height: 7px }
.inm__vsel::-webkit-scrollbar-thumb { background: rgba(255,79,216,.5); border-radius: 999px }
.vsel { white-space: nowrap; font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  padding: 5px 11px; border-radius: 999px; color: var(--tx2);
  background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.13); transition: transform .12s, box-shadow .2s }
.vsel:hover { transform: translateY(-1px); color: #fff }
.vsel.on { color: #fff; border-color: rgba(255,255,255,.85);
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet));
  box-shadow: 0 8px 18px -10px rgba(255,79,216,.95) }
.inm__barra { background: linear-gradient(90deg, rgba(255,79,216,.18), rgba(37,223,255,.12));
  border-bottom: 2px solid rgba(255,79,216,.22) }
.inm__hud { background: linear-gradient(180deg, #1c1428, #120d1c); border-left: 2px solid rgba(255,79,216,.22) }
.inm__pasos > li, .inm__statscaja { background: rgba(255,255,255,.055); border: 2px solid rgba(255,255,255,.09); border-radius: 18px }
.inm__pasos h4 b { background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: #fff }
.inm__titulo h1 { font-family: 'Fredoka', 'Baloo 2', Inter, system-ui, sans-serif; letter-spacing: 0 }

/* ==== galeria de formas y variantes ==== */
.galfiltros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px }
.galfiltros .chips { margin: 0 }
.galfiltros .chip b { color: var(--neon-pink) }
.galfiltros input { border-radius: 999px; background: #fff; border: 2px solid #ffe0f4; padding: 9px 14px;
  font: inherit; font-size: 13px; color: var(--tx); outline: none; width: 100%; max-width: 420px }
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px }
.galcard { display: flex; flex-direction: column; gap: 4px; align-items: center; cursor: pointer; font: inherit;
  padding: 9px 8px 10px; border-radius: 22px; text-align: center; color: var(--tx);
  background: linear-gradient(180deg, #fff, #fff7fc); border: 2px solid #fff;
  box-shadow: 0 12px 24px -18px rgba(160, 90, 200, .6); transition: transform .14s cubic-bezier(.2,.9,.25,1), box-shadow .2s }
.galcard:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -16px color-mix(in srgb, var(--c) 55%, transparent) }
.galcard__foto { position: relative; width: 100%; height: 132px; border-radius: 16px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(72% 72% at 50% 28%, #fff 0%, color-mix(in srgb, var(--c) 14%, #fff) 100%) }
.galcard__foto img { max-width: 100%; max-height: 100%; object-fit: contain }
.galcard__play { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet)); color: #fff; font-size: 9px;
  font-style: normal; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(255,79,216,.5) }
.galcard b { font-size: 12.5px; line-height: 1.2 }
.galcard small { font-size: 10.5px; color: var(--tx2) }
.galcard em { font-size: 10px; color: var(--tx3); font-style: normal }

/* el visor: imagen o animacion, pero siempre algo visible */
.iv__vid[hidden], .iv__img[hidden] { display: none !important }
.iv--lista .iv__img { opacity: 1 }
.iv__vid { background: transparent }

/* ==== RADAR VIVO (hexagono de stats) ==== */
svg.radarSvg { overflow: visible }
.radarAnillo { fill: none; stroke: rgba(150, 118, 196, .30); stroke-width: 1.15 }
.radarEje { stroke: rgba(150, 118, 196, .26); stroke-width: 1.15 }
.radarBase { fill: rgba(120, 112, 150, .07); stroke: #8b86a6; stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8 }
.radarPoli { transition: fill .35s ease, stroke .35s ease; filter: drop-shadow(0 6px 12px rgba(160, 90, 200, .26)) }
.radarLbl { fill: #6d6484; font-weight: 700; letter-spacing: .3px }
.radarPt { filter: drop-shadow(0 1px 2px rgba(90, 40, 120, .28)) }
.rdleyenda { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap;
  font-size: 11.5px; color: var(--tx2, #6d6484); margin-top: 2px }
.rdleyenda span { display: inline-flex; align-items: center; gap: 5px }
.rdleyenda i { width: 18px; height: 9px; border-radius: 3px; background: currentColor; opacity: .55; display: inline-block }
.rdleyenda .base i { background: none; border-top: 2.4px dashed currentColor; height: 0; border-radius: 0; opacity: .9 }
/* ==== fin radar vivo ==== */
/* ============ MODO TWINING: escena de producto ============ */
.inm {
  background:
    radial-gradient(120% 90% at 50% 3%, #33205a 0%, #1b1230 46%, #0a0713 100%) !important;
}
.inm__visor { padding-bottom: 104px }
.inm__visor .iv__img { left: 6% !important; top: 2% !important; width: 88% !important; height: 88% !important }
.inm__visor .iv__vid { inset: 2% 6% !important; width: 88% !important; height: 88% !important }
.iv__halo { opacity: .6; filter: blur(46px) }
.inm__visorpie {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 52px 18px 12px; border-top: 0;
  background: linear-gradient(180deg, rgba(10,7,19,0) 0%, rgba(10,7,19,.74) 40%, rgba(10,7,19,.97) 100%);
}
.inm__pie { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding-top: 2px }
.inm__pie .hint { font-size: 11px; opacity: .78; text-align: center; margin: 0 }
.inm__vsel { display: flex; gap: 7px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 8px;
  max-width: 100%; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch }
.inm__vsel::-webkit-scrollbar { height: 6px }
.inm__vsel::-webkit-scrollbar-thumb { background: rgba(255,79,216,.45); border-radius: 999px }
.vsel { flex: 0 0 auto; scroll-snap-align: center }
.vsel.on { box-shadow: 0 10px 22px -10px rgba(255,79,216,.95) }
.iv--cargando::after {
  content: ''; position: absolute; left: 50%; bottom: 128px; width: 32px; height: 32px; margin-left: -16px;
  border-radius: 50%; border: 3px solid rgba(255,255,255,.22); border-top-color: #ff4fd8;
  animation: girarCarga .8s linear infinite; z-index: 7;
}
@keyframes girarCarga { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .iv--cargando::after { animation: none } }
/* barra superior del twining: contraste sobre el fondo oscuro */
.inm__barra { background: linear-gradient(90deg, rgba(20,12,36,.85), rgba(12,9,24,.72)) !important;
  border-bottom: 2px solid rgba(255,79,216,.28) !important; backdrop-filter: blur(10px) }
.inm__barra, .inm__barra * { color: #f4eeff !important }
.inm__barra .hint, .inm__barra small { color: rgba(244,238,255,.72) !important }
.inm__barra .tag { background: rgba(255,255,255,.12) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) }
.inm__barra h1, .inm__barra h2 { text-shadow: 0 2px 12px rgba(0,0,0,.55) }
.inm__total b { color: #ffd6f4 !important; text-shadow: 0 2px 14px rgba(255,79,216,.5) }
/* ---------- reproductor de animaciones: espacio propio, sin tapar el arte ---------- */
.animOv { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(90% 70% at 50% 10%, rgba(140,90,220,.50), rgba(10,6,20,.90) 68%), rgba(8,5,16,.86);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); animation: animEntra .22s ease-out }
@keyframes animEntra { from { opacity: 0 } to { opacity: 1 } }
.animOv__caja { position: relative; width: min(1040px, 96vw); height: min(90vh, 980px); max-height: 96vh; display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 12px; border-radius: 26px; background: linear-gradient(180deg, #fff 0%, #fbf4ff 100%);
  box-shadow: 0 34px 90px -28px rgba(60,20,90,.6) }
.animOv__x { position: absolute; top: 12px; right: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .4px; color: #7a6699; background: #f3e9ff; border: 2px solid #eadcff }
.animOv__x:hover { color: #fff; background: linear-gradient(135deg, #ff4fd8, #a86bff); border-color: transparent }
.animOv__tit { display: flex; align-items: baseline; gap: 9px; padding-right: 96px; flex-wrap: wrap }
.animOv__tit b { font-family: Fredoka, "Baloo 2", Inter, system-ui, sans-serif; font-size: 21px; color: #3d2b57 }
.animOv__tit span { font-size: 12.5px; color: #7d6b9c; font-weight: 600 }
.animOv__lienzo { flex: 1 1 auto; min-height: 0 !important; display: grid; place-items: center; border-radius: 20px; overflow: hidden;
  background: radial-gradient(72% 62% at 50% 42%, #f1dcff 0%, #f9f3ff 58%, #ffffff 100%);
  box-shadow: inset 0 0 0 2px rgba(180,150,220,.16) }
.animOv__lienzo { min-height: 0 }
.animOv__vid { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain;
  min-width: min(100%, 480px); transform: scale(1); image-rendering: auto;
  filter: drop-shadow(0 22px 32px rgba(96,44,150,.3)) }
@media (min-width: 900px) { .animOv__vid { min-width: 0 } }
.animOv__pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin }
.animOv__pills::-webkit-scrollbar { height: 7px }
.animOv__pills::-webkit-scrollbar-thumb { background: rgba(168,107,255,.45); border-radius: 999px }
.apill { flex: 0 0 auto; padding: 6px 13px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #6b5b8a; background: #fff; border: 2px solid #ecdefe; transition: transform .12s, box-shadow .2s }
.apill:hover { transform: translateY(-1px) }
.apill.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff4fd8, #a86bff);
  box-shadow: 0 10px 22px -12px rgba(255,79,216,.95) }
.animOv__pie { font-size: 11px; color: #8a7aa8; text-align: center }

/* ================= movil, tableta y tacto (global) ================= */
.menuBtn { display: none }
.velo { display: none }
@media (max-width: 1000px) {
  .app { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; padding: 10px }
  .side { background: linear-gradient(180deg, #fff 0%, #fdf7ff 60%, #f7f1ff 100%) !important;
           position: fixed; left: 0; top: 0; bottom: 0; width: min(86vw, 320px); z-index: 960;
    border-radius: 0 26px 26px 0; transform: translateX(-104%);
    transition: transform .3s cubic-bezier(.2,.8,.2,1); overflow-y: auto;
    box-shadow: 0 30px 70px -30px rgba(60,20,90,.55) }
  .app--menu .side { transform: none }
  .velo { display: block; position: fixed; inset: 0; z-index: 950; opacity: 0; pointer-events: none;
    background: rgba(46,24,70,.38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: opacity .25s ease }
  .velo.abierto { opacity: 1; pointer-events: auto }
  .menuBtn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 14px; font-size: 20px; line-height: 1; cursor: pointer;
    background: #fff; border: 2px solid var(--line); color: var(--tx) }
  .topbar { padding: 10px 12px; gap: 9px; flex-wrap: nowrap; align-items: center }
  .topbar h1 { font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .topbar .sub { display: none }
  .topbar .spacer { display: none }
  .vista { padding: 12px 12px 80px }
  .fichas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px }
  .inm__cuerpo, .inm { grid-template-columns: minmax(0,1fr) !important }
  .inm__hud { max-height: 46vh }
  .talleres, .tb__izq, .tb__der, .cb__grid, .mp__cuerpo, .gui__grid, .gpanel__cuerpo { grid-template-columns: minmax(0,1fr) !important }
  .inm { grid-template-columns: minmax(0,1fr) !important; grid-template-rows: auto auto 1fr !important;
    grid-template-areas: 'barra' 'visor' 'hud' !important }
  .inm__hud { border-left: 0 !important; border-top: 2px solid rgba(255,79,216,.22); max-height: 48vh }
  .inm__barra { flex-wrap: wrap; gap: 8px }
  .animOv { padding: 10px }
  .animOv__caja { padding: 12px 12px 8px; border-radius: 22px; gap: 6px; height: min(92vh, 900px) }
  .animOv__lienzo { min-height: 0 }
  .animOv__vid { max-height: 100%; min-width: 0 }
}
@media (max-width: 560px) {
  .fichas { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px }
  .topbar h1 { font-size: 15.5px }
}
/* dedos: objetivos comodos y sin efectos que solo funcionan con raton */
@media (pointer: coarse) {
  .nav button { min-height: 48px; font-size: 14.5px }
  .btn, .chip, .vsel, .apill, .pillnum, .tb__pill { min-height: 42px }
  .chip { padding: 7px 13px }
  .ficha:hover { transform: none }
  input[type=range] { height: 30px }
}
/* botones de zoom (mapa y modo twining) para tacto */
.zoomBtns { position: absolute; right: 10px; bottom: 10px; z-index: 7; display: flex; flex-direction: column; gap: 7px }
.zoomBtns button { width: 44px; height: 44px; border-radius: 14px; font-size: 20px; font-weight: 800; cursor: pointer;
  background: rgba(255,255,255,.94); border: 2px solid #eadcff; color: #4a3766; box-shadow: 0 10px 22px -12px rgba(80,40,120,.6) }
.zoomBtns button:active { transform: scale(.95) }
/* ---------- fluidez 240 Hz: trabajo por fotograma minimo ---------- */
.pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 2px; border-top: 1px solid var(--line); margin-top: 8px }
.pie__fluidez { font-weight: 800; font-size: 11.5px; letter-spacing: .2px; color: #2fae7a }
.pie__nota { opacity: .5; font-size: 10.5px }

/* listas largas: el navegador solo pinta lo visible (menos trabajo por fotograma) */
.ficha, .galcard, .cri, .obj, .entrada { content-visibility: auto; contain-intrinsic-size: 210px }
.galcard { contain-intrinsic-size: 190px }

/* animaciones: solo transform/opacity; la capa se reserva solo al pasar el raton */
.ficha:hover, .galcard:hover, .tb__caja:hover, .carta:hover { will-change: transform }

/* el halo del visor: degradado en vez de desenfoque real (mucho mas barato a 240 Hz) */
.iv__halo, .inm__halo { filter: none !important;
  background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,214,247,.55) 55%, rgba(255,182,240,0) 100%) !important }

/* en pantallas de 120 Hz o mas, transiciones algo mas vivas pero sin vibracion */
@media (min-resolution: 2dppx) { .ficha { transition: transform .16s ease-out } }
/* la barra superior y las barras fijas: fondo solido en vez de desenfoque en vivo
   (el desenfoque se recalcula en cada fotograma al desplazar; a 240 Hz se nota) */
.topbar, .barra, header.topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
.topbar { background: linear-gradient(180deg, #ffffff, #fdf4ff) !important }
.inm__barra { -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(180deg, #2a1440, #241035) !important }
.pie__fijo { -webkit-backdrop-filter: none !important; backdrop-filter: none !important }

/* --- conmutador Animacion / Modelo 3D y lienzo del visor --- */
/* (aqui habia declaraciones sin selector: un fondo claro viejo del visor, que ya
   se pinta oscuro mas abajo con !important. Al sobrar una llave, este fichero
   quedaba desequilibrado y el navegador se saltaba reglas. Retirado.) */
.animOv__cargando{position:absolute;inset:0;display:grid;place-items:center;color:#7a5aa0;font-weight:700}
.animOv__lienzo[hidden], #aVidWrap[hidden] { display: none !important }
/* ---------- escenario de animacion: fondo oscuro, como el propio juego ---------- */
.animOv__lienzo {
  background: radial-gradient(circle at 50% 22%, #2b1b46 0%, #1b1130 55%, #120c22 100%) !important;
  box-shadow: inset 0 0 90px -20px rgba(255, 79, 216, .25), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.animOv__lienzo::before {
  content: ''; position: absolute; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,79,216,.16), rgba(37,223,255,.10) 45%, transparent 70%);
  filter: blur(38px); pointer-events: none;
}
.animOv__lienzo { position: relative; isolation: isolate }
.animOv__vid {
  position: relative; z-index: 1; border-radius: 16px;
  background: #000; box-shadow: 0 22px 60px -26px rgba(0, 0, 0, .8);
}
.animOv__pie { color: #b6a4d4 !important }
.animOv__tit b { color: #3d2b57 }
/* el clip siempre entero dentro de su marco: sin recortes ni desbordes */
.animOv__lienzo { display: flex !important; align-items: center; justify-content: center;
  min-height: 0 !important; overflow: hidden }
.animOv__vid { width: 100% !important; height: 100% !important; max-width: 100% !important;
  max-height: 100% !important; object-fit: contain !important; background: transparent !important;
  border-radius: 14px; box-shadow: none !important }
@media (max-width: 900px) { .animOv__vid { width: 100% !important; height: 100% !important } }
/* el negro del propio clip se funde con el escenario: sin bandas ni bordes duros */
.animOv__lienzo {
  background: radial-gradient(120% 90% at 50% 45%, #000 0%, #000 52%, #1a1030 78%, #150c26 100%) !important;
  box-shadow: inset 0 0 70px -18px rgba(255, 79, 216, .22) !important;
}
.animOv__vid {
  -webkit-mask-image: radial-gradient(115% 115% at 50% 50%, #000 62%, rgba(0,0,0,.85) 78%, transparent 100%);
  mask-image: radial-gradient(115% 115% at 50% 50%, #000 62%, rgba(0,0,0,.85) 78%, transparent 100%);
}
.animOv__caja { height: min(86vh, 940px) !important; padding-bottom: 16px !important }
.animOv__pills { padding-bottom: 4px }
/* las filas de abajo no se encogen nunca (antes se aplastaban a 16 px) */
.animOv__pills { flex: 0 0 auto !important; min-height: 42px; align-items: center; overflow: visible !important }
.animOv__pills button { flex: 0 0 auto !important; white-space: nowrap }
.animOv__pie { flex: 0 0 auto !important; min-height: 16px }
.animOv__tit { flex: 0 0 auto !important }
/* aviso cuando una forma no tiene animacion publicada */
.animOv__aviso { position: absolute; inset: auto 0 auto 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 14px; font-weight: 600; color: #d8c7f2; padding: 0 24px; }
.animOv__aviso[hidden] { display: none !important }

/* a11y: chips — el texto con color de elemento se mezcla con un tono oscuro para pasar 4.5:1 */
.chip { color: color-mix(in oklab, var(--c, #3d2b57) 52%, #2a1440) !important;
        border-color: color-mix(in srgb, var(--c, #d9c8f5) 34%, #cfc4e8) !important }
.chip.on { color: #fff !important;
           background: color-mix(in srgb, var(--c, #5aa9f0) 30%, #191029) !important }
.evo { color: color-mix(in oklab, var(--c, #3d2b57) 62%, #2a1440) !important }
.ficha__elems span, .st-el { color: color-mix(in oklab, var(--c, #3d2b57) 52%, #2a1440) !important }

/* a11y 2: el texto con color saturado sobre fondo claro se oscurece conservando el tono.
   El color sigue mandando en puntos, bordes y fondos, pero el texto queda legible. */
.rol, .tag, .chip, .chip b, .badge, .st-el, td, button[data-m], button[data-m] > span,
button[data-k], .vs__els .rol, .cb__lado .sl span, .sl span, .evt, .tb td, .tipo, .ele, .meta b {
  color: color-mix(in oklab, currentColor 55%, #241238);
}
/* con !important solo donde otras reglas pisan el color */
.rol, .tag, .st-el, td[title], button[data-m], button[data-k], .badge, .chip b {
  color: color-mix(in oklab, currentColor 55%, #241238) !important;
}.rol, .tag, .st-el, td[title], button[data-m], button[data-k], .badge, .chip b {
  color: color-mix(in oklab, currentColor 55%, #241238) !important;
}
.chips *:not(.on), .chips *:not(.on) *, .chip:not(.on) span, .chip:not(.on) i, .sl:not(.on),
.sl:not(.on) *, .vs__els *:not(.on), .eq *:not(.on), .tira *:not(.on), .fila *:not(.on),
.leg *:not(.on), .mapa__leyenda *:not(.on), .varfig:not(.on) span, .apill:not(.on) *,
.pestana:not(.on) *, .mini *:not(.on), .tarjeta *:not(.on), .stat *:not(.on), .kpi *:not(.on) {
  color: color-mix(in oklab, currentColor 50%, #1c1030) !important;
}
.chip.on, .chip.on *, .apill.on, .apill.on *, .pestana.on, .pestana.on *, .varfig.on span {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(20, 8, 40, .45);
}
/* badges de la version del juego: los tres tonos a 4.5:1 sobre su fondo real */
.badge.v1 { color: #6d5588 !important }
.badge.v0625 { color: #a82750 !important }
.badge.v16 { color: #0c6a47 !important }

/* a11y 3: contenedores con scroll horizontal accesibles por teclado */
.chips, .tabla-scroll, .mp__panel { }
.chips:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px }

/* ===================== Acceso kawaii: aniimo chicle ===================== */
body.con-acceso { overflow: hidden }
.acceso {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(900px 620px at 12% 8%, #ffe4f5 0%, rgba(255, 228, 245, 0) 62%),
    radial-gradient(820px 700px at 88% 14%, #d8ecff 0%, rgba(216, 236, 255, 0) 60%),
    radial-gradient(900px 700px at 50% 112%, #e6dcff 0%, rgba(230, 220, 255, 0) 62%),
    linear-gradient(162deg, #fff8fe 0%, #f3f7ff 46%, #fdf1ff 100%);
  transition: opacity .6s ease, transform .6s ease;
}
.acceso.saliendo { opacity: 0; transform: scale(1.035) }
.acceso__fondo { position: absolute; inset: 0; overflow: hidden; pointer-events: none }
.acceso .b {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, rgba(255, 255, 255, .18) 46%, var(--c) 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .8), 0 8px 18px rgba(160, 120, 200, .14);
  animation: acFlota var(--d) ease-in-out infinite; will-change: transform;
}
@keyframes acFlota {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1) }
  50% { transform: translate3d(var(--x), var(--y), 0) scale(1.09) }
}
.acceso__destello { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; animation: acPulso 9s ease-in-out infinite }
.acceso__destello.a { width: 320px; height: 320px; left: -60px; top: 8%; background: #ffc8ea }
.acceso__destello.b { width: 280px; height: 280px; right: -40px; top: 14%; background: #bfe3ff; animation-delay: -3s }
.acceso__destello.c { width: 360px; height: 360px; left: 26%; bottom: -90px; background: #d9c9ff; animation-delay: -6s }
@keyframes acPulso { 0%, 100% { transform: scale(1); opacity: .46 } 50% { transform: scale(1.14); opacity: .68 } }

.acceso__marco { position: relative; width: min(94vw, 620px); display: grid; place-items: center }
.acceso__aro {
  position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, #ffb3e6, #a9d8ff, #ffe6a7, #c9b6ff, #a9f0d8, #ffb3e6);
  filter: blur(16px); opacity: .7; animation: acGira 14s linear infinite;
}
@keyframes acGira { to { transform: rotate(1turn) } }
.acceso__tarjeta {
  position: relative; width: min(88vw, 500px); padding: 44px 30px 26px;
  border-radius: 46% 46% 42% 42% / 40% 40% 34% 34%;
  background: linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(255, 250, 255, .92));
  box-shadow: 0 26px 60px rgba(150, 90, 190, .22), inset 0 0 0 1.5px rgba(255, 255, 255, .95),
    inset 0 -24px 44px rgba(255, 214, 240, .4);
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}

/* mascota: bicho vivo, sin temblores */
.mascota { width: 126px; margin: -88px auto 0; position: relative; z-index: 2 }
.mascota__svg { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(150, 110, 200, .24)) }
.mascota__cuerpo { transform-origin: 100px 168px; animation: acBota 3.4s ease-in-out infinite }
@keyframes acBota {
  0%, 100% { transform: translateY(0) scale(1, 1) }
  46% { transform: translateY(-8px) scale(.986, 1.02) }
}
.mascota__ojos { transform-origin: 100px 106px; animation: acParpadea 5.2s ease-in-out infinite }
@keyframes acParpadea { 0%, 93%, 100% { transform: scaleY(1) } 96% { transform: scaleY(.09) } }
.mascota__cola { transform-origin: 152px 130px; animation: acCola 3.1s ease-in-out infinite }
@keyframes acCola { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-9deg) } }
.mascota__brillo { transform-origin: 100px 100px; animation: acBrilla 4.6s ease-in-out infinite }
@keyframes acBrilla { 0%, 100% { opacity: .55; transform: scale(.96) } 50% { opacity: 1; transform: scale(1.05) } }
.mascota__boca { animation: acSonrie 4.2s ease-in-out infinite }

.acceso__marca {
  margin: 6px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: #b98cd8;
}
.acceso__titulo { margin: 2px 0 0; font-size: clamp(1.15rem, 3.4vw, 1.5rem); font-weight: 800; color: #3a2650; letter-spacing: -.01em }
.acceso__sub { margin: 0 0 6px; font-size: .83rem; color: #7a6795 }
.acceso__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px }
.acceso__etq { align-self: flex-start; margin-left: 6px; font-size: .74rem; font-weight: 700; color: #8a76a8 }
.acceso__campo {
  width: 100%; padding: 14px 18px; border-radius: 999px; border: 2px solid #ffd9ef; background: #fff;
  font: inherit; font-size: 1rem; color: #3a2b52; text-align: center;
  transition: border-color .18s ease, box-shadow .2s ease;
}
.acceso__campo::placeholder { color: #b9a9cd }
.acceso__campo:focus { border-color: #ff9ad8; box-shadow: 0 0 0 4px rgba(255, 154, 216, .18); outline: none }
.acceso__campo.falta { border-color: #ff8fa8; box-shadow: 0 0 0 4px rgba(255, 143, 168, .18) }
.acceso__ayuda { margin: 0; font-size: .72rem; color: #9b8ab5; min-height: 1.1em }
.acceso__avatares { border: 0; margin: 2px 0 0; padding: 0; width: 100% }
.acceso__avatares legend { font-size: .74rem; font-weight: 700; color: #8a76a8; padding: 0 4px; margin-bottom: 6px }
.acceso__rejilla { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px }
.av {
  display: grid; justify-items: center; gap: 3px; padding: 7px 3px 5px; border-radius: 17px;
  border: 2px solid #ffe4f5; background: #fff; cursor: pointer; font: inherit;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.2), border-color .18s, box-shadow .22s;
}
.av img { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 30%, #fff, #f3ecff) }
.av span { font-size: 10.5px; font-weight: 700; color: #6d5588; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.av:hover { transform: translateY(-2px); border-color: #ffc9e8 }
.av.on { border-color: #ff9ad8; box-shadow: 0 0 0 3px rgba(255, 154, 216, .26), 0 8px 18px rgba(200, 150, 230, .22); transform: translateY(-2px) }
.av.on img { background: radial-gradient(circle at 50% 30%, #fff, #ffe9f8) }
.acceso__entrar {
  width: 100%; margin-top: 10px; padding: 15px 20px; border: 0; border-radius: 999px; font: inherit;
  font-weight: 800; font-size: 1.02rem; color: #fff; cursor: pointer;
  background: linear-gradient(120deg, #ff8fd4, #b98cff 55%, #7fc8ff);
  box-shadow: 0 14px 30px rgba(190, 120, 240, .32), inset 0 1px 0 rgba(255, 255, 255, .5);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: transform .2s cubic-bezier(.2, .9, .25, 1.25), box-shadow .22s ease;
}
.acceso__entrar svg { width: 20px; height: 20px }
.acceso__entrar:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 18px 38px rgba(190, 120, 240, .42) }
.acceso__entrar:active { transform: translateY(1px) scale(.985) }
.acceso__invitado {
  margin-top: 2px; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700;
  color: #8a76a8; cursor: pointer; padding: 7px 10px; border-radius: 999px;
  transition: color .18s, background .18s;
}
.acceso__invitado:hover { color: #6b4f8a; background: #f7f0ff }
.acceso :focus-visible { outline: 3px solid #b98cff; outline-offset: 3px; border-radius: 12px }

@media (max-width: 620px) {
  .acceso__tarjeta { width: min(93vw, 420px); border-radius: 34px; padding: 38px 17px 20px }
  .mascota { width: 100px; margin-top: -74px }
  .acceso__rejilla { gap: 7px }
  .av { border-radius: 15px; padding: 6px 2px 4px }
  .av img { width: 38px; height: 38px }
  .av span { font-size: 9.5px }
  .acceso__entrar { padding: 14px 16px; font-size: .97rem }
}
@media (max-height: 700px) and (min-width: 621px) {
  .acceso__tarjeta { padding-top: 30px }
  .mascota { width: 92px; margin-top: -62px }
}
@media (prefers-reduced-motion: reduce) {
  .acceso *, .acceso__aro, .mascota * { animation: none !important; transition: none !important }
  .acceso .b { opacity: .4 }
}

/* ficha de perfil en la barra lateral */
.perfil { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 4px 6px 8px;
  border-radius: 16px; background: linear-gradient(140deg, #fff, #fdf1ff); border: 2px solid #ffe4f5;
  box-shadow: 0 8px 20px -14px rgba(170, 110, 210, .5) }
.perfil__av { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; flex: none;
  background: radial-gradient(circle at 50% 30%, #fff, #f3ecff) }
.perfil__datos { min-width: 0; display: flex; flex-direction: column; gap: 1px }
.perfil__hola { font-size: 12.5px; font-weight: 800; color: #4d3468; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.perfil__cam { border: 0; background: none; font: inherit; font-size: 10.5px; font-weight: 700; color: #a08cc0;
  cursor: pointer; padding: 2px 6px; border-radius: 999px; align-self: flex-start; transition: color .18s, background .18s }
.perfil__cam:hover { color: #6b4f8a; background: #f5ecff }

/* --- refinado del acceso kawaii --- */
.acceso__marco::before {
  content: ""; position: absolute; inset: -7%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 50% 45%, rgba(255, 180, 235, .42), rgba(170, 215, 255, .3) 46%, rgba(200, 180, 255, .16) 66%, transparent 76%);
  filter: blur(14px);
}
.acceso__aro {
  width: calc(100% - 10px);
  background: conic-gradient(from 0deg, #ff9ad8, #7fc8ff, #ffe07a, #b28cff, #6fe6c0, #ff9ad8);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 17px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 22px), #000 calc(100% - 17px));
  filter: blur(7px) saturate(1.15); opacity: .9; animation: acGira 18s linear infinite;
}
.acceso .b {
  background: radial-gradient(circle at 34% 28%, #fff 0%, rgba(255, 255, 255, .5) 30%, var(--c) 78%, color-mix(in srgb, var(--c) 70%, #fff) 100%);
  box-shadow: inset -3px -5px 12px rgba(255, 255, 255, .75), inset 3px 5px 14px color-mix(in srgb, var(--c) 55%, transparent),
    0 10px 22px color-mix(in srgb, var(--c) 35%, transparent);
  opacity: .78;
}
.acceso__tarjeta {
  padding: 66px 30px 26px;
  background: linear-gradient(162deg, #fff 0%, #fffafd 38%, #fdf1ff 72%, #f6f2ff 100%);
  box-shadow: 0 26px 60px rgba(150, 90, 190, .22), 0 0 0 1.5px rgba(255, 196, 236, .55),
    0 0 26px rgba(255, 190, 235, .3), inset 0 -26px 46px rgba(255, 214, 240, .45);
}
.acceso__tarjeta::after {
  content: ""; position: absolute; inset: 12px; border-radius: inherit; pointer-events: none;
  border: 2px dashed rgba(255, 178, 226, .62);
}
.mascota { width: 158px; margin: -112px auto -4px }
.acceso__viajero { position: absolute; pointer-events: none; opacity: .9 }

@media (max-width: 620px) {
  .acceso__tarjeta { padding: 48px 17px 20px }
  .mascota { width: 108px; margin: -82px auto -2px }
  .acceso__aro { -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 12px)) }
}

.acceso__viajero { animation: acChispaGira 6.5s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgba(200, 140, 220, .35)) }
@keyframes acChispaGira {
  0%, 100% { transform: translateY(0) rotate(-6deg) scale(.94); opacity: .58 }
  50% { transform: translateY(-13px) rotate(8deg) scale(1.06); opacity: .95 }
}
@media (prefers-reduced-motion: reduce) { .acceso__viajero { animation: none; opacity: .7 } }

/* aviso kawaii de bienvenida */
.btz {
  position: fixed; left: 50%; bottom: 26px; z-index: 8500; transform: translate(-50%, 26px) scale(.96);
  display: flex; align-items: center; gap: 11px; padding: 11px 20px 11px 12px; border-radius: 999px;
  background: linear-gradient(125deg, #fff, #fff3fb 55%, #f2f6ff);
  border: 1.5px solid #ffd9ef; box-shadow: 0 18px 40px rgba(160, 100, 200, .24), 0 0 0 4px rgba(255, 214, 240, .35);
  opacity: 0; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .25, 1.25);
  font-size: .9rem; color: #4a3a63; max-width: min(92vw, 520px);
}
.btz.on { opacity: 1; transform: translate(-50%, 0) scale(1) }
.btz__av { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 30%, #fff, #f4ecff); flex: none }
.btz__av--vacio { display: grid; place-items: center; font-size: 18px; color: #b98cff }
.btz b { color: color-mix(in oklab, #7c4bd0 60%, #1c1030) }
@media (prefers-reduced-motion: reduce) { .btz { transition: opacity .3s ease } }

/* .etag: fondo oscuro del color del elemento -> tinta clara (nunca oscurecer) */
.etag, .etag b, .etag span {
  background: color-mix(in srgb, var(--c, #7fd0ff) 15%, #fff) !important;
  border-color: color-mix(in srgb, var(--c, #7fd0ff) 32%, #fff) !important;
  color: color-mix(in oklab, var(--c, #7fd0ff) 44%, #1c1030) !important;
}

/* ===================== Pelea por turnos (estadio kawaii) ===================== */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.pelea { display: flex; flex-direction: column; gap: 12px }
.pelea__barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap }
.pelea__turno { font-weight: 800; color: #5c4b7a; font-size: .92rem }
.pelea__escena { position: relative; overflow: hidden; border-radius: 22px; min-height: min(58vh, 470px);
  background: linear-gradient(180deg, #eef4ff 0%, #fdf2ff 52%, #ffeef8 100%);
  border: 2px solid #ffe4f5; padding: 14px 16px 10px;
  box-shadow: inset 0 -30px 60px rgba(255, 214, 240, .35) }
.pelea__fondo { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 240px at 50% 102%, rgba(255, 205, 236, .6), transparent 72%),
              radial-gradient(420px 210px at 10% 6%, rgba(203, 231, 255, .65), transparent 72%),
              radial-gradient(360px 180px at 92% 12%, rgba(226, 214, 255, .6), transparent 72%) }
/* colocacion tipo pokemon: el tuyo abajo-izquierda, el rival arriba-derecha */
.pelea__lado { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 7px;
  align-items: center; width: min(34%, 400px) }
/* la posicion horizontal la calcula el JS en espejo (misma distancia al centro los dos) */
.pelea__lado--yo { left: 4%; bottom: 5%; align-items: center }
.pelea__lado--rival { left: 66%; bottom: 25%; align-items: center }
.pelea__lado--yo { order: 1 }
.pelea__lado--rival { order: 2; transform: translateY(-42px) }
.pelea__lado--yo .pelea__bicho { width: min(38vw, 250px) }
.pelea__lado--rival .pelea__bicho { width: min(30vw, 190px) }
.pelea__bicho { position: relative; display: grid; place-items: center; width: min(36vw, 230px); aspect-ratio: 1;
  filter: drop-shadow(0 16px 22px rgba(120, 80, 160, .2)) }
.pelea__sprite, .pelea__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .22s ease }
.pelea__clip { opacity: 0; mix-blend-mode: screen }
.pelea__clip.on { opacity: 1 }
.pelea__sprite.oculta { opacity: 0 }
.pelea__ficha { display: grid; gap: 3px; justify-items: center; background: rgba(255, 255, 255, .82);
  border: 2px solid #ffe4f5; border-radius: 16px; padding: 7px 12px; box-shadow: 0 10px 22px rgba(160, 110, 200, .14) }
.pelea__nombre { font-weight: 800; color: #33224d; font-size: .88rem }
.pelea__nombre b { color: #9a7cc0; font-weight: 700 }
.pelea__vida { display: block; width: min(34vw, 210px); height: 12px; border-radius: 999px; background: #efe6f8; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(90, 60, 130, .2) }
.pelea__vida i { display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #8fe6b4, #63d3ff); transition: width .5s cubic-bezier(.3, .9, .3, 1) }
.pelea__vida i.baja { background: linear-gradient(90deg, #ffd166, #ff8f8f) }
.pelea__hp { font-size: .74rem; color: #6d5588; font-variant-numeric: tabular-nums }
.pelea__avisos { position: absolute; inset: 0; pointer-events: none; z-index: 4 }

.pjGolpe { position: absolute; left: 50%; top: 46%; width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--c, #ffb3e6) 42%, rgba(255, 255, 255, 0) 72%);
  animation: golpe .6s cubic-bezier(.2, .8, .3, 1) forwards }
@keyframes golpe { 0% { transform: scale(.2); opacity: 0 } 22% { transform: scale(1); opacity: .95 } 100% { transform: scale(1.55); opacity: 0 } }

.pjNum { position: absolute; left: 50%; top: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1.7rem; color: #33224d; text-shadow: 0 2px 0 #fff, 0 0 16px rgba(255,255,255,.95); animation: sube 1.05s cubic-bezier(.2,.8,.3,1) forwards; pointer-events: none; z-index: 7 }
@keyframes sube { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.72) } 22% { opacity: 1; transform: translate(-50%, -6px) scale(1.06) }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(1) } }
.pjNum--crit { color: #d02f63; font-size: 1.8rem }
.pjNum--bien { color: #0f7d53 }
.pjNum--mal { color: #8a6a2f }

@keyframes embisteYo { 0% { transform: translateX(0) } 36% { transform: translateX(28px) scale(1.03) } 100% { transform: translateX(0) } }
@keyframes embisteRival { 0% { transform: translateX(0) } 36% { transform: translateX(-28px) scale(1.03) } 100% { transform: translateX(0) } }
.pelea__lado--yo.embiste { animation: embisteYo .42s cubic-bezier(.3, .9, .25, 1) }
.pelea__lado--rival.embiste { animation: embisteRival .42s cubic-bezier(.3, .9, .25, 1) }
@keyframes sacude { 0% { transform: translate(0, 0) } 24% { transform: translate(-5px, 2px) } 48% { transform: translate(4px, -2px) }
  72% { transform: translate(-2px, 1px) } 100% { transform: translate(0, 0) } }
.recibe .pelea__bicho { animation: sacude .44s ease-out }
.recibe .pelea__sprite, .recibe .pelea__clip { filter: brightness(1.55) saturate(.75) drop-shadow(0 0 14px #ff7fa8) }

.pelea__registro { min-height: 84px; max-height: 132px; overflow: auto; padding: 10px 14px; border-radius: 16px;
  background: #fff; border: 2px solid #f4eafb; font-size: .86rem; color: #4a3a63; line-height: 1.45 }
.pelea__registro p { margin: 0 0 4px }
.pelea__registro b { color: #7c4bd0 }
.pelea__movs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
.mov { position: relative; text-align: left; padding: 10px 30px 10px 13px; border-radius: 16px; font: inherit; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--c, #b98cff) 28%, #fff);
  background: linear-gradient(140deg, #fff, color-mix(in srgb, var(--c, #b98cff) 11%, #fff));
  transition: transform .16s cubic-bezier(.2, .9, .25, 1.2), box-shadow .2s }
.mov:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--c, #b98cff) 26%, transparent) }
.mov:active { transform: translateY(1px) scale(.99) }
.mov:focus-visible { outline: 3px solid color-mix(in srgb, var(--c, #b98cff) 65%, #fff); outline-offset: 2px }
.mov__n { display: block; font-weight: 800; color: #33224d; font-size: .92rem }
.mov__d { display: block; font-size: .75rem; color: #6d5588 }
.mov__k { position: absolute; right: 10px; top: 9px; font-size: .68rem; font-weight: 800; color: #a48cc0 }
.mov--cura { --c: #7fe6c3 }

.pelea__elegir { display: grid; gap: 12px }
.pelea__t { margin: 0; font-size: 1.3rem; color: #33224d }
.pelea__sub { margin: 0; color: #6d5588; font-size: .88rem }
.pelea__buscar input { width: 100%; padding: 12px 18px; border-radius: 999px; border: 2px solid #ffd9ef; font: inherit;
  background: #fff; color: #3a2b52 }
.pelea__buscar input:focus { outline: none; border-color: #ff9ad8; box-shadow: 0 0 0 4px rgba(255, 154, 216, .18) }
.pelea__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 9px;
  max-height: 54vh; overflow: auto; padding: 4px }
.pjCard { display: grid; gap: 3px; justify-items: center; padding: 9px 6px 7px; border-radius: 18px; cursor: pointer; font: inherit;
  border: 2px solid #ffe4f5; background: linear-gradient(150deg, #fff, #fdf4ff); transition: transform .16s, box-shadow .2s, border-color .2s }
.pjCard:hover { transform: translateY(-3px); border-color: #ffb3e6; box-shadow: 0 12px 24px rgba(190, 130, 230, .22) }
.pjCard:focus-visible { outline: 3px solid #b98cff; outline-offset: 2px }
.pjCard img { width: 58px; height: 58px; object-fit: contain }
.pjCard__n { font-size: .78rem; font-weight: 700; color: #33224d; text-align: center }
.pjCard__e { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700;
  color: color-mix(in oklab, var(--c, #b98cff) 50%, #1c1030) }
.pjCard__e img { width: 13px; height: 13px; object-fit: contain }
.pelea__pie { display: flex; justify-content: flex-end }
.pelea__vacio { color: #6d5588; font-size: .88rem }

.pelea__fin { position: absolute; inset: 0; display: grid; place-items: center; z-index: 8;
  background: rgba(255, 255, 255, .84); animation: aparece .3s ease }
.pelea__finCaja { display: grid; gap: 10px; text-align: center; padding: 24px 26px; border-radius: 26px; max-width: min(88vw, 430px);
  background: linear-gradient(150deg, #fff, #fff2fb 60%, #f3f7ff); border: 2px solid #ffd9ef;
  box-shadow: 0 26px 56px rgba(150, 90, 190, .26) }
.pelea__finTit { font-size: 1.7rem; font-weight: 900; color: #8a3f9e }
.pelea__finTx { color: #4a3a63; font-size: .9rem }
.pelea__finBtns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap }

@media (max-width: 620px) {
  .pelea__escena { min-height: 46vh; padding: 10px 10px 8px }
  .pelea__bicho { width: min(42vw, 170px) }
  .pelea__vida { width: min(40vw, 150px) }
  .pelea__movs { grid-template-columns: 1fr }
}
@media (prefers-reduced-motion: reduce) {
  .pelea__escena *, .pjNum, .pjGolpe { animation: none !important }
  .pelea__vida i, .pelea__sprite, .pelea__clip { transition: none !important }
}

.pjChispa { position: absolute; left: 50%; top: 45%; width: var(--g, 8px); height: var(--g, 8px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, var(--c, #ffd166) 72%); box-shadow: 0 0 10px var(--c, #ffd166); pointer-events: none; z-index: 4; animation: chispa var(--t, .6s) cubic-bezier(.2,.8,.3,1) forwards }
@keyframes chispa { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1 } 100% { transform: translate(calc(-50% + var(--dx, 40px)), calc(-50% + var(--dy, 0px))) scale(.25); opacity: 0 } }
.pelea__escena.flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--fc, #ffd166) 46%, transparent), transparent 72%); animation: fogonazo .24s ease-out forwards }
@keyframes fogonazo { 0% { opacity: .95 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .pjChispa { display: none } .pelea__escena.flash::after { display: none } }

/* el ataque se anima con el arte + efectos: el clip del juego trae fondo negro y hacia caja, asi que no se usa aqui (sin cajas negras) */
.pelea__clip { display: none !important }
.pelea__lado.embiste .pelea__sprite { filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--c, #ff9ad8) 45%, transparent)) }

.pjCartel{position:fixed;transform:translateX(-50%);z-index:6;padding:9px 20px;border-radius:999px;
background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--c,#ff8fd4) 26%,#fff));border:2px solid color-mix(in srgb,var(--c,#ff8fd4) 45%,#fff);
box-shadow:0 14px 30px rgba(150,90,190,.25);font-weight:800;color:#33224d;white-space:nowrap;
animation:cartel .34s cubic-bezier(.2,.9,.25,1.25)}
.pjCartel.sale{animation:cartelSale .42s ease-in forwards}
@keyframes cartel{0%{opacity:0;transform:translate(-50%,-10px) scale(.86)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes cartelSale{0%{opacity:1}100%{opacity:0;transform:translate(-50%,-8px) scale(.97)}}
.pelea__vida i.crit{background:linear-gradient(90deg,#ff9f9f,#e0396b)}

.pjAviso{font-size:1.02rem;font-weight:700;color:#33224d;margin:0 0 6px}
.pjAntes{display:grid;gap:2px;opacity:.72}
.pjAntes p{margin:0;font-size:.8rem}
.pelea__escena.acerca{transform:scale(1.018);transition:transform .32s cubic-bezier(.3,.9,.3,1)}
.pelea__escena{transition:transform .4s cubic-bezier(.3,.9,.3,1)}

/* --- fondo escenico del estadio (como los planos de Pokemon) --- */
.pelea__escena { background: radial-gradient(circle at 79% 15%, #fff6cc 0 40px, rgba(255,246,204,.45) 41px, transparent 62px), radial-gradient(120px 30px at 20% 19%, #ffffff 0 62%, transparent 64%), radial-gradient(170px 40px at 30% 15%, #ffffff 0 62%, transparent 64%), radial-gradient(120px 30px at 68% 23%, #f7fbff 0 62%, transparent 64%), linear-gradient(180deg, #cfe8ff 0%, #e6f3ff 36%, #ffe9f6 64%, #ffd9ee 100%); overflow: hidden }
.pelea__fondo { background: radial-gradient(60% 100% at 18% 100%, #bfe8c9 0 70%, transparent 72%), radial-gradient(54% 100% at 50% 100%, #a9e0bc 0 70%, transparent 72%), radial-gradient(66% 100% at 84% 100%, #c9efd4 0 70%, transparent 72%); opacity: .9; bottom: 34%; top: auto; height: 30% }
.pelea__escena::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; pointer-events: none; z-index: 1; background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 2px, transparent 2px 62px), repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 2px, transparent 2px 40px), linear-gradient(180deg, #ffe7f3 0%, #ffd7ea 100%); box-shadow: inset 0 16px 28px -16px rgba(150,90,190,.3) }
.pelea__lado--yo, .pelea__lado--rival { bottom: 3% }

/* todos los Aniimo a la misma altura visual (como los sprites de Pokemon) */
.pelea__bicho { width: auto; aspect-ratio: auto; height: min(42vh, 320px); max-width: min(46vw, 430px); }
.pelea__sprite, .pelea__clip { position: relative; inset: auto; height: 100%; width: auto; max-width: min(46vw, 430px); object-fit: contain; margin: 0 auto; }

/* altura fija del sprite: manda sobre el contenedor */
.pelea__sprite { position: relative !important; inset: auto !important; height: min(42vh, 320px) !important; width: auto !important; max-width: min(46vw, 430px) !important; object-fit: contain; display: block; margin: 0 auto; }

/* ================= PELEA: calidad de efectos y colocacion ================= */

/* --- elegir los dos bandos: quien es tuyo y contra quien --- */
.pelea__elegir .pjCard { position: relative; }
.pjCard--yo { outline: 3px solid var(--acento, #9c8cf2); outline-offset: 2px; }
.pjCard__yo {
  position: absolute; top: 4px; left: 4px; font-size: 10px; line-height: 1.5;
  padding: 0 7px; border-radius: 999px; background: var(--acento, #9c8cf2);
  color: #211a38; font-weight: 700; letter-spacing: .2px;
}
.pjCard--rival { cursor: crosshair; }
.pjCard--rival:hover { outline: 3px solid var(--borde, #d9cdf7); outline-offset: 2px; }
.pjCard:disabled { opacity: .4; cursor: not-allowed; filter: saturate(.55); }
.pelea__pie { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* --- criaturas: misma altura para todas, centradas y sin deformar --- */
.pelea__lado { align-items: flex-end; justify-items: center; }
.pelea__lado .pelea__sprite,
.pelea__sprite {
  display: block;
  margin: 0 auto;
  height: min(40vh, 310px);
  width: auto;
  max-width: min(44vw, 420px);
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media (max-width: 760px) {
  .pelea__lado .pelea__sprite, .pelea__sprite { height: min(30vh, 210px); }
}

/* --- particulas con forma segun el elemento --- */
.pjChispa {
  position: absolute; left: 50%; top: 50%; width: var(--g, 7px); height: var(--g, 7px);
  background: var(--c, #ffd166); pointer-events: none; will-change: transform, opacity;
}
@keyframes pjVuelaForma {
  0%   { transform: translate(-50%, -50%) scale(.45) rotate(0deg); opacity: 0; }
  14%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1) rotate(var(--r, 0deg)); opacity: 0; }
}
.pjChispa--llama, .pjChispa--gota, .pjChispa--hoja, .pjChispa--rayo,
.pjChispa--cristal, .pjChispa--luz, .pjChispa--roca {
  animation: pjVuelaForma var(--t, .6s) cubic-bezier(.22, .9, .3, 1) forwards;
}
.pjChispa--llama  { border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; box-shadow: 0 0 9px var(--c); }
.pjChispa--gota   { border-radius: 50% 50% 50% 50% / 72% 72% 28% 28%; }
.pjChispa--hoja   { border-radius: 0 100% 0 100%; }
.pjChispa--rayo   { clip-path: polygon(52% 0, 76% 0, 56% 40%, 86% 40%, 30% 100%, 45% 54%, 15% 54%); }
.pjChispa--cristal{ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: 0 0 7px var(--c); }
.pjChispa--luz    { border-radius: 2px; box-shadow: 0 0 10px var(--c), 0 0 20px var(--c); }
.pjChispa--roca   { border-radius: 28% 34% 30% 36%; }

/* --- anillo de impacto (se abre en el punto del golpe) --- */
.pjAnillo {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border: 3px solid var(--c, #fff); border-radius: 50%; pointer-events: none;
  animation: pjAnilloAbre .6s cubic-bezier(.16, .8, .3, 1) forwards;
}
.pjAnillo--crit { border-width: 5px; box-shadow: 0 0 14px var(--c, #fff); }
@keyframes pjAnilloAbre {
  0%   { transform: scale(.18); opacity: .95; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- el que recibe el golpe retrocede un instante --- */
.pjTocado { animation: pjTocadoGolpe .32s ease-out; }
@keyframes pjTocadoGolpe {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(7px) scale(.985); }
  100% { transform: translateX(0); }
}

/* --- respeto a quien pide menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  .pjTocado, .pjAnillo { animation: none; }
  .pjChispa { display: none; }
}

/* ---------- suelo de la arena: plataforma y sombra de contacto ---------- */
.pelea__lado::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -14px; width: 78%; height: 26px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(120, 88, 160, .30), rgba(120, 88, 160, 0) 72%);
  filter: blur(1px); pointer-events: none; z-index: -1;
}
.pelea__lado::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -18px; width: 88%; height: 34px; border-radius: 50%;
  background: radial-gradient(48% 50% at 50% 45%, rgba(255, 255, 255, .95), rgba(255, 226, 246, .92) 62%, rgba(238, 196, 232, .75) 100%);
  box-shadow: 0 6px 16px rgba(158, 110, 190, .28), inset 0 3px 0 rgba(255, 255, 255, .9);
  pointer-events: none; z-index: -2;
}
.pelea__lado .pelea__bicho { position: relative; z-index: 4; transition: transform .35s cubic-bezier(.22, .9, .3, 1) }

/* ---------- barras de vida con mas cuerpo ---------- */
.pelea__vida { position: relative; height: 13px; border-radius: 999px; overflow: hidden;
  background: rgba(90, 62, 120, .16); box-shadow: inset 0 1px 3px rgba(70, 40, 100, .25) }
.pelea__vida i { transition: width .5s cubic-bezier(.22, .9, .3, 1) }
.pelea__vida::after { content: ""; position: absolute; inset: 0 0 50% 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none }

/* ---------- movimientos: rejilla con tipo y potencia ---------- */
.pelea__movs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px }
.pelea__movs .mov { position: relative; text-align: left; padding: 10px 12px 10px 14px; border-radius: 16px;
  border: 2px solid #ffd9ef; background: linear-gradient(180deg, #fff, #fff4fb); cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease }
.pelea__movs .mov:hover { border-color: var(--c, #9c8cf2); box-shadow: 0 6px 16px rgba(150, 100, 190, .18) }
.pelea__movs .mov:active { transform: translateY(1px) }
.pelea__movs .mov__n { display: block; font-weight: 800; color: #3f2c63 }
.pelea__movs .mov__d { display: block; font-size: .8rem; color: #6b5a8a; margin-top: 2px }
.pelea__movs .mov__k { position: absolute; top: 6px; right: 8px; font-size: .7rem; font-weight: 800;
  color: #8a76ad; border: 1px solid #e7d9f8; border-radius: 7px; padding: 0 5px; background: #fbf7ff }

/* ===== EFECTOS DE ATAQUE (vfx) ===== */
.pelea__bicho { isolation: isolate; }
.vfx {
  position: absolute; left: 50%; top: 54%; width: 0; height: 0;
  pointer-events: none; z-index: 6; will-change: transform, opacity;
}
.vfx::before, .vfx::after { content: ''; position: absolute; }
/* el punto de golpe */
.vfx > * { position: absolute; }

/* ---- fogonazo comun: destello radial ---- */
.vfx--fogonazo {
  width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 88%, white) 0%, var(--c) 38%, transparent 72%);
  animation: vfxFogonazo .42s ease-out forwards; mix-blend-mode: screen;
}
@keyframes vfxFogonazo {
  0% { transform: scale(.25 * var(--esc, 1)); opacity: .95 }
  55% { opacity: .8 }
  100% { transform: scale(1.25 * var(--esc, 1)); opacity: 0 }
}

/* ---- fuego: llamaradas que suben ---- */
.vfx--llama {
  left: calc(50% + var(--x, 0px)); top: 62%;
  width: var(--g); height: calc(var(--g) * 1.7);
  margin-left: calc(var(--g) / -2);
  background: linear-gradient(to top, var(--c), color-mix(in srgb, var(--c) 50%, white), transparent);
  border-radius: 50% 50% 44% 44% / 68% 68% 32% 32%;
  animation: vfxLlama var(--t) ease-out var(--d) forwards;
  filter: blur(.4px); mix-blend-mode: screen;
}
@keyframes vfxLlama {
  0% { transform: translateY(10px) scaleY(.35) scaleX(1.15); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translateY(calc(-56px * var(--esc, 1))) scaleY(1.5) scaleX(.5); opacity: 0 }
}

/* ---- agua: ola que barre ---- */
.vfx--ola {
  left: -20%; top: 48%; width: 140%; height: var(--alto);
  background:
    radial-gradient(120% 100% at 50% 100%, color-mix(in srgb, var(--c) 85%, white) 0%, var(--c) 45%, transparent 78%);
  border-radius: 50% 50% 40% 40%;
  animation: vfxOla var(--t) cubic-bezier(.2,.8,.3,1) forwards;
  opacity: .9; mix-blend-mode: screen;
}
@keyframes vfxOla {
  0% { transform: translateX(-60%) scaleY(.3); opacity: 0 }
  35% { opacity: .95 }
  100% { transform: translateX(60%) scaleY(1.05); opacity: 0 }
}
.vfx--gota {
  left: calc(50% + var(--x, 0px)); top: 50%; width: var(--g); height: calc(var(--g) * 1.35);
  margin-left: calc(var(--g) / -2);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 60%, white), var(--c));
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: vfxGota var(--t) ease-out var(--d) forwards;
}
@keyframes vfxGota {
  0% { transform: translateY(0) scale(.5); opacity: 0 }
  20% { opacity: 1 }
  100% { transform: translate(var(--x, 0px), var(--y, -60px)) scale(1); opacity: 0 }
}

/* ---- planta: hojas girando ---- */
.vfx--hoja, .vfx--petalo {
  left: 50%; top: 54%; width: var(--g); height: calc(var(--g) * .62);
  margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 70%, white), var(--c));
  border-radius: 0 100% 0 100%;
  animation: vfxHoja var(--t) ease-out var(--d) forwards;
}
@keyframes vfxHoja {
  0% { transform: rotate(var(--ang)) translateX(0) rotate(0deg) scale(.5); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: rotate(var(--ang)) translateX(var(--radio, var(--alc, 70px))) rotate(var(--giro, 360deg)) scale(1); opacity: 0 }
}
.vfx--petalo { border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--c) 55%, white), var(--c)); }

/* ---- eléctrico: rayo que cae ---- */
.vfx--rayo {
  left: 50%; top: -10%; width: 12px; height: 74%; margin-left: -6px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 70%, white) 22%, var(--c) 60%, transparent);
  clip-path: polygon(52% 0, 74% 0, 44% 42%, 78% 42%, 26% 100%, 46% 56%, 12% 56%);
  animation: vfxRayo var(--t) steps(3, end) forwards;
  filter: drop-shadow(0 0 10px var(--c)); mix-blend-mode: screen;
}
@keyframes vfxRayo {
  0% { opacity: 0; transform: translateY(-8%) scaleX(.6) }
  12% { opacity: 1; transform: translateY(0) scaleX(1.1) }
  30% { opacity: .35 }
  45% { opacity: 1 }
  100% { opacity: 0; transform: translateY(4%) scaleX(.9) }
}
.vfx--chispazo {
  left: 50%; top: 52%; width: var(--largo); height: 3px; margin-left: -1px;
  background: linear-gradient(to right, var(--c), transparent);
  transform-origin: left center;
  animation: vfxChispazo .34s ease-out var(--d) forwards;
  box-shadow: 0 0 8px var(--c);
}
@keyframes vfxChispazo {
  0% { transform: rotate(var(--ang)) scaleX(0); opacity: 0 }
  30% { transform: rotate(var(--ang)) scaleX(1); opacity: 1 }
  100% { transform: rotate(var(--ang)) scaleX(.7); opacity: 0 }
}

/* ---- hielo: cristales ---- */
.vfx--cristal {
  left: 50%; top: 54%; width: var(--g); height: calc(var(--g) * 1.6);
  margin: calc(var(--g) * -0.8) 0 0 calc(var(--g) / -2);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 45%, white), var(--c));
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: vfxCristal var(--t) ease-out var(--d) forwards;
  filter: drop-shadow(0 0 6px var(--c));
}
@keyframes vfxCristal {
  0% { transform: rotate(var(--ang)) translateX(0) rotate(0deg) scale(.3); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: rotate(var(--ang)) translateX(var(--alc)) rotate(var(--rot, 240deg)) scale(1); opacity: 0 }
}
.vfx--escarcha {
  width: 190px; height: 130px; margin: -65px 0 0 -95px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, white) 0%, transparent 68%);
  animation: vfxEscarcha .85s ease-out forwards; mix-blend-mode: screen;
}
@keyframes vfxEscarcha { 0% { opacity: 0; transform: scale(.5) } 30% { opacity: .85 } 100% { opacity: 0; transform: scale(1.15) } }

/* ---- tierra: rocas ---- */
.vfx--roca {
  left: calc(50% + var(--x, 0px)); top: 60%; width: var(--g); height: var(--g);
  margin-left: calc(var(--g) / -2);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 65%, white), color-mix(in srgb, var(--c) 55%, black));
  border-radius: 30% 45% 35% 50%;
  animation: vfxRoca var(--t) cubic-bezier(.3,.7,.4,1) var(--d) forwards;
}
@keyframes vfxRoca {
  0% { transform: translateY(0) rotate(0deg) scale(.6); opacity: 0 }
  20% { opacity: 1 }
  55% { transform: translate(var(--x, 0px), var(--y, -100px)) rotate(var(--rot, 180deg)) scale(1) }
  100% { transform: translate(calc(var(--x, 0px) * 1.3), 12px) rotate(calc(var(--rot, 180deg) * 1.6)) scale(1); opacity: 0 }
}
.vfx--polvo {
  left: calc(50% + var(--x, 0px)); top: 62%; width: var(--g); height: var(--g);
  margin-left: calc(var(--g) / -2);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, white) 0%, transparent 70%);
  border-radius: 50%; animation: vfxPolvo var(--t) ease-out var(--d) forwards;
}
@keyframes vfxPolvo { 0% { transform: scale(.4); opacity: 0 } 25% { opacity: .9 } 100% { transform: translateY(-26px) scale(1.5); opacity: 0 } }
.vfx--grieta {
  left: 50%; top: 68%; width: 200px; height: 26px; margin: 0 0 0 -100px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 70%, black) 30%, color-mix(in srgb, var(--c) 70%, black) 70%, transparent);
  clip-path: polygon(0 46%, 22% 20%, 38% 60%, 55% 14%, 72% 58%, 88% 26%, 100% 50%, 100% 64%, 82% 44%, 66% 82%, 48% 36%, 33% 84%, 18% 44%, 0 68%);
  animation: vfxGrieta .9s ease-out forwards; transform-origin: center; opacity: .9;
}
@keyframes vfxGrieta { 0% { transform: scaleX(.2) scaleY(.4); opacity: 0 } 30% { opacity: .95 } 100% { transform: scaleX(1.3 * var(--esc, 1)) scaleY(1); opacity: 0 } }

/* ---- viento: espiral ---- */
.vfx--aire {
  left: 50%; top: 58%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: linear-gradient(to right, color-mix(in srgb, var(--c) 65%, white), transparent);
  border-radius: 50% 60% 50% 60%;
  animation: vfxAire var(--t) linear var(--retraso) forwards;
  opacity: .85;
}
@keyframes vfxAire {
  0% { transform: rotate(0deg) translateY(20px) scale(.5); opacity: 0 }
  20% { opacity: .9 }
  100% { transform: rotate(calc(var(--vuelta, 1) * 720deg)) translateY(calc(var(--alto) * -1)) scale(1); opacity: 0 }
}

/* ---- embestida: estelas ---- */
.vfx--estela, .vfx--embate {
  left: 50%; top: calc(54% + var(--y, 0px)); width: var(--largo, 80px); height: 5px;
  margin-left: calc(var(--largo, 80px) / -2);
  background: linear-gradient(to left, color-mix(in srgb, var(--c) 80%, white), transparent);
  border-radius: 999px;
  animation: vfxEstela var(--t, .3s) ease-out var(--d) forwards;
  box-shadow: 0 0 10px var(--c);
}
@keyframes vfxEstela {
  0% { transform: translateX(-140px) scaleX(.3); opacity: 0 }
  30% { opacity: 1 }
  100% { transform: translateX(120px) scaleX(1.1); opacity: 0 }
}
.vfx--embate { left: calc(50% + var(--x, 0px)); width: 130px; height: 8px; border-radius: 999px;
  background: linear-gradient(to left, color-mix(in srgb, var(--c) 85%, white), var(--c), transparent); }

/* ---- patada: arco ---- */
.vfx--arco {
  left: 50%; top: 44%; width: 150px; height: 110px; margin: -55px 0 0 -75px;
  border: 9px solid var(--c); border-color: var(--c) transparent transparent transparent;
  border-radius: 50%; animation: vfxArco var(--t) ease-out forwards;
  filter: drop-shadow(0 0 8px var(--c));
}
@keyframes vfxArco {
  0% { transform: rotate(var(--rot, 0deg)) scale(.5); opacity: 0 }
  35% { opacity: 1 }
  100% { transform: rotate(calc(var(--rot, 0deg) + 150deg)) scale(1.15); opacity: 0 }
}

/* ---- proyectil ---- */
.vfx--bola {
  left: 50%; top: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: radial-gradient(circle at 35% 32%, white, color-mix(in srgb, var(--c) 75%, white) 40%, var(--c));
  border-radius: 50%; box-shadow: 0 0 22px var(--c), 0 0 40px color-mix(in srgb, var(--c) 60%, transparent);
  animation: vfxBola var(--t) linear forwards;
}
@keyframes vfxBola {
  0% { transform: translate(var(--desde, -300px), -30px) scale(.35); opacity: 0 }
  12% { opacity: 1 }
  78% { transform: translate(0, 0) scale(1); opacity: 1 }
  100% { transform: translate(0, 0) scale(1.5); opacity: 0 }
}
.vfx--chispa {
  left: 50%; top: 54%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: radial-gradient(circle, white, var(--c) 55%, transparent);
  border-radius: 50%; animation: vfxChispa var(--t) ease-out var(--d) forwards;
}
@keyframes vfxChispa {
  0% { transform: rotate(var(--ang)) translateX(4px) scale(.4); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: rotate(var(--ang)) translateX(var(--alc, 60px)) scale(1); opacity: 0 }
}
.vfx--metralla { border-radius: 26%; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 70%, white), var(--c)); }

/* ---- planeo: media luna ---- */
.vfx--media-luna {
  left: 50%; top: calc(50% + var(--y, 0px)); width: var(--g); height: calc(var(--g) * .5);
  margin: calc(var(--g) * -.25) 0 0 calc(var(--g) / -2);
  background: radial-gradient(circle at 100% 50%, transparent 46%, color-mix(in srgb, var(--c) 70%, white) 52%, var(--c) 70%, transparent 78%);
  border-radius: 50%;
  animation: vfxLuna var(--t) cubic-bezier(.25,.75,.35,1) forwards;
  filter: drop-shadow(0 0 8px var(--c));
}
@keyframes vfxLuna {
  0% { transform: translateX(var(--desde, -300px)) rotate(-28deg) scale(.6); opacity: 0 }
  20% { opacity: 1 }
  100% { transform: translateX(30px) rotate(22deg) scale(1.1); opacity: 0 }
}

/* ---- cometa: estrellas que caen ---- */
.vfx--estrella {
  left: 50%; top: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: radial-gradient(circle, white, color-mix(in srgb, var(--c) 70%, white) 45%, transparent 72%);
  border-radius: 50%; box-shadow: 0 0 16px var(--c);
  animation: vfxEstrella var(--t) ease-in var(--d) forwards;
}
@keyframes vfxEstrella {
  0% { transform: translate(var(--desde-x, 0), var(--desde-y, -240px)) scale(.5); opacity: 0 }
  18% { opacity: 1 }
  100% { transform: translate(0, 0) scale(1.15); opacity: 0 }
}

/* ---- haz de energía ---- */
.vfx--haz {
  left: 50%; top: 54%; width: 0; height: var(--grosor);
  margin-top: calc(var(--grosor) / -2); transform-origin: left center;
  background: linear-gradient(to right, color-mix(in srgb, var(--c) 60%, white), var(--c), transparent);
  animation: vfxHaz var(--t) ease-out forwards;
  box-shadow: 0 0 18px var(--c);
}
@keyframes vfxHaz {
  0% { transform: translateX(var(--desde, -320px)) scaleX(0); opacity: 0 }
  18% { transform: translateX(var(--desde, -320px)) scaleX(1); opacity: 1 }
  80% { opacity: .9 }
  100% { transform: translateX(var(--desde, -320px)) scaleX(.6); opacity: 0 }
}

/* ---- anillo de onda ---- */
.vfx--onda-anillo {
  left: 50%; top: 54%; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border: var(--ancho, 5px) solid var(--c); border-radius: 50%;
  animation: vfxAnillo var(--t, .6s) ease-out var(--d) forwards;
  box-shadow: 0 0 14px var(--c);
}
@keyframes vfxAnillo {
  0% { transform: scale(.2 * var(--esc, 1)); opacity: .95 }
  100% { transform: scale(2.6 * var(--esc, 1)); opacity: 0 }
}

/* ---- humo ---- */
.vfx--humo {
  left: calc(50% + var(--x, 0px)); top: calc(50% + var(--y, 0px));
  width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 42%, white) 0%, transparent 68%);
  border-radius: 50%; animation: vfxHumo var(--t) ease-out var(--d) forwards;
}
@keyframes vfxHumo { 0% { transform: scale(.3); opacity: 0 } 25% { opacity: .75 } 100% { transform: translateY(-40px) scale(1.6); opacity: 0 } }

/* ---- sombra ---- */
.vfx--jiron {
  left: 50%; top: 54%; width: var(--g); height: calc(var(--g) * .5);
  margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 80%, black), transparent);
  border-radius: 50%; filter: blur(3px);
  animation: vfxJiron var(--t) ease-out var(--d) forwards;
}
@keyframes vfxJiron {
  0% { transform: rotate(var(--ang)) translateX(0) rotate(0deg) scale(.4); opacity: 0 }
  25% { opacity: .9 }
  100% { transform: rotate(var(--ang)) translateX(var(--alc)) rotate(var(--rot, 180deg)) scale(1.2); opacity: 0 }
}
.vfx--absorber {
  width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%;
  background: radial-gradient(circle, transparent 40%, color-mix(in srgb, var(--c) 55%, transparent) 62%, transparent 78%);
  animation: vfxAbsorber .9s ease-in forwards;
}
@keyframes vfxAbsorber { 0% { transform: scale(1.4); opacity: 0 } 40% { opacity: .9 } 100% { transform: scale(.35); opacity: 0 } }

/* ---- luz ---- */
.vfx--rayo-luz {
  left: calc(50% + var(--x, 0px)); top: -12%; width: var(--ancho); height: 76%;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 55%, white), transparent);
  animation: vfxRayoLuz var(--t) ease-out var(--d) forwards;
  mix-blend-mode: screen; filter: blur(1px);
}
@keyframes vfxRayoLuz { 0% { opacity: 0; transform: scaleY(.3) } 30% { opacity: .95; transform: scaleY(1) } 100% { opacity: 0; transform: scaleY(1.1) } }
.vfx--halo {
  width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 40%, white) 0%, transparent 66%);
  animation: vfxHalo .95s ease-out forwards; mix-blend-mode: screen;
}
@keyframes vfxHalo { 0% { opacity: 0; transform: scale(.5) } 35% { opacity: .9 } 100% { opacity: 0; transform: scale(1.2) } }

/* ---- danza ---- */
.vfx--petalo, .vfx--hoja { will-change: transform, opacity; }

/* ---- zarpazo ---- */
.vfx--aranalzo {
  left: 50%; top: 50%; width: var(--largo); height: 5px; margin-left: calc(var(--largo) / -2);
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 65%, white), transparent);
  border-radius: 999px; transform-origin: center;
  animation: vfxAranalzo var(--t) ease-out var(--d) forwards;
  box-shadow: 0 0 10px var(--c);
}
@keyframes vfxAranalzo {
  0% { transform: rotate(var(--rot)) scaleX(0); opacity: 0 }
  30% { transform: rotate(var(--rot)) scaleX(1); opacity: 1 }
  100% { transform: rotate(var(--rot)) scaleX(1.05); opacity: 0 }
}

/* ---- mordisco ---- */
.vfx--colmillo {
  left: 50%; top: 50%; width: 130px; height: 44px; margin-left: -65px;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, white) 0 10px, transparent 10px 20px);
  clip-path: polygon(0 100%, 12% 0, 26% 100%, 40% 0, 54% 100%, 68% 0, 82% 100%, 96% 0, 100% 100%);
  animation: vfxColmillo var(--t) ease-in forwards;
  filter: drop-shadow(0 0 6px var(--c));
}
.vfx--colmillo-arriba { transform: translateY(-42px); }
.vfx--colmillo-abajo { transform: translateY(10px) rotate(180deg); }
@keyframes vfxColmillo {
  0% { opacity: 0; scale: .7 0.4 }
  40% { opacity: 1; scale: 1 1 }
  100% { opacity: 0; scale: .9 .9 }
}

/* ---- onda de choque (grito) ---- */
.vfx--cono {
  left: 50%; top: 48%; width: var(--g); height: var(--g);
  margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: conic-gradient(from -32deg at 0% 50%, color-mix(in srgb, var(--c) 60%, white), transparent 62%);
  border-radius: 0 100% 100% 0;
  animation: vfxCono var(--t) ease-out forwards; mix-blend-mode: screen;
}
@keyframes vfxCono { 0% { transform: rotate(var(--rot, 0deg)) scaleX(.2); opacity: 0 } 35% { opacity: .9 } 100% { transform: rotate(var(--rot, 0deg)) scaleX(1.15); opacity: 0 } }
.vfx--linea-sonido {
  left: 50%; top: 50%; width: var(--largo); height: 3px; margin-top: -1px;
  background: linear-gradient(to right, var(--c), transparent);
  transform-origin: left center; animation: vfxLinea .4s ease-out var(--d) forwards;
}
@keyframes vfxLinea { 0% { transform: rotate(var(--ang)) scaleX(0); opacity: 0 } 35% { opacity: 1 } 100% { transform: rotate(var(--ang)) scaleX(1.1); opacity: 0 } }

/* ---- aliento: chorro ---- */
.vfx--chorro {
  left: 50%; top: 48%; width: 230px; height: var(--g);
  margin: calc(var(--g) / -2) 0 0 -230px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 55%, white) 40%, var(--c), transparent);
  clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 62%);
  animation: vfxChorro var(--t) ease-out forwards; mix-blend-mode: screen; filter: blur(2px);
}
@keyframes vfxChorro { 0% { opacity: 0; transform: scaleX(.3) } 25% { opacity: .95; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(1.25) } }

/* ---- barrera (defensa) ---- */
.vfx--barrera {
  left: 50%; top: 52%; width: 150px; height: 200px; margin: -100px 0 0 -75px;
  border-radius: 50% 50% 44% 44%; border: 4px solid color-mix(in srgb, var(--c) 65%, white);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%);
  animation: vfxBarrera var(--t) ease-out forwards; box-shadow: inset 0 0 22px var(--c), 0 0 22px var(--c);
}
@keyframes vfxBarrera { 0% { opacity: 0; transform: scale(.7) } 30% { opacity: .95; transform: scale(1.04) } 100% { opacity: 0; transform: scale(1.12) } }
.vfx--astilla-barrera {
  left: 50%; top: 52%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: color-mix(in srgb, var(--c) 70%, white); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  animation: vfxChispa .55s ease-out var(--d) forwards;
}

/* ---- curación ---- */
.vfx--destello-cura {
  left: calc(50% + var(--x, 0px)); top: 60%;
  width: var(--g); height: var(--g); margin-left: calc(var(--g) / -2);
  background: radial-gradient(circle, white, color-mix(in srgb, var(--c) 60%, white) 45%, transparent 72%);
  border-radius: 50%; animation: vfxCura var(--t) ease-out var(--d) forwards;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, white);
}
@keyframes vfxCura {
  0% { transform: translateY(20px) scale(.4); opacity: 0 }
  25% { opacity: 1 }
  100% { transform: translateY(var(--y, -140px)) scale(1.1); opacity: 0 }
}

/* ---- lanzamiento en arco ---- */
.vfx--arco-vuelo {
  left: 50%; top: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 60%, white), color-mix(in srgb, var(--c) 60%, black));
  border-radius: 34% 40% 36% 44%; box-shadow: 0 0 12px var(--c);
  animation: vfxArcoVuelo var(--t) cubic-bezier(.35,.5,.5,1) forwards;
}
@keyframes vfxArcoVuelo {
  0% { transform: translate(var(--desde, -260px), 0) rotate(0deg); opacity: 0 }
  15% { opacity: 1 }
  50% { transform: translate(calc(var(--desde, -260px) / -2), var(--alto, -120px)) rotate(280deg) }
  100% { transform: translate(0, 0) rotate(560deg); opacity: 0 }
}

/* ---- tormenta: fondo de nubes ---- */
.vfx--cielo-tormenta {
  left: -10%; top: 0; width: 120%; height: 60%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 22%, #1b1533), transparent);
  animation: vfxCielo 1.2s ease-out forwards;
}
@keyframes vfxCielo { 0% { opacity: 0 } 30% { opacity: .9 } 100% { opacity: 0 } }
.vfx--lluvia {
  left: calc(50% + var(--x, 0px)); top: 10%; width: 2px; height: var(--largo);
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--c) 70%, white));
  animation: vfxLluvia var(--t) linear var(--d) forwards;
}
@keyframes vfxLluvia { 0% { transform: translateY(-40px); opacity: 0 } 25% { opacity: .9 } 100% { transform: translateY(190px); opacity: 0 } }

/* ===== FIN EFECTOS DE ATAQUE ===== */

/* ===== SELECTOR DE FORMA ===== */
.formaOv { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.formaOv__velo {
  position: absolute; inset: 0; background: rgba(18, 12, 34, .55);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .24s ease;
}
.formaOv.on .formaOv__velo { opacity: 1; }
.formaOv__caja {
  position: relative; margin: 0 auto; width: min(920px, calc(100% - 24px));
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 82%, #cbb7ff));
  border: 1px solid color-mix(in srgb, var(--border) 60%, white);
  border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -18px 50px rgba(40, 24, 80, .35);
  padding: 18px 20px 20px; transform: translateY(14px); opacity: 0;
  transition: transform .26s cubic-bezier(.2,.9,.3,1), opacity .26s ease;
}
.formaOv.on .formaOv__caja { transform: translateY(0); opacity: 1; }
.formaOv__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.formaOv__icon { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(30,18,60,.28)); }
.formaOv__tit { display: block; font-size: 19px; line-height: 1.1; }
.formaOv__sub { font-size: 13px; opacity: .72; }
.formaOv__x {
  margin-left: auto; background: transparent; border: 1px solid var(--border);
  color: inherit; border-radius: 10px; padding: 7px 11px; font-size: 12px; cursor: pointer;
}
.formaOv__x:hover { background: color-mix(in srgb, var(--card) 70%, var(--accent)); }
.formaOv__lista {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr);
  gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin;
}
.formaTile {
  position: relative; display: grid; gap: 7px; justify-items: center;
  background: color-mix(in srgb, var(--card) 92%, white); color: inherit;
  border: 2px solid var(--border); border-radius: 16px; padding: 10px 8px 9px;
  cursor: pointer; transition: transform .18s cubic-bezier(.2,.9,.3,1), border-color .18s ease, box-shadow .18s ease;
}
.formaTile:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(40,24,80,.18); }
.formaTile.on {
  border-color: #f0bd6a; box-shadow: 0 0 0 3px color-mix(in srgb, #f0bd6a 35%, transparent), 0 10px 22px rgba(40,24,80,.2);
  transform: translateY(-3px);
}
.formaTile__foto { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; }
.formaTile__foto img { max-width: 100%; max-height: 100%; object-fit: contain; }
.formaTile__play {
  position: absolute; right: 2px; bottom: 2px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-style: normal;
  background: color-mix(in srgb, var(--accent) 80%, white); color: #241a3d;
  box-shadow: 0 2px 6px rgba(30,18,60,.3);
}
.formaTile__n { font-size: 12px; text-align: center; line-height: 1.25; opacity: .95; }
.formaOv__desc { min-height: 34px; margin: 2px 2px 14px; font-size: 13px; opacity: .8; }
.formaOv__pie { display: flex; gap: 10px; justify-content: flex-end; }
.bt--guay {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 88%, white), color-mix(in srgb, var(--accent) 62%, #ffd9f0));
  color: #241a3d; border: 0; border-radius: 12px; padding: 11px 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), box-shadow .18s ease;
}
.bt--guay:hover { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 55%, transparent); }
.pelea__forma { font-style: normal; font-size: 12px; opacity: .78; }
@media (max-width: 620px) {
  .formaOv__lista { grid-auto-columns: minmax(96px, 1fr); }
  .formaOv__caja { padding: 14px 14px 16px; }
}
/* ===== FIN SELECTOR DE FORMA ===== */

/* ===== ARENA V4 · escenario y calidad ===== */
/* ---- cielo por capas: base, sol, bruma y lomas de fondo ---- */
.pelea__escena {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 78% at 50% 96%, rgba(255, 214, 238, .5) 0%, rgba(255, 214, 238, 0) 58%),
    linear-gradient(180deg, #9fd3ff 0%, #bfe3ff 34%, #e6f3ff 62%, #ffeaf4 84%, #ffe3ef 100%);
}
.pelea__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* sol con halo */
    radial-gradient(circle at 78% 16%, rgba(255, 250, 214, .95) 0 42px, rgba(255, 245, 200, .5) 43px 78px, rgba(255, 245, 200, 0) 128px),
    /* lomas lejanas */
    radial-gradient(58% 32% at 18% 78%, #a9d9a4 0 62%, rgba(169, 217, 164, 0) 63%),
    radial-gradient(70% 38% at 74% 84%, #9ccf9a 0 62%, rgba(156, 207, 154, 0) 63%),
    /* lomas medias */
    radial-gradient(72% 40% at 42% 94%, #8ac48b 0 60%, rgba(138, 196, 139, 0) 61%),
    /* suelo con perspectiva */
    linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 210, 232, .35) 70%, rgba(255, 190, 220, .55) 100%),
    linear-gradient(0deg, #ffd9ec 0%, #ffeaf5 26%, rgba(255, 234, 245, 0) 44%);
}
/* cuadricula suave del suelo, como las arenas del genero */
.pelea__fondo::after {
  content: '';
  position: absolute;
  left: -10%; right: -10%; bottom: 0; height: 40%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px);
  background-size: 46px 26px, 46px 26px;
  mask-image: linear-gradient(180deg, transparent 0%, black 70%);
  transform: perspective(340px) rotateX(52deg);
  transform-origin: bottom center;
  opacity: .55;
}
/* vineta: cierra los bordes y centra la mirada */
.pelea__escena::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(46, 26, 68, .22) 100%);
}

/* ---- las dos plataformas y la sombra de contacto ---- */
.pelea__lado .pelea__bicho { position: relative; z-index: 4; }
.pelea__lado::before {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: min(64%, 300px);
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(60% 100% at 50% 26%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 62%, rgba(214, 190, 255, .28) 100%);
  box-shadow:
    inset 0 -6px 12px rgba(150, 112, 200, .28),
    inset 0 4px 10px rgba(255, 255, 255, .9),
    0 12px 22px rgba(70, 40, 110, .18);
  opacity: .95;
}
/* sombra que pega el bicho al suelo */
.pelea__lado::after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2px;
  width: min(46%, 210px);
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 44, 110, .34), rgba(74, 44, 110, 0) 78%);
  filter: blur(1px);
}

/* ---- barra de vida con cuerpo, brillo y tramos ---- */
.pelea__vida {
  position: relative;
  display: block;
  width: 100%;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(58, 36, 92, .32), rgba(58, 36, 92, .18));
  box-shadow: inset 0 2px 4px rgba(40, 22, 70, .35), 0 1px 0 rgba(255, 255, 255, .55);
  overflow: hidden;
}
.pelea__vida > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #7ce6a8 0%, #35c46f 55%, #1fa458 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: width .42s cubic-bezier(.2, .9, .3, 1), background .3s linear;
}
.pelea__vida > i::after {
  content: '';
  position: absolute;
  inset: 2px 6px auto 6px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12));
}
.pelea__vida > i.baja { background: linear-gradient(180deg, #ffd98a 0%, #f0ad3c 55%, #cf8a1c 100%); }
.pelea__vida > i.crit {
  background: linear-gradient(180deg, #ff9a9a 0%, #ef5b5b 55%, #c53b3b 100%);
  animation: latirVida 1s ease-in-out infinite;
}
@keyframes latirVida { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }
.flashVida { animation: flashVida .42s ease-out; }
@keyframes flashVida {
  0% { filter: brightness(2.1) saturate(1.3); }
  100% { filter: none; }
}

/* ---- el luchador respira y flota un poco cuando esta quieto ---- */
.pelea__bicho .pelea__sprite,
.pelea__bicho .pelea__clip {
  animation: respirar 3.6s ease-in-out infinite;
  transform-origin: 50% 96%;
  will-change: transform;
}
.pelea__lado--rival .pelea__bicho .pelea__sprite,
.pelea__lado--rival .pelea__bicho .pelea__clip {
  animation-duration: 4.1s;
  animation-delay: -1.2s;
}
@keyframes respirar {
  0%   { transform: translateY(0) scale(1, 1); }
  42%  { transform: translateY(-2px) scale(1.004, 1.012); }
  70%  { transform: translateY(1px) scale(0.998, 0.994); }
  100% { transform: translateY(0) scale(1, 1); }
}
/* si el sistema pide menos movimiento, quieto y sin chispas */
@media (prefers-reduced-motion: reduce) {
  .pelea__bicho .pelea__sprite,
  .pelea__bicho .pelea__clip { animation: none; }
  .pelea__vida > i { transition: none; }
  .flashVida { animation: none; }
}

/* ---- tipografia y remates de la interfaz ---- */
.pelea__nombre { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.pelea__hp { font-variant-numeric: tabular-nums; }
.pelea__ficha {
  backdrop-filter: blur(3px);
  border-radius: 14px;
}
.pelea__movs { gap: 10px; }
.pelea__movs .mov {
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), box-shadow .16s ease, border-color .16s ease;
}
.pelea__movs .mov:hover { transform: translateY(-3px); }
.pelea__movs .mov:active { transform: translateY(0) scale(.985); }
/* ===== FIN ARENA V4 ===== */

/* ===== ARENA V5 · simetria garantizada ===== */
/* dos mitades identicas: el espejo deja de depender de calculos */
.pelea__escena {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr !important;
  align-items: end;
  column-gap: 0;
  min-height: 380px;
}
.pelea__fondo { grid-area: 1 / 1 / 2 / 3; }
.pelea__avisos { grid-area: 1 / 1 / 2 / 3; }
.pelea__lado {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(84%, 430px);
  justify-self: center;
  align-self: end;
  z-index: 4;
  padding-bottom: 12px;
}
.pelea__lado--yo { grid-area: 1 / 1 / 2 / 2; }
.pelea__lado--rival { grid-area: 1 / 2 / 3 / 3; align-self: end; transform: translateY(-34px); }
/* la caja del bicho: cuadro cuadrado, el arte se ajusta dentro y se compensa
   con object-position, que las animaciones de transform no pisan */
.pelea__bicho {
  position: relative;
  display: grid;
  place-items: center;
  width: min(70%, 250px) !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.pelea__lado--rival .pelea__bicho { width: min(62%, 225px) !important; }
.pelea__sprite, .pelea__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 96%;
}
/* alturas visibles identicas: se fija por altura del cuadro y contencion */
.pelea__lado--yo .pelea__bicho, .pelea__lado--rival .pelea__bicho { aspect-ratio: 1 / 1; }

@media (max-width: 760px) {
  .pelea__escena { min-height: 300px; }
  .pelea__bicho { width: min(84%, 190px) !important; }
  .pelea__lado--rival .pelea__bicho { width: min(78%, 170px) !important; }
}
/* ===== FIN ARENA V5 ===== */

/* ===== CONTRASTE AA (mapa y pelea) ===== */
/* Morados legibles: mismo aire pastel, pero >= 4.5:1 de contraste.
   Medido con axe-core antes: las etiquetas de zona del mapa daban 2.44:1. */
.mzona__cab span, .mzona__cab span b, .mzona__cab b,
.mzona__minis, .mzona__minis span, .mzona__minis b,
.mapa__zona span, .mapa__zona b { color: #4b3a63 !important; }
.mp__pie { color: #4f4166 !important; }
.mzona__cab, .mzona__minis { text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
/* la leyenda del mapa: sus etiquetas se leian mal sobre el lienzo */
.mleyenda span, .mleyenda b, .mleyenda i { color: #4b3a63 !important; }
/* los contadores en negrita de los filtros del mapa */
button[data-c] > b, button[data-c] > strong,
.filtros > button > b, .mapa__filtros b { color: #43268c !important; }

/* Pelea: turno, nivel y vida sobre el cielo y sobre la tarjeta */
.pelea__turno { color: #3f3057 !important; }
.pelea__nombre, .pelea__nombre b { color: #352a4d !important; }
.pelea__hp { color: #42345c !important; }
.pelea__forma { color: #4a3c66 !important; }
.pelea__sub, .pelea__pie .hint { color: #4b3f63 !important; }
.mov__d { color: #443a5e !important; }
.mov__e { color: #3d2f57 !important; }
.pelea__registro { color: #3a2f52; }
/* el nombre en negrita del registro y de los avisos: morado hondo, no lavado */
.pelea__registro b, .pelea__registro strong,
.pjAviso b, .pjAviso strong { color: #43268c !important; }
/* ===== FIN CONTRASTE AA ===== */

/* ===== TACTIL MOVIL (44 px) ===== */
/* En pantalla tactil todo lo pulsable mide al menos 44x44 (norma de accesibilidad
   tactil). Medido antes: los botones de agrandar de las tarjetas eran 28x28 y las
   listas del mapa 34 de alto. */
@media (max-width: 1100px), (pointer: coarse) {
  #vista button, #vista [role="button"], #vista input[type="button"],
  #vista input[type="submit"], #vista a.btn, #vista a.bt {
    min-height: 44px;
  }
  #vista button:not(.pjCard):not(.mov):not(.tarjeta):not(.carta) { min-width: 44px; }
  /* los botones de icono de las esquinas: crece la zona de toque, no el dibujo */
  #vista button > span:only-child, #vista button > i:only-child { pointer-events: none; }
  .pelea__movs, .pelea__barra { gap: 10px; }
}
/* En el telefono, ninguna etiqueta por debajo de 12 px: las micro-etiquetas
   (roles, rarezas, totales, nombres de la galeria) se quedaban en 10,5 px. */
@media (max-width: 700px) {
  #vista .ficha b, #vista .ficha small, #vista .meta b, #vista .tagline b,
  #vista .ficha .meta span, #vista .pjz b, #vista .lvl b, #vista .sim b,
  #vista small, #vista em, #vista .tag, #vista .varbadge, #vista .obj__rar,
  #vista .pjCard b, #vista .pjCard__e, #vista .tarjeta b, #vista .tarjeta small,
  #vista .galcard__play, #vista .mzona__cab span, #vista .mzona__minis,
  #vista .mp__pie, #vista .mov__d, #vista .pelea__hp { font-size: 12.5px; }
}
/* Controles de los talleres y el simulador en el telefono: deslizadores, casillas
   y desplegables comodos de tocar, y las letras del radar legibles. */
@media (max-width: 700px) {
  #vista select, #vista input[type="range"], #vista input[type="number"],
  #vista .tb__sel { min-height: 44px; }
  #vista input[type="range"] { padding: 11px 0; }
  #vista input[type="checkbox"], #vista input[type="radio"] { min-width: 26px; min-height: 26px; }
  #vista label:has(input[type="checkbox"]), #vista label:has(input[type="radio"]) {
    min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 4px; }
  #vista svg text, #vista .tipo, #vista i, #vista .libres { font-size: 12px; }
}
/* ===== FIN TACTIL MOVIL ===== */

/* ===== HOJA DE FORMAS v2 ===== */
/* --- fondo y caja --- */
.formaOv__velo { backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.formaOv__caja {
  width: min(980px, calc(100% - 20px));
  padding: 18px 20px 16px;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -22px 60px rgba(30, 18, 60, .38);
}
.formaOv__cab { gap: 14px; margin-bottom: 12px; }
.formaOv__icon {
  width: 56px; height: 56px; padding: 5px; border-radius: 18px;
  background: radial-gradient(circle at 30% 25%, #fff, color-mix(in srgb, var(--accent) 26%, white));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, white);
}
.formaOv__tit { font-size: 23px; letter-spacing: .2px; }
.formaOv__sub { font-size: 13.5px; opacity: .78; }
.formaOv__x {
  min-width: 46px; min-height: 46px; padding: 0 12px;
  border-radius: 14px; font-size: 17px; font-weight: 700; line-height: 1;
}
.formaOv__x:hover { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }

/* --- tira de formas: tarjetas del mismo tamano y sin desbordar --- */
.formaOv__lista {
  display: grid; grid-auto-flow: column; grid-auto-columns: 164px;
  gap: 12px; overflow-x: auto; overflow-y: hidden;
  padding: 6px 4px 12px; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  align-items: start;
}
.formaTile {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  padding: 10px 10px 9px; scroll-snap-align: start;
  border-radius: 18px; border: 2px solid var(--border);
  background: color-mix(in srgb, var(--card) 94%, white);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), border-color .18s ease, box-shadow .18s ease;
}
.formaTile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
/* la caja de la foto manda: la imagen se encaja dentro, nunca la desborda */
.formaTile__foto {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 13px;
  background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.formaTile__foto img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  object-fit: contain;
  /* pies abajo: asi todas las criaturas se apoyan en la misma linea */
  object-position: center bottom; display: block;
}
.formaTile__n {
  font-size: 13px; line-height: 1.25; text-align: center;
  min-height: 33px; display: grid; place-items: center; opacity: .95;
}
.formaTile__play {
  width: 31px; height: 31px; right: 6px; bottom: 6px;
  font-size: 13px; padding: 0; line-height: 1; place-items: center;
  text-indent: 1px;
  background: linear-gradient(140deg, #fff, color-mix(in srgb, var(--accent) 55%, white));
  color: #241a3d; box-shadow: 0 3px 10px rgba(30, 18, 60, .35);
  border: 1px solid rgba(255, 255, 255, .8);
}
/* forma elegida: anillo dorado y palomita, sin dudas */
.formaTile.on {
  border-color: #d8a51f;
  box-shadow: 0 0 0 3px color-mix(in srgb, #f0c04a 55%, transparent), 0 10px 24px rgba(30, 18, 60, .18);
}
.formaTile.on::after {
  content: "✓"; position: absolute; top: 8px; left: 8px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(140deg, #ffe9a8, #e8a91d);
  color: #4a2f06; font-size: 15px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(120, 80, 0, .35);
}
.formaTile { position: relative; }

/* --- descripcion y pie --- */
.formaOv__desc { font-size: 14px; opacity: .85; min-height: 40px; margin: 0 2px 14px; }
.formaOv__pie { gap: 12px; align-items: center; }
.formaOv__pie .bt { min-height: 48px; font-size: 15px; }
/* el boton suave no existia: por eso "Cancelar" salia gris del navegador */
.bt--suave {
  background: #fff; color: #3a2b57;
  border: 2px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 14px; padding: 12px 22px; font-weight: 700; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.bt--suave:hover { background: color-mix(in srgb, var(--accent) 12%, white); border-color: var(--accent); }
.bt--guay { border-radius: 14px; padding: 13px 24px; font-size: 15px; }
.bt--guay:hover { transform: translateY(-2px); }

/* --- movil: tarjetas que se ven bien y se tocan bien --- */
@media (max-width: 700px) {
  .formaOv__lista { grid-auto-columns: 138px; gap: 10px; }
  .formaOv__caja { padding: 14px 14px 12px; border-radius: 22px 22px 0 0; }
  .formaOv__tit { font-size: 20px; }
  .formaOv__pie { flex-direction: column-reverse; align-items: stretch; }
  .formaOv__pie .bt { width: 100%; }
}
/* ===== FIN HOJA DE FORMAS v2 ===== */

/* ===== ELEGIR ANIIMO v2 ===== */
/* --- cabecera de la pantalla --- */
.pelea__t { font-size: 27px; letter-spacing: .2px; }
.pelea__sub { font-size: 14.5px; opacity: .82; }
.pelea__buscar input {
  min-height: 48px; font-size: 15px; border-radius: 14px; padding: 0 16px;
  border: 2px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--card) 92%, white);
}
.pelea__buscar input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px;
  border-color: var(--accent);
}
.pelea__pie { gap: 12px; }
.pelea__pie .bt { min-height: 48px; font-size: 15px; }

/* --- rejilla: tarjetas con cuerpo y el arte grande (estaba clavado a 58 px) --- */
.pelea__rejilla { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.pelea__elegir .pjCard, .pjCard {
  padding: 12px 10px 11px; gap: 7px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(150, 110, 200, .10);
}
.pjCard__foto {
  width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center;
  position: relative; overflow: hidden; border-radius: 14px;
  background: radial-gradient(circle at 50% 76%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 72%);
}
/* el arte es hijo directo de la tarjeta: tiene que ocupar sitio, no salirse del flujo */
.pjCard > img {
  position: static; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: contain; object-position: center; display: block;
}
/* y si algun dia va envuelto, se encaja igual */
.pjCard__foto img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
.pjCard__n { font-size: .875rem; line-height: 1.2; }
.pjCard__e { font-size: .75rem; }
.pjCard__e img { width: 15px; height: 15px; }
.pjCard:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(190, 130, 230, .26); }
/* elegido: anillo claro para saber quien es quien */
.pjCard--yo { outline: 3px solid #d89b1e; outline-offset: 2px; }
.pjCard--yo::after {
  content: "✓"; position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(140deg, #ffe9a8, #e8a91d); color: #4a2f06;
  font-size: 15px; font-weight: 700; box-shadow: 0 2px 8px rgba(120, 80, 0, .38);
}
.pjCard--rival { outline: 3px solid #e2719f; outline-offset: 2px; }
.pjCard__yo { font-size: 11.5px; padding: 2px 9px; }
.pjCard:focus-visible { outline: 3px solid #b98cff; outline-offset: 2px; }

/* --- movil --- */
@media (max-width: 700px) {
  .pelea__rejilla { gap: 10px; }
  .pelea__t { font-size: 22px; }
  .pelea__pie { flex-direction: column-reverse; align-items: stretch; }
  .pelea__pie .bt { width: 100%; }
}
/* ===== FIN ELEGIR ANIIMO v2 ===== */

/* ===== OBJETOS Y EQUIPO v2 ===== */
/* --- objetos: el icono tenia 52 px en una tarjeta de 121 y el nombre iba a 13 px --- */
.obj {
  align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: 18px;
}
.obj > img {
  width: 76px; height: 76px; flex: 0 0 76px; padding: 8px;
  border-radius: 16px; object-fit: contain;
  background: radial-gradient(circle at 34% 28%, #fff, color-mix(in srgb, var(--rc, var(--accent)) 20%, white));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 4px 12px rgba(150, 110, 200, .16);
}
/* escudos de elemento: venian de arte de 256 px dibujado a 15 px */
.chips .chip { font-size: 13px; padding: 4px 10px; gap: 6px; min-height: 28px; }
.chip > img, .chip img { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.obj__sin { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 16px; }
.obj__tx { gap: 4px; }
.obj__tx b { font-size: 15.5px; line-height: 1.2; }
.obj__rar { font-size: 12.5px; letter-spacing: .2px; }
.obj__tx i { font-size: 13.5px; line-height: 1.35; opacity: .9; }
.obj__tx em { font-size: 12.5px; opacity: .78; }

/* (equipo: sus retratos estan ocultos; no habia nada que arreglar) */

@media (max-width: 700px) {
  .obj { gap: 11px; padding: 10px 11px; }
  .obj > img { width: 64px; height: 64px; flex: 0 0 64px; padding: 6px; border-radius: 14px; }
  .obj__tx b { font-size: 14.5px; }
}
/* ===== FIN OBJETOS Y EQUIPO v2 ===== */

/* ===== AVISO DE EFICACIA ===== */
.mov__ef {
  display: inline-block; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px; line-height: 1.5;
}
.mov__ef--bien { background: #cdf3dc; color: #14603a; box-shadow: inset 0 0 0 1px #8edcb0; }
.mov__ef--mal { background: #ffdde2; color: #85192e; box-shadow: inset 0 0 0 1px #ffadba; }
/* ===== FIN AVISO ===== */

/* ===== EQUIPO v2 ===== */
.eq { display: flex; flex-direction: column; gap: 16px; }

/* --- cabecera --- */
.eq__cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.eq__t { margin: 0; font-size: 27px; line-height: 1.15; color: #2f2145; }
.eq__sub { margin: 4px 0 0; font-size: 14.5px; color: #6d5588; }
.eq__cuenta {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 9px 18px; border-radius: 999px;
  background: linear-gradient(140deg, #ffe9f6, #f0e6ff); border: 2px solid #f3d9f0;
  box-shadow: 0 4px 14px rgba(180, 130, 220, .16); color: #4a2f6b;
}
.eq__cuenta b { font-size: 22px; line-height: 1; }
.eq__cuenta i { font-style: normal; font-size: 14px; opacity: .75; }

/* --- estructura de dos columnas --- */
.eq__dos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.eq__principal, .eq__lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.eq__caja {
  background: #fff; border: 2px solid #f4e6fb; border-radius: 22px; padding: 18px 20px 20px;
  box-shadow: 0 6px 20px rgba(160, 120, 210, .09);
}
.eq__caja:empty { display: none; }
.eq__h3 {
  margin: 0 0 14px; font-size: 16.5px; font-weight: 700; color: #3a2b52;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.eq__marca {
  font-size: 13px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  background: #f3e9ff; color: #5b3fa0;
}
.eq__nota {
  margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: #6a5588;
  background: #fbf7ff; border: 1px dashed #ecdcf8; border-radius: 14px; padding: 10px 13px;
}
.eq__nota--alerta { background: #fff8ec; border-color: #ffe0b3; color: #7d5312; }
.eq__nota b { color: #4a2f6b; }

/* --- tarjetas del equipo --- */
.eq__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.eqSlot {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; min-height: 96px;
  border: 2px solid color-mix(in srgb, var(--c, #e8d6f5) 45%, #fff);
  border-radius: 18px; background: linear-gradient(140deg, #fff, color-mix(in srgb, var(--c, #f6ecff) 12%, #fff));
  box-shadow: 0 4px 14px rgba(160, 120, 210, .10);
  transition: transform .16s ease, box-shadow .16s ease;
}
.eqSlot:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(180, 130, 220, .22); }
.eqSlot__foto {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 16px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 78%, color-mix(in srgb, var(--c, #e0c8f5) 26%, transparent), transparent 74%);
}
.eqSlot__foto img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.eqSlot__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.eqSlot__n { font-size: 16px; font-weight: 700; color: #33224d; line-height: 1.15; }
.eqSlot__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eqSlot__acc { display: flex; flex-direction: column; gap: 6px; }
.eqSlot__acc .btn { min-height: 30px; font-size: 12.5px; }

.eqSlot--vacio {
  border: 2px dashed #e3cff5; background: linear-gradient(140deg, #fffdff, #faf3ff);
  color: #7d639c; cursor: pointer; justify-content: center; gap: 10px;
  font: inherit; text-align: left; flex-direction: column; align-items: center;
}
.eqSlot--vacio:hover { border-color: #c9a6ee; background: #fbf5ff; }
.eqSlot__mas {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #ffe4f4, #ece0ff); color: #7c4bd0; font-size: 22px; font-weight: 700;
}
.eqSlot__txt { font-size: 13.5px; font-weight: 600; color: #7d639c; }

.eqElMini, .eqRolMini {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c, #ddd) 16%, #fff);
  color: #40305c; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, #ccc) 42%, #fff);
}
.eqElMini img { width: 17px; height: 17px; object-fit: contain; }
.eqRolMini { background: color-mix(in srgb, var(--c, #ddd) 20%, #fff); }

/* --- cobertura elemental --- */
.eq__elem { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.eqEl {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px;
  background: #fbf8ff; border: 2px solid #f0e6fa; font-size: 13.5px; font-weight: 600; color: #4a3a63;
  min-height: 46px;
}
.eqEl img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.eqEl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eqEl b { color: #17794a; font-size: 15px; }
.eqEl i { font-style: normal; font-size: 12.5px; font-weight: 700; color: #a8621f; }
.eqEl.on { background: color-mix(in srgb, var(--c, #cfe) 13%, #fff); border-color: color-mix(in srgb, var(--c, #cfe) 40%, #fff); }

/* --- roles --- */
.eq__roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.eqRol { display: flex; align-items: center; gap: 11px; font-size: 13.5px; }
.eqRol__n { width: 74px; flex: 0 0 74px; font-weight: 700; color: #40305c; }
.eqRol__barra { flex: 1; height: 9px; border-radius: 999px; background: #f2ecf9; overflow: hidden; }
.eqRol__barra i { display: block; height: 100%; border-radius: 999px; background: var(--c, #b98cff); transition: width .25s ease; }
.eqRol b { width: 22px; text-align: right; font-size: 14px; color: #33224d; }

/* --- sugerencias --- */
.eqSug + .eqSug { margin-top: 12px; }
.eqSug__et { display: block; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #8a72a8; margin-bottom: 7px; }
.eqSug__fila { display: flex; flex-wrap: wrap; gap: 8px; }
.eqChip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--c, #e0c8f5) 40%, #fff); background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #3b2c56; cursor: pointer;
  box-shadow: 0 2px 8px rgba(160, 120, 210, .12); min-height: 42px;
}
.eqChip:hover { background: #fdf8ff; transform: translateY(-2px); }
.eqChip img { width: 28px; height: 28px; object-fit: contain; }
.eqChip b { font-size: 12.5px; color: #7c4bd0; background: #f4ecff; padding: 2px 8px; border-radius: 999px; }

/* --- anadir --- */
.eq__busca {
  width: 100%; min-height: 48px; font: inherit; font-size: 15px; color: #3a2b52;
  padding: 0 16px; border-radius: 14px; border: 2px solid #f0dcf7; background: #fff; margin-bottom: 12px;
}
.eq__busca:focus-visible { outline: 3px solid #d9b8ff; outline-offset: 1px; border-color: #c79cf5; }
.eq__lista {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
  max-height: 420px; overflow: auto; padding: 3px;
}
.eqAdd {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 8px; border-radius: 16px;
  border: 2px solid #f3e6fb; background: linear-gradient(140deg, #fff, #fdf9ff); cursor: pointer; font: inherit;
  transition: transform .14s ease, box-shadow .14s ease;
}
.eqAdd:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(180, 130, 220, .18); border-color: color-mix(in srgb, var(--c, #dcc) 45%, #fff); }
.eqAdd img { width: 66px; height: 66px; object-fit: contain; object-position: center bottom; }
.eqAdd__n { font-size: 13.5px; font-weight: 700; color: #33224d; text-align: center; }
.eqAdd__r { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #f4ecff; color: #6b48ad; }

/* --- mis aniimo guardados --- */
.eq__mios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.eqMio {
  display: flex; gap: 12px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(140deg, #fff, #fbf7ff);
  border: 2px solid color-mix(in srgb, var(--c, #e8d6f5) 40%, #fff); box-shadow: 0 4px 14px rgba(160, 120, 210, .10);
}
.eqMio__foto { width: 68px; height: 68px; flex: 0 0 68px; object-fit: contain; object-position: center bottom; border-radius: 14px; background: radial-gradient(circle at 50% 78%, #f6ecff, transparent 74%); }
.eqMio__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.eqMio__tx b { font-size: 15.5px; color: #33224d; }
.eqMio__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.eqMio__meta i { font-style: normal; font-size: 12.5px; color: #6a5588; background: #f7f2ff; border-radius: 999px; padding: 3px 9px; }
.eqMio__acc { display: flex; flex-wrap: wrap; gap: 6px; }
.eqMio__acc .btn { min-height: 30px; font-size: 12.5px; }

.btn--x { color: #a3344f; }
.btn--x:hover { background: #ffe9ee; }

/* --- movil --- */
@media (max-width: 1100px) {
  .eq__dos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .eq__t { font-size: 23px; }
  .eq__caja { padding: 14px 14px 16px; border-radius: 18px; }
  .eq__h3 { font-size: 15.5px; }
  .eq__rejilla { grid-template-columns: minmax(0, 1fr); }
  .eq__elem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eqSlot { min-height: 104px; }
  .eqSlot__acc { flex-direction: row; }
  .eq__lista { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 320px; }
  .eqAdd img { width: 56px; height: 56px; }
}
/* ===== FIN EQUIPO v2 ===== */

/* ===== ANIIDEX LEGIBLE ===== */
/* Medido antes: los totales de stats a 10 px, los chips a 10,5 px, los escudos de 12 px
   y el boton de twining de 28x28. Hay estilos en linea (del motor de contraste) que fijan
   algunos de esos tamanos, asi que van con !important para que ganen. */
.ficha .n b { font-size: 16px !important; line-height: 1.2; }
.ficha .n span { font-size: 12.5px !important; }
.ficha .tagline { gap: 6px !important; margin-top: 7px !important; font-size: 12.5px !important; }
.ficha .tagline > span { font-size: 12.5px !important; }
.ficha .tagline b { font-size: 13px !important; font-weight: 700; }
.ficha .tag { font-size: 12.5px !important; padding: 4px 10px !important; gap: 5px; }
.ficha .tag img { width: 16px !important; height: 16px !important; }
.ficha .tag.tier, .ficha .tag.tier b { font-size: 12.5px !important; padding: 4px 9px !important; }
.ficha .varbadge { font-size: 12.5px !important; padding: 3px 9px !important; }
.ficha__tw {
  width: 36px; height: 36px; border-radius: 12px; font-size: 16px;
  display: grid; place-items: center; right: 10px; bottom: 10px;
}
.ficha .meta { padding: 10px 12px 12px; }

@media (max-width: 700px) {
  .ficha__tw { width: 44px; height: 44px; }
  .ficha .n b { font-size: 16.5px !important; }
  .ficha .tag, .ficha .tagline > span { font-size: 13px !important; }
}
/* ===== FIN ANIIDEX LEGIBLE ===== */

/* ===== ENLACE PARA SALTAR AL CONTENIDO ===== */
.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  padding: 12px 20px; border-radius: 0 0 14px 14px; background: #7c4bd0; color: #fff;
  font-weight: 700; font-size: 14px; text-decoration: none; transition: top .16s ease;
}
.saltar:focus { top: 0; outline: 3px solid #ffd9ef; outline-offset: 2px; }

/* ===== ARREGLOS DEL BARRIDO TOTAL ===== */
/* ---------- GALERIA: 9, 10 y 10,5 px -> legibles ---------- */
.galcard__play { font-size: 13px !important; width: 30px; height: 30px; display: grid; place-items: center; }
.gcard small, .galcard small { font-size: 13px !important; }
.galcard em, .gcard em, #vista em { font-size: 12.5px !important; line-height: 1.35; }
.galcard__n, .gcard__t { font-size: 15px !important; }

/* ---------- TIPOS: 11 px -> 12,5 y retratos dentro de su caja ---------- */
.mu__x { font-size: 12.5px !important; }
.mu i, .tipos i, .vsdos i { font-size: 12.5px !important; }
.vsdos__retrato { overflow: hidden; }
.vsdos__retrato img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; }

/* ---------- GUIA: las ilustraciones se recortaban 47 px ---------- */
.gcard__foto img, .gcard__img img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; }
.gcard__num { font-size: 12.5px !important; }
.gcard__ver { font-size: 13px !important; }
.hint { font-size: 12.5px; }

/* ---------- MAPA: controles bajos y letras de 10,5-11 px ---------- */
.mlayer { min-height: 44px !important; font-size: 13px !important; }
.mtab { min-height: 44px !important; font-size: 13px !important; padding: 8px 14px !important; }
.mzona__cab, .mzona__cab span { font-size: 13.5px !important; }
.mzona__minis, .mzona__minis span { font-size: 12.5px !important; }
.mleyenda, .mleyenda span { font-size: 12.5px !important; }
.mapa2__q { min-height: 44px !important; font-size: 14px !important; }
#vista .mapa2 i, #vista .mzona i { font-size: 12.5px !important; }

/* ---------- BUILD: deslizadores y selectores de 22-33 px ---------- */
.pot { min-height: 44px !important; }
.eje__v, .tb__sel { min-height: 44px !important; font-size: 13.5px !important; }
input[type=range] { min-height: 44px; }
#vista svg text { font-size: 12.5px !important; }
.eje__t, .eje__n { font-size: 13px !important; }
.tb__t, .tb__n { font-size: 13px !important; }

/* ---------- COMBATE: deslizadores, casillas y botones pequenos ---------- */
#vista input[type=range] { min-height: 44px; }
#vista input[type=checkbox] { min-width: 24px; min-height: 24px; }
#vista label:has(input[type=checkbox]) { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; }
#vista .btn.mini { min-height: 38px !important; font-size: 13px !important; padding: 6px 12px !important; }
.cb i, .cb span, #vista .cb b { font-size: 12.5px !important; }
.cb__t, .cb__n { font-size: 14px !important; }

/* ---------- ENCICLOPEDIA: botones de 37 px ---------- */
.enc__btn { min-height: 44px !important; font-size: 13.5px !important; }

/* ---------- EQUIPO: "Oscuridad" salia cortado (era mi text-overflow) ---------- */
.eqEl span { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; }
.eqEl { align-items: center; }

/* ---------- Movil: lo mismo, con un punto mas ---------- */
@media (max-width: 700px) {
  .galcard__play { width: 34px; height: 34px; font-size: 14px !important; }
  .galcard em, .gcard em, #vista em { font-size: 13px !important; }
  .mlayer, .mtab, .enc__btn, .btn.mini { min-height: 46px !important; }
}
/* ===== FIN ARREGLOS DEL BARRIDO ===== */

/* ===== BARRIDO FINO ===== */
/* Guia: las tarjetas recortaban las criaturas (la caja es 104x104 y la imagen venia a
   100x149). object-fit solo funciona si la imagen tiene alto fijo: se le da. */
.gcard__foto { display: grid; place-items: center; }
.gcard__foto img { width: 100% !important; height: 100% !important; object-fit: contain !important; }

/* Suelos de letra: lo que quedaba por debajo de 12,5 px en el barrido */
.matchups b, .mu b, .mu__x, .tabla b, .tipos b, .vsdos b,
.mu__n, .mu__t { font-size: 12.5px !important; }
.badge { font-size: 12px !important; }
.mp__pie, .mp__pie b, .mtab, .mlayer, .tag.hb, .mp__hint { font-size: 12.5px !important; }
.aa__k, .aa__delta, .tbpot__k, .pot__k, .eje__p, .eje__v, .radar__k,
.build th, .build td, .tb th, .tb td, .delta { font-size: 12.5px !important; }
.cb__rol, .combate th, .combate td, .tag.rol, .tag.tipo, .t-fis, .t-vs { font-size: 12.5px !important; }
#vista i { font-size: 12.5px !important; }

/* Botones y controles pequenos de verdad (medidos 32x38, 198x33 y 24x24) */
.mapa .btn, .mfab, .btn.btn--punto { min-width: 40px !important; min-height: 40px !important; }
.eje__p, .aa__p { min-height: 40px !important; }
#vista input[type=checkbox] { width: 22px !important; height: 22px !important; }
#vista input[type=range] { height: 26px !important; }
.pot, .aa__d { min-height: 40px; }
/* ===== FIN BARRIDO FINO ===== */

/* ===== BARRIDO 3 (v2): imagenes recortadas y ultimos textos diminutos =====
   Medido con el navegador: la imagen de la guia salia 100x149 dentro de 104x104 y la de
   tipos 72x116 dentro de 76x76 (se recortaban cabezas y colas). En este proyecto, ni
   height:100% ni position:absolute sirven para imagenes: el porcentaje no encuentra
   altura y el absoluto las pone a tamano natural (2488x3850 medidos). Lo que SI funciona,
   comprobado: alto en pixeles + tope de ancho. La imagen entera cabe y queda centrada. */
.gcard__foto img, .vsdos__retrato img {
  height: 96px !important; width: auto !important;
  max-width: 96px !important; max-height: 96px !important;
  object-fit: contain !important; object-position: center !important;
}
.vsdos__retrato img { height: 68px !important; max-width: 68px !important; max-height: 68px !important; }
.gcard__foto, .vsdos__retrato { display: grid; place-items: center; overflow: hidden; }

/* textos que aun quedaban por debajo de 12,5 px (medidos uno a uno, con su clase) */
.brand small, .pie b, .pie__nota, .topbar .sub, .sub,
.tag.tier b, .tipos .badge, .tipos__leyenda .badge,
.mtab, .mtab b, .mp__pie span, .mp__pie b,
.cb__lv b, .cb__retrato b, .cb__hpnum, label.sl b, label.sl,
.tb__nom b, .tag.tier, .badge, .mu b, .mu__x { font-size: 12.5px !important; }

/* ESTE era el peor: un boton de 105x17 px, imposible de pulsar */
.perfil__cam { min-height: 32px !important; padding: 6px 10px !important; font-size: 12.5px !important; }
.perfil__cam i { font-size: 14px !important; }
/* #vista input[type=checkbox] { width: 24px !important; height: 24px !important; }  (24 px ya es correcto) */
/* ===== FIN BARRIDO 3 (v2) ===== */

/* controles: los botones del mapa, minimo comodo para el dedo */
.mapa .btn, .mp__barra button, .mp__ctrls button { min-height: 40px !important; min-width: 40px !important; }
#vista input[type=range] { height: 30px !important; }

/* el avatar del perfil no existe hasta que hay imagen: asi nunca sale el icono de roto */
.perfil__av:not([src]), .perfil__av[src=''] { display: none !important; }

/* ===== BARRIDO 4: lo ultimo, con la prioridad correcta =====
   Las reglas de antes no ganaban porque las del proyecto empiezan por #vista y eso manda
   sobre las mias. Aqui van con la misma o mas prioridad, y despues: yo voy mas abajo, asi
   que gano. Medido: quedaban 12 badges a 12 px, 13 valores a 11,5 px y varios th a 11 px. */

#vista .tagline span, #vista .tagline b, #vista .tag.tier b, #vista .tag.tier span,
#vista .card b, #vista .card span, #vista .card .badge, #vista .badge,
#vista .tb__nom b, #vista .tb__bonok, #vista .aa__lg, #vista .mu b, #vista .mu__x,
#vista th, #vista td, #vista .delta, #vista .tipo, #vista .tag.rol, #vista .cb__lv b,
#vista .cb__hpnum, #vista label.sl b, #vista .mtab, #vista .mp__pie span, #vista .mp__pie b,
.side .brand small, .side .pie b, .side .pie__nota, .topbar .sub, #vista .sub
{ font-size: max(12.5px, 1em) !important; }

/* el boton de cambiar de compi: paso de 17 px a 36, y el de twining a 40 */
.perfil__cam, #vista .ficha__tw { min-height: 36px !important; min-width: 36px !important; padding: 6px 10px !important; }
#vista .ficha__tw { min-width: 40px !important; min-height: 40px !important; }

/* los botones .btn.mini se quedan en 38 px a proposito: en escritorio es un tamano comodo
   y subirlos descoloca las barras del mapa y de los talleres. */
/* ===== FIN BARRIDO 4 ===== */

/* ===== BARRIDO 5: la ultima vuelta, con prioridad maxima =====
   Seguian quedando 12 px en las etiquetas de las tarjetas del Aniindex y 11-11,5 px en el
   mapa. Mis reglas llevaban #vista, pero las del proyecto llevan mas (id + clases
   encadenadas). Estas van con html body delante y detras de todo el fichero: ganan. */
html body #vista .tagline span, html body #vista .tagline b, html body #vista .tagline i,
html body #vista .tag.tier, html body #vista .tag.tier b, html body #vista .badge,
html body #vista .card .tier, html body .side .brand small, html body .side .pie b,
html body .side .pie__nota, html body .side .perfil__cam, html body .topbar .sub,
html body #vista .mp__pie, html body #vista .mp__pie span, html body #vista .mp__pie b,
html body #vista .mtab, html body #vista .mtab b, html body #vista .mp__tabs span,
html body #vista .mapa span, html body #vista .mapa b, html body #vista .mapa i
{ font-size: max(12.5px, 1em) !important; }
/* ===== FIN BARRIDO 5 ===== */

/* los iconos de tipo median 12x12 px: demasiado pequenos para distinguirlos */
html body #vista span.tag img, html body #vista .badge img, html body #vista img[src*='/badges/']
{ width: 15px !important; height: 15px !important; }


/* ---------- idioma (Castellano / English) ---------- */
.idioma{display:inline-flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line);
  border-radius:999px;background:var(--card);box-shadow:0 6px 16px -10px rgba(120,80,200,.45);flex:0 0 auto}
.idioma__b{min-width:46px;height:44px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  color:var(--tx2);font:700 12.5px/1 inherit;letter-spacing:.6px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .12s ease}
.idioma__b:hover{color:var(--tx);background:rgba(255,79,216,.12)}
.idioma__b:active{transform:scale(.96)}
.idioma__b[aria-pressed="true"]{background:linear-gradient(135deg,var(--acc),#ff8ae0);color:#fff;
  box-shadow:0 8px 18px -10px var(--acc)}
.idioma__b:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
@media (max-width:760px){.idioma{padding:2px}.idioma__b{min-width:42px;height:36px;font-size:12px}}
/* (retirado) el candado premium vive ahora en secciones.css, no aqui */