#user_nav {
  position: sticky;
  top: 0;
  flex: none;
  width: 100%;
  margin-left: 0;
  z-index: 1000;
  height: 50px;
  box-sizing: border-box;
  overflow: visible;
  border-bottom: 1px solid #415563;
  background: linear-gradient(105deg, #263746 0%, #1f303d 100%);
  box-shadow: 0 2px 5px rgba(10, 28, 44, 0.18);

  .user_nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 6px;
    box-sizing: border-box;

    .left {
      .game_title_icon {
        flex: none;
        width: 38px;
        height: 38px;
        object-fit: contain;
      }

      .game_title_text {
        color: #f4f8fb;
        font-size: 21px;
      }
    }

    .right {
      min-width: 0;

      .top_nav > a:first-child:not(.selected) {
        border-color: #3ebbea;
        background: #29b6f6;
        color: #102f40;

        &:hover,
        &:focus-visible {
          border-color: #76d2f7;
          background: #56c6f7;
          color: #102f40;
        }
      }

      .top_nav > a.selected {
        border-color: #95a8b6;
        background: #f4f7fa;
        color: #263746;
      }
    }

    .games_nav {
      .title {
        margin-right: 0;
      }

      .next_game_link {
        min-width: 0;
      }
    }

    .games_nav, #online_friends_hover {
      height: 100%;
      min-width: 0;
    }

    .left, .right {
      display: flex;
      align-items: center;
      height: 100%;

      .top_nav > a, .games_nav > a, #online_friends_hover > a, .game_title {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 42px;
        margin: 4px 0;
        padding: 0 13px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #dce6ec;
        font-family: 'Acme';
        font-size: 17px;
        line-height: 1;
        transition: background 120ms ease, border-color 120ms ease, color 120ms ease;

        &:hover,
        &:focus-visible {
          border-color: #617684;
          background: rgba(255, 255, 255, 0.1);
          color: #fff;
        }

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

        .nav_item_icon {
          color: #9dcfe5;
          font-size: 16px;
        }
      }
    }

    .notification {
      position: relative;
      display: inline-flex;
      flex: none;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      margin: 0;
      box-sizing: border-box;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 999px;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: 700;
      line-height: 20px;
      white-space: nowrap;
    }

    #nav_list, .online_friends_list {
      display: none;
      flex-direction: column;
      position: absolute;
      right: 6px;
      top: 50px;
      z-index: 1001;
      width: calc(100% - 12px);
      max-height: 325px;
      overflow-y: auto;
      margin: 0;
      box-sizing: border-box;
      border: 1px solid #c8d3dc;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(19, 38, 55, 0.24);

      .line_item {
        background: #fff;

        &:hover {
          background: #f0f7fb;
        }

        &:active {
          background: white;
        }
      }
    }

    .top_nav {
      display: flex;
      align-items: center;
      gap: 3px;
      min-width: 0;
      height: 100%;
    }

    #more_links {
      height: 100%;
      display: flex;
      align-items: center;

      &:hover {
        .icon_hamburger {
          background: #fff;
        }
      }

      #more_links_link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 4px 0;
        padding: 0;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 8px;

        &.active {
          border-color: #7d909e;
          background: rgba(255, 255, 255, 0.14);

          .icon_hamburger {
            background: #fff;
          }
        }

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

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

        .icon_hamburger {
          background: #dce6ec;
          transform: scale(0.82);
        }
      }

      .more_links_list {
        display: none;
        position: absolute;
        right: 6px;
        top: 54px;
        width: 226px;
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        box-sizing: border-box;
        margin: 0;
        padding: 6px;
        border: 1px solid #c8d3dc;
        border-radius: 11px;
        background: #f8fafc;
        box-shadow: 0 10px 28px rgba(19, 38, 55, 0.24);
        list-style: none;
        font-family: 'Acme';
        font-size: 17px;

        .title {
          margin-left: 0;
        }

        li + li {
          margin-top: 2px;
        }

        li > a {
          display: flex;
          align-items: center;
          gap: 10px;
          min-height: 44px;
          padding: 6px 10px;
          box-sizing: border-box;
          border: 1px solid transparent;
          border-radius: 7px;
          color: #34475a;

          i {
            display: inline-flex;
            flex: 0 0 32px;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 7px;
            background: #e7edf2;
            color: inherit;
            font-size: 16px;
          }

          &:hover,
          &:focus-visible {
            border-color: #c8d3dc;
            background: #fff;
            color: #263746;
          }

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

@media (max-width: 620px) {
  #user_nav .user_nav {
    gap: 4px;
    padding-inline: 4px;

    .left .game_title_text {
      display: none;
    }

    .left, .right {
      .top_nav > a,
      .games_nav > a,
      #online_friends_hover > a,
      .game_title {
        padding-inline: 8px;
      }
    }

    .top_nav {
      gap: 2px;
    }

    .notification {
      min-width: 20px;
      height: 20px;
      padding-inline: 6px;
      font-size: 11px;
      line-height: 18px;
    }
  }
}

@media (max-width: 460px) {
  #user_nav .user_nav {
    .nav_online_label {
      display: none;
    }

    .left, .right {
      .top_nav > a,
      .games_nav > a,
      #online_friends_hover > a,
      .game_title {
        gap: 4px;
        padding-inline: 6px;
      }
    }

    #more_links #more_links_link {
      width: 40px;
    }
  }
}