/* Coleção e montagem de deck, versão 3 (01/10/2026, pedido do gab: "muito poluída e pouco fluida. Capriche no design").
   Mesma identidade do menu novo (hero.css): noite #09070d, tinta #120d18, ouro #e8c98b, pergaminho #f1e6cc, Grenze Gotisch
   nos títulos e Alegreya Sans no resto. A grade mostra só a carta; a ficha (#colInspect) traz clã, raridade e habilidades.
   Assinatura: o eclipse das estrelas no deck, uma lua com a coroa dourada que enche conforme as 30 estrelas são gastas.
   Referências 21st.dev: Animated Tabs (tinta deslizante nas abas) e Animated List (linhas que entram, saem e se reordenam).
   As animações ficam no bloco da coleção em ui.js. Só afeta #collectionView, a ficha e o cabeçalho com a coleção aberta. */

@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }

#collectionView {
  --c-night: #09070d; --c-ink: #120d18; --c-ink2: #1a1322; --c-gold: #e8c98b; --c-gold2: #c99a4a; --c-parch: #f1e6cc;
  --c-smoke: #9a8ca6; --c-line: #e8c98b2e; --c-crimson: #d4213d; --c-ease: cubic-bezier(.22,1,.36,1); --c-spring: cubic-bezier(.34,1.4,.5,1); --c-tab: cubic-bezier(.3,1.12,.5,1); /* mola curta do Animated Tabs (21st.dev): bounce .05, .25 s */
  --c-display: 'Grenze Gotisch', Georgia, serif; --c-body: 'Alegreya Sans', system-ui, sans-serif;
  max-width: none; margin: 0; padding: 0 max(28px, env(safe-area-inset-right)) 48px max(28px, env(safe-area-inset-left));
  font-family: var(--c-body); color: var(--c-parch);
}
#collectionView button { font-family: var(--c-body); }
#collectionView svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Com a coleção aberta, o cabeçalho mostra só a marca, as moedas e a conta (como no menu). */
body[data-screen=collection] > header .actions :is(#collection, #help, #sound, #settings) { display: none; }
body[data-screen=collection] > header { background: linear-gradient(180deg, #09070dee, #09070d00); border-bottom-color: transparent; }

.cxShell { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 25vw, 410px); gap: clamp(20px, 2vw, 40px); align-items: start; max-width: 1840px; margin: 0 auto; }
.cxMain { min-width: 0; }

/* Título */
.cxTop { display: flex; align-items: center; gap: 18px; padding: 10px 0 6px; }
.cxTitle { min-width: 0; }
.cxTitle h2 { font: 700 clamp(34px, 3.2vw, 52px)/1 var(--c-display); margin: 0; letter-spacing: .5px; color: var(--c-parch); text-shadow: 0 2px 20px #0009; }
.cxCount { margin: 4px 0 0; font-size: 15px; color: var(--c-smoke); font-variant-numeric: tabular-nums; }
.cxBack { order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 999px; border: 1px solid var(--c-line); background: #120d18b3; color: var(--c-parch); font-size: 16px; }
.cxBack:hover:not(:disabled) { background: #1d1527; border-color: var(--c-gold); }
.cxBack svg { font-size: 20px; }
.cxBack .kbd { margin-left: 2px; }

/* Barra fixa: busca, abas de clã e "Só as minhas" */
.cxBar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 8px -14px 14px; padding: 10px 14px; background: linear-gradient(180deg, #09070df2, #09070dd9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #e8c98b1a; border-radius: 0 0 16px 16px; }
.cxSearch { flex: 0 0 clamp(200px, 17vw, 280px); position: relative; display: flex; align-items: center; }
.cxSearch svg { position: absolute; left: 14px; font-size: 18px; color: var(--c-smoke); pointer-events: none; }
.cxSearch input { width: 100%; height: 46px; padding: 0 14px 0 42px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-ink); color: var(--c-parch); font: 16px var(--c-body); transition: border-color .2s, box-shadow .2s; }
.cxSearch input::placeholder { color: #8a7d96; }
.cxSearch input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px #e8c98b2e; }
.cxTabsWrap { flex: 1; min-width: 0; }
.cxTabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--c-ink); border: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cxTabs::-webkit-scrollbar { display: none; }
.cxTab { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: #cbbfd4; font-size: 15px; font-weight: 500; white-space: nowrap; transition: color .25s; }
.cxTab:hover:not(:disabled) { background: none; color: #fff; }
.cxTab small { font-size: 12px; color: inherit; opacity: .6; font-variant-numeric: tabular-nums; }
.cxTab.on { color: #1d1309; }
.cxTab.on small { opacity: .75; }
.cxTab.on .clanDot { box-shadow: 0 0 0 2px #1d130933; }
.cxTab:focus-visible { outline-offset: -2px; }
.cxInk { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: linear-gradient(180deg, #f6e2b3, #dcb067); box-shadow: 0 4px 14px #e8c98b40, inset 0 1px 0 #fff8; transition: transform .28s var(--c-tab), width .28s var(--c-tab), height .28s var(--c-tab); pointer-events: none; }
.cxInk.still { transition: none; }
.cxToggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-ink); color: #cbbfd4; font-size: 15px; white-space: nowrap; }
.cxToggle i { width: 30px; height: 18px; border-radius: 9px; background: #2e2438; position: relative; transition: background .25s; }
.cxToggle i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #9a8ca6; transition: transform .3s var(--c-spring), background .25s; }
.cxToggle[aria-pressed=true] { color: var(--c-parch); border-color: #e8c98b66; }
.cxToggle[aria-pressed=true] i { background: #6b5226; }
.cxToggle[aria-pressed=true] i::after { transform: translateX(12px); background: var(--c-gold); }

/* Grade: só a carta, arte inteira, como na arena */
.cxGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 11.5vw, 210px), 1fr)); gap: clamp(14px, 1.3vw, 22px); }
.cxItem { position: relative; min-width: 0; }
.cxEmpty { padding: 48px 12px; text-align: center; color: var(--c-smoke); font-size: 18px; }
#colGrid .card.duel { width: 100%; height: auto; aspect-ratio: 5 / 7; display: block; margin: 0; border-radius: 12px; border: 1px solid #e8c98b40; background: #140f1a; cursor: pointer; box-shadow: 0 12px 26px #000b; transition: transform .35s var(--c-ease), box-shadow .35s var(--c-ease), filter .35s, border-color .25s; }
#colGrid .card.duel .art { position: absolute; inset: 0; height: auto; background-size: cover; background-position: 50% 22%; }
#colGrid .card.duel .cardText { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 16cqw 4.5cqw 4.5cqw; background: linear-gradient(180deg, transparent, #0b0810d9 55%, #0b0810f5); }
#colGrid .card.duel .cardStats { border: 0; margin: 0; padding: 0; }
#colGrid .card.duel .stars .st.on { animation: none; }
#colGrid .card.duel .art h4.cardName { font: 700 max(14px, 8.6cqw)/1.05 var(--c-display); letter-spacing: .3px; padding: 4cqw 6cqw 9cqw; }
#colGrid .card.duel .art .state { display: none; }
#colGrid .card.duel .rarTag { left: auto; right: 4cqw; bottom: auto; top: 50%; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--c-ease); font-size: 10px; padding: 2px 6px; }
#colGrid .cxItem:is(:hover, :focus-within) .rarTag { opacity: 1; transform: none; }
/* o hover vem do .cxItem (parado), não da carta: se a carta sobe, o cursor nas quinas sai dela e o efeito tremia (Leo, 06/10/2026) */
#colGrid .cxItem:hover .card.duel, #colGrid .card.duel:focus-visible { transform: translateY(-6px); border-color: #e8c98b99; box-shadow: 0 22px 38px #000d, 0 0 0 1px #e8c98b66; }
#colGrid .card.duel:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
#colGrid .card.duel:active { transform: translateY(-2px) scale(.97); transition-duration: .08s; }

/* No deck: moldura dourada e selo com o nível */
.cxItem.in .card.duel { border-color: var(--c-gold); box-shadow: 0 0 0 2px var(--c-gold), 0 0 26px #e8c98b44, 0 14px 28px #000c; }
.cxSeal { position: absolute; z-index: 6; top: -9px; right: -9px; min-width: 40px; height: 40px; padding: 0 6px; display: grid; place-items: center; border-radius: 50%; font: 800 15px/1 var(--c-body); color: #2a1606; background: radial-gradient(circle at 35% 30%, #fff6d6, #f2c96b 45%, #b9801f); box-shadow: 0 4px 12px #000a, 0 0 0 2px #09070d, 0 0 16px #ffc94d66; transform: scale(0); transition: transform .4s var(--c-spring); pointer-events: none; }
.cxItem.in .cxSeal { transform: scale(1); }
/* Bloqueada: arte apagada, cadeado e "Loja" */
.cxItem.locked .card.duel { filter: grayscale(.85) brightness(.55); border-color: #ffffff1a; box-shadow: 0 10px 22px #0009; }
.cxItem.locked:hover .card.duel { filter: grayscale(.4) brightness(.75); }
.cxLock { position: absolute; z-index: 5; left: 50%; top: 44%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; gap: 4px; color: var(--c-parch); pointer-events: none; text-shadow: 0 2px 8px #000; }
.cxLock svg { font-size: 30px; filter: drop-shadow(0 2px 6px #000); }
.cxLock b { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: #09070dcc; border: 1px solid #ffffff26; }
.cxItem.locked .cxLock { display: flex; }
/* Deck cheio: as que ficaram de fora esmaecem um pouco */
.cxItem.full .card.duel { filter: saturate(.55) brightness(.78); }
.cxItem.full .card.duel:hover { filter: none; }
/* Botão da ficha */
.cxInfo { position: absolute; z-index: 6; left: 6px; top: calc(min(26%, 64px)); width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff2e; background: #09070dcc; color: var(--c-parch); font-size: 19px; opacity: 0; transform: scale(.85); transition: opacity .2s, transform .25s var(--c-ease), background .2s; }
.cxInfo:hover:not(:disabled) { background: #1d1527; border-color: var(--c-gold); }
.cxItem:is(:hover, :focus-within) .cxInfo { opacity: 1; transform: none; }
@media (hover: none) { .cxInfo { opacity: .92; transform: none; } }

/* Painel do deck */
.cxDeck { position: sticky; top: 12px; max-height: calc(100vh - 24px); display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--c-line); background: radial-gradient(120% 60% at 50% 0%, #2a1b2e 0%, transparent 60%), linear-gradient(180deg, #160f1df7, #0e0a13f7); box-shadow: 0 24px 60px #000a, inset 0 1px 0 #ffffff0d; }
.cxDock { display: none; }
.cxDeckBody { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 18px 18px 16px; }
.cxDeckHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cxDeckHead h3 { margin: 0; font: 700 28px/1 var(--c-display); color: var(--c-parch); }
.cxTools { display: flex; gap: 6px; }
.cxTools button { padding: 7px 12px; border-radius: 999px; font-size: 14px; border: 1px solid var(--c-line); background: #ffffff08; color: #d8cde0; }
.cxTools button:hover:not(:disabled) { background: #ffffff14; }

/* Eclipse das estrelas */
.cxGaugeRow { display: flex; align-items: center; gap: 16px; }
.cxGauge { --p: 0; --tone: var(--c-gold); position: relative; flex-shrink: 0; width: 104px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 50%, #0b080e 0 60%, transparent 61%), conic-gradient(var(--tone) calc(var(--p) * 1turn), #2a2131 calc(var(--p) * 1turn));
  box-shadow: 0 0 calc(10px + var(--p) * 26px) color-mix(in srgb, var(--tone) calc(var(--p) * 45%), transparent), inset 0 0 0 1px #ffffff12; transition: --p .7s var(--c-ease), box-shadow .7s var(--c-ease); }
.cxGauge::before { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #2a2030, #09070d 70%); box-shadow: inset -6px -8px 16px #000c, 0 0 0 1px #00000080; }
.cxGauge > * { position: relative; }
.cxGauge b { font: 700 32px/1 var(--c-display); color: var(--c-parch); font-variant-numeric: tabular-nums; }
.cxGauge small { display: block; font-size: 11px; letter-spacing: 1px; color: var(--c-smoke); margin-top: 2px; }
.cxGauge.over { --tone: var(--c-crimson); }
.cxGauge.over b { color: #ff9aa8; }
.cxGaugeText p { margin: 0; }
#deckCount { font-size: 18px; color: #d8cde0; }
#deckCount b { font: 700 26px var(--c-display); color: var(--c-gold); display: inline-block; }
.cxHint { margin-top: 4px !important; font-size: 14px; line-height: 1.35; color: var(--c-smoke); }

/* Clãs do deck */
.cxClans { display: flex; flex-wrap: wrap; gap: 6px; }
.cxClans span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 13.5px; color: #b9adc3; border: 1px solid #ffffff14; background: #ffffff06; cursor: default; }
.cxClans span b { font-weight: 700; color: inherit; }
.cxClans span.on { color: var(--c-parch); border-color: #e8c98b55; background: #e8c98b12; }
.cxClans span.none { border: 0; background: none; padding: 0; font-size: 13.5px; line-height: 1.35; color: var(--c-smoke); }

/* Linhas do deck */
.cxList { list-style: none; margin: 0 -6px; padding: 2px 6px; display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: thin; flex: 1; }
.cxRow { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 30px; align-items: center; gap: 10px; padding: 5px 6px 5px 5px; border-radius: 12px; border: 1px solid #ffffff10; background: #ffffff06; transition: background .2s, border-color .2s; }
.cxRow:hover { background: #ffffff0d; border-color: #e8c98b33; }
.cxThumb { width: 38px; height: 50px; padding: 0; border-radius: 7px; border: 1px solid #ffffff1f; background: #221a2a center 20% / cover no-repeat; box-shadow: 0 3px 8px #0008; }
button.cxThumb:hover:not(:disabled) { border-color: var(--c-gold); background-color: #221a2a; }
.cxRowInfo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cxRowInfo > b { display: flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.15; color: var(--c-parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxRowInfo > b .clanDot { width: 8px; height: 8px; }
.cxRowStats { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--c-smoke); white-space: nowrap; overflow: hidden; }
.cxRowStats em { font-style: normal; font-weight: 800; font-size: 12px; min-width: 22px; text-align: center; padding: 1px 5px; border-radius: 5px; }
.cxRowStats em.a { background: var(--atkBg); color: var(--atkInk); }
.cxRowStats em.d { background: var(--dmgBg); color: var(--dmgInk); }
.cxLockNote { overflow: hidden; text-overflow: ellipsis; color: #d9a85a; }
.cxPips { display: flex; gap: 0; }
.cxPips button { width: 19px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; font-size: 17px; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px #cdb88c88; transition: transform .2s var(--c-spring), color .2s; }
.cxPips button.on { -webkit-text-stroke: 0; color: #f6c453; text-shadow: 0 0 8px #ffc94d88; }
.cxPips button:hover:not(:disabled) { background: none; transform: scale(1.22); -webkit-text-stroke-color: #f6c453; }
.cxPips button:focus-visible { outline-offset: 0; }
.cxRemove { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: none; color: #a9879a; font-size: 17px; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
.cxRow:hover .cxRemove, .cxRemove:focus-visible { opacity: 1; }
.cxRemove:hover:not(:disabled) { background: #d4213d26; color: #ffb3bf; }
@media (hover: none) { .cxRemove { opacity: .9; } }
.cxRow.empty { grid-template-columns: 38px 1fr; border-style: dashed; border-color: #ffffff17; background: none; }
.cxRow.empty .cxThumb { border-style: dashed; background: none; box-shadow: none; }
.cxEmptyText { font-size: 14px; color: #85798f; font-style: italic; }

.cxStatus { margin: 0; font-size: 14px; line-height: 1.35; color: var(--c-smoke); min-height: 1.35em; }
.cxStatus.ok { color: #9fdcb8; }
.cxStatus.bad { color: #ffb0bc; }
.cxPlay { width: 100%; min-height: 54px; border-radius: 14px; border: 1px solid #f6e2b3; background: linear-gradient(180deg, #f6e2b3, #d6a85c 60%, #b98a3e); color: #1d1309; font-size: 18px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 10px 26px #e8c98b2e, inset 0 1px 0 #fff9; transition: transform .2s var(--c-ease), box-shadow .2s, filter .2s; }
.cxPlay:hover:not(:disabled) { background: linear-gradient(180deg, #fbebc5, #e0b468 60%, #c2924a); border-color: #fff1cc; transform: translateY(-1px); box-shadow: 0 14px 30px #e8c98b44, inset 0 1px 0 #fff9; }
.cxPlay:active:not(:disabled) { transform: scale(.98); }
.cxPlay:disabled { background: #2a2131; color: #8d8198; border-color: #3d3247; box-shadow: none; }
.deckGhost { position: fixed; z-index: 990; pointer-events: none; border-radius: 10px; background-size: cover; background-position: 50% 18%; box-shadow: 0 12px 30px #000c, 0 0 0 2px #e8c98b; }

/* Telas baixas (notebook): painel mais enxuto para caber as 10 linhas. */
@media (max-height: 820px) and (min-width: 1001px) {
  .cxDeckBody { gap: 9px; padding: 14px 14px 12px; }
  .cxDeckHead h3 { font-size: 24px; }
  .cxGauge { width: 84px; } .cxGauge b { font-size: 26px; }
  .cxHint { display: none; }
  .cxRow { grid-template-columns: 30px minmax(0, 1fr) auto 26px; gap: 8px; padding: 3px 5px 3px 4px; }
  .cxRow.empty { grid-template-columns: 30px 1fr; }
  .cxThumb { width: 30px; height: 40px; }
  .cxRowStats { display: none; }
  .cxPips button { height: 26px; }
  .cxPlay { min-height: 48px; }
}

/* Ficha do personagem */
#colInspect.cxInspect { max-width: none; animation: none; }
.cxInspect { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border-radius: 22px; border: 1px solid #e8c98b40; background: radial-gradient(90% 70% at 100% 0%, #2a1b2e, transparent 60%), #110c16; color: #f1e6cc; box-shadow: 0 40px 100px #000d; overflow: hidden; font-family: 'Alegreya Sans', system-ui, sans-serif; }
.cxInspect::backdrop { background: #05030880; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cxInspect svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cxInspBody { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; padding: 26px; max-height: calc(100vh - 32px); overflow-y: auto; }
.cxInspArt { aspect-ratio: 5 / 7; border-radius: 16px; background: #1a1322 center 20% / cover no-repeat; border: 1px solid #e8c98b55; box-shadow: 0 24px 50px #000c, 0 0 0 1px #00000080; }
.cxInspInfo { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 6px 30px 52px 0; }
.cxEyebrow { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #cbbfd4; }
.cxRar { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 6px; color: #120e18; background: var(--r, #b9b3c2); }
.cxRar.rt-collector { color: #fff; background: linear-gradient(100deg, #ff7ad9, #7a3cff, #5fd6cf, #ffd36b); }
.cxInspInfo h3 { margin: 0; font: 700 clamp(34px, 4vw, 48px)/1 'Grenze Gotisch', Georgia, serif; color: #f1e6cc; }
.cxNums { display: flex; gap: 10px; }
.cxNums span { display: flex; flex-direction: column; align-items: center; min-width: 86px; padding: 8px 14px 9px; border-radius: 14px; box-shadow: inset 0 1px 0 #ffffff59, 0 4px 12px #0008; }
.cxNums b { font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.cxNums small { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-top: 3px; }
.cxNums .atk { background: var(--atkBg); color: var(--atkInk); border: 1px solid var(--atkEdge); }
.cxNums .atk small { color: #4a2b0c; }
.cxNums .dmg { background: var(--dmgBg); color: var(--dmgInk); border: 1px solid var(--dmgEdge); }
.cxNums .dmg small { color: #ffd9de; }
.cxLevel { display: flex; flex-direction: column; gap: 2px; }
.cxLevel small { font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #9a8ca6; }
.cxPips.big button { width: 40px; height: 44px; font-size: 32px; -webkit-text-stroke-width: 1.6px; }
.cxAbils { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cxAbils li { padding: 12px 14px; border-radius: 12px; border: 1px solid #ffffff12; background: #ffffff06; font-size: 16.5px; line-height: 1.4; color: #e6dbe9; }
.cxAbils li b { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #e8c98b; margin-bottom: 3px; }
.cxAbils li em { font-style: normal; color: #9a8ca6; }
.cxAbils li.off { color: #b4a8bd; }
.cxActs { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.cxAct { min-height: 52px; border-radius: 14px; font-size: 18px; font-weight: 700; }
.cxAct.in { border: 1px solid #f6e2b3; background: linear-gradient(180deg, #f6e2b3, #d6a85c 60%, #b98a3e); color: #1d1309; }
.cxAct.in:hover:not(:disabled) { background: linear-gradient(180deg, #fbebc5, #e0b468 60%, #c2924a); border-color: #fff1cc; }
.cxAct.out { border: 1px solid #d4213d88; background: #d4213d1a; color: #ffc2cb; }
.cxAct.out:hover:not(:disabled) { background: #d4213d33; border-color: #ff8fa3; }
.cxAct.shop { border: 1px solid #b98ef0aa; background: #7b4bc433; color: #eadcff; }
.cxActNote { margin: 0; font-size: 14px; color: #9a8ca6; }
.cxClose { position: absolute; z-index: 3; top: 14px; right: 14px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff1f; background: #09070dcc; color: #f1e6cc; font-size: 20px; }
.cxInspNav { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 8px; }
.cxInspNav button { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #e8c98b33; background: #09070dcc; color: #f1e6cc; font-size: 20px; }
.cxInspNav button:hover:not(:disabled), .cxClose:hover:not(:disabled) { border-color: #e8c98b; background: #1d1527; }

/* Tablet e celular: uma coluna, deck vira barra no pé da tela que abre como gaveta. */
@media (max-width: 1000px) {
  #collectionView { padding-bottom: 104px; }
  .cxShell { grid-template-columns: minmax(0, 1fr); }
  .cxBar { flex-wrap: wrap; }
  .cxSearch { flex: 1 1 200px; }
  .cxTabsWrap { order: 3; flex-basis: 100%; }
  .cxDeck { position: fixed; z-index: 960; left: 0; right: 0; bottom: 0; top: auto; max-height: 86vh; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -16px 50px #000c; }
  .cxDock { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 10px 16px; border: 0; border-radius: 20px 20px 0 0; background: none; color: var(--c-parch); text-align: left; }
  .cxDock:hover:not(:disabled) { background: none; }
  .cxGauge.mini { width: 50px; }
  .cxGauge.mini b { font-size: 18px; }
  .cxDockText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .cxDockText > b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cxDockThumbs { display: flex; gap: 3px; }
  .cxDockThumbs i { width: 18px; height: 24px; border-radius: 4px; background: #221a2a center 20% / cover; border: 1px solid #ffffff1a; }
  .cxDockThumbs i:not([style]) { border-style: dashed; background: none; }
  .cxDockOpen { flex-shrink: 0; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--c-line); font-size: 15px; }
  .cxDeckBody { max-height: 0; opacity: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: max-height .45s var(--c-ease), opacity .25s, padding .3s; }
  .cxDeck.open .cxDeckBody { max-height: calc(86vh - 72px); opacity: 1; overflow-y: auto; padding: 4px 16px 14px; }
  .cxList { overflow: visible; flex: none; }
  .cxInspNav { right: auto; left: 14px; bottom: auto; top: 14px; }
  .cxInspBody { grid-template-columns: 1fr; gap: 16px; padding: 0 0 18px; }
  .cxInspArt { aspect-ratio: 16 / 11; border-radius: 0; border: 0; box-shadow: none; background-position: 50% 18%; mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
  .cxInspInfo { padding: 0 18px 60px; margin-top: -40px; position: relative; }
}
@media (max-width: 640px) {
  #collectionView { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .cxTop { padding-top: 6px; }
  .cxBack .kbd { display: none; }
  .cxBar { margin: 6px -12px 12px; padding: 8px 12px; gap: 8px; }
  .cxSearch input, .cxToggle { height: 42px; }
  .cxGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cxSeal { min-width: 34px; height: 34px; font-size: 13px; top: -7px; right: -7px; }
  .cxInspect { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .cxInspBody { max-height: 92vh; }
  .cxInspInfo h3 { font-size: 36px; }
  .cxNums span { min-width: 74px; } .cxNums b { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  #colGrid .card.duel, .cxInk, .cxSeal, .cxGauge, .cxDeckBody, .cxInfo, .cxToggle i::after, .cxPips button { transition: none !important; }
}
.reduced :is(#colGrid .card.duel, .cxInk, .cxSeal, .cxGauge, .cxDeckBody, .cxInfo, .cxPips button) { transition: none !important; }

/* Desktop: tela de aplicativo, sem rolar a página. A grade rola por dentro (.cxMain) e o deck fica inteiro, com o botão de jogar sempre à vista. */
@media (min-width: 1001px) {
  #collectionView { height: calc(100dvh - var(--hdr, 100px)); overflow: hidden; padding-bottom: 0; }
  .cxShell { height: 100%; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .cxMain { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 14px 40px; margin: 0 -14px; scrollbar-width: thin; scrollbar-color: #e8c98b33 transparent; }
  .cxDeck { position: relative; top: 0; min-height: 0; max-height: none; margin: 4px 0 14px; }
  .cxDeckBody { flex: 1; }
}
/* Abas que não cabem: a borda some aos poucos, indicando que dá para rolar. */
.cxTabsWrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
@media (max-width: 1000px) { .cxDeck.open .cxDock :is(.cxGauge.mini, .cxDockThumbs) { display: none; } }

/* Abas TODOS / MINHAS (02/10/2026): TODOS mostra todas as cartas, MINHAS só as que você tem. */
.cxSeg{flex-shrink:0;display:inline-flex;height:46px;padding:4px;gap:4px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-ink)}
.cxSeg button{padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;background:transparent;border:0;cursor:pointer;transition:background .2s,color .2s}
.cxSeg button:hover{background:#ffffff14}
.cxSeg button[aria-pressed=true]{background:linear-gradient(180deg,#ffe9b0,#e3b861);color:#1b1320}
.cxSeg[hidden]{display:none}
@media(max-width:760px){.cxSeg{height:42px}.cxSeg button{padding:0 12px;font-size:12.5px}}

/* Coleção (02/10/2026): raridade logo acima das estrelas de evolução, botão "ver ficha" no canto superior esquerdo, ficha menor. */
#colGrid .card.duel .rarTag { left: 50% !important; right: auto !important; top: auto !important; bottom: 20cqw !important; transform: translate(-50%, 4px); }
#colGrid .cxItem:is(:hover, :focus-within) .rarTag { transform: translate(-50%, 0) !important; }
.cxInfo { left: 7px; top: 7px; width: 30px; height: 30px; font-size: 17px; }
#colGrid .card.duel .art h4.cardName { padding-inline: 12cqw !important; }
.cxInspect { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 56px); border-radius: 18px; }
.cxInspBody { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 22px; padding: 20px; max-height: calc(100vh - 56px); }
.cxInspInfo { gap: 10px; padding: 4px 24px 46px 0; }
.cxInspInfo h3 { font-size: clamp(28px, 3.2vw, 38px); }
#colGrid .card.duel .art h4.cardName { font-size: max(12px, 6.8cqw) !important; padding-inline: 11cqw !important; white-space: normal !important; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.1; }

/* Filtro de raridade (Leo, 04/10/2026): seletor em pílula, com o fio na cor da raridade escolhida. */
.cxRar { flex-shrink: 0; display: inline-flex; }
.cxRar select { height: 46px; padding: 0 34px 0 18px; border-radius: 999px; border: 1px solid var(--c-line); background-color: var(--c-ink); color: #fff; font: 700 14px/1 var(--e-body, sans-serif); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; width: auto; min-width: 0; }
.cxRar select[data-on="1"] { border-color: var(--rar, var(--c-line)); box-shadow: 0 0 0 1px var(--rar, transparent) inset; }
.cxRar select option { text-transform: none; letter-spacing: 0; background: #14101c; color: #f1e6cc; }
@media (max-width: 760px) { .cxRar select { height: 42px; font-size: 12.5px; padding-left: 12px; } }
.cxItem.locked .card.duel { opacity: .55; }
.cxRar { background: transparent; border: 0; padding: 0; box-shadow: none; }