/* Forks at Depth: an analyst's desk seen from straight above. The board lies edge to edge;
   a narrow score-sheet rail under it (beside it, sideways). Square corners, flat, no tilt. */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --status: var(--ac-status-h, 64px);
  --gap: 10px;
  --edge: 4px;
  --rail-min: 264px;
  --board-max: 720px;
  --board: min(
    calc(100dvw - var(--sal) - var(--sar) - 2 * var(--edge)),
    calc(100dvh - var(--status) - var(--rail-min) - var(--sab) - 3 * var(--gap)),
    var(--board-max)
  );
  --sq: calc(var(--board) / 8);
  --light: var(--ak-choice-bg);
  --dark: var(--ak-choice-border);
  --lacquer: color-mix(in srgb, var(--ak-accent) 45%, var(--ak-ink));
  --shade: color-mix(in srgb, var(--ak-ink) 30%, transparent);
  --wash-light: color-mix(in srgb, var(--ak-accent) 20%, var(--light));
  --wash-dark: color-mix(in srgb, var(--ak-accent) 34%, var(--dark));
  --slide: 240ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  overflow: hidden;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  background-color: var(--ak-bg);
  /* A quiet surround: the kit's graph rules over the desk, washed almost to plain paper so no
     stationery shows. start.js sets the desk layer when it shows a screen; a returning visit skips
     that, so the same layer is built here too. */
  --desk-wash: color-mix(in srgb, var(--ak-bg) 83%, transparent);
  --hush: color-mix(in srgb, var(--ak-bg) 94%, transparent);
  background-image:
    var(--ak-bg-art),
    linear-gradient(var(--hush), var(--hush)),
    var(--ak-backdrop-layer, linear-gradient(var(--desk-wash), var(--desk-wash)), url('./art/desk.jpg'));
  background-size: var(--ak-bg-size), cover, cover;
  background-position: center;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 2px;
}

/* ---------- the table: portrait, board above the card ---------- */

.table {
  display: grid;
  grid-template-columns: var(--board);
  grid-template-rows: var(--board) minmax(0, 1fr);
  grid-template-areas: 'board' 'rail';
  justify-content: center;
  row-gap: var(--gap);
  height: 100dvh;
  /* Swept pieces leave over the table's edge without widening the page. */
  overflow: clip;
  padding: calc(var(--status) + var(--gap)) calc(var(--sar) + var(--edge)) calc(var(--sab) + var(--gap)) calc(var(--sal) + var(--edge));
  touch-action: manipulation;
}

.board-side {
  grid-area: board;
}

.rail {
  grid-area: rail;
  display: contents;
}

/* The title heads the score sheet, at a size its lettering can be read. */
.logo {
  flex: none;
  height: 52px;
  width: auto;
  object-fit: contain;
}

.card {
  grid-area: rail;
  min-height: 0;
}

/* The tools stay put at the foot of the card; only the middle scrolls on a very short screen. */
.card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}

.tools,
.kept,
.card-head {
  flex: none;
}

/* ---------- sideways: board on the left, card on the right ---------- */

@media (orientation: landscape) {
  :root {
    --rail-w: min(440px, calc(100dvw - var(--sal) - var(--sar) - var(--board) - 3 * var(--gap)));
    --board: min(
      calc(100dvh - var(--sat) - var(--sab) - 2 * var(--edge)),
      calc(100dvw - var(--sal) - var(--sar) - 300px - 3 * var(--gap)),
      var(--board-max)
    );
    --status-left: calc((100dvw - var(--board) - var(--gap) - var(--rail-w)) / 2 + var(--board) + var(--gap));
  }

  .table {
    grid-template-columns: var(--board) var(--rail-w);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'board rail';
    column-gap: var(--gap);
    align-content: center;
    padding: calc(var(--sat) + var(--edge)) var(--sar) calc(var(--sab) + var(--edge)) var(--sal);
  }

  .board-side {
    align-self: center;
  }

  .card {
    align-self: start;
    margin-top: calc(var(--status) + 4px);
    max-height: calc(100% - var(--status) - 4px);
  }

  /* The status bar, the ending and the toast sit over the card's column, never over the board. */
  #activity-chrome-status.ac-chrome,
  #activity-chrome-ending.ac-chrome {
    left: var(--status-left);
  }
}

/* The result card covers the score sheet only: below it the tools stay in reach (game.js measures both edges). */
#activity-chrome-ending.ac-chrome {
  top: var(--ending-top, 0px);
  bottom: var(--ending-bottom, 0px);
  justify-content: safe flex-end;
}

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

.board-wrap {
  position: relative;
  width: var(--board);
  height: var(--board);
}

.board {
  position: relative;
  width: 100%;
  height: 100%;
  outline: 1px solid var(--ak-accent);
  box-shadow: 0 1px 0 var(--ak-accent), 0 10px 22px -8px var(--shade);
  background: var(--light);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.squares {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
  height: 100%;
}

.sq {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--light);
  color: var(--ak-choice-ink);
  cursor: pointer;
  touch-action: none;
}

