/* ============================================================
   Jugnu Jar — chess
   ============================================================ */

/* ---------- the board ---------- */

.cb-wrap {
  position: relative;
  width: min(92vw, 460px);
  margin: 0 auto 14px;
}

.cb-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  /* Rows must be declared too. With only the columns named, the rows size to
     their content, so ranks holding pieces come out more than twice the height
     of empty ones and the board is visibly squashed in the middle. */
  grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 3px solid #7a5c3e;
}

.cb-sq {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  /* A tap on a chessboard should never be mistaken for a double-tap zoom or
     the start of a text selection — both make a piece feel unresponsive. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.cb-sq.light { background: #f0d9b5; }
.cb-sq.dark  { background: #b58863; }
.cb-sq:disabled { cursor: default; }

/* Pieces.

   White uses the hollow Unicode glyphs (♔♕♖) and black the filled ones
   (♚♛♜) — what they were designed for, and what printed chess diagrams have
   done for a century. Both are drawn in the same dark ink; the outline
   versus fill does the work of telling the armies apart.

   An earlier version used the filled glyphs for both colours and separated
   them with -webkit-text-stroke. It looked fine on a rook and failed badly
   on a king: the crown's fine internal detail filled in solid at any stroke
   thick enough to outline the piece, so the white king rendered dark while
   the black king's pale stroke rendered light. The two sides became
   impossible to tell apart.

   The pale halo is what keeps a dark glyph legible on the dark squares. */
.cb-piece {
  font-size: min(9.5vw, 46px);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-2%);
  color: #1a1410;
}
.cb-piece.w {
  /* The hollow glyphs are mostly negative space, so they need a solid pale
     backing or the square colour shows through and reads as a hole. */
  text-shadow:
     0 0 2px #fffdf7, 0 0 2px #fffdf7, 0 0 3px #fffdf7,
     1px 1px 0 rgba(255, 253, 247, .9), -1px -1px 0 rgba(255, 253, 247, .9);
}
.cb-piece.b {
  text-shadow: 0 0 2px rgba(255, 253, 247, .55), 0 1px 1px rgba(255, 253, 247, .4);
}

/* ---------- coordinates ----------

   Files along the bottom, ranks up the left, outside the board. The Board
   lesson teaches a child to read these — "the letters go across the bottom,
   and the numbers go up the side" — so they have to be legible, which rules
   out tucking them into the corner of a square underneath a piece.

   A little grid holds the rank strip, the board and the file strip together,
   so the three stay aligned at any size without magic numbers. */
.cb-frame {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr auto;
  gap: 3px;
}
.cb-frame .cb-grid { grid-column: 2; grid-row: 1; }

.cb-ranks,
.cb-files {
  display: grid;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(9px, 2.4vw, 12px);
  font-weight: 700;
  line-height: 1;
}
.cb-ranks {
  grid-column: 1;
  grid-row: 1;
  grid-template-rows: repeat(8, 1fr);
  align-items: center;
  justify-items: center;
  width: 1.2em;
}
.cb-files {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(8, 1fr);
  justify-items: center;
  padding-top: 1px;
}

/* ---------- highlights ----------

   Layered deliberately: a square can be the last move AND a legal target AND
   flagged as dangerous all at once, so these have to combine rather than
   replace one another. Hence outlines and dots rather than background
   colours, which would fight. */

.cb-sq.sel { box-shadow: inset 0 0 0 4px var(--c-good); }

/* An empty square you may move to gets a dot; an occupied one gets a ring
   around the piece. Same information, but the dot would be hidden under a
   piece and a ring around an empty square reads as a hole. */
.cb-sq.target::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(30, 110, 60, .45);
}
.cb-sq.target-take {
  box-shadow: inset 0 0 0 4px rgba(30, 110, 60, .6);
}

.cb-sq.last { background-image: linear-gradient(rgba(255, 214, 79, .45), rgba(255, 214, 79, .45)); }

