@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

// Main Page
.main {
  @include scrollbar(0.4rem, 0.25rem);

  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  position: relative;
  margin: 0 auto;
  max-width: 1920px;
  height: 100dvh;
  padding-top: 8.6rem;

  @include media("lg") {
    padding-top: 6rem;
  }

  &__content {
    @include transition(padding);

    flex: 1;
    min-width: 0;

    body:has(.main__section--chat-open) & {
      padding-right: 34.8rem;

      @include media("lg") {
        padding-right: 0;
      }
    }
  }

  &__section {
    @include transition(padding);

    position: relative;
    padding: 0 2.4rem;
    min-width: 0;

    &--flex {
      display: flex;
      align-items: stretch;
      gap: 0.8rem;
    }

    &+& {
      padding-top: 0.8rem;
    }

    @include media("lg") {
      padding: 0 1.2rem;

      &--flex {
        gap: 0;
      }

      &+& {
        padding-top: 0.4rem;
      }
    }

    &--chat-open {
      padding-right: calc(1.6rem);

      .betting-status {
        flex-basis: 360px;
      }
    }
  }

  &__section-wrapper {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
    border-radius: 1.2rem;
    background-color: theme-color($container);
    border: 1px solid theme-color($border-low);
    backdrop-filter: blur(7.5rem);
  }
}