.sq.is-dark {
  background: var(--dark);
}

.sq.is-last {
  background: var(--wash-light);
}

.sq.is-dark.is-last {
  background: var(--wash-dark);
}

.sq.is-picked {
  box-shadow: inset 0 0 0 3px var(--ak-ink);
}

.sq.is-wrong {
  box-shadow: inset 0 0 0 3px var(--ak-ink);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--ak-ink) 14%, transparent) 6px 8px);
}

.sq:focus-visible {
  z-index: 3;
  outline-offset: -3px;
}

/* Small blue dots on the legal squares; a thin ring where the move takes a piece. */
.sq.is-dot::after,
.sq.is-take::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.sq.is-dot::after {
  inset: 39%;
  border-radius: 50%;
  background: var(--ak-accent);
}

.sq.is-take::after {
  inset: 4%;
  border: 3px solid var(--ak-accent);
  border-radius: 50%;
}

.coord {
  position: absolute;
  z-index: 1;
  font-family: var(--ak-font-display);
  font-size: max(9px, calc(var(--sq) * 0.2));
  font-weight: 700;
  line-height: 1;
  color: var(--ak-ink-muted);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.sq.is-dark .coord {
  color: var(--ak-ink);
}

.coord-rank {
  top: 3px;
  left: 3px;
}

.coord-file {
  right: 3px;
  bottom: 2px;
}

/* ---------- tokens: thick discs lying flat ---------- */

.tokens {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.token {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 12.5%;
  transform: translate(calc(var(--f) * 100%), calc((7 - var(--r)) * 100%));
}

.token::before {
  content: '';
  position: absolute;
  inset: 16% 12% 6% 12%;
  border-radius: 50%;
  background: var(--shade);
  filter: blur(3px);
  transform: translateY(6%);
}

.disc {
  position: absolute;
  inset: 6%;
  display: block;
}

.disc.is-white {
  background-image: url('./art/white-pieces.png');
  background-repeat: no-repeat;
  background-size: 312.2% 216.8%;
}

.disc.is-white.k { background-position: 0% 0%; }
.disc.is-white.q { background-position: 49.8% 0%; }
.disc.is-white.r { background-position: 100% 0%; }
.disc.is-white.b { background-position: 0% 100%; }
.disc.is-white.n { background-position: 49.8% 100%; }
.disc.is-white.p { background-position: 100% 100%; }

.disc svg {
  display: block;
  width: 100%;
  height: 100%;
}

.disc .lacquer { fill: var(--lacquer); stroke: var(--ak-ink); stroke-width: 2; }
.disc .rim { fill: none; stroke: var(--ak-surface); stroke-width: 3; }
.disc .inlay { fill: var(--ak-surface); }
.disc .cut { fill: none; stroke: var(--lacquer); stroke-width: 4; stroke-linecap: round; }

.token.is-dragging {
  z-index: 6;
}

.token.is-dragging .disc {
  transform: scale(1.08);
}

.token.is-dragging::before {
  transform: translate(4%, 16%) scale(1.08);
  opacity: 0.7;
}

.token.is-gone {
  opacity: 0;
}

/* A taken piece is lifted off and set aside before the capturer settles. */
.token.is-taken {
  z-index: 3;
  opacity: 0;
}

.taken-tray .chip.is-forked {
  outline: 2px solid var(--ak-accent-2);
  outline-offset: 2px;
  border-radius: 50%;
}

/* ---------- red pen, guide ink and the promotion picker ---------- */

.marks {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pen {
  fill: none;
  stroke: var(--ak-accent-2);
  stroke-width: 0.07;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pen-head {
  fill: var(--ak-accent-2);
}

.fork-ring {
  fill: none;
  stroke: var(--ak-accent-2);
  stroke-width: 0.06;
}

.guide-ring {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 0.09;
}

.guide-arrow {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 0.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chosen-ring {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 0.06;
  stroke-dasharray: 0.12 0.08;
}

.board.is-pencil {
  cursor: crosshair;
}

.board.is-pencil .sq {
  cursor: crosshair;
}

.promo {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  grid-template-columns: repeat(4, minmax(48px, var(--sq)));
  gap: 0;
  padding: 8px;
  background: var(--ak-bg);
  border: 1px solid var(--ak-ink);
  border-bottom-width: 4px;
  box-shadow: 0 10px 22px -8px var(--shade);
}

.promo[hidden] {
  display: none;
}

.promo-title {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.promo-pick {
  position: relative;
  min-height: 48px;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--ak-outline);
  background: var(--ak-surface);
  cursor: pointer;
}

.promo-pick .disc {
  inset: 8%;
}

.promo-close {
  grid-column: 1 / -1;
  min-height: 48px;
  margin-top: 6px;
  border: 1px solid var(--ak-ink);
  border-radius: 0;
  background: var(--ak-bg);
  cursor: pointer;
}

/* ---------- the rail: a plain score sheet ---------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
  background: var(--ak-bg);
  border: 1px solid var(--ak-outline);
  border-bottom: 4px solid var(--ak-ink);
  font-variant-numeric: tabular-nums;
}

@media (orientation: landscape) and (min-height: 600px) {
  .logo {
    height: 72px;
  }
}

.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ak-outline);
}

.head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.aims {
  margin: 2px 0 0;
  font-family: var(--ak-font-display);
  font-size: 13px;
  color: var(--ak-ink-muted);
}

.turn[hidden] {
  display: none;
}

.theme {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: var(--ak-title-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.clock {
  flex: none;
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--ak-ink);
}

.turn {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}

.turn .who {
  font-weight: 700;
}

.thinking::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
}

.note {
  margin: 0;
  padding: 8px 10px;
  border-left: 4px solid var(--ak-ink);
  background: var(--ak-surface);
  font-size: 15px;
  line-height: 1.4;
}

.note[hidden] {
  display: none;
}

.note.is-guide {
  border-left-color: var(--ak-accent);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.note.is-idea {
  font-weight: 600;
}

.sheet {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ak-font-display);
  font-size: 18px;
}

.sheet th {
  padding: 0 6px 2px;
  border-bottom: 2px solid var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.sheet td {
  height: 28px;
  padding: 0 6px;
  border-bottom: 1px solid var(--ak-outline);
}

.sheet td.num {
  width: 2.5em;
  color: var(--ak-ink-muted);
  text-align: right;
}

.sheet td.key {
  font-weight: 800;
}

.taken {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.taken[hidden] {
  display: none;
}

.taken-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

.taken-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 13px;
  color: var(--ak-ink-muted);
}

.taken-tray .chip {
  position: relative;
  width: 28px;
  height: 28px;
}

.taken-tray .chip .disc {
  inset: 0;
}

.tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--ak-ink);
}

.tool {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--ak-outline);
  border-radius: 0;
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.tool:last-child {
  border-right: 0;
}

/* On a narrow phone the words carry the buttons, so the row stays one row. */
@media (max-width: 439px) {
  .tool {
    padding: 0 6px;
    font-size: 14px;
  }

  .tool svg {
    display: none;
  }
}

.tool[hidden] {
  display: none;
}

.tool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool[aria-pressed='true'] {
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
}

.tool.is-primary {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

.tool:disabled {
  color: var(--ak-ink-muted);
  cursor: default;
}

.kept {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ak-ink-muted);
}

.kept.is-error {
  color: var(--ak-ink);
  font-weight: 600;
}

/* ---------- motion, only when it is welcome ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .token {
    transition: transform var(--slide) cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease-out;
  }

  :root:not(.ac-still) .token.is-dragging {
    transition: none;
  }

  :root:not(.ac-still) .token.is-settling::before {
    animation: shadow-dip 260ms ease-out;
  }

  :root:not(.ac-still) .token.is-settling .disc {
    animation: disc-dip 260ms ease-out;
  }

  :root:not(.ac-still) .token.is-taken {
    opacity: 1;
    animation: lift-off 240ms ease-in forwards;
  }

  :root:not(.ac-still) .taken-tray .chip.is-forked {
    animation: chip-pulse 600ms ease-out both;
  }

  @keyframes lift-off {
    0% { opacity: 1; }
    40% { opacity: 1; filter: drop-shadow(0 6px 4px var(--shade)); }
    100% { opacity: 0; filter: none; scale: 0.55; }
  }

  @keyframes chip-pulse {
    0% { outline-offset: 8px; outline-color: transparent; }
    40% { outline-offset: 1px; }
    100% { outline-offset: 2px; }
  }

  :root:not(.ac-still) .token.is-swept {
    transition: transform 520ms cubic-bezier(0.55, 0, 0.45, 1), opacity 520ms ease-in;
  }

  :root:not(.ac-still) .fork-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: fork-pulse 600ms ease-out both;
  }

  :root:not(.ac-still) .guide-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: guide-pulse 1400ms ease-in-out infinite;
  }

  :root:not(.ac-still) .chosen-ring {
    animation: chosen-fade 900ms ease-out both;
  }

  :root:not(.ac-still) .thinking::after {
    animation: dots 900ms steps(4, end) infinite;
  }

  @keyframes shadow-dip {
    0% { transform: translate(4%, 16%) scale(1.08); opacity: 0.6; }
    100% { transform: translateY(6%); opacity: 1; }
  }

  @keyframes disc-dip {
    0% { transform: scale(1.06); }
    60% { transform: scale(0.98); }
    100% { transform: scale(1); }
  }

  @keyframes fork-pulse {
    0% { transform: scale(0.6); opacity: 0; }
    40% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  @keyframes guide-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.55; }
  }

  @keyframes chosen-fade {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
  }
}

/* Sideways the card has the height to spare for a larger score sheet. */
@media (orientation: landscape) {
  .turn {
    font-size: 16px;
  }
}