/* Páginas de apoio (coleção, catálogo, arquétipo, Meus Decks e deck
   compartilhado) na identidade nova: o menu, o portão de entrada, os campos,
   as cartas, o detalhe da carta, os modais e o aviso. Carregar depois do
   <style> da página, de tema-base.css e do tema do jogo. */

/* ---------- menu: idioma e tema moram dentro dele, como nas calculadoras ---------- */
.side-controls { display: none !important; }
.nav-item.side-controls-mobile { display: flex !important; }
.nav-item { font-size: 14px; }
.nav-item::before { background: rgb(var(--metal-rgb) / .1); }
.nav-item .nav-icon { color: var(--metal); }
.nav-item-label { font-family: var(--ui-font); font-size: 13px; letter-spacing: 0; color: var(--muted); }
.nav-lang-btn {
  font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 11px;
  border-radius: 3px; border-color: rgb(var(--metal-rgb) / .35);
}
.nav-lang-btn:hover { border-color: var(--metal); color: var(--text); }
.nav-lang-btn.active { background: var(--metal-flat, var(--metal)); color: var(--on-metal); border-color: var(--metal-edge); }
.coll-account-email { font-family: var(--ui-font); font-size: 12.5px; }

/* ---------- título da página ---------- */
.page-header { padding: 14px 20px 2px; text-align: center; }
.page-header h1 {
  margin: 0; font-family: var(--display); font-weight: var(--display-weight, 700);
  font-size: clamp(24px, 3.6vw, 36px); line-height: 1.1; letter-spacing: var(--heading-tracking, .015em);
}
:root[data-theme="dark"] .page-header h1 {
  background: var(--metal-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .6));
}
:root[data-theme="light"] .page-header h1 { color: var(--ink-accent); }
.page-header p { margin: 8px auto 0; max-width: 560px; color: var(--muted); font-size: 16px; }

