.player_info {
  display: flex;
  flex: none;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  gap: 1px;
  background: #cbd5df;
  color: #222;
  font-family: 'Acme';
  box-shadow: none;

  .player_score {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 70px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(110deg, #f7fbfd 0%, #eef5f8 100%);

    &.player_1 {
      --player-accent: var(--player-1);
      --player-soft: #e8f7fd;
      --player-border: #5f7887;
      --player-border-strong: #435e6d;
      background: var(--player-1) url("/assets/bar-c5b99f4b.png") center repeat-x;
    }

    &.player_2 {
      --player-accent: var(--player-2);
      --player-soft: #fcecea;
      --player-border: #a2635c;
      --player-border-strong: #824941;
      background: var(--player-2) url("/assets/bar-c5b99f4b.png") center repeat-x;
    }

    .player_avatar {
      position: relative;
      flex: 0 0 70px;
      width: 70px;
      height: 70px;
      overflow: hidden;
      box-sizing: border-box;
      border-right: 2px solid var(--player-border-strong, #52616d);
      background: var(--player-soft, #eef3f6);

      .avatar {
        display: block;
        float: none;
      }
    }

    .player_content {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-width: 0;
      height: 70px;
      color: #263746;
    }

    .top_row,
    .score_row {
      display: flex;
      flex: 1 1 50%;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

    .top_row {
      overflow: hidden;
      border-bottom: 1px solid var(--player-border, #71818d);

      .player_identity {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        min-width: 0;
        height: 100%;
        padding-left: 9px;
        box-sizing: border-box;
      }

      .username {
        display: block;
        min-width: 0;
        height: 27px;
        overflow: hidden;
        box-sizing: border-box;
        padding: 0 9px;
        border: 1px solid var(--player-border, #6f7f8b);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.68);
        color: #263746;
        font-size: 1.45em;
        line-height: 25px;
        text-overflow: ellipsis;
        transition: background 120ms ease, border-color 120ms ease;
      }

      a.username:hover,
      .chain:hover,
      .rank:hover {
        color: #263746;
        background: #fff;
        border-color: var(--player-border-strong, #52616d);
      }

      .my_turn {
        color: #263746;
        background: #fff;
        box-shadow: none;
      }

      .add_friend {
        display: inline-flex;
        flex: none;
        align-items: center;
        margin-left: 0;
        color: cyan;
        font-size: 20px;
        line-height: 1;
        text-shadow: none;

        &:hover {
          color: white;
        }

        &:active {
          text-shadow: none;
        }
      }

      .chain {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 10px;
        margin: 0 6px 0 2px;
        padding: 4px 7px;
        border: 1px solid var(--player-border, #6f7f8b);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.62);
        font-size: 1.15em;
        line-height: 1;

        .value {
          position: static;
        }

        .fa-chain {
          color: var(--player-border-strong, #435e6d);
          text-shadow: none;

          &.breaking {
            color: #a52f27;
          }
        }
      }

      .rank {
        flex: none;
        margin: 0 10px 0 6px;
        padding: 4px 8px;
        border: 1px solid var(--player-border, #6f7f8b);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.62);
        font-size: 1.35em;
        line-height: 1;
        cursor: pointer;
      }
    }

    .score_row {
      overflow: hidden;
      background: rgba(255, 255, 255, 0.2);
    }

    .total_difference {
      display: flex;
      flex: none;
      align-items: center;
      gap: 6px;
      height: 100%;
      margin-left: 9px;

      .total_points {
        display: inline-flex;
        align-items: center;
        height: 27px;
        margin: 0;
        padding: 0 9px;
        border: 1px solid var(--player-border, #6f7f8b);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.75);
        color: #263746;
        font-size: 1.55em;
        line-height: 1;
        cursor: pointer;

        &:hover {
          border-color: var(--player-border-strong, #52616d);
          background: #fff;
          color: #263746;
        }
      }

      .difference {
        position: static;
        display: inline-flex;
        align-items: center;
        gap: 2px;
        overflow: visible;
        font-size: 1em;
        line-height: 1;

        &:hover {
          color: #fff;
        }
      }
    }

    .points_breakdown {
      display: flex;
      flex: 1 1 auto;
      align-self: stretch;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
      height: auto;
      padding-right: 8px;
      box-sizing: border-box;

      .points_bar {
        display: flex;
        flex-direction: row-reverse;
        width: auto;
        height: 28px;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--player-border, #6f7f8b);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: none;

        .point {
          display: flex;
          flex: 0 0 auto;
          float: none;
          align-items: center;
          justify-content: center;
          gap: 4px;
          box-sizing: border-box;
          width: auto;
          padding-inline: clamp(7px, 1vw, 10px);
          height: 100%;
          border-right: 1px solid #b3bdc5;
          line-height: 1;

          .value {
            margin-top: 0;
          }
        }

        .bp {
          background: #f2e4f5;
          color: #792a87;
        }

        .tp {
          background: #eef2f5;
          color: #34475a;
        }

        .trp.player_1 {
          background: #dff3fc;
          color: #176b96;
        }

        .trp.player_2 {
          background: #fae2df;
          color: #a63329;
        }

        .dp {
          background: #fbe3e3;
          color: #a92525;
        }
      }
    }

    .golden {
      color: #f7fbff;
      text-shadow: none;
    }
  }

  .winner .total_points {
    border-color: #d2b633;
    background: #fff8cf;
    color: #594d00;
  }
}

@media (max-width: 520px) {
  .player_info .player_score {
    .top_row {
      .player_identity {
        padding-left: 7px;
      }

      .username {
        font-size: 1.25em;
      }

      .chain {
        margin-right: 4px;
        padding-inline: 5px;
        font-size: 1em;
      }

      .rank {
        margin-right: 7px;
        padding-inline: 6px;
        font-size: 1.15em;
      }
    }

    .total_difference {
      gap: 4px;
      margin-left: 7px;

      .total_points {
        font-size: 1.4em;
      }
    }

    .points_breakdown {
      padding-right: 5px;
    }
  }
}