:root {
  --color-line: #383838;
  --color-diagram-line: #9a9a9a;
  --color-panel: #f5f5f5;
  --color-board-cell: #dedede;
  --color-board-cell-light: #f7f7f7;
  --color-board-cell-dark: #8f8f8f;
  --color-valid: seagreen;
  --color-valid-blend: rgba(46, 139, 87, 0.68);
  --color-center: #444;
  --radius-panel: 0.5rem;
}

body {
  --page-padding: clamp(0.2rem, 0.8vmin, 0.6rem);

  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  box-sizing: border-box;
  padding: var(--page-padding);
  overflow: hidden;
}

body:not(.is-game-page) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.4vmin, 1.5rem);
  overflow: auto;
}

body:not(.is-game-page) #landing {
  flex: 0 0 auto;
}

h1 {
  margin: 0;
  font-size: clamp(1.25rem, 3vmin, 2rem);
  line-height: 1.05;
}

body.is-game-page h1 {
  display: none;
}

#status {
  min-height: 1.2em;
  margin: 0;
  font-size: clamp(0.8rem, 1.7vmin, 1rem);
}

.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.25rem, 0.8vmin, 0.5rem);
  justify-content: center;
}

.status-badge {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-panel);
}

.status-badge-title,
.status-badge-value {
  padding: 0.22rem 0.5rem;
}

.status-badge-title {
  min-width: 2.8rem;
  border-right: 1px solid var(--color-line);
  background: var(--color-center);
  color: white;
  font-weight: 700;
  text-align: center;
}

.status-badge-value {
  min-width: 5rem;
  text-align: center;
}

.status-badge.is-your-turn .status-badge-value {
  background: var(--color-valid);
  color: white;
  font-weight: 700;
}

.status-badge.is-complete .status-badge-value {
  background: var(--color-center);
  color: white;
  font-weight: 700;
}

#landing {
  width: min(100%, 28rem);
}

#landing[hidden],
#game-layout[hidden] {
  display: none;
}

#mode-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.mode-button {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-line);
  background: var(--color-panel);
  color: inherit;
  font: inherit;
  font-size: clamp(1rem, 2.2vmin, 1.25rem);
  font-weight: 700;
  cursor: pointer;
}

.mode-button:hover,
.mode-button:focus-visible {
  background: #e8e8e8;
}

.mode-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

#game-layout {
  --layout-gap: clamp(0.35rem, 1vmin, 0.75rem);
  --board-size: min(calc(100vh - 15rem), calc(100vw - 18rem), 620px);
  --board-cell: calc(var(--board-size) / 5);
  --stepset-card-width: min(max(var(--board-cell), 8.5rem), calc(var(--board-size) / 2));
  --stepset-cell: calc((var(--stepset-card-width) - 1.25rem) / 5);
  --side-panel-width: max(var(--stepset-card-width), 12rem);

  display: grid;
  grid-template-columns: minmax(0, var(--side-panel-width)) var(--board-size) minmax(0, var(--side-panel-width));
  grid-template-rows: auto var(--board-size) auto;
  gap: var(--layout-gap);
  align-items: center;
  justify-items: center;
  align-content: center;
  width: min(100%, calc(var(--board-size) + (2 * var(--side-panel-width)) + (2 * var(--layout-gap))));
}

@media (min-width: 761px) and (min-height: 820px) {
  #game-layout {
    --board-size: min(58vh, calc(100vw - 18rem), 620px);
  }
}

#player-2-stepsets,
#player-1-stepsets {
  grid-column: 2;
}

#play-area {
  display: contents;
}

#board {
  grid-column: 2;
  grid-row: 2;
}

#game-info {
  grid-column: 3;
  grid-row: 2;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  gap: var(--layout-gap);
  justify-items: end;
  align-self: stretch;
  width: 100%;
}

#status {
  grid-row: 1;
  align-self: start;
  width: 100%;
}

