.mosaic-shell {
  --game-accent: var(--g-mosaic);
}
.mosaic-shell .shell-stage {
  gap: 14px;
  padding: 0 var(--space-4);
}
.mosaic-shell .shell-board-area {
  width: 100%;
}
/* Boards are taller than wide (12 × 18, 15 × 20): the height budget decides the width. */
.mosaic-shell .mo-board-wrap {
  width: min(520px, calc(100vw - 32px), calc((100dvh - 300px) * var(--ratio)));
  margin: 0 auto;
}
.mosaic-shell .mo-board {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: var(--cols) / var(--rows);
  border-radius: 10px;
  background: var(--line);
}
.mosaic-shell .mo-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--c);
  box-shadow: none;
  cursor: pointer;
  transition:
    background 180ms ease-out,
    filter 180ms ease-out;
}
.mosaic-shell .mo-cell:focus-visible {
  z-index: 2;
  outline: 2px solid var(--text);
}
/* Hint: the other cells step back and one continuous outline traces the region. */
.mosaic-shell .mo-board-wrap {
  position: relative;
}
.mosaic-shell .mo-board.hinting .mo-cell:not(.hint-region) {
  filter: saturate(0.55) brightness(0.72);
}
.mosaic-shell .mo-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.mosaic-shell .mo-outline path {
  fill: none;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.mosaic-shell .mo-outline .halo {
  stroke: rgb(0 0 0 / 0.45);
  stroke-width: 6px;
}
.mosaic-shell .mo-outline .line {
  stroke: #ffffff;
  stroke-width: 3px;
  animation: mo-outline-in 240ms ease-out;
}
@keyframes mo-outline-in {
  from {
    opacity: 0;
  }
}
.mosaic-shell .mo-cell.just-set {
  animation: mo-flip 260ms ease-out;
}
@keyframes mo-flip {
  from {
    filter: brightness(1.45);
  }
}
.mosaic-shell .mo-board.solved .mo-cell {
  animation: mo-solved 600ms ease-out both;
  animation-delay: calc(var(--i) * 18ms);
}
@keyframes mo-solved {
  40% {
    filter: brightness(1.35);
  }
}
.mosaic-shell .shell-input {
  display: grid;
  gap: var(--space-2);
  min-height: 0;
  padding: 0;
}
.mosaic-shell .mo-palette {
  display: grid;
  grid-template-columns: repeat(var(--swatches), 52px);
  gap: 4px;
  justify-content: center;
  padding: 4px;
  border-radius: 14px;
  background: var(--mambo-segment-bg);
}
.mosaic-shell .mo-palette button {
  display: grid;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.mosaic-shell .mo-palette button.selected {
  background: var(--segment-on);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.2),
    inset 0 0 0 2px var(--text);
}
.mosaic-shell .mo-palette button:disabled {
  opacity: 0.4;
  cursor: default;
}
.mosaic-shell .mo-chip {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--c);
}
/* Shape per colour, drawn in translucent white on the swatch. */
.mosaic-shell .mo-glyph {
  display: block;
  width: 12px;
  height: 12px;
  background: rgb(255 255 255 / 0.85);
}
.mosaic-shell .mo-glyph.circle {
  border-radius: 50%;
}
.mosaic-shell .mo-glyph.triangle {
  clip-path: polygon(50% 5%, 95% 92%, 5% 92%);
}
.mosaic-shell .mo-glyph.diamond {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
}
.mosaic-shell .mo-glyph.plus {
  clip-path: polygon(
    35% 0,
    65% 0,
    65% 35%,
    100% 35%,
    100% 65%,
    65% 65%,
    65% 100%,
    35% 100%,
    35% 65%,
    0 65%,
    0 35%,
    35% 35%
  );
}
.mosaic-shell .mo-glyph.star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.mosaic-shell .mo-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.mosaic-shell .mo-status strong {
  color: var(--text);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
/* Pack puzzles: moves against par and the 3★ limit, under the main status line. */
.mosaic-shell .mo-goal {
  margin-top: -2px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-shell .mo-cell,
  .mosaic-shell .mo-cell.just-set,
  .mosaic-shell .mo-board.solved .mo-cell {
    animation: none;
    transition: none;
  }
}