/*
 * Artificial Idiot, stage 2: the chess board (markup made by stage2-chess.js).
 * A wooden board in a walnut frame with a brass rim, a Claude Free / Claude Pro switch above it.
 * The board stays wood in light and dark; everything else uses the page's shared variables (--ai-*).
 */
.cb {
  --cb-light: #E8C99B;
  --cb-dark: #A5683A;
  --cb-frame: #4A2E1A;
  --cb-brass: #D3A548;
  --cb-ink: #17130F;
  display: grid;
  gap: 18px;
  align-items: start;
}
@media (min-width: 860px) {
  .cb { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 32px; }
  .cb__side { padding-top: 62px; }
}
.cb__main { display: grid; gap: 12px; min-width: 0; max-width: 540px; }

/* ---------- Claude Free / Claude Pro switch ---------- */
.cb__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 2px solid var(--ai-ink, #17130F);
  border-radius: 14px;
  background: var(--ai-surface, #FFFDF7);
}
.cb__plan {
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ai-ink, #17130F);
  font: 700 1rem/1.2 var(--ai-font-body, system-ui, sans-serif);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cb__plan[aria-pressed="true"] { background: var(--ai-ink, #17130F); color: var(--ai-bg, #F3EEE3); }
.cb__plan[data-plan="pro"][aria-pressed="true"] { background: var(--cb-brass); color: var(--cb-ink); }
.cb__plan[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.cb__plan:focus-visible { outline: 3px solid var(--cb-brass); outline-offset: 2px; }

/* ---------- Frame and board ---------- */
.cb__frame {
  box-sizing: border-box;
  width: 100%;
  padding: clamp(7px, 2.2vw, 14px);
  border-radius: 14px;
  background:
    repeating-linear-gradient(97deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #5C3920, var(--cb-frame) 55%, #3A2313);
  box-shadow:
    inset 0 0 0 2px var(--cb-brass),
    inset 0 0 0 4px rgba(0, 0, 0, .35),
    0 16px 34px -10px rgba(0, 0, 0, .45);
  transition: box-shadow .3s ease;
}
[data-mode="pro"] .cb__frame {
  box-shadow:
    inset 0 0 0 2px var(--cb-brass),
    inset 0 0 0 4px rgba(0, 0, 0, .35),
    0 0 0 4px color-mix(in srgb, var(--cb-brass) 55%, transparent),
    0 16px 34px -10px rgba(0, 0, 0, .45);
}
.cb__board {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 2px solid #26160B;
  border-radius: 3px;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.cb__sq {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  perspective: 300px;
}
.cb__sq--light {
  background-color: var(--cb-light);
  background-image: repeating-linear-gradient(104deg, rgba(140, 86, 30, .07) 0 1.5px, transparent 1.5px 6px);
}
.cb__sq--dark {
  background-color: var(--cb-dark);
  background-image: repeating-linear-gradient(96deg, rgba(60, 30, 8, .12) 0 2px, transparent 2px 7px);
}
.cb__sq .cb-piece {
  position: relative;
  z-index: 2;
  width: 90%;
  height: 90%;
  pointer-events: none;
  filter: drop-shadow(0 1.5px 0 rgba(0, 0, 0, .28));
}
.cb__sq.is-last::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(240, 196, 82, .42);
}
.cb__sq.is-selected::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(240, 196, 82, .55);
  box-shadow: inset 0 0 0 3px var(--cb-brass), inset 0 0 0 5px rgba(23, 19, 15, .55);
}
.cb__sq.is-target::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 30%;
  height: 30%;
  border-radius: 50%;
  background: rgba(23, 19, 15, .42);
  box-shadow: 0 0 0 2px rgba(251, 246, 234, .55);
  pointer-events: none;
}
.cb__sq.is-capture::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 5%;
  border-radius: 50%;
  border: 4px solid rgba(23, 19, 15, .5);
  box-shadow: inset 0 0 0 2px rgba(251, 246, 234, .6);
  pointer-events: none;
}
.cb__sq.is-check { background-image: radial-gradient(circle, #F0543C 0 30%, rgba(240, 84, 60, .45) 52%, transparent 74%); }
.cb__sq:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--cb-ink);
  z-index: 4;
}
@media (hover: hover) { .cb__sq:hover { filter: brightness(1.06); } }
.cb__coord {
  position: absolute;
  z-index: 2;
  font: 700 clamp(8px, 1.9vw, 11px)/1 var(--ai-font-body, system-ui, sans-serif);
  pointer-events: none;
}
.cb__sq--light .cb__coord { color: #7A4A22; }
.cb__sq--dark .cb__coord { color: #F3DDB8; }
.cb__coord--file { right: 3px; bottom: 2px; }
.cb__coord--rank { left: 3px; top: 3px; }
.cb.is-busy .cb__board { cursor: progress; }
.cb.is-over .cb__sq { cursor: default; }

/* ---------- Free <-> Pro: pieces flip into queens, pawns fade out (and back) ---------- */
.cb-ghost { position: absolute; inset: 5%; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.cb-ghost .cb-piece { width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .cb__sq.is-flip .cb-piece { animation: cb-flip .55s cubic-bezier(.2, .8, .3, 1) both; }
  .cb__sq.is-fade-in .cb-piece { animation: cb-fade-in .5s ease-out both; }
  .cb-ghost { animation: cb-fade-out .5s ease-in both; }
}
@keyframes cb-flip {
  0% { transform: rotateY(90deg) scale(.85); opacity: .3; }
  60% { transform: rotateY(-12deg) scale(1.06); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes cb-fade-in { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
@keyframes cb-fade-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.7) translateY(-12%); } }

/* ---------- Side panel: status, the ending, New game ---------- */
.cb__side { display: grid; gap: 14px; align-content: start; min-width: 0; }
.cb__status {
  margin: 0;
  min-height: 1.45em;
  font: 700 1rem/1.45 var(--ai-font-body, system-ui, sans-serif);
  color: var(--ai-ink, #17130F);
}
.cb__finale[hidden], .cb__new[hidden] { display: none; }
.cb__finale { display: grid; gap: 12px; }
.cb__finale-title { margin: 0; font: 700 clamp(1.6rem, 5vw, 2rem)/1.1 var(--ai-font-display, Georgia, serif); color: var(--ai-ink, #17130F); }
.cb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cb__pro-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ai-muted, #5C5246);
  font: 700 .95rem/1.3 var(--ai-font-body, system-ui, sans-serif);
  text-underline-offset: 3px;
}
.cb__pro-link:hover { color: var(--ai-ink, #17130F); }
.cb__new {
  justify-self: start;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ai-muted, #5C5246);
  font: 700 .95rem/1.3 var(--ai-font-body, system-ui, sans-serif);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cb__new:hover { color: var(--ai-ink, #17130F); }
.cb__fallback { margin: 0; padding: 18px; border: 2px dashed var(--ai-line, #D8CDB8); border-radius: 14px; }