/* Chess. The board is always square and always fully on screen: a board you have to scroll is not a
   board you can think about. Colours are the chess.com greens, because that is what a chess board
   looks like to anyone who plays online. */
.ch-head{text-align:center;margin-bottom:10px}
.ch-head .chips{justify-content:center;margin-top:6px}
/* The board sits in a frame with a shadow under it, so it reads as an object on the page rather
   than a table of coloured cells. */
.ch-board{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  width:min(100%,min(72vh,560px));
  aspect-ratio:1/1;
  margin:0 auto;
  padding:10px;
  border-radius:10px;
  background:linear-gradient(160deg,#5C6B48,#3F4A33);
  box-shadow:0 10px 26px rgba(32,33,36,.28), inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-user-select:none;user-select:none;
  touch-action:none;                 /* dragging a piece must not scroll the page */
}
/* the squares are inset inside the frame, and the frame edge is the only rounded part */
.ch-board > .ch-sq:nth-child(1){border-top-left-radius:3px}
.ch-board > .ch-sq:nth-child(8){border-top-right-radius:3px}
.ch-board > .ch-sq:nth-child(57){border-bottom-left-radius:3px}
.ch-board > .ch-sq:nth-child(64){border-bottom-right-radius:3px}
.ch-sq{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ch-sq.light{background:#EBECD0}
.ch-sq.dark{background:#739552}
.ch-sq.last::before{content:'';position:absolute;inset:0;background:rgba(255,214,0,.38)}
.ch-sq.check::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle,rgba(217,48,37,.75) 20%,rgba(217,48,37,0) 72%)}
.ch-sq.sel::before{content:'';position:absolute;inset:0;background:rgba(255,214,0,.5)}
.ch-sq.hover{box-shadow:inset 0 0 0 4px rgba(255,255,255,.85)}
.ch-sq.hint::before{content:'';position:absolute;inset:0;background:rgba(26,115,232,.42)}
.ch-sq.wrong::before{content:'';position:absolute;inset:0;background:rgba(217,48,37,.55)}
.ch-piece{
  width:94%;height:94%;pointer-events:none;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* where the selected piece can go: a dot on an empty square, a ring on one you can take */
.ch-sq.target::after{
  content:'';position:absolute;width:28%;height:28%;border-radius:50%;
  background:rgba(0,0,0,.22);z-index:1;
}
.ch-sq.take::after{
  content:'';position:absolute;inset:4%;border-radius:50%;
  border:5px solid rgba(0,0,0,.22);z-index:1;
}
/* coordinates, in the corner of the edge squares, the way a real board carries them */
.ch-rank,.ch-file{position:absolute;font-size:9px;font-weight:600;line-height:1;opacity:.75;z-index:3}
.ch-rank{top:2px;left:3px}
.ch-file{bottom:2px;right:3px}
.ch-sq.light .ch-rank,.ch-sq.light .ch-file{color:#739552}
.ch-sq.dark .ch-rank,.ch-sq.dark .ch-file{color:#EBECD0}

/* the piece that follows your finger, and the one that slides on a reply */
.ch-ghost{
  position:fixed;z-index:120;pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));
}
.ch-ghost.dragging{transform:scale(1.06)}

/* promotion: which piece do you want */
.ch-promo{
  position:absolute;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(32,33,36,.45);
}
.ch-promo-inner{
  display:flex;gap:6px;padding:10px;
  background:var(--surface);border-radius:var(--r);box-shadow:var(--e2);
}
.ch-promo-btn{
  width:56px;height:56px;padding:4px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
}
.ch-promo-btn img{width:100%;height:100%;display:block}
.ch-promo-btn:hover{border-color:var(--blue);background:var(--blue-bg)}

.ch-info{min-height:40px;display:flex;justify-content:center;align-items:center;margin-top:14px}
.ch-info .pill{height:auto;min-height:32px;padding:6px 14px;font-size:14px}
.ch-tools{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:8px;min-height:32px}
.ch-after{margin-top:12px;position:relative}
.ch-line{font-size:17px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.6}

/* the board holds the promotion overlay, so it needs to be the thing that is positioned */
.game-body{position:relative}