/* Chess layout, board and pieces. Shared pieces live in base.css and game.css. */
.defs{position:absolute;width:0;height:0;overflow:hidden}

.game{
  position:relative;z-index:1;
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:190px auto 190px;
  grid-template-areas:"stats board side";
  justify-content:center;align-content:start;
  gap:14px;
  padding:4px clamp(16px,4vw,32px) 24px;
}
.stats{grid-area:stats;align-self:start}
.stats b{font:600 15px/1.3 var(--sans)}
.board-col{grid-area:board;display:flex;flex-direction:column;gap:6px;--sq:44px}

/* ---- The players, above and below the board ---- */
.strip{
  display:flex;align-items:center;gap:8px;
  min-height:24px;font-size:13px;line-height:1.2;
}
.strip .who{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.strip .who b{font-weight:600}
.strip .elo{font:400 11px/1 var(--mono);color:var(--muted)}
.side{grid-area:side;align-self:start;align-items:stretch;gap:12px}

/* ---- The board: 8 × 8 buttons ---- */
#board.board{
  display:grid;
  grid-template-columns:repeat(8,var(--sq));
  grid-template-rows:repeat(8,var(--sq));
  overflow:hidden;
  touch-action:none;
  background:none;
}
.sq{
  position:relative;
  display:block;width:var(--sq);height:var(--sq);
  margin:0;padding:0;border:0;border-radius:0;
  background:#d6d9ee;
  line-height:0;
}
.sq.dark{background:#8576c4}
.sq:focus{outline:none}
.sq:focus-visible{box-shadow:inset 0 0 0 3px var(--cyan)}
.sq.last{background:#e8d98a}
.sq.dark.last{background:#b8a45a}
.sq.sel{background:#7fe0f0}
.sq.dark.sel{background:#3fb3c8}
.sq.check{background:radial-gradient(circle,#ff5470 0%,#e2304f 45%,transparent 80%),#d6d9ee}
.sq.dark.check{background:radial-gradient(circle,#ff5470 0%,#e2304f 45%,transparent 80%),#8576c4}
/* Where the selected piece can go: a dot, or a ring around a piece it can take. */
.sq.to::after{
  content:"";position:absolute;left:50%;top:50%;
  width:30%;height:30%;margin:-15% 0 0 -15%;border-radius:50%;
  background:rgba(8,10,18,.32);
}
.sq.to.take::after{width:88%;height:88%;margin:-44% 0 0 -44%;background:none;border:4px solid rgba(8,10,18,.32)}
.coord{
  position:absolute;
  font:600 10px/1 var(--mono);color:rgba(8,10,18,.55);
  pointer-events:none;
}
.coord.file{right:3px;bottom:3px}
.coord.rank{left:3px;top:3px}
.dark .coord{color:rgba(255,255,255,.7)}

/* The pieces: white with a dark outline, black with a light one. */
.pc{
  position:absolute;inset:4%;width:92%;height:92%;
  pointer-events:none;
  stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;
}
.pc.w{fill:#f8f9fd;stroke:#121626}
.pc.b{fill:#1b2036;stroke:#e4e7f4}
.pc.w .cut{stroke:#121626;fill:none}
.pc.b .cut{stroke:#e4e7f4;fill:none}
.pc.slide{transition:transform .18s ease}
.pc.drag{z-index:2;transition:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.45))}

/* Choosing what a pawn becomes */
.promo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:14px;line-height:1;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg-2);box-shadow:0 18px 48px -12px rgba(0,0,0,.7);
}
.promo[hidden]{display:none}
.promo p{margin:0}
.promo-pieces{display:flex;gap:8px}
.promo-pieces button{
  position:relative;width:var(--sq);height:var(--sq);min-width:44px;min-height:44px;
  padding:0;border:1px solid var(--line);border-radius:10px;background:#d6d9ee;
}
.promo-pieces button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.overlay .seg{margin:0;padding:0;border:0;min-width:220px}
.overlay .seg legend{margin:0 auto 8px}
.overlay .seg span{padding:9px}
/* Three sides to pick from: White, Black or both. */
#sideSeg{grid-template-columns:repeat(3,1fr);min-width:270px}
#sideSeg label + label span{border-left:0}

/* ---- Captures and controls ---- */
.caps{display:flex;flex:0 1 auto;flex-wrap:wrap;min-height:20px}
.caps svg{position:static;width:20px;height:20px;margin-right:-5px}
.adv{font:600 13px/1 var(--mono);color:var(--muted)}
.level{display:flex;flex-direction:column;gap:8px}
.level input{width:100%;margin:0;accent-color:#22d3ee}
.level output{font:600 13px/1.3 var(--mono);color:var(--fg);white-space:nowrap}
.controls{display:grid;gap:8px}
.controls .btn{padding:11px 14px;font-size:14px}
.controls .btn.confirm{border-color:var(--pink);color:var(--pink)}
.play-msg{margin:0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
.play-msg:empty{display:none}
.opening-row b{font-size:13px;line-height:1.3}
.controls .btn:disabled{opacity:.45;cursor:default;transform:none}

/* ---- Phones & tablets ---- */
@media (max-width:700px),(pointer:coarse){
  .game{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    grid-template-areas:"stats" "board" "side";
    justify-content:stretch;justify-items:center;
    gap:8px;
    padding:0 16px 8px;
  }
  .stats{justify-self:stretch;grid-template-columns:auto 1fr;gap:4px 12px;padding:8px 12px;text-align:left}
  .stats div{flex-direction:row;align-items:baseline;gap:8px}
  .stats b{font-size:14px}
  .best-row{display:none!important}
  .side{
    justify-self:stretch;
    display:grid;grid-template-columns:1fr;gap:8px 12px;
    padding:8px 12px;
  }
  .board-col{gap:4px}
  .strip{font-size:12px;min-height:20px}
  .caps{min-height:16px}
  .caps svg{width:16px;height:16px}
  .level{flex-direction:row;align-items:center;gap:12px}
  .level input{flex:1 1 auto;width:auto}
  .level output{font-size:12px}
  .controls{grid-template-columns:repeat(3,1fr)}
  .controls .btn{padding:10px 4px;font-size:13px}
  .opening-row{grid-column:1/-1}
  .opening-row b{font-size:12px}
}

/* The overlay hides the light squares well enough to read over. */
.board-wrap .overlay{background:rgba(8,10,18,.93)}

.ov-msg{min-height:0;color:var(--pink)!important}
.ov-msg:empty{display:none}

/* ---- Reviewing a game ---- */
/* Beside the board in a review: how the game stands, White's share from
   White's side of the board. */
body.reviewing .board-wrap{--pad:14px;padding-left:var(--pad)}
.eval-bar{
  position:absolute;left:0;top:0;bottom:0;width:8px;overflow:hidden;
  border-radius:4px;background:#1b2036;box-shadow:inset 0 0 0 1px var(--line);
}
.eval-bar[hidden]{display:none}
.eval-bar span{position:absolute;left:0;right:0;bottom:0;height:var(--w,50%);background:#e9ecf8;transition:height .3s ease}
.eval-bar.flip span{top:0;bottom:auto}
/* Arrows over the board: Stockfish's move, or a hint. */
.arrows{
  position:absolute;top:1px;left:calc(var(--pad,0px) + 1px);z-index:1;
  width:calc(var(--sq) * 8);height:calc(var(--sq) * 8);
  pointer-events:none;
}
.arrows polygon{fill:rgba(34,211,238,.78)}
.arrows .hint-arrow{fill:rgba(250,204,21,.85)}
/* What kind of move the move shown was, on the square it went to. */
.badge{
  position:absolute;top:2px;right:2px;z-index:1;
  min-width:18px;height:18px;padding:0 3px;box-sizing:border-box;
  border-radius:9px;
  font:700 11px/18px var(--mono);text-align:center;color:#0b0d16;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.badge.inaccuracy{background:#facc15}
.badge.mistake{background:#fb923c}
.badge.blunder{background:#fb7185}
.acc-line{display:none;margin:0;font:600 13px/1.4 var(--mono)}
/* The move shown and the buttons to step through the game sit above the
   rest of the review: beside the board's top on a wide screen, above the
   board on a phone. The review below them fills the rest of the board's
   height (set by resize() in chess.js). */
.review-bar{
  grid-area:bar;align-self:start;touch-action:pan-y;
  display:flex;flex-direction:column;gap:8px;
  padding:10px;
}
.review-bar[hidden]{display:none}
.now{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"eval more" "move move";
  align-items:baseline;gap:4px 10px;
  width:100%;padding:6px 8px;
  border:1px solid transparent;border-radius:8px;background:none;
  font:inherit;color:var(--fg);text-align:left;
}
.now:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.now:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.now b{grid-area:eval;font:600 15px/1.2 var(--mono)}
.now #moveNow{grid-area:move;font-size:13px;line-height:1.4;color:var(--muted);min-height:2.8em}
.now-more{grid-area:more;justify-self:end;font:600 11px/1 var(--mono);color:var(--cyan)}
.now-more::after{content:" ›"}
.review{
  grid-area:side;align-self:start;
  display:flex;flex-direction:column;gap:12px;
  padding:14px;
  max-height:var(--review-h,calc(var(--sq) * 8 + 2px));overflow:auto;
}
.review[hidden]{display:none}
.review > *{flex-shrink:0}
body.reviewing .side{display:none}
body.reviewing .game{
  grid-template-columns:190px auto 320px;
  grid-template-rows:auto 1fr;
  grid-template-areas:"stats board bar" "stats board side";
}
.review-head{display:flex;flex-direction:column;gap:6px}
.review-head p{margin:0}
.review-head h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
#reviewText{color:var(--muted);font-size:13px;line-height:1.4}
.review-progress{margin:0;font:400 12px/1.4 var(--mono);color:var(--faint)}
.link-btn{padding:0;border:0;background:none;color:var(--cyan);font:inherit;text-decoration:underline}
.summary{width:100%;border-collapse:collapse;font-size:13px}
.summary th,.summary td{padding:4px 6px;text-align:right;font-weight:400}
.summary th[scope=row]{text-align:left;color:var(--muted)}
.summary thead th{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.summary td{font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums}
.summary .inaccuracy span{color:#facc15}
.summary .mistake span{color:#fb923c}
.summary .blunder span{color:#fb7185}
#graph{display:block;width:100%;height:72px;border-radius:8px;cursor:pointer;touch-action:pan-y}
.alt-tip{margin:-4px 0 0;font-size:12px;line-height:1.4;color:var(--faint)}
.alt-tip[hidden]{display:none}
.alt{
  display:flex;flex-direction:column;gap:8px;
  padding:10px 12px;border:1px solid rgba(34,211,238,.35);border-radius:10px;
  background:rgba(34,211,238,.06);
}
.alt[hidden]{display:none}
.alt dl{margin:0;display:flex;flex-direction:column;gap:6px}
.alt dl div{display:flex;flex-direction:column;gap:2px}
.alt dd{margin:0;font:400 12px/1.4 var(--mono)}
.alt-verdict,.alt-now{margin:0;font-size:13px;line-height:1.4}
.alt-verdict:empty{display:none}
.alt-now{color:var(--muted)}
.alt-actions{display:flex;flex-wrap:wrap;gap:6px}
.alt-actions .btn{flex:1 1 auto;padding:8px 10px;font-size:13px}
.alt-actions .btn:disabled{opacity:.45;cursor:default;transform:none}
.alt-actions [hidden]{display:none}
.review-nav{display:flex;gap:6px}
.review-nav .icon-btn{width:36px;height:36px}
.review-nav .icon-btn:disabled{opacity:.4;cursor:default}
.review-nav #speedBtn{margin-left:auto;font:600 13px/1 var(--mono)}
.moves{
  position:relative;
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr;
  max-height:220px;overflow:auto;
  font:400 13px/1 var(--mono);
}
.moves li{display:grid;grid-template-columns:38px 1fr 1fr;align-items:center}
.moves .num{color:var(--faint)}
.mv{
  display:flex;gap:2px;align-items:baseline;
  padding:5px 6px;border:0;border-radius:6px;background:none;
  font:inherit;color:var(--fg);text-align:left;
}
.mv:hover{background:rgba(255,255,255,.06)}
.mv.on{background:rgba(34,211,238,.18)}
.mv:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.mv .mark{font-weight:600}
.mv.inaccuracy .mark{color:#facc15}
.mv.mistake .mark{color:#fb923c}
.mv.blunder .mark{color:#fb7185}
.mv.best .san{color:var(--cyan)}
.review-actions{display:flex;flex-wrap:wrap;gap:8px}
.review-actions [hidden]{display:none}
.review-actions .btn{flex:1 1 auto;padding:11px 14px;font-size:14px}
.review-msg{margin:0;font-size:13px;line-height:1.4;color:var(--pink)}
.review-msg:empty{display:none}

@media (max-width:700px),(pointer:coarse){
  body.play.reviewing{height:auto;min-height:var(--vh);overflow:visible}
  body.reviewing .game{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"bar" "board" "stats" "side"}
  .review-bar{justify-self:stretch;padding:8px}
  .review-nav{justify-content:space-between}
  .review-nav .icon-btn{width:42px;height:42px}
  .review-nav #speedBtn{margin-left:0}
  .review{justify-self:stretch;max-height:none;overflow:visible;padding:12px}
  /* A shorter review: accuracy in a line, the counts are in the slips listed. */
  .acc-line{display:block}
  .summary{display:none}
}

/* ---- Where it could have gone better ---- */
.moments{display:flex;flex-direction:column;gap:6px}
.moments h3{margin:0}
.moments ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.moments ol:empty{display:none}
.moment{
  display:block;width:100%;padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);
  font:inherit;font-size:12px;line-height:1.45;color:var(--muted);text-align:left;
}
.moment:hover{background:rgba(255,255,255,.07)}
.moment:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.moment b{font:600 12px/1.45 var(--mono);color:var(--fg)}
.moment.inaccuracy b span{color:#facc15}
.moment.mistake b span{color:#fb923c}
.moment.blunder b span{color:#fb7185}
.moments-note{margin:0;font-size:12px;line-height:1.4;color:var(--faint)}
.moments-note:empty{display:none}

/* ---- Pasting a game, and picking one from a file of several ---- */
.modal{
  position:fixed;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(8,10,18,.8);
}
.modal[hidden]{display:none}
.modal-box{display:flex;flex-direction:column;gap:10px;width:min(520px,100%);max-height:calc(100% - 8px);padding:18px;box-sizing:border-box}
.modal-box h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.modal-box label{font-size:13px;color:var(--muted)}
.modal-box textarea,.modal-box input{
  width:100%;box-sizing:border-box;padding:10px 12px;
  font:400 13px/1.45 var(--mono);color:var(--fg);
  border:1px solid var(--line);border-radius:10px;background:rgba(8,10,18,.6);
}
.modal-box textarea{resize:vertical}
.modal-box textarea:focus,.modal-box input:focus{outline:none;border-color:var(--cyan)}
.modal-msg{margin:0;font-size:13px;line-height:1.4;color:var(--pink)}
.modal-msg:empty{display:none}
.modal-actions{display:flex;flex-wrap:wrap;gap:8px}
.modal-actions .btn{flex:1 1 auto;padding:11px 14px;font-size:14px}
.pick-about{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.pick-list{
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:4px;
  min-height:0;flex:1 1 auto;overflow:auto;
}
.pick-list:empty{display:none}
.pick-game{
  display:flex;flex-direction:column;gap:2px;width:100%;padding:7px 9px;
  border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.03);
  font:inherit;color:var(--fg);text-align:left;
}
.pick-game:hover{background:rgba(255,255,255,.07)}
.pick-game:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
.pick-game b{font-size:13px;font-weight:600;line-height:1.35}
.pick-game span{font:400 11px/1.4 var(--mono);color:var(--muted)}
.pick-count{margin:0;font-size:12px;line-height:1.4;color:var(--faint)}
.pick-count:empty{display:none}

/* ---- The game as text ---- */
.text-moves{
  position:relative;
  margin:0;min-height:0;flex:1 1 auto;overflow:auto;
  font:400 14px/2 var(--mono);
}
.tmv{
  padding:2px 4px;border:0;border-radius:5px;background:none;
  font:inherit;color:var(--fg);
}
.tmv:hover{background:rgba(255,255,255,.07)}
.tmv:focus-visible{outline:2px solid var(--cyan);outline-offset:-1px}
.tmv.on{background:rgba(34,211,238,.22)}
.tmv.best .san{color:var(--cyan)}
.tmv .mark{font-weight:600}
.tmv.inaccuracy .mark{color:#facc15}
.tmv.mistake .mark{color:#fb923c}
.tmv.blunder .mark{color:#fb7185}
.text-moves .num{color:var(--muted)}
.text-moves .pair{white-space:nowrap}
.text-moves .better{font-size:12px;color:var(--muted)}
.text-moves .result{font-weight:600}
.text-msg{margin:0;font-size:13px;line-height:1.4;color:var(--muted)}
.text-msg:empty{display:none}