/* Hint marks, used by Play mode. */
.cb-sq.danger    { box-shadow: inset 0 0 0 4px #e5484d; }
.cb-sq.loose     { box-shadow: inset 0 0 0 4px #f0a020; }
.cb-sq.freebie   { box-shadow: inset 0 0 0 4px #2f9e44; }
.cb-sq.check     { background-image: radial-gradient(circle, rgba(229,72,77,.75), rgba(229,72,77,.25)); }
.cb-sq.nudge     { box-shadow: inset 0 0 0 4px #7c5cff; }
/* The piece or pieces delivering checkmate, so the child can see exactly what
   trapped the king rather than being told it happened. */
.cb-sq.mates     { box-shadow: inset 0 0 0 4px #f5b301; }

.cb-sq.goal::after {
  content: '\2b50';
  position: absolute;
  font-size: min(5vw, 22px);
  opacity: .85;
}

/* ---------- coordinates ---------- */

/* ---------- promotion ---------- */

.cb-promo-sheet {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 40, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  z-index: 5;
}
.cb-promo-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 12px;
  width: min(92%, 340px);
  box-shadow: var(--shadow-1);
}
.cb-promo-title {
  font-size: clamp(14px, 3.6vw, 17px);
  margin: 0 0 10px;
  text-align: center;
  color: var(--c-ink);
}
.cb-promo-row { display: flex; gap: 6px; justify-content: center; }
.cb-promo-pick {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border: 2px solid #e6e0f0;
  border-radius: var(--r-sm, 10px);
  background: #faf8ff;
  cursor: pointer;
  font-family: inherit;
}
.cb-promo-pick .cb-piece { font-size: 30px; }
.cb-promo-name { font-size: 11px; color: var(--c-ink); text-transform: capitalize; }

/* ---------- the lesson and puzzle screens ---------- */

.chess-screen .screen-body { padding-bottom: 6px; }

.chess-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: clamp(20px, 5.4vw, 28px);
  margin: 0 0 6px;
  color: #fff;
}
.chess-title-glyph { font-size: 1.15em; line-height: 1; }

/* What the lesson is saying. Fixed minimum height so the board does not jump
   up and down as the text changes length between steps — a board that moves
   under a child's finger is the fastest way to lose a tap. */
.chess-says {
  width: min(92vw, 460px);
  min-height: 4.6em;
  margin: 0 auto 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .92);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-size: clamp(14px, 3.7vw, 17px);
  line-height: 1.5;
  text-align: left;
}
.chess-says.good {
  background: #e6f7ec;
  box-shadow: inset 3px 0 0 var(--c-good);
}
/* Play mode says one short line at a time, so it does not need the room a
   lesson does — and a tall empty box just pushes the board off the screen. */
.chess-play .chess-says { min-height: 2.6em; }

.chess-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.chess-controls .big-btn { padding: 10px 20px; font-size: clamp(14px, 3.6vw, 17px); }

/* Step progress. */
.chess-pips {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 10px 0 4px;
}
.chess-pips i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
}
.chess-pips i.now { background: #fff; transform: scale(1.25); }
.chess-pips i.hit { background: var(--c-good); }

/* The moves-left counter. */
.chess-counter {
  width: min(92vw, 460px);
  margin: -4px auto 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: clamp(13px, 3.3vw, 15px);
  font-weight: 700;
  text-align: center;
}
.chess-counter.low { background: rgba(229, 72, 77, .8); }

/* ---------- play mode ---------- */

.chess-says.thinking { opacity: .8; font-style: italic; }

/* Captured pieces, so a child can see the score without counting the board. */
.chess-taken {
  width: min(92vw, 460px);
  min-height: 22px;
  margin: -4px auto 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: center;
}
.chess-taken-piece { font-size: 17px; line-height: 1; color: #1a1410; }
.chess-taken-piece.w { text-shadow: 0 0 2px #fffdf7, 0 0 2px #fffdf7; }

/* The end of a game. Under the board, never over it — the final position is
   the most interesting thing on the screen at that moment, particularly to a
   child who has just lost and does not yet know why. */
.chess-end {
  width: min(92vw, 460px);
  margin: 8px auto 4px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.chess-end-title {
  margin: 0 0 10px;
  font-size: clamp(17px, 4.6vw, 21px);
  color: var(--c-ink);
}
.chess-end-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.chess-end-actions .big-btn {
  padding: 10px 18px;
  font-size: clamp(13px, 3.5vw, 16px);
}

.chess-levels {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 4px 0 8px;
}
.chess-level {
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  cursor: pointer;
}
.chess-level.on { background: #fff; color: var(--c-ink); }

.chess-helper {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: clamp(13px, 3.4vw, 15px);
  color: var(--c-ink);
  cursor: pointer;
}
.chess-helper input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  accent-color: var(--c-good);
}
.chess-helper-note {
  font-size: 13px;
  color: #6b6580;
  margin: 0 0 6px;
}

/* ---------- activity colours ---------- */

.act-card.chesslearn  { background: linear-gradient(150deg, #cdb4ff, #7c5cff); }
.act-card.chesspuzzle { background: linear-gradient(150deg, #ffd6a5, #f08c3a); }
.act-card.chessplay   { background: linear-gradient(150deg, #a7e5c1, #34a06a); }

.act-pill.chesslearn  { background: #ece4ff; color: #5a3fd0; }
.act-pill.chesspuzzle { background: #fff0dd; color: #a95d10; }
.act-pill.chessplay   { background: #dff5e8; color: #1f7a4d; }