/* Game viewer: board, controls and move list. See game_viewer_controller.js */

.game-viewer {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 34rem) minmax(16rem, 1fr);
  align-items: start;

  @media (max-width: 52rem) { grid-template-columns: minmax(0, 1fr); }
}

.game-viewer__board-column { display: grid; gap: 0.75rem; }
.game-viewer__controls { display: flex; gap: 0.5rem; justify-content: center; }

.game-viewer__notation {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 34rem;
  overflow: hidden;
}

.game-viewer__comment {
  background: var(--color-accent-soft);
  font-size: 1.05rem;
  margin: 0;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;

  &:empty { display: none; }
}

.board {
  --light: #f0e3c4;
  --dark: #b4875c;

  aspect-ratio: 1;
  border: 6px solid #5c3d24;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  position: relative;
  user-select: none;
  width: 100%;
}

.board__square {
  display: grid;
  font-size: 10cqi;
  line-height: 1;
  place-items: center;
}

.board__square--light { background: var(--light); }
.board__square--dark { background: var(--dark); }
.board__square--last-move { box-shadow: inset 0 0 0 100cqi rgb(255 214 0 / 0.38); }
.board__square--check { background: radial-gradient(circle, #ff3b30 0%, rgb(255 59 48 / 0.35) 55%, transparent 75%); }
.board__square--green { box-shadow: inset 0 0 0 100cqi rgb(22 163 74 / 0.5); }
.board__square--red { box-shadow: inset 0 0 0 100cqi rgb(220 38 38 / 0.5); }
.board__square--yellow { box-shadow: inset 0 0 0 100cqi rgb(234 179 8 / 0.55); }
.board__square--blue { box-shadow: inset 0 0 0 100cqi rgb(37 99 235 / 0.5); }

.board__piece--white { color: #fff; -webkit-text-stroke: 1.5px #222; paint-order: stroke fill; }
.board__piece--black { color: #1a1a1a; }

.board__arrows {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.board__arrow { stroke-linecap: round; stroke-width: 0.16; opacity: 0.8; }
.board__arrow--green { stroke: #15803d; fill: #15803d; }
.board__arrow--red { stroke: #dc2626; fill: #dc2626; }
.board__arrow--yellow { stroke: #ca8a04; fill: #ca8a04; }
.board__arrow--blue { stroke: #2563eb; fill: #2563eb; }

.moves {
  line-height: 2;
  overflow-y: auto;
  padding: 0.75rem 1rem;
}

.moves__number { color: var(--color-ink-muted); font-size: 0.9em; margin-inline-start: 0.35em; }

.moves__move {
  background: none;
  border: 0;
  border-radius: 0.3rem;
  color: var(--color-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.05em 0.3em;

  &:hover { background: var(--color-accent-soft); }
}

.moves__move--current { background: var(--color-accent); color: white; }
.moves__move--current:hover { background: var(--color-accent-strong); }

.moves__comment { color: var(--color-accent-strong); font-style: italic; margin-inline: 0.3em; }

.moves__variation {
  color: var(--color-ink-muted);

  .moves__move { color: var(--color-ink-muted); font-weight: 500; }
  .moves__move--current { color: white; }
  &::before { content: "("; }
  &::after { content: ")"; }
}

/* Variations from the main line start on their own indented row. */
.moves__line > .moves__variation {
  border-inline-start: 3px solid var(--color-border);
  display: block;
  margin-block: 0.2rem;
  padding-inline-start: 0.6rem;
  &::before, &::after { content: none; }
}

/* Puzzle player */

.puzzle-player {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 34rem) minmax(16rem, 1fr);

  @media (max-width: 52rem) { grid-template-columns: minmax(0, 1fr); }
}

.board--interactive { touch-action: none; }
.board--interactive .board__square { cursor: pointer; }
.board--interactive .board__square--movable { cursor: grab; }
.board--interactive:active .board__square--movable { cursor: grabbing; }

.board__ghost {
  display: grid;
  font-size: 10cqi;
  height: 12.5%;
  line-height: 1;
  place-items: center;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%) scale(1.15);
  width: 12.5%;
  z-index: 2;
}

.board__square--dragging { color: transparent !important; -webkit-text-stroke-color: transparent !important; }
.board--finished { opacity: 0.85; }
.board--finished .board__square { cursor: default; }

.board__square--selected { box-shadow: inset 0 0 0 100cqi rgb(22 121 76 / 0.45); }
.board__square--target { background-image: radial-gradient(circle, rgb(22 121 76 / 0.55) 0 16%, transparent 17%); }
.board__square--target.board__piece--white,
.board__square--target.board__piece--black { background-image: radial-gradient(circle, transparent 0 62%, rgb(22 121 76 / 0.55) 63%); }

.puzzle-player__feedback {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
}

.puzzle-player__status {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;

  &[data-state="correct"], &[data-state="solved"] { color: var(--color-accent-strong); }
  &[data-state="wrong"], &[data-state="wrongTry"] { color: var(--color-danger); }
  &[data-state="whatIf"] { color: var(--color-warning); }
}

.puzzle-player__comment {
  color: var(--color-ink-muted);
  font-style: italic;
  margin: 0;

  &:empty { display: none; }
}