.wrapper {
  margin: auto;
  background-color: transparent;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  width: 100dvmin;
  height: 100dvmin;
  & > * {
    background-color: transparent;
    position: relative;
  }
  & svg {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
  }
  .board {
    grid-column: 3 / 9;
    grid-row: 3 / 9;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    & > * {
      filter: inherit;
    }
    & div {
      position: relative;
    }
    & svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .boardCell {
      aspect-ratio: 1 / 1;
    }
  }
  .sidebar {
    grid-row: 2 / 11;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    & div {
      position: relative;
    }
    &.sidebarBot {
      grid-column: 1 / 3;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
    }
    &.sidebarUser {
      grid-column: 9 / 11;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
    }
    .walletId {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    .horizontalMove {
      grid-column: 1 / 3;
      grid-row: 3 / 4;
    }
    .horizontalMoveLeft {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
    .horizontalMoveRight {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }
    .safetyTile {
      grid-column: 1 / 3;
      grid-row: 4 / 6;
    }
    .safetyDigit {
      grid-column: 1 / 3;
      grid-row: 5 / 6;
    }
    .vaultTile {
      grid-column: 1 / 3;
      grid-row: 6 / 8;
    }
    .vaultOpponent {
      grid-column: 1 / 3;
      grid-row: 6 / 7;
    }
    .vaultDigit {
      grid-column: 1 / 3;
      grid-row: 7 / 8;
    }
    .handPointer {
      grid-column: 1 / 3;
      grid-row: 8 / 11;
    }
  }
  #sectHome:has(&) {
    & .navbar {
      grid-column: 1 / 11;
      grid-row: 1 / 3;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      & div {
        position: relative;
      }
      .navbarRestart {
        grid-column: 3 / 5;
        grid-row: 1 / 3;
      }
      .navbarSettings {
        grid-column: 5 / 7;
        grid-row: 1 / 3;
      }
      .navbarDatabase {
        grid-column: 7 / 9;
        grid-row: 1 / 3;
      }
    }
    & .CSSloadSpinner {
      grid-column: 3 / 9;
      grid-row: 9 / 10;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      & div {
        position: relative;
      }
      .spinner1 {
        grid-column: 1 / 2;
        grid-row: 9 / 10;
      }
      .spinner2 {
        grid-column: 2 / 3;
        grid-row: 9 / 10;
      }
      .spinner3 {
        grid-column: 3 / 4;
        grid-row: 9 / 10;
      }
      .spinner4 {
        grid-column: 4 / 5;
        grid-row: 9 / 10;
      }
      .spinner5 {
        grid-column: 5 / 6;
        grid-row: 9 / 10;
      }
      .spinner6 {
        grid-column: 6 / 7;
        grid-row: 9 / 10;
      }
    }
    & .footer {
      grid-column: 3 / 9;
      grid-row: 10 / 11;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      & div {
        position: relative;
      }
      & input[type="radio"] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        appearance: none;
        pointer-events: visible;
        cursor: pointer;
        z-index: 100;
      }
      .footerGithub {
        grid-column: 1 / 3;
        grid-row: 9 / 10;
      }
      .footerThemeLight {
        grid-column: 5 / 6;
        grid-row: 9 / 10;
      }
      .footerThemeDark {
        grid-column: 6 / 7;
        grid-row: 9 / 10;
      }
    }
  }
  #sectReplayLogger:has(&) {
    & .navbarReplayLogger {
      grid-column: 1 / 11;
      grid-row: 1 / 3;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      & div {
        position: relative;
      }
      & .navbarReturnHome {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
      }
      & .navbarUploadModal {
        grid-column: 4 / 6;
        grid-row: 1 / 3;
      }
      & .navbarReplayMoveDisplay {
        grid-column: 6 / 8;
        grid-row: 1/3;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        & .navbarReplayMoveHundreds {
          grid-column: 1 / 2;
          grid-row: 1 / 3;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
        }
        & .navbarReplayMoveTens {
          grid-column: 2 / 3;
          grid-row: 1 / 3;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
        }
        & .navbarReplayMoveOnes {
          grid-column: 3 / 4;
          grid-row: 1 / 3;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
        }
      }
      & .navbarReplayCommit {
        grid-column: 8 / 10;
        grid-row: 1 / 3;
      }
    }
    & .footerReplayLogger {
      grid-column: 3 / 9;
      grid-row: 9 / 11;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      & div {
        position: relative;
      }
      & .footerReplayBackwardFast {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      .footerReplayBackwardStep {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      .footerReplayPlayPause {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      .footerReplayForwardStep {
        grid-column: 4 / 5;
        grid-row: 1 / 3;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
      .footerReplayForwardFast {
        grid-column: 5 / 6;
        grid-row: 1 / 3;
        grid-template-columns: subgrid;
        grid-template-rows: subgrid;
      }
    }
  }
}