#game-selection {
  min-height: 100vh;
  background: #071522;
  color: #ffffff; }
  #game-selection .game-character-selection-card {
    display: flex;
    flex-direction: row;
    align-items: start;
    padding: 0;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease; }
    #game-selection .game-character-selection-card:hover, #game-selection .game-character-selection-card:focus-visible {
      transform: translateY(-4px);
      outline: none;
      box-shadow: 0 0 0 1px rgba(220, 245, 255, 0.5) inset, 0 0 30px rgba(80, 210, 245, 0.35), 0 18px 60px rgba(0, 0, 0, 0.35); }
    #game-selection .game-character-selection-card > img {
      flex: 0 0 110px;
      width: 110px;
      height: 110px;
      margin: 16px;
      border-radius: 3px;
      object-fit: cover; }
  #game-selection .game-character-selection-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 20px 16px 0; }
    #game-selection .game-character-selection-card__body h2 {
      margin-top: 0;
      color: #77d9ff;
      font-size: 25rem; }
    #game-selection .game-character-selection-card__body p {
      margin: 0 0 8px;
      font-size: 16rem; }
  #game-selection .game-character-details {
    margin-top: 0;
    max-height: calc(100vh - 300px);
    overflow: auto; }
  #game-selection .game-character-views {
    position: relative; }
  #game-selection .game-character-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 48%);
    gap: 30px;
    padding: 0; }
  #game-selection .game-character-detail__copy h1 {
    margin-top: 0;
    color: #77d9ff;
    font-size: 32rem; }
  #game-selection .game-character-detail__copy form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px; }
  #game-selection .game-character-detail__description {
    color: #ffffff;
    font-size: 16rem;
    line-height: 1.5; }
  #game-selection .game-character-detail__media {
    display: flex;
    justify-content: flex-end;
    min-width: 0; }
  #game-selection .game-character-detail__main-image {
    width: 100%;
    max-height: 100%;
    border-radius: 8px;
    object-fit: cover; }
  #game-selection .game-character-detail__portrait {
    display: none; }
  #game-selection .game-character-selection-card__description {
    margin: 12px 0 20px;
    color: #ffffff;
    font-size: 16rem;
    line-height: 1.5; }

.panel-box {
  background: linear-gradient(128deg, rgba(150, 190, 235, 0.1) 0%, rgba(120, 130, 210, 0.05) 42%, rgba(160, 120, 220, 0.09) 100%), rgba(5, 27, 46, 0.7);
  border: 1.5px solid #7dd6f58c;
  border-radius: 8px;
  color: #7dd6f5;
  box-shadow: #5abeeb2e 0px 0px 14px, #5abeeb14 0px 0px 18px inset;
  backdrop-filter: blur(4px);
  padding: 10px; }

