/* Identidade "Encruzilhada de Mana" (Commander). Carregar depois de tema-base.css.
   Referência: paisagem onde as cinco cores se encontram (vulcão vermelho à
   esquerda, pântano roxo embaixo, planície clara no centro, floresta verde e
   mar azul à direita) e o kit de pedra, bronze e gemas. A gema do topo do
   resultado e as duas da placa da chance têm a cor do comandante (--ci-gem,
   pintada pela página).
   Fontes na página: Marcellus SC e Alegreya 400/600/400 itálico.
   Este arquivo é gerado uma vez e depois editado à mão; as texturas são SVG
   embutido (granulação e manchas por feTurbulence). */
:root {
  --bronze: #b89a62; --bronze-hi: #ecd3a0; --bronze-lo: #6e5a36;
  --mana-w: #f1e2a4; --mana-u: #45a9ec; --mana-b: #a97be2; --mana-r: #ee6b3e; --mana-g: #5ccf72;
  --ci-gem: conic-gradient(var(--mana-w), var(--mana-u), var(--mana-b), var(--mana-r), var(--mana-g), var(--mana-w));
  --metal: var(--bronze); --metal-hi: var(--bronze-hi); --metal-lo: var(--bronze-lo);
  --metal-rgb: 184 154 98; --metal-lo-rgb: 110 90 54;
  --metal-grad: linear-gradient(180deg, #f0d9a8 0%, #c9a66a 42%, #8f7244 54%, #c4a46c 100%);
  --metal-bronze: var(--metal-grad);
  --metal-flat: #c4a36b; --btn-bg: #2c2832; --btn-bg-light: #fffdf8;
  --metal-edge: #5a4724; --on-metal: #24190b; --on-metal-hover: #160f05;
  --metal-text: linear-gradient(180deg, #f8e9c4, #d9bb83 55%, #9a7c48);
  --engraved: #e9d6ab; --engraved-light: #4a3a1e;
  --ink-accent: #4a3a1e; --link-light: #5a4422;
  --coin: radial-gradient(circle at 40% 35%, #48424f, #221f26);
  --coin-hover: radial-gradient(circle at 40% 35%, #57505f, #2a262f);
  --coin-light: radial-gradient(circle at 40% 35%, #fffaf0, #e2d4b6);
  --coin-light-ink: #4a3a1e;
  --input-bg-light: rgba(255, 252, 244, .7); --input-shadow-light: rgba(80, 60, 30, .18);
  --tile-qty-bg: rgba(12, 10, 14, .88); --delta-bg: rgba(0, 0, 0, .4);
  --fan-glow: rgba(241, 226, 164, .16); --fan-glow-light: rgba(160, 120, 50, .2);
  --selection: rgba(184, 154, 98, .5);
  --display: "Marcellus SC", "Marcellus", Georgia, serif;
  --ui-font: "Alegreya", Georgia, "Times New Roman", serif;
  --num-font: "Alegreya", Georgia, serif; /* o zero da Marcellus SC parece a letra O */
  --display-weight: 400; --btn-size: 13.5px; --btn-size-mobile: 12px; --result-btn-w: 74px;
  --body-size: 15.5px; --hero-p-size: 17.5px; --heading-tracking: .02em;
  --tile-radius: 5px; --zoom-img-radius: 10px;
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%20%3Cfilter%20id%3D'g'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%20%3CfeColorMatrix%20values%3D'0%200%200%200%200.86%200%200%200%200%200.82%200%200%200%200%200.76%200%200%200%200.08%200'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E");
  --stains: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'1000'%20viewBox%3D'0%200%201600%201000'%20preserveAspectRatio%3D'none'%3E%20%3Cfilter%20id%3D's'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.0042%20.0055'%20numOctaves%3D'4'%20seed%3D'7'%2F%3E%20%3CfeColorMatrix%20values%3D'0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.85%200%200%200%20-0.34'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'1600'%20height%3D'1000'%20filter%3D'url(%23s)'%2F%3E%3C%2Fsvg%3E");
  --stone: linear-gradient(180deg, #2b2830, #1d1b21);
  --stone-hi: linear-gradient(180deg, #34303a, #222027);
  --stone-edge: #0a090c;
}
:root[data-theme="dark"] {
  --bg: #110f13;
  --panel: #1f1d23;
  --panel2: #29262e;
  --panel-glass: rgba(31, 29, 35, .97);
  --text: #ece2cc;
  --muted: rgba(236, 226, 204, .62);
  --border: rgba(184, 154, 98, .22);
  --border-strong: rgba(184, 154, 98, .45);
  --accent: var(--text);
  --accent2: #2c2932;
  --danger: #ec7462;
  --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
:root[data-theme="light"] {
  /* à luz do dia: mapa em pergaminho, as cinco cores em aquarela onde estão
     no mapa, placas de velino e tinta marrom-escura */
  --bg: #e4d5b6;
  --panel: #fbf6ea;
  --panel2: #f2e9d6;
  --panel-glass: rgba(251, 246, 234, .97);
  --text: #23190d;
  --muted: rgba(35, 25, 13, .68);
  --border: rgba(100, 78, 44, .28);
  --border-strong: rgba(100, 78, 44, .5);
  --accent2: #3a3328;
  --shadow: rgba(80, 60, 30, .2);
  --metal: #9c7c45; --metal-hi: #c4a065; --metal-lo: #5f4b26;
  --metal-rgb: 156 124 69; --metal-lo-rgb: 95 75 38;
  --ink-accent: #3b2a14; --engraved-light: #3b2a14; --btn-edge-light: rgba(95, 75, 38, .45);
  --input-bg-light: #fffdf8; --input-shadow-light: rgba(80, 60, 30, .14);
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'220'%20height%3D'220'%3E%20%3Cfilter%20id%3D'g'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.85'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%20%3CfeColorMatrix%20values%3D'0%200%200%200%200.36%200%200%200%200%200.26%200%200%200%200%200.14%200%200%200%200.07%200'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E");
  --stains: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'1600'%20height%3D'1000'%20viewBox%3D'0%200%201600%201000'%20preserveAspectRatio%3D'none'%3E%20%3Cfilter%20id%3D's'%20x%3D'0'%20y%3D'0'%20width%3D'100%25'%20height%3D'100%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.0042%20.0055'%20numOctaves%3D'4'%20seed%3D'7'%2F%3E%20%3CfeColorMatrix%20values%3D'0%200%200%200%200.42%200%200%200%200%200.3%200%200%200%200%200.14%200.5%200%200%200%20-0.2'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'1600'%20height%3D'1000'%20filter%3D'url(%23s)'%2F%3E%3C%2Fsvg%3E");
  --stone: linear-gradient(180deg, #fdf9f0, #f4ecdb);
  --stone-hi: linear-gradient(180deg, #fffcf5, #f6efe0);
  --stone-edge: rgba(100, 78, 44, .38);
  color-scheme: light;
}
body { font-variant-numeric: lining-nums; }

/* as cinco cores ficam onde estão no mapa, como névoa colorida sobre pedra */
body {
  background-color: var(--bg);
  background-image: var(--grain), var(--stains),
    radial-gradient(40% 50% at 2% 24%, rgba(238, 107, 62, .14), transparent 72%),
    radial-gradient(42% 46% at 12% 102%, rgba(169, 123, 226, .13), transparent 72%),
    radial-gradient(38% 42% at 50% 44%, rgba(241, 226, 164, .05), transparent 70%),
    radial-gradient(42% 52% at 84% 94%, rgba(92, 207, 114, .12), transparent 72%),
    radial-gradient(38% 52% at 102% 32%, rgba(69, 169, 236, .14), transparent 72%),
    radial-gradient(70% 45% at 50% -8%, rgba(241, 226, 164, .07), transparent 70%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background-image: var(--grain), var(--stains),
    radial-gradient(46% 58% at 0% 22%, rgba(226, 92, 48, .3), transparent 72%),
    radial-gradient(48% 50% at 10% 104%, rgba(140, 92, 210, .28), transparent 72%),
    radial-gradient(60% 34% at 50% -6%, rgba(255, 244, 205, .7), transparent 70%),
    radial-gradient(48% 56% at 86% 96%, rgba(64, 170, 88, .28), transparent 72%),
    radial-gradient(44% 58% at 104% 30%, rgba(48, 140, 214, .3), transparent 72%);
  background-size: 220px 220px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
/* a Marcellus SC só tem um peso */
.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-weight: 400; }

/* gema da identidade no topo do resultado e a chance numa placa presa por duas gemas */
.result::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 18px; height: 18px;
  transform: translateX(-50%) rotate(45deg); border-radius: 2px;
  background: var(--ci-gem);
  border: 2px solid var(--bronze);
  box-shadow: 0 0 0 1px var(--bronze-lo), inset 0 0 5px rgba(0, 0, 0, .55), inset 2px 2px 3px rgba(255, 255, 255, .45), 0 2px 4px rgba(0, 0, 0, .6);
}
.prob-wrap {
  position: relative; padding: 6px 30px 6px 30px; border-radius: 3px;
  background-image: var(--grain), linear-gradient(180deg, #2a2730, #16141a);
  border: 2px solid var(--bronze);
  box-shadow: 0 0 0 1px var(--bronze-lo), inset 0 0 0 2px rgba(0, 0, 0, .45), inset 0 3px 8px rgba(255, 255, 255, .06), 0 3px 8px rgba(0, 0, 0, .45);
}
.prob-wrap::before, .prob-wrap::after {
  content: ""; position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; transform: rotate(45deg); border-radius: 2px;
  background: var(--ci-gem); border: 1.5px solid var(--bronze);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, .55), inset 1px 1px 2px rgba(255, 255, 255, .45);
}
.prob-wrap::before { left: 8px; }
.prob-wrap::after { right: 8px; }
/* à luz do dia a placa é de velino, com o número em tinta marrom */
:root[data-theme="light"] .prob-wrap {
  background-image: var(--grain), linear-gradient(180deg, #fffaf0, #f3e9d4);
  box-shadow: 0 0 0 1px var(--bronze-lo), inset 0 0 0 2px #fffaf0, inset 0 0 0 3px rgb(var(--metal-rgb) / .35);
}
:root[data-theme="light"] .prob-value { background: none; color: var(--ink-accent); filter: none; }
:root[data-theme="light"] .prob-value.empty { color: rgba(59, 42, 20, .4); }
.prob-value { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.commander-empty { border-radius: 5px; background: rgba(217, 173, 66, .05); }

/* identidade de cor como medalhas de mana: cor lisa num aro de bronze com o
   símbolo da cor (a letra fica só para leitor de tela). Chapadas, sem brilho
   nem relevo. Sem nenhuma escolhida, todas acesas; escolhendo, as outras
   esmaecem. */
.ci-badge, .cat-color-toggle {
  --medal: 22px;
  position: relative; flex-shrink: 0; box-sizing: border-box;
  width: var(--medal); height: var(--medal); padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; color: transparent; line-height: 0;
  border: 2px solid var(--bronze);
  background: var(--gem);
  transition: filter .15s ease, box-shadow .15s ease;
}
.ci-badge::before, .cat-color-toggle::before {
  content: ""; position: absolute; inset: 17%;
  background: #1b140c;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
:is(.ci-badge.W, .cat-color-toggle[data-color="W"]) { --gem: #efe2ae; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.6'%2F%3E%3Cpath%20d%3D'M12%201.6l1.7%204.3h-3.4zM12%2022.4l-1.7-4.3h3.4zM1.6%2012l4.3-1.7v3.4zM22.4%2012l-4.3%201.7v-3.4zM4.6%204.6l4.2%201.8-2.4%202.4zM19.4%2019.4l-4.2-1.8%202.4-2.4zM19.4%204.6l-1.8%204.2-2.4-2.4zM4.6%2019.4l1.8-4.2%202.4%202.4z'%2F%3E%3C%2Fsvg%3E"); }
:is(.ci-badge.U, .cat-color-toggle[data-color="U"]) { --gem: #94c6ec; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Cpath%20d%3D'M12%202.4c3.7%205%206.6%208.7%206.6%2012.4a6.6%206.6%200%200%201-13.2%200C5.4%2011.1%208.3%207.4%2012%202.4z'%2F%3E%3C%2Fsvg%3E"); }
:is(.ci-badge.B, .cat-color-toggle[data-color="B"]) { --gem: #ab9cab; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%202.6c-4.8%200-8.1%203.4-8.1%207.8%200%202.6%201.3%204.7%203.2%205.8v3.6h2.4v-2.1h1.3v2.1h2.4v-2.1h1.3v2.1h2.4v-3.6c1.9-1.1%203.2-3.2%203.2-5.8%200-4.4-3.3-7.8-8.1-7.8zM8.7%209a2%202.2%200%201%200%200%204.4%202%202.2%200%201%200%200-4.4zm6.6%200a2%202.2%200%201%200%200%204.4%202%202.2%200%201%200%200-4.4zM12%2013.6l-1.2%202.1h2.4z'%2F%3E%3C%2Fsvg%3E"); }
:is(.ci-badge.R, .cat-color-toggle[data-color="R"]) { --gem: #ee8e6c; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Cpath%20d%3D'M12.3%201.8c1%203.4%205.9%206.3%205.9%2011.6a6.2%206.2%200%200%201-12.4%200c0-2.8%201.4-4.7%202.9-6-.1%202.1.6%203.5%201.9%204.2-.4-3.6.4-6.9%201.7-9.8z'%2F%3E%3C%2Fsvg%3E"); }
:is(.ci-badge.G, .cat-color-toggle[data-color="G"]) { --gem: #91c88f; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Cpath%20d%3D'M12%202.2c-2.3%200-4%201.7-4.1%203.8-2.1.4-3.6%202.2-3.6%204.3%200%202.4%202%204.4%204.4%204.4h1.8v3.6l-2.6%203.5h8.2l-2.6-3.5v-3.6h1.8c2.4%200%204.4-2%204.4-4.4%200-2.1-1.5-3.9-3.6-4.3-.1-2.1-1.8-3.8-4.1-3.8z'%2F%3E%3C%2Fsvg%3E"); }
:is(.ci-badge.C, .cat-color-toggle[data-color="C"]) { --gem: #ccc6bd; --glyph: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'%2523000'%3E%3Cpath%20fill-rule%3D'evenodd'%20d%3D'M12%202.2%2021.8%2012%2012%2021.8%202.2%2012zM12%207.6%207.6%2012%2012%2016.4%2016.4%2012z'%2F%3E%3C%2Fsvg%3E"); }
.ci-badges { gap: 6px; }

/* medalhas que são botões (filtros de cor) */
.cat-color-toggle { --medal: 34px; cursor: pointer; }
.fx-color-toggle { --medal: 28px; cursor: pointer; opacity: 1; }
:is(.cat-color-toggle, .fx-color-toggle):hover { border-color: var(--bronze-hi); }
:is(.cat-color-toggle.active, .fx-color-toggle.on) { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--bronze-hi); }
:is(.cat-colors:has(.active) .cat-color-toggle:not(.active), #fxColors:has(.on) .fx-color-toggle:not(.on)) {
  filter: saturate(.25) brightness(.72);
}
:is(.cat-colors:has(.active) .cat-color-toggle:not(.active), #fxColors:has(.on) .fx-color-toggle:not(.on)):hover { filter: saturate(.6) brightness(.9); }
:root[data-theme="light"] :is(.cat-colors:has(.active) .cat-color-toggle:not(.active), #fxColors:has(.on) .fx-color-toggle:not(.on)) { filter: saturate(.25) brightness(.95) opacity(.7); }
:is(.cat-color-toggle, .fx-color-toggle):focus-visible { outline: 2px solid var(--bronze-hi); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ci-badge, .cat-color-toggle { transition: none; } }
@media (max-width: 800px) {
  .prob-wrap { padding: 4px 24px 4px 24px; }
}