/* Identidade TCG//ODDS: materiais comuns aos dois jogos.
   Pedra entalhada, metal polido e letra de inscrição. Nada de pílula, vidro
   desfocado, brilho de neon ou fonte monoespaçada. As cores, as letras e os
   ornamentos de cada jogo ficam em tema-milenio.css (Yu-Gi-Oh) e
   tema-mana.css (Commander), carregados depois deste arquivo, que só usa as
   variáveis que eles definem:
   --metal, --metal-hi, --metal-lo, --metal-rgb, --metal-grad, --metal-edge,
   --on-metal, --on-metal-hover, --metal-text, --engraved, --engraved-light,
   --ink-accent, --coin, --coin-hover, --coin-light, --coin-light-ink,
   --display, --ui-font, --num-font, --grain, --stone, --stone-hi, --stone-edge,
   --metal-flat, --btn-bg, --btn-bg-light.
   Botões são chapados (cor lisa, sem brilho, relevo ou sombra); a
   profundidade fica só nas placas de conteúdo. */

body, button, input, select, textarea { font-family: var(--ui-font); }
body { font-size: var(--body-size, 15px); }
html, .catalog-panel, .catalog-grid, .sheet-box, .math-popup-box, .modal-box, .chz-effect { scrollbar-color: rgb(var(--metal-rgb) / .45) transparent; }
:focus-visible, .deck-tile:focus-visible { outline: 2px solid var(--metal); outline-offset: 2px; }
.brand { font-family: var(--display); font-weight: var(--display-weight, 700); letter-spacing: .04em; }
.brand .slash { color: var(--metal); }
.mono { font-family: var(--num-font); }

/* letra de inscrição nos títulos */
.hero h1, .deck-head h2, .group-head h3, .catalog-panel .section-title h2,
.sheet-title, .math-popup-box h3, #rolesTitle, #thTitle, .mana-panel > summary, .explainer summary, .rule-label,
.page-title, .modal-box h3, .auth-gate-box h2 {
  font-family: var(--display); letter-spacing: var(--heading-tracking, .015em);
}
.hero p { font-size: var(--hero-p-size, 17px); }
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .page-title {
  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="dark"] :is(.group-head h3, .rule-label, .section-head h2, .modal-box h3, .auth-gate-box h2) { color: var(--metal-hi); }
:root[data-theme="light"] :is(.hero h1, .page-title, .group-head h3, .rule-label, .section-head h2, .modal-box h3, .auth-gate-box h2) { color: var(--ink-accent); }
.import-box textarea::placeholder { font-family: var(--ui-font); font-style: italic; }

/* pedra entalhada: granulação, luz no topo, sombra embaixo, canto quase reto */
:is(.deck-panel, .catalog-panel, .import-box, .math-popup-box, .sheet-box, .explainer, .nav-pill, .resume-btn, .example-chip, .menu-pop, .toast-bar, .mana-panel, .stone) {
  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 12px 28px var(--shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* no claro a placa é calcário ou velino: luz no topo e sombra quente, sem o
   escuro embaixo que a pedra tem à noite */
:root[data-theme="light"] :is(.deck-panel, .catalog-panel, .import-box, .math-popup-box, .sheet-box, .explainer, .nav-pill, .resume-btn, .example-chip, .menu-pop, .toast-bar, .mana-panel, .stone) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(80, 55, 20, .14), 0 12px 28px var(--shadow);
}
/* o que é botão fica chapado, mesmo na lista das placas */
:root :is(.resume-btn, .example-chip) { background-image: none; box-shadow: none; }
.import-box { border-style: solid; }
.import-box.drag-over { border-color: var(--metal); }
:is(.import-box textarea, .cat-filters input, .cat-filters select, #catalogNameFilter, .cat-effect-filter, .fx-filters input, .fx-filters select, .role-row-name input, .field) {
  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);
}
:root[data-theme="light"] :is(.import-box textarea, .cat-filters input, .cat-filters select, #catalogNameFilter, .cat-effect-filter, .fx-filters input, .fx-filters select, .role-row-name input, .field) {
  background-color: var(--input-bg-light); box-shadow: inset 0 2px 4px var(--input-shadow-light);
}
.sheet-box, .math-popup-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); }
/* listas suspensas nativas: o campo tem fundo opaco (com fundo translúcido o
   Windows desenha a lista em cinza claro com a letra clara do tema) e as
   opções recebem o fundo e a letra do tema */
