/* ============================================================
   FILE: board.css
   PURPOSE: Board layout + grid‑truth domino placement.
            Board rendering is orientation‑based, never rotated.
   ============================================================ */


/* ------------------------------------------------------------
   1. ROOT VARIABLES
   ------------------------------------------------------------ */
:root {
  --cell-size: 48px;
  --cell-gap: 4px;

  --domino-thickness: 1px;

  --color-bg: #fafafa;
  --color-grid: #ddd;

  --color-domino-bg: #ffffff;
  --color-domino-border: #aaa;
  --color-pip: #222;

  --transition-fast: 120ms ease-out;

  /* Static nudge:
     (cell-gap/2) + (grid-border/2) - (domino-border/2)
     Defaults → 2px
  */
  --domino-nudge-x: 2px;
  --domino-nudge-y: 2px;

  /* Region color palette (renderer‑assigned) */
  --color-region-0: #e8f0ff;
  --color-region-1: #e8ffe8;
  --color-region-2: #fff4e8;
  --color-region-3: #f5e8ff;
}


/* ------------------------------------------------------------
   2. REGION COLOR INDICES
   ------------------------------------------------------------ */
.board-cell.region-color-0 { background: var(--color-region-0); }
.board-cell.region-color-1 { background: var(--color-region-1); }
.board-cell.region-color-2 { background: var(--color-region-2); }
.board-cell.region-color-3 { background: var(--color-region-3); }


/* ------------------------------------------------------------
   3. BOARD GRID
   ------------------------------------------------------------ */
#board {
  position: relative;

  background:
    repeating-linear-gradient(
      to right,
      var(--color-grid) 0,
      var(--color-grid) 1px,
      transparent 1px,
      transparent calc(var(--cell-size) + var(--cell-gap))
    ),
    repeating-linear-gradient(
      to bottom,
      var(--color-grid) 0,
      var(--color-grid) 1px,
      transparent 1px,
      transparent calc(var(--cell-size) + var(--cell-gap))
    ),
    var(--color-bg);

  border: 2px solid #ccc;
  overflow: visible;
  touch-action: none;

  display: grid;
}


/* ------------------------------------------------------------
   4. BOARD CELLS
   ------------------------------------------------------------ */
.board-cell {
  position: relative;
  box-sizing: border-box;
  background: transparent;
  border: none;
}

.board-cell.blocked {
  background: #444;
  border: 1px solid #444;
  pointer-events: none;
}


/* ------------------------------------------------------------
   5. REGION BADGES / OUTLINES
   ------------------------------------------------------------ */
.badge {
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 12px;
  line-height: 1;
  color: #222;
  background: transparent;
}

.badge-layer {
  position: absolute;
  pointer-events: none;
  z-index: 30;
}

.region-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  border: 2px solid rgba(0,0,0,0.06);
  box-sizing: border-box;
}


/* ------------------------------------------------------------
   6. DOMINO WRAPPER — BOARD ROOT ELEMENT
   ------------------------------------------------------------ */
.domino-wrapper.on-board {
  position: absolute;
  z-index: 100;
  pointer-events: auto;

  transform: translate(var(--domino-nudge-x), var(--domino-nudge-y));
  transform-origin: top left;
}

/* Horizontal domino */
.domino-wrapper.on-board[data-half0-side="left"],
.domino-wrapper.on-board[data-half0-side="right"] {
  width: calc(var(--cell-size) * 2 + var(--cell-gap));
  height: var(--cell-size);
}

/* Vertical domino */
.domino-wrapper.on-board[data-half0-side="top"],
.domino-wrapper.on-board[data-half0-side="bottom"] {
  width: var(--cell-size);
  height: calc(var(--cell-size) * 2 + var(--cell-gap));
}

/* Dragging state */
.domino-wrapper.dragging {
  z-index: 1000;
  pointer-events: none;
}


/* ------------------------------------------------------------
   7. PIP CONTAINER — VISUAL ONLY
   ------------------------------------------------------------ */
.domino.on-board {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none; /* required by two‑element model */
}

.domino.in-tray {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


/* ------------------------------------------------------------
   8. MOBILE SCALING
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  :root { --cell-size: 36px; }

  .domino .pip {
    width: calc(var(--cell-size) * 0.10);
    height: calc(var(--cell-size) * 0.10);
  }
}


/* ------------------------------------------------------------
   9. DEBUG HELPERS
   ------------------------------------------------------------ */
.domino-wrapper.on-board.debug-outline {
  outline: 1px dashed rgba(255,0,0,0.6);
}

.domino-wrapper.debug-outline .domino {
  outline: 1px solid rgba(0,255,0,0.6);
}

.board-cell.debug-outline {
  outline: 1px dotted rgba(0,0,255,0.25);
}