// Chart Section
.chart {
  flex: 1 1 1401px;

  .betting-status {
    flex: none;
  }

  &__container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;

    @include media("lg") {
      gap: 0.4rem;
    }
  }

  &__header {
    overflow: hidden;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      translate: -0.5rem -50%;
      width: 5.2rem;
      height: 4rem;
      background-color: #f79b2b;
      border-radius: 100%;

      @include media("lg") {
        width: 3rem;
      }
    }

    &-row {
      @include flexCenter(flex-start);

      gap: 1.2rem;
      position: relative;
      padding: 0 1.6rem;
      width: 100%;
      height: 4.8rem;
      background-color: theme-color($container);
      border: 1px solid theme-color($border-low);
      border-radius: 1.2rem;
      backdrop-filter: blur(7.5rem);

      @include media("lg") {
        gap: 0.8rem;
        padding: 0 1.2rem;
        height: 4rem;
        border-radius: 0.6rem;
      }

      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        translate: -0.1rem -50%;
        width: 1px;
        height: 2.4rem;
        background: linear-gradient(to bottom,
            rgba(#f89824, 0),
            rgba(#f89824, 1) 50%,
            rgba(#f89824, 0));
      }

      img {
        width: 3rem;
        height: 3rem;
        object-fit: cover;

        @include media("lg") {
          width: 2rem;
          height: 2rem;
        }
      }
    }
  }

  &__title {
    @include typography("h3");

    color: theme-color($text-high);

    @include media("lg") {
      font-size: 1.4rem;
      line-height: 2.4rem;
    }
  }

  &__sub-title {
    color: theme-color($text-low);
  }

  &__btn-help {
    @include flexCenter();

    margin-left: auto;
    width: 3.2rem;
    height: 3.2rem;
    background: transparent;
    border: none;

    &::before {
      --ico-size: 2rem;

      @include media("lg") {
        --ico-size: 1.6rem;
      }
    }

    @include media("lg") {
      width: 2.4rem;
      height: 2.4rem;
    }
  }

  &__section-wrapper {
    overflow: hidden;
    position: relative;

    &::before,
    &::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 16rem;
      height: 7.4rem;
      border-radius: 100%;
    }

    &::before {
      top: 5.6rem;
      left: 0;
      translate: -2.4rem 0;
      background-color: theme-color($primary);
    }

    &::after {
      top: 50%;
      right: 0;
      translate: 2.4rem -50%;
      background-color: theme-color($secondary);
    }
  }

  &__section {
    position: relative;
    z-index: 1;
    padding: 1.6rem;
    border-radius: 1.2rem;
    background-color: theme-color($container);
    border: 1px solid theme-color($border-low);
    backdrop-filter: blur(7.5rem);

    @include media("lg") {
      padding: 1.2rem;
      border-radius: 0.6rem;
    }

    &--betting {
      overflow: hidden;
      backdrop-filter: none;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        backdrop-filter: blur(4.5rem);
        pointer-events: none;
      }

      @include media("lg") {
        position: sticky;
        bottom: 11.2rem;
      }
    }
  }

  &__stats {
    @include flexCenter(space-between);

    gap: 4rem;
    container-type: inline-size;
    container-name: stats;

    @include media("lg") {
      gap: 1.1rem;
    }
  }

  &__stat-card {
    @include flexCenter(space-between);

    flex: 1;

    @include cq("89rem", "stats") {
      gap: 1.2rem;
    }

    @include media("lg") {
      gap: 0.4rem;
    }

    &--up {
      @include cq("89rem", "stats") {
        flex-direction: column-reverse;
        align-items: flex-end;
      }

      @include media("lg") {
        align-items: flex-start;
      }

      dd {
        @include flexCenter(flex-start);

        color: theme-color($primary);
      }

      .chart__stat-result {
        align-items: flex-end;

        @include media("lg") {
          align-items: flex-start;
        }
      }

      .chart__stats-group {
        @include flexCenter(flex-end);
      }

      .chart__stat-value {
        color: theme-color($primary);
      }
    }

    &--down {
      @include cq("89rem", "stats") {
        flex-direction: column;
        align-items: flex-start;

        @include media("lg") {
          align-items: flex-end;
        }
      }

      dd {
        @include flexCenter(flex-end);

        color: theme-color($secondary);
      }

      .chart__stat-result {
        align-items: flex-start;

        @include media("lg") {
          align-items: flex-end;
        }
      }

      .chart__stat-info {
        text-align: right;
      }

      .chart__stats-group {
        @include flexCenter(flex-start);
      }

      .chart__stat-value {
        color: theme-color($secondary);
      }
    }
  }

  &__stat-info {
    @include typography("h4");

    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1.2rem;

    @include media("lg") {
      grid-template-columns: 1fr;
      gap: 0;
    }

    dt {
      color: theme-color($text-low);
      font-weight: 500;

      @include media("lg") {
        font-size: 1.2rem;
        line-height: 1.8rem;
      }
    }

    dd {
      gap: 0.2rem;
      font-weight: 700;

      @include media("lg") {
        font-size: 1.4rem;
        line-height: 2rem;
      }
    }
  }

  &__stat-result {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    .badge {
      &::after {
        --ico-size: 2rem;

        @include media("lg") {
          --ico-size: 1.6rem;
        }
      }
    }
  }

  &__stats-group {
    gap: 1.2rem;

    @include media("lg") {
      flex-direction: row-reverse;
      gap: 0.4rem;
    }

    .digit-window {
      @include digit("h1");
    }

    img {
      width: 3.2rem;
      height: 3.2rem;
      object-fit: cover;
      border-radius: 0.8rem;

      @include media("lg") {
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.4rem;
      }
    }
  }

  &__stat-value {
    @include typography("h1");

    font-weight: 800;
  }

  &__timer {
    @include flexCenter();

    flex: 0 0 auto;
    position: relative;

    svg {
      width: 100px;
      height: 100px;

      @include media("lg") {
        width: 76px;
        height: 76px;
      }
    }

    &-circle {
      &--bg {
        stroke-width: 6px;
        stroke: theme-rgba($text-high, 0.08);
      }

      &--fg {
        @include transition(stroke);

        stroke-width: 8px;
        stroke-linecap: round;
        stroke: theme-color($primary);
      }

      &--warning {
        stroke: #e88e34;
      }

      &--danger {
        stroke: theme-color($secondary);
      }

      &-group {
        @include flexCenter();

        gap: 0.4rem;
        position: absolute;
        inset: 0;
      }

      &-bar {
        width: 0.6rem;
        height: 4rem;
        background-color: theme-color($primary);
        border-radius: 10rem;
        transform-origin: center;

        @include media("lg") {
          width: 0.4rem;
          height: 3rem;
        }
      }
    }

    &-text {
      @include flexCenter(center);

      flex-direction: column;
      position: absolute;
      text-align: center;
      color: #e88e34;

      &--danger {
        color: theme-color($secondary);
      }
    }

    &-num {
      @include typography("h1");

      translate: 0 0.5rem;
      font-weight: 700;

      @include media("lg") {
        translate: 0 0.3rem;
      }
    }

    &-unit {
      translate: 0 -0.5rem;

      @include media("lg") {
        translate: 0 -0.3rem;
      }
    }
  }

  &__control-group {
    display: flex;
    gap: 0.8rem;
    position: relative;

    &+& {
      margin-top: 1.2rem;
    }

    @include media("lg") {
      gap: 0.4rem;
    }

    [class*="btn-"] {
      width: 100%;

      @include media("lg") {
        padding: 0 !important;
      }
    }

    .btn-blur {
      gap: 0.8rem;
    }

    .btn-blur-wrap {
      &:has(.btn-blur.active) {
        &::before {
          @include hidden(1, visible);
        }
      }
    }

    [data-theme="dark"] & {
      .btn-blur.active {
        background-color: rgba(#f79b2b, 0.15);
        border-color: rgba(#f79b2b, 0.4);
        color: theme-color($text-high);
      }
    }

    [data-theme="light"] & {
      .btn-blur.active {
        background-color: rgba(#f79b2b, 0.36);
        border-color: rgba(#f79b2b, 0.4);
        color: theme-color($text-high);
      }
    }
  }

  &__canvas {
    width: 100%;
    height: 24.7rem;

    &--not-logged-in {
      height: 50.9rem;
    }

    @include media("lg") {
      height: 17.5rem;
    }

    canvas {
      width: 100%;
      height: 100%;
    }
  }

  &__meta {
    @include flexCenter(flex-start);

    gap: 1.6rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;

    @include media("lg") {
      margin-top: 1.2rem;
    }

    &-stats {
      flex: 1;
      display: flex;
      gap: 4rem;
      align-items: center;
      padding: 0.6rem 0;

      @include media("lg") {
        gap: 1.2rem;
        padding: 0;
      }
    }

    &-info {
      display: flex;
      flex-direction: column;
      white-space: nowrap;
    }

    &-value {
      @include typography("p2");

      display: block;
      font-weight: 600;
      color: theme-color($text-high);
    }

    &-label {
      @include typography("p2");

      font-weight: 500;
      color: theme-color($text-low);
    }
  }

  &__history {
    @include flexCenter(flex-end);

    flex-shrink: 0;
    gap: 0.8rem;

    @include media("lg") {
      gap: 0.4rem;
    }

    &-dot {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 4rem;
      height: 4rem;
      border-radius: 0.8rem;

      @include media("lg") {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 0.4rem;
      }

      &::before {
        --ico-size: 2rem;

        @include media("lg") {
          --ico-size: 1.5rem;
        }
      }

      &::after {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;

        @include media("lg") {
          top: 0.4rem;
          right: 0.4rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }

      &--latest {
        &::after {
          content: "";
        }
      }

      &--up {
        background-color: theme-rgba($primary, 0.12);

        &::after {
          background-color: theme-color($primary);
        }
      }

      &--down {
        background-color: theme-rgba($secondary, 0.12);

        &::after {
          background-color: theme-color($secondary);
        }
      }
    }

    &-info {
      display: flex;
      flex-direction: column;
      gap: 0.8rem;
      position: absolute;
      bottom: 100%;
      right: 0;
      translate: 0 -0.9rem;
      padding: 0.8rem;
      border-radius: 0.4rem;
      width: min-content;
      min-width: 14.1rem;

      &::after {
        position: absolute;
        bottom: 0;
        right: 0.2rem;
        translate: 0 0.5rem;
      }

      [data-theme="dark"] & {
        background: #201a22;
      }

      [data-theme="light"] & {
        background: #fff;
      }

      &-value {
        display: flex;
        flex-direction: column;
        width: 100%;
        white-space: nowrap;

        span {
          @include typography("p2");

          font-weight: 500;

          [data-theme="dark"] & {
            color: #fff;
          }

          [data-theme="light"] & {
            color: #767676;
          }
        }

        strong {
          font-weight: 700;
        }

        &--start {
          padding-bottom: 0.8rem;

          [data-theme="dark"] & {
            border-bottom: 1px solid rgba(#fff, 0.16);
          }

          [data-theme="light"] & {
            border-bottom: 1px solid #e5e5e5;
          }

          strong {
            color: theme-color($text-high);
          }
        }

        &--end {
          strong {
            color: theme-color($primary);
          }
        }
      }
    }
  }

  &__decorations {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
  }

  &__bet-summary {
    @include flexCenter(space-between);
  }

  &__bet-label {
    color: theme-color($text-low);
    font-weight: 700;
  }

  &__bet-total {
    color: theme-color($text-high);
    font-weight: 700;
  }

  &__input-group {
    @include flexCenter(space-between);

    gap: 0.8rem;
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    background-color: theme-color($invert-container);
    border-radius: 0.8rem;
    border: 1px solid theme-color($border-mid);
    backdrop-filter: blur(10rem);
    box-shadow: inset 0 0 14px rgba(#fff, 0.04), 0 8px 30px rgba(#000, 0.45);

    [data-theme="light"] & {
      box-shadow: inset 0 0 14px rgba(#fff, 0.04), 0 8px 24px rgba(#000, 0.12);
    }

    @include media("lg") {
      gap: 0.4rem;
      margin-top: 0.4rem;
      padding-left: 0.8rem;
    }
  }

  &__amount-wrap {
    @include flexCenter(flex-start);

    flex: 1;
    gap: 0.8rem;

    i {
      flex-shrink: 0;
    }

    @include media("lg") {
      gap: 0.4rem;

      i {
        --ico-size: 2rem;
      }
    }
  }

  &__amount {
    @include typography("h4");

    flex: 1;
    background: transparent;
    font-weight: 700;
    color: theme-color($text-high);
    border: none;

    @include media("sm") {
      max-width: 17rem;
    }
  }

  &__btn-reset {
    gap: 0.4rem;
    padding: 0 2.4rem !important;

    @include media("lg") {
      padding: 0 1.2rem !important;

      &::before {
        --ico-size: 1.6rem;
      }
    }
  }

  &__controls {
    margin-top: 0.8rem;

    @include media("lg") {
      margin-top: 0.4rem;
    }
  }

  &__chip-badge {
    @include flexCenter();
    @include typography("p1");

    padding: 0 1.2rem;
    height: 2.6rem;
    background-color: theme-color($container);
    border: 1px solid theme-color($border-mid);
    border-radius: 10rem;
    color: theme-color($text-high);
    font-weight: 600;
    box-shadow: inset 0 0 4px rgba(#fff, 0.04), 0 4px 13px rgba(#000, 0.25);

    [data-theme="light"] & {
      box-shadow: inset 0 0 4px rgba(#fff, 0.04), 0 4px 13px rgba(#000, 0.12);
    }

    @include media("lg") {
      display: none;
    }
  }

  &__btn-action {
    gap: 0.4rem;

    @include media("lg") {
      &::after {
        --ico-size: 2.4rem;
      }
    }

    &--disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}

.blob {
  position: absolute;
  bottom: 1rem;
  opacity: 0.46;
  width: 40%;
  height: 8rem;
  border-radius: 50%;

  [data-theme="light"] & {
    opacity: 0.2;
  }

  &--red {
    right: 0;
    translate: -15% 0;
    background: theme-color($secondary);
  }

  &--green {
    left: 0;
    translate: 15% 0;
    background: theme-color($primary);
  }
}

// Betting Status
.betting-status {
  @include transition(flex-basis);

  flex: 0 0 463px;
  overflow: hidden;
  display: flex;
  gap: 1.2rem;
  position: relative;
  padding: 1.6rem;
  min-width: 360px;
  background-color: theme-color($container);
  border: 1px solid theme-color($border-low);
  border-radius: 1.6rem;

  @include media("lg") {
    flex: none;
    gap: 0.4rem;
    padding: 1.2rem;
    width: 100%;
    min-width: 0;
    min-height: 6.8rem;
    border-radius: 0.6rem;

    &:has(.betting-status__result) {
      border: none;
    }
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    backdrop-filter: blur(4.5rem);
    pointer-events: none;
  }

  &__list {
    position: relative;
    width: 50%;

    @include media("lg") {
      position: static;
    }

    &--up {
      .betting-status__info-group {
        &::before {
          background: linear-gradient(to top,
              theme-rgba($primary, 0.2),
              rgba(#fff, 0));
        }
      }

      .betting-status__result-group {
        &::before {
          background: linear-gradient(to top,
              theme-rgba($primary, 0.2),
              rgba(#fff, 0));
        }
      }

      .betting-status__result {
        left: 0;
      }

      [data-theme="dark"] & {
        .betting-status__info::before {
          background-color: theme-color($primary);
        }

        .betting-status__info-group {
          background-color: theme-rgba($primary, 0.08);
        }

        .betting-status__info-text {
          color: theme-color($primary);
        }

        .betting-status__item--my {
          background-color: theme-rgba($primary, 0.12);
          border-color: theme-rgba($primary, 0.36);
        }

        .betting-status__result-blob {
          background-color: theme-color($primary);
        }

        .betting-status__result-group {
          background-color: theme-rgba($primary, 0.08);
        }
      }

      [data-theme="light"] & {
        .betting-status__info::before {
          background-color: #003f28;
        }

        .betting-status__info-group {
          background-color: theme-rgba($primary, 0.8);
        }

        .betting-status__info-text {
          color: #fff;
        }

        .betting-status__item--my {
          background-color: theme-rgba($primary, 0.24);
          border-color: theme-color($primary);
        }

        .betting-status__result-blob {
          background-color: #003f28;
        }

        .betting-status__result-group {
          background-color: theme-rgba($primary, 0.68);
        }
      }
    }

    &--down {
      .betting-status__info-group {
        &::before {
          background: linear-gradient(to top,
              theme-rgba($secondary, 0.2),
              rgba(#fff, 0));
        }
      }

      .betting-status__result-group {
        &::before {
          background: linear-gradient(to top,
              theme-rgba($secondary, 0.2),
              rgba(#fff, 0));
        }
      }

      .betting-status__result {
        right: 0;
      }

      [data-theme="dark"] & {
        .betting-status__info::before {
          background-color: theme-color($secondary);
        }

        .betting-status__info-group {
          background-color: theme-rgba($secondary, 0.08);
        }

        .betting-status__info-text {
          color: theme-color($secondary);
        }

        .betting-status__item--my {
          background-color: theme-rgba($secondary, 0.12);
          border-color: theme-rgba($secondary, 0.36);
        }

        .betting-status__result-blob {
          background-color: theme-color($secondary);
        }

        .betting-status__result-group {
          background-color: theme-rgba($secondary, 0.08);
        }
      }

      [data-theme="light"] & {
        .betting-status__info::before {
          background-color: #55000f;
        }

        .betting-status__info-group {
          background-color: theme-rgba($secondary, 0.8);
        }

        .betting-status__info-text {
          color: #fff;
        }

        .betting-status__item--my {
          background-color: theme-rgba($secondary, 0.24);
          border-color: theme-color($secondary);
        }

        .betting-status__result-blob {
          background-color: #55000f;
        }

        .betting-status__result-group {
          background-color: theme-rgba($secondary, 0.68);
        }
      }
    }
  }

  &__content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    height: 100%;

    @include media("lg") {
      gap: 0.4rem;
    }

    &--animating {
      .betting-status__info {
        &::before {
          opacity: 0 !important;
        }
      }
    }
  }

  &__title {
    @include flexCenter();

    gap: 0.4rem;
    width: 100%;
    text-align: center;

    &::after {
      [data-theme="light"] & {
        filter: brightness(0);
      }
    }

    &-text {
      @include typography("h2");

      font-weight: 700;
      color: theme-color($text-high);
    }
  }

  &__info {
    overflow: hidden;
    position: relative;
    width: 100%;

    @include media("lg") {
      @include flexCenter(flex-start);

      align-items: center;
      flex-wrap: wrap;
      gap: 0.8rem;
    }

    &::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      visibility: hidden;
      translate: -50% 5rem;
      width: calc(100% - 2.6rem);
      height: 6.9rem;
      border-radius: 50%;

      [data-theme="dark"] & {
        opacity: 0.56;
      }

      @include media("lg") {
        content: none !important;
      }
    }

    &--rendered {
      &::before {
        visibility: visible;
        transition: visibility 0s 0.6s;
      }
    }

    &-group {
      padding: 1.6rem;
      border-radius: 0.8rem;
      backdrop-filter: blur(3rem);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 0.8rem;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }
    }

    &-text {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-weight: 700;

      &+& {
        margin-top: 0.4rem;
      }

      @include media("lg") {
        gap: 0;

        &+& {
          margin-top: 0;
        }

        &::before {
          --ico-size: 1.6rem;
        }

        [data-theme="light"] & {
          color: #111 !important;

          &::before {
            filter: brightness(0);
          }
        }
      }
    }
  }

  &__users {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;

    @include media("lg") {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 0.2rem;
    }
  }

  &__item {
    @include flexCenter(flex-start);

    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    width: 100%;
    border-radius: 0.8rem;
    border: 1px solid transparent;
    container-type: inline-size;
    container-name: betting-status-item;

    @include media("lg") {
      gap: 0;
      padding: 0;
      width: 2rem;
      height: 2rem;
      border: none;
    }

    &--my {
      .betting-status__item-name {
        color: theme-color($text-high);
        font-weight: 700;
      }

      .betting-status__item-amount {
        color: theme-color($text-high);
      }
    }

    &-thumb {
      flex-shrink: 0;
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 0.8rem;
      object-fit: cover;

      @include media("lg") {
        @include img-fit();

        border-radius: 0.4rem;
      }
    }

    &-name {
      @include ellipsis(1);

      font-weight: 500;

      @include cq("300px", "betting-status-item") {
        max-width: 8rem;
      }

      @include cq("160px", "betting-status-item") {
        max-width: 2rem;
      }
    }

    &-amount {
      flex-shrink: 0;
      margin-left: auto;
      text-align: right;
      font-weight: 700;
    }
  }

  &__more {
    @include flexCenter(space-between);

    gap: 2rem;
    padding: 0.8rem 1.2rem;
    width: 100%;
    border-radius: 0.8rem;
    border: 1px solid;

    [data-theme="dark"] & {
      background-color: rgba(#898989, 0.2);
      box-shadow: inset 0 0 14px rgba(#fff, 0.04), 0 8px 30px rgba(#000, 0.45);
      border-color: theme-color($container);
    }

    [data-theme="light"] & {
      background-color: rgba(#fff, 0.46);
      box-shadow: inset 0 0 14px rgba(#fff, 0.04), 0 8px 30px rgba(#000, 0.12);
      border-color: #fff;
    }

    &-preview {
      @include flexCenter();

      img {
        position: relative;
        width: 2.4rem;
        height: 2.4rem;
        border-radius: 50%;
        border: 2px solid #fff;

        [data-theme="dark"] & {
          box-shadow: 0 4px 4px rgba(#000, 0.25);
        }

        [data-theme="light"] & {
          box-shadow: 0 2px 4px rgba(#000, 0.16);
        }

        &+img {
          margin-left: -0.8rem;
        }
      }
    }

    &-text {
      @include flexCenter(flex-end);

      gap: 0.2rem;
      font-weight: 700;
      color: theme-color($text-high);
    }

    &-modal {
      overflow: hidden;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 35.6rem;
      background-color: theme-color($container);
      border-radius: 0.8rem;
      backdrop-filter: blur(8rem);
    }

    &-modal-header {
      @include flexCenter(space-between);

      padding: 0 1.7rem;
      height: 5.4rem;
      border-bottom: 1px solid theme-color($border-low);

      strong {
        font-weight: 600;
        color: theme-color($text-high);
      }

      button {
        @include flexCenter();

        border: none;
        --ico-size: 2rem;
      }
    }

    &-modal-body {
      @include scrollbar(0.4rem);
      @include auto-grid(5.4rem, 2rem);

      overflow-y: auto;
      overflow-x: hidden;
      align-items: flex-start;
      margin: 2rem 0;
      padding: 0 1.7rem;
      max-height: 26.2rem;
    }

    &-modal-item {
      @include flexCenter();

      flex-direction: column;
      gap: 0.8rem;

      img {
        width: 4rem;
        height: 4rem;
        border-radius: 0.8rem;
      }

      strong {
        font-weight: 700;
        color: theme-color($text-low);
      }
    }
  }

  &__result {
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;

    @include media("lg") {
      width: 50%;
    }

    &-blob {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: calc(100% - 2.6rem);
      height: 26.6rem;
      border-radius: 50%;
      z-index: -1;

      @include media("lg") {
        top: 100%;
        translate: -50% -1.5rem;
        height: 6.9rem;
      }
    }

    &-group {
      @include flexCenter();

      gap: 1.2rem;
      flex-direction: column;
      position: relative;
      z-index: 2;
      padding: 1.6rem;
      width: 100%;
      height: 100%;
      border-radius: 0.8rem;
      backdrop-filter: blur(6rem);

      @include media("lg") {
        border-radius: 0;
        backdrop-filter: blur(4rem);
      }

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 1px;
        border-radius: 0.8rem;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;

        @include media("lg") {
          border-radius: 0;

          .betting-status__list--up & {
            -webkit-mask-size: auto, calc(100% - 1px) 100%;
            -webkit-mask-repeat: no-repeat;
          }

          .betting-status__list--down & {
            -webkit-mask-size: auto, calc(100% - 1px) 100%;
            -webkit-mask-position: 0 0, 100% 0;
            -webkit-mask-repeat: no-repeat;
          }
        }
      }
    }

    &-value {
      @include flexCenter();

      flex: 1;
      flex-direction: column;
      width: 100%;

      &-title {
        @include typography("h1");

        margin-bottom: 1.2rem;
        font-weight: 600;
        color: #fff;

        @include media("lg") {
          @include typography("h2");

          margin-bottom: 0;
          translate: 0 0.2rem;
        }
      }

      &-people,
      &-amount {
        @include flexCenter();
        gap: 0.4rem;

        font-weight: 700;
        color: #fff;

        &::before {
          --ico-size: 2.4rem;
        }
      }

      strong {
        display: flex;
        align-items: center;
        gap: 0.2rem;
        font-weight: 700;
      }
    }

    &-desc {
      @include flexCenter();

      flex-wrap: wrap;
      gap: 0.2rem;
      translate: 0 -0.2rem;

      span {
        @include flexCenter();

        gap: 0.2rem;
        color: #fff;

        &::before {
          --ico-size: 1.6rem;
        }
      }
    }
  }

  &__win {
    @include flexCenter();

    position: fixed;
    inset: 0;
    z-index: 130;
    box-shadow: 0 4px 4px rgba(#000, 0.25);

    [data-theme="dark"] & {
      background: rgba(#000, 0.6);
    }

    [data-theme="light"] & {
      background: rgba(#000, 0.46);
      box-shadow: 0 4px 4px rgba(#000, 0.25);
    }

    &-content {
      position: relative;
      width: 100%;
      max-width: 1185px;
      height: 100%;

      @include media("xl") {
        max-width: 900px;
      }

      @include media("lg") {
        max-width: 660px;
      }

      @include media("656px") {
        max-width: 360px;
      }

      img {
        @include img-fit(contain);
      }
    }

    &-coin {
      position: absolute;

      &--01 {
        top: 50%;
        left: 7rem;
        margin-top: -20rem;

        @include media("xl") {
          margin-top: -14rem;
          width: 11.2rem;
        }

        @include media("lg") {
          left: 5rem;
          margin-top: -12rem;
          width: 8rem;
        }

        @include media("656px") {
          left: 3rem;
          margin-top: -5rem;
          width: 4.4rem;
        }
      }

      &--02 {
        top: 50%;
        left: 12rem;
        margin-top: -3rem;

        @include media("xl") {
          left: 10rem;
          margin-top: -2.5rem;
          width: 9.3rem;
        }

        @include media("lg") {
          left: 8rem;
          margin-top: -1.5rem;
          width: 7.2rem;
        }

        @include media("656px") {
          left: 4rem;
          margin-top: -0.5rem;
          width: 4rem;
        }
      }

      &--03 {
        top: 50%;
        right: 18rem;
        margin-top: -32rem;

        @include media("xl") {
          right: 16rem;
          margin-top: -22rem;
          width: 8.2rem;
        }

        @include media("lg") {
          right: 12rem;
          margin-top: -17rem;
          width: 6.8rem;
        }

        @include media("656px") {
          right: 6.5rem;
          margin-top: -9rem;
          width: 3.6rem;
        }
      }

      &--04 {
        top: 50%;
        right: 10rem;
        margin-top: -19rem;

        @include media("xl") {
          right: 11rem;
          margin-top: -14rem;
          width: 8rem;
        }

        @include media("lg") {
          right: 7rem;
          margin-top: -10rem;
          width: 6.4rem;
        }

        @include media("656px") {
          right: 4rem;
          margin-top: -5.5rem;
          width: 3.2rem;
        }
      }
    }

    &-bg {
      width: 100%;
      height: 100%;
    }

    &-value {
      @include flexCenter();
      @include viewport-center(absolute);

      gap: 0.2rem;
      font-size: 8rem;
      line-height: 1;
      color: #111;

      @include media("xl") {
        font-size: 6rem;
        line-height: 4.8rem;
      }

      @include media("lg") {
        font-size: 4rem;
        line-height: 1;
      }

      @include media("656px") {
        font-size: 2.4rem;
        line-height: 1;
      }

      span,
      strong {
        font-weight: 700;
        translate: 0 14rem;

        @include media("xl") {
          translate: 0 10rem;
        }

        @include media("lg") {
          translate: 0 7.5rem;
        }

        @include media("656px") {
          translate: 0 4rem;
        }
      }
    }
  }
}

.betting-history {
  margin-top: 1.2rem;
}

.ranking-history {
  margin-top: 1.2rem;

  &__filter {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.2rem;
  }
}

.betting-success {
  @include flexCenter();

  gap: 0.8rem;
  position: fixed;
  left: 1.6rem;
  bottom: 1.6rem;
  z-index: 2;
  padding: 1rem 0.8rem;
  background: rgba(#111, 0.75);
  border-radius: 0.8rem;
  color: #fff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  @include media("lg") {
    gap: 0.4rem;
    bottom: 12.6rem;
    border-radius: 0.4rem;
  }

  svg {
    width: 2rem;
    aspect-ratio: 1;
  }

  button {
    border: none;

    &:not(.ico-before):not(.ico-after) {
      --ico-size: 1.6rem;
    }

    [data-theme="light"] & {
      filter: invert(1);
    }
  }
}