/* /js/jogos/lol/lol-catalogo.css -- telas "Fichas dos campeões", "Itens" e "Runas" do LoL (mockup aprovado docs/mockups/lol/catalogo.html, 06/11/2026).
   Visual próprio do LoL (azul-marinho, dourado, turquesa, títulos em Cinzel; a fonte vem do lol-visual.css). Mesma estrutura das telas do TFT, com o prefixo lcat-.
   Letra mínima 15px (regra 18); tudo alinhado (regra 25); feixe de luz em `.lcat-feixe` (regra 20, public/artes/feixe-onda.css). */
.lcat,.lcat-jan{--lcat-bg:#010a13;--lcat-bg2:#050f1c;--lcat-card:#0a1428;--lcat-card2:#0e1c33;--lcat-line:#1e2d46;--lcat-line-hi:#2b3f5f;--lcat-hi:#f0e6d2;--lcat-mid:#cdbe91;--lcat-low:#a09b8c;
  --lcat-ac:#0ac8b9;--lcat-ac3:#7ff0e6;--lcat-gold:#c8aa6e;--lcat-gold-esc:#785a28;--lcat-live:#2fd3c4;--lcat-blue:#5ad7ff;--lcat-serifa:'Cinzel','Beaufort for LOL',Georgia,serif;
  --lcat-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--lcat-hi)}
.lcat{display:grid;gap:30px;padding-bottom:50px}
.lcat h1,.lcat h2,.lcat h3,.lcat-jan h3,.lcat-jan h4{font-family:var(--lcat-serifa);margin:0;line-height:1.15;text-wrap:balance}
.lcat p{margin:0}
.lcat-num{font-variant-numeric:tabular-nums}

