[data-component~="components/matches/view/tabletop"] {
  #board {
    width: 100%;
    height: 100%;
    max-width: min(100%, 80vh);
    max-height: min(100%, 80vh);
    @media ((min-width: 768px)) {
      width: 70vh;
      height: 70vh;
    }
    &.-checkered {
      --checker-dark: var(--color-teal-800);
      --checker-light: var(--color-green-800);
      tr:nth-child(odd) td:nth-child(even) {
        background: var(--checker-dark);
      }
      tr:nth-child(even) td:nth-child(odd) {
        background: var(--checker-dark);
      }
      tr:nth-child(odd) td:nth-child(odd) {
        background: var(--checker-light);
      }
      tr:nth-child(even) td:nth-child(even) {
        background: var(--checker-light);
      }
    }
    .mark {
      z-index: 2;
    }
    .piece {
      z-index: 3;
      width: 70%;
      height: 70%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      [data-component~="components/icon"] {
        display: inline-block;
        width: 100%;
        height: 100%;
        svg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .piece {
    &.-player-black {
      color: var(--color-player-black);
    }
    &.-player-white {
      color: var(--color-player-white);
    }
  }
  tr {
    display: flex;
    flex-direction: row;
  }
  td {
    position: relative;
    aspect-ratio: 1/1;
    flex-grow: 1;
    display: inline-block;
    cursor: pointer;
    &.-selected {
      box-shadow: inset 0px 0px 0rem 0.15rem var(--color-pink-400);
    }
    .cell-tile, .cell-no-tile {
      z-index: -5;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: inherit;
    }
    .cell-tile-bg {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .label {
      position: absolute;
      font-size: calc(var(--font-size-sm) / 1.1);
      line-height: 1;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      opacity: 0.5;
      font-family: var(--font-family-monospace);
      &.-top-left {
        top: 0.125rem;
        left: 0.125rem;
      }
      &.-top-right {
        top: 0.125rem;
        right: 0.125rem;
      }
      &.-bottom-left {
        bottom: 0.125rem;
        left: 0.125rem;
      }
      &.-bottom-right {
        bottom: 0.125rem;
        right: 0.125rem;
      }
      &.-player-black {
        color: var(--color-player-black);
      }
      &.-player-white {
        color: var(--color-player-white);
      }
    }
  }
  .sideline {
    display: flex;
    margin-top: 0.5rem;
    margin-bottom: auto;
    background-color: var(--color-player-bg);
    border-radius: 0.25rem;
    width: fit-content;
    padding: 0.25rem;
    .piece {
      width: 2rem;
      height: 2rem;
      position: relative;
      [data-component~="components/icon"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        svg {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}