/* /js/jogos/tft/tft-itens-tracos.css -- telas "Itens" e "Traços" do TFT (mockup aprovado docs/mockups/tft/itens-e-tracos.html, 06/11/2026). Mesmo container (#tcmApp) e mesmas peças da tela
   Campeões (tft-campeoes.css): aqui só entra o que é novo. Letra mínima 15px (regra 18); tudo alinhado (regra 25); feixe de luz em `.tcm-feixe` (regra 20, public/artes/feixe-onda.css). */

/* cabeça: dois anéis que se juntam (a receita: dois componentes viram um item) */
#tcmApp .tcm-elo{position:absolute;top:16%;right:9%;width:120px;height:70px}
#tcmApp .tcm-elo i{position:absolute;top:0;width:70px;height:70px;border-radius:50%;border:2px solid rgba(154,245,207,.8);animation:tcm-brilha 3.6s ease-in-out infinite}
#tcmApp .tcm-elo i:first-child{left:0}
#tcmApp .tcm-elo i:last-child{right:0;border-color:rgba(227,179,65,.75);animation-delay:-1.8s}

/* ícone pequeno (receita, componentes, tabela) */
#tcmApp .tcm-ic.tcm-p,#tcmApp .tcm-q.tcm-p{width:34px;height:34px;border-radius:7px}

/* lista de itens: Item | Tipo | Receita */
#tcmApp .tcm-tab.tcm-tbi{min-width:760px}
#tcmApp .tcm-tbi th:nth-child(1),#tcmApp .tcm-tbi td:nth-child(1){width:34%}
#tcmApp .tcm-tbi th:nth-child(2),#tcmApp .tcm-tbi td:nth-child(2){width:16%;font-family:inherit}
#tcmApp .tcm-tbi th:nth-child(3),#tcmApp .tcm-tbi td:nth-child(3){width:50%;font-family:inherit}
#tcmApp .tcm-tipo{font:500 15px var(--mono,monospace);color:var(--t-mid,#c3aeab)}
#tcmApp .tcm-tipo.tcm-emb{color:var(--tcm-gold)}
#tcmApp .tcm-rec{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#tcmApp .tcm-mais2{color:var(--t-low,#a08c89);font-weight:700}
#tcmApp .tcm-comp1{display:inline-flex;gap:8px;align-items:center;border:1px solid var(--tcm-line-hi);border-radius:999px;padding:3px 12px 3px 4px;font-size:15px;background:rgba(255,255,255,.04)}

/* escolha do componente (cartões com o ícone do jogo) */
#tcmApp .tcm-cchips{display:flex;gap:8px;flex-wrap:wrap}
#tcmApp .tcm-cchip{display:inline-flex;gap:8px;align-items:center;font:600 15px var(--body,inherit);color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--tcm-line-hi);border-radius:999px;padding:4px 14px 4px 5px;cursor:pointer;min-height:44px}
#tcmApp .tcm-cchip[aria-pressed="true"]{border-color:var(--tcm-ac);box-shadow:inset 0 0 0 1px var(--tcm-ac);color:var(--tcm-ac3)}

/* tabela componente × componente (gaveta) */
#tcmApp .tcm-tab.tcm-grade{min-width:1240px;table-layout:auto}
#tcmApp .tcm-grade th,#tcmApp .tcm-grade td{width:auto;padding:8px;text-align:center;vertical-align:top;font-family:inherit;white-space:normal;text-transform:none;letter-spacing:0}
#tcmApp .tcm-grade th{font:600 15px var(--body,inherit);color:var(--t-mid,#c3aeab)}
#tcmApp .tcm-grade td{border-right:1px solid var(--tcm-line);min-width:112px}
#tcmApp .tcm-grade td:last-child{border-right:0}
#tcmApp .tcm-grade tbody th{text-align:left;background:var(--bg-alt,#130c0d);min-width:150px}
#tcmApp .tcm-grade th .tcm-ic,#tcmApp .tcm-grade th .tcm-q{margin:0 auto 4px;display:block}
#tcmApp .tcm-grade tbody th .tcm-ic,#tcmApp .tcm-grade tbody th .tcm-q{margin:0 0 4px}
#tcmApp .tcm-cel{display:grid;gap:4px;justify-items:center;align-content:start}
#tcmApp .tcm-cel small{font-size:15px;line-height:1.25;color:inherit}
#tcmApp .tcm-cel.tcm-e small{color:var(--tcm-gold)}
#tcmApp .tcm-vz{color:var(--t-low,#a08c89)}

/* traços: cartões da mesma altura, com as linhas na mesma posição */
#tcmApp .tcm-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-items:stretch}
#tcmApp .tcm-tcard{border:1px solid var(--tcm-line);border-radius:14px;background:var(--card,#1a1011);padding:16px;display:grid;grid-template-rows:auto auto 1fr;gap:12px;align-content:start}
#tcmApp .tcm-cabt{display:flex;gap:12px;align-items:center;min-width:0}
#tcmApp .tcm-cabt h3{font-size:20px}
#tcmApp .tcm-cabt small{display:block;color:var(--t-low,#a08c89);font:500 15px var(--mono,monospace)}
#tcmApp .tcm-pat{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#tcmApp .tcm-pat span{min-width:36px;text-align:center;border:1px solid rgba(62,207,142,.45);color:var(--tcm-ac3);background:rgba(62,207,142,.13);border-radius:8px;padding:2px 10px;font:700 15px var(--mono,monospace);font-variant-numeric:tabular-nums}
#tcmApp .tcm-pat em,#tcmApp .tcm-semc{font-style:normal;color:var(--t-low,#a08c89);font-size:15px;margin-right:4px}
#tcmApp .tcm-cps{display:flex;gap:6px;flex-wrap:wrap;align-content:start}
#tcmApp .tcm-cps span{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--tcm-line-hi);border-radius:999px;padding:2px 12px 2px 8px;font-size:15px;background:rgba(255,255,255,.04)}
#tcmApp .tcm-cps span i{width:10px;height:10px;border-radius:50%;background:var(--c,#aaa)}
#tcmApp .tcm-cps .tcm-c1{--c:#9aa4ad}#tcmApp .tcm-cps .tcm-c2{--c:#4fd18b}#tcmApp .tcm-cps .tcm-c3{--c:#4da3ff}#tcmApp .tcm-cps .tcm-c4{--c:#c071ff}#tcmApp .tcm-cps .tcm-c5{--c:#ffc247}