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; }