/* Board container */
.board-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  --board-scale: 1;
  --board-margin: 0 auto var(--space-6);
  margin: var(--board-margin);
  transform: scale(var(--board-scale));
  transform-origin: center;
}

.tutorial-board {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: linear-gradient(
    180deg,
    var(--color-wood-surface-1) 0%,
    var(--color-wood-surface-2) 50%,
    var(--color-wood-surface-3) 100%
  );
  border-radius: 16px;
  width: fit-content;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-text-inverse), transparent 90%),
    0 4px 12px color-mix(in srgb, var(--color-surface-dark), transparent 60%);
  position: relative;
}

/* Hide player UI during opponent animation */
.board-wrapper.opponent-moving .player-row .pit.highlighted {
  box-shadow: none;
  animation: none;
  border-color: transparent;
}

.board-wrapper.opponent-moving .player-row .pit.highlighted::before {
  display: none;
}

.board-wrapper.opponent-moving .pit-tooltip {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

/* Show tooltip smoothly after opponent animation */
.board-wrapper .pit-tooltip {
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

/* Board layout */
.board-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.board-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Store (mancala) */
.store {
  width: var(--size-board-pit);
  height: var(--size-board-store-height);
  background: radial-gradient(
    ellipse at 50% 30%,
    var(--color-wood-base) 0%,
    var(--color-wood-mid) 40%,
    var(--color-wood-dark) 100%
  );
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 12px 24px
    color-mix(in srgb, var(--color-surface-dark), transparent 55%),
    inset 0 -3px 6px
    color-mix(in srgb, var(--color-text-inverse), transparent 90%),
    0 3px 6px color-mix(in srgb, var(--color-surface-dark), transparent 70%);
  border-top: 2px solid var(--color-wood-highlight);
  border-bottom: 2px solid var(--color-wood-shadow);
}

.opponent-store {
  opacity: 0.7;
}

.store-stones {
  position: absolute;
  inset: 0;
  --jitter-x: 0px;
  --jitter-y: 0px;
  --jitter-rotate: 0deg;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 1px;
  padding: var(--space-06) var(--space-2) var(--space-6);
  box-sizing: border-box;
}

.store-count {
  color: var(--color-text-inverse);
  font-size: var(--text-11);
  font-weight: bold;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  background: var(--color-surface-deep);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px
    color-mix(in srgb, var(--color-surface-dark), transparent 60%);
}

/* Pit */
.pit {
  width: var(--size-board-pit);
  height: var(--size-board-pit);
  background: radial-gradient(
    ellipse at 50% 35%,
    var(--color-wood-base) 0%,
    var(--color-wood-mid) 50%,
    var(--color-wood-dark) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
  border: 3px solid transparent;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  box-shadow:
    inset 0 var(--space-2) var(--space-4)
    color-mix(in srgb, var(--color-surface-dark), transparent 55%),
    inset 0 -2px 4px
    color-mix(in srgb, var(--color-text-inverse), transparent 90%),
    0 2px 4px color-mix(in srgb, var(--color-surface-dark), transparent 70%);
  border-top: 2px solid var(--color-wood-highlight);
  border-bottom: 2px solid var(--color-wood-shadow);
}

.pit-label-row {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.pit-label {
  width: var(--size-board-pit);
  text-align: center;
  font-size: var(--text-11);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}

button.pit {
  font: inherit;
  appearance: none;
}

.pit:hover {
  transform: scale(1.05);
}

.opponent-row .pit {
  cursor: default;
  opacity: 0.7;
}

.opponent-row .pit:hover {
  transform: none;
}

.pit-stones {
  position: relative;
  width: 60px;
  height: 60px;
}

/* Shared stone styles */
.stone {
  position: relative;
  width: 15px;
  height: 17px;
  background: radial-gradient(
    ellipse at 45% 35%,
    var(--color-stone-1-light),
    var(--color-stone-1-dark)
  );
  border-radius: 50%;
  box-shadow: 2px 3px 4px
    color-mix(in srgb, var(--color-surface-dark), transparent 60%);
}

.store-stones .stone {
  transform: translate(var(--jitter-x), var(--jitter-y))
    rotate(var(--jitter-rotate));
}

.pit-stones .stone {
  position: absolute;
}

.stone::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 45%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  background: radial-gradient(
    circle,
    var(--color-stone-highlight),
    var(--color-stone-highlight-fade) 70%
  );
  border-radius: 50%;
}

.stone:nth-child(3n + 1) {
  width: 14px;
  height: 16px;
  background: radial-gradient(
    ellipse at 40% 30%,
    var(--color-stone-2-light),
    var(--color-stone-2-dark)
  );
}

.stone:nth-child(3n + 2) {
  width: 16px;
  height: 18px;
  background: radial-gradient(
    ellipse at 50% 35%,
    var(--color-stone-3-light),
    var(--color-stone-3-dark)
  );
}

.stone:nth-child(5n) {
  width: 15px;
  height: 16px;
  background: radial-gradient(
    ellipse at 45% 40%,
    var(--color-stone-4-light),
    var(--color-stone-4-dark)
  );
}

.stone:nth-child(7n) {
  width: 14px;
  height: 17px;
  background: radial-gradient(
    ellipse at 50% 30%,
    var(--color-stone-5-light),
    var(--color-stone-5-dark)
  );
}

.board-seed-travel {
  --seed-travel-duration: 240ms;
  position: absolute;
  z-index: 6;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
}

.board-seed-travel.is-live {
  opacity: 1;
  transition:
    transform var(--seed-travel-duration) ease-in-out,
    opacity 120ms ease-in;
}

@keyframes board-pickup-pulse {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.pit.board-slot-pickup-pulse {
  --pickup-pulse-duration: 110ms;
  animation: board-pickup-pulse var(--pickup-pulse-duration) ease-out;
}

@keyframes board-start-highlight {
  0% {
    outline: 0 solid
      color-mix(in srgb, var(--color-glow-warning), transparent 100%);
    outline-offset: 0;
    filter: brightness(1);
  }

  45% {
    outline: 3px solid
      color-mix(in srgb, var(--color-glow-warning), transparent 35%);
    outline-offset: -2px;
    filter: brightness(1.12);
  }

  100% {
    outline: 0 solid
      color-mix(in srgb, var(--color-glow-warning), transparent 100%);
    outline-offset: 0;
    filter: brightness(1);
  }
}

.pit.board-slot-start-highlight {
  animation: board-start-highlight 420ms ease-out;
}

@keyframes board-start-dip {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(2px) scale(0.985);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.pit.board-slot-start-dip .pit-stones {
  animation: board-start-dip 120ms ease-out;
}

@keyframes board-capture-dip {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translateY(3px) scale(0.92);
    opacity: 0.6;
  }
  100% {
    transform: translateY(4px) scale(0.85);
    opacity: 0;
  }
}

.pit.capture-dip .pit-stones {
  animation: board-capture-dip 200ms ease-out forwards;
}

@keyframes board-pit-pickup-dim {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0.78;
  }
  100% {
    opacity: 1;
  }
}

@keyframes board-pickup-puff {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  20% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(0.82);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.pit.board-pit-pickup-dim {
  animation: board-pit-pickup-dim 180ms ease-out;
}

.board-pickup-puff {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-neutral-300), transparent 28%);
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--color-neutral-300), transparent 48%);
  animation: board-pickup-puff 220ms ease-out;
}

