.mambo-shell {
  --game-accent: var(--g-mambo);
  --board-line: var(--mambo-board-line);
  --cell: var(--mambo-cell);
  --given: var(--mambo-given);
  --zero: var(--mambo-zero);
  --one: var(--mambo-one);
  --focus: var(--mambo-focus);
  --rel-bg: var(--mambo-relation-bg);
  --rel-ink: var(--mambo-relation-ink);
  --seg-bg: var(--mambo-segment-bg);
  --seg-on: var(--mambo-segment-on);
}
.mambo-shell .shell-stage {
  gap: 20px;
  padding: 0 var(--space-4);
}
.mambo-shell .shell-board-area {
  width: 100%;
}
.mambo-shell .mambo-board-wrap {
  width: min(560px, calc(100vw - 32px), calc(100dvh - 240px));
  aspect-ratio: 1;
  margin: 0;
}
.mambo-shell .mambo-board {
  --mambo-gap: 3px;
  /* Marks and pieces scale with the cell so an 8×8 phone board keeps a clear gap between them. */
  container-type: size;
  --cell-size: calc((100cqw - var(--mambo-gap) * (var(--mambo-size) + 1)) / var(--mambo-size));
  display: grid;
  grid-template-columns: repeat(var(--mambo-size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--mambo-size), minmax(0, 1fr));
  gap: var(--mambo-gap);
  width: 100%;
  height: 100%;
  padding: var(--mambo-gap);
  border-radius: 10px;
  background: var(--board-line);
}
.mambo-shell .mambo-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cell);
  box-shadow: none;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
}
.mambo-shell .mambo-cell.given {
  background: var(--given);
  cursor: default;
  opacity: 1;
}
.mambo-shell .mambo-cell:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--focus);
}
.mambo-shell .mambo-cell.editable:hover {
  background: color-mix(in srgb, var(--given) 65%, var(--cell));
}
.mambo-shell .mambo-cell.trial-change:not(.given) {
  background: color-mix(in srgb, var(--g-chromedoku) 24%, var(--cell));
}
.mambo-shell .mambo-cell.hint-context {
  outline: 3px solid var(--hint-context);
  outline-offset: -3px;
}
.mambo-shell .mambo-cell.hint-assumption {
  outline: 3px solid var(--hint-assumption);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--hint-assumption) 25%, var(--cell));
}
.mambo-shell .mambo-cell.hint-conflict {
  outline: 3px solid var(--danger);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--danger) 25%, var(--cell));
}
.mambo-shell .mambo-cell.hint-target {
  outline: 3px solid var(--hint-target);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--hint-target) 25%, var(--cell));
}
.mambo-shell .mambo-cell:active:not(:disabled) {
  transform: scale(0.96);
}
.mambo-shell .mambo-symbol,
.mambo-shell .mambo-hint-ghost {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
.mambo-shell .mambo-hint-ghost {
  opacity: 0.5;
}
.mambo-shell .mambo-token {
  display: block;
  width: 44%;
  aspect-ratio: 1;
  border: clamp(3px, calc(var(--cell-size, 44px) * 0.085), 5px) solid var(--zero);
  border-radius: 50%;
  background: transparent;
}
.mambo-shell .mambo-token.one {
  width: 38%;
  border: 0;
  border-radius: 3px;
  background: var(--one);
  transform: rotate(45deg);
}
.mambo-shell .mambo-cell.given .mambo-token.zero {
  border-width: clamp(4px, calc(var(--cell-size, 44px) * 0.105), 6px);
}
/* Relation signs sit on the shared edge and "cut" the grid line with the cell colour, like printed puzzles. */
.mambo-shell .mambo-relation {
  --rel-size: clamp(13px, calc(var(--cell-size) * 0.34), 19px);
  position: absolute;
  z-index: 2;
  display: grid;
  width: var(--rel-size);
  height: var(--rel-size);
  place-items: center;
  border-radius: 50%;
  background: var(--mark-bg);
  box-shadow: 0 0 0 1.5px var(--cell);
  color: var(--mark-ink);
  font: 800 calc(var(--rel-size) * 0.72) / 1 var(--font-app);
  pointer-events: none;
}
.mambo-shell .mambo-relation.right {
  right: calc(var(--rel-size) / -2 - var(--mambo-gap) / 2);
  top: calc(50% - var(--rel-size) / 2);
}
.mambo-shell .mambo-relation.down {
  bottom: calc(var(--rel-size) / -2 - var(--mambo-gap) / 2);
  left: calc(50% - var(--rel-size) / 2);
}
/* The newest symbol pops in; the rest of the board stays still between renders. */
.mambo-shell .mambo-cell.just-set .mambo-token {
  animation: mambo-pop 160ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.mambo-shell .mambo-cell.just-set .mambo-token.one {
  animation-name: mambo-pop-diamond;
}
@keyframes mambo-pop {
  from {
    transform: scale(0.4);
    opacity: 0.4;
  }
}
@keyframes mambo-pop-diamond {
  from {
    transform: rotate(45deg) scale(0.4);
    opacity: 0.4;
  }
}
.mambo-shell .mambo-cell.conflict {
  background: color-mix(in srgb, var(--danger) 22%, var(--cell));
}
.mambo-shell .mambo-board.shake {
  animation: mambo-shake 240ms ease-in-out;
}
@keyframes mambo-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
/* Solved: a diagonal wave tints every cell with the game colour. */
.mambo-shell .mambo-board.solved .mambo-cell {
  animation: mambo-solved 520ms ease-out both;
  animation-delay: calc(var(--i) * 45ms);
}
/* After the wave, later repaints keep the tint without replaying the animation. */
.mambo-shell .mambo-board.solved-static .mambo-cell {
  background: color-mix(in srgb, var(--game-accent) 14%, var(--cell));
}
@keyframes mambo-solved {
  40% {
    background: color-mix(in srgb, var(--game-accent) 45%, var(--cell));
  }
  to {
    background: color-mix(in srgb, var(--game-accent) 14%, var(--cell));
  }
}
.mambo-shell .shell-input {
  flex: none;
  min-height: 0;
  padding: 0;
}
.mambo-shell .mambo-touch-entry {
  display: grid;
  grid-template-columns: repeat(3, 72px);
  gap: 4px;
  width: max-content;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: var(--seg-bg);
}
.mambo-shell .mambo-touch-entry > span {
  display: none;
}
.mambo-shell .mambo-touch-entry button {
  display: grid;
  width: 72px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.mambo-shell .mambo-touch-entry button.selected {
  background: var(--seg-on);
  box-shadow:
    0 1px 3px rgb(0 0 0 / 0.2),
    inset 0 0 0 1.5px var(--game-accent);
}
.mambo-shell .mambo-touch-entry .mambo-token.zero {
  width: 22px;
  border-width: 4px;
}
.mambo-shell .mambo-touch-entry .mambo-token.one {
  width: 18px;
}
.mambo-shell .mambo-touch-entry svg {
  width: 22px;
  height: 22px;
}
.mambo-shell .shell-rules-example {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 32px;
}
.mambo-shell .shell-rules-example .mambo-token.zero {
  width: 22px;
}
.mambo-shell .shell-rules-example .mambo-token.one {
  width: 18px;
}
.mambo-shell .shell-rules-example b {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font: 800 11px/1 var(--font-app);
}
.mambo-shell .mambo-hint-progress {
  display: block;
  margin: 3px 0 10px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.mambo-shell .mambo-hint-stage {
  min-height: 66px;
  line-height: 1.75;
}
.mambo-shell .mambo-hint-navigation {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.mambo-shell .mambo-hint-navigation .button {
  flex: 1;
  min-width: 0;
}
.mambo-shell .mambo-hint-navigation .button:disabled {
  opacity: 0.45;
}
.mambo-shell .mambo-hint-candidates {
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.mambo-shell .mambo-hint-candidates summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}
.mambo-shell .mambo-hint-candidates div {
  display: grid;
  gap: 5px;
  margin-top: var(--space-2);
}
.mambo-shell .mambo-hint-proof {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 11px;
}
.mambo-shell .shell-hint .mambo-hint-navigation {
  margin: var(--space-2) 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .mambo-shell .mambo-cell,
  .mambo-shell .mambo-cell.just-set .mambo-token,
  .mambo-shell .mambo-board.shake {
    animation: none;
  }
  .mambo-shell .mambo-board.solved .mambo-cell {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}
/* Inline shapes inside hint sentences. */
.mambo-shell .mambo-inline {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin: 0 0.1em;
  vertical-align: -0.1em;
}
.mambo-shell .mambo-inline.zero {
  border: 0.18em solid var(--zero);
  border-radius: 50%;
}
.mambo-shell .mambo-inline.one {
  width: 0.72em;
  height: 0.72em;
  margin: 0 0.2em;
  border-radius: 2px;
  background: var(--one);
  transform: rotate(45deg);
}
/* Hint card buttons follow the shell style instead of the legacy page buttons. */
:root .mobile-game-shell .shell-hint .button {
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  color: var(--text);
  font: 600 14px var(--font-app);
}
:root .mobile-game-shell .shell-hint .button.primary {
  background: var(--primary);
  color: var(--on-primary);
}
:root .mobile-game-shell .shell-hint .button:disabled {
  opacity: 0.4;
}

/* Shapes filled by assist mode are lighter than the player's own. */
.mambo-shell .mambo-cell.auto .mambo-token {
  opacity: 0.5;
}

/* Level description under the new-puzzle levels; a fixed height keeps the sheet steady while switching. */
.mambo-shell .mambo-level-note {
  min-height: 2.8em;
  margin-top: var(--space-2);
}