.game_show_title {
  position: relative;
  z-index: 100;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #17242e;
  background: linear-gradient(135deg, #354858 0%, #263746 55%, #1f2f3c 100%);
  color: #f4f7fa;
  font-family: 'Acme';
  box-shadow: 0 2px 6px rgba(10, 28, 44, 0.22);

  .inner_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    height: 48px;
    margin: 0 auto;
    padding: 6px 10px;
    box-sizing: border-box;
  }

  .game_title_identity,
  .game_title_details,
  .game_mode_indicators,
  .board_display_controls {
    display: flex;
    align-items: center;
  }

  .game_title_identity {
    flex: 1 1 auto;
    gap: 9px;
    min-width: 0;
  }

  h1.game_show {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
  }

  .the_round {
    display: inline-flex;
    flex: none;
    align-items: baseline;
    gap: 4px;
    min-height: 28px;
    padding: 0 9px;
    box-sizing: border-box;
    border: 1px solid #71818d;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #eaf0f4;
    font-size: 14px;
    line-height: 26px;
    cursor: help;

    .round_label,
    .round_limit {
      color: #bfcbd4;
      font-size: 12px;
    }

    .round_num {
      color: #fff;
      font-size: 16px;
    }

    &.final_round {
      border-color: #e68d85;
      background: rgba(232, 78, 64, 0.18);

      .round_label,
      .round_limit,
      .round_num {
        color: #ffe5e2;
      }
    }
  }

  .game_title_details {
    flex: none;
    gap: 7px;
    min-width: 0;
  }

  .game_mode_indicators,
  .board_display_controls {
    gap: 5px;
  }

  .indicator {
    display: inline-flex;
    float: none;
    flex: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Acme';
    text-align: center;
    cursor: pointer;
  }

  .tiles_remaining {
    gap: 6px;
    min-width: 48px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid #8c9aa5;
    border-radius: 8px;
    background: #f4f7fa;
    color: #34475a;
    font-size: 16px;
    line-height: 30px;
    text-decoration: none;

    .fa-layer-group {
      color: #647586;
      font-size: 13px;
    }

    .value {
      line-height: 1;
    }

    &:hover,
    &:focus-visible,
    &.selected {
      border-color: #55c5ef;
      background: #e8f7fd;
      color: #176b96;
    }

    &:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 1px;
    }
  }

  .game_mode {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border: 1px solid #71818d;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e5edf2;

    .size_24 {
      width: 20px;
      height: 20px;
      font-size: 20px;
      line-height: 20px;
    }

    &:hover,
    &:focus-visible {
      border-color: #a9b6bf;
      background: rgba(255, 255, 255, 0.14);
    }

    &:focus-visible {
      outline: 2px solid #7bccef;
      outline-offset: 1px;
    }
  }

  .connected {
    border-color: #5fd86a;
    background: rgba(20, 231, 21, 0.18);
  }

  .not_connected {
    border-color: #e97554;
    background: rgba(216, 67, 21, 0.2);
  }

  .tile_color,
  .transparent_tiles {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #91a4b3;
    border-radius: 8px;
    background-size: cover;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
    filter: grayscale(0.8) brightness(0.68);
    opacity: 0.58;
    transition: border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease, opacity 120ms ease, transform 120ms ease;

    &:hover {
      border-color: #d1dce3;
      filter: grayscale(0.45) brightness(0.86);
      opacity: 0.8;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }

    &.selected {
      border-color: #8addff;
      box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.42),
        0 0 0 2px rgba(41, 182, 246, 0.38);
      filter: none;
      opacity: 1;
    }
  }

  .tile_color {
    background: linear-gradient(
      90deg,
      var(--player-1) 0 50%,
      var(--player-2) 50% 100%
    );
  }

  .transparent_tiles {
    background: conic-gradient(
      var(--l3) 0 25%,
      var(--w3) 0 50%,
      var(--l4) 0 75%,
      var(--w2) 0 100%
    );
  }
}

@media (max-width: 620px) {
  .game_show_title {
    .inner_top {
      gap: 7px;
      padding-inline: 7px;
    }

    .game_title_identity {
      gap: 5px;
    }

    h1.game_show {
      font-size: 18px;
    }

    .the_round {
      padding-inline: 7px;

      .round_label {
        display: none;
      }
    }

    .game_title_details {
      gap: 4px;
      max-width: 62%;
      margin-block: -3px;
      padding-block: 3px;
      overflow-x: auto;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    .game_mode_indicators,
    .board_display_controls {
      gap: 3px;
    }

    .tiles_remaining {
      min-width: 42px;
      padding-inline: 7px;

      .fa-layer-group {
        display: none;
      }
    }
  }
}