/* Othello -- presentation. Green field, black and white discs, and a halo on every
   square you are allowed to play, which is the helper the original had. */

.oth { margin: 12px 0 18px; }

/* ---------------------------------------------------------------- the setup form
   Same two controls the archived form had: each color is either a human or one of
   the computer opponents, so human-v-computer, two humans on one device and two
   computers playing each other all come out of the same box. */
.oth-setup {
  border: 1px solid #9c8fd0;
  background: #f4f2fb;
  padding: 10px 12px;
  font: 11px/1.7 Verdana, Geneva, sans-serif;
  max-width: 460px;
}
.oth-setup-title { font-weight: bold; color: #630096; margin-bottom: 4px; }
.oth-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.oth-row > .oth-who { width: 74px; display: flex; align-items: center; gap: 5px; }
.oth-row label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.oth-setup select { font: 11px Verdana, Geneva, sans-serif; }
.oth-play {
  margin-top: 8px;
  font: bold 12px Verdana, Geneva, sans-serif;
  padding: 5px 16px;
  cursor: pointer;
}
.oth-blurbs {
  font: italic 10px/1.5 Verdana, Geneva, sans-serif;
  color: #555;
  margin-top: 7px;
}
.oth-blurbs div { margin-top: 2px; }

/* a small disc used as a label next to "Black:" / "White:" */
.oth-chip {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid #4a4a55; flex: none;
}
.oth-chip.black { background: #16161c; }
.oth-chip.white { background: #f4f4ef; }

/* ------------------------------------------------------------------- scoreboard */
.oth-game { margin-top: 14px; }
.oth-scores {
  display: flex; align-items: stretch; gap: 8px;
  max-width: 420px; margin-bottom: 8px;
}
.oth-side {
  flex: 1; display: flex; align-items: center; gap: 8px;
  border: 2px solid transparent;
  padding: 5px 8px;
  background: #ece9f6;
  font: 11px Verdana, Geneva, sans-serif;
}
/* whose turn it is, called out rather than left to be inferred */
.oth-side.on { border-color: #630096; background: #fff; }
.oth-side .oth-num { font: bold 17px Verdana, Geneva, sans-serif; margin-left: auto; }
.oth-side .oth-nm { opacity: .75; }

/* ------------------------------------------------------------------- the field */
.oth-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 420px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  padding: 6px;
  background: #14532b;              /* the darker line color showing through the gaps */
  border: 3px solid #0d3a1e;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .3);
}
.oth-cell {
  position: relative;
  border: 0;
  padding: 0;
  background: #1d7a3e;              /* the felt */
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.07), transparent 60%);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  min-width: 0;
}
.oth-cell:not(:disabled) { cursor: pointer; }

.oth-disc {
  width: 78%; height: 78%;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .16s ease;
}
.oth-disc.black, .oth-disc.white { transform: scale(1); }
.oth-disc.black {
  background: radial-gradient(circle at 34% 30%, #4a4a58, #16161c 62%);
  box-shadow: 0 2px 3px rgba(0,0,0,.45);
}
.oth-disc.white {
  background: radial-gradient(circle at 34% 30%, #ffffff, #cfcfc4 68%);
  box-shadow: 0 2px 3px rgba(0,0,0,.35);
}

/* the flip: squeeze edge-on and back, with the new face already painted */
@keyframes oth-flip {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(.06); }
  100% { transform: scaleX(1); }
}
.oth-disc.flip { animation: oth-flip .34s ease; }

/* the halo -- every square the player to move is allowed to take */
@keyframes oth-halo {
  0%, 100% { opacity: .45; transform: scale(.82); }
  50%      { opacity: .95; transform: scale(1); }
}
.oth-cell.hint::after {
  content: "";
  position: absolute;
  width: 62%; height: 62%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(255,255,255,.6), inset 0 0 8px rgba(255,255,255,.35);
  animation: oth-halo 1.25s ease-in-out infinite;
  pointer-events: none;
}
.oth-cell.hint:hover::after { animation: none; opacity: 1; transform: scale(1); }

/* where the last disc went down, so an opponent's move is findable */
.oth-cell.last::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255, 230, 120, .85);
  pointer-events: none;
}

/* ---------------------------------------------------------------- the talking */
.oth-status {
  font: 11px/1.6 Verdana, Geneva, sans-serif;
  margin-top: 9px;
  min-height: 1.7em;
  max-width: 420px;
}
.oth-say {
  font: italic 12px/1.5 Georgia, "Times New Roman", serif;
  color: #333;
  background: #fffbe6;
  border-left: 3px solid #e8c33a;
  padding: 6px 10px;
  margin-top: 6px;
  max-width: 420px;
  min-height: 1.5em;
}
.oth-say:empty { display: none; }
.oth-say b { font-family: Verdana, Geneva, sans-serif; font-size: 10px;
             font-style: normal; color: #630096; }
@keyframes oth-pop { from { transform: translateY(4px); opacity: 0; } }
.oth-say.pop { animation: oth-pop .22s ease; }

.oth-again {
  font: 11px Verdana, Geneva, sans-serif;
  padding: 4px 12px;
  margin-top: 10px;
  cursor: pointer;
}

@media (max-width: 560px) {
  .oth-board { width: 100%; gap: 1px; padding: 4px; }
  .oth-scores { max-width: 100%; }
  .oth-side { font-size: 10px; padding: 4px 6px; }
  .oth-side .oth-num { font-size: 15px; }
}

/* ------------------------------------------------------------------ modern skin */
[data-era="modern"] .oth-setup { background: #16122a; border-color: #4a3f7a; color: #d8d2f0; }
[data-era="modern"] .oth-setup-title { color: #c9a6ff; }
[data-era="modern"] .oth-blurbs { color: #9a90c0; }
[data-era="modern"] .oth-side { background: #1c1830; color: #d8d2f0; }
[data-era="modern"] .oth-side.on { background: #241d3f; border-color: #8b5cf6; }
[data-era="modern"] .oth-say { background: #1f1a33; color: #d8d2f0; border-left-color: #8b5cf6; }
[data-era="modern"] .oth-say b { color: #c9a6ff; }