@keyframes board-count-pop {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}

.board-count-pop {
  animation: board-count-pop 120ms ease-out;
}

/* Stone count badges */
.stone-overflow {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: bold;
  color: var(--color-text-inverse);
  background: var(--color-surface-deep);
  border-radius: 50%;
  box-shadow: 0 1px 3px
    color-mix(in srgb, var(--color-surface-dark), transparent 60%);
}

.stone-count {
  color: var(--color-text-inverse);
  font-size: var(--text-lg);
  font-weight: bold;
}

/* Highlight animations */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px var(--glow-color);
  }
  50% {
    box-shadow: 0 0 30px var(--glow-color-bright);
  }
}

.pit.highlighted {
  --glow-color: var(--color-glow-warning);
  --glow-color-bright: var(--color-glow-warning-strong);
  border-color: var(--color-glow-warning-border);
  box-shadow: 0 0 20px var(--glow-color);
  animation: glow-pulse 1.5s infinite;
}

.pit.hint-highlight {
  --glow-color: var(--color-glow-warning);
  --glow-color-bright: var(--color-glow-warning-strong);
  border-color: var(--color-glow-warning-border);
  box-shadow: 0 0 20px var(--glow-color);
  animation: glow-pulse 1.5s infinite;
}

.pit.error-highlight {
  --glow-color: color-mix(in srgb, var(--color-danger), transparent 35%);
  --glow-color-bright: color-mix(in srgb, var(--color-danger), transparent 15%);
  border-color: color-mix(
    in srgb,
    var(--color-danger),
    var(--color-text-inverse) 20%
  );
  box-shadow: 0 0 18px var(--glow-color);
  animation: glow-pulse 0.9s ease-out 1;
}

