/* Coleção PRO (pro.js). Lista densa estilo planilha, página da carta, comentários. Copyright (c) Eclipse. */
.proView{position:relative;min-height:100dvh;padding:clamp(40px,5.5vh,56px) clamp(10px,2.2vw,28px) 28px;color:#eee6f5;background:radial-gradient(ellipse 50% 40% at 15% 0,#e8c98b12,transparent 70%),#0d0a12;--gold:#e8c98b}
.proView[hidden]{display:none}
.proHead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 8px}
.proHead h2{margin:0;font:800 clamp(22px,2.6vw,30px) 'Alegreya Sans',system-ui,sans-serif;color:#fff}
.proCount{margin-left:auto;font-size:14px;color:#b8a8c4}
.proDim{color:#8d7f99}
.proNote{margin:8px 0;padding:8px 12px;border-radius:8px;background:#e8c98b14;border:1px solid #e8c98b33;font-size:14px;color:#e9dcb8}

/* filtros em dropdown (como a referência) */
.proFilters{position:relative;border-radius:10px;background:#16121d;border:1px solid #ffffff14;padding:10px 10px 0}
.proFBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;padding-bottom:10px}
.proFBody[hidden]{display:none}
.proFBody select,.proSearch{min-height:38px;border-radius:7px;border:1px solid #ffffff22;background:#f4f1f8;color:#1b1522;padding:0 10px;font:inherit;font-size:14px}
.proSearch{grid-column:span 2}
.proFilterTog{display:block;margin:0 auto;padding:2px 22px 6px;background:none;border:0;color:#9a8ca6;font:700 14px/1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.2em;cursor:pointer}
.proFilterTog:hover{color:#e8c98b}
.proBar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:8px 0}
.proBar.bottom{justify-content:center}
.proTools{display:flex;gap:8px;position:relative;flex-wrap:wrap}
.proTool{min-height:34px;padding:0 12px;border-radius:7px;border:1px solid #e8c98b55;background:#1d1726;color:#f1dfb0;font:600 14px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.proTool:hover{background:#2a2036}
.proPager{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.proPg{min-width:34px;height:34px;border-radius:50%;border:2px solid #0b0910;background:#0b0910;color:#ffc933;font:700 14px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.proPg.on{background:#ffc933;color:#1a1208}
.proPg:hover{border-color:#ffc933}
.proColsMenu{position:absolute;right:0;top:40px;z-index:30;display:grid;gap:6px;min-width:210px;max-height:60vh;overflow:auto;padding:12px;border-radius:10px;background:#1b1524;border:1px solid #e8c98b55;box-shadow:0 18px 40px #000c}
.proColsMenu label{display:flex;gap:8px;align-items:center;font-size:14px}

/* tabela */
.proScroll{overflow:auto;border-radius:10px;border:1px solid #ffffff14;background:#17131e;max-height:calc(100dvh - 250px);min-height:240px}
.proTable{--cols:1fr;min-width:max-content;width:100%}
.proRow{display:grid;grid-template-columns:var(--cols);align-items:center;gap:0;min-height:36px;border-bottom:1px solid #ffffff0d}
.proRow:nth-child(even){background:#1c1725}
.proRow:not(.proHeadRow):hover{background:#2a2237}
.proRow.own{box-shadow:inset 3px 0 0 var(--c,#ffc933)}
.proHeadRow{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,#ffd24a,#f2b400);border-bottom:2px solid #0b0910;min-height:34px}
.proTh{padding:6px 8px;color:#1a1208;font:800 13px/1.1 'Alegreya Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.03em;text-align:center;user-select:none}
.proTh.sortable{cursor:pointer}.proTh.sortable:hover{background:#ffffff35}
.proTh:focus-visible{outline:2px solid #1a1208;outline-offset:-3px}
.proTd{padding:3px 8px;min-width:0;font-size:14px;display:flex;align-items:center;justify-content:center;text-align:center}
.proTd.c-name,.proTd.c-power,.proTd.c-bonus{justify-content:flex-start;text-align:left}
.proTxt{line-height:1.25;font-size:13.5px;color:#e4dbee}
.proQty{font:italic 800 16px 'Alegreya Sans',system-ui,sans-serif;color:#fff}.proQty.zero{color:#6f6479;font-weight:400}
.proN{font:800 17px 'Alegreya Sans',system-ui,sans-serif;font-style:italic}
.proN.atk{color:#56d3ff}.proN.dmg{color:#ff5a6a}
.proName{display:flex;align-items:center;gap:8px;min-width:0;color:#4fa3ff;text-decoration:none;font-weight:700}
.proName:hover .proNm{text-decoration:underline;color:#8cc4ff}
.proNm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proThumb{flex:0 0 auto;width:30px;height:30px;border-radius:5px;background:#000 center 22%/cover;border:1px solid #ffffff22}
.proClan{display:inline-flex;align-items:center;gap:4px}
.proClan .clanDot{width:20px;height:20px;margin:0}
.proClan small{font-size:10px;font-weight:700;color:#cfc5da;text-transform:uppercase}
.proRar{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0d0a12;border:2px solid var(--c);color:var(--c);font:800 12px 'Alegreya Sans',system-ui,sans-serif}
.proStars{display:inline-flex;gap:1px;color:#ffc933;font-size:15px;cursor:default}.proStars i{font-style:normal;transition:transform .15s}.proStars i:hover{transform:scale(1.35);color:#fff1b5}
.proMk{white-space:nowrap}.proMk i{font-style:normal;color:#ffc933}
.proRate b{color:#ffd36b}.proRate small{color:#9a8ca6}
.proUse{display:inline-flex;align-items:flex-end;gap:4px;height:30px}
.proUseB{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;width:24px;height:30px;border-radius:3px;background:#ffffff0c;overflow:hidden}
.proUseB i{display:block;width:100%;background:linear-gradient(180deg,#ffd24a,#c98a1b);min-height:1px}
.proUseB small{position:absolute;top:0;font-size:10px;font-weight:700;color:#fff;text-shadow:0 0 3px #000}
.proActs{display:inline-flex;gap:6px}
.proMini{min-height:26px;padding:0 10px;border-radius:6px;border:1px solid #e8c98b66;background:#251d30;color:#f1dfb0;font:700 12px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.proMini:hover:not(:disabled){background:#3a2d4a}.proMini:disabled{opacity:.4;cursor:not-allowed}
.proEmpty{padding:40px;text-align:center;color:#9a8ca6}

/* carta de verdade (a do combate) em moldura 5:7 */
.proFrame{position:relative;aspect-ratio:5/7;width:var(--w,240px)}
.proFrame .proHand{display:block;position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;gap:0}
.proFrame .proHand .card.duel{width:100%!important;height:100%!important;margin:0;cursor:default}
.proFrame.big{--w:min(290px,80vw)}
.proFrame.small{--w:min(170px,50vw)}
.proPreview{position:fixed;z-index:2147483000;--w:250px;filter:drop-shadow(0 18px 30px #000c)}
.proPreview .proFrame{--w:250px}
.proNoCard{background:#1c1725;border-radius:12px;display:grid;place-items:center;text-align:center;padding:12px}

/* página da carta: compacta. Carta | (chips, números, habilidades, lore, ações) e abaixo as abas Evoluções / Comentários / Mercado */
.proCardView{max-width:1180px;margin:0 auto}
.proHero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,32px);align-items:stretch;padding:14px;border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--rar) 12%,#17121f),#120e19);border:1px solid color-mix(in srgb,var(--rar) 40%,transparent)}
.proInfo{min-width:0;display:flex;flex-direction:column;gap:9px}
.proChips{display:flex;gap:7px;flex-wrap:wrap}
.proRarTag,.proClanTag,.proChip{padding:2px 11px;border-radius:999px;font:700 13px 'Alegreya Sans',system-ui,sans-serif;border:1px solid var(--c,#ffffff33);color:var(--c,#d7cde2);background:#0d0a12}
.proChip{--c:#b8a8c4}.proChip.gold{--c:#ffd36b}
.proPills{display:flex;flex-wrap:wrap;gap:6px}
.proPill{display:inline-flex;flex-direction:column;padding:4px 11px;border-radius:9px;background:#0d0a1299;border:1px solid #ffffff14;line-height:1.15}
.proPill small{font-size:11px;color:#9a8ca6;text-transform:uppercase;letter-spacing:.05em}.proPill b{font-size:15px;color:#fff}
.proAbs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.proAbBox,.proLoreBox{padding:8px 12px;border-radius:10px;background:#0d0a1288;border:1px solid #ffffff14;min-width:0}
.proAbBox h3,.proLoreBox h3{margin:0 0 2px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#e8c98b}
.proAbBox p{margin:0;line-height:1.4;font-size:14.5px;color:#efe8f6}
.proLoreBox{flex:1 1 150px;min-height:120px;display:flex;flex-direction:column}
.proLore{flex:1 1 0;min-height:0;overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:#e8c98b55 transparent}
.proLore p{margin:0 0 8px;line-height:1.55;font-size:15px;color:#e4dbee}
.proActRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.proActRow>button:not(.proTool){min-height:38px;padding:0 18px;border-radius:9px;font:700 14.5px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer;border:1px solid #e8c98b88;background:#251d30;color:#f4e6bd}
.proActRow .primary{background:linear-gradient(180deg,#f3d99c,#c9984a);color:#1c1308}.proActRow>button:disabled{opacity:.45;cursor:not-allowed}
.proRateBox{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.proRating{display:inline-flex;gap:1px}
.proStarBtn{background:none;border:0;padding:0 1px;font-size:24px;line-height:1;color:#4a3f58;cursor:pointer;transition:transform .12s}
.proStarBtn.on{color:#ffc933}.proStarBtn:hover{transform:scale(1.2);color:#ffe28a}
.proTabs{display:flex;gap:4px;margin:14px 0 0;border-bottom:1px solid #ffffff1a}
.proTabs button{padding:9px 18px;border:0;border-bottom:3px solid transparent;background:none;color:#a99bb7;font:700 15px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.proTabs button:hover{color:#fff}.proTabs button.on{color:#ffd36b;border-bottom-color:#ffc933}
.proTabBody{padding:14px 0 0;min-height:260px}
.proEvos{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x proximity}
.proEvo{flex:0 0 auto;width:min(190px,56vw);scroll-snap-align:start;display:grid;gap:6px;justify-items:center;padding:9px;border-radius:12px;background:#17121f;border:1px solid #ffffff14}
.proEvo h4{margin:0;color:#ffd36b;font:800 15px 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.proEvoStats{margin:0;font-size:14px}.proEvoStats .atk{color:#56d3ff}.proEvoStats .dmg{color:#ff5a6a}
.proEvoAb{margin:0;font-size:12.5px;line-height:1.35;text-align:center;color:#d9cfe3;min-height:3.4em}
.proEvoUse{margin:0;font-size:12px;color:#9a8ca6}
.proOffers{display:grid;gap:6px;align-content:start;max-width:520px}
.proOffer{display:flex;justify-content:space-between;padding:8px 12px;border-radius:8px;background:#17121f;border:1px solid #ffffff14}.proOffer.mine{border-color:#e8c98b66}
.proOffer i{font-style:normal;color:#ffc933}
@media (max-width:860px){.proHero{grid-template-columns:1fr;justify-items:center}.proInfo{width:100%}.proAbs{grid-template-columns:1fr}.proSearch{grid-column:auto}.proScroll{max-height:none}.proRateBox{margin-left:0}}

/* comentários */
.proComments{display:grid;gap:12px;max-width:820px}
.proNew{display:grid;gap:6px}
.proTa{width:100%;resize:vertical;min-height:76px;border-radius:10px;border:1px solid #ffffff22;background:#120e19;color:#f3ecf8;padding:10px 12px;font:inherit;line-height:1.5}
.proTa:focus{outline:2px solid #e8c98b88;outline-offset:1px}
.proNewBar{display:flex;justify-content:space-between;align-items:center}
.proNewBar .primary{min-height:38px;padding:0 20px;border-radius:9px;border:1px solid #e8c98b88;background:linear-gradient(180deg,#f3d99c,#c9984a);color:#1c1308;font:700 15px 'Alegreya Sans',system-ui,sans-serif;cursor:pointer}
.proNewBar .primary:disabled{opacity:.5}
.proErr{margin:0;min-height:1.2em;color:#ef8e9c;font-size:14px}
.proCm{padding:10px 14px;border-radius:10px;background:#17121f;border:1px solid #ffffff14}.proCm.mine{border-color:#e8c98b55}
.proCm header{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}.proCm header b{color:#fff}.proCm header small{color:#8d7f99}
.proCmText{margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;color:#e9e0f2}
.proDel{margin-left:auto;background:none;border:0;color:#ef8e9c;font-size:13px;cursor:pointer;text-decoration:underline}
@media (prefers-reduced-motion:reduce){.proStars i,.proStarBtn{transition:none}}
.reduced .proStars i,.reduced .proStarBtn{transition:none}

/* O logo do Eclipse fica fixo no topo: uma faixa escura atrás dele evita que a lista e as cartas passem por baixo da marca ao rolar (igual ao mercado). */
.proView:not([hidden])::before{content:'';position:fixed;left:0;right:0;top:0;height:var(--mkTop,66px);z-index:2;pointer-events:none;background:linear-gradient(180deg,#0d0a12 55%,#0d0a1200)}
@media (max-width:860px){.proView:not([hidden])::before{display:none}}

/* Cópias por evolução (Coleção PRO) */
.proEvoRow{display:inline-flex;gap:3px}
.proEvoN{display:inline-flex;flex-direction:column;align-items:center;min-width:30px;padding:1px 3px;border-radius:5px;background:#ffffff0a;line-height:1.05}
.proEvoN small{font-size:10px;color:#8d7f99}.proEvoN b{font-size:14px;color:#6f6479}
.proEvoN.has{background:#ffc93322;box-shadow:inset 0 0 0 1px #ffc93366}.proEvoN.has small{color:#ffd36b}.proEvoN.has b{color:#fff}
.proEvoN.mk.has{background:#56d3ff1c;box-shadow:inset 0 0 0 1px #56d3ff55}.proEvoN.mk.has b{color:#bfeaff}
.proMini.evo{background:linear-gradient(180deg,#f3d99c,#c9984a);color:#1c1308;border-color:#e8c98b}
.proMini.evo:disabled{background:#251d30;color:#f1dfb0}
.proEvoMine{margin:0;font-size:13px;color:#8d7f99}.proEvoMine.has{color:#ffd36b;font-weight:700}
.proEvoActs{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.proEvo.owned{border-color:#ffc93366}
.proOfferLv{margin-left:auto;margin-right:12px;color:#ffc933;letter-spacing:1px}

.evoXpChip{--c:#ff8cc6;cursor:pointer;background:#2a0d24;border-color:#ff6fb577}.evoXpChip:hover{background:#3d1233}
.proMini.evo{background:linear-gradient(180deg,#ff7ab8,#d62f86);color:#2a0618;border-color:#ff9ccc}.proMini.evo:disabled{background:#251d30;color:#f1dfb0;border-color:#e8c98b66}

/* Evoluções da página da carta (Leo, 06/10/2026): só a carta e, embaixo, cópias, vender, ofertas e evoluir (Atq, Dano, habilidade e "Evolução N" já estão na própria carta).
   Cinco colunas iguais que ocupam toda a largura: a carta tem sempre o maior tamanho que cabe 5 lado a lado. Em tela estreita volta a rolar na horizontal. */
.proCardView{max-width:min(1480px,100%)}
.proEvos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,16px);overflow:visible;padding:2px 0 10px;scroll-snap-type:none}
.proEvo{width:auto;min-width:0;padding:clamp(6px,.7vw,10px);justify-items:stretch;grid-template-columns:minmax(0,1fr)}
.proEvo .proFrame,.proEvo .proFrame.small{--w:100%;width:100%}
.proEvo .proEvoMine,.proEvo .proEvoActs{justify-self:center;text-align:center}
.proEvo .proEvoActs{width:100%}.proEvo .proEvoActs .proMini{flex:1 1 auto;min-width:0}
@media (max-width:900px){.proEvos{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.proEvo{flex:0 0 min(200px,62vw);scroll-snap-align:start}}

/* Carta grande: estrelas clicáveis; evoluções sem cópia ficam sem cor (07/10/2026) */
.proFrame.starsPick .stars{cursor:pointer}
.proEvo:not(.owned) .proFrame{filter:grayscale(1) brightness(.82)}
.proEvo .proFrame{transition:filter .2s}
.proFrame.starsPick .cardStats .stars,.proFrame.starsPick .cardStats .stars *{pointer-events:auto!important}
/* Emblema do clã nas etiquetas da página da carta: a escala do ícone sobra para os lados, então ganha folga para não cobrir o nome (07/10/2026) */
.proClanTag .clanDot,.proAbBox h3 .clanDot{margin-left:calc(7px*(var(--clanDotK,1) - 1) + 3px);margin-right:calc(7px*(var(--clanDotK,1) - 1) + 8px)}

/* Coleção PRO: o cabeçalho (logo e botões) fica preso no topo ao rolar a página, em vez de subir junto com o conteúdo (07/10/2026) */
body:is([data-screen=pro],[data-screen=proCard]) > header{position:sticky;top:0;z-index:9}