.nc-board-module {
  --nc-blue: #123b73;
  --nc-blue-dark: #082a55;
  --nc-green: #2fa84f;
  --nc-green-dark: #21833d;
  --nc-fog: #e5eaf0;
  --nc-gray: #475569;
  --nc-light-square: #edf1f7;
  --nc-dark-square: #5b7baa;
  --nc-error: #c0392b;
  width: 100%;
  padding: 20px;
  border: 1px solid rgba(8, 42, 85, 0.12);
  border-radius: 20px;
  background: var(--nc-fog);
  color: var(--nc-blue-dark);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  box-shadow: 0 24px 60px rgba(8, 42, 85, 0.14);
}

.nc-board-module *, .nc-board-module *::before, .nc-board-module *::after { box-sizing: border-box; }
.nc-board-module [hidden] { display: none !important; }
.nc-board-header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.nc-board-header h2 { margin: 0; color: var(--nc-blue-dark); font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; }
.nc-board-header h2 span { color: var(--nc-green); }
.nc-board-context { color: var(--nc-gray); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.nc-board-layout { display: grid; grid-template-columns: minmax(280px, 520px) minmax(280px, 1fr); gap: 20px; }
.nc-board-wrap { position: relative; user-select: none; }
.nc-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1; overflow: hidden; border: 6px solid var(--nc-blue-dark); border-radius: 10px; box-shadow: 0 10px 24px rgba(8, 42, 85, 0.18); }
.nc-square { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; font: inherit; font-size: clamp(27px, 5.2vw, 52px); line-height: 1; cursor: pointer; appearance: none; }
.nc-square.is-light { background: var(--nc-light-square); }
.nc-square.is-dark { background: var(--nc-dark-square); }
.nc-square:focus-visible { z-index: 2; outline: 3px solid var(--nc-green); outline-offset: -3px; }
.nc-piece { pointer-events: none; font-family: Georgia, "Times New Roman", serif; font-weight: 400; transition: transform 0.12s ease; }
.nc-piece.is-white { color: #fff; -webkit-text-stroke: 1.6px #0b1f3a; paint-order: stroke fill; text-shadow: 0 1.5px 0 #0b1f3a, 0 -1px 0 #0b1f3a, 1px 0 0 #0b1f3a, -1px 0 0 #0b1f3a, 0 2px 4px rgba(8, 42, 85, 0.45); }
.nc-piece.is-black { color: #0b1f3a; -webkit-text-stroke: 1px #0b1f3a; text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35); }
.nc-square.is-selected { box-shadow: inset 0 0 0 4px var(--nc-green); }
.nc-square.is-destination::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: rgba(47, 168, 79, 0.58); }
.nc-square.is-destination.is-capture::after { width: 88%; height: 88%; background: transparent; border: 4px solid rgba(47, 168, 79, 0.68); }
.nc-square.is-last { box-shadow: inset 0 0 0 3px rgba(18, 59, 115, 0.45); }
.nc-coordinate { position: absolute; color: rgba(8, 42, 85, 0.56); font-size: 9px; font-weight: 800; pointer-events: none; }
.nc-square.is-dark .nc-coordinate { color: rgba(255, 255, 255, 0.72); }
.nc-coordinate.is-row { top: 3px; left: 4px; }
.nc-coordinate.is-column { right: 4px; bottom: 2px; }
.nc-board-panel { display: flex; flex-direction: column; gap: 12px; }
.nc-board-tabs { display: flex; gap: 8px; }
.nc-board-tab { flex: 1; padding: 10px; border: 2px solid var(--nc-blue); border-radius: 8px; background: transparent; color: var(--nc-blue); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.nc-board-tab.is-active { background: var(--nc-blue); color: #fff; }
.nc-board-card { padding: 14px 16px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(8, 42, 85, 0.08); }
.nc-board-heuristic { border-left: 6px solid var(--nc-green); }
.nc-board-label { color: var(--nc-green-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.nc-board-card h3 { margin: 3px 0 5px; color: var(--nc-blue-dark); font-size: 16px; }
.nc-board-card p { margin: 0; color: var(--nc-gray); font-size: 14px; line-height: 1.5; }
.nc-board-status.is-success { border-left: 6px solid var(--nc-green); }
.nc-board-status.is-error { border-left: 6px solid var(--nc-error); }
.nc-board-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nc-board-button { padding: 9px 14px; border: 0; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.nc-board-button.is-green { background: var(--nc-green); color: #fff; }
.nc-board-button.is-blue { background: var(--nc-blue); color: #fff; }
.nc-board-button.is-outline { border: 2px solid var(--nc-blue); background: #fff; color: var(--nc-blue); }
.nc-board-button:focus-visible { outline: 3px solid var(--nc-blue-dark); outline-offset: 2px; }
.nc-board-fen input { flex: 1; min-width: 190px; padding: 9px; border: 2px solid #cdd6df; border-radius: 8px; font: 13px ui-monospace, Consolas, monospace; }
.nc-board-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.nc-board-metrics div { padding: 8px 4px; border-radius: 8px; background: var(--nc-fog); }
.nc-board-metrics b { display: block; color: var(--nc-blue); font-size: 20px; }
.nc-board-metrics span { color: var(--nc-gray); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.nc-board-debug { margin: 0; padding: 10px; border-radius: 8px; background: var(--nc-blue-dark); color: #bfe8cc; font: 11px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.nc-board-note { margin: 0; color: var(--nc-gray); font-size: 12px; line-height: 1.5; }
.nc-board-error { margin: 0; padding: 18px; color: var(--nc-error); }

@media (max-width: 760px) {
  .nc-board-module { padding: 14px; border-radius: 14px; }
  .nc-board-layout { grid-template-columns: 1fr; }
  .nc-board-header h2 { font-size: 20px; }
  .nc-square { font-size: clamp(27px, 11vw, 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .nc-piece { transition: none; }
}