/* Default fallback values */
[data-ship] {
  --ship-rot: 0deg;
  --ship-tx: 0;
  --ship-ty: 0;
  --ship-scale: 1;
  transform: translate(var(--ship-tx), var(--ship-ty))
             rotate(var(--ship-rot))
             scale(var(--ship-scale));
  transform-origin: center center;
}

/* Per-ship base offsets (static) */
[data-ship-id="CROCODILE"] {
  --ship-tx: 2px;
  --ship-ty: -6px;
  --ship-scale: 1.05;
}
[data-ship-id="VOODOO"] {
  --ship-tx: -4px;
  --ship-ty: 3px;
  --ship-scale: 0.95;
}
/* …repeat for other ships */

/* Rotation “classes” instead of runtime insertRule */
.rot-0   { --ship-rot: 0deg; }
.rot-90  { --ship-rot: 90deg; }
.rot-180 { --ship-rot: 180deg; }
.rot-270 { --ship-rot: 270deg; }

/* Optional validity feedback */
.valid   { filter: none; }
.invalid { filter: grayscale(1) brightness(0.7); }