/* Duelos Troll MLBB - componentes: filas y tarjetas de héroe, rejilla de ítems, contenido de la
   ficha (tira de 6 espacios, chips de ítem y de héroe, barras), duelo y Guía. */

/* ---------- reglas base (desplegable) ---------- */
.base{background:var(--card);border-radius:12px;margin-bottom:8px;overflow:hidden}
.base summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:10px 16px;font-size:17px;
}
.base summary::-webkit-details-marker{display:none}
.base summary::after{
  content:"";width:8px;height:8px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);
  transform:rotate(-45deg);margin-right:4px;flex:none;
}
.base[open] summary::after{transform:rotate(45deg)}
.base ol{margin:0;padding:4px 16px 14px 36px;color:var(--fg2);font-size:15px;line-height:21px}
.base li+li{margin-top:6px}

/* ---------- lista de héroes: filas agrupadas por letra (teléfono) ---------- */
.grp{margin-top:4px}
.letter{
  position:sticky;top:calc(var(--top-h) + env(safe-area-inset-top,0px));z-index:2;
  margin:0;padding:8px 16px 4px;background:var(--bg);
  font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;color:var(--fg2);
}
.rows{list-style:none;margin:0;padding:0;background:var(--card);border-radius:12px;overflow:hidden}
.rows li{position:relative}
.rows li+li::before{content:"";position:absolute;top:0;left:76px;right:0;height:.5px;background:var(--sep)}
.row{
  display:flex;align-items:center;gap:12px;width:100%;min-height:72px;
  padding:10px 14px 10px 16px;border:0;background:transparent;color:var(--fg);
  font-size:inherit;text-align:left;cursor:pointer;
}
.row:active{background:var(--fill)}
.row:focus-visible,.base summary:focus-visible,.dt summary:focus-visible{outline-offset:-3px}
.rt{flex:1;min-width:0;display:flex;flex-direction:column}
.nm{font-size:17px;line-height:22px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb{
  font-size:13px;line-height:18px;color:var(--fg2);overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
}
.rl{font-weight:500}
.chev{flex:none;width:8px;height:8px;border-right:2px solid var(--fg3);border-top:2px solid var(--fg3);transform:rotate(45deg);margin-left:2px;margin-right:2px}

.empty{grid-column:1 / -1;background:var(--card);border-radius:12px;padding:24px 16px;color:var(--fg2);font-size:15px;line-height:21px}
.empty p{margin:0 0 8px}

/* ---------- lista de héroes: rejilla de tarjetas (desde tablet) ---------- */
@media (min-width:700px){
  .hlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .hlist .grp,.hlist .rows{display:contents}
  .hlist .letter{display:none}
  .hlist .rows li{display:grid}
  .hlist .rows li::before{display:none}
  .hlist .row{
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
    column-gap:10px;row-gap:0;align-items:start;
    min-height:0;height:100%;padding:12px;background:var(--card);border-radius:12px;
  }
  .hlist .rt,.hlist .sb{display:contents}
  .hlist .av{grid-column:1;grid-row:1 / span 2}
  .hlist .nm{grid-column:2;grid-row:1;font-size:16px;line-height:22px;font-weight:600;align-self:end}
  .hlist .rl{grid-column:2;grid-row:2;font-size:13px;line-height:18px;color:var(--fg2);font-weight:400}
  .hlist .dot{display:none}
  .hlist .ru{
    grid-column:1 / -1;grid-row:3;margin-top:8px;font-size:13px;line-height:18px;color:var(--fg2);overflow:hidden;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  }
  .hlist .tag{grid-column:1 / -1;grid-row:4;justify-self:start;margin-top:8px}
  .hlist .chev{display:none}
  .hlist .row:active{background:var(--card);opacity:.8}
}
@media (min-width:900px){
  .hlist{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px){
  .hlist{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .hlist .av{width:42px;height:42px;font-size:19px}
  .hlist .nm{font-size:15px}
  .row.is-cur,.tile.is-cur{box-shadow:inset 0 0 0 2px var(--accent)}
}

/* ---------- pestaña Ítems: rejilla de iconos por pestaña de la tienda ---------- */
.ilist{min-width:0}
.icat{margin-top:4px}
.icat .letter{padding-left:4px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tile{
  display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;
  padding:10px 4px;border:0;border-radius:12px;background:var(--card);color:var(--fg);
  font-size:12px;line-height:15px;text-align:center;cursor:pointer;
}
.tile:active{opacity:.7}
.tn{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
@media (min-width:700px){
  .tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .tile{font-size:13px;line-height:17px}
}

/* ---------- ficha: cabecera y tarjetas ---------- */
.detail h2{margin:0;font-size:28px;line-height:34px;font-weight:700;letter-spacing:.36px}
.detail .cap{margin-top:18px}
.hhead{display:flex;align-items:center;gap:14px;padding-top:6px}
.hhead > div{min-width:0}
.hhead p{margin:2px 0 0;font-size:15px;line-height:21px;color:var(--fg2)}
.hhead .tag{margin-left:4px;vertical-align:1px}
.pad{padding:8px 4px 0;margin:0}
.scard{background:var(--sheet-card);border-radius:12px;padding:12px 16px;font-size:17px;line-height:23px}
.scard p{margin:0}
.scard.tight{padding:10px}
.scard.stats{display:flex;flex-direction:column;gap:6px}
.srow{display:flex;justify-content:space-between;gap:12px;font-size:15px;line-height:21px}
.srow span{color:var(--fg2)}
.srow b{font-weight:600;font-variant-numeric:tabular-nums}
.fc{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}
.fc > div{display:flex;flex-direction:column}
.fc .scard{flex:1}

/* ---------- ficha: "Qué puedes comprar" ---------- */
.buy{display:flex;flex-direction:column;gap:10px}
.buy .tags{margin-top:0}
.rule{font-weight:600}
.cnt{font-size:15px;line-height:21px}
.giro{font-size:15px;line-height:21px;font-weight:600;color:var(--r-luchador)}
.note,.dq{font-size:13px;line-height:18px;color:var(--fg2)}
.note.lead{margin:0 2px 8px}
/* límite de costo del castigo (bajo la tira de espacios) y total de la build de ejemplo */
.cost{font-size:14px;line-height:19px;font-weight:600;padding:8px 10px;border-radius:8px;background:var(--bad-bg);color:var(--bad-ink)}
.tot{margin:8px 2px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.tot b{font-weight:600;color:var(--fg)}

/* tira de 6 espacios: 3 x 2 en columnas estrechas, 6 x 1 en la ventana de tablet */
.slots{list-style:none;margin:2px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot{display:grid}
.slotb{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;
  width:100%;min-height:78px;padding:8px 4px;overflow:hidden;
  border:1.5px solid var(--k,var(--sep));border-radius:10px;background:transparent;color:var(--fg);
  font-size:12px;line-height:15px;text-align:center;
}
button.slotb{cursor:pointer}
button.slotb:active{opacity:.7}
.slotb::before{content:"";position:absolute;inset:0;background:var(--k,transparent);opacity:.12;pointer-events:none}
.slotb > *{position:relative}
.sg{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--k,var(--fg3));color:#fff;font-size:13px;font-weight:700;
}
.sl{font-weight:500;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.sst{display:flex}
.sst .av + .av{margin-left:-8px}
.k-need,.k-any{--k:var(--accent)}
.k-rule{--k:var(--r-mago)}
.k-def{--k:var(--r-tanque)}
.k-dmg{--k:var(--r-asesino)}
.k-boots{--k:var(--r-apoyo)}
.k-pre{--k:var(--r-luchador)}
.k-free .slotb{border-style:dashed;border-color:var(--fg3);color:var(--fg2)}
.k-item .slotb{border-color:transparent;background:var(--fill)}

/* títulos de bloque dentro de "Qué puedes comprar" */
.bl{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;
  margin:16px 4px 6px;font-size:15px;line-height:20px;font-weight:600;
}
.bl.bad{color:var(--bad-ink)}
.hint{font-size:12px;line-height:16px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--accent-tint);color:var(--link)}
.catl{margin:12px 2px 6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.catl:first-child{margin-top:0}
.n{font-weight:400;color:var(--fg3);font-variant-numeric:tabular-nums}

/* chips de ítem: icono, nombre y motivo */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:6px}
.ichip{
  display:flex;align-items:center;gap:8px;width:100%;min-height:48px;
  padding:6px 8px;border:0;border-radius:10px;background:var(--fill);color:var(--fg);
  font-size:14px;line-height:18px;text-align:left;cursor:pointer;
}
.ichip:active{opacity:.7}
.ict{flex:1;min-width:0;display:flex;flex-direction:column}
.icn{font-weight:500;overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
.ics{font-size:12px;line-height:15px;color:var(--fg2);overflow-wrap:anywhere}
.ichip.bad{background:var(--bad-bg)}
.ichip.bad .icn{color:var(--bad-ink)}
.mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;font-weight:700}
.mark.ok{background:var(--good-bg);color:var(--good-ink)}
.mark.no{background:var(--fill);color:var(--neutral-ink)}
.mark.ban{background:var(--bad-bg);color:var(--bad-ink)}
.mark.free{background:var(--fill);color:var(--neutral-ink)}

/* chips de héroe con retrato */
.hchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hc{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  border:0;border-radius:999px;background:var(--accent-tint);color:var(--link);
  font-size:14px;line-height:18px;padding:4px 12px 4px 6px;cursor:pointer;
}
.hc:active{opacity:.7}
.hc.off{background:var(--fill);color:var(--fg2);cursor:default;padding-left:12px}

/* ---------- ficha: desplegables ---------- */
.dt{background:var(--sheet-card);border-radius:12px;margin-top:10px;overflow:hidden}
.dt summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:10px 16px;font-size:17px;font-weight:500;
}
.dt summary::-webkit-details-marker{display:none}
.dt summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(-45deg);flex:none;margin-right:4px}
.dt[open] > summary::after{transform:rotate(45deg)}
.dt.mt0{margin-top:0}
.dt.sub{background:var(--fill);margin-top:8px}
.dt.sub summary{font-size:15px;padding:8px 12px}
.dtb{padding:0 16px 14px;font-size:15px;line-height:21px;display:flex;flex-direction:column;gap:12px}
.dtb.tight{display:block;padding:0 10px 12px}
.dtb p{margin:0}
.il b{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);margin-bottom:2px}
.il span{display:block;color:var(--fg)}

.bars{display:flex;flex-direction:column;gap:8px}
.bar{display:grid;grid-template-columns:96px 1fr 28px;align-items:center;gap:10px;font-size:13px;color:var(--fg2)}
.bar i{display:block;height:8px;border-radius:4px;background:var(--fill);overflow:hidden}
.bar u{display:block;height:100%;border-radius:4px;background:var(--accent)}
.bar em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}

.kv{font-size:15px;line-height:21px}
.kv b{display:block;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2);margin-bottom:2px}
.kv.fav b{color:var(--good-ink)}
.kv.con b{color:var(--bad-ink)}
.kv .igrid{margin-top:6px;grid-template-columns:repeat(auto-fill,minmax(184px,1fr))}
.adj{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;vertical-align:1px;
  background:var(--fill);color:var(--neutral-ink);font-size:11px;line-height:15px;letter-spacing:0;text-transform:none;
}
.mot{display:block;margin-top:4px;font-size:13px;line-height:18px;color:var(--fg2)}
.mot.giro{color:var(--r-luchador);font-weight:600}

/* ---------- duelo ---------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px}
.dcard{display:flex;flex-direction:column;gap:10px}
.dcard .btn{margin-top:auto}
.pl{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.name{display:flex;align-items:center;gap:12px}
.name > div{min-width:0}
.name strong{display:block;font-size:20px;line-height:24px;font-weight:600}
.name small{display:block;font-size:13px;line-height:18px;color:var(--fg2)}
.dnotes{margin:12px 0 0;padding:10px 16px 10px 32px;border-radius:12px;background:var(--sheet-card);font-size:13px;line-height:18px;color:var(--fg2)}
.dnotes li+li{margin-top:4px}

/* botones al pie de la ficha */
.sbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.sbtns .primary{grid-column:1 / -1}
.fbt{width:100%;margin-top:12px;border:0;border-radius:12px;padding:12px 16px;background:var(--sheet-card);color:var(--fg);font-size:15px;line-height:21px;resize:none}

/* estado vacío del panel (solo PC) */
.dempty svg{width:56px;height:56px;color:var(--fg3)}
.dempty p{margin:0;max-width:30ch}
.dempty-t{font-size:20px;line-height:25px;font-weight:600;color:var(--fg)}
.dempty-b{display:grid;gap:8px;width:100%;max-width:260px;margin-top:14px}

/* ---------- ajustes por ancho ---------- */
@media (min-width:700px) and (max-width:1099.98px){
  /* ventana centrada: hay ancho para poner cosas lado a lado */
  .fc{grid-template-columns:1fr 1fr}
  .slots{grid-template-columns:repeat(6,minmax(0,1fr))}
  .sbtns{grid-template-columns:1fr 1fr 1fr}
  .sbtns .primary{grid-column:auto}
}
@media (min-width:700px){
  .duo{grid-template-columns:1fr 1fr}
}
@media (min-width:1100px){
  .detail h2{font-size:24px;line-height:30px}
  .app[data-dtype="duel"] .sbtns{grid-template-columns:1fr 1fr 1fr}
  .app[data-dtype="duel"] .sbtns .primary{grid-column:auto}
}

/* ---------- puntero fino: hover y chips más compactos ---------- */
@media (hover:hover){
  .row:hover{background:var(--fill)}
  .tile:hover,button.slotb:hover,.ichip:hover,.hc:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
  .hc.off:hover{box-shadow:none}
  .base summary:hover,.dt summary:hover{background:var(--fill)}
  .tab[aria-selected="false"]:hover{background:var(--fill)}
  .sbtn:hover{text-decoration:underline}
}
@media (hover:hover) and (min-width:700px){
  .hlist .row:hover{background:var(--card);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .hlist .row.is-cur:hover{box-shadow:inset 0 0 0 2px var(--accent)}
}
@media (hover:hover) and (pointer:fine) and (min-width:700px){
  .hc{min-height:34px}
}

/* =====================================================================
   PARTE B - pestaña Ítems, ficha del ítem y Guía (ui-items.js, ui-guide.js)
   ===================================================================== */

/* ---------- pestaña Ítems: casillas con etiqueta, precio y atributos ---------- */
.ilist .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.tile{justify-content:flex-start}
.tn{font-weight:600}
.tk{
  padding:1px 7px;border-radius:999px;background:var(--fill);color:var(--neutral-ink);
  font-size:10px;line-height:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.tm{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;line-height:14px;color:var(--fg2)}
.tp{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg)}
.tp::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#D9A400}   /* moneda */
.ts{overflow-wrap:anywhere}
.imore{margin:12px 4px 0;font-size:13px;line-height:18px;color:var(--fg2)}
.empty .imore{margin:0 0 4px}
@media (min-width:700px){
  .ilist .tiles{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .tm{font-size:12px;line-height:16px}
}

/* ---------- ficha del ítem: resumen de quién lo usa ---------- */
.uses{display:grid;gap:6px;margin-top:14px}
.useb{
  display:flex;align-items:center;gap:10px;width:100%;min-height:48px;
  padding:6px 10px;border:0;border-radius:12px;background:var(--sheet-card);color:var(--fg);
  font-size:15px;line-height:20px;text-align:left;cursor:pointer;
}
.useb:active{opacity:.7}
.useb::after{
  content:"";flex:none;width:8px;height:8px;margin:0 4px 4px 2px;
  border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(45deg);
}
.usel{flex:1;min-width:0}
.usel b{font-weight:600}
.useb .sst{flex:none}
.useb .sst .av{box-shadow:0 0 0 2px var(--sheet-card)}
.mark.need{background:var(--accent-tint);color:var(--link)}
.useb.need b{color:var(--link)}
.useb.ok b{color:var(--good-ink)}
.useb.ban b{color:var(--bad-ink)}

/* ---------- ficha del ítem: bloques de héroes por uso y por rol ---------- */
.ub .hchips{margin-top:0}
.ub .catl:first-child{margin-top:2px}
.ub.need > summary{color:var(--link)}
.ub.ok > summary{color:var(--good-ink)}
.ub.ban > summary{color:var(--bad-ink)}
.ub.nofit > summary{color:var(--fg2)}
.ub.ban .hc{background:var(--bad-bg);color:var(--bad-ink)}
.ub.nofit .hc{background:var(--fill);color:var(--fg)}
.note.bycost{margin:14px 2px 8px}
.ufree{margin-top:10px}
.ufree .kv b{margin-bottom:6px}
.sbtns.one{grid-template-columns:1fr}

@media (hover:hover){
  .useb:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
}

/* ---------- aviso de error en los datos (js/errores.js) ---------- */
.derr{margin:12px 16px;padding:12px 14px;border-radius:12px;background:var(--bad-bg);color:var(--bad-ink);font-size:15px;line-height:21px;overflow-wrap:anywhere}
.derr b{font-weight:600}

/* =====================================================================
   GUÍA (index.html #vG y js/ui-guide.js)
   Secciones con icono, tarjetas por forma de regla con la tira de 6 casillas en pequeño (mismos
   colores .k-* que la ficha), pasos de compra, aclaraciones, ítems por regla, ventajas y castigos por
   nivel, escaleras y avisos. Teléfono: una columna; tablet y PC: rejillas de 2 a 4 columnas.
   ===================================================================== */
.gs{min-width:0;margin-top:22px;scroll-margin-top:8px}
.gs:first-child{margin-top:0}
.gh{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:20px;line-height:25px;font-weight:700;letter-spacing:.2px;color:var(--fg)}
.gh:focus{outline:none}
.gh:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:8px}
.ghi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--accent-tint);color:var(--link)}
.ghi.bad{background:var(--bad-bg);color:var(--bad-ink)}
.ghi.good{background:var(--good-bg);color:var(--good-ink)}
.ghi svg{width:18px;height:18px}
.ghs{margin:-4px 0 10px;font-size:15px;line-height:20px;color:var(--fg2)}
.gs > .foot{margin-top:10px}
.gcard{background:var(--card);border-radius:12px;padding:14px 16px;font-size:15px;line-height:21px;display:flex;flex-direction:column;gap:10px}
.gcard p{margin:0}
.gcard b.giro{font-size:inherit;line-height:inherit}
/* .dt.sub comparte nombre con el subtítulo de la página (.sub en layout.css, con max-width, margen y
   color propios): aquí se anulan para que el desplegable de componentes ocupe todo el ancho. */
