/* The source GLB is baked into two atlases; no WebGL is needed during play. */
.domino-model {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--short);
  height: var(--long);
  transform: translate(-50%, -50%) rotate(-90deg);
  background-size: 700% 800%;
  background-repeat: no-repeat;
  pointer-events: none;
  visibility: hidden;
}

.model-white > .domino-model { background-image: url("assets/dominoes/white.webp?v=1"); }
.model-black > .domino-model { background-image: url("assets/dominoes/black.webp?v=1"); }

.domino.vertical > .domino-model,
.model-swatch > .domino-model {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

.model-swatch { position: relative; overflow: hidden; }
.model-swatch > .domino-model { width: 50%; }

/* :where keeps specificity low so selected/playable highlights still win. */
:where(.model-white-ready) :is(.domino, .swatch-tile).model-tile.model-white,
:where(.model-black-ready) :is(.domino, .swatch-tile).model-tile.model-black {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 4px;
}

:where(.model-white-ready) .model-tile.model-white,
:where(.model-black-ready) .model-tile.model-black { box-shadow: 0 2px 2px #0004, 0 6px 10px #0003; }

:where(.model-white-ready, .model-black-ready) .model-swatch.model-tile { box-shadow: none; }

:where(.model-white-ready) .model-white > .domino-model,
:where(.model-black-ready) .model-black > .domino-model { visibility: visible; }

:where(.model-white-ready) .model-white > :is(.half, .divider),
:where(.model-black-ready) .model-black > :is(.half, .divider) { visibility: hidden; }

:where(.model-white-ready) .model-tile.model-white::before,
:where(.model-white-ready) .model-tile.model-white::after,
:where(.model-black-ready) .model-tile.model-black::before,
:where(.model-black-ready) .model-tile.model-black::after { display: none; }

.home-footer .model-credit { color: inherit; text-underline-offset: 3px; }