/* panda-board.css -- the PandaChess board, extracted and de-bugged.
   Pairs with panda-board.js. See BOARD-RECIPE.md before changing anything here.

   Sizing is PURE CSS on purpose. PandaChess sizes its board from JS
   (fitBoard + ResizeObserver + burst guard + 3px deadband) and that apparatus
   exists only because its board is wedged between four dynamic label strips and
   a resizable panel. Do not reintroduce it. aspect-ratio does the job. */

.pb-root {
  --pb-light: #DFE3E8;
  --pb-dark: #4A73A2;
  --pb-label: #94a3b8;
  --pb-frame: #1a2132;
  --pb-size: min(100%, 78vh);

  width: var(--pb-size);
  margin-inline: auto;
  display: grid;
  /* corner | files | corner  x  corner | ranks | corner */
  grid-template-columns: var(--pb-gutter, 1.6rem) 1fr var(--pb-gutter, 1.6rem);
  grid-template-rows: var(--pb-gutter, 1.6rem) auto var(--pb-gutter, 1.6rem);
  user-select: none;
  -webkit-user-select: none;
}

/* Coordinate strips live OUTSIDE the board, as grid siblings. This is what
   keeps them upright through an orientation flip for free. */
.pb-files,
.pb-ranks {
  display: flex;
  font-weight: 800;
  font-size: clamp(0.6rem, 1.6vh, 1rem);
  color: var(--pb-label);
  letter-spacing: 0.02em;
}
.pb-files { flex-direction: row; }
.pb-ranks { flex-direction: column; }
.pb-files > div,
.pb-ranks > div {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-files-top    { grid-area: 1 / 2 / 2 / 3; }
.pb-files-bottom { grid-area: 3 / 2 / 4 / 3; }
.pb-ranks-left   { grid-area: 2 / 1 / 3 / 2; }
.pb-ranks-right  { grid-area: 2 / 3 / 3 / 4; }

.pb-root[data-coords="off"] .pb-files,
.pb-root[data-coords="off"] .pb-ranks { visibility: hidden; }

.pb-surface {
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
  aspect-ratio: 1 / 1;
  /* align-self is load-bearing: a stretched grid item overrides aspect-ratio
     and yields a squished board. PandaChess hit this exact bug. */
  align-self: start;
  width: 100%;
  border: 5px solid var(--pb-frame);
  border-radius: 10px;
  overflow: hidden;
  background: var(--pb-dark);
  touch-action: none;
  -webkit-touch-callout: none;
  box-shadow:
    0 30px 60px -15px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(59, 130, 246, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.pb-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
}

.pb-sq {
  position: relative;
  /* min-*:0 is load-bearing -- without it an oversized piece img blows out
     the grid track and the board stops being square. */
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.4s ease-in-out;
}
.pb-sq[data-shade="light"] { background: var(--pb-light); }
.pb-sq[data-shade="dark"]  { background: var(--pb-dark); }

.pb-sq img {
  width: 96%;
  height: 96%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.55));
  /* Transition ONLY transform/opacity. PandaChess transitioned `filter` and
     got drop-shadow ghost-trails when scrubbing moves. */
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease;
  transform: translateZ(0);
}

.pb-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.pb-hl {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.pb-hl-last     { background: rgba(250, 204, 21, 0.42); }
.pb-hl-selected { background: rgba(0, 0, 0, 0.25); }
.pb-hl-good     { background: rgba(34, 197, 94, 0.45); }
.pb-hl-bad      { background: rgba(239, 68, 68, 0.45); }