.gsec .dt{background:var(--card)}
.gsec .dt.sub{background:var(--fill);margin:12px 0 0;max-width:none;color:inherit}

/* ---------- lo básico: cuatro filas con icono (cuatro casillas desde tablet) y saltos ---------- */
.gq{list-style:none;margin:0;padding:0;background:var(--card);border-radius:12px;overflow:hidden}
.gqt{position:relative;display:flex;align-items:center;gap:12px;padding:9px 14px}
.gqt + .gqt::before{content:"";position:absolute;top:0;left:62px;right:0;height:.5px;background:var(--sep)}
.gqi,.gfi,.gci{flex:none;display:grid;place-items:center;background:var(--k,var(--accent-fill));color:#fff}
.gqi{width:36px;height:36px;border-radius:10px}
.gqi svg,.gci svg{width:20px;height:20px}
.gqx{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:18px;color:var(--fg2)}
.gqx b{font-size:16px;line-height:21px;font-weight:600;color:var(--fg)}
.q1{--k:var(--accent-fill)}
.q2{--k:var(--r-tirador)}
.q3{--k:var(--r-mago)}
.q4{--k:var(--r-asesino)}
.gnav{margin-top:10px}

/* ---------- tira de 6 casillas en pequeño y su leyenda ---------- */
.gstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.gsl{
  position:relative;height:30px;border-radius:8px;overflow:hidden;display:grid;place-items:center;
  border:1.5px solid var(--k,var(--fg3));color:var(--fg2);   /* el icono, en tinta de texto: se lee en los dos temas */
}
.gsl::before{content:"";position:absolute;inset:0;background:var(--k,transparent);opacity:.14}
.gsl > *{position:relative}
.gsl svg{width:15px;height:15px}
.gsl.k-free{border-style:dashed}
.gleg{margin:0;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:12px;line-height:16px;color:var(--fg2)}
.gk{display:inline-flex;align-items:center;gap:5px}
.gk::before{content:"";flex:none;width:8px;height:8px;border-radius:3px;background:var(--k,transparent);box-shadow:inset 0 0 0 1.5px var(--k,var(--fg3))}
.gcap{margin:0 0 -2px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}

/* ---------- formas de regla: tarjetas (en teléfono, fila que se desliza hacia un lado) ---------- */
.gforms{
  list-style:none;margin:0 -16px;padding:2px 16px 6px;display:flex;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.gforms::-webkit-scrollbar{display:none}
.gf{
  position:relative;   /* los textos .vh (absolutos) quedan dentro de la tarjeta y no ensanchan la página */
  flex:0 0 84%;max-width:320px;min-width:0;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:8px;padding:12px 14px;background:var(--card);border-radius:12px;
}
.gfh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.gfh h3{margin:0;font-size:17px;line-height:22px;font-weight:600}
.gfh .tag{margin-top:1px}
.gf .gstrip{flex:1 1 auto;max-height:56px}   /* en una tarjeta más alta que su contenido, las casillas crecen un poco */
.gf .gsl{height:auto;min-height:38px}
.gf .gsl svg{width:16px;height:16px}
.gfp{margin:0;font-size:14px;line-height:19px}
.gfp + .gfp{color:var(--fg2)}
.gf > .link{align-self:flex-start;margin:-8px 0 -6px}
.gfx{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.gmore{
  min-width:44px;min-height:44px;padding:4px 12px;border:0;border-radius:999px;cursor:pointer;
  background:var(--fill);color:var(--fg);font-size:14px;line-height:18px;font-weight:600;font-variant-numeric:tabular-nums;
}
.gav{display:grid;place-items:center;width:44px;height:44px;margin:0 -2px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.gmore:active,.gib:active,.gav:active{opacity:.7}
.gmore[aria-expanded="true"]{background:var(--accent-tint);color:var(--link)}
.grh{padding-top:2px}
.grh .hchips{margin-top:0}
.gibs,.gpills{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.gib{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--fill);cursor:pointer}
.gib.bad{background:var(--bad-bg)}
.oro{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.oro::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#D9A400}   /* moneda */

/* ---------- orden de compra: tres pasos unidos por una línea ---------- */
.gorder{padding:14px;background:var(--card);border-radius:12px}
.gsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.gstep{position:relative;display:flex;gap:12px}
.gstep:not(:last-child)::after{content:"";position:absolute;left:15px;top:36px;bottom:-10px;width:2px;border-radius:1px;background:var(--sep)}
.gsn{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--k,var(--fg3));color:#fff;font-size:15px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;
}
.gstep.k-need .gsn{background:var(--accent-fill)}
.gstep h3{margin:5px 0 2px;font-size:16px;line-height:21px;font-weight:600}
.gstep p{margin:0;font-size:14px;line-height:19px;color:var(--fg2)}
.gnotes{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:.5px solid var(--sep);display:grid;gap:8px}
.gnotes li{display:flex;align-items:center;gap:12px;font-size:14px;line-height:19px}
.gnotes svg{flex:none;width:20px;height:20px;margin:0 6px;color:var(--fg2)}
.gnotes b{font-weight:600}

/* ---------- equilibrar un tanque ---------- */
.ggiro{display:flex;flex-direction:column;gap:8px}
.ggiro p{margin:0}
.ggiro .hchips{margin-top:0}

/* ---------- aclaraciones: lista de desplegables (teléfono) o rejilla de tarjetas abiertas ---------- */
.gfaq{background:var(--card);border-radius:12px;overflow:hidden}
.gfq{position:relative}
.gfq + .gfq::before{content:"";position:absolute;top:0;left:56px;right:0;height:.5px;background:var(--sep)}
.gfq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:8px 14px;font-size:16px;line-height:21px;font-weight:600;
}
.gfq summary::-webkit-details-marker{display:none}
.gfq summary::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid var(--fg3);border-bottom:2px solid var(--fg3);transform:rotate(-45deg)}
.gfq[open] summary::after{transform:rotate(45deg)}
.gfq summary:focus-visible{outline-offset:-3px}
.gfi{width:30px;height:30px;border-radius:8px}
.gfi svg{width:17px;height:17px}
.gft{flex:1;min-width:0}
.gfq:nth-child(6n+1){--k:var(--r-apoyo)}
.gfq:nth-child(6n+2){--k:var(--r-mago)}
.gfq:nth-child(6n+3){--k:var(--r-luchador)}
.gfq:nth-child(6n+4){--k:var(--r-tanque)}
.gfq:nth-child(6n+5){--k:var(--r-asesino)}
.gfq:nth-child(6n){--k:var(--r-tirador)}
.gfb{padding:0 14px 12px 56px;font-size:14px;line-height:20px}
.gfb p{margin:0}
.gex{margin-top:8px}
.gex:empty{display:none}
.gex p{margin:0 0 8px;color:var(--fg2)}
.gex .hchips{margin-top:0}

/* ---------- qué ítems cuentan: casillas desplegables; la abierta ocupa toda la fila ---------- */
.gtags{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;grid-auto-flow:row dense;align-items:start}
.gtags > .dt{margin:0;min-width:0}
.gtag.pre,.gtag[open]{grid-column:1 / -1}
.gtag > summary{
  position:relative;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
  min-height:76px;padding:10px 30px 10px 12px;font-size:15px;line-height:20px;font-weight:600;
}
.gtag > summary::after{position:absolute;right:10px;top:calc(50% - 6px)}
.gtag[open] > summary{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:56px}
.gti{order:-1;padding-left:1px}
.gti .av{box-shadow:0 0 0 2px var(--card)}
.gtn .n{margin-left:2px}

/* ---------- ventajas y castigos: una columna por nivel ---------- */
.gseg{grid-template-columns:1fr 1fr;margin-bottom:10px}
.gpp > .cap{margin:14px 0 6px 4px;font-weight:600}
.gtiers{display:grid;gap:10px}
.gt{min-width:0;background:var(--card);border-radius:12px;overflow:hidden;border-top:3px solid var(--k,var(--fg3))}
.t0{--k:var(--r-tirador)}
.t1{--k:var(--r-luchador)}
.t2{--k:var(--r-asesino)}
.gth{margin:0;padding:10px 14px 4px;font-size:12px;line-height:16px}
.gth span{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--k,var(--fg3));color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.gl{list-style:none;margin:0;padding:0}
.gl li{position:relative}
.gl li + li::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--sep)}
.gr{
  display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 14px;
  border:0;background:transparent;color:var(--fg);font-size:15px;line-height:20px;text-align:left;
}
button.gr{cursor:pointer}
button.gr:active{background:var(--fill)}
.gr:focus-visible{outline-offset:-3px}
.gr[aria-expanded="true"] .grt{font-weight:600}
.grt{flex:1;min-width:0}
.grm{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.grm .n{font-size:12px;line-height:16px;white-space:nowrap}
.gr .sst .av{box-shadow:0 0 0 2px var(--card)}
.gl .grh{padding:0 14px 12px}
.gl.own li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 14px}
.glt{flex:1;min-width:14ch;font-size:15px;line-height:20px}

