/* Puso Chess styles (v109) — Across the Ocean board.
   Every rule is scoped to chess classes; nothing here touches
   the rest of the app. No images, no fetched fonts: SVG pieces
   drawn in code only. The board is a grid of square buttons so
   every square is a real tap target; at phone width the board
   is almost the full width, so squares clear the phone target,
   and at desktop width the board is capped. Folded width is
   flagged in the fit notes: squares there sit just under the
   phone target, and that decision is owed at live verification,
   never decided by shrinking the board here. */
.chess-wrap { margin: 8px 0; }
.chess-wrap h4 { margin: 6px 0; }
.chess-board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(92vw, 520px); margin: 10px auto; border: 4px solid #f2c14e; border-radius: 10px; overflow: hidden; background: #222222; }
.chess-sq { aspect-ratio: 1; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0; padding: 0; min-width: 0; }
.chess-sq.chess-light { background: #f7ead0; color: #2b1630; }
.chess-sq.chess-dark { background: #2f5d6b; color: #cfe8ef; }
.chess-sq.chess-selected { outline: 4px solid #f2c14e; outline-offset: -4px; }
.chess-sq.chess-lastmove { box-shadow: inset 0 0 0 4px rgba(242, 193, 78, 0.9); }
.chess-sq.chess-legal::after { content: ""; width: 22%; height: 22%; border-radius: 50%; background: rgba(242, 193, 78, 0.95); position: absolute; }
.chess-sq.chess-check { box-shadow: inset 0 0 0 5px #ff4d6d; }
.chess-sq .chess-coord { position: absolute; left: 3px; top: 2px; font-size: 11px; font-weight: 700; }
.chess-sq svg { width: 86%; height: 86%; }
.chess-wrap.chess-large .chess-sq svg { width: 94%; height: 94%; }
.chess-wrap.chess-contrast .chess-sq.chess-light { background: #ffffff; }
.chess-wrap.chess-contrast .chess-sq.chess-dark { background: #102a33; }
.chess-wrap.chess-motion .chess-sq.chess-check { animation: none; }
.chess-island { border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.chess-island.chess-plum { background: #3d2340; color: #fff8ec; }
.chess-island.chess-coral { background: #ff8a5c; color: #3a1408; }
.chess-banig { height: 14px; border-radius: 99px; margin: 8px 0; background: repeating-linear-gradient(90deg, #f2c14e 0 12px, #ff7a66 12px 16px, #f7ead0 16px 28px, #2f5d6b 28px 32px); }
.chess-tray { display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; }
.chess-tray svg { width: 30px; height: 30px; }
.chess-moves { max-height: 140px; overflow: auto; font-size: 15px; }
.chess-moves ol { margin: 6px 0; padding-left: 22px; }
.chess-status { font-weight: 800; margin: 8px 0; }
.chess-paused { font-weight: 700; margin: 8px 0; }
.chess-dot { font-weight: 800; }
.chess-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chess-actions button, .chess-wrap button { min-height: 44px; }
.chess-wrap button:focus-visible, .chess-wrap select:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.chess-wrap select { font-size: 17px; padding: 11px; border-radius: 12px; min-height: 48px; }
.chess-promo { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.chess-promo button { min-width: 44px; }
.chess-promo svg { width: 48px; height: 48px; }
.chess-legend { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
.chess-legend svg { width: 44px; height: 44px; flex: none; }
.chess-wrap.chess-lightwrap { background: #fdf6e3; color: #2b1630; border-radius: 14px; padding: 12px; }
.chess-wrap.chess-lightwrap .chess-small { color: #5a4a2a; }
@media (max-width: 400px) {
  .chess-board { width: 96vw; }
}
@media (max-width: 360px) {
  .chess-board { width: 97vw; }
}
@media (min-width: 700px) {
  .chess-board { width: 520px; }
}