/* ---------- botões: a página dá o formato, o tema dá o material ---------- */
.btn { gap: 6px; line-height: 1.2; }
.btn.small, .export-bar .btn { font-size: calc(var(--btn-size, 12.5px) - .5px); padding: 7px 12px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  border-radius: 3px; cursor: pointer; color: var(--engraved);
  background: var(--btn-bg, var(--panel2)); border: 1px solid rgb(var(--metal-rgb) / .5); box-shadow: none;
}
:root[data-theme="light"] .icon-btn { color: var(--engraved-light); background: var(--btn-bg-light, #fffdf6); }
.icon-btn:hover { border-color: var(--metal); color: var(--metal-hi); }

/* ---------- blocos de pedra ---------- */
:is(.auth-gate-box, .modal-box, .card-detail-box, .coll-pending-row, .coll-pro-wrap, .coll-page-tile, .deck-card, .autocomplete, .deck-card-search-results, .cat-effect-dropdown, .empty-state) {
  background-color: var(--panel);
  background-image: var(--grain), var(--stone);
  border: 1px solid var(--stone-edge);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 10px 24px var(--shadow);
}
:is(.auth-gate-box, .modal-box, .card-detail-box) {
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgb(var(--metal-rgb) / .4), 0 24px 60px var(--shadow);
}
:root[data-theme="light"] :is(.auth-gate-box, .modal-box, .card-detail-box, .coll-pending-row, .coll-pro-wrap, .coll-page-tile, .deck-card, .deck-row, .autocomplete, .deck-card-search-results, .cat-effect-dropdown, .empty-state, .coll-toast) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(80, 55, 20, .14), 0 10px 24px var(--shadow);
}
:root[data-theme="light"] :is(.auth-gate-box, .modal-box, .card-detail-box) {
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgb(var(--metal-rgb) / .45), 0 24px 60px var(--shadow);
}
:root[data-theme="light"] .icon-btn { border-color: var(--btn-edge-light, rgb(var(--metal-rgb) / .5)); box-shadow: none; }
:root[data-theme="light"] .coll-view-toggle button:not(.active) { color: var(--engraved-light); }
.coll-page-tile { border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 14px var(--shadow); }
.modal-overlay, .card-detail-overlay { background: rgba(4, 7, 8, .74); }
:is(.modal-close, .card-detail-close) { color: var(--muted); }
:is(.modal-close, .card-detail-close):hover { color: var(--metal-hi); }
:root[data-theme="light"] :is(.modal-close, .card-detail-close):hover { color: var(--ink-accent); }
.ac-item:hover, .cat-effect-option:hover, .deck-card-search-item:hover { background: rgb(var(--metal-rgb) / .1); }

/* ---------- portão de entrada ---------- */
.auth-gate-box { padding: 30px; }
.auth-gate-box h2 { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 21px; }
.auth-gate-box p { font-size: 15px; }
.auth-gate-box label { font-size: 13.5px; }

/* ---------- campos ---------- */
:is(.auth-gate-box input, .coll-search-bar input, .coll-filter-input, .coll-select, .deck-rename-input, .deck-card-search input,
    .modal-box textarea, #importTextarea, .arch-search-bar input, .cat-type-trigger, .cat-filters input[type="text"], .cat-filters select) {
  background-color: color-mix(in srgb, var(--panel) 72%, #000); border: 1px solid var(--stone-edge); border-radius: 3px; color: var(--text);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .05);
  font-family: var(--ui-font); font-size: 15px;
}
:root[data-theme="light"] :is(.auth-gate-box input, .coll-search-bar input, .coll-filter-input, .coll-select, .deck-rename-input, .deck-card-search input,
    .modal-box textarea, #importTextarea, .arch-search-bar input, .cat-type-trigger, .cat-filters input[type="text"], .cat-filters select) {
  background-color: var(--input-bg-light); box-shadow: inset 0 2px 4px var(--input-shadow-light);
}
:is(.coll-search-bar input, .arch-search-bar input) { font-size: 16px; padding: 13px 14px; }
:is(input, textarea)::placeholder { color: var(--muted); font-style: italic; }
.cat-type-trigger:hover { border-color: var(--metal); }

/* ---------- alternâncias: placas lado a lado, a escolhida em metal ---------- */
.coll-view-toggle { border-radius: 3px; border: 1px solid rgb(var(--metal-rgb) / .45); background: rgba(0, 0, 0, .22); padding: 2px; gap: 2px; }
:root[data-theme="light"] .coll-view-toggle { background: rgb(var(--metal-lo-rgb) / .1); }
.coll-view-toggle button { background: transparent; border-radius: 2px; font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 12px; color: var(--muted); }
.coll-view-toggle button.active { background: var(--metal-flat, var(--metal)); color: var(--on-metal); box-shadow: none; }
.cat-effect-toggle { border-radius: 3px; border-color: rgb(var(--metal-rgb) / .4); font-family: var(--ui-font); font-size: 13.5px; }
.cat-effect-toggle:hover { border-color: var(--metal); }
.cat-effect-toggle.active { background: var(--metal-flat, var(--metal)); color: var(--on-metal); border-color: var(--metal-edge); }
/* as cores do Commander são medalhas de mana, desenhadas em tema-mana.css */

/* ---------- cartas: borda do papel e sombra de pedra, sem brilho ---------- */
.dv-card { border-radius: var(--tile-radius, 4px); }
.dv-card.dv-known { border-color: var(--stone-edge); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.dv-card.dv-known::after { display: none; }
.dv-card:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.coll-badge {
  background: var(--tile-qty-bg); color: var(--metal-hi); border: 1px solid var(--metal-lo); border-radius: 2px;
  font-family: var(--num-font); font-weight: 700; box-shadow: none;
}
.coll-step-btn {
  border-radius: 50%; border: 1px solid rgb(var(--metal-rgb) / .55); color: var(--metal-hi); background: var(--btn-bg, var(--panel2)); box-shadow: none;
}
:root[data-theme="light"] .coll-step-btn { background: var(--btn-bg-light, #fffdf6); color: var(--coin-light-ink); }
.coll-step-btn:hover { border-color: var(--metal-hi); background: rgb(var(--metal-rgb) / .16); filter: none; }
.coll-step-val { font-family: var(--num-font); }
.coll-page-name, .arch-tile-name { font-family: var(--ui-font); font-size: 14px; font-weight: 600; }

/* ---------- tabela Pro ---------- */
.coll-pro-table { font-size: 14px; }
.coll-pro-th { font-family: var(--display); font-weight: var(--display-weight, 700); text-transform: none; letter-spacing: .02em; font-size: 12.5px; color: var(--metal-hi); }
:root[data-theme="light"] .coll-pro-th { color: var(--ink-accent); }
.coll-pro-table th, .coll-pro-table td { border-bottom-color: rgb(var(--metal-rgb) / .16); }
.coll-pro-stat-cell { font-family: var(--num-font); font-size: 12px; }

/* ---------- detalhe da carta ---------- */
.card-detail-box { padding: 26px; }
.card-detail-info h3 { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 22px; }
:root[data-theme="dark"] .card-detail-info h3 { color: var(--metal-hi); }
:root[data-theme="light"] .card-detail-info h3 { color: var(--ink-accent); }
.card-detail-cost, .card-detail-stats, .card-detail-combat { font-family: var(--num-font); }
.card-detail-combat { border-radius: 3px; background: rgba(0, 0, 0, .2); border-color: rgb(var(--metal-rgb) / .4); }
.card-detail-text { font-family: var(--ui-font); font-size: 15.5px; }
.card-detail-box img { border-radius: var(--zoom-img-radius, 8px); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }

/* ---------- aviso com desfazer: placa no pé da tela ---------- */
.coll-toast {
  left: 50%; right: auto; bottom: 22px; transform: translate(-50%, 14px);
  width: max-content; max-width: min(94vw, 580px); padding: 10px 10px 10px 16px; gap: 12px;
  border-radius: 6px; font-size: 14.5px; line-height: 1.4; color: var(--text);
  background-color: var(--panel); background-image: var(--grain), var(--stone-hi);
  border: 1px solid rgb(var(--metal-rgb) / .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 40px rgba(0, 0, 0, .45);
}
.coll-toast.show { transform: translate(-50%, 0); }
.coll-toast-action {
  flex-shrink: 0; text-decoration: none; padding: 6px 10px; border-radius: 3px; background: transparent; cursor: pointer;
  border: 1px solid rgb(var(--metal-rgb) / .55); color: var(--metal-hi);
  font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 12.5px;
}
:root[data-theme="light"] .coll-toast-action { color: var(--ink-accent); }
.coll-toast-action:hover { border-color: var(--metal); }

/* ---------- textos de apoio ---------- */
:is(.coll-page-loading, .decks-loading, .arch-page-loading, .cat-status, .ac-loading) { font-style: italic; font-size: 15px; }
.coll-explore-links a { font-size: 14px; }
.coll-explore-links a .nav-icon, .coll-explore-links .nav-icon { color: var(--metal); }
.coll-explore-links a:hover { color: var(--metal-hi); text-decoration: none; }
:root[data-theme="light"] .coll-explore-links a:hover { color: var(--ink-accent); }
.coll-count, .cat-results-count, .coll-owned-hint, .cat-legal-check { font-size: 13.5px; }
.modal-hint, .modal-status { font-size: 14.5px; }
.ac-name { font-size: 15px; }
.ac-type { font-size: 12.5px; }

.coll-remove-btn {
  width: 26px; height: 26px; border-radius: 3px; border: 1px solid transparent; background: transparent; flex-shrink: 0;
  color: var(--danger); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.coll-remove-btn:hover { border-color: var(--danger); }

/* ---------- estado vazio: um convite com a próxima ação ---------- */
.empty-state { text-align: center; padding: 34px 26px; }
.empty-state p { margin: 0 auto 18px; max-width: 46ch; font-size: 16px; color: var(--text); }

/* ---------- menu de ações (o mesmo das calculadoras) ---------- */
.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 45; display: none; padding: 6px;
}
.menu.open .menu-pop { display: block; }
.menu-pop button, .menu-pop a {
  display: flex; width: 100%; text-align: left; align-items: center; gap: 8px; padding: 9px 10px;
  border: none; border-radius: 3px; background: none; cursor: pointer; color: var(--text);
  font: inherit; font-size: 15px; text-decoration: none;
}
.menu-pop button:hover, .menu-pop a:hover { background: rgb(var(--metal-rgb) / .12); }
.menu-pop .danger { color: var(--danger); }

/* ---------- Meus Decks: uma placa por deck, capa sempre à mostra ---------- */
.decks-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 22px 0 16px; }
.decks-toolbar .deck-rename-input { flex: 1; }
#decksList { display: flex; flex-direction: column; gap: 12px; }
.deck-row {
  display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px;
  background-color: var(--panel); background-image: var(--grain), var(--stone);
  border: 1px solid var(--stone-edge); border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 10px 24px var(--shadow);
}
.deck-row-cover { position: relative; width: 96px; height: 76px; flex-shrink: 0; display: block; }
.deck-row-cover img {
  position: absolute; left: 50%; bottom: 0; width: 46px; aspect-ratio: 59 / 86; object-fit: cover; background: #000;
  border-radius: 3px; border: 1px solid rgba(0, 0, 0, .6); box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
  transform-origin: 50% 130%; transform: translateX(-50%) rotate(var(--r, 0deg));
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.deck-row:hover .deck-row-cover img { transform: translateX(-50%) rotate(calc(var(--r, 0deg) * 1.4)) translateY(-3px); }
/* sem capa: o verso da carta, em pedra com o filete do jogo */
.deck-row-back {
  position: absolute; left: 50%; bottom: 0; width: 46px; aspect-ratio: 59 / 86; transform: translateX(-50%);
  border-radius: 3px; background-color: var(--panel2); background-image: var(--grain), var(--stone-hi);
  box-shadow: inset 0 0 0 3px var(--panel2), inset 0 0 0 4px rgb(var(--metal-rgb) / .55), 0 6px 14px rgba(0, 0, 0, .45);
}
.deck-row-back::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid rgb(var(--metal-rgb) / .7); border-radius: 1px;
}
.deck-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deck-row-name {
  font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 19px; line-height: 1.2;
  text-decoration: none; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.deck-row-name:hover { color: var(--metal-hi); }
:root[data-theme="light"] .deck-row-name:hover { color: var(--ink-accent); }
.deck-row-meta { font-size: 14px; color: var(--muted); }
.deck-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.deck-row .deck-rename-input { width: 100%; }

@media (max-width: 640px) {
  .coll-toast { bottom: 12px; max-width: calc(100vw - 24px); flex-wrap: wrap; }
  .deck-row { gap: 12px; padding: 12px; flex-wrap: wrap; }
  .deck-row-cover { width: 70px; height: 62px; }
  .deck-row-cover img, .deck-row-back { width: 38px; }
  .deck-row-name { font-size: 17px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .deck-row-actions { margin-left: auto; }
  .decks-toolbar { flex-wrap: wrap; }
}

/* catálogo sem filtro: título das mais jogadas e a dica para buscar outras */
.cat-results-count.is-default { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cat-default-title { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 19px; letter-spacing: var(--heading-tracking, .015em); color: var(--metal-hi); }
:root[data-theme="light"] .cat-default-title { color: var(--ink-accent); }
.cat-default-hint { font-size: 14px; color: var(--muted); }

/* Meus Decks, editar cartas: a capa à mostra no topo e o botão "Capa" */
.cover-picker {
  display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid rgb(var(--metal-rgb) / .35); border-radius: 5px; background: rgb(var(--metal-rgb) / .07);
}
.cover-preview { display: flex; gap: 6px; flex-shrink: 0; }
.cover-slot {
  position: relative; width: 48px; aspect-ratio: 59 / 86; border-radius: 3px; padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.cover-slot.empty {
  border: 1px dashed rgb(var(--metal-rgb) / .5); color: var(--muted); font-size: 11px; font-style: italic;
}
.cover-slot.filled { border: 1px solid var(--metal); background: #000; cursor: pointer; }
.cover-slot.filled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-slot-name { font-size: 10px; color: #f2ead6; padding: 3px; }
.cover-slot-x {
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  background: var(--tile-qty-bg, rgba(0, 0, 0, .8)); color: var(--metal-hi);
}
.cover-slot.filled:hover .cover-slot-x { background: var(--danger); color: #fff; }
.cover-help { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.cover-help b { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 15px; color: var(--metal-hi); }
:root[data-theme="light"] .cover-help b { color: var(--ink-accent); }
.cover-toggle {
  flex-shrink: 0; min-width: 76px; padding: 4px 8px; border-radius: 3px; cursor: pointer;
  font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 11.5px; letter-spacing: .02em;
  background: transparent; color: var(--muted); border: 1px dashed rgb(var(--metal-rgb) / .55);
}
.cover-toggle:hover { color: var(--text); border-style: solid; }
.cover-toggle.on { background: var(--metal-flat, var(--metal)); color: var(--on-metal); border: 1px solid var(--metal-edge); }
.deck-cards-row.is-cover { box-shadow: inset 3px 0 0 var(--metal); }
@media (max-width: 520px) {
  .cover-picker { flex-direction: column; align-items: flex-start; }
}