/* cabeça */
.lcat-cab{position:relative;border:1px solid var(--lcat-line-hi);border-radius:6px;padding:26px 28px;overflow:hidden;isolation:isolate;display:grid;gap:12px;align-content:end;min-height:230px;
  background:linear-gradient(90deg,rgba(1,10,19,.96) 25%,rgba(1,10,19,.6) 70%,rgba(1,10,19,.25)),radial-gradient(120% 140% at 85% 0%,rgba(10,200,185,.30),transparent 56%),radial-gradient(90% 120% at 0% 100%,rgba(200,170,110,.16),transparent 60%),#0a1428}
.lcat-cenario{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lcat-faisca{position:absolute;bottom:14px;width:5px;height:5px;border-radius:50%;background:var(--lcat-blue);box-shadow:0 0 10px var(--lcat-blue);opacity:0;animation:lcat-sobe 5s ease-in infinite}
@keyframes lcat-sobe{0%{transform:translateY(0);opacity:0}15%{opacity:.9}100%{transform:translateY(-160px);opacity:0}}
.lcat-canto{position:absolute;width:44px;height:44px;border:2px solid var(--lcat-gold);opacity:.75}
.lcat-c1{left:10px;top:12px;border-right:0;border-bottom:0}.lcat-c2{right:10px;top:12px;border-left:0;border-bottom:0}.lcat-c3{left:10px;bottom:10px;border-right:0;border-top:0}.lcat-c4{right:10px;bottom:10px;border-left:0;border-top:0}
.lcat-faixa{position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--lcat-gold-esc),var(--lcat-gold),var(--lcat-ac),var(--lcat-blue))}
.lcat-cab h1{font-size:clamp(30px,5vw,52px);font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--lcat-hi)}
.lcat-lead{color:var(--lcat-mid);max-width:64ch;font-size:16px}
.lcat-aviso{font-size:15px;color:var(--lcat-low);border-left:3px solid rgba(200,170,110,.5);padding-left:12px}
.lcat-selos{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lcat-selo{display:inline-flex;align-items:center;gap:8px;font:500 15px var(--lcat-mono);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 14px;border:1px solid}
.lcat-selo i{width:9px;height:9px;border-radius:3px;background:currentColor}
.lcat-obra{color:var(--lcat-gold);border-color:rgba(200,170,110,.55);background:rgba(36,26,4,.78)}
.lcat-vivo{color:var(--lcat-live);border-color:rgba(47,211,196,.55);background:rgba(3,24,26,.78)}
.lcat-vivo i{border-radius:50%;animation:lcat-pulsa 1.6s infinite}
@keyframes lcat-pulsa{50%{opacity:.25}}

/* seções, cartões, filtros */
.lcat-sec{display:grid;gap:14px;scroll-margin-top:70px}
.lcat-sec-h{display:flex;gap:12px 16px;align-items:baseline;flex-wrap:wrap}
.lcat-sec-h h2{font-size:clamp(19px,2.2vw,24px);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--lcat-gold)}
.lcat-sec-h p{color:var(--lcat-mid);flex:1 1 260px;font-size:15px}
.lcat-card{border:1px solid var(--lcat-line-hi);border-radius:6px;background:linear-gradient(180deg,var(--lcat-card2),var(--lcat-card));padding:16px;display:grid;gap:8px;align-content:start}
.lcat-rot{font:500 15px var(--lcat-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lcat-low)}
.lcat-nota{font:500 15px var(--lcat-mono);color:var(--lcat-low)}
.lcat-msg{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:18px;border:1px solid var(--lcat-line-hi);border-radius:6px;background:var(--lcat-card);font-size:15px}
.lcat-filtros{display:grid;gap:12px;border:1px solid var(--lcat-line-hi);border-radius:6px;background:var(--lcat-card);padding:14px;position:relative;z-index:1}
.lcat-lin{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.lcat-lin .lcat-rot{min-width:92px}
.lcat-chips{display:flex;gap:8px;flex-wrap:wrap}
.lcat-busca,.lcat-sel{background:#050f1c;border:1px solid var(--lcat-line-hi);border-radius:4px;color:var(--lcat-hi);font:inherit;font-size:15px;padding:8px 12px;min-height:44px}
.lcat-busca{flex:1 1 220px;min-width:0}
.lcat-sel{min-width:240px}
.lcat-sel option{background:#0a1428;color:var(--lcat-hi)}
.lcat-ficha{font:600 15px inherit;font-family:inherit;color:var(--lcat-mid);background:#07162a;border:1px solid var(--lcat-line-hi);border-radius:999px;padding:7px 14px;cursor:pointer;min-height:44px}
.lcat-ficha[aria-pressed="true"]{border-color:var(--lcat-ac);box-shadow:inset 0 0 0 1px var(--lcat-ac);color:var(--lcat-ac3)}
.lcat-resumo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
@media(max-width:900px){.lcat-resumo{grid-template-columns:1fr}}
.lcat-resumo .lcat-card{grid-template-rows:auto auto 1fr}
.lcat-v{font:700 30px/1 var(--lcat-serifa);font-variant-numeric:tabular-nums;color:var(--lcat-hi)}
.lcat-mais{display:flex;justify-content:center;gap:14px;align-items:center;flex-wrap:wrap}
.lcat-mais:empty{display:none}

/* tabelas */
.lcat-rolagem{overflow-x:auto;border-radius:6px}
.lcat-tab{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1px solid var(--lcat-line);border-radius:6px;overflow:hidden;background:var(--lcat-card)}
.lcat-tab th{font:500 15px var(--lcat-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lcat-low);text-align:left;padding:10px 14px;background:var(--lcat-bg2);border-bottom:1px solid var(--lcat-line);white-space:nowrap}
.lcat-tab td{padding:10px 14px;border-bottom:1px solid var(--lcat-line);vertical-align:middle;text-align:left}
.lcat-tab tr:last-child td{border-bottom:0}
.lcat-tab tbody tr{cursor:pointer}
.lcat-tab tbody tr:hover td{background:rgba(10,200,185,.08)}
.lcat-tab tbody tr:focus-visible{outline:2px solid var(--lcat-ac);outline-offset:-2px}
.lcat-tab .lcat-n,.lcat-n{font-family:var(--lcat-mono);font-variant-numeric:tabular-nums}
.lcat-tbc{min-width:1120px}
.lcat-tbc th:nth-child(1),.lcat-tbc td:nth-child(1){width:26%}.lcat-tbc th:nth-child(2),.lcat-tbc td:nth-child(2){width:15%}.lcat-tbc th:nth-child(n+3),.lcat-tbc td:nth-child(n+3){width:9.8%}
.lcat-tbi{min-width:900px}
.lcat-tbi th:nth-child(1),.lcat-tbi td:nth-child(1){width:34%}.lcat-tbi th:nth-child(2),.lcat-tbi td:nth-child(2){width:13%}.lcat-tbi th:nth-child(3),.lcat-tbi td:nth-child(3){width:11%}.lcat-tbi th:nth-child(4),.lcat-tbi td:nth-child(4){width:42%}
.lcat-vazio{padding:14px;font-size:15px;color:var(--lcat-mid)}

/* ícones e peças pequenas */
.lcat-ic,.lcat-q{width:44px;height:44px;border-radius:6px;flex:none;object-fit:cover;background:var(--lcat-card2);border:1px solid var(--lcat-line-hi)}
.lcat-ic.lcat-p,.lcat-q.lcat-p{width:34px;height:34px;border-radius:5px}
.lcat-ic.lcat-g,.lcat-q.lcat-g{width:76px;height:76px;border-radius:8px}
.lcat-q{display:grid;place-items:center;font:700 15px var(--lcat-serifa);color:var(--lcat-low);border-style:dashed}
.lcat-it{display:flex;gap:12px;align-items:center;min-width:0}
.lcat-it>span:not(.lcat-q){display:grid;min-width:0}
.lcat-it small{color:var(--lcat-low);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcat-it b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lcat-pills{display:flex;gap:6px;flex-wrap:wrap}
.lcat-pill{border:1px solid var(--lcat-line-hi);border-radius:999px;padding:2px 10px;font-size:15px;background:#07162a;color:var(--lcat-mid)}
.lcat-ouro{font:600 15px var(--lcat-mono);color:var(--lcat-gold);font-variant-numeric:tabular-nums;display:inline-flex;gap:6px;align-items:center}
.lcat-ouro i{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--lcat-gold));display:inline-block}
.lcat-ml{margin-left:6px}
.lcat-rec{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lcat-comp1{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--lcat-line-hi);border-radius:999px;padding:3px 12px 3px 4px;font-size:15px;background:#07162a}
.lcat-mais2{color:var(--lcat-low);font-weight:700}
.lcat-vz{color:var(--lcat-low)}

/* gavetas e rodapé */
.lcat-gav{border:1px dashed var(--lcat-line-hi);border-radius:6px;background:var(--lcat-bg2)}
.lcat-gav>summary{cursor:pointer;padding:12px 16px;font-weight:600;list-style:none;color:var(--lcat-mid);min-height:44px;display:flex;align-items:center;font-size:15px}
.lcat-gav>summary::-webkit-details-marker{display:none}
.lcat-gav>summary::after{content:"+";margin-left:auto;color:var(--lcat-ac)}
.lcat-gav[open]>summary::after{content:"−"}
.lcat-gav>div{padding:0 16px 14px;display:grid;gap:8px;color:var(--lcat-mid);font-size:15px}
.lcat-rodape{padding-top:18px;border-top:1px solid var(--lcat-line);color:var(--lcat-low);font-size:15px;display:grid;gap:6px}

/* runas */
.lcat-arvs{display:grid;gap:14px}
.lcat-arv{border:1px solid var(--lcat-line-hi);border-radius:8px;background:var(--lcat-card);padding:16px;display:grid;gap:14px;position:relative}
.lcat-arv::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--lcat-gold-esc),var(--lcat-gold),var(--lcat-gold-esc))}
.lcat-arv-h{display:flex;gap:12px;align-items:center}
.lcat-arv-h h3{font-size:22px;letter-spacing:.1em;text-transform:uppercase;color:var(--lcat-gold)}
.lcat-lin-r{display:grid;gap:8px}
.lcat-lin-r>.lcat-rot{color:var(--lcat-ac)}
.lcat-rg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.lcat-rn{border:1px solid var(--lcat-line);border-radius:6px;padding:10px 12px;background:rgba(0,0,0,.22);display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start}
.lcat-rn .lcat-ic,.lcat-rn .lcat-q{grid-row:span 2}
.lcat-rn b{align-self:center}
.lcat-rn p{color:var(--lcat-mid);grid-column:2;font-size:15px}

/* janela da ficha */
.lcat-jan{position:fixed;inset:0;z-index:300;background:rgba(1,6,12,.78);display:grid;place-items:center;padding:16px;overflow:auto}
.lcat-jan[hidden]{display:none}
.lcat-jan-c{position:relative;width:min(920px,100%);max-height:calc(100vh - 32px);overflow:auto;border:1px solid var(--lcat-line-hi);border-radius:8px;background:linear-gradient(180deg,var(--lcat-card2),var(--lcat-card));padding:22px;display:grid;gap:16px;align-content:start}
.lcat-jan-c::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--lcat-gold-esc),var(--lcat-gold),var(--lcat-ac))}
.lcat-jan-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--lcat-line-hi);background:var(--lcat-card);color:var(--lcat-hi);font-size:22px;cursor:pointer}
.lcat-jan-top{display:flex;gap:16px;align-items:center;padding-right:48px;flex-wrap:wrap}
.lcat-jan-top h3{font-size:26px;letter-spacing:.06em;text-transform:uppercase;color:var(--lcat-hi)}
.lcat-jan-top p{color:var(--lcat-mid);margin:2px 0 6px}
.lcat-barras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:700px){.lcat-barras{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lcat-barras>div{display:grid;gap:4px}.lcat-barras span{color:var(--lcat-low);font-size:15px}
.lcat-barra{height:8px;border-radius:4px;background:#07162a;border:1px solid var(--lcat-line);overflow:hidden}
.lcat-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--lcat-ac),var(--lcat-blue))}
.lcat-fg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:800px){.lcat-fg{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lcat-fg>div{border:1px solid var(--lcat-line);border-radius:6px;padding:10px 12px;background:rgba(0,0,0,.25);display:flex;flex-direction:column;gap:2px}
.lcat-fg span{color:var(--lcat-low);font-size:15px}
.lcat-fg b{font:700 20px var(--lcat-mono);font-variant-numeric:tabular-nums}
.lcat-fg em{font-style:normal;color:var(--lcat-ac3);font-size:15px;font-family:var(--lcat-mono)}
.lcat-habs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:800px){.lcat-habs{grid-template-columns:1fr}}
.lcat-hab{border-left:3px solid var(--lcat-ac);padding:4px 0 4px 12px;display:grid;gap:4px;align-content:start}
.lcat-hab h4{margin:0;font-size:17px;color:var(--lcat-gold)}
.lcat-hab h4 small{font:500 15px var(--lcat-mono);color:var(--lcat-ac);margin-right:8px}
.lcat-meta{font:500 15px var(--lcat-mono);color:var(--lcat-low)}
.lcat-hab p,.lcat-pre{color:var(--lcat-mid);white-space:pre-line;font-size:15px}
.lcat-sub-t{font:700 15px var(--lcat-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lcat-gold)}
.lcat-jan p{margin:0}

@media(prefers-reduced-motion:reduce){.lcat *,.lcat-jan *{animation:none!important;transition:none!important}}