.pit-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 16px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-01);
  pointer-events: none;
  z-index: 5;
}

.player-row .pit[data-pit="5"] .pit-tooltip {
  left: auto;
  right: 10px;
  transform: none;
  align-items: flex-end;
}

.pit-tooltip-oval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft);
  background: var(--color-surface-panel);
  box-shadow: 0 10px 20px
    color-mix(in srgb, var(--color-surface-dark), transparent 85%);
}

.pit-tooltip-oval-sm {
  width: 14px;
  height: 8px;
  opacity: 0.45;
}

.pit-tooltip-oval-md {
  width: 18px;
  height: 12px;
  opacity: 0.6;
}

.pit-tooltip-oval-lg {
  width: 180px;
  min-height: 30px;
  max-width: 220px;
  padding: var(--space-028) var(--space-085);
}

.pit-tooltip-text {
  white-space: normal;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-strong);
  line-height: 1.25;
  text-align: center;
}

@media (max-width: 640px) and (orientation: portrait) {
  .pit-tooltip-oval-lg {
    width: 220px;
    max-width: 280px;
    padding: var(--space-1) var(--space-1);
  }

  .pit-tooltip-text {
    font-size: var(--text-xl);
    font-weight: 700;
  }
}

/* Extra Turn Animation Styles */
@keyframes extra-turn-glow {
  0% {
    box-shadow:
      inset 0 12px 24px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -3px 6px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 0 0
      color-mix(in srgb, var(--color-highlight-border), transparent 100%);
  }

  25% {
    box-shadow:
      inset 0 12px 24px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -3px 6px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 40px 15px
      color-mix(in srgb, var(--color-highlight-border), transparent 50%);
  }

  50% {
    box-shadow:
      inset 0 12px 24px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -3px 6px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 60px 20px
      color-mix(in srgb, var(--color-highlight-border), transparent 35%);
  }

  75% {
    box-shadow:
      inset 0 12px 24px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -3px 6px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 40px 15px
      color-mix(in srgb, var(--color-highlight-border), transparent 50%);
  }

  100% {
    box-shadow:
      inset 0 12px 24px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -3px 6px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 0 0
      color-mix(in srgb, var(--color-highlight-border), transparent 100%);
  }
}

@keyframes board-badge-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.store.board-extra-turn-glow {
  animation: extra-turn-glow 900ms ease-out;
}

.board-floating-badge,
.board-extra-turn-badge,
.board-error-badge,
.board-capture-badge {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background-size: 200% 100%;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: var(--text-lg);
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  opacity: 0;
  animation:
    capture-float 2s forwards ease-out,
    board-badge-shimmer 2s linear;
}

.board-extra-turn-badge {
  background: linear-gradient(
    110deg,
    var(--color-warning) 20%,
    color-mix(in srgb, var(--color-text-inverse), var(--color-warning) 80%) 50%,
    var(--color-warning) 80%
  );
  color: var(--color-wood-shadow);
  box-shadow:
    0 0 35px color-mix(in srgb, var(--color-highlight-border), transparent 40%),
    0 4px 16px color-mix(in srgb, var(--color-surface-dark), transparent 40%);
  white-space: nowrap;
  border: 3px solid
    color-mix(in srgb, var(--color-text-inverse), transparent 70%);
}

.board-error-badge {
  background: linear-gradient(
    110deg,
    var(--color-danger) 20%,
    color-mix(in srgb, var(--color-danger), var(--color-text-inverse) 16%) 50%,
    var(--color-danger) 80%
  );
  color: var(--color-text-inverse);
  box-shadow:
    0 0 35px color-mix(in srgb, var(--color-danger), transparent 48%),
    0 4px 16px color-mix(in srgb, var(--color-surface-dark), transparent 40%);
  white-space: nowrap;
  border: 3px solid
    color-mix(in srgb, var(--color-text-inverse), transparent 72%);
}

