/* Mancala screen. Game-specific only; everything else comes from styles.css. All classes start with mc-. */
.mc-wrap { margin: 0 0 .5rem; }
.mc-name { margin: .25rem .25rem; font-weight: 700; color: var(--muted); font-size: .95rem; }
.mc-name-top { text-align: left; }
.mc-name-bot { text-align: right; }
.mc-name.mc-on { color: var(--gold); }
.mc-name.mc-on::before { content: '▸ '; }

/* store | six pits | store, the stores spanning both rows */
.mc-board {
  display: grid;
  grid-template-columns: minmax(2.7rem, 1fr) repeat(6, minmax(0, 1.15fr)) minmax(2.7rem, 1fr);
  grid-template-rows: auto auto;
  gap: .35rem .25rem;
  padding: .45rem; border-radius: 22px;
  background: linear-gradient(180deg, #8a5a33, #6d4426);
  border: 3px solid #4a2d17; box-shadow: 0 4px 14px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.mc-store {
  position: relative; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  min-width: 0; border-radius: 999px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .45);
  padding: .5rem .1rem;
}
.mc-left { grid-column: 1; }
.mc-right { grid-column: 8; }
.mc-sname {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .62rem; font-weight: 700; color: var(--cream); opacity: .8; padding: 0 .15rem;
}

.mc-pit {
  position: relative; display: grid; place-items: center; min-width: 0; min-height: 56px; aspect-ratio: 3 / 4; margin: 0; padding: 0;
  border: 2px solid transparent; border-radius: 999px; background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .5); color: #fff; font: inherit;
}
.mc-top { grid-row: 1; }
.mc-bot { grid-row: 2; }
.mc-n { font-weight: 800; font-size: 1.35rem; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.mc-big { font-size: 1.7rem; }

/* your pits you can sow */
button.mc-pit { cursor: pointer; }
.mc-play { border-color: var(--gold); background: rgba(227, 179, 65, .22); }
.mc-play:active { transform: scale(.96); }
.mc-play .mc-n { color: #fff; }

/* the last move: where it started, every pit it dropped a seed in, the last seed, and any capture */
.mc-touched { background: rgba(255, 255, 255, .24); }
.mc-source { border: 2px dashed rgba(255, 255, 255, .6); }
.mc-lastseed { outline: 3px solid var(--cream); outline-offset: 1px; }
.mc-lastseed::after {
  content: ''; position: absolute; top: 4px; right: 4px; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--cream); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.mc-store.mc-lastseed::after { top: .6rem; right: 50%; transform: translateX(50%); }
.mc-cap { background: rgba(192, 38, 45, .5); }
.mc-play.mc-touched { background: rgba(227, 179, 65, .34); }

.mc-info { margin-bottom: .5rem; }
.mc-last { text-align: center; font-weight: 600; margin: .4rem 0; }
.mc-last-cap { color: var(--bad); }
.mc-last-extra { color: var(--good); }
.mc-hint { text-align: center; margin: .25rem 0 .5rem; font-weight: 600; }
.mc-center { text-align: center; }