/*
 * Board rendering. Sizes derive from two variables so everything scales together:
 *   --cell : width/height of one space
 *   --slot : thickness of a wall slot (the gap between spaces)
 * --boards (1 or 2) is set by JS so two boards fit side by side without horizontal scrolling.
 */
.board-canvas {
  --boards: 1;
  /* width of one board ~= 6.9 cells + ~40px of labels/border; 400px = sidebar + page padding */
  --cell: clamp(30px, calc((100vw - 400px - 50px * var(--boards)) / (6.9 * var(--boards))), 84px);
  --slot: max(8px, calc(var(--cell) * .17));
  --label: 1.6rem;
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: flex-start;
  width: max-content;
  max-width: 100%;
}
.board-canvas[data-mode="dual"] { padding-right: .25rem; }

@media (max-width: 860px) {
  .board-canvas { --cell: clamp(24px, calc((100vw - 40px - 50px * var(--boards)) / (6.9 * var(--boards))), 70px); }
}

.board-wrap { flex: 0 0 auto; }
.board-title {
  margin: 0 0 .4rem var(--label);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

.board-body {
  display: grid;
  grid-template-columns: var(--label) auto;
  grid-template-rows: auto var(--label);
}

.row-labels, .col-labels { display: grid; }
/* offset by the field's border so labels centre on the spaces */
.row-labels { padding: calc(var(--slot) * .8) 0; }
.col-labels { padding: 0 calc(var(--slot) * .8); }
.axis-label {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--text);
  font-size: calc(var(--cell) * .3);
}

/* The field's border is the (implicit) outer wall */
.field {
  display: grid;
  border: calc(var(--slot) * .8) solid var(--wall-edge);
  border-radius: 4px;
  background: #2b262e;
  box-shadow: 0 0 0 2px #14101a;
}

.cell {
  position: relative;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .12)),
    var(--stone);
  border-radius: 2px;
  user-select: none;
}
.cell:hover { filter: brightness(1.15); }
.cell.drop-ok { outline: 2px solid #6fd16f; outline-offset: -2px; }
.cell.drop-bad { outline: 2px solid #e5484d; outline-offset: -2px; }

/* Space name (A1, B3 ...) centred in the space. A placed tile sits on top of it and the label is hidden,
   so the name only shows again when the tile is removed. */
.coord {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--cell) * .3);
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .3);
  pointer-events: none;
}
.cell.has-tile .coord { visibility: hidden; }

/* Placed tile (placeholder look until real artwork is configured) */
.tile {
  width: 78%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20%;
  background: var(--tile-color, #888);
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--cell) * .3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  cursor: grab;
}

/* Wall slots: faint when empty (so they can be targeted), solid when a wall is present */
.slot { position: relative; background: transparent; }
.slot::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: rgba(255, 255, 255, .05);
  transition: background .1s;
}
.slot.v::after { top: 0; bottom: 0; left: 30%; width: 40%; }
.slot.h::after { left: 0; right: 0; top: 30%; height: 40%; }
.slot:hover::after, .slot.snap::after { background: rgba(240, 180, 41, .55); }

.slot.has-wall::after {
  inset: 0;
  width: auto;
  height: auto;
  background: var(--wall-color, var(--wall));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
}
.slot.has-wall.special::after {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 3px, transparent 3px 6px);
  background-color: var(--wall-color, #c9a24a);
}

.post {
  background: var(--wall-edge);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}

@media print {
  .board-canvas { --cell: 22mm; }
}

/* ---------- drag & drop ---------- */
.tool-item, .tile, .slot.has-wall { touch-action: none; }
.tile.drag-source, .slot.drag-source { opacity: .3; }
.slot.snap::after { background: #6fd16f; }
.slot.snap-bad::after { background: #e5484d; }
.slot.has-wall.snap::after, .slot.has-wall.snap-bad::after { box-shadow: 0 0 0 2px #fff; }

body.is-dragging { cursor: grabbing; user-select: none; }
body.is-dragging * { cursor: grabbing !important; }

.drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: .9;
  will-change: transform;
}
.ghost-tile {
  display: grid;
  place-items: center;
  border-radius: 20%;
  background: var(--tile-color, #888);
  border: 2px solid #fff;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .55);
}
.ghost-wall {
  height: 10px;
  border-radius: 2px;
  background: var(--tile-color, var(--wall));
  box-shadow: 0 0 0 2px #fff, 0 6px 16px rgba(0, 0, 0, .55);
}

/* Read-only viewer: no sidebar, so boards may be larger */
.viewer-page .board-canvas { --cell: clamp(30px, calc((100vw - 120px - 50px * var(--boards)) / (6.9 * var(--boards))), 84px); }
.viewer-page .tile { cursor: default; }
.viewer-page .slot::after, .viewer-page .cell:hover { transition: none; }
.viewer-page .slot:not(.has-wall)::after { background: transparent; }
.viewer-page .slot:hover::after { background: transparent; }
.viewer-page .slot.has-wall:hover::after { background: var(--wall-color, var(--wall)); }
.viewer-page .cell:hover { filter: none; }