/* Capture Animation Styles */
@keyframes capture-glow {
  0% {
    box-shadow:
      inset 0 8px 16px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -2px 4px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 0 0
      color-mix(in srgb, var(--color-highlight-border), transparent 100%);
  }

  25% {
    box-shadow:
      inset 0 8px 16px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -2px 4px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 30px 10px
      color-mix(in srgb, var(--color-highlight-border), transparent 50%);
  }

  50% {
    box-shadow:
      inset 0 8px 16px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -2px 4px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 45px 15px
      color-mix(in srgb, var(--color-highlight-border), transparent 35%);
  }

  75% {
    box-shadow:
      inset 0 8px 16px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -2px 4px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 30px 10px
      color-mix(in srgb, var(--color-highlight-border), transparent 50%);
  }

  100% {
    box-shadow:
      inset 0 8px 16px
      color-mix(in srgb, var(--color-surface-dark), transparent 55%),
      inset 0 -2px 4px
      color-mix(in srgb, var(--color-text-inverse), transparent 90%),
      0 0 0 0
      color-mix(in srgb, var(--color-highlight-border), transparent 100%);
  }
}

@keyframes capture-float {
  0% {
    transform: translateX(-50%) translateY(0) scale(0.2);
    opacity: 0;
  }

  12% {
    transform: translateX(-50%) translateY(-10px) scale(2);
    opacity: 1;
  }

  22% {
    transform: translateX(-50%) translateY(-15px) scale(1.1);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateY(-120px) scale(0.9);
    opacity: 0;
  }
}

.pit.capture-glow {
  animation: capture-glow 900ms ease-out;
}

.board-capture-badge {
  background: linear-gradient(
    110deg,
    var(--color-warning) 20%,
    color-mix(in srgb, var(--color-text-inverse), var(--color-warning) 80%) 50%,
    var(--color-warning) 80%
  );
  color: var(--color-wood-shadow);
  box-shadow:
    0 0 35px color-mix(in srgb, var(--color-highlight-border), transparent 40%),
    0 4px 16px color-mix(in srgb, var(--color-surface-dark), transparent 40%);
  white-space: nowrap;
  border: 3px solid
    color-mix(in srgb, var(--color-text-inverse), transparent 70%);
}

.board-store-badge {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  color: var(--color-text-inverse);
  padding: var(--space-1);
  font-weight: 900;
  font-size: var(--text-20);
  -webkit-text-stroke: 2px var(--color-surface-deep);
  paint-order: stroke fill;
  pointer-events: none;
  z-index: 1000;
  text-shadow: 0 4px 8px
    color-mix(in srgb, var(--color-surface-dark), transparent 60%);
  white-space: nowrap;
  opacity: 0;
  animation: capture-float 2s forwards ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .pit.highlighted,
  .pit.hint-highlight,
  .pit.error-highlight {
    animation: none;
  }

  .board-error-badge {
    animation: none;
    opacity: 1;
  }

  .board-seed-travel,
  .board-seed-travel.is-live {
    transition: none;
  }

  .pit.board-slot-pickup-pulse {
    animation: none;
  }

  .pit.board-slot-start-highlight {
    animation: none;
    outline: none;
  }

  .pit.board-slot-start-dip .pit-stones {
    animation: none;
  }

  .pit.board-pit-pickup-dim {
    animation: none;
  }

  .board-pickup-puff {
    animation: none;
    opacity: 0;
  }

  .board-count-pop {
    animation: none;
  }

  .store.board-extra-turn-glow {
    animation: none;
  }

  .board-extra-turn-badge {
    animation: none;
    opacity: 1;
  }
}

/* Store stone layout jitter */
.store-stones .stone:nth-child(2n) {
  --jitter-x: 2px;
  --jitter-y: -1px;
  --jitter-rotate: -4deg;
}

.store-stones .stone:nth-child(3n) {
  --jitter-x: -2px;
  --jitter-y: 1px;
  --jitter-rotate: 3deg;
}

.store-stones .stone:nth-child(5n) {
  --jitter-x: 1px;
  --jitter-y: 2px;
  --jitter-rotate: 5deg;
}

/* Pit stone positions (1-12) */
.pit-stones.stones-1 .stone:nth-child(1) {
  top: 23px;
  left: 24px;
}

.pit-stones.stones-2 .stone:nth-child(1) {
  top: 18px;
  left: 16px;
}
.pit-stones.stones-2 .stone:nth-child(2) {
  top: 28px;
  left: 32px;
}

.pit-stones.stones-3 .stone:nth-child(1) {
  top: 14px;
  left: 24px;
}
.pit-stones.stones-3 .stone:nth-child(2) {
  top: 28px;
  left: 14px;
}
.pit-stones.stones-3 .stone:nth-child(3) {
  top: 30px;
  left: 34px;
}

