dialog::backdrop {
  background-color: transparent;
  backdrop-filter: blur(0.5rem);
}
dialog {
  & .containerConfirmCancel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 80dvmin;
    height: 80dvmin;
    align-items: center;
    justify-content: center;
    background-color: light-dark(
      var(--light-tile-color1),
      var(--dark-tile-color1)
    );
    container-type: inline-size;
    container-name: textFitter;
    & svg {
      opacity: 1;
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    & .containerConfirmCancelCaption {
      grid-row: 1 / 2;
      grid-column: 1 / 3;
      text-align: center;
      overflow: scroll;
      font-size: clamp(0.7rem, 5cqmin, 1.5rem);
    }
    & .containerConfirmUI {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: subgrid;
      align-items: center;
      justify-content: center;
      & .iconConfirm {
        grid-row: 1 / 1;
        grid-column: 1 / 1;
      }
    }
    & .containerConfirmCancelUI {
      grid-row: 2 / 3;
      grid-column: 1 / 3;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      align-items: center;
      justify-content: center;
      & .iconConfirm {
        grid-row: 1 / 1;
        grid-column: 1 / 2;
      }
      & .iconCancel {
        grid-row: 1 / 1;
        grid-column: 2 / 3;
      }
    }
  }
  #sectReplayLogger:has(&) {
    /* 
    The scroll container for navigating game history. 
  */
    & main {
      width: 80dvmin;
      height: 80dvmin;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      overflow: auto;
      scroll-snap-type: y mandatory;
      overscroll-behavior-x: none;
      overscroll-behavior-y: none;
      /* The current snapped scroll item containing game history info for selection. */
      & .panelGameId {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: repeat(8, 1fr);
        scroll-snap-align: center;
        width: inherit;
        height: inherit;
        container-type: inline-size;
        container-name: textFitter;
        & svg {
          opacity: 1;
          position: relative;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        & .subgridUiIcons {
          grid-row: 1 / 3;
          grid-column: 1 / 3;
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr;
          align-items: center;
          justify-content: center;
          background-color: light-dark(
            var(--light-bg-color),
            var(--dark-bg-color)
          );
          & .iconConfirm {
            grid-column: 1 / 2;
            grid-row: 1 / 1;
          }
          & .iconCancel {
            grid-column: 2 / 3;
            grid-row: 1 / 1;
          }
        }
        & .subgridHeader {
          grid-row: 3 / 5;
          grid-column: 1 / 3;
          display: grid;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-weight: bold;
          font-size: clamp(0.5rem, 4cqmin, 1.5rem);
          overflow: scroll;
          background-color: light-dark(
            var(--light-bg-color),
            var(--dark-bg-color)
          );
        }
        & .subgridGameIdItems {
          display: grid;
          grid-row: 5 / 9;
          grid-column: 1 / 3;
          grid-template-columns: subgrid;
          grid-template-rows: subgrid;
          align-items: center;
          justify-content: center;
          gap: 0.5cqmin;
          padding: 0.5cqmin;
          & > div {
            display: grid;
            width: 100%;
            height: 100%;
            align-items: center;
            background-color: light-dark(
              var(--light-tile-color1),
              var(--dark-tile-color1)
            );
            font-size: clamp(0.5rem, 4cqmin, 1.5rem);
          }
          & div:nth-child(even) {
            background-color: light-dark(
              var(--light-tile-color2),
              var(--dark-tile-color2)
            );
          }
        }
      }
    }
  }
}