/* ═══════════ Sistema de Criaturas em Pixel-art CSS (gates-web) ═══════════
   Cada criatura é um MAPA DE TEXTO (ASCII) renderizado como malha de pixels.
   1 caractere = 1 pixel colorido. Paleta reduzida derivada de --base.
   Ver js/creature-art.js (renderer + grids). Prefixo de classe: .cr / .p-*.
   ───────────────────────────────────────────────────────────────────────
   PALETA (char → classe):
     K ink · B base · L lit · S shade · D deep · E eye(glow) · I iris(pupil)
     W white/presa · R red · G gold · g gold-deep · M steel · m steel-deep
     O wood · o wood-deep
*/
.cr {
  position: relative;
  width: calc(var(--gw, 16) * var(--px, 6px));
  height: calc(var(--gh, 16) * var(--px, 6px));
  image-rendering: pixelated;
  /* tons derivados da cor base da criatura */
  --lit:   color-mix(in srgb, var(--base) 60%, #ffffff 40%);
  --shade: color-mix(in srgb, var(--base) 74%, #000000 26%);
  --deep:  color-mix(in srgb, var(--base) 44%, #05070a 56%);
  /* fixos (DNA + materiais) */
  --ink: #0b0e07;
  --gold: #e7b24c; --gold-deep: #a9721f;
  --white: #f2efe0; --red: #b83c2c;
  --steel: #b3bcc2; --steel-deep: #59626a;
  --wood: #6a4a2c; --wood-deep: #3d2a18;
  --eye: #fdf3c0; --iris: #1b2730;
  --skin: #d8a878; --skin-deep: #a9764e; /* pele dos heróis/NPCs */
}
/* um pixel da malha */
.cr > i {
  position: absolute;
  width: var(--px, 6px); height: var(--px, 6px);
  left: calc(var(--x) * var(--px, 6px));
  top: calc(var(--y) * var(--px, 6px));
  background: var(--c, var(--base));
}
.p-ink   { --c: var(--ink); }
.p-base  { --c: var(--base); }
.p-lit   { --c: var(--lit); }
.p-shade { --c: var(--shade); }
.p-deep  { --c: var(--deep); }
.p-eye   { --c: var(--eye); }
.p-iris  { --c: var(--iris); }
.p-white { --c: var(--white); }
.p-red   { --c: var(--red); }
.p-gold  { --c: var(--gold); }
.p-goldd { --c: var(--gold-deep); }
.p-steel { --c: var(--steel); }
.p-steeld{ --c: var(--steel-deep); }
.p-wood  { --c: var(--wood); }
.p-woodd { --c: var(--wood-deep); }
.p-skin  { --c: var(--skin); }
.p-skind { --c: var(--skin-deep); }

/* contexto de batalha: substitui o blob .bt-mob. Escala MOB GRANDE (big) no desktop. */
.bt-mob.has-art { width: auto; height: auto; }
.bt-mob.big .cr { transform: scale(1.32); transform-origin: bottom center; }