chess_game/static/style.css

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  margin: 0; padding: 0; background: #0b1020; color: #f4f4f8;
}
.container { max-width: 900px; margin: 0 auto; padding: 16px; }
a { color: #93c5fd; text-decoration: none; }
button { background: #2563eb; color: white; border: 0; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
button:hover { background: #1d4ed8; }
input, select { padding: 8px; border-radius: 6px; border: 1px solid #334155; background: #0f172a; color: #e5e7eb; }
ul { padding-left: 20px; }

/* Minimal fallback styles for chessboard.js if CDN CSS fails to load */
.chessboard-63f37 { border: 1px solid #334155; background: #111827; }
.board-b72b1 { position: relative; width: 100%; padding-bottom: 100%; }
.square-55d63 { position: absolute; width: 12.5%; height: 12.5%; }
.white-1e1d7 { background: #f0d9b5; }
.black-3c85d { background: #b58863; }
img.piece-417db { position: absolute; width: 12.5%; height: 12.5%; user-select: none; -webkit-user-drag: none; }

/* Fallback board using CSS grid + Unicode pieces */
#boardUI.fallback { width: 520px; height: 520px; max-width: 90vw; max-height: 90vw; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 1px solid #334155; }
#boardUI.fallback .sq { display: flex; align-items: center; justify-content: center; font-size: calc(520px / 10); user-select: none; }
#boardUI.fallback .light { background: #f0d9b5; color: #111827; }
#boardUI.fallback .dark { background: #b58863; color: #111827; }
#boardUI.fallback .pc { cursor: grab; }
#boardUI.fallback .pc:active { cursor: grabbing; }