#floating-stepset {
  grid-row: 2;
  align-self: center;
  width: 100%;
}

#board {
  --size: 5;
  --cell: var(--board-cell);

  position: relative;
  width: var(--board-size);
  aspect-ratio: 1;
}

#cells {
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  width: 100%;
  height: 100%;
}

#pieces {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cell {
  box-sizing: border-box;
  border: 1px solid var(--color-line);
  background: var(--color-board-cell);

  display: grid;
  align-items: center;
}

.cell.player-1-base {
  background: repeating-linear-gradient(45deg, var(--color-board-cell-light) 0 0.45rem, #d9d9d9 0.45rem 0.9rem);
}

.cell.player-2-base {
  background: repeating-linear-gradient(45deg, #c6c6c6 0 0.45rem, var(--color-board-cell-dark) 0.45rem 0.9rem);
}

.valid {
  background: var(--color-valid);
}

.preview {
  background: #d8b44a;
}

.cell.player-1-base.valid {
  background:
    linear-gradient(var(--color-valid-blend), var(--color-valid-blend)),
    repeating-linear-gradient(45deg, var(--color-board-cell-light) 0 0.45rem, #d9d9d9 0.45rem 0.9rem);
}

.cell.player-2-base.valid {
  background:
    linear-gradient(var(--color-valid-blend), var(--color-valid-blend)),
    repeating-linear-gradient(45deg, #c6c6c6 0 0.45rem, var(--color-board-cell-dark) 0.45rem 0.9rem);
}

.cell.player-1-base.preview {
  background:
    linear-gradient(rgba(216, 180, 74, 0.72), rgba(216, 180, 74, 0.72)),
    repeating-linear-gradient(45deg, var(--color-board-cell-light) 0 0.45rem, #d9d9d9 0.45rem 0.9rem);
}

.cell.player-2-base.preview {
  background:
    linear-gradient(rgba(216, 180, 74, 0.72), rgba(216, 180, 74, 0.72)),
    repeating-linear-gradient(45deg, #c6c6c6 0 0.45rem, var(--color-board-cell-dark) 0.45rem 0.9rem);
}

.piece {
  position: absolute;
  width: calc(var(--cell) * 0.75);
  height: calc(var(--cell) * 0.75);
  border-radius: 50%;
  transform: translate(
    calc(var(--x) * var(--cell) + var(--cell) * 0.125),
    calc(var(--y) * var(--cell) + var(--cell) * 0.125)
  );

  display: grid;
  align-items: center;

  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}

.piece.is-selected {
  outline: 3px solid var(--color-valid);
  outline-offset: 3px;
}

.piece.is-preview-selected {
  outline-color: #d8b44a;
}

.piece:focus-visible {
  outline: 3px solid dodgerblue;
  outline-offset: 3px;
}

.piece.can-preview {
  cursor: help;
}

.piece[aria-disabled="true"] {
  cursor: not-allowed;
}

.piece[data-player="1"] {
  background: white;
  border: 1px solid var(--color-line);
}

.piece[data-player="2"] {
  background: black;
  border: 1px solid var(--color-line);
}

.piece[data-kind="elite"] {
  width: calc(var(--cell) * 0.8);
  height: calc(var(--cell) * 0.8);
  border-radius: 30%;
  transform: translate(
    calc(var(--x) * var(--cell) + var(--cell) * 0.1),
    calc(var(--y) * var(--cell) + var(--cell) * 0.1)
  );
}

.stepset-row {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.25rem, 0.75vmin, 0.5rem);
  justify-content: center;
}

#floating-stepset {
  display: grid;
  justify-items: center;
}

.stepset-card h3 {
  margin: 0;
  font-size: clamp(0.78rem, 1.55vmin, 0.95rem);
  font-weight: 700;
  line-height: 1;
}

.stepset-card {
  display: grid;
  gap: clamp(0.16rem, 0.35vmin, 0.28rem);
  justify-items: center;
  width: var(--stepset-card-width);
  padding: clamp(0.32rem, 0.8vmin, 0.55rem);
  border: 1px solid var(--color-line);
  background: var(--color-panel);
}

.stepset-grid {
  display: grid;
  grid-template-columns: repeat(5, var(--stepset-cell));
  grid-template-rows: repeat(5, var(--stepset-cell));
  border: 1px solid var(--color-line);
}

.stepset-cell {
  box-sizing: border-box;
  border: 0 solid var(--color-diagram-line);
  border-right-width: 1px;
  border-bottom-width: 1px;
  background: var(--color-board-cell);
}

.stepset-cell:nth-child(5n) {
  border-right-width: 0;
}

.stepset-cell:nth-last-child(-n + 5) {
  border-bottom-width: 0;
}

.stepset-cell.is-center {
  background: var(--color-center);
}

.stepset-cell.is-step {
  background: var(--color-valid);
}

.stepset-choice,
.game-over-dialog {
  --stepset-card-width: clamp(7rem, 18vw, 9rem);
  --stepset-cell: calc((var(--stepset-card-width) - 1.25rem) / 5);

  max-width: min(32rem, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid var(--color-line);
  border-radius: 0.6rem;
}

.game-over-dialog {
  text-align: center;
}

.game-over-dialog button {
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-panel);
  background: var(--color-panel);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.stepset-choice::backdrop,
.game-over-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.stepset-choice h2,
.stepset-choice p,
.game-over-dialog h2,
.game-over-dialog p {
  margin: 0 0 0.75rem;
}

.stepset-choice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.stepset-choice button {
  font: inherit;
  cursor: pointer;
}

.stepset-choice-card-button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.65rem;
  background: transparent;
}

.stepset-choice-card-button:hover,
.stepset-choice-card-button:focus-visible {
  border-color: #111;
  outline: none;
}

.stepset-choice-card-button .stepset-card {
  pointer-events: none;
}

@media (max-width: 760px) {
  body {
    --page-padding: clamp(0.15rem, 0.8vw, 0.35rem);

    overflow: auto;
  }

  h1 {
    font-size: clamp(1.15rem, 6vw, 1.5rem);
  }

  #status {
    font-size: clamp(0.78rem, 3.4vw, 0.95rem);
  }

  #game-layout {
    --layout-gap: clamp(0.2rem, 1.2vw, 0.45rem);
    --board-size: min(96vw, 48dvh, 390px);
    --board-cell: calc(var(--board-size) / 5);
    --stepset-card-width: min(max(var(--board-cell), 5.4rem), calc((var(--board-size) - var(--layout-gap)) / 2));
    --stepset-cell: calc((var(--stepset-card-width) - 0.72rem) / 5);

    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - (2 * var(--page-padding)));
  }

  #player-2-stepsets {
    order: 1;
  }

  #play-area,
  #game-info {
    display: contents;
  }

  #board {
    order: 2;
  }

  #status {
    order: 3;
  }

  #player-1-stepsets {
    order: 4;
  }

  #floating-stepset {
    order: 5;
  }

  .status-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    justify-content: center;
  }

  .status-badge-title,
  .status-badge-value {
    padding: 0.16rem 0.36rem;
  }

  .status-badge-title {
    min-width: 2.5rem;
  }

  .status-badge-value {
    min-width: 4.2rem;
  }

  .stepset-row {
    gap: var(--layout-gap);
  }

  .stepset-card {
    padding: 0.18rem;
  }

  .stepset-card h3 {
    font-size: 0.78rem;
  }
}

@media (max-height: 760px) and (min-width: 761px) {
  #game-layout {
    --stepset-card-width: min(max(var(--board-cell), 13.5vh), calc(var(--board-size) / 2));
    --stepset-cell: calc((var(--stepset-card-width) - clamp(0.64rem, 1.6vmin, 1.1rem)) / 5);
  }
}