/* ---------- escaleras: muy fuerte (rojo) y muy flojo (verde) ---------- */
.gladder{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.gladder li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;font-size:15px;line-height:20px}
.gladder li:nth-child(2){margin-left:12px}
.gladder li:nth-child(3){margin-left:24px}
.gladder li:nth-child(n+4){margin-left:36px}
.gladder p{margin:0}
.gladder b{font-weight:600}
.gladder.bad{--k:var(--r-asesino)}
.gladder.bad li{background:var(--bad-bg)}
.gladder.bad b{color:var(--bad-ink)}
.gladder.good{--k:var(--r-tirador)}
.gladder.good li{background:var(--good-bg)}
.gladder.good b{color:var(--good-ink)}

/* ---------- avisos ---------- */
.gcall{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:12px;background:var(--card);font-size:15px;line-height:21px}
.gcall.good{--k:var(--r-tirador)}
.gci{width:36px;height:36px;border-radius:10px}
.gcall > div{min-width:0;display:flex;flex-direction:column;gap:8px}
.gcall p{margin:0}
.gcall b{font-weight:600}
.gno{list-style:none;margin:0;padding:0;background:var(--card);border-radius:12px;overflow:hidden}
.gno li{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;font-size:15px;line-height:20px}
.gno li + li::before{content:"";position:absolute;top:0;left:48px;right:0;height:.5px;background:var(--sep)}
.gno svg{flex:none;width:22px;height:22px;color:var(--bad-ink)}
.gno .ok svg{color:var(--good-ink)}

