/* The Morabaraba board — /arcade/morabaraba. Loaded after arcade-game.css,
   which carries the rules-page chassis and the wood plank (.ayo-board), the
   score lines (.ayo-bank), the status line and the New game button. This file
   is only what a board of points and lines adds to that. */

.mora { max-width: 540px; }
.mora .ayo-bank .tally { font-size: .8rem; }

/* The playing field is a square. Points sit on it by percentage, so the
   lines (one SVG underneath) and the points can never disagree. */
.mora-field {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.mora-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(234, 212, 145, .5);
  stroke-width: .7;
  stroke-linecap: round;
  pointer-events: none;
}

.mora-pt {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 11%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
/* An empty point is a small hollow burnt into the wood. */
.mora-pt i {
  position: relative;
  display: block;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1B1008, #0D0703 70%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .75),
    0 1px 0 rgba(234, 212, 145, .16);
  transition: width .16s ease, transform .16s ease, box-shadow .16s ease;
}
/* Your cows are bone. Aura's are fired clay with a dark eye, so the two
   herds differ in shape as well as in colour. */
.mora-pt.is-you i,
.mora-pt.is-aura i { width: 84%; }
.mora-pt.is-you i {
  background: radial-gradient(circle at 35% 30%, #F4F1E4, #C9C6B4 60%, #8E8C7C);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .2);
}
.mora-pt.is-aura i {
  background: radial-gradient(circle at 35% 30%, #D0744A, #9A4322 60%, #5E2410);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .3);
}
.mora-pt.is-aura i::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: #2A1006;
}

/* What you may press is ringed in gold; what you may not is simply not
   ringed. Nothing on the board is greyed out. */
.is-live button.mora-pt:not(:disabled) { cursor: pointer; }
.is-live button.mora-pt:not(:disabled) i {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .75),
    0 0 0 1.5px rgba(234, 212, 145, .6);
}
.is-live button.mora-pt.is-you:not(:disabled) i,
.is-live button.mora-pt.is-aura:not(:disabled) i {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 2px rgba(234, 212, 145, .75);
}
.is-live button.mora-pt:not(:disabled):hover i,
.is-live button.mora-pt:not(:disabled):focus-visible i {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2.5px #EAD491, 0 8px 18px rgba(234, 212, 145, .22);
}
button.mora-pt:focus-visible { outline: none; }

/* Where the last thing happened. */
.mora-pt.is-from i { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .75), 0 0 0 1.5px var(--cat-accent); }
.mora-pt.is-last:disabled i { box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 2px var(--cat-accent); }
.mora-pt.is-mill i,
.mora-pt.is-mill:disabled i { box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 2.5px #EAD491, 0 0 16px rgba(234, 212, 145, .35); }
.is-live button.mora-pt.is-picked:not(:disabled) i {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 3px #EAD491, 0 10px 20px rgba(234, 212, 145, .28);
}
/* A cow that was shot leaves a green ring on the point it stood on. */
.mora-pt.is-shot i,
.is-live button.mora-pt.is-shot:not(:disabled) i {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, .75),
    0 0 0 2px var(--cat-good),
    0 0 18px rgba(53, 200, 138, .35);
}

/* ── The worked example: two small boards, nothing to press ───────── */
.fig .mora-field { margin: 0; }
.fig .mora-pt { width: 12%; }
.fig .mora-pt.is-new i { box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 2px #EAD491; }
.fig .mora-pt.is-want i { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .75), 0 0 0 1.5px rgba(234, 212, 145, .6); }

@media (prefers-reduced-motion: reduce) {
  .mora-pt i { transition: none; }
  .is-live button.mora-pt:not(:disabled):hover i,
  .is-live button.mora-pt:not(:disabled):focus-visible i,
  .is-live button.mora-pt.is-picked:not(:disabled) i { transform: none; }
}