/* Reversi — Manu Arcade No. XVIII
   Game-specific styling only. The shell (masthead, hud, seal, toggles,
   board-frame, overlay, colophon) comes from ../_shared/palette.css.
   No em dashes in any on-screen copy by house style. */

/* The two disc tallies take warm/cool accents to match the sun and moon. */
.gauge.sun .gauge-glyph { color: var(--amber); }
.gauge.moon .gauge-glyph { color: #6f7596; }
.gauge.moon { color: var(--ink-soft); }

/* Difficulty pills, mirroring the toggle treatment from the shared shell. */
.difficulties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.diff {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--ink-light);
  background: transparent;
  border: 1px solid rgba(122, 104, 80, .35);
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.diff:hover { color: var(--oxblood); border-color: rgba(90, 26, 31, .4); }
.diff[aria-pressed="true"] {
  color: var(--parchment);
  background: var(--oxblood);
  border-color: var(--oxblood);
}

/* The board is a square pane. Give the frame an explicit width so it does not
   collapse around the canvas (the renderer sizes the canvas from this width).
   Reserve room below for the floating turn note so it never clips the hint. */
.board-frame {
  width: min(520px, 92vw);
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}
#board {
  display: block;
  touch-action: none;        /* we handle taps ourselves; stop the page scrolling */
  cursor: pointer;
  border-radius: 6px;
  max-width: 100%;
}

/* Turn note floats just below the board: whose move, passes, ponder state. */
.turn-note {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: 96vw;
  white-space: nowrap;
  text-align: center;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--ink-light);
  pointer-events: none;
  min-height: 1.2em;
}

/* Instruction line under the board, fades after the first move. */
.hint-line {
  margin: 6px 0 0;
  text-align: center;
  max-width: 32rem;
  font-family: var(--hand);
  font-style: italic;
  font-size: clamp(13px, 3.4vw, 16px);
  color: var(--ink-light);
  line-height: 1.5;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hint-line strong { color: var(--oxblood); font-style: normal; font-weight: 600; }
.hint-line.gone {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* The seal "lose" treatment, mirroring the sibling games. */
.seal-face { line-height: 1; transition: transform .3s var(--ease); }
.seal.lose { background: radial-gradient(circle at 38% 32%, #6b5a48, #3a2e22 60%, #1a1410 100%); }
.seal:active .seal-face { transform: rotate(-90deg); }

@media (max-width: 420px) {
  .hud { gap: 10px; }
  .difficulties { gap: 6px; }
  .diff { padding: 6px 10px; }
}