:root select option, :root select optgroup { background-color: var(--panel); color: var(--text); }
/* campo em foco: borda no metal do jogo e um halo leve, nos dois temas */
:root :is(input, textarea, select):focus { outline: none; }
:root :is(.import-box textarea, .cat-filters input, .cat-filters select, #catalogNameFilter, .cat-effect-filter, .fx-filters input, .fx-filters select, .role-row-name input, .field,
  .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):focus {
  border-color: var(--metal); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), 0 0 0 3px rgb(var(--metal-rgb) / .22);
}
:root[data-theme="light"] :is(.import-box textarea, .cat-filters input, .cat-filters select, #catalogNameFilter, .cat-effect-filter, .fx-filters input, .fx-filters select, .role-row-name input, .field,
  .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):focus {
  box-shadow: inset 0 2px 4px var(--input-shadow-light), 0 0 0 3px rgb(var(--metal-rgb) / .25);
}

/* zoom da carta (card-zoom.js injeta o estilo dele depois; por isso :root na frente) */
:root .chz-panel {
  background-color: var(--panel); background-image: var(--grain), var(--stone); border: 1px solid var(--stone-edge); border-radius: 6px;
  box-shadow: inset 0 0 0 4px var(--panel), inset 0 0 0 5px rgb(var(--metal-rgb) / .4), 0 20px 50px var(--shadow);
}
:root .chz-panel img { border-radius: var(--zoom-img-radius, 8px); }
:root .chz-combat { border-radius: 3px; background: rgba(0, 0, 0, .2); border-color: rgb(var(--metal-rgb) / .4); }
:root[data-theme="dark"] .chz-name { color: var(--metal-hi); }

/* o resultado: moldura de pedra com filete de metal e cravos nos cantos;
   o ornamento do topo e a forma da chance ficam no tema de cada jogo */
