.game-stats-wrapper {
  display: flex;
  justify-content: space-between;
}

.timer,
.cows-remaining {
  /* border: lightgray solid 2px;
  border-radius: 10px; */

  inline-size: fit-content;

  padding-inline: 0.5em;
  padding-block: 0.25em;
}

.board {
  text-transform: uppercase;
  text-align: center;
  user-select: none;
  touch-action: none;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1.55em);
  isolation: isolate;
}

.board .row {
  display: contents;
}

.board .row .cell {
  aspect-ratio: 1;

  grid-row: var(--grid-row);
  grid-column: var(--grid-column);

  display: grid;
  place-items: center;
}

.cow-selector {
  --true-start-row: min(var(--grid-row-start), var(--grid-row-end));
  --true-end-row: max(var(--grid-row-start), var(--grid-row-end));
  --true-start-col: min(var(--grid-column-start), var(--grid-column-end));
  --true-end-col: max(var(--grid-column-start), var(--grid-column-end));

  border: solid var(--clr-muted-primary) 3px;
  border-radius: 20px;

  grid-row: var(--true-start-row) / calc(var(--true-end-row) + 1);
  grid-column: var(--true-start-col) / calc(var(--true-end-col) + 1);
}

.cow-selector.hidden {
  display: none;
}

.cow-selector.diagonal {
  --size: calc(abs(var(--grid-row-start) - var(--grid-row-end)) + 1);
  /* 1 if selection is going down and right, 0 otherwise */
  --same-sign: calc(
    (
        sign(
            sign(var(--grid-row-start) - var(--grid-row-end)) *
              sign(var(--grid-column-start) - var(--grid-column-end))
          ) +
          1
      ) /
      2
  );

  /* We want it to only have the height of one row, even though 
                we're spanning multiple when diagonal */
  height: calc(100% / var(--size));
  /* Extra length for diagonal */
  width: calc(100% * sqrt(2));

  /* Center within the cells */
  place-self: center;

  /* Rotate around the cells, using --same-sign to get the direction right */
  rotate: calc(-45deg + var(--same-sign) * 90deg);
}

.cow-selector.found {
  border-color: lightgray;
  z-index: -1;
}

.game-over .cow-selector.found {
  border-color: var(--clr-muted-primary);
}

/* TODO: Make selector flash red if wrong */

.share-button {
  --btn-clr: white;
  --btn-bg-clr: var(--clr-primary);
  inline-size: 100%;

  &.hidden {
    display: none;
  }

  svg {
    inline-size: 1.25em;
    aspect-ratio: 1;
  }

  .share-text,
  .copied-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
  }

  /* The copied text is only to be visible in the web share api failed 
  and we had to fall back to copying to the clipboard*/
  .copied-text {
    display: none;
  }

  &.copied {
    .share-text {
      display: none;
    }

    .copied-text {
      display: flex;
    }
  }
}

.game-wrapper {
  background-color: white;
  padding: 1rem;
  border-radius: 1rem;

  inline-size: fit-content;
  margin-inline: auto;
}