/* Spritesheet de domino - 28 fichas + dorso
   Sheet: 840x1080px (2x). Celda: 120x216px.
   Se muestra a 60x108px CSS. */

.domino {
  display: inline-block;
  width: 60px;
  height: 108px;
  background-image: url('/dominoes_keys/dominoes.png');
  background-size: 420px 540px;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* Horizontal (ficha acostada) */
.domino--h { transform: rotate(90deg); }

/* Escalado: cambia solo --scale */
.domino {
  --scale: 1;
  width: calc(60px * var(--scale));
  height: calc(108px * var(--scale));
  background-size: calc(420px * var(--scale)) calc(540px * var(--scale));
}

.domino--0-0, .domino--0-0 { background-position: calc(0px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-1, .domino--1-0 { background-position: calc(-60px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-2, .domino--2-0 { background-position: calc(-120px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-3, .domino--3-0 { background-position: calc(-180px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-4, .domino--4-0 { background-position: calc(-240px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-5, .domino--5-0 { background-position: calc(-300px * var(--scale)) calc(0px * var(--scale)); }
.domino--0-6, .domino--6-0 { background-position: calc(-360px * var(--scale)) calc(0px * var(--scale)); }
.domino--1-1, .domino--1-1 { background-position: calc(0px * var(--scale)) calc(-108px * var(--scale)); }
.domino--1-2, .domino--2-1 { background-position: calc(-60px * var(--scale)) calc(-108px * var(--scale)); }
.domino--1-3, .domino--3-1 { background-position: calc(-120px * var(--scale)) calc(-108px * var(--scale)); }
.domino--1-4, .domino--4-1 { background-position: calc(-180px * var(--scale)) calc(-108px * var(--scale)); }
.domino--1-5, .domino--5-1 { background-position: calc(-240px * var(--scale)) calc(-108px * var(--scale)); }
.domino--1-6, .domino--6-1 { background-position: calc(-300px * var(--scale)) calc(-108px * var(--scale)); }
.domino--2-2, .domino--2-2 { background-position: calc(-360px * var(--scale)) calc(-108px * var(--scale)); }
.domino--2-3, .domino--3-2 { background-position: calc(0px * var(--scale)) calc(-216px * var(--scale)); }
.domino--2-4, .domino--4-2 { background-position: calc(-60px * var(--scale)) calc(-216px * var(--scale)); }
.domino--2-5, .domino--5-2 { background-position: calc(-120px * var(--scale)) calc(-216px * var(--scale)); }
.domino--2-6, .domino--6-2 { background-position: calc(-180px * var(--scale)) calc(-216px * var(--scale)); }
.domino--3-3, .domino--3-3 { background-position: calc(-240px * var(--scale)) calc(-216px * var(--scale)); }
.domino--3-4, .domino--4-3 { background-position: calc(-300px * var(--scale)) calc(-216px * var(--scale)); }
.domino--3-5, .domino--5-3 { background-position: calc(-360px * var(--scale)) calc(-216px * var(--scale)); }
.domino--3-6, .domino--6-3 { background-position: calc(0px * var(--scale)) calc(-324px * var(--scale)); }
.domino--4-4, .domino--4-4 { background-position: calc(-60px * var(--scale)) calc(-324px * var(--scale)); }
.domino--4-5, .domino--5-4 { background-position: calc(-120px * var(--scale)) calc(-324px * var(--scale)); }
.domino--4-6, .domino--6-4 { background-position: calc(-180px * var(--scale)) calc(-324px * var(--scale)); }
.domino--5-5, .domino--5-5 { background-position: calc(-240px * var(--scale)) calc(-324px * var(--scale)); }
.domino--5-6, .domino--6-5 { background-position: calc(-300px * var(--scale)) calc(-324px * var(--scale)); }
.domino--6-6, .domino--6-6 { background-position: calc(-360px * var(--scale)) calc(-324px * var(--scale)); }
.domino--back { background-position: calc(0px * var(--scale)) calc(-432px * var(--scale)); }