.pit-stones.stones-4 .stone:nth-child(1) {
  top: 12px;
  left: 18px;
}
.pit-stones.stones-4 .stone:nth-child(2) {
  top: 16px;
  left: 34px;
}
.pit-stones.stones-4 .stone:nth-child(3) {
  top: 32px;
  left: 12px;
}
.pit-stones.stones-4 .stone:nth-child(4) {
  top: 34px;
  left: 30px;
}

.pit-stones.stones-5 .stone:nth-child(1) {
  top: 10px;
  left: 14px;
}
.pit-stones.stones-5 .stone:nth-child(2) {
  top: 12px;
  left: 34px;
}
.pit-stones.stones-5 .stone:nth-child(3) {
  top: 24px;
  left: 24px;
}
.pit-stones.stones-5 .stone:nth-child(4) {
  top: 36px;
  left: 12px;
}
.pit-stones.stones-5 .stone:nth-child(5) {
  top: 34px;
  left: 32px;
}

.pit-stones.stones-6 .stone:nth-child(1) {
  top: 8px;
  left: 16px;
}
.pit-stones.stones-6 .stone:nth-child(2) {
  top: 10px;
  left: 36px;
}
.pit-stones.stones-6 .stone:nth-child(3) {
  top: 24px;
  left: 10px;
}
.pit-stones.stones-6 .stone:nth-child(4) {
  top: 26px;
  left: 30px;
}
.pit-stones.stones-6 .stone:nth-child(5) {
  top: 40px;
  left: 18px;
}
.pit-stones.stones-6 .stone:nth-child(6) {
  top: 38px;
  left: 38px;
}

.pit-stones.stones-7 .stone:nth-child(1) {
  top: 6px;
  left: 12px;
}
.pit-stones.stones-7 .stone:nth-child(2) {
  top: 4px;
  left: 30px;
}
.pit-stones.stones-7 .stone:nth-child(3) {
  top: 18px;
  left: 22px;
}
.pit-stones.stones-7 .stone:nth-child(4) {
  top: 20px;
  left: 40px;
}
.pit-stones.stones-7 .stone:nth-child(5) {
  top: 34px;
  left: 8px;
}
.pit-stones.stones-7 .stone:nth-child(6) {
  top: 36px;
  left: 28px;
}
.pit-stones.stones-7 .stone:nth-child(7) {
  top: 44px;
  left: 44px;
}

.pit-stones.stones-8 .stone:nth-child(1) {
  top: 4px;
  left: 10px;
}
.pit-stones.stones-8 .stone:nth-child(2) {
  top: 6px;
  left: 28px;
}
.pit-stones.stones-8 .stone:nth-child(3) {
  top: 8px;
  left: 44px;
}
.pit-stones.stones-8 .stone:nth-child(4) {
  top: 22px;
  left: 18px;
}
.pit-stones.stones-8 .stone:nth-child(5) {
  top: 24px;
  left: 36px;
}
.pit-stones.stones-8 .stone:nth-child(6) {
  top: 38px;
  left: 6px;
}
.pit-stones.stones-8 .stone:nth-child(7) {
  top: 40px;
  left: 26px;
}
.pit-stones.stones-8 .stone:nth-child(8) {
  top: 42px;
  left: 44px;
}

.pit-stones.stones-9 .stone:nth-child(1) {
  top: 4px;
  left: 8px;
}
.pit-stones.stones-9 .stone:nth-child(2) {
  top: 6px;
  left: 26px;
}
.pit-stones.stones-9 .stone:nth-child(3) {
  top: 4px;
  left: 42px;
}
.pit-stones.stones-9 .stone:nth-child(4) {
  top: 20px;
  left: 16px;
}
.pit-stones.stones-9 .stone:nth-child(5) {
  top: 22px;
  left: 34px;
}
.pit-stones.stones-9 .stone:nth-child(6) {
  top: 36px;
  left: 6px;
}
.pit-stones.stones-9 .stone:nth-child(7) {
  top: 38px;
  left: 24px;
}
.pit-stones.stones-9 .stone:nth-child(8) {
  top: 40px;
  left: 42px;
}
.pit-stones.stones-9 .stone:nth-child(9) {
  top: 22px;
  left: 4px;
}

