/* ============================================================
   FILE: tray.css (Drop‑in Replacement)
   PURPOSE: Multi‑row tray with correct domino centering + rotation
   ============================================================ */


/* ============================================================
   1. TRAY LAYOUT — FLEX WRAP
   ============================================================ */

#tray {
  display: flex;
  flex-wrap: wrap;                 /* allows multiple rows */
  gap: var(--cell-gap);
  padding: 8px;
  background: #eee;
  border-top: 2px solid #ccc;
}


/* ============================================================
   2. TRAY SLOT GEOMETRY
   ============================================================ */

.tray-slot {
  width: calc(var(--cell-size) * 2);   /* horizontal domino footprint */
  height: calc(var(--cell-size) * 2);  /* vertical domino footprint */
  position: relative;                  /* containing block for wrapper */
  box-sizing: content-box;
  padding: 0;
  display: block;
  overflow: visible;
  flex: 0 0 auto;

  line-height: 0;
  font-size: 0;
}

.tray-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(0,0,0,0.1);
  border-radius: 4px;
  pointer-events: none;
}


/* ============================================================
   3. DOMINO WRAPPER — CENTERING + ROTATION (ROOT ELEMENT)
   ============================================================ */

.domino-wrapper.in-tray {
  position: absolute;

  /* center the wrapper inside the slot */
  top: 50%;
  left: 50%;

  width: calc(var(--cell-size) * 2);
  height: var(--cell-size);

  overflow: visible;

  /* ⭐ Correct transform order:
       1. translate(-50%, -50%) centers the wrapper
       2. rotate(var(--tray-orientation)) rotates around the center
  */
  transform: translate(-50%, -50%) rotate(var(--tray-orientation, 0deg));
  transform-origin: center center;

  transition: transform var(--transition-fast, var(--_fallback-transition-fast));
}


/* ============================================================
   4. PIP CONTAINER — NO TRANSFORMS ALLOWED
   ============================================================ */

/* The pip container must never rotate in the tray */
.domino.in-tray {
  transform: none !important;
}