/* ---------- teléfono: ventajas o castigos, uno cada vez ---------- */
@media (max-width:699.98px){
  .gpp > .cap{display:none}
  .gpool[data-show="fav"] .gpp.con,.gpool[data-show="con"] .gpp.fav{display:none}
  /* tarjeta de forma con la lista desplegada: crece solo ella y la lista no pasa de unas filas */
  .gforms:has(.gmore[aria-expanded="true"]){align-items:flex-start}
  .gf .grh{max-height:206px;overflow-y:auto;overscroll-behavior:contain}
  /* los héroes con giro, en una fila que se desliza (como los chips de filtro) */
  .ggiro .hchips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:2px 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ggiro .hchips::-webkit-scrollbar{display:none}
  .ggiro .hc{flex:none}
  /* ítems por regla: tres casillas por fila, con cuatro iconos y sin flecha mientras están cerradas */
  .gtags{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gtag.pre{grid-column:span 2}
  .gtag[open]{grid-column:1 / -1}
  .gtag:not([open]) > summary{min-height:70px;padding:10px 8px 10px 10px;font-size:13px;line-height:18px}
  .gtag:not([open]) > summary::after{display:none}
  .gtag:not([open]) .gti .av:nth-child(n+4){display:none}
  .gtag:not([open]) .gtn .n{position:absolute;top:14px;right:10px}
  .gtag.pre:not([open]) .gti .av:nth-child(n+4){display:grid}
  .gfq summary{font-size:15px;line-height:20px}
  /* aviso: el icono va en la esquina y el texto lo rodea */
  .gcall{display:block}
  .gci{float:left;margin:2px 12px 2px 0}
  .gcall > div{display:block}
  .gcall p + p{margin-top:8px}
}

/* ---------- tablet ---------- */
@media (min-width:700px){
  .gs{margin-top:30px}
  .gh{font-size:22px;line-height:28px}
  .gq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:none;border-radius:0;overflow:visible}
  .gqt{align-items:flex-start;padding:14px;background:var(--card);border-radius:12px}
  .gqt + .gqt::before{display:none}
  .gnav{margin-top:12px}

  .gforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;overflow:visible}
  .gf{max-width:none;padding:14px 16px}

  .gfaq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:none;border-radius:0;overflow:visible}
  .gfq{background:var(--card);border-radius:12px}
  .gfq + .gfq::before{display:none}
  .gfq:last-child:nth-child(odd){grid-column:1 / -1}
  .gfq summary{padding:12px 14px 6px}
  .gfq summary::after{display:none}

  .gtags{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .gtag.pre{grid-column:span 2}
  .gtag[open]{grid-column:1 / -1}

  .gseg{display:none}
  .gtiers{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .gt.own{grid-column:1 / -1}
  .gl.own{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .gl.own li + li::before{display:none}
}
@media (min-width:900px){
  .gsec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}
  .gs{grid-column:1 / -1}
  .gs.half{grid-column:auto}
  .gq{grid-template-columns:repeat(4,minmax(0,1fr))}
  .gqt{flex-direction:column;gap:10px}
  .gforms{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- PC: con el panel de la ficha abierto la Guía se estrecha y vuelve a menos columnas ---------- */
@media (min-width:1100px){
  .app[data-detail="closed"] .gforms,.app[data-detail="closed"] .gtags{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app[data-detail="closed"] .gfaq{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app[data-detail="closed"] .gfq:last-child:nth-child(odd){grid-column:auto}
  .app[data-detail="open"] .gsec{grid-template-columns:minmax(0,1fr)}
  .app[data-detail="open"] .gq,.app[data-detail="open"] .gforms,.app[data-detail="open"] .gtags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app[data-detail="open"] .gqt{flex-direction:row}
  .app[data-detail="open"] .gtiers{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1280px){
  .app[data-detail="open"] .gq{grid-template-columns:repeat(4,minmax(0,1fr))}
  .app[data-detail="open"] .gqt{flex-direction:column}
  .app[data-detail="open"] .gforms,.app[data-detail="open"] .gtags,.app[data-detail="open"] .gtiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app[data-dtype="duel"] .gq,.app[data-dtype="duel"] .gforms,.app[data-dtype="duel"] .gtags{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app[data-dtype="duel"] .gqt{flex-direction:row}
  .app[data-dtype="duel"] .gtiers{grid-template-columns:minmax(0,1fr)}
}

@media (hover:hover){
  .gmore:hover,.gib:hover,.gav:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
  button.gr:hover,.gfq summary:hover{background:var(--fill)}
}
@media (hover:hover) and (pointer:fine) and (min-width:700px){
  .gmore{min-height:34px}
}

/* =====================================================================
   GALERÍA (index.html #vR y js/ui-gallery.js)
   Los héroes en tarjetas con el retrato grande (img/galeria, 240 x 390, opaco). Cada tarjeta es un
   botón: arriba el retrato recortado a 3:4 desde arriba (las caras están en el tercio superior), con
   el nivel en la esquina y el nombre y el rol sobre un degradado oscuro propio (no depende de los
   colores de la imagen); debajo, la regla de ítems, lo que tiene a favor, lo que tiene en contra y,
   al pie, los ítems obligatorios (al pie para que, en las tarjetas que no tienen, el hueco quede
   abajo y no en medio). Las cinco partes de las tarjetas de una misma fila quedan a la misma altura
   (subgrid; sin subgrid, tarjetas de igual alto).
   Columnas: 2 en teléfono, 3 desde 520 px, 4 desde 820 px y, en PC, las que quepan de 190 px o más
   (5 o 6 con la ficha cerrada, 3 o 4 con la ficha abierta). No conviene pasar de unos 250 px por
   tarjeta: el retrato mide 240 px y se vería borroso.
   ===================================================================== */
.view.gal{display:block}   /* sin columna de filtros a la izquierda en PC ancho: la rejilla usa todo el ancho */

/* ---------- controles: buscador, nivel, rol, cuenta y orden ---------- */
.galbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
/* selectores en fila flexible: cada botón, tan ancho como su texto más un reparto igual del resto
   (con columnas iguales, "Con castigo" se cortaba en pantallas de 320 px) */
.gal .seg{display:flex;max-width:none}
.gal .seg button{flex:1 1 auto;padding:0 6px}
.gal .countrow{flex-wrap:wrap;justify-content:flex-start;gap:0 12px;margin:10px 4px 8px}
.galord{display:flex;align-items:center;gap:8px;margin-left:auto}
.galord .seg{width:168px}
.galol{white-space:nowrap}

/* ---------- rejilla y tarjeta ---------- */
.galgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:10px}
.galgrid li{display:flex;min-width:0;margin-bottom:10px}
.galc{
  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;
  padding:0 0 12px;border:0;border-radius:14px;overflow:hidden;
  background:var(--card);color:var(--fg);font-size:13px;line-height:17px;text-align:left;cursor:pointer;
}
.galc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}   /* aro de hover y de "abierto", por encima del retrato */
.galc:active{opacity:.8}
.galtop{position:relative;display:block}

/* retrato: el contenedor reserva el sitio y lleva el color del rol (se ve mientras carga y si la imagen falta) */
.galp{
  position:relative;display:grid;place-items:center;aspect-ratio:3 / 4;overflow:hidden;
  background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(0,0,0,.42)),var(--c,var(--fg3));
  color:#fff;font-size:72px;line-height:1;font-weight:700;
}
.galp img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0}
/* falta el retrato grande: el redondo, en grande y centrado sobre el color del rol */
.galp.fb{padding-bottom:22%}
.galp.fb img{position:static;width:62%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 18px rgba(0,0,0,.35)}
.galp.noimg{text-transform:uppercase}

/* nombre y rol: el degradado va de transparente a oscuro en el relleno de arriba, así el texto queda
   siempre sobre negro al 70 % o más (blanco sobre eso pasa de 7:1 aunque el retrato sea blanco) */
.galcap{
  position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:1px;
  padding:32px 10px 9px;color:#fff;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.7) 32px,rgba(0,0,0,.86) 100%);
}
.galn{font-size:18px;line-height:22px;font-weight:700;letter-spacing:.1px;overflow-wrap:anywhere;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.galr{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.galr::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--fg3));box-shadow:0 0 0 1.5px #fff}

/* nivel: la etiqueta de siempre, con fondo opaco debajo de su tinte para que se lea sobre cualquier retrato */
.galtop .tag{position:absolute;top:8px;left:8px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.galtop .tag.bad{background:linear-gradient(var(--bad-bg),var(--bad-bg)),var(--card)}
.galtop .tag.good{background:linear-gradient(var(--good-bg),var(--good-bg)),var(--card)}
.galtop .tag.neutral{background:linear-gradient(var(--fill),var(--fill)),var(--card)}

/* texto bajo el retrato: nunca se corta, las líneas que hagan falta */
.galt{display:block;padding:10px 10px 0;font-size:14px;line-height:18px;font-weight:600;overflow-wrap:break-word}
.galneed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:10px 10px 0}
.galni{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.galni .av{box-shadow:0 0 0 2px var(--card)}
.galfc{display:flex;align-items:flex-start;gap:6px;padding:8px 10px 0;overflow-wrap:break-word}
.galfc.con{padding-top:6px}
.galfc .mark{width:18px;height:18px;font-size:14px;margin-top:-.5px}
.galx{flex:1;min-width:0}

/* las cinco partes, alineadas entre las tarjetas de una misma fila */
@supports (grid-template-rows:subgrid){
  .galgrid li{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 5}
  .galc{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:1 / -1}
  .galtop{grid-row:1}
  .galt{grid-row:2}
  .galfc{grid-row:3}
  .galfc.con{grid-row:4}
  .galneed{grid-row:5}
}

@media (min-width:520px){
  .galgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:700px){
  .galbar{grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:10px 12px;align-items:center}
  .galbar .chips{grid-column:1 / -1}
  .galgrid{column-gap:12px}
  .galgrid li{margin-bottom:12px}
  .galt,.galneed,.galfc{padding-left:12px;padding-right:12px}
  .galcap{padding-left:12px;padding-right:12px}
}
@media (min-width:820px){
  .galgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1100px){
  .galbar{grid-template-columns:minmax(0,420px) minmax(0,420px)}
  .galgrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .galc.is-cur::after{box-shadow:inset 0 0 0 3px var(--accent)}
}
@media (hover:hover){
  .galc:hover::after{box-shadow:inset 0 0 0 2px var(--accent)}
  .galc.is-cur:hover::after{box-shadow:inset 0 0 0 3px var(--accent)}
  .galp img{transition:transform .25s ease}
  .galc:hover .galp:not(.fb) img{transform:scale(1.04)}
}
@media (prefers-reduced-motion: reduce){
  .galp img{transition:none}
  .galc:hover .galp:not(.fb) img{transform:none}
}