.result {
  --stud: radial-gradient(circle, var(--metal-hi) 0 1.5px, var(--metal) 2.5px, var(--metal-lo) 3.5px, transparent 4px);
  background-color: var(--panel);
  background-image:
    var(--stud), var(--stud), var(--stud), var(--stud),
    var(--grain), var(--stone-hi);
  background-position: top 1px left 1px, top 1px right 1px, bottom 1px left 1px, bottom 1px right 1px, 0 0, 0 0;
  background-size: 10px 10px, 10px 10px, 10px 10px, 10px 10px, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  border: 1px solid var(--stone-edge);
  border-radius: 4px;
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 6px var(--metal), inset 0 0 0 8px var(--panel), inset 0 0 0 9px rgb(var(--metal-rgb) / .35), 0 16px 34px var(--shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 16px 20px;
}
.prob-value {
  font-family: var(--display); font-weight: var(--display-weight, 700); letter-spacing: 0;
  background: var(--metal-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55));
}
.prob-value.empty { background: none; color: color-mix(in srgb, var(--metal-hi) 50%, transparent); filter: none; }
.prob-delta.up, .prob-delta.down { background: var(--delta-bg, rgba(0, 0, 0, .4)); border-radius: 3px; }
.prob-delta.up { color: #7fd6a0; }
.prob-delta.down { color: #f2a090; }
:root[data-theme="light"] :is(.prob-delta.up, .prob-delta.down) { background: rgba(60, 40, 10, .07); }
:root[data-theme="light"] .prob-delta.up { color: #1f7a46; }
:root[data-theme="light"] .prob-delta.down { color: #b23d2a; }

/* tabuletas da regra: pedra com aro de metal e botões como moedas */
.role-step { border-radius: 4px; background-image: var(--grain), var(--stone); border: 1px solid rgb(var(--metal-rgb) / .45); box-shadow: none; padding-right: 12px; }
.role-step button {
  width: 22px; height: 22px; margin: 2px; border: 1px solid rgb(var(--metal-rgb) / .55); color: var(--metal-hi);
  background: var(--btn-bg, var(--panel2));
}
:root[data-theme="light"] .role-step button { background: var(--btn-bg-light, #fffdf6); color: var(--coin-light-ink); }
.role-step button:hover:not(:disabled) { border-color: var(--metal-hi); background: rgb(var(--metal-rgb) / .16); }
.role-step .dot, .group-head .dot, .role-toggle .dot { border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.deck-tile .tile-roles i { border-radius: 1px; transform: rotate(45deg); }

/* botões: placa de pedra com letra de metal; a ação principal em metal polido */
.btn { font-family: var(--display); font-weight: var(--display-weight, 700); font-size: var(--btn-size, 12.5px); letter-spacing: .03em; border-radius: 3px; }
.btn, .btn.ghost {
  background: var(--btn-bg, var(--panel2)); color: var(--engraved); border: 1px solid rgb(var(--metal-rgb) / .5);
  box-shadow: none; text-shadow: none;
}
:root[data-theme="light"] :is(.btn, .btn.ghost):not(.primary) {
  color: var(--engraved-light); text-shadow: none; border-color: var(--btn-edge-light, rgb(var(--metal-rgb) / .5));
  background: var(--btn-bg-light, #fffdf6); box-shadow: none;
}
.btn:hover, .btn.ghost:hover { color: var(--metal-hi); border-color: var(--metal); filter: none; }
:root[data-theme="light"] .btn:not(.primary):hover { color: var(--ink-accent); border-color: var(--ink-accent); }

.btn.primary {
  background: var(--metal-flat, var(--metal)); color: var(--on-metal); border: 1px solid var(--metal-edge);
  text-shadow: none; box-shadow: none;
}
.btn.primary:hover { color: var(--on-metal-hover); filter: brightness(1.05); }
.btn.danger, .btn.danger-text, .btn.ghost.danger { color: var(--danger); }
.btn.danger { background: none; border-color: transparent; box-shadow: none; text-shadow: none; }
.btn.ghost.danger:hover { border-color: var(--danger); color: var(--danger); }
.link-btn { color: var(--metal-hi); text-decoration-color: rgb(var(--metal-rgb) / .5); }
:root[data-theme="light"] .link-btn { color: var(--link-light, var(--ink-accent)); }
:root[data-theme="dark"] .link-btn.small { color: color-mix(in srgb, var(--metal-hi) 80%, transparent); }
:root[data-theme="dark"] .rule-counts b { color: var(--metal-hi); }
.prob-help { border-radius: 3px; background: transparent; color: var(--metal-hi); border: 1px solid rgb(var(--metal-rgb) / .55); font-family: var(--display); }
:root[data-theme="light"] .prob-help { color: var(--coin-light-ink); }

/* abas e alternâncias: placas lado a lado, a escolhida em metal */
.hand-toggle, .deck-tabs, .seg { border-radius: 3px; border: 1px solid rgb(var(--metal-rgb) / .45); background: rgba(0, 0, 0, .22); padding: 2px; gap: 2px; }
.hand-toggle button, .deck-tab, .catalog-tab, .seg button { font-family: var(--display); font-weight: var(--display-weight, 700); border-radius: 2px; }
.hand-toggle button.active, .hand-custom, .deck-tab.active, .catalog-tab.active, .seg button.active {
  background: var(--metal-flat, var(--metal)); color: var(--on-metal); box-shadow: none; border-color: var(--metal-edge);
}
.catalog-tab { background: rgba(0, 0, 0, .22); border: 1px solid rgb(var(--metal-rgb) / .35); color: var(--muted); }
:root[data-theme="light"] :is(.hand-toggle button, .deck-tab, .seg button, .catalog-tab):not(.active) { color: var(--engraved-light); }
:root[data-theme="light"] :is(.hand-toggle, .deck-tabs, .seg, .catalog-tab:not(.active)) { background: rgb(var(--metal-lo-rgb) / .1); }
.cat-tile-add { background: var(--metal-flat, var(--metal)); color: var(--on-metal); border: 1px solid var(--metal-edge); box-shadow: none; }

/* cartas: sem brilho em volta, só a borda do papel e uma sombra de pedra */
.dv-known { box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.dv-known::after { display: none; }
.deck-tile.dv-known, .hand-card .dv-known { border-radius: var(--tile-radius, 4px); }
.catalog-tile .dv-known { border-color: var(--stone-edge); }
.tile-qty { background: var(--tile-qty-bg); color: var(--metal-hi); border: 1px solid var(--metal-lo); border-radius: 2px; }
.toast-bar { color: var(--text); border-color: rgb(var(--metal-rgb) / .6); }
.toast-bar button { border-radius: 3px; color: var(--metal-hi); border-color: rgb(var(--metal-rgb) / .55); font-family: var(--display); font-weight: var(--display-weight, 700); }
:root[data-theme="light"] .toast-bar button { color: var(--ink-accent); }
.role-toggle { border-radius: 4px; }
.role-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--role) 22%, transparent); }
.others-row { border-color: rgb(var(--metal-rgb) / .25); border-radius: 4px; }
.example-chip:hover, .resume-btn:hover { border-color: var(--metal); }

/* o leque de cartas do início sai de uma névoa */
.start-fan::before {
  content: ""; position: absolute; left: 50%; bottom: -18px; width: 420px; height: 150px; transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--fan-glow), transparent);
  filter: blur(8px); pointer-events: none;
}
:root[data-theme="light"] .dv-known { box-shadow: 0 3px 8px rgba(60, 40, 10, .28); }
:root[data-theme="light"] .start-fan::before { background: radial-gradient(closest-side, var(--fan-glow-light), transparent); }
:root[data-theme="dark"] ::selection { background: var(--selection); color: #fff; }

/* E / OU: como combinar o que foi marcado em cada grupo do catálogo */
.cat-modes { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 4px; }
.cat-modes:empty { display: none; }
.cat-mode { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cat-mode-label { min-width: 64px; font-family: var(--display); font-weight: var(--display-weight, 700); font-size: 13.5px; color: var(--muted); }
.cat-mode .seg { display: inline-flex; }
.cat-mode .seg button { border: 0; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.cat-mode .seg button:not(.active) { background: transparent; color: var(--muted); }
.cat-mode .seg button:not(.active):hover { color: var(--text); }
.cat-mode .seg button.active { background: var(--metal-flat, var(--metal)); color: var(--on-metal); }
:root[data-theme="light"] .cat-mode .seg button:not(.active) { color: var(--engraved-light); }
.cat-mode-hint { font-size: 14px; color: var(--muted); }

@media (max-width: 800px) {
  .result-main { background-image: var(--grain), var(--stone-hi); border: 1px solid var(--stone-edge); box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px rgb(var(--metal-rgb) / .55), 0 10px 30px var(--shadow); border-radius: 4px; }
  /* no celular o resultado não gruda no topo; o top do desktop zera */
  .result { box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 6px var(--metal), 0 6px 16px var(--shadow); position: relative; top: 0; }
  .deck-head h2 { max-width: 100%; } /* a letra de inscrição é larga; as abas descem para a linha de baixo */
  .result-main .btn { font-size: var(--btn-size-mobile, 11px); letter-spacing: .01em; padding-inline: 10px; width: var(--result-btn-w, 84px); }
  .result-actions { flex-shrink: 0; }
}