.panel-box-hover {
  transition: 0.3s; }
  .panel-box-hover:hover {
    border-color: #aee6fa !important;
    box-shadow: #7dd6f559 0px 0px 20px, #7dd6f51f 0px 0px 22px inset !important; }

.game-character-panel {
  width: 100%;
  margin-top: 30px; }
  .game-character-panel .wrapper {
    display: flex;
    gap: 12px; }
  .game-character-panel .character-panel {
    display: flex;
    align-items: flex-end;
    gap: 12px; }
    .game-character-panel .character-panel .character-attribute-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 84px; }
      .game-character-panel .character-panel .character-attribute-skills .character-attribute {
        min-width: 38px;
        width: 38px;
        height: 38px;
        outline: none !important; }
        .game-character-panel .character-panel .character-attribute-skills .character-attribute:hover .dots {
          transform: scale(1); }
          .game-character-panel .character-panel .character-attribute-skills .character-attribute:hover .dots span {
            background-color: #fff; }
        .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots {
          position: relative;
          width: 100%;
          height: 100%;
          transition: 0.3s;
          transform: scale(0.8); }
          .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 5px;
            height: 5px;
            background-color: #7dd6f5;
            border-radius: 50%;
            transition: 0.3s; }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(1) {
              transform: rotate(0deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(2) {
              transform: rotate(60deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(3) {
              transform: rotate(120deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(4) {
              transform: rotate(180deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(5) {
              transform: rotate(240deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(6) {
              transform: rotate(300deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(7) {
              transform: rotate(360deg) translateY(-10px); }
            .game-character-panel .character-panel .character-attribute-skills .character-attribute .dots span:nth-child(8) {
              transform: rotate(420deg) translateY(-10px); }
      .game-character-panel .character-panel .character-attribute-skills .character-skills {
        min-width: 38px;
        width: 38px;
        height: 38px;
        padding: 6px;
        outline: none !important; }
        .game-character-panel .character-panel .character-attribute-skills .character-skills:hover svg {
          color: #fff;
          transform: scale(1); }
        .game-character-panel .character-panel .character-attribute-skills .character-skills svg {
          transform: scale(0.8);
          width: 100%;
          height: 100%;
          transition: 0.3s; }
      .game-character-panel .character-panel .character-attribute-skills .character-profile {
        background-image: url("/img/character.svg");
        background-size: 42px;
        background-repeat: no-repeat;
        background-position: center;
        min-width: 84px;
        width: 84px;
        height: 84px;
        display: flex;
        justify-content: center;
        align-items: center;
        outline: none !important;
        padding: 0;
        overflow: hidden; }
        .game-character-panel .character-panel .character-attribute-skills .character-profile:hover .character-default-image {
          transform: scale(1.2);
          color: #fff; }
        .game-character-panel .character-panel .character-attribute-skills .character-profile:hover .image {
          transform: scale(1.2); }
        .game-character-panel .character-panel .character-attribute-skills .character-profile .character-default-image {
          width: 42px;
          height: 42px;
          color: #7dd6f5;
          transition: 0.3s; }
        .game-character-panel .character-panel .character-attribute-skills .character-profile .image {
          width: 100%;
          height: 100%;
          transition: 0.3s; }
          .game-character-panel .character-panel .character-attribute-skills .character-profile .image img {
            width: 100%;
            height: 100%; }
    .game-character-panel .character-panel .character-life {
      width: 250px;
      outline: none !important; }
      .game-character-panel .character-panel .character-life .life-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px; }
        .game-character-panel .character-panel .character-life .life-label .label-name img {
          width: 14px;
          height: 14px; }
        .game-character-panel .character-panel .character-life .life-label .label-name span {
          font-size: 11px;
          letter-spacing: 2px;
          font-weight: 600;
          text-transform: uppercase; }
        .game-character-panel .character-panel .character-life .life-label .label-values {
          font-size: 14px;
          font-weight: 700;
          color: #fff; }
      .game-character-panel .character-panel .character-life .life-bar {
        height: 10px;
        border: 1px solid #7dd6f573;
        border-radius: 6px;
        overflow: hidden;
        background: #00000069; }
        .game-character-panel .character-panel .character-life .life-bar .current-life-bar {
          height: 100%;
          background: linear-gradient(90deg, #3fa9d9, #7dd6f5);
          box-shadow: #7dd6f599 0px 0px 10px;
          border-radius: 5px;
          transition: width 0.4s; }
  .game-character-panel .equipment-panel {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    margin-right: 360px; }
    .game-character-panel .equipment-panel .equipment-panel-inner {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 14px 18px; }
    .game-character-panel .equipment-panel .character-equipment {
      display: flex;
      align-items: flex-end;
      gap: 18px; }
      .game-character-panel .equipment-panel .character-equipment .character-equipment-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; }
        .game-character-panel .equipment-panel .character-equipment .character-equipment-group.character-equipment-weapons .items {
          display: flex; }
          .game-character-panel .equipment-panel .character-equipment .character-equipment-group.character-equipment-weapons .items .one-item:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0; }
          .game-character-panel .equipment-panel .character-equipment .character-equipment-group.character-equipment-weapons .items .one-item:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            border-left: none; }
        .game-character-panel .equipment-panel .character-equipment .character-equipment-group .label {
          font-size: 11px;
          letter-spacing: 2px;
          font-weight: 600;
          text-transform: uppercase;
          text-align: center; }
        .game-character-panel .equipment-panel .character-equipment .character-equipment-group .items .one-item {
          width: 62px;
          height: 62px;
          background: #0e243ce6; }
          .game-character-panel .equipment-panel .character-equipment .character-equipment-group .items .one-item:hover .default-item {
            transform: scale(1.2); }
          .game-character-panel .equipment-panel .character-equipment .character-equipment-group .items .one-item .default-item {
            transition: 0.3s; }
      .game-character-panel .equipment-panel .character-equipment .line {
        height: 62px;
        width: 1px;
        background: #7dd6f54d; }
    .game-character-panel .equipment-panel .character-weight {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-top: 12px;
      margin-top: 12px;
      border-top: 1px solid #7dd6f54d;
      width: 100%;
      gap: 14px; }
      .game-character-panel .equipment-panel .character-weight .label {
        font-size: 11px;
        letter-spacing: 2px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
        line-height: initial; }
      .game-character-panel .equipment-panel .character-weight .weight-items {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #9adcf5; }
        .game-character-panel .equipment-panel .character-weight .weight-items.weight-light {
          display: grid;
          grid-template-rows: repeat(2, 8px);
          grid-auto-flow: column;
          grid-auto-columns: 8px;
          gap: 4px; }
      .game-character-panel .equipment-panel .character-weight .line {
        height: 20px;
        width: 1px;
        background: #7dd6f54d; }

@media (max-width: 575.5px) {
  #game-selection .game-selection-screen {
    padding: 30px 15px; }
  #game-selection .game-selection-panel {
    padding: 15px; }
  #game-selection .game-character-cards {
    grid-template-columns: 1fr; }
  #game-selection .game-character-selection-card > img {
    flex-basis: 110px;
    width: 110px;
    height: 110px; }
  #game-selection .game-character-detail {
    display: flex;
    flex-direction: column-reverse;
    gap: 18px;
    padding: 15px; }
  #game-selection .game-character-detail__media {
    width: 100%; }
  #game-selection .game-character-detail__main-image {
    display: none; }
  #game-selection .game-character-detail__portrait {
    display: block;
    width: 100%;
    max-height: 280px;
    border-radius: 8px;
    object-fit: cover; } }

/*# sourceMappingURL=game.css.map */