/* Neuriosity — Mosaic Builder playfield.
   Shared chrome lives in ../_shared/game-kit.css */

.mb-game .neu-status:empty { display: none; }

.mb-band {
  margin: 0;
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.6);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- the two grids ---------- */

/* The frame is wide and short, so the picture sits beside the board rather
   than above it. The board is the bigger of the two because it is the one
   being read square by square. */
.mb-boards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 3);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.mb-target,
.mb-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--gu) * 0.6);
  margin: 0;
  min-width: 0;
  height: auto;
  flex: 0 1 auto;
}

/* Bound squares by the shared game unit, not the height of a tall app stage. */
.mb-target { width: calc(var(--gu) * 30); }
.mb-board { width: calc(var(--gu) * 38); }

.mb-target figcaption {
  flex: 0 0 auto;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 2.1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mb-grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  grid-template-rows: repeat(var(--n, 4), 1fr);
  gap: calc(var(--gu) * 0.35);
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: calc(var(--gu) * 0.6);
  background: #fff;
  border: calc(var(--gu) * 0.3) solid rgba(46, 74, 28, 0.22);
  border-radius: calc(var(--gu) * 1.2);
}

/* ---------- one square ---------- */

/* Colour plus a mark, so the mosaic still reads if the colours do not. */
.mb-cell {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  background: #d9dee2;
  border-radius: calc(var(--gu) * 0.3);
}

.mb-cell[data-ink="0"] { background: #2e4a1c; }
.mb-cell[data-ink="1"] { background: #d7a32c; }
.mb-cell[data-ink="2"] { background: #2f6f9e; }
.mb-cell[data-ink="3"] { background: #b5472f; }

.mb-cell[data-ink]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

/* 0 plain, 1 dot, 2 bar, 3 ring */
.mb-cell[data-ink="1"]::after {
  width: 34%;
  height: 34%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
}

.mb-cell[data-ink="2"]::after {
  width: 72%;
  height: 20%;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  transform: rotate(-45deg);
}

.mb-cell[data-ink="3"]::after {
  width: 52%;
  height: 52%;
  background: transparent;
  border: calc(var(--gu) * 0.45) solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
}

.mb-cell--empty {
  background: #eef2f5;
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.18) rgba(46, 74, 28, 0.14);
}

/* The one square the next tile has to cover. */
.mb-cell--empty.is-anchor {
  background: rgba(46, 74, 28, 0.12);
  box-shadow: inset 0 0 0 calc(var(--gu) * 0.5) #2e4a1c;
}

.mb-cell--gap { background: transparent; }

/* ---------- the tray ---------- */

.mb-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 1.6);
  flex: 0 0 auto;
  min-height: calc(var(--gu) * 24);
  width: 100%;
}

/* Every tile is drawn at the same square size, whatever its outline, so a
   one-square tile cannot be spotted by being blown up to fill its button. */
.mb-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  padding: calc(var(--gu) * 1.2);
  background: #fff;
  border: calc(var(--gu) * 0.4) solid rgba(46, 74, 28, 0.22);
  border-radius: calc(var(--gu) * 1.6);
  cursor: pointer;
}

.mb-tile__art {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
  gap: calc(var(--gu) * 0.35);
  width: calc(var(--cols, 2) * var(--gu) * 4.4);
  height: calc(var(--rows, 2) * var(--gu) * 4.4);
}

.mb-tile:hover { border-color: #2e4a1c; }
.mb-tile:active { transform: scale(0.97); }
.mb-tile:focus-visible { outline: calc(var(--gu) * 0.5) solid #2e4a1c; outline-offset: calc(var(--gu) * 0.2); }

.mb-tile.is-wrong {
  background: rgba(241, 95, 109, 0.14);
  border-color: var(--coral, #f15f6d);
  opacity: 0.55;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .mb-tile { transition: none; }
  .mb-tile:active { transform: none; }
}