.pit-stones.stones-10 .stone:nth-child(1) {
  top: 2px;
  left: 8px;
}
.pit-stones.stones-10 .stone:nth-child(2) {
  top: 4px;
  left: 24px;
}
.pit-stones.stones-10 .stone:nth-child(3) {
  top: 2px;
  left: 40px;
}
.pit-stones.stones-10 .stone:nth-child(4) {
  top: 18px;
  left: 14px;
}
.pit-stones.stones-10 .stone:nth-child(5) {
  top: 16px;
  left: 32px;
}
.pit-stones.stones-10 .stone:nth-child(6) {
  top: 20px;
  left: 46px;
}
.pit-stones.stones-10 .stone:nth-child(7) {
  top: 34px;
  left: 4px;
}
.pit-stones.stones-10 .stone:nth-child(8) {
  top: 36px;
  left: 22px;
}
.pit-stones.stones-10 .stone:nth-child(9) {
  top: 34px;
  left: 38px;
}
.pit-stones.stones-10 .stone:nth-child(10) {
  top: 46px;
  left: 28px;
}

.pit-stones.stones-11 .stone:nth-child(1) {
  top: 2px;
  left: 6px;
}
.pit-stones.stones-11 .stone:nth-child(2) {
  top: 4px;
  left: 22px;
}
.pit-stones.stones-11 .stone:nth-child(3) {
  top: 2px;
  left: 38px;
}
.pit-stones.stones-11 .stone:nth-child(4) {
  top: 16px;
  left: 12px;
}
.pit-stones.stones-11 .stone:nth-child(5) {
  top: 18px;
  left: 30px;
}
.pit-stones.stones-11 .stone:nth-child(6) {
  top: 16px;
  left: 46px;
}
.pit-stones.stones-11 .stone:nth-child(7) {
  top: 32px;
  left: 4px;
}
.pit-stones.stones-11 .stone:nth-child(8) {
  top: 34px;
  left: 20px;
}
.pit-stones.stones-11 .stone:nth-child(9) {
  top: 32px;
  left: 38px;
}
.pit-stones.stones-11 .stone:nth-child(10) {
  top: 46px;
  left: 14px;
}
.pit-stones.stones-11 .stone:nth-child(11) {
  top: 44px;
  left: 32px;
}

.pit-stones.stones-12 .stone:nth-child(1) {
  top: 2px;
  left: 4px;
}
.pit-stones.stones-12 .stone:nth-child(2) {
  top: 4px;
  left: 20px;
}
.pit-stones.stones-12 .stone:nth-child(3) {
  top: 2px;
  left: 36px;
}
.pit-stones.stones-12 .stone:nth-child(4) {
  top: 16px;
  left: 10px;
}
.pit-stones.stones-12 .stone:nth-child(5) {
  top: 18px;
  left: 28px;
}
.pit-stones.stones-12 .stone:nth-child(6) {
  top: 16px;
  left: 44px;
}
.pit-stones.stones-12 .stone:nth-child(7) {
  top: 32px;
  left: 2px;
}
.pit-stones.stones-12 .stone:nth-child(8) {
  top: 34px;
  left: 18px;
}
.pit-stones.stones-12 .stone:nth-child(9) {
  top: 32px;
  left: 36px;
}
.pit-stones.stones-12 .stone:nth-child(10) {
  top: 44px;
  left: 8px;
}
.pit-stones.stones-12 .stone:nth-child(11) {
  top: 46px;
  left: 26px;
}
.pit-stones.stones-12 .stone:nth-child(12) {
  top: 44px;
  left: 44px;
}

@media (max-width: 720px) and (orientation: portrait) {
  #board,
  #board-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: clip;
  }

  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.8;
    --board-margin: calc(var(--space-1) * -1) auto var(--space-5);
  }
}

@media (max-width: 640px) and (orientation: portrait) {
  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.7;
    --board-margin: calc(var(--space-2) * -1) auto var(--space-125);
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.52;
    --board-margin: calc(var(--space-4) * -1) auto var(--space-4);
  }
}

@media (max-width: 400px) and (orientation: portrait) {
  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.48;
    --board-margin: calc(var(--space-125) * -1) auto var(--space-3);
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.42;
    --board-margin: calc(var(--space-16) * -1) auto var(--space-2);
  }
}

@media (max-width: 720px) and (orientation: landscape) {
  #board,
  #board-container {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: clip;
  }

  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.75;
    --board-margin: calc(var(--space-2) * -1) auto var(--space-4);
  }
}

@media (max-width: 568px) and (orientation: landscape) {
  #board .board-wrapper,
  #board-container .board-wrapper {
    --board-scale: 0.6;
    --board-margin: calc(var(--space-4) * -1) auto var(--space-3);
  }
}