/* Identidade "Câmara do Milênio" (Yu-Gi-Oh). Carregar depois de tema-base.css.
   Referência: parede de pedra azul com hieróglifos, ouro com centro de
   lápis-lazúli, moldura de pedra com filete dourado. A chance fica num
   cartucho egípcio; o escaravelho de lápis marca o topo do resultado.
   Fontes na página: Cinzel 600/700 e Spectral 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, hieróglifos em traço). */
:root {
  --gold: #c9a65c; --gold-hi: #f0dc9e; --gold-lo: #7d5f27;
  --lapis: #1d3c74; --lapis-hi: #2f5fae;
  --metal: var(--gold); --metal-hi: var(--gold-hi); --metal-lo: var(--gold-lo);
  --metal-rgb: 201 166 92; --metal-lo-rgb: 125 95 39;
  --metal-grad: linear-gradient(180deg, #f3e0a4 0%, #d6b264 42%, #a9843d 53%, #d4b06a 100%);
  --metal-gold: var(--metal-grad);
  --metal-flat: #cfa957; --btn-bg: #22333a; --btn-bg-light: #fffaf0;
  --metal-edge: #5e4519; --on-metal: #2b1d07; --on-metal-hover: #1a1104;
  --metal-text: linear-gradient(180deg, #fbefc4, #e0c078 55%, #a8843e);
  --engraved: #e6d39b; --engraved-light: #4a3510;
  --ink-accent: #1d3c74; --link-light: #1d3c74;
  --coin: radial-gradient(circle at 40% 35%, #3a4f57, #1a272b);
  --coin-hover: radial-gradient(circle at 40% 35%, #4b6169, #22343a);
  --coin-light: radial-gradient(circle at 40% 35%, #fff6dc, #e2cf9c);
  --coin-light-ink: #5a3f12;
  --input-bg-light: rgba(255, 250, 235, .7); --input-shadow-light: rgba(90, 62, 24, .18);
  --tile-qty-bg: rgba(8, 14, 16, .88); --delta-bg: rgba(6, 12, 24, .5);
  --fan-glow: rgba(120, 160, 200, .22); --fan-glow-light: rgba(160, 120, 50, .22);
  --selection: rgba(47, 95, 174, .6);
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --ui-font: "Spectral", Georgia, "Times New Roman", serif;
  --num-font: "Cinzel", Georgia, serif;
  --display-weight: 700; --btn-size: 12.5px; --btn-size-mobile: 11px;
  --body-size: 15px; --hero-p-size: 17px; --heading-tracking: .015em;
  --tile-radius: 4px; --zoom-img-radius: 8px;
  --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.82%200%200%200%200%200.86%200%200%200%200%200.85%200%200%200%200.075%200'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'220'%20height%3D'220'%20filter%3D'url(%23g)'%2F%3E%3C%2Fsvg%3E");
  --grain-escuro: 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.82%200%200%200%200%200.86%200%200%200%200%200.85%200%200%200%200.075%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.9%200%200%200%20-0.36'%2F%3E%3C%2Ffilter%3E%20%3Crect%20width%3D'1600'%20height%3D'1000'%20filter%3D'url(%23s)'%2F%3E%3C%2Fsvg%3E");
  --glyphs: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'210'%20height%3D'300'%20fill%3D'none'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%20%3Cg%20stroke%3D'rgba(205%2C185%2C130%2C.058)'%3E%20%3Cellipse%20cx%3D'42'%20cy%3D'30'%20rx%3D'9'%20ry%3D'12'%2F%3E%3Cpath%20d%3D'M28%2046h28M42%2042v38'%2F%3E%20%3Cpath%20d%3D'M22%20122l6-7%206%207%206-7%206%207%206-7%206%207%206-7%206%207'%2F%3E%20%3Cpath%20d%3D'M26%20210q16-20%2038-8l14-3-10%209q-4%2016-28%2018zM40%20228l-4%2012M52%20226l2%2014'%2F%3E%20%3Cpath%20d%3D'M136%20268c0-10%2022-10%2022%200s-22%2010-22%200zM147%20278v12'%2F%3E%20%3C%2Fg%3E%3Cg%20stroke%3D'rgba(205%2C185%2C130%2C.058)'%3E%20%3Cpath%20d%3D'M118%2046q24-18%2048%200q-24%2013-48%200z'%2F%3E%3Ccircle%20cx%3D'142'%20cy%3D'46'%20r%3D'4.5'%2F%3E%3Cpath%20d%3D'M137%2056l-5%2018M150%2056q7%2012%2016%207'%2F%3E%20%3Cpath%20d%3D'M150%20104q10%2024%200%2054M150%20104q-8%208%200%2015M146%20158h8'%2F%3E%20%3Ccircle%20cx%3D'150'%20cy%3D'212'%20r%3D'12'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'212'%20r%3D'2.5'%2F%3E%20%3Cpath%20d%3D'M30%20272q16-12%2032%200z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  --stone: linear-gradient(180deg, #24353b, #172327);
  --stone-hi: linear-gradient(180deg, #2e4249, #1d2b30);
  --stone-edge: #070c0e;
}
:root[data-theme="dark"] {
  --bg: #0b1316;
  --panel: #1a272b;
  --panel2: #21313a;
  --panel-glass: rgba(24, 36, 40, .96);
  --text: #e9dfc6;
  --muted: rgba(233, 223, 198, .62);
  --border: rgba(201, 166, 92, .22);
  --border-strong: rgba(201, 166, 92, .45);
  --accent: var(--text);
  --accent2: #2a3b41;
  --danger: #e0705f;
  --shadow: rgba(0, 0, 0, .55);
  --role-jolly: #e2be66;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --accent2: #1d3c74;
  --shadow: rgba(90, 60, 20, .2);
  /* à luz do dia: parede de arenito com hieróglifos pintados (lápis e ocre
     vermelho, desbotados), placas de calcário claro e tinta azul-lápis */
  --bg: #d6c194;
  --panel: #f7efdc;
  --panel2: #efe3c6;
  --panel-glass: rgba(247, 239, 220, .97);
  --text: #24190c;
  --muted: rgba(36, 25, 12, .68);
  --border: rgba(110, 80, 30, .28);
  --border-strong: rgba(110, 80, 30, .5);
  --metal: #a8822f; --metal-hi: #c99f45; --metal-lo: #6d4f17;
  --metal-rgb: 168 130 47; --metal-lo-rgb: 109 79 23;
  --engraved-light: #1d3c74; --btn-edge-light: rgba(29, 60, 116, .34);
  --input-bg-light: #fffcf3; --input-shadow-light: rgba(90, 62, 24, .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.4%200%200%200%200%200.28%200%200%200%200%200.1%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.5%200%200%200%200%200.34%200%200%200%200%200.12%200.55%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");
  --glyphs: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'210'%20height%3D'300'%20fill%3D'none'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%20%3Cg%20stroke%3D'rgba(29%2C60%2C116%2C.17)'%3E%20%3Cellipse%20cx%3D'42'%20cy%3D'30'%20rx%3D'9'%20ry%3D'12'%2F%3E%3Cpath%20d%3D'M28%2046h28M42%2042v38'%2F%3E%20%3Cpath%20d%3D'M22%20122l6-7%206%207%206-7%206%207%206-7%206%207%206-7%206%207'%2F%3E%20%3Cpath%20d%3D'M26%20210q16-20%2038-8l14-3-10%209q-4%2016-28%2018zM40%20228l-4%2012M52%20226l2%2014'%2F%3E%20%3Cpath%20d%3D'M136%20268c0-10%2022-10%2022%200s-22%2010-22%200zM147%20278v12'%2F%3E%20%3C%2Fg%3E%3Cg%20stroke%3D'rgba(156%2C64%2C30%2C.14)'%3E%20%3Cpath%20d%3D'M118%2046q24-18%2048%200q-24%2013-48%200z'%2F%3E%3Ccircle%20cx%3D'142'%20cy%3D'46'%20r%3D'4.5'%2F%3E%3Cpath%20d%3D'M137%2056l-5%2018M150%2056q7%2012%2016%207'%2F%3E%20%3Cpath%20d%3D'M150%20104q10%2024%200%2054M150%20104q-8%208%200%2015M146%20158h8'%2F%3E%20%3Ccircle%20cx%3D'150'%20cy%3D'212'%20r%3D'12'%2F%3E%3Ccircle%20cx%3D'150'%20cy%3D'212'%20r%3D'2.5'%2F%3E%20%3Cpath%20d%3D'M30%20272q16-12%2032%200z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");
  --stone: linear-gradient(180deg, #fbf5e6, #f1e6cc);
  --stone-hi: linear-gradient(180deg, #fdf9ee, #f3e9d2);
  --stone-edge: rgba(110, 80, 30, .38);
  color-scheme: light;
}

/* a parede: hieróglifos apagados sobre pedra azul, luz fria no alto */
body {
  background-color: var(--bg);
  background-image: var(--glyphs), var(--grain), var(--stains),
    radial-gradient(120% 70% at 50% -10%, rgba(47, 95, 174, .12), transparent 60%),
    radial-gradient(130% 90% at 50% 112%, rgba(0, 0, 0, .55), transparent 60%);
  background-size: 210px 300px, 220px 220px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
/* no claro, a parede pintada recebe luz do alto */
:root[data-theme="light"] body {
  background-image: var(--glyphs), var(--grain), var(--stains),
    radial-gradient(120% 70% at 50% -10%, rgba(255, 246, 220, .55), transparent 60%),
    radial-gradient(130% 90% at 50% 112%, rgba(110, 80, 30, .22), transparent 60%);
  background-size: 210px 300px, 220px 220px, 100% 100%, 100% 100%, 100% 100%;
}
.hero h1, .rule-label { font-weight: 700; }

/* escaravelho de lápis no topo do resultado e a chance num cartucho */
.result::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 22px; height: 16px; transform: translateX(-50%);
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 40% 30%, #7aa2e2, var(--lapis-hi) 30%, var(--lapis) 65%, #0e2147);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-lo), 0 2px 4px rgba(0, 0, 0, .6);
}
.prob-wrap {
  position: relative; padding: 6px 30px 6px 20px; border-radius: 999px;
  background: radial-gradient(130% 160% at 50% 0%, #2c5397, var(--lapis) 55%, #10234a);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-lo), inset 0 0 0 2px rgba(8, 14, 18, .5), inset 0 3px 8px rgba(255, 255, 255, .12), 0 3px 8px rgba(0, 0, 0, .45);
}
.prob-wrap::after {
  content: ""; position: absolute; right: 12px; top: 24%; bottom: 24%; width: 3px; border-radius: 2px; background: var(--metal-grad);
}
/* à luz do dia o cartucho é de marfim, com o número pintado em lápis */
:root[data-theme="light"] .prob-wrap {
  background: #fbf4e1;
  box-shadow: 0 0 0 1px var(--gold-lo), inset 0 0 0 2px #fbf4e1, inset 0 0 0 3px rgba(29, 60, 116, .35);
}
:root[data-theme="light"] .prob-wrap::after { background: var(--lapis); }
:root[data-theme="light"] .prob-value { background: none; color: var(--lapis); filter: none; }
:root[data-theme="light"] .prob-value.empty { color: rgba(29, 60, 116, .4); }
:root[data-theme="light"] .result::before { box-shadow: 0 0 0 1px var(--gold-lo); }
/* atributos como medalhas, no mesmo desenho das de mana do Commander: cor
   lisa num aro de ouro e o kanji do atributo, como na carta. Chapadas, sem
   brilho nem relevo. Escolhendo um, os outros esmaecem. */
.cat-attr-toggle {
  --medal: 34px;
  position: relative; flex-shrink: 0; box-sizing: border-box; cursor: pointer;
  width: var(--medal); height: var(--medal); padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--gold); background: var(--attr); color: var(--attr-ink, #fff);
  font: 700 17px/1 "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS Mincho", serif;
  transition: filter .15s ease, box-shadow .15s ease;
}
.cat-attr-toggle[data-attr="DARK"] { --attr: #5a3f78; }
.cat-attr-toggle[data-attr="LIGHT"] { --attr: #e6c95e; --attr-ink: #3a2a08; }
.cat-attr-toggle[data-attr="EARTH"] { --attr: #8c5b36; }
.cat-attr-toggle[data-attr="WATER"] { --attr: #3c80c4; }
.cat-attr-toggle[data-attr="FIRE"] { --attr: #c5432c; }
.cat-attr-toggle[data-attr="WIND"] { --attr: #4c9768; }
.cat-attr-toggle[data-attr="DIVINE"] { --attr: #c49a52; --attr-ink: #2e2008; }
.cat-attr-toggle:hover { border-color: var(--gold-hi); }
.cat-attr-toggle.active { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--gold-hi); }
.cat-attrs:has(.active) .cat-attr-toggle:not(.active) { filter: saturate(.25) brightness(.72); }
.cat-attrs:has(.active) .cat-attr-toggle:not(.active):hover { filter: saturate(.6) brightness(.9); }
:root[data-theme="light"] .cat-attrs:has(.active) .cat-attr-toggle:not(.active) { filter: saturate(.25) brightness(.95) opacity(.7); }
.cat-attr-toggle:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
@media (max-width: 800px) {
  .prob-wrap { padding: 4px 24px 4px 16px; }
}