.profile-screen {
  --profile-header-expanded: 204px;
  --profile-header-collapsed: 68px;
  --profile-header-height: var(--profile-header-expanded);
  --profile-avatar-expanded-size: 92px;
  --profile-avatar-compact-size: 34px;
  --profile-header-bg-y: 0px;
  --profile-header-bg-scale: 1;
  --profile-compact-x: -10px;
  --profile-compact-y: 12px;
  --profile-avatar-y: 0px;
  --profile-avatar-scale: 1;
  --profile-identity-x: 0px;
  --profile-identity-y: 0px;
  --profile-identity-scale: 1;
  --profile-avatar-opacity: 1;
  --profile-expanded-title-opacity: 1;
  --profile-compact-opacity: 0;
  --profile-hero-fill: #08090b;
  --profile-hero-solid: #08090b;
  --profile-accent-border: #4a4d55;
  position: relative;
  min-height: 100%;
  background: var(--app-bg);
}

.profile-hero {
  position: sticky;
  top: 0;
  z-index: 8;
  height: var(--profile-header-height);
  margin-bottom: calc(0px - var(--profile-header-height));
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
  will-change: height;
  transform: translateZ(0);
}

.profile-hero__surface {
  position: absolute;
  inset: 0;
  background: var(--profile-hero-fill);
  transform: translateY(var(--profile-header-bg-y)) scale(var(--profile-header-bg-scale));
  transform-origin: top center;
  will-change: transform;
  contain: paint;
}

.profile-hero__actions {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: var(--page-side);
  right: var(--page-side);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateZ(0);
  pointer-events: auto;
}

.profile-hero__avatar-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 50%;
  z-index: 2;
  width: var(--profile-avatar-expanded-size);
  height: var(--profile-avatar-expanded-size);
  transform:
    translate3d(-50%, var(--profile-avatar-y), 0)
    scale(var(--profile-avatar-scale));
  transform-origin: center center;
  opacity: var(--profile-avatar-opacity);
  pointer-events: none;
  will-change: transform, opacity;
}

.profile-avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: translateZ(0);
}

.profile-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 7, 9, 0.34);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile-avatar__inner {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

.profile-avatar--compact {
  flex: 0 0 auto;
  width: var(--profile-avatar-compact-size);
  height: var(--profile-avatar-compact-size);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.profile-avatar--compact .profile-avatar__inner {
  width: 8px;
  height: 8px;
}

.profile-identity {
  position: absolute;
  z-index: 3;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.profile-identity--expanded {
  top: calc(env(safe-area-inset-top) + 128px);
  left: 50%;
  width: min(calc(100% - 44px), 248px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform:
    translate3d(calc(-50% + var(--profile-identity-x)), var(--profile-identity-y), 0)
    scale(var(--profile-identity-scale));
  opacity: var(--profile-expanded-title-opacity);
}

.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 17px);
  left: 58px;
  right: 58px;
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: var(--profile-compact-opacity);
  transform: translate3d(var(--profile-compact-x), var(--profile-compact-y), 0);
  pointer-events: none;
}

.profile-identity__compact-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.profile-title {
  margin: 0;
  font-size: clamp(22px, 5.8vw, 27px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.profile-title--compact {
  width: 100%;
  color: rgba(255, 255, 255, 0.995);
  font-size: 17px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.profile-level {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 230, 226, 0.84);
  font-size: 12px;
  line-height: 1;
}

.profile-level--compact {
  margin-top: 1px;
  color: rgba(255, 226, 222, 0.98);
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.profile-level__badge {
  min-width: 14px;
  height: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(255, 252, 251, 0.95);
  color: var(--profile-accent-border);
  border: 1px solid var(--profile-accent-border);
  font-size: 10px;
  font-weight: 700;
}

.profile-level__text {
  font-size: 13.5px;
  line-height: 1;
}

.profile-level--compact .profile-level__badge {
  min-width: 14px;
  height: 16px;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 10px;
}

.profile-level--compact .profile-level__text {
  font-size: 12.5px;
}

.profile-body {
  position: relative;
  z-index: 1;
  padding: calc(var(--profile-header-expanded) + 14px) var(--page-side) calc(24px + env(safe-area-inset-bottom));
}

@media (max-width: 389px) {
  .profile-screen {
    --profile-header-expanded: 198px;
    --profile-header-collapsed: 66px;
    --profile-avatar-expanded-size: 88px;
    --profile-avatar-compact-size: 32px;
  }

  .profile-hero__avatar-wrap {
    top: calc(env(safe-area-inset-top) + 26px);
  }

  .profile-identity--expanded {
    top: calc(env(safe-area-inset-top) + 126px);
    width: min(calc(100% - 40px), 236px);
  }

  .profile-identity--compact {
    left: 54px;
    right: 54px;
    min-height: 40px;
  }

  .profile-title--compact {
    font-size: 16px;
  }

  .profile-level__text,
  .profile-level--compact .profile-level__text {
    font-size: 12px;
  }

  .music-card__text {
    font-size: 18px;
  }
}

.music-card {
  position: relative;
  min-height: 122px;
  padding: 18px 18px 20px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #4d4d4d;
}

.music-card__text {
  font-size: 20px;
  line-height: 1.2;
}

.music-card__link {
  margin-top: 6px;
  color: #848282;
  font-size: 16px;
  text-decoration: underline;
}

.profile-form {
  margin-top: 14px;
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
}

.profile-field + .profile-field {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-field__placeholder {
  color: #666666;
  font-size: 16px;
  line-height: 1.2;
}

.profile-field__label {
  margin-top: 6px;
  color: #c1c1c1;
  font-size: 15px;
  line-height: 1.15;
}

.collection-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.collection-row__title {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
}

.collection-row__action {
  min-height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.collection-empty {
  min-height: 170px;
}

.profile-edit-screen {
  --profile-hero-fill: #08090b;
  --profile-hero-solid: #08090b;
  --profile-accent-border: #4a4d55;
  background: var(--app-bg);
}

.profile-edit-hero {
  position: relative;
  min-height: calc(env(safe-area-inset-top) + 266px);
  overflow: hidden;
}

.profile-edit-hero__surface {
  position: absolute;
  inset: 0;
  background: var(--profile-hero-fill);
}

.profile-edit-hero__actions {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: var(--page-side);
  right: var(--page-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.profile-edit-hero__avatar-wrap {
  position: relative;
  z-index: 1;
  padding-top: calc(env(safe-area-inset-top) + 22px);
  display: flex;
  justify-content: center;
}

.profile-edit-avatar {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.profile-edit-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 7, 9, 0.34);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile-edit-avatar__inner {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  opacity: 0.95;
}

.profile-edit-hero__identity {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-edit-title {
  margin: 0;
  font-size: clamp(23px, 7.1vw, 30px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.profile-edit-body {
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
}


.profile-edit-panel {
  width: 100%;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.06));
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.profile-edit-panel--appearance {
  margin-top: 0;
}

.profile-edit-panel--nft {
  margin-top: 0;
}

.profile-edit-hero__actions .icon-button {
  width: 54px;
  height: 54px;
}


.profile-edit-swatches-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.profile-edit-swatches-row + .profile-edit-swatches-row {
  margin-top: 14px;
}

.profile-edit-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--swatch-fill);
}

.profile-edit-swatch__inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.profile-edit-swatch.is-selected .profile-edit-swatch__inner {
  inset: 6px;
  background: var(--swatch-fill);
  box-shadow: 0 0 0 2px var(--swatch-gap-color);
}

.profile-edit-swatch--placeholder {
  display: grid;
  place-items: center;
  background: transparent;
}

.profile-edit-swatch__placeholder-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.92);
}

.profile-edit-divider {
  margin: 16px 0 12px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.profile-edit-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-section__title {
  color: #dbdada;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 300;
}

.profile-edit-emoji-placeholder {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.54);
}

.profile-edit-links {
  margin-top: 0;
  padding: 12px 16px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--app-bg);
}


.profile-edit-link {
  color: #7e7e7e;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-edit-nft__title {
  color: #dbdada;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 500;
}

.profile-edit-search {
  min-height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(7, 7, 9, 0.58);
}

.profile-edit-search__icon {
  width: 15px;
  height: 15px;
  opacity: 0.92;
}

.profile-edit-search__text {
  color: #7e7e7e;
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
}

.profile-edit-chips {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-edit-chip {
  min-height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #dbdada;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}

.profile-edit-chip.is-active {
  background: rgba(255, 255, 255, 0.10);
}

@media (max-width: 389px) {
  .profile-edit-hero {
    min-height: calc(env(safe-area-inset-top) + 248px);
  }

  .profile-edit-avatar {
    width: 118px;
    height: 118px;
  }

  .profile-edit-avatar__inner {
    width: 40px;
    height: 40px;
  }

  .profile-edit-body {
    padding-left: 0;
    padding-right: 0;
  }

  .profile-edit-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .profile-edit-swatches-row {
    gap: 10px;
  }

  .profile-edit-search__text {
    font-size: 13px;
  }

  .profile-edit-links {
    gap: 14px;
  }
}


.games-screen {
  background: var(--app-bg);
}

.games-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 68%, rgba(8, 9, 11, 0) 100%);
}

.games-screen__top-shell > * {
  pointer-events: auto;
}

.games-screen__content {
  padding: 2px 15px 0;
}

.games-balance,
.slot-balance,
.cases-balance {
  min-height: 41px;
  padding: 0 14px 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(0, 0, 0, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.games-balance__icon,
.slot-balance__icon,
.cases-balance__icon {
  width: 19px;
  height: 19px;
  opacity: 0.94;
}

.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  color: #dbdada;
  line-height: 1;
  letter-spacing: -0.03em;
}

.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole {
  color: #dbdada;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}

.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal {
  margin-left: 1px;
  color: rgba(219, 218, 218, 0.52);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 500;
  transform: translateY(-1px);
}

.games-section-title {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.games-section-title + .games-card-stack {
  margin-top: 12px;
}

.games-section-title__line {
  height: 2px;
  border-radius: 999px;
  background: rgba(217, 217, 217, 0.92);
}

.games-section-title__text {
  color: #dbdada;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.games-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.games-card-stack--secondary {
  margin-bottom: 2px;
}

.game-card {
  position: relative;
  width: 100%;
  min-height: 113px;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.game-card--featured {
  padding: 14px 138px 14px 15px;
}

.game-card--secondary {
  padding: 14px 16px 14px 15px;
}

.game-card--secondary.game-card--with-art {
  padding-right: 138px;
}

.game-card__copy {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.game-card__title {
  color: #dbdada;
  font-size: 24px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.game-card__description {
  margin-top: 7px;
  color: #acacac;
  font-size: 15px;
  line-height: 1.22;
  font-weight: 200;
  letter-spacing: -0.02em;
}

.game-card--featured .game-card__copy {
  max-width: 246px;
}

.game-card--secondary .game-card__copy {
  max-width: 252px;
}

.game-card--secondary.game-card--with-art .game-card__copy {
  max-width: 246px;
}

.game-card__art {
  position: absolute;
  right: -8px;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}

.game-card__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

.game-card--cases .game-card__art {
  width: 136px;
  right: -1px;
  top: 4px;
}

.game-card--slot .game-card__art {
  width: 141px;
  right: -6px;
  top: -1px;
}

.game-card--mines .game-card__art {
  width: 150px;
  right: -20px;
  top: -2px;
  transform: rotate(18deg);
}

.game-card--plinko .game-card__art {
  width: 149px;
  right: -10px;
  top: -5px;
}

.game-card--rocket .game-card__art {
  width: 153px;
  right: -13px;
  top: -3px;
  transform: rotate(-6deg);
}

.game-card--ring .game-card__art {
  width: 165px;
  right: -27px;
  top: -16px;
}

.game-card--roulette .game-card__art {
  width: 154px;
  right: -16px;
  top: -12px;
  transform: rotate(10deg);
}

@media (max-width: 389px) {
  .games-screen__top-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .games-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .games-section-title__text {
    font-size: 34px;
  }

  .game-card--featured {
    padding-right: 126px;
  }

  .game-card--featured .game-card__copy {
    max-width: 224px;
  }

  .game-card__title {
    font-size: 22px;
  }

  .game-card__description {
    font-size: 14px;
  }

  .game-card--cases .game-card__art {
    width: 130px;
  }

  .game-card--slot .game-card__art {
    width: 136px;
  }

  .game-card--mines .game-card__art {
    width: 144px;
    right: -22px;
  }

  .game-card--plinko .game-card__art {
    width: 143px;
  }

  .game-card--rocket .game-card__art {
    width: 146px;
    right: -15px;
  }

  .game-card--ring .game-card__art {
    width: 159px;
    right: -30px;
  }

  .game-card--roulette .game-card__art {
    width: 148px;
    right: -18px;
  }
}

.game-card--interactive {
  display: block;
  text-align: left;
}

.slot-screen {
  position: relative;
  background: var(--app-bg);
}

.slot-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 70%, rgba(8, 9, 11, 0) 100%);
}

.slot-screen__top-shell > * {
  pointer-events: auto;
}

.slot-screen__content {
  min-height: 100%;
  padding: 2px 15px calc(18px + env(safe-area-inset-bottom));
}

.slot-header-panel {
  margin-top: 15px;
  min-height: 68px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  border-radius: 34px;
  background: #1a1a1a;
}

.slot-header-panel__button {
  justify-self: center;
}

.slot-header-panel__title {
  justify-self: center;
  color: #dbdada;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.slot-header-panel__help-icon {
  width: 14px;
  height: 26px;
}

.slot-header-toast-slot {
  position: relative;
  height: 0;
  overflow: visible;
}

.slot-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(6px + (var(--slot-toast-index, 0) * 44px));
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34);
  transform: translateY(-16px) scale(0.988);
  opacity: 0;
  z-index: calc(12 - var(--slot-toast-index, 0));
  pointer-events: none;
  will-change: transform, opacity, top;
  transition:
    top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slot-toast.is-visible,
.slot-toast.is-entered {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.slot-toast.is-hiding {
  opacity: 0;
  transform: translateY(-10px) scale(0.992);
}

.slot-toast--lose {
  background: rgba(77, 24, 24, 0.94);
}

.slot-toast--win {
  background: rgba(20, 66, 38, 0.94);
}

.slot-toast__text,
.slot-toast__amount {
  color: rgba(255, 255, 255, 0.96);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.slot-toast__amount {
  font-weight: 600;
}

.slot-toast__icon {
  width: 14px;
  height: 14px;
}


.slot-machine {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.slot-stage-wrap {
  width: min(100%, 294px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-stage {
  position: relative;
  width: 100%;
  height: 100%;
  contain: layout paint size;
}

.slot-stage__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.slot-stage__layer-content {
  position: absolute;
  inset: 0;
}

.slot-stage__layer > svg,
.slot-stage__layer > canvas,
.slot-stage__layer > div,
.slot-stage__layer > video,
.slot-stage__layer > img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.slot-stage__media {
  object-fit: contain;
}

.slot-spin-button {
  width: 100%;
  margin-top: 10px;
  min-height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  backdrop-filter: blur(10px) saturate(118%);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(29px, 8vw, 38px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

.slot-spin-button:active:not(:disabled) {
  transform: scale(0.988);
}

.slot-spin-button.is-pending,
.slot-spin-button:disabled {
  color: rgba(255, 255, 255, 0.70);
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(148, 163, 184, 0.18);
}

.slot-controls {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.slot-controls.is-pending {
  opacity: 0.92;
}

.slot-controls__label {
  color: #d6d6d6;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.slot-bet-control {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 31px;
  gap: 10px;
  align-items: center;
}

.slot-bet-control__button {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.96);
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.slot-bet-control__button:disabled {
  color: rgba(255, 255, 255, 0.56);
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(148, 163, 184, 0.14);
}

.slot-bet-control__glyph {
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.slot-bet-control__icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.slot-bet-control__field,
.slot-placeholder-field {
  min-height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.slot-bet-control__field.is-disabled,
.slot-controls.is-pending .slot-placeholder-field {
  color: rgba(255, 255, 255, 0.48);
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(0, 0, 0, 0.08);
}

.slot-bet-control__value {
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.slot-controls__divider {
  margin: 10px 0 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.slot-placeholder-field {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 15px;
  line-height: 1;
}

.slot-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  padding: calc(18px + env(safe-area-inset-top)) 15px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 11, 0.60);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.slot-help {
  position: relative;
  width: min(100%, 318px);
  padding: 12px 14px 14px;
  border-radius: 27px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: #08090B;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.52);
}

.slot-help__accent {
  width: calc(100% - 58px);
  height: 4px;
  border-radius: 999px;
  background: #f66b59;
}

.slot-help__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c95a59;
}

.slot-help__close-icon {
  width: 18px;
  height: 18px;
}

.slot-help__title {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 31px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.slot-help__text {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.slot-help__subtitle {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.slot-help__combo-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.slot-help__combo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-help__combo-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.slot-help__combo-symbol {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.slot-help__combo-value {
  color: rgba(255, 255, 255, 0.98);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
}

@media (max-width: 389px) {
  .slot-screen__top-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slot-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slot-header-panel__title {
    font-size: 28px;
  }

  .slot-machine__machine {
    width: min(100%, 310px);
  }

  .slot-spin-button {
    min-height: 64px;
    font-size: clamp(27px, 7vw, 34px);
  }

  .slot-controls__label {
    font-size: 20px;
  }

  .slot-placeholder-field,
  .slot-bet-control__value {
    font-size: 15px;
  }

  .slot-help {
    width: min(100%, 306px);
  }

  .slot-help__title {
    font-size: 28px;
  }

  .slot-help__text {
    font-size: 15px;
  }

  .slot-help__subtitle {
    font-size: 22px;
  }
}


.cases-screen,
.case-detail-screen {
  position: relative;
  background: var(--app-bg);
}

.cases-screen__top-shell,
.case-detail-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 70%, rgba(8, 9, 11, 0) 100%);
}

.cases-screen__top-shell > *,
.case-detail-screen__top-shell > * {
  pointer-events: auto;
}

.cases-screen__content,
.case-detail-screen__content {
  min-height: 100%;
  padding: 2px 15px calc(18px + env(safe-area-inset-bottom));
}

.cases-header-panel {
  margin-top: 15px;
  min-height: 68px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 6px;
  border-radius: 34px;
  background: #1a1a1a;
}

.cases-header-panel__button {
  justify-self: center;
}

.cases-header-panel__title {
  justify-self: center;
  width: 100%;
  color: #dbdada;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-align: center;
}

.cases-header-panel__title--detail {
  display: -webkit-box;
  align-self: center;
  font-size: clamp(16px, 4.9vw, 24px);
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.cases-header-panel__title--detail-small {
  font-size: clamp(15px, 4.4vw, 20px);
}

.cases-header-panel__title--detail-tiny {
  font-size: clamp(14px, 4vw, 17px);
}

.cases-header-panel__title--detail-micro {
  font-size: clamp(12.5px, 3.6vw, 14.5px);
  letter-spacing: -0.03em;
}

.cases-header-panel__help-icon {
  width: 14px;
  height: 26px;
}

.cases-header-panel__spacer {
  width: 46px;
  height: 46px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.case-card {
  --case-card-outline: rgba(166, 186, 214, 0.52);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 21px;
  border: 1px solid var(--case-card-outline);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(166, 186, 214, 0.05);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.case-card:active {
  transform: scale(0.985);
}

.case-card__art {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 0.9;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(circle at 50% 14%, rgba(87, 11, 28, 0.24), transparent 60%);
}

.case-card__image {
  width: 104%;
  height: auto;
  max-width: none;
  display: block;
  transform: translateY(18px) scale(1);
}

.case-card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(16, 11, 14, 0), rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.38));
}

.case-card__title-strip {
  position: relative;
  z-index: 3;
  min-height: 50px;
  width: calc(100% + 2px);
  margin: -34px -1px 0;
  padding: 0 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(14, 19, 27, 0.18);
  box-shadow: inset 0 0 0 1px var(--case-card-outline), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}

.case-card__title-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  pointer-events: none;
}

.case-card__title {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  font-size: 17px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: center;
}

.case-card__title-text {
  display: -webkit-box;
  max-height: calc(1.08em * 2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

.case-card__title--small {
  font-size: 15px;
}

.case-card__title--tiny {
  font-size: 13px;
}

.case-card__price-row {
  padding: 0 10px;
}

.case-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.case-card__price-icon {
  width: 13px;
  height: 13px;
}

.cases-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  padding: calc(18px + env(safe-area-inset-top)) 15px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 11, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cases-help {
  position: relative;
  width: min(100%, 334px);
  padding: 12px 14px 14px;
  border-radius: 27px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(8, 9, 11, 0.94);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.52);
}

.cases-help__accent {
  width: calc(100% - 58px);
  height: 4px;
  border-radius: 999px;
  background: #f66b59;
}

.cases-help__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c95a59;
}

.cases-help__close-icon {
  width: 18px;
  height: 18px;
}

.cases-help__title {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 31px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.cases-help__text {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.case-opening {
  padding-top: 26px;
}

.case-opening__stage-wrap {
  position: relative;
}

.case-opening__price-pill {
  position: absolute;
  left: 50%;
  top: -2px;
  z-index: 2;
  min-width: 132px;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.case-opening__price-value {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}

.case-opening__price-digit {
  position: relative;
  width: 0.62em;
  height: 1.08em;
  overflow: hidden;
}

.case-opening__price-digit-track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  animation: case-price-roll 680ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--case-price-index) * 40ms);
  transform: translateY(calc(var(--case-price-target) * -1.08em));
}

.case-opening__price-digit-cell {
  height: 1.08em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-opening__price-icon {
  width: 14px;
  height: 14px;
}

.case-opening__stage {
  position: relative;
}

.case-opening__frame {
  width: 100%;
  display: block;
}

.case-opening__viewport {
  position: absolute;
  inset: 28px 76px 30px;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 24, 29, 0.68), rgba(8, 10, 14, 0.82));
  box-shadow: inset 0 0 0 1px rgba(168, 184, 204, 0.18), inset 0 16px 30px rgba(255, 255, 255, 0.025), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.case-opening__divider {
  position: absolute;
  top: 16px;
  bottom: 16px;
  width: 1px;
  border-left: 1px dashed rgba(210, 220, 234, 0.24);
  transform: translateX(-0.5px);
}

.case-open-count {
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.case-open-count__button {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.96);
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.case-open-count__button.is-active {
  background: rgba(255, 255, 255, 0.18);
}

.case-open-count__button:active:not(:disabled) {
  transform: scale(0.985);
}

.case-open-count__button:disabled {
  opacity: 0.56;
}

.case-spin-button {
  width: 100%;
  margin-top: 10px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}

.case-spin-button:active:not(:disabled) {
  transform: scale(0.988);
}

.case-spin-button.is-pending,
.case-spin-button:disabled {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(148, 163, 184, 0.18);
}

.case-prizes-accordion {
  margin-top: 12px;
  overflow-anchor: none;
}

.case-prizes-accordion__toggle {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background: #1a1a1a;
  color: #b1b1b1;
  transition: border-radius 260ms ease;
}

.case-prizes-accordion__title {
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.case-prizes-accordion__arrow {
  width: 16px;
  height: 24px;
  transform: translateY(2px) rotate(180deg);
  transition: transform 260ms ease-in-out;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  transform: translateY(2px) rotate(270deg);
}

.case-prizes-accordion.is-closing .case-prizes-accordion__arrow {
  transform: translateY(2px) rotate(180deg);
}

.case-prizes-accordion__panel {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.04);
  transform-origin: top center;
  animation: case-accordion-enter 280ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.case-prizes-accordion:not(.is-open) .case-prizes-accordion__panel {
  display: none;
}

.case-prizes-accordion.is-closing .case-prizes-accordion__panel {
  display: block;
  animation: case-accordion-leave 240ms ease both;
}

.case-prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-anchor: none;
}

.case-prize-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(10, 11, 14, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.case-prize-card__preview {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.case-prize-card__name {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-prize-card__chance {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0 6px 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(8, 9, 11, 0.82);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition: width 300ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 180ms ease-in-out, transform 220ms ease-in-out;
}

.case-prize-card__chance.is-open {
  width: 104px;
}

.case-prize-card__chance.is-closing {
  width: 24px;
}

.case-prize-card__chance-icon-wrap {
  width: 10px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.case-prize-card__chance-icon {
  width: 2px;
  height: 10px;
}

.case-prize-card__chance-text {
  color: #b0b0b0;
  font-size: 9px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 180ms ease-in-out, transform 220ms ease-in-out;
}

.case-prize-card__chance.is-open .case-prize-card__chance-text {
  opacity: 1;
  transform: translateX(0);
}

.case-prize-card__chance.is-closing .case-prize-card__chance-text {
  opacity: 0;
  transform: translateX(6px);
}

@keyframes case-price-roll {
  from {
    transform: translateY(calc((var(--case-price-target) - 5) * -1.08em));
  }
  to {
    transform: translateY(calc(var(--case-price-target) * -1.08em));
  }
}

@keyframes case-accordion-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}

@keyframes case-accordion-leave {
  from {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scaleY(0.96);
  }
}

.profile-edit-screen {
  --profile-hero-fill: #08090b;
  --profile-hero-solid: #08090b;
  --profile-accent-border: #4a4d55;
  background: var(--app-bg);
}

.profile-edit-hero {
  position: relative;
  min-height: calc(env(safe-area-inset-top) + 266px);
  overflow: hidden;
}

.profile-edit-hero__surface {
  position: absolute;
  inset: 0;
  background: var(--profile-hero-fill);
}

.profile-edit-hero__actions {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: var(--page-side);
  right: var(--page-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}

.profile-edit-hero__avatar-wrap {
  position: relative;
  z-index: 1;
  padding-top: calc(env(safe-area-inset-top) + 22px);
  display: flex;
  justify-content: center;
}

.profile-edit-avatar {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.profile-edit-avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(6, 7, 9, 0.34);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.profile-edit-avatar__inner {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  opacity: 0.95;
}

.profile-edit-hero__identity {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-edit-title {
  margin: 0;
  font-size: clamp(23px, 7.1vw, 30px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.profile-edit-body {
  padding: 0 0 calc(32px + env(safe-area-inset-bottom));
}


.profile-edit-panel {
  width: 100%;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.06));
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.profile-edit-panel--appearance {
  margin-top: 0;
}

.profile-edit-panel--nft {
  margin-top: 0;
}

.profile-edit-hero__actions .icon-button {
  width: 54px;
  height: 54px;
}


.profile-edit-swatches-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}

.profile-edit-swatches-row + .profile-edit-swatches-row {
  margin-top: 14px;
}

.profile-edit-swatch {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--swatch-fill);
}

.profile-edit-swatch__inner {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.profile-edit-swatch.is-selected .profile-edit-swatch__inner {
  inset: 6px;
  background: var(--swatch-fill);
  box-shadow: 0 0 0 2px var(--swatch-gap-color);
}

.profile-edit-swatch--placeholder {
  display: grid;
  place-items: center;
  background: transparent;
}

.profile-edit-swatch__placeholder-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.92);
}

.profile-edit-divider {
  margin: 16px 0 12px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.profile-edit-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-edit-section__title {
  color: #dbdada;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 300;
}

.profile-edit-emoji-placeholder {
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.54);
}

.profile-edit-links {
  margin-top: 0;
  padding: 12px 16px 14px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--app-bg);
}


.profile-edit-link {
  color: #7e7e7e;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 300;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.profile-edit-nft__title {
  color: #dbdada;
  font-size: 22px;
  line-height: 1.12;
  font-weight: 500;
}

.profile-edit-search {
  min-height: 42px;
  margin-top: 14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(7, 7, 9, 0.58);
}

.profile-edit-search__icon {
  width: 15px;
  height: 15px;
  opacity: 0.92;
}

.profile-edit-search__text {
  color: #7e7e7e;
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
}

.profile-edit-chips {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-edit-chip {
  min-height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #dbdada;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
}

.profile-edit-chip.is-active {
  background: rgba(255, 255, 255, 0.10);
}

@media (max-width: 389px) {
  .profile-edit-hero {
    min-height: calc(env(safe-area-inset-top) + 248px);
  }

  .profile-edit-avatar {
    width: 118px;
    height: 118px;
  }

  .profile-edit-avatar__inner {
    width: 40px;
    height: 40px;
  }

  .profile-edit-body {
    padding-left: 0;
    padding-right: 0;
  }

  .profile-edit-panel {
    padding-left: 14px;
    padding-right: 14px;
  }

  .profile-edit-swatches-row {
    gap: 10px;
  }

  .profile-edit-search__text {
    font-size: 13px;
  }

  .profile-edit-links {
    gap: 14px;
  }
}


.games-screen {
  background: var(--app-bg);
}

.games-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 6px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 68%, rgba(8, 9, 11, 0) 100%);
}

.games-screen__top-shell > * {
  pointer-events: auto;
}

.games-screen__content {
  padding: 2px 15px 0;
}

.games-balance,
.slot-balance,
.cases-balance {
  min-height: 41px;
  padding: 0 14px 0 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 10px;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(0, 0, 0, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.games-balance__icon,
.slot-balance__icon,
.cases-balance__icon {
  width: 19px;
  height: 19px;
  opacity: 0.94;
}

.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  color: #dbdada;
  line-height: 1;
  letter-spacing: -0.03em;
}

.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole {
  color: #dbdada;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
}

.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal {
  margin-left: 1px;
  color: rgba(219, 218, 218, 0.52);
  font-size: 14px;
  line-height: 1.05;
  font-weight: 500;
  transform: translateY(-1px);
}

.games-section-title {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.games-section-title + .games-card-stack {
  margin-top: 12px;
}

.games-section-title__line {
  height: 2px;
  border-radius: 999px;
  background: rgba(217, 217, 217, 0.92);
}

.games-section-title__text {
  color: #dbdada;
  font-size: clamp(30px, 8vw, 38px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.games-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.games-card-stack--secondary {
  margin-bottom: 2px;
}

.game-card {
  position: relative;
  width: 100%;
  min-height: 113px;
  overflow: hidden;
  border-radius: 17px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
}

.game-card--featured {
  padding: 14px 138px 14px 15px;
}

.game-card--secondary {
  padding: 14px 16px 14px 15px;
}

.game-card--secondary.game-card--with-art {
  padding-right: 138px;
}

.game-card__copy {
  position: relative;
  z-index: 1;
  max-width: 100%;
}

.game-card__title {
  color: #dbdada;
  font-size: 24px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.game-card__description {
  margin-top: 7px;
  color: #acacac;
  font-size: 15px;
  line-height: 1.22;
  font-weight: 200;
  letter-spacing: -0.02em;
}

.game-card--featured .game-card__copy {
  max-width: 246px;
}

.game-card--secondary .game-card__copy {
  max-width: 252px;
}

.game-card--secondary.game-card--with-art .game-card__copy {
  max-width: 246px;
}

.game-card__art {
  position: absolute;
  right: -8px;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}

.game-card__image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

.game-card--cases .game-card__art {
  width: 136px;
  right: -1px;
  top: 4px;
}

.game-card--slot .game-card__art {
  width: 141px;
  right: -6px;
  top: -1px;
}

.game-card--mines .game-card__art {
  width: 150px;
  right: -20px;
  top: -2px;
  transform: rotate(18deg);
}

.game-card--plinko .game-card__art {
  width: 149px;
  right: -10px;
  top: -5px;
}

.game-card--rocket .game-card__art {
  width: 153px;
  right: -13px;
  top: -3px;
  transform: rotate(-6deg);
}

.game-card--ring .game-card__art {
  width: 165px;
  right: -27px;
  top: -16px;
}

.game-card--roulette .game-card__art {
  width: 154px;
  right: -16px;
  top: -12px;
  transform: rotate(10deg);
}

@media (max-width: 389px) {
  .games-screen__top-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .games-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .games-section-title__text {
    font-size: 34px;
  }

  .game-card--featured {
    padding-right: 126px;
  }

  .game-card--featured .game-card__copy {
    max-width: 224px;
  }

  .game-card__title {
    font-size: 22px;
  }

  .game-card__description {
    font-size: 14px;
  }

  .game-card--cases .game-card__art {
    width: 130px;
  }

  .game-card--slot .game-card__art {
    width: 136px;
  }

  .game-card--mines .game-card__art {
    width: 144px;
    right: -22px;
  }

  .game-card--plinko .game-card__art {
    width: 143px;
  }

  .game-card--rocket .game-card__art {
    width: 146px;
    right: -15px;
  }

  .game-card--ring .game-card__art {
    width: 159px;
    right: -30px;
  }

  .game-card--roulette .game-card__art {
    width: 148px;
    right: -18px;
  }
}

.game-card--interactive {
  display: block;
  text-align: left;
}

.slot-screen {
  position: relative;
  background: var(--app-bg);
}

.slot-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 70%, rgba(8, 9, 11, 0) 100%);
}

.slot-screen__top-shell > * {
  pointer-events: auto;
}

.slot-screen__content {
  min-height: 100%;
  padding: 2px 15px calc(18px + env(safe-area-inset-bottom));
}

.slot-header-panel {
  margin-top: 15px;
  min-height: 68px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  border-radius: 34px;
  background: #1a1a1a;
}

.slot-header-panel__button {
  justify-self: center;
}

.slot-header-panel__title {
  justify-self: center;
  color: #dbdada;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.slot-header-panel__help-icon {
  width: 14px;
  height: 26px;
}

.slot-header-toast-slot {
  position: relative;
  height: 0;
  overflow: visible;
}

.slot-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  top: calc(6px + (var(--slot-toast-index, 0) * 44px));
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.34);
  transform: translateY(-16px) scale(0.988);
  opacity: 0;
  z-index: calc(12 - var(--slot-toast-index, 0));
  pointer-events: none;
  will-change: transform, opacity, top;
  transition:
    top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.slot-toast.is-visible,
.slot-toast.is-entered {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.slot-toast.is-hiding {
  opacity: 0;
  transform: translateY(-10px) scale(0.992);
}

.slot-toast--lose {
  background: rgba(77, 24, 24, 0.94);
}

.slot-toast--win {
  background: rgba(20, 66, 38, 0.94);
}

.slot-toast__text,
.slot-toast__amount {
  color: rgba(255, 255, 255, 0.96);
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.slot-toast__amount {
  font-weight: 600;
}

.slot-toast__icon {
  width: 14px;
  height: 14px;
}


.slot-machine {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}

.slot-stage-wrap {
  width: min(100%, 294px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-stage {
  position: relative;
  width: 100%;
  height: 100%;
  contain: layout paint size;
}

.slot-stage__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.slot-stage__layer-content {
  position: absolute;
  inset: 0;
}

.slot-stage__layer > svg,
.slot-stage__layer > canvas,
.slot-stage__layer > div,
.slot-stage__layer > video,
.slot-stage__layer > img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.slot-stage__media {
  object-fit: contain;
}

.slot-spin-button {
  width: 100%;
  margin-top: 10px;
  min-height: 66px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 21px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  backdrop-filter: blur(10px) saturate(118%);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(29px, 8vw, 38px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  transition:
    opacity 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease,
    color 180ms ease;
}

.slot-spin-button:active:not(:disabled) {
  transform: scale(0.988);
}

.slot-spin-button.is-pending,
.slot-spin-button:disabled {
  color: rgba(255, 255, 255, 0.70);
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(148, 163, 184, 0.18);
}

.slot-controls {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.slot-controls.is-pending {
  opacity: 0.92;
}

.slot-controls__label {
  color: #d6d6d6;
  font-size: 22px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.slot-bet-control {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 31px;
  gap: 10px;
  align-items: center;
}

.slot-bet-control__button {
  width: 31px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.96);
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.slot-bet-control__button:disabled {
  color: rgba(255, 255, 255, 0.56);
  background: rgba(0, 0, 0, 0.12);
  border-color: rgba(148, 163, 184, 0.14);
}

.slot-bet-control__glyph {
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.slot-bet-control__icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.slot-bet-control__field,
.slot-placeholder-field {
  min-height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.slot-bet-control__field.is-disabled,
.slot-controls.is-pending .slot-placeholder-field {
  color: rgba(255, 255, 255, 0.48);
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(0, 0, 0, 0.08);
}

.slot-bet-control__value {
  font-size: 17px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.slot-controls__divider {
  margin: 10px 0 8px;
  height: 1px;
  background: rgba(255, 255, 255, 0.10);
}

.slot-placeholder-field {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 15px;
  line-height: 1;
}

.slot-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  padding: calc(18px + env(safe-area-inset-top)) 15px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 11, 0.60);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.slot-help {
  position: relative;
  width: min(100%, 318px);
  padding: 12px 14px 14px;
  border-radius: 27px;
  border: 1px solid rgba(148, 163, 184, 0.20);
  background: #08090B;
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.52);
}

.slot-help__accent {
  width: calc(100% - 58px);
  height: 4px;
  border-radius: 999px;
  background: #f66b59;
}

.slot-help__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c95a59;
}

.slot-help__close-icon {
  width: 18px;
  height: 18px;
}

.slot-help__title {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 31px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.slot-help__text {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.slot-help__subtitle {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.slot-help__combo-grid {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.slot-help__combo-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-help__combo-icons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.slot-help__combo-symbol {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.slot-help__combo-value {
  color: rgba(255, 255, 255, 0.98);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
}

@media (max-width: 389px) {
  .slot-screen__top-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slot-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .slot-header-panel__title {
    font-size: 28px;
  }

  .slot-machine__machine {
    width: min(100%, 310px);
  }

  .slot-spin-button {
    min-height: 64px;
    font-size: clamp(27px, 7vw, 34px);
  }

  .slot-controls__label {
    font-size: 20px;
  }

  .slot-placeholder-field,
  .slot-bet-control__value {
    font-size: 15px;
  }

  .slot-help {
    width: min(100%, 306px);
  }

  .slot-help__title {
    font-size: 28px;
  }

  .slot-help__text {
    font-size: 15px;
  }

  .slot-help__subtitle {
    font-size: 22px;
  }
}


.cases-screen,
.case-detail-screen {
  position: relative;
  background: var(--app-bg);
}

.cases-screen__top-shell,
.case-detail-screen__top-shell {
  position: sticky;
  top: 0;
  z-index: 14;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 9, 11, 0.98) 0%, rgba(8, 9, 11, 0.92) 70%, rgba(8, 9, 11, 0) 100%);
}

.cases-screen__top-shell > *,
.case-detail-screen__top-shell > * {
  pointer-events: auto;
}

.cases-screen__content,
.case-detail-screen__content {
  min-height: 100%;
  padding: 2px 15px calc(18px + env(safe-area-inset-bottom));
}

.cases-header-panel {
  margin-top: 15px;
  min-height: 68px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 6px;
  border-radius: 34px;
  background: #1a1a1a;
}

.cases-header-panel__button {
  justify-self: center;
}

.cases-header-panel__title {
  justify-self: center;
  width: 100%;
  color: #dbdada;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-align: center;
}

.cases-header-panel__title--detail {
  display: -webkit-box;
  align-self: center;
  font-size: clamp(16px, 4.9vw, 24px);
  line-height: 1;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.cases-header-panel__title--detail-small {
  font-size: clamp(15px, 4.4vw, 20px);
}

.cases-header-panel__title--detail-tiny {
  font-size: clamp(14px, 4vw, 17px);
}

.cases-header-panel__title--detail-micro {
  font-size: clamp(12.5px, 3.6vw, 14.5px);
  letter-spacing: -0.03em;
}

.cases-header-panel__help-icon {
  width: 14px;
  height: 26px;
}

.cases-header-panel__spacer {
  width: 46px;
  height: 46px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.case-card {
  --case-card-outline: rgba(166, 186, 214, 0.52);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 21px;
  border: 1px solid var(--case-card-outline);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.56));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(166, 186, 214, 0.05);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.case-card:active {
  transform: scale(0.985);
}

.case-card__art {
  position: relative;
  z-index: 1;
  aspect-ratio: 1 / 0.9;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(circle at 50% 14%, rgba(87, 11, 28, 0.24), transparent 60%);
}

.case-card__image {
  width: 104%;
  height: auto;
  max-width: none;
  display: block;
  transform: translateY(18px) scale(1);
}

.case-card__meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  background: linear-gradient(180deg, rgba(16, 11, 14, 0), rgba(0, 0, 0, 0.18) 16%, rgba(0, 0, 0, 0.38));
}

.case-card__title-strip {
  position: relative;
  z-index: 3;
  min-height: 50px;
  width: calc(100% + 2px);
  margin: -34px -1px 0;
  padding: 0 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(14, 19, 27, 0.18);
  box-shadow: inset 0 0 0 1px var(--case-card-outline), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(165%);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
}

.case-card__title-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015));
  pointer-events: none;
}

.case-card__title {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.95);
  font-size: 17px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: center;
}

.case-card__title-text {
  display: -webkit-box;
  max-height: calc(1.08em * 2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

.case-card__title--small {
  font-size: 15px;
}

.case-card__title--tiny {
  font-size: 13px;
}

.case-card__price-row {
  padding: 0 10px;
}

.case-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.case-card__price-icon {
  width: 13px;
  height: 13px;
}

.cases-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  padding: calc(18px + env(safe-area-inset-top)) 15px calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 11, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.cases-help {
  position: relative;
  width: min(100%, 334px);
  padding: 12px 14px 14px;
  border-radius: 27px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(8, 9, 11, 0.94);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.52);
}

.cases-help__accent {
  width: calc(100% - 58px);
  height: 4px;
  border-radius: 999px;
  background: #f66b59;
}

.cases-help__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #c95a59;
}

.cases-help__close-icon {
  width: 18px;
  height: 18px;
}

.cases-help__title {
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.98);
  font-size: 31px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.cases-help__text {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.case-opening {
  padding-top: 78px;
}

.case-opening__stage-wrap {
  position: relative;
}

.case-opening__price-pill {
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 3;
  min-width: 118px;
  min-height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.case-opening__price-icon {
  width: 14px;
  height: 14px;
}

.case-opening__stage {
  --case-opening-stage-outline: rgba(166, 186, 214, 0.34);
  --case-opening-stage-inset-x: clamp(6px, 1.9vw, 10px);
  --case-opening-stage-inset-y: clamp(3px, 0.9vw, 5px);
  position: relative;
  isolation: isolate;
}

.case-opening__frame {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
}

.case-opening__viewport {
  position: absolute;
  z-index: 0;
  inset: var(--case-opening-stage-inset-y) var(--case-opening-stage-inset-x);
  overflow: hidden;
  border-radius: 21px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(180deg, rgba(12, 14, 21, 0.76), rgba(5, 7, 12, 0.82));
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.11), inset 0 -1px 0 rgba(148, 163, 184, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(122%);
  backdrop-filter: blur(14px) saturate(122%);
  isolation: isolate;
}

.case-opening__viewport::before {
  content: none;
}

.case-opening__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
  pointer-events: none;
}

.case-opening__divider {
  position: absolute;
  z-index: 1;
  top: 14px;
  bottom: 14px;
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, 0.24);
  transform: translateX(-0.5px);
}

.case-open-count {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.case-open-count__button {
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.96);
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.case-open-count__button.is-active {
  background: rgba(255, 255, 255, 0.18);
}

.case-open-count__button:active:not(:disabled) {
  transform: scale(0.985);
}

.case-open-count__button:disabled {
  opacity: 0.56;
}

.case-spin-button {
  width: 100%;
  margin-top: 10px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  transition: opacity 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, color 180ms ease;
}

.case-spin-button:active:not(:disabled) {
  transform: scale(0.988);
}

.case-spin-button.is-pending,
.case-spin-button:disabled {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.16);
  border-color: rgba(148, 163, 184, 0.18);
}

.case-prizes-accordion {
  margin-top: 12px;
}

.case-prizes-accordion__toggle {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  background: #1a1a1a;
  color: #b1b1b1;
}

.case-prizes-accordion__title {
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.case-prizes-accordion__arrow {
  width: 16px;
  height: 24px;
  transform: rotate(180deg);
  transition: transform 260ms ease-in-out;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  transform: rotate(270deg);
}

.case-prizes-accordion__panel {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.case-prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.case-prize-card {
  position: relative;
  min-height: 142px;
  padding: 10px 8px 8px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(10, 11, 14, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.case-prize-card__preview {
  height: 76px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.case-prize-card__name {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.case-prize-card__chance {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  padding: 0 7px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(8, 9, 11, 0.82);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  transition: width 260ms ease-in-out, opacity 180ms ease-in-out, transform 180ms ease-in-out;
}

.case-prize-card__chance.is-open {
  width: 78px;
}

.case-prize-card__chance.is-open-left {
  left: auto;
  right: 8px;
}

.case-prize-card__chance-icon-wrap {
  width: 8px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.case-prize-card__chance-icon {
  width: 2px;
  height: 10px;
}

.case-prize-card__chance-text {
  color: #b0b0b0;
  font-size: 9px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease-in-out;
}

.case-prize-card__chance.is-open .case-prize-card__chance-text {
  opacity: 1;
}

@media (max-width: 389px) {
  .cases-screen__top-shell,
  .case-detail-screen__top-shell {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cases-screen__content,
  .case-detail-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .cases-header-panel__title {
    font-size: 28px;
  }

  .cases-header-panel__title--detail {
    font-size: clamp(15px, 5vw, 20px);
  }

  .cases-header-panel__title--detail-small {
    font-size: clamp(14px, 4.4vw, 18px);
  }

  .cases-header-panel__title--detail-tiny {
    font-size: clamp(13px, 4vw, 15.5px);
  }

  .cases-header-panel__title--detail-micro {
    font-size: clamp(11.5px, 3.7vw, 13.5px);
  }

  .case-card__title-strip {
    min-height: 46px;
    margin-top: -30px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .case-card__title {
    font-size: 15px;
  }

  .case-card__title--small {
    font-size: 14px;
  }

  .case-card__title--tiny {
    font-size: 12px;
  }

  .case-card__price {
    font-size: 17px;
  }

  .case-card__price-icon {
    width: 13px;
    height: 13px;
  }

  .case-open-count__button {
    min-height: 46px;
    font-size: 22px;
  }

  .case-spin-button {
    min-height: 50px;
    font-size: clamp(22px, 7vw, 30px);
  }

  .case-prizes-grid {
    gap: 10px;
  }

  .case-opening__stage {
    --case-opening-stage-inset-x: 8px;
    --case-opening-stage-inset-y: 3px;
  }

  .case-prize-card {
    padding-left: 7px;
    padding-right: 7px;
  }
}


/* case-detail polish v9 */
.case-opening {
  padding-top: 18px;
}

.case-opening__stage-wrap {
  margin-top: 0;
}

.case-opening__price-pill {
  top: -13px;
}

.case-opening__stage {
  --case-opening-stage-inset-x: clamp(2px, 0.8vw, 5px);
  --case-opening-stage-inset-y: clamp(3px, 0.9vw, 5px);
}

.case-opening__viewport {
  inset: var(--case-opening-stage-inset-y) var(--case-opening-stage-inset-x);
}

.case-opening__divider {
  justify-self: end;
  align-self: stretch;
  width: var(--case-reels-gap);
  height: 100%;
  transform: translateX(calc(var(--case-reels-gap) / 2));
  border-radius: 0;
  background: linear-gradient(180deg, rgba(46, 50, 64, 0.92), rgba(18, 20, 28, 0.96));
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

.case-prizes-accordion__toggle {
  transition: background-color 220ms ease, color 220ms ease, transform 180ms ease;
}

.case-prizes-accordion,
.case-prizes-accordion__panel,
.case-prizes-grid {
  overflow-anchor: none;
}

.case-prizes-accordion__arrow {
  width: 16px;
  height: 24px;
  transform: rotate(180deg) translate(0, 0);
  transform-origin: center;
  transition: transform 260ms ease-in-out;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  transform: rotate(270deg) translate(0, -3px);
}

.case-prizes-accordion.is-closing .case-prizes-accordion__arrow {
  transform: rotate(180deg) translate(0, 0);
}

.case-prizes-accordion__panel {
  margin-top: 0;
  padding: 0 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0);
  overflow-anchor: none;
  will-change: max-height, opacity;
  transition:
    max-height 300ms ease,
    opacity 220ms ease,
    margin-top 300ms ease,
    padding-top 300ms ease,
    padding-bottom 300ms ease,
    border-color 300ms ease;
}

.case-prizes-accordion.is-open .case-prizes-accordion__panel {
  margin-top: 10px;
  padding-top: 12px;
  padding-bottom: 10px;
  max-height: none;
  overflow: visible;
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.04);
}

.case-prizes-accordion.is-closing .case-prizes-accordion__panel {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 0;
  opacity: 0;
  border-color: rgba(255, 255, 255, 0);
}

.case-prize-card {
  min-height: 0;
  padding: 10px 8px 8px;
  display: flex;
  flex-direction: column;
}

.case-prize-card__preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.case-prize-card__name {
  margin-top: auto;
  padding-top: 5px;
  min-height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.case-prize-card__chance {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0 8px 0 7px;
  justify-content: flex-start;
  gap: 6px;
  transition: width 260ms ease-in-out, opacity 180ms ease-in-out, transform 180ms ease-in-out, background-color 180ms ease-in-out, border-color 180ms ease-in-out;
}

.case-prize-card__chance.is-open {
  width: var(--case-prize-chance-open-width, 80px);
}

.case-prize-card__chance.is-closing {
  width: 24px;
}

.case-prize-card__chance-icon-wrap {
  width: 8px;
  height: 14px;
}

.case-prize-card__chance-text {
  order: 2;
  font-size: 9px;
  transform: translateX(2px);
  transition: opacity 180ms ease-in-out, transform 220ms ease-in-out;
}

.case-prize-card__chance.is-open .case-prize-card__chance-text {
  opacity: 1;
  transform: translateX(0);
}

.case-prize-card__chance.is-closing .case-prize-card__chance-text {
  opacity: 0;
  transform: translateX(2px);
}

/* case-detail nft reels */
.case-opening__stage-wrap {
  position: relative;
}

.case-opening__stage-host {
  width: 100%;
}

.case-opening__stage {
  width: 100%;
}

.case-opening__viewport {
  position: relative;
  inset: auto;
  width: min(100%, calc((var(--case-reel-count, 1) * 148px) + ((var(--case-reel-count, 1) - 1) * 10px)));
  margin: 0 auto;
  padding: 14px;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(circle at top center, rgba(251, 113, 133, 0.16), transparent 48%),
    linear-gradient(180deg, rgba(15, 17, 25, 0.98), rgba(6, 8, 14, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(148, 163, 184, 0.12),
    0 18px 28px rgba(0, 0, 0, 0.28);
  isolation: isolate;
}

.case-opening__viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.74), rgba(5, 7, 12, 0) 16%, rgba(5, 7, 12, 0) 84%, rgba(5, 7, 12, 0.74)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, 0.02));
  pointer-events: none;
  z-index: 3;
}

.case-opening__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
  pointer-events: none;
}

.case-reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--case-reel-count, 1), minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.case-reel {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 18px rgba(0, 0, 0, 0.22);
  transform: translateZ(0);
}

.case-reel::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  z-index: 2;
}

.case-reel__track {
  display: flex;
  flex-direction: column;
  height: 100%;
  transform: translateY(var(--case-reel-end-offset, 0%));
  will-change: transform;
}

.case-reel__track.is-spinning {
  animation: case-reel-spin var(--case-reel-duration, 6000ms) linear var(--case-reel-delay, 0ms) both;
}

.case-reel__item {
  flex: 0 0 100%;
  min-height: 0;
}

.case-nft-art {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  isolation: isolate;
}

.case-nft-art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, 0.16));
  z-index: 2;
  pointer-events: none;
}

.case-nft-art__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.case-nft-art__layer--background,
.case-nft-art__layer--pattern {
  object-fit: cover;
}

.case-nft-art__layer--pattern {
  opacity: 0.48;
}

.case-nft-art__layer--item {
  z-index: 1;
  object-fit: contain;
  padding: 12%;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.22));
}

.case-nft-art--preview .case-nft-art__layer--item {
  padding: 15%;
}

.case-nft-art--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top center, rgba(248, 113, 113, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(39, 42, 54, 0.92), rgba(11, 13, 21, 0.96));
}

.case-nft-art__fallback-copy {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(18px, 4vw, 26px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.case-prize-card__preview {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.case-prize-card__preview .case-nft-art {
  border-radius: 12px;
}

@keyframes case-reel-spin {
  0% {
    transform: translateY(calc(-1 * var(--case-reel-start-step, 0) * var(--case-reel-step-size)));
    animation-timing-function: cubic-bezier(0.42, 0, 0.62, 0.98);
  }

  12% {
    transform: translateY(calc(-1 * (var(--case-reel-start-step, 0) - ((var(--case-reel-start-step, 0) - var(--case-reel-end-step, 0)) * 0.08)) * var(--case-reel-step-size)));
    animation-timing-function: cubic-bezier(0.18, 0.88, 0.22, 1);
  }

  76% {
    transform: translateY(calc(-1 * (var(--case-reel-start-step, 0) - ((var(--case-reel-start-step, 0) - var(--case-reel-end-step, 0)) * 0.93)) * var(--case-reel-step-size)));
    animation-timing-function: cubic-bezier(0.16, 0.02, 0.18, 1);
  }

  100% {
    transform: translateY(calc(-1 * var(--case-reel-end-step, 0) * var(--case-reel-step-size)));
  }
}

@media (max-width: 389px) {
  .case-opening__viewport {
    padding: 10px;
    border-radius: 24px;
  }

  .case-reels {
    gap: 8px;
  }

  .case-reel {
    border-radius: 18px;
  }

  .case-reel::after {
    inset: 6px;
    border-radius: 13px;
  }
}

/* case-detail nft stage v2 */
.case-opening {
  padding-top: 24px;
}

.case-opening__stage-wrap {
  position: relative;
}

.case-opening__stage-host {
  width: 100%;
}

.case-opening__stage {
  position: relative;
  width: 100%;
  max-width: 416px;
  margin: 0 auto;
  aspect-ratio: 416 / 296;
  isolation: isolate;
}

.case-opening__frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.case-opening__viewport {
  --case-reels-gap: 4px;
  position: absolute;
  inset: 4px 2px 6px;
  z-index: 1;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.08), transparent 44%),
    linear-gradient(180deg, rgba(23, 25, 34, 0.98), rgba(6, 8, 12, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(148, 163, 184, 0.14),
    0 14px 24px rgba(0, 0, 0, 0.22);
}

.case-opening__viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 88%, rgba(255, 255, 255, 0.04));
  pointer-events: none;
}

.case-opening__viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.08);
  pointer-events: none;
}

.case-opening__dividers {
  position: absolute;
  inset: 0 8px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(var(--case-reel-count, 1), minmax(0, 1fr));
  column-gap: var(--case-reels-gap);
  pointer-events: none;
}

.case-opening__divider {
  position: relative;
  justify-self: end;
  align-self: stretch;
  width: 1px;
  margin-top: 0;
  margin-bottom: 0;
  transform: translateX(calc(var(--case-reels-gap) / 2));
  background: rgba(148, 163, 184, 0.24);
}

.case-reels {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--case-reel-count, 1), minmax(0, 1fr));
  gap: var(--case-reels-gap);
  align-items: stretch;
}

.case-reel {
  --case-visible-rows: var(--case-stage-visible-rows, 4);
  --case-reel-gap: clamp(3px, 0.9vw, 5px);
  --case-reel-card-size: var(--case-reel-card-size-px, calc((100% - ((var(--case-visible-rows) - 1) * var(--case-reel-gap))) / var(--case-visible-rows)));
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.case-reel::after {
  content: none;
}

.case-reel__track {
  --case-reel-step-size: calc(var(--case-reel-card-size) + var(--case-reel-gap));
  display: flex;
  flex-direction: column;
  gap: var(--case-reel-gap);
  transform: translateY(calc(-1 * var(--case-reel-start-step, 0) * var(--case-reel-step-size)));
  will-change: transform;
}

.case-reel__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--case-reel-card-size);
  min-height: var(--case-reel-card-size);
}

.case-reel__card {
  width: var(--case-reel-card-size);
  height: var(--case-reel-card-size);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: clamp(10px, 16%, 18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 24px rgba(0, 0, 0, 0.22);
}

.case-nft-art {
  --case-nft-pattern-color: rgba(255, 255, 255, 0.16);
  --case-nft-pattern-opacity: 0.3;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  isolation: isolate;
}

.case-nft-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.case-nft-art__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.case-nft-art__layer--background {
  z-index: 0;
  object-fit: cover;
}

.case-nft-art__pattern-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.case-nft-art__pattern-mark {
  position: absolute;
  left: var(--case-pattern-left);
  top: var(--case-pattern-top);
  width: var(--case-pattern-size);
  aspect-ratio: 1 / 1;
  background-image: var(--case-nft-pattern-image);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: var(--case-nft-pattern-opacity);
  transform: translate(-50%, -50%) rotate(var(--case-pattern-rotate, 0deg));
  pointer-events: none;
}

.case-nft-art__pattern-mark--soft {
  opacity: calc(var(--case-nft-pattern-opacity) * 0.82);
}

.case-nft-art__layer--item {
  z-index: 3;
  object-fit: contain;
  padding: 12%;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.22));
}

.case-nft-art--preview {
  --case-nft-pattern-opacity: 0.26;
}

.case-nft-art--preview .case-nft-art__layer--item {
  padding: 14%;
}

.case-nft-art--reel {
  --case-nft-pattern-opacity: 0.29;
}

.case-prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.case-prize-card {
  position: relative;
  min-height: 0;
  padding: 7px 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.case-prize-card__preview {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.case-prize-card__preview .case-nft-art {
  border-radius: 12px;
}

.case-prize-card__meta {
  position: relative;
  z-index: 2;
  margin-top: 0;
  min-height: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.case-prize-card__name {
  margin: 0;
  min-height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: none;
}

.case-prize-card__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 14px;
  color: rgba(207, 214, 226, 0.78);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
}

.case-prize-card__price-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.case-prize-card__price-whole {
  color: rgba(207, 214, 226, 0.78);
}

.case-prize-card__price-decimal {
  color: rgba(207, 214, 226, 0.46);
}

.case-prize-card__price-icon {
  width: 11px;
  height: 11px;
  opacity: 0.88;
}

.case-prize-card__chance {
  z-index: 5;
}

@media (max-width: 389px) {
  .case-opening__stage {
    max-width: none;
  }

  .case-opening__viewport {
    inset: 4px 2px 6px;
    --case-reels-gap: 4px;
    padding: 0 7px;
    border-radius: 22px;
  }

  .case-opening__dividers {
    inset: 0 7px;
  }

  .case-reels {
    gap: var(--case-reels-gap);
  }

  .case-reel__card {
    border-radius: clamp(9px, 16%, 15px);
  }

  .case-prizes-grid {
    gap: 10px;
  }
}

/* case-detail stage final refinement */
.case-opening__stage--count-1 {
  --case-stage-visible-rows: 2.24;
}

.case-opening__stage--count-2 {
  --case-stage-visible-rows: 2.84;
}

.case-opening__dividers,
.case-opening__divider {
  display: none !important;
}

.case-reel,
.case-reel::before,
.case-reel::after {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.case-reel::before,
.case-reel::after {
  content: none !important;
}

.case-reel__track {
  height: max-content;
  transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-start-position, var(--case-reel-start-step, 0)) * var(--case-reel-step-size))));
}

.case-reel__track.is-spinning {
  animation: case-reel-spin-smooth var(--case-reel-duration, 8500ms) var(--case-reel-delay, 0ms) both;
}

@keyframes case-reel-spin-smooth {
  0% {
    transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-start-position, var(--case-reel-start-step, 0)) * var(--case-reel-step-size))));
    animation-timing-function: cubic-bezier(0.3, 0.04, 0.18, 1);
  }

  94.117647% {
    transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-settle-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))));
    animation-timing-function: cubic-bezier(0.19, 0.82, 0.22, 1);
  }

  100% {
    transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))));
  }
}

.case-reel__item {
  position: relative;
  transition:
    opacity 300ms ease,
    filter 300ms ease,
    transform 300ms ease;
}

.case-reel__card {
  position: relative;
  width: min(100%, var(--case-reel-card-size));
  height: min(100%, var(--case-reel-card-size));
  max-width: 100%;
  max-height: 100%;
}

.case-reel__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(2, 4, 8, 0);
  pointer-events: none;
  transition: background 300ms ease;
}

.case-reel__item--winning {
  z-index: 2;
}

.case-reel__item--resolved-out {
  opacity: 0.18;
  filter: saturate(0.38) brightness(0.48);
}

.case-reel__item--resolved-out .case-reel__card::after {
  background: rgba(2, 4, 8, 0.6);
}

.case-reel__item--pending-out {
  animation:
    case-reel-dim-in 500ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-out 500ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.case-reel__item--pending-out .case-reel__card::after {
  animation:
    case-reel-dim-overlay-in 500ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-overlay-out 500ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes case-reel-dim-in {
  from {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }

  to {
    opacity: 0.18;
    filter: saturate(0.38) brightness(0.48);
  }
}

@keyframes case-reel-dim-out {
  from {
    opacity: 0.18;
    filter: saturate(0.38) brightness(0.48);
  }

  to {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
}

@keyframes case-reel-dim-overlay-in {
  from {
    background: rgba(2, 4, 8, 0);
  }

  to {
    background: rgba(2, 4, 8, 0.6);
  }
}

@keyframes case-reel-dim-overlay-out {
  from {
    background: rgba(2, 4, 8, 0.6);
  }

  to {
    background: rgba(2, 4, 8, 0);
  }
}

.case-prizes-accordion__arrow {
  display: block;
  position: relative;
  top: 1px;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  top: 0;
  transform: rotate(270deg) translate(0, -5px);
}

.case-prize-card {
  padding: 8px 8px 6px;
  gap: 5px;
}

.case-prize-card__preview {
  transform: translateY(0);
}

.case-prize-card__name {
  padding-top: 0;
  align-items: flex-start;
  transform: translateY(1px);
}

@media (max-width: 389px) {
  .case-opening__stage--count-1 {
    --case-stage-visible-rows: 2.18;
  }

  .case-opening__stage--count-2 {
    --case-stage-visible-rows: 2.74;
  }

  .case-opening__dividers {
    right: 7px;
    left: 7px;
  }

  .case-opening__divider::before {
    top: 4px;
    bottom: 4px;
  }
}


.cases-empty-state {
  padding: 22px 18px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.cases-empty-state__title {
  color: rgba(255, 255, 255, 0.94);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
}

.cases-empty-state__text {
  margin-top: 8px;
  color: rgba(207, 214, 226, 0.72);
  font-size: 13px;
  line-height: 1.35;
}

.case-opening__stage--empty {
  position: relative;
}

.case-opening__empty-state {
  position: absolute;
  inset: 28px 76px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(22, 24, 29, 0.68), rgba(8, 10, 14, 0.82));
  box-shadow: inset 0 0 0 1px rgba(168, 184, 204, 0.18), inset 0 16px 30px rgba(255, 255, 255, 0.025), 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.case-prizes-grid__empty {
  grid-column: 1 / -1;
  padding: 16px 10px;
  border-radius: 14px;
  text-align: center;
  color: rgba(207, 214, 226, 0.68);
  font-size: 13px;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.03);
}

.case-reels {
  transform: scaleY(-1);
  transform-origin: center;
}

.case-reel__card {
  transform: scaleY(-1);
}

.case-prize-card__price {
  font-size: 13px;
}

.case-prize-card__price-whole {
  color: rgba(232, 238, 248, 0.86);
}

.case-prize-card__price-decimal {
  margin-left: 1px;
  color: rgba(232, 238, 248, 0.52);
  font-size: 0.74em;
  font-weight: 500;
}

.case-prize-card__chance.is-open {
  width: var(--case-prize-chance-open-width, 104px);
}

.case-nft-art--transparent {
  background: transparent;
}

.case-nft-art--transparent::before {
  content: none;
}

.case-nft-art--transparent .case-nft-art__layer--item {
  padding: 9%;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2));
}

.case-reel__card .case-nft-art--transparent {
  background: transparent !important;
}

.case-reel__card .case-nft-art--transparent::before {
  content: none !important;
}

.case-reel__card--transparent-art {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.case-reel__card--transparent-art::after {
  content: none !important;
}


/* currency and automatic bonus prizes in cases */
.case-currency-art,
.case-bonus-art {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
}

.case-currency-art {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.28), transparent 46%),
    linear-gradient(180deg, rgba(18, 25, 44, 0.82), rgba(8, 10, 18, 0.95));
}

.case-currency-art__image {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.32));
}

.case-currency-art__amount {
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 52%;
  max-width: 92%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(10px, 2.8vw, 15px);
  line-height: 1;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.case-currency-art--reel .case-currency-art__amount {
  bottom: 6%;
  font-size: clamp(11px, 3.3vw, 17px);
}

.case-reel__card--currency {
  border-color: rgba(96, 165, 250, 0.32);
  background: rgba(37, 99, 235, 0.14);
}

.case-bonus-art {
  padding: 3px;
  background: rgba(0, 0, 0, 0.34);
}

.case-bonus-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, #ff8a00, #ffe66d, #ffb000, #ff6a00, #ffe66d);
  background-size: 260% 260%;
  animation: case-bonus-border-flow 1.8s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.case-bonus-art__glow {
  position: absolute;
  inset: 7%;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 183, 3, 0.34), transparent 64%);
  filter: blur(8px);
  opacity: 0.74;
  pointer-events: none;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: relative;
  z-index: 1;
  width: 92%;
  height: 92%;
  object-fit: contain;
  transition: opacity 120ms linear, transform 760ms ease-in-out;
  transform: scale(1);
}

.case-bonus-art__animation {
  display: none;
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0;
  transform: scale(1.08);
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  display: block;
  opacity: 1;
  transform: scale(1.08);
  animation: case-bonus-json-scale 760ms ease-in-out both;
}

.case-reel__card--bonus {
  overflow: visible;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(120, 53, 15, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(245, 158, 11, 0.14),
    0 16px 28px rgba(0, 0, 0, 0.25);
}

.case-reel__item--bonus.is-bonus-activating {
  z-index: 7;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus {
  animation: case-bonus-card-pop 760ms ease-in-out both;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus:not(.is-bonus-activating) {
  filter: brightness(0.8);
}

@keyframes case-bonus-border-flow {
  from { background-position: 0% 50%; }
  to { background-position: 260% 50%; }
}

@keyframes case-bonus-card-pop {
  0% { transform: scale(1); }
  28% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes case-bonus-json-scale {
  0% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* pc/case polish: currency, bonus, balance animation */
.case-currency-art {
  background: transparent !important;
}

.case-prize-card__preview .case-currency-art__amount {
  display: none !important;
}

.case-prize-card__preview .case-currency-art__image {
  width: 92%;
  height: 92%;
}

.case-reel__card--currency {
  border-color: rgba(96, 165, 250, 0.42) !important;
  background: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 14px 24px rgba(0, 0, 0, 0.2) !important;
}

.case-currency-art--reel .case-currency-art__image {
  width: 88%;
  height: 88%;
}

.case-currency-art__amount {
  font-size: clamp(8px, 2.5vw, 13px);
}

.case-currency-art--reel .case-currency-art__amount {
  bottom: 5.5%;
  min-width: 44%;
  max-width: 86%;
  padding: clamp(2px, calc(var(--case-reel-card-size-px, 72px) * 0.03), 4px) clamp(4px, calc(var(--case-reel-card-size-px, 72px) * 0.055), 7px);
  font-size: clamp(7px, calc(var(--case-reel-card-size-px, 72px) * 0.13), 13px);
  letter-spacing: -0.04em;
}

.balance-roll-digit {
  position: relative;
  display: inline-block;
  width: 0.57em;
  height: 1.08em;
  overflow: hidden;
  vertical-align: -0.08em;
}

.balance-roll-digit__track {
  display: flex;
  flex-direction: column;
  animation: balance-digit-roll 680ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  animation-delay: calc(var(--balance-roll-index, 0) * 34ms);
  transform: translateY(calc(var(--balance-roll-target) * -1.08em));
}

.balance-roll-digit__cell {
  height: 1.08em;
  line-height: 1.08em;
}

.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: balance-pill-pulse 680ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes balance-digit-roll {
  from {
    transform: translateY(calc((var(--balance-roll-target) - 5) * -1.08em));
  }
  to {
    transform: translateY(calc(var(--balance-roll-target) * -1.08em));
  }
}

@keyframes balance-pill-pulse {
  0% { transform: translateZ(0) scale(1); }
  36% { transform: translateZ(0) scale(1.025); }
  100% { transform: translateZ(0) scale(1); }
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item,
.case-opening__stage.is-bonus-sequence .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-bonus-art {
  overflow: visible !important;
}

.case-reel__item--bonus-visible {
  z-index: 6;
}

.case-bonus-art {
  padding: 2px;
  background: transparent !important;
}

.case-bonus-art::before {
  inset: 0;
  padding: clamp(1px, calc(var(--case-reel-card-size-px, 72px) * 0.025), 2px);
  background: conic-gradient(from 0turn, #ff7a00, #ffd86b, #fff2a8, #ffae00, #ff6a00, #ffcf54, #ff7a00);
  background-size: 100% 100%;
  animation: case-bonus-border-spin 2.1s linear infinite;
}

.case-bonus-art__glow {
  opacity: 0.58;
}

.case-bonus-art__image {
  z-index: 2;
}

.case-bonus-art__animation {
  position: absolute;
  inset: -13%;
  z-index: 3;
  width: 126%;
  height: 126%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: scale(1);
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0;
  transform: scale(1.04);
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1;
  animation: case-bonus-json-scale-refined 980ms ease-in-out both;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1;
  animation: case-bonus-json-scale-refined 980ms ease-in-out both;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align 520ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.case-reel__item--bonus-visible) {
  opacity: 0.18;
  filter: saturate(0.38) brightness(0.48);
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.case-reel__item--bonus-visible) .case-reel__card::after {
  background: rgba(2, 4, 8, 0.6);
}

.case-reel__item--bonus.is-bonus-activating {
  z-index: 20;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus {
  animation: case-bonus-card-pop-refined 980ms ease-in-out both;
}

@keyframes case-bonus-border-spin {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}

@keyframes case-reel-bonus-align {
  from {
    transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))));
  }
  to {
    transform: translateY(calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-bonus-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))));
  }
}

@keyframes case-bonus-card-pop-refined {
  0% { transform: scale(1); }
  20% { transform: scale(1.13); }
  100% { transform: scale(1); }
}

@keyframes case-bonus-json-scale-refined {
  0% { transform: scale(1.13); }
  100% { transform: scale(1); }
}

/* bugfix 2026-04-25: games tabs, stable bonus visuals, balance separators, desktop layout */
.games-screen__top-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.games-category-switch {
  --games-category-index: 0;
  position: relative;
  min-height: 41px;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border-radius: 10px;
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(0, 0, 0, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

.games-category-switch__active {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(2px + (((100% - 4px) / 2) * var(--games-category-index, 0)));
  width: calc((100% - 4px) / 2);
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  transform: translateZ(0);
  transition: left 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.games-category-switch__button {
  position: relative;
  z-index: 1;
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(219, 218, 218, 0.64);
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  transition: color 220ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.games-category-switch__button.is-active {
  color: #dbdada;
  transform: translateY(-1px);
}

.games-card-stack[data-games-category-panel] {
  margin-top: 0;
}

.balance-roll-separator {
  display: inline-flex;
  align-items: center;
  height: 1.08em;
  padding: 0 0.02em;
  line-height: 1.08em;
  color: inherit;
  vertical-align: -0.08em;
}

.case-bonus-art {
  padding: 0 !important;
  border: clamp(1px, calc(var(--case-reel-card-size-px, 72px) * 0.025), 2px) solid transparent;
  background:
    linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)) padding-box,
    linear-gradient(120deg, #ff8a00, #ffe66d, #ffb000, #ff6a00, #ffe66d) border-box !important;
  background-size: auto, 260% 260% !important;
  animation: case-bonus-border-flow 1.8s linear infinite;
}

.case-bonus-art::before {
  content: none !important;
}

.case-bonus-art__animation {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

.case-bonus-art.is-json-ready .case-bonus-art__image {
  opacity: 0;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation {
  opacity: 1;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1;
  animation: none !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1;
  animation: case-bonus-card-pop-refined 980ms ease-in-out both;
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus-visible,
.case-opening__stage.is-bonus-sequence .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-bonus-art,
.case-opening__stage.is-bonus-sequence .case-bonus-art__animation {
  overflow: visible !important;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  transform: rotate(270deg) translate(0, -5px) !important;
}

@media (min-width: 721px) {
  .games-screen__top-shell,
  .games-screen__content,
  .slot-screen__top-shell,
  .slot-screen__content,
  .contract-screen__content,
  .cases-screen__top-shell,
  .cases-screen__content,
  .case-detail-screen__top-shell,
  .case-detail-screen__content,
  .profile-body {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .bottom-nav {
    width: min(520px, calc(100vw - 32px));
  }
}


/* bugfix 2026-04-25 round 2: bonus sequence, accordion arrow, stable balance */
.case-prizes-accordion__toggle {
  color: rgba(232, 238, 248, 0.86);
}

.case-prizes-accordion__title {
  color: inherit;
}

.case-prizes-accordion__arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
  top: -1px !important;
  color: inherit;
}

.case-prizes-accordion__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.case-prizes-accordion.is-open .case-prizes-accordion__arrow {
  top: 0 !important;
  transform: rotate(270deg) translate(-2px, -5px) !important;
}

.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: none !important;
}

.balance-roll-digit,
.balance-roll-digit__track {
  animation: none !important;
}

.case-bonus-art {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  isolation: isolate;
}

.case-bonus-art::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: clamp(1px, calc(var(--case-reel-card-size-px, 72px) * 0.025), 2px);
  border-radius: inherit;
  background: conic-gradient(from 0turn, #ff7a00, #ffcf64, #ffe9a0, #ffb000, #ff7a00, #ffcf64, #ff7a00);
  animation: case-bonus-border-spin 2.2s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.case-bonus-art__glow {
  inset: 10%;
  z-index: 0;
  opacity: 0.46;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  object-fit: contain;
  transform-origin: center center;
  will-change: transform, opacity;
}

.case-bonus-art__animation {
  position: absolute;
  inset: -18%;
  width: 136%;
  height: 136%;
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

.case-bonus-art.is-json-ready .case-bonus-art__image,
.case-bonus-art.is-playing-json .case-bonus-art__image,
.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation {
  opacity: 0 !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  animation: case-bonus-source-fade 1180ms cubic-bezier(0.22, 0.74, 0.2, 1) both;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1;
  animation: case-bonus-lottie-pop 1180ms cubic-bezier(0.22, 0.74, 0.2, 1) both !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  animation: case-bonus-source-pop 1180ms cubic-bezier(0.22, 0.74, 0.2, 1) both !important;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus {
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation {
  overflow: visible !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) {
  opacity: 0.14;
  filter: saturate(0.28) brightness(0.42);
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating,
.case-opening__stage.is-bonus-dimmed .case-reel__item--bonus-visible.is-bonus-activating {
  opacity: 1;
  filter: none;
}

@keyframes case-bonus-source-fade {
  0% { opacity: 1; transform: scale(1); }
  24% { opacity: 1; transform: scale(1.12); }
  42% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes case-bonus-source-pop {
  0% { transform: scale(1); }
  24% { transform: scale(1.13); }
  100% { transform: scale(1); }
}

@keyframes case-bonus-lottie-pop {
  0% { opacity: 0; transform: scale(0.94); }
  12% { opacity: 0; transform: scale(0.98); }
  28% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}


/* bugfix 2026-04-25 round 3: tabs, bonus border, balance roll */
.games-category-panels {
  position: relative;
  display: grid;
  overflow: hidden;
}

.games-category-panels__panel {
  grid-area: 1 / 1;
  width: 100%;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
  will-change: transform, opacity;
}

.games-category-panels[data-games-category="games"] .games-category-panels__panel[data-games-category-panel="games"] {
  position: relative;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.games-category-panels[data-games-category="games"] .games-category-panels__panel[data-games-category-panel="other"] {
  position: absolute;
  inset: 0;
  transform: translateX(calc(100% + 18px));
  opacity: 0.01;
  pointer-events: none;
}

.games-category-panels[data-games-category="other"] .games-category-panels__panel[data-games-category-panel="games"] {
  position: absolute;
  inset: 0;
  transform: translateX(calc(-100% - 18px));
  opacity: 0.01;
  pointer-events: none;
}

.games-category-panels[data-games-category="other"] .games-category-panels__panel[data-games-category-panel="other"] {
  position: relative;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.games-category-switch__active {
  transition:
    left 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.games-category-switch__button {
  transition:
    color 240ms ease,
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.games-category-switch__button:not(.is-active) {
  opacity: 0.86;
}

.case-prizes-accordion__arrow {
  width: 17px;
  height: 17px;
  top: -1px !important;
  background-color: currentColor;
  -webkit-mask: url("./assets/icons/profile-edit/arrow-back.svg") center / contain no-repeat;
  mask: url("./assets/icons/profile-edit/arrow-back.svg") center / contain no-repeat;
}

.case-prizes-accordion__arrow svg {
  display: none !important;
}

.case-bonus-art {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.case-bonus-art::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  padding: clamp(1px, calc(var(--case-reel-card-size-px, 72px) * 0.025), 2px);
  border-radius: inherit;
  background: linear-gradient(135deg, #ff8a00 0%, #ffd971 45%, #ff9d00 58%, #ff8a00 100%) border-box;
  background-size: 220% 220%;
  background-position: 0% 50%;
  animation: case-bonus-border-shimmer 2s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

.case-bonus-art__glow {
  inset: 12%;
  opacity: 0.36;
}

.case-bonus-art__image {
  width: 76%;
  height: 76%;
  opacity: 1;
}

.case-bonus-art__animation {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  opacity: 0;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
}

.case-bonus-art.is-json-ready .case-bonus-art__image {
  opacity: 1;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation {
  opacity: 0;
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0;
  animation: case-bonus-source-hide 1080ms ease-in-out both;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1;
  animation: case-bonus-lottie-reveal 1080ms ease-in-out both !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1;
  animation: case-bonus-source-pop 1080ms ease-in-out both !important;
}

.balance-roll-digit,
.games-balance__whole.is-rolling .balance-roll-digit,
.games-balance__decimal.is-rolling .balance-roll-digit,
.slot-balance__whole.is-rolling .balance-roll-digit,
.slot-balance__decimal.is-rolling .balance-roll-digit,
.cases-balance__whole.is-rolling .balance-roll-digit,
.cases-balance__decimal.is-rolling .balance-roll-digit {
  position: relative;
  display: inline-block;
  width: 0.57em;
  height: 1.08em;
  overflow: hidden;
  vertical-align: -0.08em;
  animation: none !important;
}

.balance-roll-digit__track,
.games-balance__whole.is-rolling .balance-roll-digit__track,
.games-balance__decimal.is-rolling .balance-roll-digit__track,
.slot-balance__whole.is-rolling .balance-roll-digit__track,
.slot-balance__decimal.is-rolling .balance-roll-digit__track,
.cases-balance__whole.is-rolling .balance-roll-digit__track,
.cases-balance__decimal.is-rolling .balance-roll-digit__track {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--balance-roll-target) * -1.08em));
  animation: balance-digit-roll 680ms cubic-bezier(0.2, 0.9, 0.2, 1) both !important;
  animation-delay: calc(var(--balance-roll-index, 0) * 32ms) !important;
}

.balance-roll-digit__cell {
  height: 1.08em;
  line-height: 1.08em;
}

.balance-roll-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.08em;
  padding: 0 0.02em;
  line-height: 1.08em;
  vertical-align: -0.08em;
}

.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: none !important;
}

@keyframes case-bonus-border-shimmer {
  0% {
    background-position: 0% 50%;
    filter: brightness(0.98);
  }
  50% {
    background-position: 100% 50%;
    filter: brightness(1.06);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(0.98);
  }
}

@keyframes case-bonus-source-hide {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1.11); }
  42% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes case-bonus-lottie-reveal {
  0% { opacity: 0; transform: scale(0.92); }
  18% { opacity: 0; transform: scale(0.98); }
  34% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}


/* bugfix 2026-04-25 round 4: arrow size, stable balance widths, bonus animation overlay, games category scroll */
.case-prizes-accordion__arrow {
  width: 20px !important;
  height: 20px !important;
}

.games-balance__value,
.slot-balance__value,
.cases-balance__value,
.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole,
.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: 0;
}

.balance-roll-digit,
.games-balance__whole.is-rolling .balance-roll-digit,
.games-balance__decimal.is-rolling .balance-roll-digit,
.slot-balance__whole.is-rolling .balance-roll-digit,
.slot-balance__decimal.is-rolling .balance-roll-digit,
.cases-balance__whole.is-rolling .balance-roll-digit,
.cases-balance__decimal.is-rolling .balance-roll-digit {
  width: 1ch !important;
  min-width: 1ch !important;
  max-width: 1ch !important;
}

.balance-roll-separator {
  padding: 0 !important;
  margin: 0 !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: absolute !important;
  top: 12%;
  left: 12%;
  width: 76% !important;
  height: 76% !important;
  inset: auto !important;
  transform: none !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__image,
.case-bonus-art.is-json-ready .case-bonus-art__image,
.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: none !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: none !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__animation,
.case-bonus-art.is-json-ready .case-bonus-art__animation {
  opacity: 0 !important;
  animation: none !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}


/* bugfix 2026-04-26: balance baseline, interrupt-safe digit roll, local bonus lottie */
.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 0 !important;
  line-height: 1 !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-end !important;
  line-height: 1 !important;
  margin-left: 1px !important;
  transform: translateY(2px) !important;
}

.balance-roll-static,
.balance-roll-separator,
.balance-roll-digit,
.games-balance__whole.is-rolling .balance-roll-digit,
.games-balance__decimal.is-rolling .balance-roll-digit,
.slot-balance__whole.is-rolling .balance-roll-digit,
.slot-balance__decimal.is-rolling .balance-roll-digit,
.cases-balance__whole.is-rolling .balance-roll-digit,
.cases-balance__decimal.is-rolling .balance-roll-digit {
  display: inline-block !important;
  width: 1ch !important;
  min-width: 1ch !important;
  max-width: 1ch !important;
  height: 1.08em !important;
  line-height: 1.08em !important;
  overflow: hidden !important;
  vertical-align: -0.08em !important;
  animation: none !important;
}

.balance-roll-separator {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.balance-roll-digit__track,
.games-balance__whole.is-rolling .balance-roll-digit__track,
.games-balance__decimal.is-rolling .balance-roll-digit__track,
.slot-balance__whole.is-rolling .balance-roll-digit__track,
.slot-balance__decimal.is-rolling .balance-roll-digit__track,
.cases-balance__whole.is-rolling .balance-roll-digit__track,
.cases-balance__decimal.is-rolling .balance-roll-digit__track {
  display: flex !important;
  flex-direction: column !important;
  transform: translateY(calc(var(--balance-roll-target) * -1.08em)) !important;
  animation: balance-digit-roll 680ms cubic-bezier(0.2, 0.88, 0.2, 1) both !important;
  animation-delay: calc(var(--balance-roll-index, 0) * 32ms) !important;
}

.balance-roll-digit__cell {
  height: 1.08em !important;
  line-height: 1.08em !important;
  text-align: center;
}

.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: balance-pill-pulse 520ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

@keyframes balance-digit-roll {
  from {
    transform: translateY(calc(var(--balance-roll-start, var(--balance-roll-target)) * -1.08em));
  }

  to {
    transform: translateY(calc(var(--balance-roll-target) * -1.08em));
  }
}

.case-bonus-art.is-json-ready:not(.is-playing-json) .case-bonus-art__image {
  opacity: 1 !important;
  animation: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json) .case-bonus-art__animation {
  opacity: 0 !important;
  animation: none !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: case-bonus-source-hide 1080ms ease-in-out both !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-lottie-reveal 1080ms ease-in-out both !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item {
  opacity: 0.12 !important;
  filter: saturate(0.24) brightness(0.38) !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item .case-reel__card::after {
  background: rgba(2, 4, 8, 0.68) !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating {
  opacity: 1 !important;
  filter: none !important;
  z-index: 30 !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}


/* bugfix 2026-04-26 round 2: balance baseline, candy-only pop, 1% bonus rows */
.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  align-items: baseline !important;
}

.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole,
.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal,
.games-balance__whole .balance-roll-static,
.slot-balance__whole .balance-roll-static,
.cases-balance__whole .balance-roll-static,
.games-balance__decimal .balance-roll-static,
.slot-balance__decimal .balance-roll-static,
.cases-balance__decimal .balance-roll-static,
.games-balance__decimal .balance-roll-separator,
.slot-balance__decimal .balance-roll-separator,
.cases-balance__decimal .balance-roll-separator,
.games-balance__whole .balance-roll-digit,
.slot-balance__whole .balance-roll-digit,
.cases-balance__whole .balance-roll-digit,
.games-balance__decimal .balance-roll-digit,
.slot-balance__decimal .balance-roll-digit,
.cases-balance__decimal .balance-roll-digit {
  vertical-align: baseline !important;
}

.games-balance__whole,
.slot-balance__whole,
.cases-balance__whole {
  align-items: baseline !important;
}

.games-balance__decimal,
.slot-balance__decimal,
.cases-balance__decimal {
  align-items: baseline !important;
  align-self: baseline !important;
  line-height: 1 !important;
  transform: none !important;
  margin-left: 0 !important;
}

.games-balance__decimal .balance-roll-separator,
.slot-balance__decimal .balance-roll-separator,
.cases-balance__decimal .balance-roll-separator {
  margin-right: 0.02em !important;
}

.case-bonus-art,
.case-bonus-art--reel {
  overflow: visible !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  transform-origin: center center !important;
  will-change: transform, opacity;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  animation:
    case-bonus-lottie-reveal 1080ms ease-in-out both,
    case-bonus-candy-pop 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) both !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  animation:
    case-bonus-source-pop 1080ms ease-in-out both,
    case-bonus-candy-pop 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) both !important;
}

@keyframes case-bonus-candy-pop {
  0% {
    transform: scale(1);
  }

  26% {
    transform: scale(1.34);
  }

  64% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1);
  }
}

.case-reel__track.is-bonus-aligning {
  animation: none !important;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card {
  animation: none !important;
  transform: none;
}

/* bugfix 2026-04-26 round 3: visible balance digit roll and centered prize accordion */
.balance-roll-digit__track {
  animation: none !important;
  will-change: transform;
}

.case-prizes-accordion__toggle {
  min-height: 64px !important;
  padding: 8px 16px !important;
  justify-content: center !important;
  text-align: center !important;
}

.case-prizes-accordion__label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.case-prizes-accordion__title {
  display: block;
  width: 100%;
  text-align: center;
}

.case-prizes-accordion__hint {
  display: block;
  width: 100%;
  color: rgba(219, 218, 218, 0.52);
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
}

.case-prizes-accordion__arrow {
  display: none !important;
}


/* bugfix 2026-04-26 round 4: durable balance roll, compact prizes toggle, smoother bonus sequence */
.balance-roll-digit__track {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.balance-roll-digit__track-inner {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(0, calc(var(--balance-roll-start, var(--balance-roll-target, 0)) * -1.08em), 0);
}

.balance-roll-digit__track-inner .balance-roll-digit__cell {
  flex: 0 0 auto;
}

.case-prizes-accordion__toggle {
  min-height: 52px !important;
  padding: 5px 16px !important;
  border-radius: 18px !important;
}

.case-prizes-accordion__label {
  gap: 3px !important;
}

.case-prizes-accordion__title {
  font-size: 16px !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.case-prizes-accordion__hint {
  font-size: 10.5px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.case-reel__item {
  transition:
    opacity 360ms cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 360ms cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 300ms ease !important;
}

.case-reel__card::after {
  transition: background 360ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) {
  opacity: 0.12 !important;
  filter: saturate(0.24) brightness(0.38) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0.68) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) {
  opacity: 1 !important;
  filter: saturate(1) brightness(1) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align 520ms cubic-bezier(0.18, 0.82, 0.22, 1) both !important;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card {
  animation: none !important;
  transform: scaleY(-1) !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-candy-pop 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 1 !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation:
    case-bonus-lottie-reveal 1080ms ease-in-out both,
    case-bonus-candy-pop 1080ms cubic-bezier(0.22, 0.88, 0.24, 1) both !important;
}

/* bugfix 2026-04-26: merged balance roll, animated locks/text, durable bonus sequence */
.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: none !important;
  transform: none !important;
}

.balance-roll-static,
.balance-roll-separator,
.balance-roll-digit {
  display: inline-block !important;
  height: 1.08em !important;
  line-height: 1.08em !important;
  vertical-align: baseline !important;
}

.balance-roll-digit {
  width: 1ch !important;
  min-width: 1ch !important;
  max-width: 1ch !important;
  overflow: hidden !important;
  contain: paint;
}

.balance-roll-separator {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 0.01em !important;
}

.balance-roll-digit__track {
  display: block !important;
  height: 1.08em !important;
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.balance-roll-digit__track-inner {
  display: flex !important;
  flex-direction: column !important;
  will-change: transform;
  transform: translate3d(0, calc(var(--balance-roll-start, var(--balance-roll-target, 0)) * -1.08em), 0);
}

.balance-roll-digit__cell {
  flex: 0 0 1.08em !important;
  height: 1.08em !important;
  line-height: 1.08em !important;
  text-align: center !important;
}

.case-spin-button,
.slot-spin-button,
.case-open-count__button,
.slot-bet-control__button {
  will-change: transform, opacity, filter, background-color, border-color;
}

.case-spin-button,
.slot-spin-button {
  position: relative;
  overflow: hidden;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ui-button-text-swap__item,
.case-prizes-accordion__hint-text {
  display: inline-block;
  transition:
    opacity 240ms cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 240ms cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 240ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.ui-button-text-swap__item.is-entering,
.case-prizes-accordion__hint-text.is-entering {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, 9px, 0) scale(0.985);
}

.ui-button-text-swap__item.is-current,
.case-prizes-accordion__hint-text.is-current {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.ui-button-text-swap__item.is-leaving,
.case-prizes-accordion__hint-text.is-leaving {
  opacity: 0;
  filter: blur(3px);
  transform: translate3d(0, -9px, 0) scale(0.985);
}

.case-prizes-accordion__hint {
  position: relative;
  min-height: 1.05em;
  overflow: hidden;
  display: inline-grid !important;
  place-items: center;
}

.case-prizes-accordion__hint.is-text-swapping > .case-prizes-accordion__hint-text {
  grid-area: 1 / 1;
}

.case-spin-button.is-ui-locking,
.slot-spin-button.is-ui-locking,
.case-open-count__button.is-ui-locking,
.slot-bet-control__button.is-ui-locking {
  animation: ui-control-lock 320ms cubic-bezier(0.2, 0.78, 0.2, 1) both !important;
}

.case-spin-button.is-ui-unlocking,
.slot-spin-button.is-ui-unlocking,
.case-open-count__button.is-ui-unlocking,
.slot-bet-control__button.is-ui-unlocking {
  animation: ui-control-unlock 320ms cubic-bezier(0.2, 0.78, 0.2, 1) both !important;
}

@keyframes ui-control-lock {
  0% { transform: translateZ(0) scale(1); filter: brightness(1); }
  42% { transform: translateZ(0) scale(0.982); filter: brightness(0.78); }
  100% { transform: translateZ(0) scale(1); filter: brightness(0.86); }
}

@keyframes ui-control-unlock {
  0% { transform: translateZ(0) scale(0.985); filter: brightness(0.82); }
  58% { transform: translateZ(0) scale(1.012); filter: brightness(1.08); }
  100% { transform: translateZ(0) scale(1); filter: brightness(1); }
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item,
.case-opening__stage.is-bonus-sequence .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-bonus-art {
  overflow: visible !important;
}

.case-reel__item {
  transition:
    opacity 460ms cubic-bezier(0.2, 0.72, 0.2, 1),
    filter 460ms cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

.case-reel__card::after {
  transition: background 460ms cubic-bezier(0.2, 0.72, 0.2, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) {
  opacity: 0.12 !important;
  filter: saturate(0.24) brightness(0.38) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0.68) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) {
  opacity: 1 !important;
  filter: saturate(1) brightness(1) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align-refined 680ms cubic-bezier(0.18, 0.82, 0.2, 1) both !important;
  will-change: transform;
}

@keyframes case-reel-bonus-align-refined {
  from {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))), 0);
  }
  to {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-bonus-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))), 0);
  }
}

.case-bonus-art,
.case-bonus-art--reel {
  overflow: visible !important;
  contain: none !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  transform-origin: center center !important;
  will-change: transform, opacity, filter;
}

.case-bonus-art__animation {
  inset: -24% !important;
  width: 148% !important;
  height: 148% !important;
  pointer-events: none;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card {
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: case-bonus-webp-to-json 300ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-json-pop-refined 1200ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-webp-return 260ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: case-bonus-json-hide 260ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-json-pop-refined 1150ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

@keyframes case-bonus-webp-to-json {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  60% { opacity: 0.28; transform: scale(1.08); filter: blur(1px); }
  100% { opacity: 0; transform: scale(1.1); filter: blur(2px); }
}

@keyframes case-bonus-webp-return {
  0% { opacity: 0; transform: scale(1.1); filter: blur(2px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-pop-refined {
  0% { opacity: 0; transform: scale(0.96); filter: blur(2px); }
  14% { opacity: 1; transform: scale(1.08); filter: blur(0); }
  34% { opacity: 1; transform: scale(1.36); filter: blur(0); }
  68% { opacity: 1; transform: scale(1.18); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-hide {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(0.98); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-button-text-swap__item,
  .case-prizes-accordion__hint-text,
  .case-reel__item,
  .case-reel__card::after {
    transition: none !important;
  }

  .case-spin-button.is-ui-locking,
  .slot-spin-button.is-ui-locking,
  .case-open-count__button.is-ui-locking,
  .slot-bet-control__button.is-ui-locking,
  .case-spin-button.is-ui-unlocking,
  .slot-spin-button.is-ui-unlocking,
  .case-open-count__button.is-ui-unlocking,
  .slot-bet-control__button.is-ui-unlocking,
  .case-reel__track.is-bonus-aligning,
  .case-bonus-art__image,
  .case-bonus-art__animation {
    animation: none !important;
  }
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card {
  transform: none !important;
}


/* bugfix 2026-04-26 round 5: stable rolling balance, smoother controls, corrected bonus playback, reel pruning */
.games-balance,
.slot-balance,
.cases-balance,
.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  font-variant-numeric: tabular-nums;
}

.games-balance.is-balance-changing,
.cases-balance.is-balance-changing,
.slot-balance.is-balance-changing {
  animation: none !important;
  transform: none !important;
}

.balance-roll-static,
.balance-roll-separator,
.balance-roll-digit {
  display: inline-block !important;
  height: 1.08em !important;
  line-height: 1.08em !important;
  vertical-align: baseline !important;
}

.balance-roll-digit {
  width: 1ch !important;
  min-width: 1ch !important;
  max-width: 1ch !important;
  overflow: hidden !important;
  contain: paint;
}

.balance-roll-separator {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  padding: 0 0.01em !important;
}

.balance-roll-digit__track {
  display: block !important;
  width: 100% !important;
  height: 1.08em !important;
  overflow: hidden !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.balance-roll-digit__track-inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  will-change: transform;
  animation: none !important;
  transition-property: transform;
  transform: translate3d(0, calc(var(--balance-roll-start, var(--balance-roll-target, 0)) * -1.08em), 0);
}

.balance-roll-digit__cell {
  flex: 0 0 1.08em !important;
  display: block !important;
  width: 100% !important;
  height: 1.08em !important;
  line-height: 1.08em !important;
  text-align: center !important;
}

.ui-button-text-swap__item,
.case-prizes-accordion__hint-text {
  display: inline-block;
  transition:
    opacity var(--ui-text-swap-duration, 420ms) cubic-bezier(0.16, 0.84, 0.22, 1),
    transform var(--ui-text-swap-duration, 420ms) cubic-bezier(0.16, 0.84, 0.22, 1),
    filter var(--ui-text-swap-duration, 420ms) cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.ui-button-text-swap__item.is-entering,
.case-prizes-accordion__hint-text.is-entering {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 6px, 0) scale(0.99);
}

.ui-button-text-swap__item.is-current,
.case-prizes-accordion__hint-text.is-current {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.ui-button-text-swap__item.is-leaving,
.case-prizes-accordion__hint-text.is-leaving {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, -6px, 0) scale(0.99);
}

.case-prizes-accordion__hint {
  min-height: 1.18em !important;
}

.case-spin-button,
.slot-spin-button,
.case-open-count__button,
.slot-bet-control__button {
  transition:
    opacity 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    background-color 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    border-color 420ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-spin-button.is-ui-locking,
.slot-spin-button.is-ui-locking,
.case-open-count__button.is-ui-locking,
.slot-bet-control__button.is-ui-locking {
  animation: ui-control-lock-smooth 540ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-spin-button.is-ui-unlocking,
.slot-spin-button.is-ui-unlocking,
.case-open-count__button.is-ui-unlocking,
.slot-bet-control__button.is-ui-unlocking {
  animation: ui-control-unlock-smooth 540ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

@keyframes ui-control-lock-smooth {
  0% { transform: translateZ(0) scale(1); filter: brightness(1); }
  46% { transform: translateZ(0) scale(0.988); filter: brightness(0.9); }
  100% { transform: translateZ(0) scale(1); filter: brightness(0.84); }
}

@keyframes ui-control-unlock-smooth {
  0% { transform: translateZ(0) scale(0.992); filter: brightness(0.86); }
  58% { transform: translateZ(0) scale(1.006); filter: brightness(1.06); }
  100% { transform: translateZ(0) scale(1); filter: brightness(1); }
}

.case-reel__item.is-pruned-past {
  visibility: hidden !important;
  opacity: 0 !important;
  filter: none !important;
  pointer-events: none !important;
  content-visibility: hidden;
  contain: layout paint style;
}

.case-opening__stage.is-bonus-sequence .case-opening__viewport {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel.is-bonus-reel-active {
  overflow: visible !important;
  z-index: 8;
}

.case-opening__stage.is-bonus-sequence .case-reel__item {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating {
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  z-index: 40 !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__card {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus {
  overflow: visible !important;
  animation: none !important;
  transform: scaleY(-1) !important;
}

.case-reel__item {
  transition:
    opacity 720ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 720ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 420ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-reel__card::after {
  transition: background 720ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) {
  opacity: 0.14 !important;
  filter: saturate(0.28) brightness(0.42) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0.66) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) {
  opacity: 1 !important;
  filter: saturate(1) brightness(1) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align-final 1080ms cubic-bezier(0.16, 0.86, 0.2, 1) both !important;
  will-change: transform;
}

@keyframes case-reel-bonus-align-final {
  from {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))), 0);
  }
  to {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-bonus-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))), 0);
  }
}

.case-bonus-art,
.case-bonus-art--reel {
  overflow: visible !important;
  contain: none !important;
}

.case-bonus-art__glow,
.case-bonus-art::before {
  transform: none !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2;
  width: 82% !important;
  height: 82% !important;
  object-fit: contain !important;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: center center !important;
  transition:
    opacity 260ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 260ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
  will-change: transform, opacity, filter;
}

.case-bonus-art__animation {
  display: block !important;
  opacity: 0;
  pointer-events: none;
  overflow: visible !important;
}

.case-bonus-art__animation svg {
  overflow: visible !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json) .case-bonus-art__image {
  opacity: 1 !important;
  animation: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json) .case-bonus-art__animation {
  opacity: 0 !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  filter: blur(1px);
  animation: case-bonus-webp-out-final 260ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-candy-grow-final 1320ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 1 !important;
  filter: blur(0);
  animation: case-bonus-webp-in-final 320ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: case-bonus-json-out-final 320ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-candy-grow-final 1320ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

@keyframes case-bonus-webp-out-final {
  0% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; filter: blur(1px); transform: translate3d(-50%, -50%, 0) scale(1.03); }
}

@keyframes case-bonus-webp-in-final {
  0% { opacity: 0; filter: blur(1px); transform: translate3d(-50%, -50%, 0) scale(1.03); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1); }
}

@keyframes case-bonus-json-out-final {
  0% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; filter: blur(1px); transform: translate3d(-50%, -50%, 0) scale(0.98); }
}

@keyframes case-bonus-candy-grow-final {
  0% { opacity: 0; filter: blur(1px); transform: translate3d(-50%, -50%, 0) scale(0.98); }
  12% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1.05); }
  34% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1.36); }
  70% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1.14); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(-50%, -50%, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .balance-roll-digit__track-inner,
  .ui-button-text-swap__item,
  .case-prizes-accordion__hint-text,
  .case-spin-button.is-ui-locking,
  .slot-spin-button.is-ui-locking,
  .case-open-count__button.is-ui-locking,
  .slot-bet-control__button.is-ui-locking,
  .case-spin-button.is-ui-unlocking,
  .slot-spin-button.is-ui-unlocking,
  .case-open-count__button.is-ui-unlocking,
  .slot-bet-control__button.is-ui-unlocking,
  .case-reel__track.is-bonus-aligning,
  .case-bonus-art__image,
  .case-bonus-art__animation {
    animation: none !important;
    transition: none !important;
  }
}


/* bugfix 2026-04-26 round 7: directional balance roll, stable text swap, centered bonus, disable reel pruning */
.balance-roll-digit__track,
.games-balance__whole.is-rolling .balance-roll-digit__track,
.games-balance__decimal.is-rolling .balance-roll-digit__track,
.slot-balance__whole.is-rolling .balance-roll-digit__track,
.slot-balance__decimal.is-rolling .balance-roll-digit__track,
.cases-balance__whole.is-rolling .balance-roll-digit__track,
.cases-balance__decimal.is-rolling .balance-roll-digit__track {
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

.balance-roll-digit__track-inner {
  animation: none !important;
  backface-visibility: hidden;
}

.ui-text-swap-host {
  position: relative;
  display: inline-grid !important;
  place-items: center;
  min-width: var(--ui-text-swap-min-width, auto);
  min-height: var(--ui-text-swap-min-height, auto);
  vertical-align: middle;
}

.ui-text-swap-host.is-text-swapping > .ui-button-text-swap__item,
.case-prizes-accordion__hint.is-text-swapping > .case-prizes-accordion__hint-text,
.ui-text-swap-host.is-text-swapping > .case-prizes-accordion__hint-text {
  grid-area: 1 / 1;
}

.case-spin-button.ui-text-swap-host,
.slot-spin-button.ui-text-swap-host,
.case-open-count__button.ui-text-swap-host,
.slot-bet-control__button.ui-text-swap-host {
  width: max-content;
}

.case-reel__item.is-pruned-past {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  content-visibility: visible !important;
  contain: none !important;
}

.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item,
.case-opening__stage.is-bonus-sequence .case-reel__card {
  overflow: visible !important;
}

.case-bonus-art,
.case-bonus-art--reel {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  contain: none !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 76% !important;
  height: 76% !important;
  max-width: 76% !important;
  max-height: 76% !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transform-origin: center center !important;
  overflow: visible !important;
}

.case-bonus-art__animation,
.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  overflow: visible !important;
}

.case-bonus-art:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation {
  opacity: 0 !important;
  animation: none !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art {
  overflow: visible !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: case-bonus-webp-out-r7 280ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-candy-grow-r7 1320ms cubic-bezier(0.16, 0.88, 0.24, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-webp-in-r7 300ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: case-bonus-json-out-r7 300ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-candy-grow-r7 1320ms cubic-bezier(0.16, 0.88, 0.24, 1) both !important;
}

@keyframes case-bonus-webp-out-r7 {
  from { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.04); filter: blur(1px); }
}

@keyframes case-bonus-webp-in-r7 {
  from { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.04); filter: blur(1px); }
  to { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-out-r7 {
  from { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  to { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.99); filter: blur(1px); }
}

@keyframes case-bonus-candy-grow-r7 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(1px); }
  10% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); filter: blur(0); }
  36% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.34); filter: blur(0); }
  70% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.16); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}


/* bugfix 2026-04-26 round 8: preserve button shape, clip non-bonus reel art, smoother bonus enter/exit */
.case-spin-button.ui-text-swap-host,
.slot-spin-button.ui-text-swap-host,
.case-spin-button,
.slot-spin-button {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: center !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item {
  position: absolute !important;
  inset: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item,
.case-opening__stage.is-bonus-sequence .case-reel__card {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-bonus-art {
  overflow: visible !important;
}

.case-reel__item {
  transition:
    opacity 1100ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 1100ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 520ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-reel__card::after {
  transition: background 1100ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) {
  opacity: 0.16 !important;
  filter: saturate(0.32) brightness(0.46) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0.62) !important;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align-r8 1400ms cubic-bezier(0.16, 0.84, 0.22, 1) both !important;
  will-change: transform;
}

@keyframes case-reel-bonus-align-r8 {
  from {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))), 0);
  }
  to {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-bonus-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))), 0);
  }
}

.case-bonus-art__image,
.case-bonus-art__animation {
  transform: translate3d(-50%, -50%, 0) scale(1);
  will-change: transform, opacity, filter;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: case-bonus-webp-out-r8 360ms cubic-bezier(0.18, 0.86, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-candy-pop-r8 1600ms cubic-bezier(0.16, 0.86, 0.18, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-webp-in-r8 420ms cubic-bezier(0.18, 0.86, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: case-bonus-json-out-r8 420ms cubic-bezier(0.18, 0.86, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-candy-pop-r8 1600ms cubic-bezier(0.16, 0.86, 0.18, 1) both !important;
}

@keyframes case-bonus-webp-out-r8 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.08); filter: blur(1px); }
}

@keyframes case-bonus-webp-in-r8 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1.08); filter: blur(1px); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-out-r8 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.08); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(1px); }
}

@keyframes case-bonus-candy-pop-r8 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.96); filter: blur(1px); }
  14% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.1); filter: blur(0); }
  38% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.42); filter: blur(0); }
  74% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.2); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}


/* bugfix 2026-04-26 round 9: test.html sine bonus scale, no button layout jump, lower balance digits */
.games-balance__value,
.slot-balance__value,
.cases-balance__value {
  transform: translateY(2px) !important;
}

.case-spin-button,
.slot-spin-button {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: var(--button-min-height, 64px);
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

.case-spin-button.ui-text-swap-host,
.slot-spin-button.ui-text-swap-host {
  display: flex !important;
  min-width: 0 !important;
  min-height: var(--button-min-height, 64px) !important;
}

.case-spin-button > .ui-button-text-swap__item,
.slot-spin-button > .ui-button-text-swap__item {
  position: static !important;
  inset: auto !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-sequence,
.case-opening__stage.is-bonus-sequence .case-opening__viewport,
.case-opening__stage.is-bonus-sequence .case-reel,
.case-opening__stage.is-bonus-sequence .case-reel__item:not(.is-bonus-activating),
.case-opening__stage.is-bonus-sequence .case-reel__item:not(.is-bonus-activating) .case-reel__card {
  overflow: hidden !important;
}

.case-opening__stage.is-bonus-sequence .case-reel.is-bonus-reel-active,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-bonus-art {
  overflow: visible !important;
}

.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-reel__card {
  transform: none !important;
  animation: none !important;
}

.case-bonus-art,
.case-bonus-art--reel {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  contain: none !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-bonus-art {
  overflow: visible !important;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 110% !important;
  height: 110% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform-origin: center center !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  will-change: transform, opacity;
}

.case-bonus-art__animation,
.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  overflow: visible !important;
}

.case-bonus-art__animation {
  opacity: 0;
  pointer-events: none;
  animation: none !important;
}

.case-bonus-art__image {
  opacity: 1;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__image {
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: case-bonus-webp-out-r9 260ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-webp-in-r9 260ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  animation: case-bonus-fallback-sine-r9 1800ms cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

.case-reel__track.is-bonus-aligning {
  animation: case-reel-bonus-align-r9 1700ms cubic-bezier(0.22, 0.72, 0.22, 1) both !important;
  will-change: transform;
}

.case-reel__item {
  transition:
    opacity 1400ms cubic-bezier(0.22, 0.72, 0.22, 1),
    filter 1400ms cubic-bezier(0.22, 0.72, 0.22, 1),
    transform 520ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-reel__card::after {
  transition: background 1400ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

@keyframes case-reel-bonus-align-r9 {
  from {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-end-position, var(--case-reel-end-step, 0)) * var(--case-reel-step-size))), 0);
  }
  to {
    transform: translate3d(0, calc(var(--case-reel-center-offset-px, 0px) - (var(--case-reel-bonus-position, var(--case-reel-end-position, var(--case-reel-end-step, 0))) * var(--case-reel-step-size))), 0);
  }
}

@keyframes case-bonus-webp-out-r9 {
  from { opacity: 1; filter: blur(0); }
  to { opacity: 0; filter: blur(1px); }
}

@keyframes case-bonus-webp-in-r9 {
  from { opacity: 0; filter: blur(1px); }
  to { opacity: 1; filter: blur(0); }
}

@keyframes case-bonus-fallback-sine-r9 {
  0% { transform: translate3d(-50%, -50%, 0) scale(1); }
  50% { transform: translate3d(-50%, -50%, 0) scale(1.6); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}


/* bugfix 2026-04-26 round 10: smoother category switch, spin text loop, compact bonus JSON */
.games-category-panels {
  transition: height 440ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
  will-change: height;
}

.games-category-panels.is-switching {
  overflow: hidden !important;
}

.games-category-panels__panel {
  transition:
    transform 440ms cubic-bezier(0.16, 0.84, 0.22, 1),
    opacity 360ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 360ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.games-category-panels[data-games-category="games"] .games-category-panels__panel[data-games-category-panel="other"],
.games-category-panels[data-games-category="other"] .games-category-panels__panel[data-games-category-panel="games"] {
  filter: blur(1px);
}

.games-category-switch__active {
  transition:
    left 440ms cubic-bezier(0.16, 0.84, 0.22, 1),
    width 440ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 440ms cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

.case-prizes-accordion__hint,
.case-spin-button,
.slot-spin-button {
  --ui-text-swap-duration: 420ms;
}

.case-spin-button,
.slot-spin-button {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: var(--button-min-height, 64px) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  line-height: 1 !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-entering,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-entering {
  opacity: 0 !important;
  filter: blur(2px) !important;
  transform: translate3d(0, 7px, 0) scale(0.99) !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-current,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-current {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-leaving,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-leaving {
  opacity: 0 !important;
  filter: blur(2px) !important;
  transform: translate3d(0, -7px, 0) scale(0.99) !important;
}

.case-bonus-art__animation {
  width: 66% !important;
  height: 66% !important;
  max-width: 66% !important;
  max-height: 66% !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}


/* bugfix 2026-04-26 round 11: stable scroll, non-jitter spin text, slot locks, bonus cleanup */
.case-spin-button > .ui-button-text-swap__item,
.slot-spin-button > .ui-button-text-swap__item {
  min-width: 4.6em;
  text-align: center;
  white-space: nowrap;
  transform: none !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-entering,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-entering,
.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-leaving,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-leaving {
  transform: none !important;
  filter: blur(1.4px) !important;
}

.case-spin-button.is-text-swapping > .ui-button-text-swap__item.is-current,
.slot-spin-button.is-text-swapping > .ui-button-text-swap__item.is-current {
  transform: none !important;
  filter: blur(0) !important;
}

.slot-controls.is-pending {
  opacity: 1 !important;
}

.slot-bet-control__button:disabled,
.slot-bet-control__button.is-ui-locking {
  opacity: 0.72 !important;
  filter: brightness(0.82) saturate(0.9);
}

.slot-bet-control__field.is-disabled,
.slot-placeholder-field.is-disabled {
  color: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(148, 163, 184, 0.15) !important;
  background: rgba(0, 0, 0, 0.10) !important;
  filter: brightness(0.88);
}

.slot-controls.is-pending .slot-controls__label,
.slot-controls.is-pending .slot-controls__divider {
  opacity: 1 !important;
  filter: none !important;
}

.case-bonus-art:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image {
  opacity: 1 !important;
}

.case-bonus-art:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation {
  opacity: 0 !important;
}

.case-bonus-art__animation {
  left: 50% !important;
  top: 50% !important;
  width: 152% !important;
  height: 152% !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1) !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-json-pop-r11 1280ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 0 !important;
  animation: case-bonus-json-hide-r11 260ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

@keyframes case-bonus-json-pop-r11 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(0.98); filter: blur(1.5px); }
  14% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.08); filter: blur(0); }
  42% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.62); filter: blur(0); }
  72% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.32); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-hide-r11 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(0.98); filter: blur(1.5px); }
}


/* bugfix 2026-04-26 round 12: stable prizes toggle, corrected bonus orientation/size, static bonus frame */
.app-main,
.games-screen__content,
.case-detail-screen__content,
.slot-screen__content,
.contract-screen__content,
.cases-screen__content {
  scrollbar-gutter: stable both-edges;
}

.case-spin-button,
.slot-spin-button {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.case-bonus-art__image,
.case-bonus-art__animation {
  left: 50% !important;
  top: 50% !important;
  width: 74% !important;
  height: 74% !important;
  max-width: 74% !important;
  max-height: 74% !important;
  object-fit: contain !important;
  transform-origin: center center !important;
}

.case-bonus-art__image {
  transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1) !important;
}

.case-bonus-art__animation {
  transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1) !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  animation: case-bonus-json-pop-r12 1180ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  animation: case-bonus-json-hide-r12 240ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
}

@keyframes case-bonus-json-pop-r12 {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(0.98); filter: blur(1.2px); }
  16% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1.05); filter: blur(0); }
  44% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1.24); filter: blur(0); }
  72% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1.12); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1); filter: blur(0); }
}

@keyframes case-bonus-json-hide-r12 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) rotate(180deg) scale(0.98); filter: blur(1.2px); }
}


/* bugfix 2026-04-26 round 13: mirrored bonus, frozen first frame, freeze on final frame */
.case-bonus-art__image,
.case-bonus-art__animation {
  transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1) !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-complete .case-bonus-art__image {
  opacity: 0 !important;
  animation: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-complete .case-bonus-art__animation {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image {
  opacity: 0 !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  opacity: 1 !important;
  animation: case-bonus-json-pop-r13 1180ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 1 !important;
  animation: none !important;
}

@keyframes case-bonus-json-pop-r13 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1); filter: blur(0); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.06); filter: blur(0); }
  45% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.22); filter: blur(0); }
  74% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1.10); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1); filter: blur(0); }
}


/* bugfix 2026-04-26 round 14: mirror actual bonus svg and fully hide static still during playback */
.case-bonus-art__image {
  transform: translate3d(-50%, -50%, 0) scaleX(-1) scale(1) !important;
}

.case-bonus-art__animation {
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-complete .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-complete .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

@keyframes case-bonus-json-pop-r14 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); filter: blur(0); }
  45% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.22); filter: blur(0); }
  74% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.10); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  animation: case-bonus-json-pop-r14 1180ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}


/* bugfix 2026-04-26 round 15: visible idle bonus, horizontal-only mirror, seamless still-to-json swap */
.case-bonus-art__image,
.case-bonus-art__animation {
  left: 50% !important;
  top: 50% !important;
  width: 74% !important;
  height: 74% !important;
  max-width: 74% !important;
  max-height: 74% !important;
  object-fit: contain !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  transform-origin: center center !important;
}

.case-bonus-art__animation,
.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  overflow: visible !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  transform-box: fill-box;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__image {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__animation {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__image {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__animation {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

@keyframes case-bonus-json-pop-r15 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); filter: blur(0); }
  45% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.22); filter: blur(0); }
  74% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.10); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  animation: case-bonus-json-pop-r15 1180ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}

/* bugfix 2026-04-26 round 16: bonus uses frozen Lottie frames without mirror */
.case-bonus-art__image,
.case-bonus-art__animation {
  left: 50% !important;
  top: 50% !important;
  width: 74% !important;
  height: 74% !important;
  max-width: 74% !important;
  max-height: 74% !important;
  object-fit: contain !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  transform-origin: center center !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  transform: none !important;
  transform-origin: center center !important;
  transform-box: fill-box;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__image {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__animation {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

@keyframes case-bonus-json-pop-r16 {
  0% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.06); filter: blur(0); }
  45% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.22); filter: blur(0); }
  74% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.10); filter: blur(0); }
  100% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); filter: blur(0); }
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation {
  animation: case-bonus-json-pop-r16 1180ms cubic-bezier(0.16, 0.88, 0.22, 1) both !important;
}


/* bugfix 2026-04-27 round 17: play bonus Lottie directly, lock orientation to the normal candy */
.case-bonus-art__image,
.case-bonus-art__animation {
  left: 50% !important;
  top: 50% !important;
  width: 74% !important;
  height: 74% !important;
  max-width: 74% !important;
  max-height: 74% !important;
  object-fit: contain !important;
  transform: translate3d(-50%, -50%, 0) !important;
  transform-origin: center center !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  width: 100% !important;
  height: 100% !important;
  transform: scaleX(-1) !important;
  transform-origin: center center !important;
  transform-box: fill-box !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__image {
  opacity: 1 !important;
  visibility: visible !important;
}

.case-bonus-art:not(.is-json-ready):not(.is-json-complete) .case-bonus-art__animation {
  opacity: 0 !important;
  visibility: hidden !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__image {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-json-ready:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-bonus-art.is-json-complete:not(.is-playing-json):not(.is-playing-fallback) .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  filter: none !important;
}

/* final bonus-lottie rebuild: Bonus.json is the single source of truth */
.case-bonus-art {
  position: relative !important;
  padding: 0 !important;
  background: radial-gradient(circle at center, #2c2200 0%, #000 100%) !important;
  border-radius: inherit !important;
  overflow: visible !important;
  isolation: isolate !important;
  contain: none !important;
}

.case-bonus-art::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  padding: clamp(1px, calc(var(--case-reel-card-size-px, 72px) * 0.025), 2px) !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, #d4af37 0%, #ffe58a 42%, #b8860b 64%, #d4af37 100%) border-box !important;
  background-size: 220% 220% !important;
  animation: case-bonus-border-shimmer 2s ease-in-out infinite alternate !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}

.case-bonus-art__glow {
  position: absolute !important;
  inset: 8% !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.35), transparent 66%) !important;
  filter: blur(8px) !important;
  opacity: 0.72 !important;
  pointer-events: none !important;
}

.case-bonus-art__image {
  display: none !important;
}

.case-bonus-art__animation {
  position: absolute !important;
  inset: -5% !important;
  z-index: 2 !important;
  display: block !important;
  width: 110% !important;
  height: 110% !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(1);
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  will-change: auto;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  transform: none !important;
}

.case-bonus-art__fallback {
  position: relative;
  z-index: 1;
  color: rgba(255, 229, 138, 0.92);
  font-size: clamp(10px, 2.6vw, 14px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
  pointer-events: none;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation,
.case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-bonus-art.is-json-complete .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__animation {
  display: block !important;
  opacity: 1 !important;
  animation: none !important;
}

.case-bonus-art.is-playing-json .case-bonus-art__animation {
  will-change: transform;
}

.case-bonus-art.is-json-ready .case-bonus-art__fallback,
.case-bonus-art.is-playing-json .case-bonus-art__fallback,
.case-bonus-art.is-json-complete .case-bonus-art__fallback {
  opacity: 0 !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__image,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__image {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}


/* bugfix 2026-04-27 round 18: stable Bonus.json framing, correct candy placement, no mirror */
.case-bonus-art {
  position: relative !important;
  padding: 0 !important;
  background: radial-gradient(circle at center, #2c2200 0%, #000000 100%) !important;
  border-radius: inherit !important;
  overflow: visible !important;
  isolation: isolate !important;
}

.case-bonus-art__fallback {
  position: relative !important;
  z-index: 1 !important;
}

.case-bonus-art__animation {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  will-change: transform !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  transform-origin: center center !important;
  transform-box: view-box !important;
  animation: none !important;
  filter: none !important;
  backface-visibility: hidden !important;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation,
.case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-bonus-art.is-json-complete .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
}

.case-bonus-art.is-json-ready .case-bonus-art__fallback,
.case-bonus-art.is-playing-json .case-bonus-art__fallback,
.case-bonus-art.is-json-complete .case-bonus-art__fallback {
  opacity: 0 !important;
  visibility: hidden !important;
}


/* bugfix 2026-04-27 round 19: disable all legacy bonus playback transforms inside reels */
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-ready .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art.is-playing-json .case-bonus-art__animation {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation svg {
  animation: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transform-box: view-box !important;
  filter: none !important;
}

/* bugfix 2026-04-27 round 20: Lottie-only bonus, frozen frames, no fallback/text/images/transforms */
.case-bonus-art {
  position: relative !important;
  padding: 0 !important;
  border-radius: inherit !important;
  overflow: visible !important;
  isolation: isolate !important;
  contain: none !important;
}

.case-bonus-art__image,
.case-bonus-art__fallback {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

.case-bonus-art__animation {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  will-change: auto !important;
  backface-visibility: hidden !important;
}

.case-bonus-art__animation > svg,
.case-bonus-art__animation svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  transform-origin: center center !important;
  transform-box: view-box !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  backface-visibility: hidden !important;
}

.case-bonus-art.is-json-ready .case-bonus-art__animation,
.case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-bonus-art.is-json-complete .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-ready .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__animation,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-ready .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-ready .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-playing-json.is-json-ending .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-bonus-art.is-json-complete .case-bonus-art__animation svg,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation > svg,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-bonus-art__animation svg {
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

.case-bonus-art.is-playing-fallback .case-bonus-art__animation {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* bugfix 2026-04-27 round 21: keep activating bonus cards counter-flipped while reels are scaleY(-1) */
.case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card,
.case-opening__stage.is-bonus-sequence .case-reel__item--bonus.is-bonus-activating .case-reel__card--bonus,
.case-opening__stage.is-bonus-sequence .case-reel__item.is-bonus-activating .case-reel__card--bonus {
  transform: scaleY(-1) !important;
  animation: none !important;
}



/* Profile collection grid */
.profile-collection-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  padding-bottom: 22px;
}

.profile-collection-card {
  position: relative;
  aspect-ratio: 1 / 1;
  min-width: 0;
  border-radius: 22px;
  overflow: visible;
  background: transparent;
}

.profile-collection-card .case-nft-art {
  border-radius: 22px;
}

.profile-collection-card .case-nft-art--profile-collection {
  width: 100%;
  height: 100%;
}

.profile-collection-card .case-nft-art__layer--item {
  padding: 13.5%;
}

.profile-collection-card .case-nft-art--transparent .case-nft-art__layer--item {
  padding: 6%;
}

.profile-collection-card .case-nft-art--fallback {
  background: rgba(255, 255, 255, 0.05);
}

.profile-collection-card .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity));
}

.collection-row__action[aria-disabled="true"] {
  opacity: 0.86;
  pointer-events: none;
}

@media (max-width: 389px) {
  .profile-collection-grid {
    gap: 9px;
  }

  .profile-collection-card {
    border-radius: 18px;
  }

  .profile-collection-card .case-nft-art {
    border-radius: 18px;
  }
}


/* profile collection bottom spacing: keep last NFT row close to the bottom navigation */
.app-main:has(.profile-screen) {
  padding-bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
}

.profile-screen .profile-body {
  padding-bottom: 0;
}

.profile-screen .profile-collection-grid {
  padding-bottom: 4px;
}

.profile-screen .collection-empty {
  min-height: 88px;
}

/* Case spin performance pass: lightweight offscreen reel art. */
.case-reel__item--fast-art {
  content-visibility: auto;
  contain: layout paint style;
}

.case-nft-art--fast {
  isolation: auto;
  background: rgba(255, 255, 255, 0.035);
}

.case-nft-art--fast::before,
.case-nft-art--fast .case-nft-art__pattern-field {
  display: none !important;
}

.case-nft-art--fast .case-nft-art__layer--item {
  padding: 14%;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}


/* NFT profile detail sheet */
.profile-collection-card__button {
  appearance: none;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, filter 160ms ease;
}

.profile-collection-card__button:active {
  transform: scale(0.965);
  filter: brightness(0.92);
}

.profile-nft-detail-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}

.profile-nft-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  animation: profile-nft-backdrop-in 260ms ease forwards;
}

.profile-nft-detail-sheet {
  --profile-nft-sheet-radius: 34px;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  height: clamp(510px, 62dvh, 650px);
  max-height: calc(100dvh - 34px);
  padding: 0 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--profile-nft-sheet-radius) var(--profile-nft-sheet-radius) 0 0;
  background: #111111;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  transform: translateY(102%);
  animation: profile-nft-sheet-in 320ms cubic-bezier(0.2, 0.84, 0.2, 1) forwards;
}

.profile-nft-detail-sheet::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 7;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 180ms ease;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail-sheet::after {
  background: rgba(0, 0, 0, 0.4);
}

.profile-nft-detail__grabber {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 50%;
  width: 176px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.profile-nft-detail__grabber::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 176px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
}

.profile-nft-detail__hero {
  position: relative;
  height: 45.5%;
  margin: 0 -22px;
  overflow: hidden;
  border-radius: var(--profile-nft-sheet-radius) var(--profile-nft-sheet-radius) 0 0;
  background: #1A1A1A;
  isolation: isolate;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #1A1A1A;
}

.profile-nft-detail__hero .case-nft-art--profile-detail::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0.16));
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background {
  inset: -1px -18% -18%;
  width: 136%;
  height: 118%;
  max-width: none;
  object-fit: cover;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  inset: -1px -18% -18%;
  width: 136%;
  height: 118%;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
  z-index: 5;
  inset: 40px 50% auto auto;
  width: min(36%, 148px);
  height: min(36%, 148px);
  padding: 0;
  object-fit: contain;
  transform: translateX(50%);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3));
}

.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--transparent .case-nft-art__layer--item {
  width: min(40%, 164px);
  height: min(40%, 164px);
}

.profile-nft-detail__more {
  position: absolute;
  z-index: 13;
  top: 30px;
  right: 28px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  transition: transform 150ms ease, background 150ms ease;
}

.profile-nft-detail__more:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.1);
}

.profile-nft-detail__more img {
  width: 27px;
  height: 27px;
  display: block;
}

.profile-nft-detail__title-block {
  position: absolute;
  z-index: 6;
  left: 18px;
  right: 18px;
  bottom: 28px;
  text-align: center;
  color: #ffffff;
}

.profile-nft-detail__title {
  margin: 0;
  font-size: clamp(26px, 7vw, 36px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.profile-nft-detail__edition {
  margin-top: 4px;
  font-size: clamp(18px, 5vw, 23px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
}

.profile-nft-detail__info {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
  padding: 24px 6px 16px;
}

.profile-nft-detail__row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 24px;
}

.profile-nft-detail__label {
  font-size: 18px;
  line-height: 1.12;
  color: rgba(255, 255, 255, 0.92);
}

.profile-nft-detail__value {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.12;
}

.profile-nft-detail__value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-nft-detail__chance {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #343434;
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.profile-nft-detail__value--owner {
  gap: 8px;
}

.profile-nft-detail__owner-avatar {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #d9d9d9;
}

.profile-nft-detail__owner-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-nft-detail__price {
  color: rgba(255, 255, 255, 0.86);
}

.profile-nft-detail__tet {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.profile-nft-detail__sell {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  cursor: default;
}

.profile-nft-detail__menu-scrim {
  position: absolute;
  inset: 0;
  z-index: 8;
  border: 0;
  padding: 0;
  background: transparent;
}

.profile-nft-menu {
  position: absolute;
  z-index: 14;
  top: 42px;
  right: 34px;
  width: min(234px, calc(100% - 68px));
  padding: 14px 0;
  border-radius: 18px 0 18px 18px;
  background: #1A1A1A;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: 100% 0;
  animation: profile-nft-menu-in 160ms ease forwards;
}

.profile-nft-menu__item {
  position: relative;
  width: 100%;
  min-height: 47px;
  padding: 0 16px 0 18px;
  border: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  background: transparent;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.profile-nft-menu__item:active {
  filter: brightness(0.9);
}

.profile-nft-menu__active-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #383838;
  opacity: 0;
  transition: opacity 140ms ease;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg {
  opacity: 1;
}

.profile-nft-menu__icon {
  position: relative;
  z-index: 1;
  width: 24px;
  max-height: 32px;
  object-fit: contain;
}

.profile-nft-menu__text {
  position: relative;
  z-index: 1;
  min-width: 0;
  font-size: 18px;
  line-height: 1.12;
  font-weight: 400;
  white-space: normal;
}

@keyframes profile-nft-backdrop-in {
  to {
    opacity: 1;
  }
}

@keyframes profile-nft-sheet-in {
  to {
    transform: translateY(0);
  }
}

@keyframes profile-nft-menu-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 389px) {
  .profile-nft-detail-sheet {
    --profile-nft-sheet-radius: 30px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .profile-nft-detail__hero {
    margin-left: -18px;
    margin-right: -18px;
  }

  .profile-nft-detail__row {
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
  }

  .profile-nft-detail__label,
  .profile-nft-detail__value {
    font-size: 16px;
  }

  .profile-nft-menu {
    right: 30px;
    width: min(218px, calc(100% - 60px));
  }

  .profile-nft-menu__text {
    font-size: 16px;
  }
}


/* NFT detail sheet refinement: stable menu, lighter overlay, square hero art */
.profile-nft-detail-backdrop {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: profile-nft-backdrop-in 220ms ease forwards;
  will-change: opacity, backdrop-filter;
}

.profile-nft-detail-sheet {
  height: clamp(500px, 60dvh, 632px);
  animation: profile-nft-sheet-in 300ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
  will-change: transform;
}

.profile-nft-detail-layer.is-closing {
  pointer-events: none;
}

.profile-nft-detail-layer.is-closing .profile-nft-detail-backdrop {
  opacity: 1;
  animation: profile-nft-backdrop-out 220ms ease forwards;
}

.profile-nft-detail-layer.is-closing .profile-nft-detail-sheet {
  transform: translateY(0);
  animation: profile-nft-sheet-out 250ms cubic-bezier(0.4, 0, 0.9, 0.3) forwards;
}

.profile-nft-detail__grabber {
  top: -16px;
  height: 38px;
}

.profile-nft-detail__grabber::before {
  top: 11px;
  width: 176px;
  height: 6px;
}

.profile-nft-detail__hero {
  height: 43.5%;
  background: #111111;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  background: #111111;
}

.profile-nft-detail__hero .case-nft-art--profile-detail::before {
  z-index: 4;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0.14));
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  inset: auto;
  left: 50%;
  top: 0;
  width: min(118vw, 614px);
  height: min(118vw, 614px);
  max-width: none;
  max-height: none;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  transform-origin: top center;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background {
  object-fit: cover;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  overflow: hidden;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
  top: 46px;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(45%, 190px);
  height: min(45%, 190px);
  transform: translateX(-50%);
}

.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--transparent .case-nft-art__layer--item {
  width: min(48%, 204px);
  height: min(48%, 204px);
}

.profile-nft-detail__title-block {
  bottom: 18px;
}

.profile-nft-detail__title {
  font-size: clamp(23px, 6.15vw, 31px);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.profile-nft-detail__edition {
  margin-top: 5px;
  font-size: clamp(16px, 4.45vw, 20px);
}

.profile-nft-detail__more {
  top: 32px;
  right: 28px;
  transition: transform 150ms ease, background 150ms ease, opacity 150ms ease;
}

.profile-nft-detail__more:active {
  transform: scale(0.88);
  background: rgba(255, 255, 255, 0.12);
}

.profile-nft-detail__sell,
.profile-nft-menu__item {
  transition: transform 150ms ease, filter 150ms ease, background 150ms ease;
}

.profile-nft-detail__sell:active {
  transform: scale(0.985);
  filter: brightness(0.9);
}

.profile-nft-menu {
  top: 72px;
  right: 28px;
  width: min(205px, calc(100% - 56px));
  padding: 0;
  border-radius: 17px 0 17px 17px;
  background: #1A1A1A;
  transform-origin: 100% 0;
  animation: profile-nft-menu-in 170ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
}

.profile-nft-menu.is-stable {
  opacity: 1;
  transform: none;
  animation: none;
}

.profile-nft-menu.is-closing {
  opacity: 1;
  transform: none;
  pointer-events: none;
  animation: profile-nft-menu-out 150ms ease forwards;
}

.profile-nft-menu__item {
  min-height: 45px;
  padding: 0 12px 0 15px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

.profile-nft-menu__item[data-profile-nft-status="profile"] {
  margin-top: 8px;
}

.profile-nft-menu__item:active {
  transform: scale(0.985);
  filter: brightness(0.9);
}

.profile-nft-menu__active-bg {
  border-radius: 0;
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  border-top-left-radius: 17px;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  border-bottom-left-radius: 17px;
  border-bottom-right-radius: 17px;
}

.profile-nft-menu__icon {
  width: 23px;
  max-height: 30px;
}

.profile-nft-menu__text {
  font-size: 17px;
  line-height: 1.1;
}

.profile-nft-detail__menu-scrim.is-closing {
  pointer-events: none;
}

@keyframes profile-nft-backdrop-out {
  to {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

@keyframes profile-nft-sheet-out {
  to {
    transform: translateY(104%);
  }
}

@keyframes profile-nft-menu-out {
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

@media (max-width: 389px) {
  .profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
    top: 42px;
    width: min(47%, 178px);
    height: min(47%, 178px);
  }

  .profile-nft-detail__title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .profile-nft-menu {
    right: 24px;
    width: min(198px, calc(100% - 48px));
  }

  .profile-nft-menu__item {
    padding-left: 14px;
    padding-right: 10px;
    gap: 9px;
  }

  .profile-nft-menu__text {
    font-size: 16px;
  }
}


/* NFT detail sheet final tuning: lighter backdrop, visible grabber, compact animated menu, configurable hero crop */
.profile-nft-detail-backdrop {
  background: rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-nft-detail-sheet {
  overflow: visible !important;
}

.profile-nft-detail__grabber {
  top: -8px !important;
  height: 24px !important;
}

.profile-nft-detail__grabber::before {
  top: 4px !important;
  width: 176px !important;
  height: 5px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.profile-nft-detail__hero {
  overflow: hidden !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: min(calc(var(--nft-detail-bg-size-vw, 112) * 1vw), 620px) !important;
  height: min(calc(var(--nft-detail-bg-size-vw, 112) * 1vw), 620px) !important;
  transform: translateX(-50%) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
  top: calc(var(--nft-detail-item-top-px, 30) * 1px) !important;
  width: min(calc(var(--nft-detail-item-size-vw, 52) * 1vw), 218px) !important;
  height: min(calc(var(--nft-detail-item-size-vw, 52) * 1vw), 218px) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--transparent .case-nft-art__layer--item {
  width: min(calc((var(--nft-detail-item-size-vw, 52) + 4) * 1vw), 232px) !important;
  height: min(calc((var(--nft-detail-item-size-vw, 52) + 4) * 1vw), 232px) !important;
}

.profile-nft-detail__title-block {
  bottom: 19px !important;
}

.profile-nft-detail__title {
  font-size: clamp(21px, 5.55vw, 28px) !important;
  line-height: 1.02 !important;
}

.profile-nft-detail__edition {
  margin-top: 4px !important;
  font-size: clamp(15px, 4vw, 18px) !important;
}

.profile-nft-menu {
  top: 66px !important;
  right: 28px !important;
  width: min(202px, calc(100% - 56px)) !important;
  padding: 0 !important;
  border-radius: 17px 0 17px 17px !important;
}

.profile-nft-menu__item {
  min-height: 47px !important;
  padding: 0 11px 0 15px !important;
  gap: 9px !important;
  transition: transform 130ms ease, filter 130ms ease, background-color 170ms ease !important;
}

.profile-nft-menu__item[data-profile-nft-status="profile"] {
  margin-top: 0 !important;
  min-height: 53px !important;
  padding-bottom: 2px !important;
}

.profile-nft-menu__item:active {
  transform: scale(0.975) !important;
  filter: brightness(0.92) !important;
}

.profile-nft-menu__active-bg {
  inset: -1px 0 !important;
  transform: scaleY(0.98);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.18, 0.84, 0.22, 1) !important;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg {
  opacity: 1 !important;
  transform: scaleY(1.02);
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  top: 0 !important;
  border-top-left-radius: 17px !important;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  bottom: 0 !important;
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

.profile-nft-menu__icon {
  transition: transform 170ms ease, opacity 170ms ease, filter 170ms ease !important;
}

.profile-nft-menu__text {
  transition: opacity 170ms ease, transform 170ms ease !important;
}

.profile-nft-menu__item.is-status-changing .profile-nft-menu__icon {
  animation: profile-nft-menu-icon-swap 180ms ease both;
}

.profile-nft-menu__item.is-status-changing .profile-nft-menu__text {
  animation: profile-nft-menu-text-swap 180ms ease both;
}

@keyframes profile-nft-menu-icon-swap {
  0% { opacity: 0.62; transform: scale(0.82) rotate(-4deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes profile-nft-menu-text-swap {
  0% { opacity: 0.72; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 389px) {
  .profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
    top: calc(var(--nft-detail-item-top-px, 28) * 1px) !important;
    width: min(calc(var(--nft-detail-item-size-vw, 50) * 1vw), 204px) !important;
    height: min(calc(var(--nft-detail-item-size-vw, 50) * 1vw), 204px) !important;
  }

  .profile-nft-menu {
    top: 64px !important;
    right: 24px !important;
    width: min(196px, calc(100% - 48px)) !important;
  }

  .profile-nft-menu__item {
    padding-left: 14px !important;
    padding-right: 9px !important;
  }
}


/* NFT detail layout editor: unrestricted hero sizing */
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
  width: calc(var(--nft-detail-item-size-vw, 52) * 1vw) !important;
  height: calc(var(--nft-detail-item-size-vw, 52) * 1vw) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--transparent .case-nft-art__layer--item {
  width: calc((var(--nft-detail-item-size-vw, 52) + 4) * 1vw) !important;
  height: calc((var(--nft-detail-item-size-vw, 52) + 4) * 1vw) !important;
}


/* NFT detail final pass: wider hero background bleed, closer menu trigger, height-aware hero background */
.profile-nft-detail-backdrop {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-nft-detail__hero {
  overflow: hidden !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  overflow: visible !important;
  background: transparent !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__detail-bleed-bg {
  position: absolute;
  z-index: 0;
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw * 2.06) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw * 1.44) !important;
  transform: translateX(-50%) !important;
  object-fit: fill !important;
  object-position: center center !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw) !important;
  transform: translateX(-50%) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background {
  z-index: 1 !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  z-index: 2 !important;
  overflow: visible !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--item {
  z-index: 5 !important;
}

.profile-nft-detail__more {
  top: 24px !important;
  right: 24px !important;
}

.profile-nft-menu {
  top: 56px !important;
  right: 24px !important;
  width: min(202px, calc(100% - 48px)) !important;
}

@media (max-width: 389px) {
  .profile-nft-detail__more {
    top: 22px !important;
    right: 20px !important;
  }

  .profile-nft-menu {
    top: 52px !important;
    right: 20px !important;
    width: min(196px, calc(100% - 40px)) !important;
  }
}


/* NFT detail polish: unclipped hero patterns, decimal price styling, menu anchor offset, context pattern contrast */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-opacity: 0.3;
  --case-nft-pattern-opacity-multiplier: 1;
}

.case-nft-art:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.38;
  --case-nft-pattern-opacity-multiplier: 1.24;
}

.case-nft-art.case-nft-art--pattern-light:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.26;
  --case-nft-pattern-opacity-multiplier: 0.86;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  overflow: visible !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-mark,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity));
}

.profile-nft-detail__more {
  top: 16px !important;
  right: 38px !important;
}

.profile-nft-menu {
  top: 48px !important;
  right: 38px !important;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber::before {
  background: rgba(255, 255, 255, 0.42) !important;
}

.profile-nft-detail__price {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}

.profile-nft-detail__price-whole {
  color: rgba(255, 255, 255, 0.86);
}

.profile-nft-detail__price-decimal {
  margin-left: 1px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.86em;
}

@media (max-width: 389px) {
  .profile-nft-detail__more {
    top: 14px !important;
    right: 34px !important;
  }

  .profile-nft-menu {
    top: 44px !important;
    right: 34px !important;
  }
}


/* NFT detail correction pass: restore original background crop, keep pattern overflow, fully dim grabber */
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-field {
  inset: auto !important;
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw) !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-mark,
.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity));
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber::before {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.08)) !important;
}


/* NFT detail final correction: solid grabber darkening, darker patterns, solid edge-color background fill */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-opacity: 0.38;
  --case-nft-pattern-opacity-multiplier: 1.2;
  background: var(--nft-detail-fill-color, #1A1A1A) !important;
}

.case-nft-art:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.42;
  --case-nft-pattern-opacity-multiplier: 1.34;
}

.case-nft-art.case-nft-art--pattern-light:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.31;
  --case-nft-pattern-opacity-multiplier: 1.06;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__detail-bleed-bg {
  display: none !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background {
  inset: auto !important;
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw) !important;
  transform: translateX(-50%) !important;
  object-fit: cover !important;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber {
  background: transparent !important;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber::before {
  background: #8c8c8c !important;
  box-shadow: none !important;
}


/* NFT detail background fit pass: full-width centered background, unchanged pattern layout, darker grabber */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  background: transparent !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail .case-nft-art__layer--background {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.profile-nft-detail-layer.is-menu-open .profile-nft-detail__grabber::before {
  background: #5f5f5f !important;
}


/* NFT pattern tuning: slightly smaller and darker in detail and square cards */
.case-nft-art__pattern-mark {
  transform: translate(-50%, -50%) rotate(var(--case-pattern-rotate, 0deg)) scale(var(--case-nft-pattern-scale, 1)) !important;
  transform-origin: center center;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-opacity: 0.46 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-scale: 0.9 !important;
}

.case-nft-art:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.5 !important;
  --case-nft-pattern-opacity-multiplier: 1.42 !important;
  --case-nft-pattern-scale: 0.88 !important;
}

.case-nft-art.case-nft-art--pattern-light:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.38 !important;
  --case-nft-pattern-opacity-multiplier: 1.14 !important;
  --case-nft-pattern-scale: 0.88 !important;
}


/* NFT pattern perspective fix: vertically compress placement without deforming marks, and darken patterns more */
.case-nft-art__pattern-mark {
  top: calc(50% + ((var(--case-pattern-top) - 50%) * var(--case-nft-pattern-y-spread, 1))) !important;
  filter: brightness(var(--case-nft-pattern-brightness, 1)) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-opacity: 0.62 !important;
  --case-nft-pattern-opacity-multiplier: 1.58 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 0.88 !important;
  --case-nft-pattern-brightness: 0.52 !important;
}

.case-nft-art:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.66 !important;
  --case-nft-pattern-opacity-multiplier: 1.66 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 0.86 !important;
  --case-nft-pattern-brightness: 0.48 !important;
}

.case-nft-art.case-nft-art--pattern-light:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.52 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 0.86 !important;
  --case-nft-pattern-brightness: 0.58 !important;
}


/* NFT pattern placement refinement: restore square-card layout, tighten and raise detail layout, keep current darkness */
.case-nft-art {
  --case-nft-pattern-y-spread: 1;
  --case-nft-pattern-y-offset: 0%;
}

.case-nft-art__pattern-mark {
  top: calc(50% + ((var(--case-pattern-top) - 50%) * var(--case-nft-pattern-y-spread, 1)) + var(--case-nft-pattern-y-offset, 0%)) !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-opacity: 0.62 !important;
  --case-nft-pattern-opacity-multiplier: 1.58 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 0.74 !important;
  --case-nft-pattern-y-offset: -4.75% !important;
  --case-nft-pattern-brightness: 0.52 !important;
}

.case-nft-art:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.66 !important;
  --case-nft-pattern-opacity-multiplier: 1.66 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.48 !important;
}

.case-nft-art.case-nft-art--pattern-light:not(.case-nft-art--profile-detail) {
  --case-nft-pattern-opacity: 0.52 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.58 !important;
}

/* NFT detail final raise: keep current darkness, raise only info-sheet pattern layout */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-y-spread: 0.74 !important;
  --case-nft-pattern-y-offset: -8.5% !important;
}


/* NFT pattern reveal + final detail raise */
.case-nft-art[data-nft-pattern-src] .case-nft-art__pattern-field {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.case-nft-art[data-nft-pattern-ready="true"] .case-nft-art__pattern-field {
  opacity: 1;
}

.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-y-offset: -11% !important;
}


/* NFT detail micro-tuning: tighter vertical spacing for info-sheet patterns */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -11% !important;
}


/* NFT detail final spacing pass: smaller/higher info patterns, more right-aligned menu anchor, roomier menu items */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-scale: 0.92 !important;
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -13.25% !important;
}

.profile-nft-detail__more {
  right: 22px !important;
}

.profile-nft-menu {
  right: 22px !important;
}

.profile-nft-menu__item {
  padding: 0 12px 0 19px !important;
  gap: 11px !important;
}

.profile-nft-menu__item[data-profile-nft-status="profile"] {
  padding-left: 19px !important;
}

@media (max-width: 389px) {
  .profile-nft-detail__more {
    right: 18px !important;
  }

  .profile-nft-menu {
    right: 18px !important;
  }

  .profile-nft-menu__item {
    padding-left: 17px !important;
    gap: 10px !important;
  }
}


/* NFT detail final menu/text/pattern polish */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-scale: 0.88 !important;
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -16.5% !important;
}

.profile-nft-menu {
  right: 22px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.profile-nft-menu__item {
  padding: 0 12px 0 21px !important;
  gap: 11px !important;
}

.profile-nft-menu__item[data-profile-nft-status="profile"] {
  padding-left: 21px !important;
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  top: -7px !important;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  bottom: -7px !important;
}

@media (max-width: 389px) {
  .profile-nft-detail__hero .case-nft-art--profile-detail {
    --case-nft-pattern-scale: 0.88 !important;
    --case-nft-pattern-y-offset: -15.5% !important;
  }

  .profile-nft-menu {
    right: 18px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .profile-nft-menu__item {
    padding-left: 19px !important;
    gap: 10px !important;
  }

  .profile-nft-menu__item[data-profile-nft-status="profile"] {
    padding-left: 19px !important;
  }

  .profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
    top: -6px !important;
  }

  .profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
    bottom: -6px !important;
  }
}


/* NFT detail final micro pass: smaller and higher info patterns, active labels keep preposition with the next word */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-scale: 0.82 !important;
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -20.25% !important;
}

.profile-nft-menu__text {
  word-break: normal !important;
  overflow-wrap: normal !important;
}

@media (max-width: 389px) {
  .profile-nft-detail__hero .case-nft-art--profile-detail {
    --case-nft-pattern-scale: 0.82 !important;
    --case-nft-pattern-y-offset: -19.25% !important;
  }
}



/* NFT detail final micro-tuning: slightly smaller/lower info patterns, chance badges a bit lower */
.profile-nft-detail__hero .case-nft-art--profile-detail {
  --case-nft-pattern-scale: 0.79 !important;
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -19.1% !important;
}

.profile-nft-detail__chance {
  transform: translateY(2px) !important;
}

@media (max-width: 389px) {
  .profile-nft-detail__hero .case-nft-art--profile-detail {
    --case-nft-pattern-scale: 0.79 !important;
    --case-nft-pattern-y-offset: -18.2% !important;
  }
}

/* performance rewrite 2026-04-29: Profile scroll mechanics
   Old laggy behavior changed sticky header height/margins and many CSS variables on every scroll frame.
   New behavior keeps layout fixed and moves only compositor-friendly transform/opacity properties from create-app.js. */
.profile-screen {
  --profile-header-expanded-fixed: 204px;
  --profile-header-collapsed-fixed: 68px;
  --profile-avatar-expanded-fixed: 92px;
  --profile-avatar-collapsed-fixed: 42px;
  --profile-hero-fill: #08090b;
  --profile-hero-solid: #08090b;
  --profile-accent-border: #4a4d55;
  position: relative;
  min-height: 100%;
  background: var(--app-bg);
}

.profile-hero {
  position: sticky;
  top: 0;
  z-index: 8;
  height: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed));
  margin-bottom: 0 !important;
  overflow: visible;
  pointer-events: none;
  contain: paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.profile-hero__surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed));
  background: var(--profile-hero-fill);
  transform: translateZ(0) scaleY(1);
  transform-origin: top center;
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
}

.profile-hero__actions {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 16px);
  left: var(--page-side);
  right: var(--page-side);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateZ(0);
  pointer-events: auto;
}

.profile-hero__avatar-wrap {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 50%;
  z-index: 4;
  width: var(--profile-avatar-expanded-fixed);
  height: var(--profile-avatar-expanded-fixed);
  transform: translate3d(-50%, 0, 0) scale(1);
  transform-origin: center center;
  opacity: 1;
  pointer-events: none;
  will-change: transform, opacity;
  contain: layout paint style;
  backface-visibility: hidden;
}

.profile-identity {
  position: absolute;
  z-index: 4;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.profile-identity--expanded {
  top: calc(env(safe-area-inset-top) + 128px);
  left: 50%;
  width: min(calc(100% - 44px), 248px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(-50%, 0, 0);
  opacity: 1;
}

.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 18px);
  left: 124px;
  right: 58px;
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  transform: translate3d(0, 3px, 0);
  pointer-events: none;
}

.profile-identity--compact .profile-avatar--compact {
  display: none !important;
}

.profile-identity__compact-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
}

.profile-title--compact {
  width: 100%;
  color: rgba(255, 255, 255, 0.995);
  font-size: 19px;
  line-height: 1.04;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.profile-level--compact {
  margin-top: 1px;
  color: rgba(255, 226, 222, 0.98);
  font-size: 13px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}

.profile-level--compact .profile-level__text {
  font-size: 13.5px;
}

.profile-body {
  position: relative;
  z-index: 1;
  padding: 14px var(--page-side) calc(24px + env(safe-area-inset-bottom));
  transform: translateZ(0);
}

@media (max-width: 389px) {
  .profile-screen {
    --profile-header-expanded-fixed: 198px;
    --profile-header-collapsed-fixed: 66px;
    --profile-avatar-expanded-fixed: 88px;
    --profile-avatar-collapsed-fixed: 40px;
  }

  .profile-hero__avatar-wrap {
    top: calc(env(safe-area-inset-top) + 26px);
  }

  .profile-identity--expanded {
    top: calc(env(safe-area-inset-top) + 128px);
    width: min(calc(100% - 40px), 236px);
  }

  .profile-identity--compact {
    top: calc(env(safe-area-inset-top) + 17px);
    left: 120px;
    right: 54px;
    min-height: 40px;
  }

  .profile-title--compact {
    font-size: 17px;
  }

  .profile-level__text,
  .profile-level--compact .profile-level__text {
    font-size: 13px;
  }
}

/* performance rewrite 2026-04-29: Case reel render window
   All reel items remain in HTML. create-app.js toggles .is-case-render-active only when an
   item is just above, inside, or just below the visible reel area. Hidden items keep their
   flex size, so the spin distance does not jump, but their artwork is not painted. */
.case-opening__stage.is-case-windowed .case-reel__item {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content-visibility: hidden;
  contain: layout paint style;
  contain-intrinsic-size: var(--case-reel-card-size-px, 72px) var(--case-reel-card-size-px, 72px);
  transition: none !important;
  filter: none !important;
}

.case-opening__stage.is-case-windowed .case-reel__item.is-case-render-active,
.case-opening__stage.is-case-windowed .case-reel__item.is-bonus-activating {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  content-visibility: visible;
}

.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) .case-reel__card,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) img,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) svg {
  visibility: hidden !important;
}

.case-reel__item--fast-art .case-nft-art__pattern-field {
  display: none !important;
}

.case-reel__track.is-spinning {
  will-change: transform;
  backface-visibility: hidden;
}

/* Case dimming / fade settings. The dim list is explicit (.is-bonus-dim-target), so the
   last visible rows fade correctly and the end of the bonus sequence has a real fade-out. */
.case-reel__item,
.case-reel__card::after {
  transition:
    opacity var(--case-bonus-dim-fade-ms, 820ms) cubic-bezier(0.22, 0.72, 0.22, 1),
    background var(--case-bonus-dim-fade-ms, 820ms) cubic-bezier(0.22, 0.72, 0.22, 1) !important;
  filter: none !important;
}

.case-reel__item--pending-out {
  animation:
    case-reel-dim-in-lite 420ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-out-lite 760ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.22, 0.72, 0.22, 1) forwards !important;
}

.case-reel__item--pending-out .case-reel__card::after {
  animation:
    case-reel-dim-overlay-in-lite 420ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-overlay-out-lite 760ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.22, 0.72, 0.22, 1) forwards !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target {
  opacity: 0.18 !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0.64) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target {
  opacity: 1 !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-activating {
  opacity: 1 !important;
}

@keyframes case-reel-dim-in-lite {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

@keyframes case-reel-dim-out-lite {
  from { opacity: 0.2; }
  to { opacity: 1; }
}

@keyframes case-reel-dim-overlay-in-lite {
  from { background: rgba(2, 4, 8, 0); }
  to { background: rgba(2, 4, 8, 0.58); }
}

@keyframes case-reel-dim-overlay-out-lite {
  from { background: rgba(2, 4, 8, 0.58); }
  to { background: rgba(2, 4, 8, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .profile-hero__surface,
  .profile-hero__avatar-wrap,
  .profile-identity,
  .case-reel__item,
  .case-reel__card::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Explicit bonus dim list wins over older broad :not(.is-bonus-activating) rules. */
.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating) {
  opacity: 1 !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

/* Bugfix pass 2026-04-29: Profile scroll layering and NFT info drag polish.
   Profile scroll state and snap thresholds live in create-app.js; this block only
   defines the paint order so avatar/header/name/level transitions remain stable. */
.profile-hero {
  isolation: isolate;
  overflow: hidden;
}

.profile-hero__surface {
  z-index: 1;
}

.profile-hero__avatar-wrap {
  z-index: 3;
}

.profile-identity--expanded {
  z-index: 2;
}

.profile-identity--compact {
  z-index: 4;
}

.profile-hero__actions {
  z-index: 6;
}

/* Unwanted avatar gradient removal: keep the circular shell, remove the blurred
   rectangular/backdrop artifact that could appear under the avatar on scroll. */
.profile-avatar {
  overflow: hidden;
  border-radius: 50%;
  isolation: isolate;
}

.profile-avatar::before {
  background: rgba(6, 7, 9, 0.34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Case prize loading/windowing: create-app.js preloads selected case/reel assets.
   Keep reel rows paintable during the spin so the render window cannot expose
   empty rows if image decode or a slow frame lands between two window updates. */
.case-opening__stage.is-case-windowed .case-reel__item {
  visibility: visible !important;
  opacity: 1 !important;
  content-visibility: auto;
  contain: layout paint style;
}

.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) .case-reel__card,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) img,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active) svg {
  visibility: visible !important;
}

/* NFT info panel drag behavior is implemented in create-app.js. These states
   prevent CSS keyframes from fighting pointer-driven transforms and keep overlay
   layering stable while the three-dot menu is open during panel close. */
.profile-nft-detail-layer {
  --profile-nft-drag-progress: 1;
  overflow-anchor: none;
}

.profile-nft-detail-layer.is-dragging,
.profile-nft-detail-layer.is-settling {
  pointer-events: auto;
  touch-action: none;
}

.profile-nft-detail-layer.is-dragging .profile-nft-detail-sheet,
.profile-nft-detail-layer.is-settling .profile-nft-detail-sheet,
.profile-nft-detail-layer.is-dragging .profile-nft-detail-backdrop,
.profile-nft-detail-layer.is-settling .profile-nft-detail-backdrop {
  animation: none !important;
  transition: none !important;
}

.profile-nft-detail__grabber {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.profile-nft-detail-layer.is-dragging .profile-nft-detail__grabber {
  cursor: grabbing;
}

.profile-nft-detail-layer.is-closing.is-menu-open .profile-nft-detail-sheet::after,
.profile-nft-detail-layer.is-dragging.is-menu-open .profile-nft-detail-sheet::after,
.profile-nft-detail-layer.is-settling.is-menu-open .profile-nft-detail-sheet::after {
  background: rgba(0, 0, 0, 0.4);
}


/* follow-up 2026-04-29: collapsed Profile alignment and case/NFT polish.
   Scroll progress is still driven from create-app.js; this block only tunes the
   collapsed paint positions requested after the first bugfix pass. */
.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 13px) !important;
  left: 116px !important;
  right: 54px !important;
  min-height: 40px !important;
  transform: translate3d(0, 1px, 0);
}

.profile-title--compact {
  font-size: 18px !important;
  line-height: 1.02 !important;
}

.profile-level--compact {
  margin-top: 0 !important;
}

.profile-hero__actions .icon-button {
  transform-origin: center center;
  will-change: transform;
}

.profile-hero__avatar-wrap {
  z-index: 4;
}

.profile-identity--compact {
  z-index: 5;
}

.profile-hero__actions {
  z-index: 7;
}

/* NFT info duplicate-open fix: after handle drag settles back open, keep the
   sheet in its final position without re-triggering the CSS enter keyframe. */
.profile-nft-detail-layer.is-open-settled .profile-nft-detail-sheet {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
}

.profile-nft-detail-layer.is-open-settled .profile-nft-detail-backdrop {
  animation: none !important;
  opacity: 1 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.profile-nft-detail-layer.is-closing .profile-nft-detail-sheet {
  animation: profile-nft-sheet-out 250ms cubic-bezier(0.4, 0, 0.9, 0.3) forwards !important;
}

.profile-nft-detail-layer.is-closing .profile-nft-detail-backdrop {
  animation: profile-nft-backdrop-out 220ms ease forwards !important;
}

/* Cases optimization: runtime windowing was disabled in create-app.js because
   per-frame visibility toggles caused reel lag. The dimming sequence remains
   class-driven and is intentionally skipped for one-reel spins by the renderer. */
.case-reel__track.is-spinning {
  will-change: transform;
  transform-style: preserve-3d;
}

@media (max-width: 389px) {
  .profile-identity--compact {
    top: calc(env(safe-area-inset-top) + 12px) !important;
    left: 108px !important;
    right: 50px !important;
    min-height: 38px !important;
  }

  .profile-title--compact {
    font-size: 16.5px !important;
  }
}

/* final pass 2026-04-29: collapsed profile alignment + smoother case fade/paint window */
.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 17px) !important;
  left: 116px !important;
  right: 54px !important;
  min-height: 40px !important;
}

.profile-title--compact {
  font-size: 18px !important;
  line-height: 1.04 !important;
}

.profile-level--compact {
  margin-top: 1px !important;
}

.profile-hero__actions .icon-button {
  transform-origin: center center;
  will-change: transform;
}

.case-opening__stage.is-case-windowed .case-reel__item {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  content-visibility: hidden !important;
  contain: layout paint style !important;
  contain-intrinsic-size: var(--case-reel-card-size-px, 72px) var(--case-reel-card-size-px, 72px);
  transition: none !important;
  filter: none !important;
}

.case-opening__stage.is-case-windowed .case-reel__item.is-case-render-active,
.case-opening__stage.is-case-windowed .case-reel__item.is-bonus-activating,
.case-opening__stage.is-case-windowed .case-reel__item.case-reel__item--pending-out,
.case-opening__stage.is-case-windowed .case-reel__item.case-reel__item--winning,
.case-opening__stage.is-case-windowed .case-reel__item.case-reel__item--bonus-visible {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  content-visibility: visible !important;
}

.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active):not(.is-bonus-activating):not(.case-reel__item--pending-out):not(.case-reel__item--winning):not(.case-reel__item--bonus-visible) .case-reel__card,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active):not(.is-bonus-activating):not(.case-reel__item--pending-out):not(.case-reel__item--winning):not(.case-reel__item--bonus-visible) img,
.case-opening__stage.is-case-windowed .case-reel__item:not(.is-case-render-active):not(.is-bonus-activating):not(.case-reel__item--pending-out):not(.case-reel__item--winning):not(.case-reel__item--bonus-visible) svg {
  visibility: hidden !important;
}

.case-opening__stage.is-spinning .case-nft-art--fast::before {
  display: none !important;
}

.case-opening__stage.is-spinning .case-reel__item--fast-art .case-nft-art__layer--item {
  filter: none !important;
  padding: 15% !important;
}

.case-opening__stage.is-spinning .case-reel__track {
  will-change: transform;
  transform: translate3d(0, var(--case-reel-end-offset, 0%), 0);
  backface-visibility: hidden;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-reel__card::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  transition-duration: var(--case-bonus-dim-fade-ms, 980ms) !important;
  transition-timing-function: cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target {
  opacity: 0.18 !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0.64) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target {
  opacity: 1 !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating),
.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating) {
  opacity: 1 !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating) .case-reel__card::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item:not(.is-bonus-dim-target):not(.is-bonus-activating) .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

@media (max-width: 389px) {
  .profile-identity--compact {
    top: calc(env(safe-area-inset-top) + 16px) !important;
    left: 108px !important;
    right: 50px !important;
    min-height: 38px !important;
  }

  .profile-title--compact {
    font-size: 16.5px !important;
  }
}

/* follow-up 2026-04-29: collapsed avatar, NFT drag continuity, full-cell case dimming, Black background pattern contrast */
.profile-hero__avatar-wrap {
  z-index: 5;
}

.case-reel__item {
  position: relative;
}

.case-reel__item::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: clamp(10px, 16%, 18px);
  background: rgba(2, 4, 8, 0);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1),
    background var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target::after {
  opacity: 1 !important;
  background: rgba(2, 4, 8, 0.64) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target::after {
  opacity: 0 !important;
  background: rgba(2, 4, 8, 0) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-activating::after {
  opacity: 0 !important;
  background: rgba(2, 4, 8, 0) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-reel__card::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
}

.case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(255, 255, 255, 0.78) !important;
  --case-nft-pattern-opacity: 0.92 !important;
  --case-nft-pattern-opacity-multiplier: 1.86 !important;
  --case-nft-pattern-brightness: 1.72 !important;
}

.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(255, 255, 255, 0.82) !important;
  --case-nft-pattern-opacity: 0.96 !important;
  --case-nft-pattern-opacity-multiplier: 1.96 !important;
  --case-nft-pattern-brightness: 1.82 !important;
}

@media (max-width: 389px) {
  .profile-identity--compact {
    left: 108px !important;
  }
}


/* follow-up 2026-04-30 v3: compact header polish, consistent black-pattern contrast, full-cell case dimming */
.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 17px) !important;
  left: 124px !important;
  right: 50px !important;
  min-height: 40px !important;
}

.profile-title--compact {
  line-height: 1.03 !important;
}

.profile-level--compact {
  margin-top: 2px !important;
}

@media (max-width: 389px) {
  .profile-identity--compact {
    top: calc(env(safe-area-inset-top) + 16px) !important;
    left: 116px !important;
    right: 48px !important;
    min-height: 38px !important;
  }
}

.case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(255, 255, 255, 0.72) !important;
  --case-nft-pattern-opacity: 0.82 !important;
  --case-nft-pattern-opacity-multiplier: 1.68 !important;
  --case-nft-pattern-brightness: 1.54 !important;
}

.case-reel__item {
  isolation: isolate;
}

.case-reel__item::before,
.case-reel__item::after {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 7;
  border-radius: clamp(10px, 16%, 18px);
  pointer-events: none;
  opacity: 0;
  transition:
    opacity var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1),
    background var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1),
    border-color var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-reel__item::before {
  background: rgba(28, 32, 42, 0);
  border: 1px solid rgba(255, 255, 255, 0);
}

.case-reel__item::after {
  background: rgba(2, 4, 8, 0);
}

.case-reel__item--pending-out::before {
  animation:
    case-reel-dim-panel-in 420ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-panel-out 760ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.22, 0.72, 0.22, 1) forwards !important;
}

.case-reel__item--pending-out::after {
  animation:
    case-reel-dim-cell-overlay-in 420ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-dim-cell-overlay-out 760ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.22, 0.72, 0.22, 1) forwards !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target::before {
  opacity: 1 !important;
  background: rgba(28, 32, 42, 0.28) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target::after {
  opacity: 1 !important;
  background: rgba(2, 4, 8, 0.68) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target::before,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target::after {
  opacity: 0 !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating::before,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-activating::before,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-activating::after {
  opacity: 0 !important;
  background: rgba(2, 4, 8, 0) !important;
  border-color: rgba(255, 255, 255, 0) !important;
}

@keyframes case-reel-dim-panel-in {
  from {
    opacity: 0;
    background: rgba(28, 32, 42, 0);
    border-color: rgba(255, 255, 255, 0);
  }

  to {
    opacity: 1;
    background: rgba(28, 32, 42, 0.28);
    border-color: rgba(255, 255, 255, 0.05);
  }
}

@keyframes case-reel-dim-panel-out {
  from {
    opacity: 1;
    background: rgba(28, 32, 42, 0.28);
    border-color: rgba(255, 255, 255, 0.05);
  }

  to {
    opacity: 0;
    background: rgba(28, 32, 42, 0);
    border-color: rgba(255, 255, 255, 0);
  }
}

@keyframes case-reel-dim-cell-overlay-in {
  from {
    opacity: 0;
    background: rgba(2, 4, 8, 0);
  }

  to {
    opacity: 1;
    background: rgba(2, 4, 8, 0.68);
  }
}

@keyframes case-reel-dim-cell-overlay-out {
  from {
    opacity: 1;
    background: rgba(2, 4, 8, 0.68);
  }

  to {
    opacity: 0;
    background: rgba(2, 4, 8, 0);
  }
}

/* bugfix 2026-04-30: compact profile offset + artwork-only case dimming */
.profile-identity--compact {
  top: calc(env(safe-area-inset-top) + 14px) !important;
  left: 116px !important;
  right: 50px !important;
}

.profile-screen .profile-body {
  padding-top: 6px !important;
}

.profile-screen .profile-form {
  margin-top: 8px !important;
}

@media (max-width: 389px) {
  .profile-identity--compact {
    top: calc(env(safe-area-inset-top) + 13px) !important;
    left: 108px !important;
    right: 48px !important;
  }
}

.case-reel__item::before,
.case-reel__item::after,
.case-reel__item--pending-out::before,
.case-reel__item--pending-out::after,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target::before,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target::before,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target::after {
  opacity: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  animation: none !important;
}

.case-reel__item--pending-out,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target {
  opacity: 1 !important;
  filter: none !important;
}

.case-reel__item--pending-out .case-reel__card::after,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-reel__card::after,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-reel__card::after {
  background: rgba(2, 4, 8, 0) !important;
  animation: none !important;
}

.case-reel__item--pending-out .case-nft-art,
.case-reel__item--pending-out .case-currency-art,
.case-reel__item--pending-out .case-bonus-art {
  animation:
    case-reel-art-opacity-dim-in 420ms var(--case-reel-resolve-delay, 0ms) cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    case-reel-art-opacity-dim-out 760ms var(--case-reel-clear-delay, 0ms) cubic-bezier(0.22, 0.72, 0.22, 1) forwards !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-nft-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-currency-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-bonus-art {
  opacity: 0.18 !important;
  filter: none !important;
  transition: opacity var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-nft-art,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-currency-art,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-bonus-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-nft-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-currency-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-bonus-art {
  opacity: 1 !important;
  filter: none !important;
}

@keyframes case-reel-art-opacity-dim-in {
  from { opacity: 1; }
  to { opacity: 0.18; }
}

@keyframes case-reel-art-opacity-dim-out {
  from { opacity: 0.18; }
  to { opacity: 1; }
}

/* follow-up 2026-04-30 v4: compact avatar micro-align, robust artwork-only case dimming, smoother games category switch */
.case-opening__stage.is-case-windowed .case-reel__item.is-bonus-dim-target {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  content-visibility: visible !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target,
.case-reel__item--pending-out {
  opacity: 1 !important;
  filter: none !important;
}

.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-nft-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-currency-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-dim-target .case-bonus-art {
  opacity: 0.18 !important;
  filter: none !important;
  transition: opacity var(--case-bonus-dim-fade-ms, 980ms) cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-nft-art,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-currency-art,
.case-opening__stage.is-bonus-dimming-out .case-reel__item.is-bonus-dim-target .case-bonus-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-nft-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-currency-art,
.case-opening__stage.is-bonus-dimmed .case-reel__item.is-bonus-activating .case-bonus-art {
  opacity: 1 !important;
  filter: none !important;
}

.case-reel__item--pending-out .case-nft-art,
.case-reel__item--pending-out .case-currency-art,
.case-reel__item--pending-out .case-bonus-art {
  will-change: opacity;
}

.games-category-switch__active {
  left: 2px !important;
  width: calc((100% - 4px) / 2) !important;
  transform: translate3d(var(--games-category-active-x, 0%), 0, 0) !important;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform;
}

.games-category-panels {
  transition: height 360ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  contain: layout paint style;
}

.games-category-panels__panel {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 280ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  will-change: transform, opacity;
}

.games-category-panels[data-games-category="games"] .games-category-panels__panel[data-games-category-panel="other"],
.games-category-panels[data-games-category="other"] .games-category-panels__panel[data-games-category-panel="games"] {
  filter: none !important;
  opacity: 0 !important;
}

.games-category-panels.is-switching .games-category-panels__panel {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .games-category-switch__active,
  .games-category-panels,
  .games-category-panels__panel {
    transition: none !important;
  }
}

/* follow-up 2026-04-30 v4: persistent games category switch state and lighter black NFT patterns */
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(255, 255, 255, 0.78) !important;
  --case-nft-pattern-opacity: 0.88 !important;
  --case-nft-pattern-opacity-multiplier: 1.78 !important;
  --case-nft-pattern-brightness: 1.68 !important;
}

/* follow-up 2026-04-30 v5: stock/NM upgrade actions */
.profile-nft-detail__actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 2px;
}

.profile-nft-detail__actions--upgrade {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.profile-nft-detail__actions .profile-nft-detail__sell {
  width: 100%;
  margin-top: 0;
}

.profile-nft-detail__sell,
.profile-nft-detail__upgrade {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: transparent;
  color: #ffffff;
  font-size: 15px !important;
  line-height: 1;
  font-weight: 700;
}

.profile-nft-detail__upgrade {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease, background 150ms ease, opacity 150ms ease;
}

.profile-nft-detail__upgrade:active {
  transform: scale(0.985);
  filter: brightness(0.9);
}

.profile-nft-detail__upgrade:disabled {
  cursor: default;
  opacity: 0.46;
  filter: grayscale(0.2);
}

.profile-nft-detail__upgrade-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-nft-detail__upgrade-tet {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}

@media (max-width: 389px) {
  .profile-nft-detail__actions {
    gap: 8px;
  }

  .profile-nft-detail__sell,
  .profile-nft-detail__upgrade {
    font-size: 14px !important;
  }
}

/* follow-up 2026-04-30 v6: case result modal, profile-sale toast, Gunmetal/Onyx pattern tuning */
.case-nft-art.case-nft-art--pattern-gunmetal,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-gunmetal,
.profile-collection-card .case-nft-art.case-nft-art--pattern-gunmetal {
  --case-nft-pattern-color: rgba(126, 138, 146, 0.72) !important;
  --case-nft-pattern-opacity: 0.72 !important;
  --case-nft-pattern-opacity-multiplier: 1.32 !important;
  --case-nft-pattern-brightness: 1.16 !important;
}

.case-nft-art.case-nft-art--pattern-onyx,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-onyx,
.profile-collection-card .case-nft-art.case-nft-art--pattern-onyx {
  --case-nft-pattern-color: rgba(5, 5, 7, 0.8) !important;
  --case-nft-pattern-opacity: 0.58 !important;
  --case-nft-pattern-opacity-multiplier: 1.1 !important;
  --case-nft-pattern-brightness: 0.34 !important;
}

.app-sale-toast-slot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 78px);
  width: min(430px, 100vw);
  height: 0;
  margin: 0 auto;
  overflow: visible;
  pointer-events: none;
  z-index: 80;
}

.app-sale-toast {
  left: 20px !important;
  right: 20px !important;
  top: auto !important;
  bottom: calc(var(--slot-toast-index, 0) * 44px);
  min-height: 40px;
  background: rgba(20, 66, 38, 0.95) !important;
  border-color: rgba(122, 255, 164, 0.16) !important;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transform: translateY(18px) scale(0.988);
  transition:
    bottom 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-sale-toast.is-visible,
.app-sale-toast.is-entered {
  transform: translateY(0) scale(1);
}

.app-sale-toast.is-hiding {
  transform: translateY(12px) scale(0.992);
}

.app-sale-toast__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-result-layer {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 22px) 16px calc(env(safe-area-inset-bottom) + 22px);
  background: rgba(5, 5, 20, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: caseResultLayerEnter 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.case-result-panel {
  width: min(100%, 390px);
  max-height: min(82vh, 690px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 16px;
  padding: 22px 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% -10%, rgba(168, 99, 255, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(56, 50, 92, 0.94), rgba(32, 29, 54, 0.96));
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  animation: caseResultPanelEnter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.case-result-panel__header {
  display: grid;
  gap: 8px;
  text-align: center;
}

.case-result-panel__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.case-result-panel__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.case-result-panel__divider {
  opacity: 0.42;
}

.case-result-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.case-result-price__value {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
}

.case-result-price__icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
}

.case-result-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  overflow-y: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.case-result-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.case-result-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, auto) auto;
  gap: 8px;
  padding: 10px 10px 12px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  isolation: isolate;
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.case-result-card:active {
  transform: scale(0.985);
}

.case-result-card__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)),
    rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 28px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 180ms ease;
}

.case-result-card.is-selected .case-result-card__glass {
  opacity: 1;
}

.case-result-card.is-dimmed {
  opacity: 0.66;
}

.case-result-card.is-dimmed .case-result-card__art {
  filter: brightness(0.62) saturate(0.9);
  transform: scale(0.97);
}

.case-result-card__art {
  display: block;
  min-width: 0;
  transition: filter 180ms ease, transform 180ms ease;
}

.case-nft-art--case-result {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
}

.case-result-card__meta {
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.case-result-card__title {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-result-card__price .case-result-price__value {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.case-result-card__price .case-result-price__icon {
  width: 13px;
  height: 13px;
}

.case-result-panel__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.case-result-panel__button {
  min-height: 48px;
  border: 0;
  border-radius: 18px;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: transform 160ms ease, filter 160ms ease;
}

.case-result-panel__button:active {
  transform: scale(0.985);
  filter: brightness(0.94);
}

.case-result-panel__button--sell {
  background: rgba(19, 19, 35, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.case-result-panel__button--claim {
  background: linear-gradient(180deg, #b75cff 0%, #9a48f3 100%);
  box-shadow: 0 12px 28px rgba(146, 70, 236, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

@keyframes caseResultLayerEnter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes caseResultPanelEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 389px) {
  .case-result-layer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .case-result-panel {
    gap: 13px;
    padding: 20px 14px 16px;
    border-radius: 26px;
  }

  .case-result-grid {
    gap: 9px;
  }

  .case-result-card {
    padding: 8px 8px 10px;
    border-radius: 20px;
  }

  .case-result-panel__title {
    font-size: 21px;
  }

  .case-result-card__title {
    font-size: 14px;
  }
}


/* follow-up 2026-04-30 v7: compact glass case-result modal + darker Black patterns */
.case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(124, 124, 124, 0.33) !important;
  --case-nft-pattern-opacity: 0.54 !important;
  --case-nft-pattern-opacity-multiplier: 1.04 !important;
  --case-nft-pattern-brightness: 0.92 !important;
}

.case-result-layer {
  background: rgba(4, 7, 16, 0.36) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  animation: none !important;
}

.case-result-layer.is-entering {
  animation: caseResultLayerEnterSoft 220ms cubic-bezier(0.22, 0.9, 0.32, 1) both !important;
}

.case-result-layer.is-closing {
  animation: caseResultLayerExitSoft 180ms ease both !important;
}

.case-result-layer.is-closing .case-result-panel {
  animation: caseResultPanelExitSoft 180ms ease both !important;
}

.case-result-panel {
  width: min(100%, 346px) !important;
  max-height: min(76vh, 590px) !important;
  gap: 12px !important;
  padding: 16px 14px 14px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(18px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;
  animation: caseResultPanelEnterSoft 240ms cubic-bezier(0.2, 0.88, 0.3, 1) both !important;
}

.case-result-panel__header {
  gap: 6px !important;
}

.case-result-panel__title {
  font-size: 18px !important;
  line-height: 1.02 !important;
}

.case-result-panel__summary {
  gap: 7px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px !important;
}

.case-result-price__value {
  color: rgba(255, 255, 255, 0.9) !important;
}

.case-result-grid {
  gap: 10px !important;
  padding: 1px !important;
  align-content: start !important;
}

.case-result-card {
  gap: 7px !important;
  padding: 7px 7px 9px !important;
  border-radius: 20px !important;
}

.case-result-card__glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 22px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.case-result-card.is-dimmed {
  opacity: 0.8 !important;
}

.case-result-card.is-dimmed .case-result-card__art {
  filter: brightness(0.72) saturate(0.9) !important;
  transform: translate3d(0, 4px, 0) scale(0.972) !important;
}

.case-result-card__art {
  border-radius: 16px !important;
  overflow: hidden !important;
}

.case-nft-art--case-result {
  border-radius: 16px !important;
}

.case-result-card__meta {
  gap: 4px !important;
}

.case-result-card__title {
  font-size: 14px !important;
}

.case-result-card__price .case-result-price__value {
  font-size: 13px !important;
}

.case-result-panel__actions {
  gap: 8px !important;
}

.case-result-panel__button {
  min-height: 44px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  font-size: 17px !important;
}

.case-result-panel__button--sell,
.case-result-panel__button--claim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important;
}

.case-result-panel__button--claim {
  border-color: rgba(196, 154, 255, 0.34) !important;
}

@keyframes caseResultLayerEnterSoft {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes caseResultLayerExitSoft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes caseResultPanelEnterSoft {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes caseResultPanelExitSoft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.985);
  }
}

@media (max-width: 389px) {
  .case-result-panel {
    width: min(100%, 334px) !important;
    max-height: min(76vh, 568px) !important;
    padding: 14px 12px 12px !important;
  }

  .case-result-grid {
    gap: 8px !important;
  }

  .case-result-card {
    padding: 6px 6px 8px !important;
  }

  .case-result-panel__title {
    font-size: 17px !important;
  }

  .case-result-panel__button {
    min-height: 42px !important;
    font-size: 16px !important;
  }
}


/* follow-up 2026-04-30 v8: unify case-result glass, soften black pattern, improve sale toasts */
.app-sale-toast-slot {
  bottom: calc(env(safe-area-inset-bottom) + 104px) !important;
}

.app-sale-toast {
  min-height: 42px !important;
  background: rgba(23, 93, 47, 0.96) !important;
  border-color: rgba(132, 255, 173, 0.2) !important;
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.app-sale-toast__text,
.app-sale-toast .slot-toast__amount {
  font-weight: 600 !important;
}

.case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(136, 136, 136, 0.4) !important;
  --case-nft-pattern-opacity: 0.6 !important;
  --case-nft-pattern-opacity-multiplier: 1.08 !important;
  --case-nft-pattern-brightness: 0.98 !important;
}

.case-result-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06)) !important;
}

.case-result-card__glass,
.case-result-panel__button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.case-result-panel__button--sell,
.case-result-panel__button--claim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.case-result-panel__button--claim {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px rgba(0, 0, 0, 0.12) !important;
}

.case-result-card .case-nft-art {
  --case-nft-pattern-opacity: 0.62 !important;
  --case-nft-pattern-opacity-multiplier: 1.56 !important;
  --case-nft-pattern-brightness: 0.52 !important;
}

.case-result-card .case-nft-art.case-nft-art--pattern-light {
  --case-nft-pattern-opacity: 0.54 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-brightness: 0.6 !important;
}

.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-opacity: 0.6 !important;
  --case-nft-pattern-opacity-multiplier: 1.08 !important;
  --case-nft-pattern-brightness: 0.98 !important;
}

.case-result-card .case-nft-art.case-nft-art--pattern-gunmetal {
  --case-nft-pattern-opacity: 0.72 !important;
  --case-nft-pattern-opacity-multiplier: 1.32 !important;
  --case-nft-pattern-brightness: 1.16 !important;
}

.case-result-card .case-nft-art.case-nft-art--pattern-onyx {
  --case-nft-pattern-opacity: 0.58 !important;
  --case-nft-pattern-opacity-multiplier: 1.1 !important;
  --case-nft-pattern-brightness: 0.34 !important;
}


/* follow-up 2026-05-01: dark case glass, case-header toasts, compact nav */
.case-header-toast-slot {
  position: relative;
  height: 0;
  overflow: visible;
}

.case-prize-card {
  position: relative !important;
  isolation: isolate;
  padding: 9px 8px 10px !important;
  border-radius: 22px !important;
}

.case-prize-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.case-prize-card > * {
  position: relative;
  z-index: 1;
}

.case-prize-card__preview,
.case-prize-card__preview .case-nft-art {
  border-radius: 16px !important;
}

.case-prize-card__meta {
  gap: 3px !important;
}

.case-prize-card__name,
.case-result-card__title {
  color: rgba(255, 255, 255, 0.92) !important;
}

.case-prize-card__price,
.case-result-card__price .case-result-price__value {
  color: rgba(223, 230, 239, 0.82) !important;
}

.case-prize-card__price-whole {
  color: rgba(223, 230, 239, 0.82) !important;
}

.case-prize-card__price-decimal {
  color: rgba(223, 230, 239, 0.54) !important;
}

.case-result-panel {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.case-result-card__glass,
.case-result-panel__button,
.case-result-panel__button--sell,
.case-result-panel__button--claim {
  background: rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.case-result-card.is-selected .case-result-card__glass,
.case-result-panel__button--claim {
  border-color: rgba(188, 150, 255, 0.42) !important;
}

.case-result-card.is-dimmed {
  opacity: 0.82 !important;
}

.case-result-card.is-dimmed .case-result-card__glass {
  background: rgba(0, 0, 0, 0.38) !important;
}

.case-result-card.is-dimmed .case-result-card__art {
  filter: brightness(0.82) saturate(0.96) !important;
  transform: none !important;
}

.case-prize-card .case-nft-art,
.case-result-card .case-nft-art {
  --case-nft-pattern-opacity: 0.66 !important;
  --case-nft-pattern-opacity-multiplier: 1.66 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.48 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-light,
.case-result-card .case-nft-art.case-nft-art--pattern-light {
  --case-nft-pattern-opacity: 0.52 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.58 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(136, 136, 136, 0.4) !important;
  --case-nft-pattern-opacity: 0.6 !important;
  --case-nft-pattern-opacity-multiplier: 1.08 !important;
  --case-nft-pattern-brightness: 0.98 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-gunmetal,
.case-result-card .case-nft-art.case-nft-art--pattern-gunmetal {
  --case-nft-pattern-color: rgba(126, 138, 146, 0.72) !important;
  --case-nft-pattern-opacity: 0.72 !important;
  --case-nft-pattern-opacity-multiplier: 1.32 !important;
  --case-nft-pattern-brightness: 1.16 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-onyx,
.case-result-card .case-nft-art.case-nft-art--pattern-onyx {
  --case-nft-pattern-color: rgba(5, 5, 7, 0.8) !important;
  --case-nft-pattern-opacity: 0.58 !important;
  --case-nft-pattern-opacity-multiplier: 1.1 !important;
  --case-nft-pattern-brightness: 0.34 !important;
}


/* follow-up 2026-05-01 v2: neutral case borders, slot-exact case toasts, profile-like NFT patterns */
.case-prize-card .case-nft-art__layer--item,
.case-result-card .case-nft-art__layer--item {
  padding: 13.5% !important;
}

.case-prize-card .case-nft-art--transparent .case-nft-art__layer--item,
.case-result-card .case-nft-art--transparent .case-nft-art__layer--item {
  padding: 6% !important;
}

.case-prize-card .case-nft-art__pattern-mark--custom,
.case-result-card .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity)) !important;
}

.case-prize-card .case-nft-art,
.case-result-card .case-nft-art {
  --case-nft-pattern-opacity: 0.66 !important;
  --case-nft-pattern-opacity-multiplier: 1.66 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.48 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-light,
.case-result-card .case-nft-art.case-nft-art--pattern-light {
  --case-nft-pattern-opacity: 0.52 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-scale: 1 !important;
  --case-nft-pattern-y-spread: 1 !important;
  --case-nft-pattern-y-offset: 0% !important;
  --case-nft-pattern-brightness: 0.58 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(136, 136, 136, 0.4) !important;
  --case-nft-pattern-opacity: 0.6 !important;
  --case-nft-pattern-opacity-multiplier: 1.08 !important;
  --case-nft-pattern-brightness: 0.98 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-gunmetal,
.case-result-card .case-nft-art.case-nft-art--pattern-gunmetal {
  --case-nft-pattern-color: rgba(126, 138, 146, 0.72) !important;
  --case-nft-pattern-opacity: 0.72 !important;
  --case-nft-pattern-opacity-multiplier: 1.32 !important;
  --case-nft-pattern-brightness: 1.16 !important;
}

.case-prize-card .case-nft-art.case-nft-art--pattern-onyx,
.case-result-card .case-nft-art.case-nft-art--pattern-onyx {
  --case-nft-pattern-color: rgba(5, 5, 7, 0.8) !important;
  --case-nft-pattern-opacity: 0.58 !important;
  --case-nft-pattern-opacity-multiplier: 1.1 !important;
  --case-nft-pattern-brightness: 0.34 !important;
}

.case-result-card__glass,
.case-result-card.is-selected .case-result-card__glass,
.case-result-panel__button,
.case-result-panel__button--sell,
.case-result-panel__button--claim {
  border-color: rgba(148, 163, 184, 0.35) !important;
}

.case-result-panel__button--claim,
.case-result-panel__button--claim:disabled,
.case-result-panel__button--claim[aria-disabled="true"] {
  border-color: rgba(148, 163, 184, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(0, 0, 0, 0.16) !important;
}


/* follow-up 2026-05-01 v3: exact slot-style case toast, visible result grid under actions, profile-like editor hero */
.case-detail-screen .slot-header-toast-slot {
  z-index: 2;
}

.case-detail-screen .slot-header-toast-slot .slot-toast {
  left: 12px !important;
  right: 12px !important;
  top: calc(6px + (var(--slot-toast-index, 0) * 44px)) !important;
  bottom: auto !important;
  min-height: 38px !important;
}

.case-result-panel {
  overflow: visible !important;
}

.case-result-grid {
  padding-bottom: 104px !important;
  margin-bottom: -104px !important;
  overflow-y: auto !important;
  align-content: start !important;
}

.case-result-panel__actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  margin-top: -96px !important;
  padding-top: 96px !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(6, 8, 12, 0.18) 28%, rgba(6, 8, 12, 0.42) 100%) !important;
}

.profile-edit-screen .profile-hero {
  margin-bottom: 0;
}

.profile-edit-screen .profile-body {
  padding-top: 12px;
}

.profile-edit-screen .profile-form {
  margin-bottom: 16px;
}

.profile-edit-screen .profile-edit-panel--appearance {
  margin-top: 0;
}


/* follow-up 2026-05-01 v4: profile edit hero matches profile exactly, without extra profile blocks */
.profile-edit-screen.profile-screen .profile-hero {
  margin-bottom: calc(0px - var(--profile-header-height)) !important;
}

.profile-edit-screen.profile-screen .profile-hero__surface,
.profile-edit-screen.profile-screen .profile-hero__avatar-wrap,
.profile-edit-screen.profile-screen .profile-identity,
.profile-edit-screen.profile-screen .profile-hero__actions {
  transition: none !important;
}

.profile-edit-screen.profile-screen .profile-edit-body {
  padding-top: calc(var(--profile-header-expanded) + 18px) !important;
}

/* avatar picker + edit profile follow-up */
.profile-avatar__photo {
  position: relative;
  z-index: 1;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-avatar--interactive {
  appearance: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

.profile-edit-screen .profile-hero__avatar-wrap {
  pointer-events: auto;
  z-index: 12;
}

.profile-edit-screen.is-avatar-picker-open .profile-hero__avatar-wrap {
  z-index: 91;
}

.profile-edit-screen .profile-hero__actions {
  z-index: 92;
}

.profile-edit-screen.profile-screen .profile-edit-body {
  padding-top: calc(var(--profile-header-expanded) - 1px) !important;
}

.profile-edit-screen .profile-edit-panel--appearance {
  margin-top: 0 !important;
}

.profile-edit-screen .profile-edit-links {
  margin-top: 0 !important;
}

.profile-avatar-picker-layer {
  --profile-avatar-picker-drag-progress: 1;
  position: fixed;
  inset: 0;
  z-index: 88;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}

.profile-avatar-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.58);
  opacity: 0;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: profile-avatar-picker-backdrop-in 260ms ease forwards;
}

.profile-avatar-picker-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - env(safe-area-inset-top) - 146px);
  min-height: min(420px, 58dvh);
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
  border-radius: 30px 30px 0 0;
  background: rgba(17, 17, 17, 0.98);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden auto;
  transform: translateY(102%);
  animation: profile-avatar-picker-sheet-in 320ms cubic-bezier(0.2, 0.84, 0.2, 1) forwards;
}

.profile-avatar-picker__grabber {
  position: absolute;
  top: 0;
  left: 50%;
  width: 176px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
}

.profile-avatar-picker__grabber::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  width: 108px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
}

.profile-avatar-picker__head {
  padding: 18px 12px 0;
  text-align: center;
}

.profile-avatar-picker__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(20px, 5.5vw, 26px);
  line-height: 1.08;
  font-weight: 500;
}

.profile-avatar-picker__subtitle {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
  line-height: 1.18;
}

.profile-avatar-picker__grid {
  margin-top: 18px;
  padding: 10px 6px 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.profile-avatar-picker__item {
  appearance: none;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e7e7e7;
  text-align: left;
  cursor: pointer;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.profile-avatar-picker__item-shell {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.02);
}

.profile-avatar-picker__item-shell::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.015);
  pointer-events: none;
}

.profile-avatar-picker__item-image,
.profile-avatar-picker__item-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  opacity: 0.6;
  transition: opacity 180ms ease, transform 180ms ease;
}

.profile-avatar-picker__item-icon {
  padding: 22%;
  object-fit: contain;
}

.profile-avatar-picker__item-label {
  margin-top: 7px;
  display: block;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-image,
.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-icon {
  opacity: 1;
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-shell::before {
  inset: 0;
  border: 2px solid rgba(131, 255, 123, 0.82);
  box-shadow: 0 0 0 1px rgba(131, 255, 123, 0.22) inset, 0 0 18px rgba(131, 255, 123, 0.5);
}

.profile-avatar-picker__item--none.is-selected .profile-avatar-picker__item-shell {
  background: rgba(39, 255, 100, 0.05);
}

.profile-avatar-picker-layer.is-dragging,
.profile-avatar-picker-layer.is-settling {
  user-select: none;
}

.profile-avatar-picker-layer.is-dragging .profile-avatar-picker-sheet,
.profile-avatar-picker-layer.is-settling .profile-avatar-picker-sheet,
.profile-avatar-picker-layer.is-dragging .profile-avatar-picker-backdrop,
.profile-avatar-picker-layer.is-settling .profile-avatar-picker-backdrop {
  transition: none !important;
}

.profile-avatar-picker-layer.is-open-settled .profile-avatar-picker-sheet {
  animation: none;
  transform: translate3d(0, 0, 0);
}

.profile-avatar-picker-layer.is-open-settled .profile-avatar-picker-backdrop {
  animation: none;
  opacity: 1;
}

.profile-avatar-picker-layer.is-closing .profile-avatar-picker-sheet {
  animation: profile-avatar-picker-sheet-out 260ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.profile-avatar-picker-layer.is-closing .profile-avatar-picker-backdrop {
  animation: profile-avatar-picker-backdrop-out 220ms ease forwards;
}

@keyframes profile-avatar-picker-sheet-in {
  from {
    transform: translateY(102%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes profile-avatar-picker-sheet-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(102%);
  }
}

@keyframes profile-avatar-picker-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes profile-avatar-picker-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.profile-edit-screen .profile-hero__actions { z-index: 4; }



/* avatar picker final hotfix: mirror NFT info sheet behavior and keep avatar preview above blur */
.profile-avatar-picker-backdrop {
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.profile-avatar-picker-preview {
  position: absolute;
  z-index: 2;
  top: calc(env(safe-area-inset-top) + 28px);
  left: 50%;
  width: var(--profile-avatar-expanded-fixed, 92px);
  height: var(--profile-avatar-expanded-fixed, 92px);
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
}

.profile-avatar-picker-preview .profile-avatar {
  width: 100%;
  height: 100%;
}

.profile-avatar-picker-sheet {
  --profile-avatar-picker-sheet-radius: 34px;
  z-index: 3;
  height: clamp(430px, 56dvh, 580px);
  max-height: calc(100dvh - 34px);
  min-height: 0;
  padding: 0 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--profile-avatar-picker-sheet-radius) var(--profile-avatar-picker-sheet-radius) 0 0;
  background: #111111;
}

.profile-avatar-picker__grabber {
  z-index: 5;
  cursor: pointer;
}

.profile-avatar-picker__grabber::before {
  width: 176px;
  background: rgba(255, 255, 255, 0.86);
}

.profile-avatar-picker__head {
  padding: 34px 4px 0;
}

.profile-avatar-picker__title {
  font-size: clamp(16px, 4.15vw, 19px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.profile-avatar-picker__grid {
  padding: 10px 0 6px;
}

.profile-avatar-picker__item-shell::before {
  z-index: 2;
}

.profile-avatar-picker__item-image,
.profile-avatar-picker__item-icon {
  z-index: 1;
}

.profile-avatar-picker__item-label {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 13px;
  margin: 0;
  display: block;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.profile-avatar-picker__item--none .profile-avatar-picker__item-icon {
  inset: 18px auto auto 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  object-fit: contain;
  transform: translateX(-50%);
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-shell::before {
  border: 2px solid rgba(131, 255, 123, 0.9);
  box-shadow: 0 0 0 1px rgba(131, 255, 123, 0.24) inset, 0 0 18px rgba(131, 255, 123, 0.5);
}


/* avatar picker v2: exact NFT info-sheet mechanics adapted for avatar grid */
.profile-avatar-picker-layer {
  --profile-avatar-picker-drag-progress: 1;
  z-index: 88;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

.profile-avatar-picker-backdrop {
  z-index: 1;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: profile-avatar-picker-backdrop-in 220ms ease forwards;
  will-change: opacity, backdrop-filter;
}

.profile-avatar-picker-preview {
  position: fixed;
  z-index: 2;
  top: var(--profile-avatar-picker-preview-top, calc(env(safe-area-inset-top) + 28px));
  left: var(--profile-avatar-picker-preview-left, 50%);
  width: var(--profile-avatar-picker-preview-size, var(--profile-avatar-expanded-fixed, 92px));
  height: var(--profile-avatar-picker-preview-size, var(--profile-avatar-expanded-fixed, 92px));
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
  backface-visibility: hidden;
}

.profile-avatar-picker-preview .profile-avatar {
  width: 100%;
  height: 100%;
}

.profile-avatar-picker-sheet {
  --profile-avatar-picker-sheet-radius: 34px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  height: clamp(540px, 66dvh, 704px);
  max-height: calc(100dvh - 34px);
  min-height: 0;
  padding: 0 22px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--profile-avatar-picker-sheet-radius) var(--profile-avatar-picker-sheet-radius) 0 0;
  background: #111111;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translateY(102%);
  animation: profile-avatar-picker-sheet-in 300ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
  will-change: transform;
}

.profile-avatar-picker__grabber {
  position: absolute;
  z-index: 12;
  top: -16px;
  left: 50%;
  width: 176px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
  touch-action: none;
  pointer-events: auto;
}

.profile-avatar-picker__grabber::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 11px;
  width: 176px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
}

.profile-avatar-picker__head {
  flex: 0 0 auto;
  padding: 34px 4px 0;
  text-align: center;
}

.profile-avatar-picker__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(16px, 4.15vw, 19px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.profile-avatar-picker__body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-avatar-picker__body::-webkit-scrollbar,
.profile-avatar-picker-sheet::-webkit-scrollbar,
.profile-avatar-picker-layer::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.profile-avatar-picker__grid {
  margin-top: 0;
  padding: 10px 0 6px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
}

.profile-avatar-picker__item-shell::before {
  z-index: 2;
}

.profile-avatar-picker__item-image {
  z-index: 1;
  border-radius: inherit;
}

.profile-avatar-picker__item-icon {
  z-index: 1;
  border-radius: 0 !important;
}

.profile-avatar-picker__item-label {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 13px;
  margin: 0;
  display: block;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.profile-avatar-picker__item--none .profile-avatar-picker__item-icon {
  inset: 16px auto auto 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  object-fit: contain;
  transform: translateX(-50%);
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-shell::before {
  inset: 0;
  border: 2px solid rgba(131, 255, 123, 0.9);
  box-shadow: 0 0 0 1px rgba(131, 255, 123, 0.24) inset, 0 0 18px rgba(131, 255, 123, 0.5);
}

.profile-avatar-picker-layer.is-dragging,
.profile-avatar-picker-layer.is-settling {
  user-select: none;
}

.profile-avatar-picker-layer.is-dragging .profile-avatar-picker-sheet,
.profile-avatar-picker-layer.is-settling .profile-avatar-picker-sheet,
.profile-avatar-picker-layer.is-dragging .profile-avatar-picker-backdrop,
.profile-avatar-picker-layer.is-settling .profile-avatar-picker-backdrop {
  transition: none !important;
  animation: none !important;
}

.profile-avatar-picker-layer.is-open-settled .profile-avatar-picker-sheet {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
}

.profile-avatar-picker-layer.is-open-settled .profile-avatar-picker-backdrop {
  animation: none !important;
  opacity: 1 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.profile-avatar-picker-layer.is-closing {
  pointer-events: none;
}

.profile-avatar-picker-layer.is-closing .profile-avatar-picker-sheet {
  transform: translateY(0);
  animation: profile-avatar-picker-sheet-out 250ms cubic-bezier(0.4, 0, 0.9, 0.3) forwards !important;
}

.profile-avatar-picker-layer.is-closing .profile-avatar-picker-backdrop {
  opacity: 1;
  animation: profile-avatar-picker-backdrop-out 220ms ease forwards !important;
}

.profile-avatar-picker-layer {
  touch-action: auto;
}

.profile-avatar-picker__body {
  touch-action: pan-y;
}

/* avatar picker v2.1: copy the final visible-grabber tuning from NFT info */
.profile-avatar-picker-backdrop {
  background: rgba(0, 0, 0, 0.30) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-avatar-picker-sheet {
  overflow: visible !important;
}

.profile-avatar-picker__grabber {
  top: -8px !important;
  height: 24px !important;
  cursor: grab;
}

.profile-avatar-picker__grabber::before {
  top: 4px !important;
  width: 176px !important;
  height: 5px !important;
}

.profile-avatar-picker-layer.is-dragging,
.profile-avatar-picker-layer.is-settling {
  pointer-events: auto;
  touch-action: none;
}

.profile-avatar-picker-layer.is-open-settled .profile-avatar-picker-backdrop {
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}


/* avatar picker v3: no remount-jump, no drag-close lift, unclipped selection glow */
.profile-avatar-picker-layer.is-drag-closing .profile-avatar-picker-sheet,
.profile-avatar-picker-layer.is-drag-closing .profile-avatar-picker-backdrop {
  animation: none !important;
  transition: none !important;
}

.profile-edit-screen.is-avatar-picker-open .profile-hero__avatar-wrap {
  visibility: hidden;
}

.profile-avatar-picker-preview {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.profile-avatar-picker-preview .profile-avatar {
  visibility: visible;
}

.profile-avatar-picker__body {
  padding-inline: 12px;
  margin-inline: -12px;
  overflow-x: hidden;
}

.profile-avatar-picker__grid {
  padding: 12px 12px 20px !important;
}

.profile-avatar-picker__item {
  overflow: visible !important;
}

.profile-avatar-picker__item-shell {
  overflow: visible !important;
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-shell::before {
  inset: -2px !important;
}

.app-main:has(.profile-avatar-picker-layer) {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}


/* hotfix 2026-05-02: avatar picker vertical clipping + inert NFT menu taps */
.profile-avatar-picker-sheet {
  height: clamp(560px, 68dvh, 736px) !important;
  max-height: calc(100dvh - 18px) !important;
  padding: 0 22px max(10px, env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

.profile-avatar-picker__head {
  padding-top: 24px !important;
}

.profile-avatar-picker__body {
  margin-top: 12px !important;
  padding-inline: 16px !important;
  margin-inline: -16px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-padding-block: 18px 46px;
  overscroll-behavior: contain;
}

.profile-avatar-picker__grid {
  padding: 18px 16px calc(46px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
}

.profile-avatar-picker__item,
.profile-avatar-picker__item-shell {
  overflow: visible !important;
}

.profile-avatar-picker__item.is-selected .profile-avatar-picker__item-shell::before {
  inset: -4px !important;
  box-shadow:
    0 0 0 1px rgba(131, 255, 123, 0.26) inset,
    0 0 20px rgba(131, 255, 123, 0.56) !important;
}


.profile-nft-menu__item {
  touch-action: manipulation;
}

/* hotfix 2026-05-02 v2: profile edit NFT decoration list + local-only NFT menu states */
.profile-edit-body {
  position: relative;
  isolation: isolate;
  padding-bottom: calc(34px + env(safe-area-inset-bottom)) !important;
}

.profile-edit-customization-sticky {
  position: sticky;
  top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 68px) - 96px);
  z-index: 6;
  background: var(--app-bg);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.16);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.profile-edit-links {
  padding: 10px 16px 12px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  background: var(--app-bg) !important;
}

.profile-edit-link {
  flex: 0 1 auto;
  max-width: calc(50% - 4px);
  color: #7e7e7e;
  font-size: clamp(10px, 2.95vw, 11.5px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em;
  text-align: left;
  white-space: nowrap;
}

.profile-edit-link + .profile-edit-link {
  text-align: right;
}

.profile-edit-panel--nft {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  padding: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
}

.profile-edit-nft__sticky-head {
  position: sticky;
  top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 68px) + 42px);
  z-index: 5;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg, rgba(23, 23, 27, 0.98), rgba(13, 13, 16, 0.98));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.22);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.profile-edit-nft-list {
  position: relative;
  z-index: 1;
  padding: 14px 16px calc(32px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--app-bg);
}

.profile-edit-nft-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  text-align: left;
  border-radius: 18px;
  color: #ffffff;
  touch-action: manipulation;
}

.profile-edit-nft-card__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.profile-edit-nft-card__art .case-nft-art,
.profile-edit-nft-card__art .case-currency-art,
.profile-edit-nft-card__art .case-bonus-art {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.profile-edit-nft-card__art .case-nft-art--profile-edit-decoration {
  --case-nft-pattern-opacity: 0.28;
  --case-nft-pattern-scale: 0.92;
}

.profile-edit-nft-card__art .case-nft-art__layer--item {
  padding: 16%;
}

.profile-edit-nft-card__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-edit-nft-card__title,
.profile-edit-nft-card__subtitle {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-edit-nft-card__title {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.profile-edit-nft-card__subtitle {
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  line-height: 1.05;
  font-weight: 400;
}

.profile-edit-nft-empty {
  margin: 14px 16px calc(32px + env(safe-area-inset-bottom));
  min-height: 96px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.48);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
}

.profile-nft-menu__item.is-status-changing .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-status-changing .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing .profile-nft-menu__text {
  animation: profile-nft-menu-local-toggle 190ms ease both;
}

@keyframes profile-nft-menu-local-toggle {
  0% { transform: scale(0.98); opacity: 0.72; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 389px) {
  .profile-edit-customization-sticky {
    top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 66px) - 90px);
  }

  .profile-edit-nft__sticky-head {
    top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 66px) + 40px);
  }

  .profile-edit-nft-list {
    gap: 10px;
  }

  .profile-edit-nft-card__art {
    border-radius: 16px;
  }
}


/* hotfix 2026-05-02 v3: avatar picker spacing + NFT edit stop point + richer menu toggle animation */
.profile-avatar-picker__head {
  padding-top: 22px !important;
}

.profile-avatar-picker__body {
  margin-top: 10px !important;
}

.profile-avatar-picker__grid {
  padding-top: 22px !important;
}

.profile-avatar-picker__item-image {
  border-radius: 0 !important;
  clip-path: inset(0 round 18px);
  -webkit-clip-path: inset(0 round 18px);
}

.profile-edit-nft__sticky-head {
  padding-bottom: 14px !important;
}

.profile-edit-nft__content {
  position: relative;
  z-index: 1;
  background: var(--app-bg);
}

.profile-edit-chips--nft {
  margin: 0 !important;
  padding: 10px 16px 12px;
  background: var(--app-bg);
  position: relative;
  z-index: 1;
}

.profile-edit-nft-list {
  padding-top: 0 !important;
}

.profile-edit-nft-empty {
  margin-top: 0 !important;
}

.profile-nft-menu__item {
  position: relative;
  overflow: hidden;
}

.profile-nft-menu__icon,
.profile-nft-menu__text,
.profile-nft-menu__active-bg {
  will-change: transform, opacity;
}

.profile-nft-menu__icon {
  transition: transform 220ms cubic-bezier(0.22, 0.84, 0.22, 1), opacity 180ms ease;
  transform-origin: 50% 50%;
}

.profile-nft-menu__text {
  transition: transform 220ms cubic-bezier(0.22, 0.84, 0.22, 1), opacity 180ms ease;
  transform-origin: 0 50%;
}

.profile-nft-menu__active-bg {
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.22, 0.84, 0.22, 1);
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__icon {
  opacity: 0;
  transform: translateY(-7px) scale(0.88) rotate(-8deg);
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__icon {
  animation: profile-nft-menu-icon-swap-in 170ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__text {
  opacity: 0;
  transform: translateY(6px) scale(0.96);
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__text {
  animation: profile-nft-menu-text-swap-in 180ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 0.45;
  transform: scaleX(0.96);
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__active-bg {
  animation: profile-nft-menu-bg-swap-in 190ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

@keyframes profile-nft-menu-icon-swap-in {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.88) rotate(8deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes profile-nft-menu-text-swap-in {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes profile-nft-menu-bg-swap-in {
  0% {
    opacity: 0.45;
    transform: scaleX(0.96);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 389px) {
  .profile-avatar-picker__grid {
    padding-top: 20px !important;
  }

  .profile-edit-chips--nft {
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* hotfix 2026-05-02 v4: sticky NFT selector, profile scroll room, profile-edit NFT art parity */
.profile-edit-nft__sticky-head {
  top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 68px)) !important;
  padding: 14px 16px 12px !important;
  background: linear-gradient(180deg, rgba(23, 23, 27, 0.99), rgba(13, 13, 16, 0.99)) !important;
  z-index: 7 !important;
}

.profile-edit-chips:not(.profile-edit-chips--nft) {
  margin-top: 12px !important;
}

.profile-edit-chips--nft {
  display: none !important;
}

.profile-edit-nft__content {
  display: contents !important;
}

.profile-edit-nft-list {
  padding-top: 14px !important;
  gap: 12px !important;
}

.profile-edit-nft-card {
  gap: 0 !important;
}

.profile-edit-nft-card__copy {
  display: none !important;
}

.profile-edit-nft-card__art {
  border-radius: 22px !important;
  aspect-ratio: 1 / 1 !important;
}

.profile-edit-nft-card__art .case-nft-art,
.profile-edit-nft-card__art .case-currency-art,
.profile-edit-nft-card__art .case-bonus-art {
  border-radius: inherit !important;
}

.profile-edit-nft-card__art .case-nft-art--profile-edit-decoration {
  --case-nft-pattern-scale: 1 !important;
}

.profile-edit-nft-card__art .case-nft-art__layer--item {
  padding: 13.5% !important;
}

.profile-edit-nft-card__art .case-nft-art--transparent .case-nft-art__layer--item {
  padding: 6% !important;
}

.profile-edit-nft-card__art .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity)) !important;
}

.profile-edit-links {
  justify-content: flex-start !important;
  gap: clamp(18px, 7vw, 28px) !important;
}

.profile-edit-link {
  flex: 0 0 auto !important;
  max-width: none !important;
}

.profile-edit-link + .profile-edit-link {
  text-align: left !important;
}

.profile-screen:not(.profile-edit-screen) .profile-body {
  min-height: calc(100dvh - var(--profile-header-expanded-fixed, 204px) + 176px) !important;
}

@media (max-width: 389px) {
  .profile-edit-nft__sticky-head {
    top: calc(env(safe-area-inset-top) + var(--profile-header-collapsed-fixed, 66px)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .profile-edit-nft-card__art {
    border-radius: 18px !important;
  }

  .profile-screen:not(.profile-edit-screen) .profile-body {
    min-height: calc(100dvh - var(--profile-header-expanded-fixed, 198px) + 172px) !important;
  }
}


/* hotfix 2026-05-02 v4.1: keep NFT selector below the expanded edit-profile hero */
.profile-edit-screen .profile-edit-nft__sticky-head {
  top: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed, 204px)) !important;
}

@media (max-width: 389px) {
  .profile-edit-screen .profile-edit-nft__sticky-head {
    top: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed, 198px)) !important;
  }
}


/* hotfix 2026-05-02 v5: empty NFT state + menu pressed-swap animation + edge-to-edge active rows */
.profile-edit-nft-empty {
  margin: 8px 16px calc(28px + env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  padding: 8px 0 !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-nft-menu {
  overflow: hidden !important;
}

.profile-nft-menu__item {
  overflow: visible !important;
}

.profile-nft-menu__active-bg {
  inset: 0 !important;
  transform: none !important;
  transform-origin: center !important;
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  top: -7px !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 0 !important;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  bottom: -7px !important;
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg {
  opacity: 1 !important;
  transform: none !important;
}

.profile-nft-menu__item.is-status-changing .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-status-changing .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing .profile-nft-menu__text {
  animation: none !important;
}

.profile-nft-menu__icon,
.profile-nft-menu__text {
  transition:
    transform 120ms cubic-bezier(0.34, 0, 0.2, 1),
    opacity 120ms ease,
    filter 120ms ease !important;
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__text {
  opacity: 0.74 !important;
  transform: scale(0.84) !important;
  filter: brightness(0.9) !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__text {
  animation: profile-nft-menu-press-swap-in 175ms cubic-bezier(0.18, 0.84, 0.22, 1) both !important;
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 0.84 !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__active-bg {
  animation: profile-nft-menu-bg-press-swap-in 175ms ease both !important;
}

@keyframes profile-nft-menu-press-swap-in {
  0% {
    opacity: 0.74;
    transform: scale(0.84);
    filter: brightness(0.9);
  }
  72% {
    opacity: 1;
    transform: scale(1.035);
    filter: brightness(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes profile-nft-menu-bg-press-swap-in {
  0% {
    opacity: 0.84;
  }
  100% {
    opacity: 1;
  }
}

/* feature 2026-05-02: case sorting, daily wheel case, YAN case pricing, final NFT-menu toggle polish */
.cases-filter-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.cases-filter-button {
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 13px;
  border: 1px solid rgba(166, 186, 214, 0.46);
  background: rgba(4, 5, 8, 0.62);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.20);
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  transition: transform 150ms ease, border-color 180ms ease, background 180ms ease, filter 180ms ease;
  touch-action: manipulation;
}

.cases-filter-button:active {
  transform: scale(0.985);
  filter: brightness(1.08);
}

.cases-filter-button__text {
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.035em;
  transition: transform 160ms cubic-bezier(0.18, 0.84, 0.22, 1), opacity 160ms ease;
}

.cases-filter-button--sort .cases-filter-button__text {
  font-size: clamp(14px, 4.1vw, 19px);
}

.cases-filter-button--affordable {
  justify-content: space-between;
}

.cases-filter-button__check {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid rgba(166, 186, 214, 0.44);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.cases-filter-button__check img {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.cases-filter-button--affordable.is-active .cases-filter-button__check {
  border-color: rgba(112, 255, 120, 0.64);
  background: rgba(112, 255, 120, 0.08);
}

.cases-filter-button--affordable.is-active .cases-filter-button__check img {
  opacity: 1;
  transform: scale(1);
}

.case-card--available {
  --case-card-outline: rgba(112, 255, 120, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(112, 255, 120, 0.22),
    0 0 28px rgba(112, 255, 120, 0.28),
    inset 0 0 0 1px rgba(112, 255, 120, 0.12) !important;
}

.case-card__price--timer,
.case-card__price--yan {
  padding: 0 10px;
  min-width: 0;
  justify-content: center;
  color: rgba(255, 255, 255, 0.86);
}

.case-card__price--timer.is-available {
  color: rgba(135, 255, 128, 0.96);
  text-shadow: 0 0 14px rgba(112, 255, 120, 0.34);
}

.case-card__price--yan {
  color: rgba(255, 255, 255, 0.92);
}

.case-opening__price-pill--yan,
.case-opening__price-pill--daily {
  min-width: 116px;
  justify-content: center;
}

.case-opening__price-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(18px, 5.2vw, 24px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.035em;
}

.case-opening__price-text--timer {
  color: rgba(135, 255, 128, 0.96);
}

.case-opening__price-text--available {
  color: rgba(135, 255, 128, 0.96);
  text-shadow: 0 0 14px rgba(112, 255, 120, 0.32);
}

.case-detail-screen--daily-wheel .case-detail-screen__content {
  padding-top: 14px;
}

.daily-case-wheel {
  min-height: calc(100dvh - 212px);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 44px;
  padding: 8px 12px calc(38px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.72);
}

.daily-case-wheel__hint {
  margin: 0;
  max-width: 330px;
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(16px, 5vw, 20px);
  line-height: 1.28;
  font-weight: 650;
  text-align: center;
  letter-spacing: -0.025em;
}

.daily-case-wheel__stage {
  position: relative;
  width: min(78vw, 356px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.daily-case-wheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(120, 137, 160, 0.38);
  background:
    radial-gradient(circle at center, transparent 0 27%, rgba(120, 137, 160, 0.42) 27.2% 27.7%, transparent 28%),
    #08090c;
  overflow: hidden;
}

.daily-case-wheel__disc::before {
  content: '';
  position: absolute;
  inset: 27.2%;
  border-radius: 50%;
  border: 1px solid rgba(120, 137, 160, 0.46);
  background: #171a20;
  z-index: 1;
}

.daily-case-wheel__divider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.4px;
  height: 50%;
  background: rgba(120, 137, 160, 0.38);
  transform-origin: 50% 0;
}

.daily-case-wheel__divider--0 { transform: rotate(0deg); }
.daily-case-wheel__divider--1 { transform: rotate(72deg); }
.daily-case-wheel__divider--2 { transform: rotate(144deg); }
.daily-case-wheel__divider--3 { transform: rotate(216deg); }
.daily-case-wheel__divider--4 { transform: rotate(288deg); }

.daily-case-wheel__number {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  color: rgba(255, 255, 255, 0.56);
  font-size: clamp(42px, 13vw, 60px);
  line-height: 1;
  font-weight: 650;
  transform: rotate(var(--daily-wheel-number-angle)) translateY(-33vw) rotate(calc(var(--daily-wheel-number-angle) * -1));
  transform-origin: center;
}

@supports (width: min(78vw, 356px)) {
  .daily-case-wheel__number {
    transform: rotate(var(--daily-wheel-number-angle)) translateY(calc(min(78vw, 356px) * -0.34)) rotate(calc(var(--daily-wheel-number-angle) * -1));
  }
}

.daily-case-wheel__pointer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  display: block;
  pointer-events: none;
}

.daily-case-wheel__pointer img {
  position: absolute;
  left: 50%;
  top: calc(-1 * min(34vw, 124px));
  width: 54px;
  height: 54px;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.26));
}

.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  animation: daily-wheel-pointer-spin 2850ms cubic-bezier(0.16, 0.82, 0.18, 1) forwards;
}

.daily-case-wheel__button {
  position: relative;
  z-index: 5;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #232832, #161a21 72%);
  border: 1px solid rgba(120, 137, 160, 0.54);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(18px, 5.2vw, 23px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
  transition: transform 150ms ease, filter 150ms ease;
}

.daily-case-wheel__button:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(1.08);
}

.daily-case-wheel__button:disabled {
  opacity: 0.78;
}

.daily-case-wheel__lock {
  position: fixed;
  inset: 0;
  z-index: 16;
  pointer-events: auto;
  background: transparent;
}

@keyframes daily-wheel-pointer-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--daily-wheel-target-angle));
  }
}

.profile-nft-menu__item:active {
  transform: none !important;
  filter: none !important;
}

.profile-nft-menu__item:active .profile-nft-menu__icon,
.profile-nft-menu__item:active .profile-nft-menu__text {
  transform: scale(0.94);
  filter: brightness(0.92);
}

.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing-out .profile-nft-menu__text {
  opacity: 0.78 !important;
  transform: scale(0.84) !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__text {
  animation: profile-nft-menu-soft-resize-in 180ms cubic-bezier(0.18, 0.84, 0.22, 1) both !important;
}

.profile-nft-menu__item.is-next-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-inactive .profile-nft-menu__active-bg {
  transition: opacity 220ms ease !important;
}

.profile-nft-menu__item.is-next-active.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 1 !important;
}

.profile-nft-menu__item.is-next-inactive.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 0 !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__active-bg {
  animation: none !important;
}

@keyframes profile-nft-menu-soft-resize-in {
  0% {
    opacity: 0.78;
    transform: scale(0.84);
  }
  70% {
    opacity: 1;
    transform: scale(1.025);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 389px) {
  .cases-filter-row {
    gap: 8px;
  }

  .cases-filter-button {
    min-height: 42px;
    padding-inline: 10px;
  }

  .cases-filter-button__text {
    font-size: clamp(13px, 4vw, 16px);
  }

  .cases-filter-button__check {
    width: 25px;
    height: 25px;
    border-radius: 7px;
  }

  .daily-case-wheel {
    gap: 34px;
  }

  .daily-case-wheel__stage {
    width: min(80vw, 326px);
  }

  .daily-case-wheel__button {
    width: 94px;
    height: 94px;
  }
}

/* hotfix 2026-05-02 round 2: daily wheel polish, cases filter animation, stable case scroll, compact prizes */
.cases-screen,
.case-detail-screen,
.cases-screen__content,
.case-detail-screen__content {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.cases-filter-button {
  transform-origin: center center;
}

.cases-filter-button.is-state-changing {
  animation: cases-filter-button-pulse 280ms cubic-bezier(0.2, 0.84, 0.22, 1) both;
}

.cases-filter-button__text,
.cases-filter-button__text-line {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
}

.cases-filter-button--sort .cases-filter-button__text,
.cases-filter-button--sort .cases-filter-button__text-line {
  font-size: clamp(12px, 3.55vw, 17px);
  letter-spacing: -0.04em;
}

.cases-filter-button--affordable .cases-filter-button__text,
.cases-filter-button--affordable .cases-filter-button__text-line {
  font-size: clamp(13px, 3.9vw, 18px);
}

.cases-filter-button__text-line.is-entering,
.cases-filter-button__text-line.is-leaving,
.cases-filter-button__text-line.is-current {
  transition:
    opacity var(--ui-text-swap-duration, 220ms) ease,
    transform var(--ui-text-swap-duration, 220ms) cubic-bezier(0.18, 0.84, 0.22, 1),
    filter var(--ui-text-swap-duration, 220ms) ease;
}

.cases-filter-button__text-line.is-entering {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 6px, 0) scale(0.98);
}

.cases-filter-button__text-line.is-current {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

.cases-filter-button__text-line.is-leaving {
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, -6px, 0) scale(0.98);
}

.cases-filter-button__check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.cases-filter-button__check img {
  width: 14px;
  height: 14px;
}

.cases-filter-button--affordable.is-state-changing .cases-filter-button__check {
  animation: cases-filter-check-bounce 280ms cubic-bezier(0.2, 0.84, 0.22, 1) both;
}

.case-card__price--yan span,
.case-opening__price-text--yan,
.case-opening__price-text--yan-code {
  color: rgba(255, 255, 255, 0.92);
}

.case-opening__price-text--yan-code {
  margin-left: 8px;
  font-size: clamp(16px, 4.2vw, 20px);
  line-height: 1;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.case-prizes-grid {
  gap: 10px !important;
}

.case-prize-card {
  padding: 7px 7px 8px !important;
  gap: 4px !important;
}

.case-prize-card__preview {
  aspect-ratio: 1 / 1 !important;
  transform: none !important;
}

.case-prize-card__meta {
  min-height: 26px !important;
  gap: 1px !important;
}

.case-prize-card__name {
  min-height: 0 !important;
  font-size: clamp(10px, 3.1vw, 13px) !important;
  line-height: 1.06 !important;
}

.case-prize-card__price {
  font-size: clamp(10px, 3vw, 12px) !important;
  line-height: 1 !important;
}

.daily-case-wheel {
  min-height: calc(100dvh - 208px);
  gap: 36px;
  padding-top: 6px;
}

.daily-case-wheel__hint {
  max-width: 320px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(14px, 4.4vw, 18px);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.022em;
}

.daily-case-wheel__stage {
  width: min(79vw, 356px);
}

.daily-case-wheel__disc {
  will-change: transform;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.daily-case-wheel__disc::before {
  inset: 29%;
}

.daily-case-wheel__divider {
  height: 50%;
  width: 1.6px;
}

.daily-case-wheel__number {
  z-index: 2;
  color: rgba(255, 255, 255, 0.64);
  font-size: clamp(34px, 10.4vw, 54px);
  font-weight: 720;
  letter-spacing: -0.03em;
  transform-origin: center center;
  transform: rotate(var(--daily-wheel-number-angle)) translateY(calc(min(79vw, 356px) * -0.322)) rotate(var(--daily-wheel-number-rotate));
}

.daily-case-wheel__pointer {
  width: 56px;
  height: 56px;
  will-change: transform;
}

.daily-case-wheel__pointer img {
  top: calc(-1 * min(39vw, 140px));
  width: 60px;
  height: 52px;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24));
}

.daily-case-wheel__button {
  width: 108px;
  height: 108px;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.daily-case-wheel__button:not(:disabled):hover {
  filter: brightness(1.04);
}

.daily-case-wheel__button:active:not(:disabled) {
  transform: scale(0.965);
  filter: brightness(1.09);
}

.daily-case-wheel__button.is-pending {
  filter: brightness(0.98);
}

.daily-case-wheel__button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.daily-case-wheel__button-label--pending {
  font-size: clamp(14px, 4.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.daily-case-wheel__button-text {
  display: inline-block;
}

.daily-case-wheel__dots {
  display: inline-flex;
  align-items: flex-end;
  min-width: 0.95em;
}

.daily-case-wheel__dots span {
  opacity: 0.18;
  animation: daily-wheel-dots 1.15s steps(1, end) infinite;
}

.daily-case-wheel__dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.daily-case-wheel__dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  animation: daily-wheel-pointer-orbit 4200ms cubic-bezier(0.13, 0.76, 0.18, 1) forwards;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-disc-spin 4200ms cubic-bezier(0.13, 0.76, 0.18, 1) forwards;
}

.profile-nft-menu__item {
  overflow: hidden;
}

.profile-nft-menu__item .profile-nft-menu__active-bg {
  transition: opacity 160ms ease, transform 160ms ease;
}

.profile-nft-menu__item.is-next-active.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.profile-nft-menu__item.is-next-inactive.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 0 !important;
  transform: scale(1) !important;
}

@keyframes cases-filter-button-pulse {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  45% {
    transform: scale(1.018);
    filter: brightness(1.08);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes cases-filter-check-bounce {
  0% { transform: scale(1); }
  48% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes daily-wheel-pointer-orbit {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  12% {
    transform: translate(-50%, -50%) rotate(calc(var(--daily-wheel-pointer-target) * 0.08));
  }
  62% {
    transform: translate(-50%, -50%) rotate(calc(var(--daily-wheel-pointer-target) * 0.82));
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--daily-wheel-pointer-target));
  }
}

@keyframes daily-wheel-disc-spin {
  0% {
    transform: rotate(0deg);
  }
  12% {
    transform: rotate(calc(var(--daily-wheel-disc-target) * 0.08));
  }
  62% {
    transform: rotate(calc(var(--daily-wheel-disc-target) * 0.82));
  }
  100% {
    transform: rotate(var(--daily-wheel-disc-target));
  }
}

@keyframes daily-wheel-dots {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.92; }
}

@media (max-width: 389px) {
  .cases-filter-button--sort .cases-filter-button__text,
  .cases-filter-button--sort .cases-filter-button__text-line {
    font-size: clamp(11px, 3.45vw, 15px);
  }

  .cases-filter-button__check {
    width: 22px;
    height: 22px;
  }

  .cases-filter-button__check img {
    width: 13px;
    height: 13px;
  }

  .daily-case-wheel {
    gap: 30px;
  }

  .daily-case-wheel__button {
    width: 100px;
    height: 100px;
  }
}

/* hotfix 2026-05-02 round 3: affordable button simplification, Bob prizes parity, redesigned daily wheel */
.cases-filter-button--affordable {
  justify-content: center;
  gap: 0;
}

.cases-filter-button--affordable.is-active {
  border-color: rgba(112, 255, 120, 0.62);
  background: rgba(112, 255, 120, 0.08);
}

.cases-filter-button--affordable .cases-filter-button__text,
.cases-filter-button--affordable .cases-filter-button__text-line {
  font-size: clamp(13px, 3.9vw, 18px);
  letter-spacing: -0.032em;
}

.case-nft-art--preview {
  --case-nft-pattern-opacity: 0.26;
}

.case-nft-art--preview .case-nft-art__layer--item {
  padding: 14% !important;
}

.case-prizes-grid {
  gap: 12px !important;
}

.case-prize-card {
  position: relative;
  min-height: 0 !important;
  padding: 7px 8px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.case-prize-card__preview {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.case-prize-card__preview .case-nft-art {
  border-radius: 12px !important;
}

.case-prize-card__meta {
  position: relative;
  z-index: 2;
  margin-top: 0;
  min-height: 32px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px !important;
}

.case-prize-card__name {
  margin: 0;
  min-height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: none;
}

.case-prize-card__price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 14px;
  color: rgba(207, 214, 226, 0.78);
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600;
}

.case-detail-screen--daily-wheel .case-detail-screen__content {
  padding-top: 12px;
}

.daily-case-wheel {
  min-height: calc(100dvh - 212px);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 34px;
  padding: 8px 12px calc(38px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.72);
}

.daily-case-wheel__hint {
  margin: 0;
  max-width: 330px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(16px, 4.9vw, 20px);
  line-height: 1.24;
  font-weight: 650;
  text-align: center;
  letter-spacing: -0.025em;
}

.daily-case-wheel__stage {
  position: relative;
  width: min(82vw, 364px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.daily-case-wheel__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  border: 2px solid rgba(91, 103, 128, 0.42);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 28.6%, rgba(87, 102, 128, 0.38) 28.8% 29.3%, transparent 29.5%),
    radial-gradient(circle at 50% 50%, rgba(17, 20, 28, 0.76) 0 27%, transparent 27.3%),
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.06), transparent 42%),
    #05070b;
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  will-change: transform;
}

.daily-case-wheel__disc::before {
  content: '';
  position: absolute;
  inset: 29.3%;
  border-radius: 50%;
  border: 1px solid rgba(120, 137, 160, 0.46);
  background: radial-gradient(circle at 50% 35%, rgba(30, 37, 49, 0.96), rgba(13, 16, 23, 0.98) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.daily-case-wheel__divider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(91, 103, 128, 0.18), rgba(91, 103, 128, 0.72));
  transform: translate(-50%, -100%) rotate(var(--daily-wheel-divider-angle));
  transform-origin: 50% 100%;
  z-index: 0;
}

.daily-case-wheel__number {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.9em;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(42px, 12vw, 60px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  transform: translate(-50%, -50%) rotate(var(--daily-wheel-number-rotation));
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.daily-case-wheel__pointer {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 4;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -22%);
  display: block;
  pointer-events: none;
}

.daily-case-wheel__pointer img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.26));
}

.daily-case-wheel__button {
  position: relative;
  z-index: 5;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #232a36, #151920 72%);
  border: 1px solid rgba(120, 137, 160, 0.54);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(18px, 5.2vw, 23px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
  transition: transform 150ms ease, filter 150ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.daily-case-wheel__button:active:not(:disabled) {
  transform: scale(0.965);
  filter: brightness(1.08);
}

.daily-case-wheel__button:disabled {
  opacity: 0.88;
}

.daily-case-wheel__button.is-pending {
  filter: brightness(0.98);
}

.daily-case-wheel__button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.daily-case-wheel__button-label--pending {
  font-size: clamp(14px, 4.2vw, 17px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.daily-case-wheel__button-text {
  display: inline-block;
}

.daily-case-wheel__dots {
  display: inline-flex;
  align-items: flex-end;
  min-width: 0.95em;
}

.daily-case-wheel__dots span {
  opacity: 0.18;
  animation: daily-wheel-dots 1.15s steps(1, end) infinite;
}

.daily-case-wheel__dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.daily-case-wheel__dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-spin-5s 5000ms both;
}

.case-detail-screen--from-daily-wheel .case-opening,
.case-detail-screen--from-daily-wheel .case-open-count,
.case-detail-screen--from-daily-wheel .case-spin-button,
.case-detail-screen--from-daily-wheel .case-prizes-accordion {
  animation: daily-wheel-case-reveal 360ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.case-detail-screen--from-daily-wheel .case-open-count {
  animation-delay: 60ms;
}

.case-detail-screen--from-daily-wheel .case-spin-button {
  animation-delay: 110ms;
}

.case-detail-screen--from-daily-wheel .case-prizes-accordion {
  animation-delay: 150ms;
}

@keyframes daily-wheel-spin-5s {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.32, 0.88, 0.52, 1);
  }
  14% {
    transform: rotate(calc(var(--daily-wheel-spin-target) * 0.12));
    animation-timing-function: linear;
  }
  72% {
    transform: rotate(calc(var(--daily-wheel-spin-target) * 0.86));
    animation-timing-function: cubic-bezier(0.12, 0.2, 0.18, 1);
  }
  100% {
    transform: rotate(var(--daily-wheel-spin-target));
  }
}

@keyframes daily-wheel-case-reveal {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 389px) {
  .daily-case-wheel {
    gap: 28px;
  }

  .daily-case-wheel__stage {
    width: min(84vw, 332px);
  }

  .daily-case-wheel__button {
    width: 100px;
    height: 100px;
  }

  .daily-case-wheel__pointer {
    width: 56px;
    height: 56px;
  }
}

/* fix 2026-05-04: lightweight case filters, Figma daily wheel, Bob possible rewards restore */
.cases-filter-button {
  min-height: 46px !important;
  padding: 0 12px 0 14px !important;
  justify-content: space-between !important;
  gap: 8px !important;
  animation: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, filter 120ms ease !important;
}

.cases-filter-button:active {
  transform: none !important;
  filter: none !important;
}

.cases-filter-button:active .cases-filter-button__text,
.cases-filter-button:active .cases-filter-button__check {
  transform: scale(0.94) !important;
  filter: brightness(0.92) !important;
}

.cases-filter-button.is-state-changing,
.cases-filter-button--affordable.is-state-changing .cases-filter-button__check {
  animation: none !important;
}

.cases-filter-button__text,
.cases-filter-button__text-line {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: left !important;
  transition: transform 120ms ease, filter 120ms ease !important;
}

.cases-filter-button--sort .cases-filter-button__text,
.cases-filter-button--sort .cases-filter-button__text-line,
.cases-filter-button--affordable .cases-filter-button__text,
.cases-filter-button--affordable .cases-filter-button__text-line {
  font-size: clamp(12px, 3.55vw, 17px) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

.cases-filter-button__text-line.is-entering,
.cases-filter-button__text-line.is-current,
.cases-filter-button__text-line.is-leaving {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.cases-filter-button__check {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  border-radius: 7px !important;
  display: grid !important;
  place-items: center !important;
  opacity: 0.42 !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(166, 186, 214, 0.32) !important;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease, transform 120ms ease, filter 120ms ease !important;
}

.cases-filter-button__check img {
  width: 14px !important;
  height: 14px !important;
  opacity: 0 !important;
  transform: none !important;
  transition: opacity 100ms ease !important;
}

.cases-filter-button.is-active {
  border-color: rgba(166, 186, 214, 0.46) !important;
  background: rgba(4, 5, 8, 0.62) !important;
}

.cases-filter-button.is-active .cases-filter-button__check {
  opacity: 1 !important;
  border-color: rgba(112, 255, 120, 0.64) !important;
  background: rgba(112, 255, 120, 0.08) !important;
}

.cases-filter-button.is-active .cases-filter-button__check img {
  opacity: 1 !important;
}

.case-detail-screen--daily-wheel .case-detail-screen__content {
  padding-top: 12px !important;
}

.daily-case-wheel {
  min-height: calc(100dvh - 212px) !important;
  display: grid !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 34px !important;
  padding: 8px 12px calc(38px + env(safe-area-inset-bottom)) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

.daily-case-wheel__hint {
  margin: 0 !important;
  max-width: 330px !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(16px, 4.9vw, 20px) !important;
  line-height: 1.24 !important;
  font-weight: 650 !important;
  text-align: center !important;
  letter-spacing: -0.025em !important;
}

.daily-case-wheel__stage {
  position: relative !important;
  width: min(82vw, 364px) !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  isolation: isolate !important;
}

.daily-case-wheel__disc {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  transform: none;
  transform-origin: 50% 50% !important;
  border: 0 !important;
  background: #05070b !important;
  box-shadow: 0 24px 44px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  will-change: auto !important;
}

.daily-case-wheel__disc::before {
  content: '' !important;
  position: absolute !important;
  inset: 29.2% !important;
  z-index: 2 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(120, 137, 160, 0.46) !important;
  background: radial-gradient(circle at 50% 35%, rgba(30, 37, 49, 0.96), rgba(13, 16, 23, 0.98) 72%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.daily-case-wheel__geometry {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.daily-case-wheel__outer-ring,
.daily-case-wheel__hub-ring {
  fill: none !important;
  stroke: rgba(91, 103, 128, 0.52) !important;
  stroke-width: 0.58 !important;
  vector-effect: non-scaling-stroke;
}

.daily-case-wheel__hub-ring {
  stroke: rgba(120, 137, 160, 0.46) !important;
}

.daily-case-wheel__divider-line {
  stroke: rgba(91, 103, 128, 0.58) !important;
  stroke-width: 0.56 !important;
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke;
}

.daily-case-wheel__divider {
  display: none !important;
}

.daily-case-wheel__number {
  position: absolute !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0.9em !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: clamp(42px, 12vw, 60px) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  transform: translate(-50%, -50%) rotate(var(--daily-wheel-number-rotation)) !important;
  transform-origin: center center !important;
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.28) !important;
  pointer-events: none !important;
}

.daily-case-wheel__pointer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  pointer-events: none !important;
  transform: rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

.daily-case-wheel__pointer img {
  position: absolute !important;
  left: 50% !important;
  top: -4.5% !important;
  width: clamp(50px, 14vw, 62px) !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.26)) !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: none !important;
  transform: none;
}

.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  animation: daily-wheel-pointer-spin-stable 8000ms cubic-bezier(0.13, 0.76, 0.18, 1) both !important;
}

.daily-case-wheel__button {
  position: relative !important;
  z-index: 5 !important;
  width: 108px !important;
  height: 108px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle at 50% 35%, #232a36, #151920 72%) !important;
  border: 1px solid rgba(120, 137, 160, 0.54) !important;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: clamp(18px, 5.2vw, 23px) !important;
  line-height: 1 !important;
  font-weight: 750 !important;
  letter-spacing: -0.04em !important;
  transition: transform 150ms ease, filter 150ms ease !important;
  will-change: transform !important;
}

.daily-case-wheel__button:active:not(:disabled) {
  transform: scale(0.965) !important;
  filter: brightness(1.08) !important;
}

@keyframes daily-wheel-pointer-spin-stable {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.28, 0.82, 0.48, 1);
  }
  14% {
    transform: rotate(calc(var(--daily-wheel-pointer-target) * 0.12));
    animation-timing-function: linear;
  }
  72% {
    transform: rotate(calc(var(--daily-wheel-pointer-target) * 0.86));
    animation-timing-function: cubic-bezier(0.12, 0.2, 0.18, 1);
  }
  100% {
    transform: rotate(var(--daily-wheel-pointer-target));
  }
}

.case-prizes-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.case-prize-card {
  position: relative !important;
  min-height: 0 !important;
  padding: 7px 8px 9px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  isolation: auto !important;
  border-radius: 16px !important;
  border: 1px solid rgba(148, 163, 184, 0.26) !important;
  background: rgba(10, 11, 14, 0.48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.case-prize-card::before {
  content: none !important;
  display: none !important;
}

.case-prize-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.case-prize-card__preview {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.case-prize-card__preview .case-nft-art {
  border-radius: 12px !important;
}

.case-nft-art--preview {
  --case-nft-pattern-opacity: 0.26 !important;
}

.case-nft-art--preview .case-nft-art__layer--item {
  padding: 14% !important;
}

.case-prize-card__meta {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  min-height: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
}

.case-prize-card__name {
  margin: 0 !important;
  min-height: 16px !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
  overflow: hidden !important;
  transform: none !important;
}

.case-prize-card__price {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 14px !important;
  color: rgba(207, 214, 226, 0.78) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

.case-prize-card__price-value {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.case-prize-card__price-whole {
  color: rgba(207, 214, 226, 0.78) !important;
}

.case-prize-card__price-decimal {
  margin-left: 1px !important;
  color: rgba(207, 214, 226, 0.46) !important;
  font-size: 0.74em !important;
  font-weight: 500 !important;
}

.case-prize-card__price-icon {
  width: 11px !important;
  height: 11px !important;
  opacity: 0.88 !important;
}

.case-prize-card__chance {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 5 !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 8px 0 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  background: rgba(8, 9, 11, 0.82) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22) !important;
  transition: width 260ms ease-in-out, opacity 180ms ease-in-out, transform 180ms ease-in-out, background-color 180ms ease-in-out, border-color 180ms ease-in-out !important;
}

.case-prize-card__chance.is-open {
  width: var(--case-prize-chance-open-width, 104px) !important;
}

.case-prize-card__chance.is-closing {
  width: 24px !important;
}

.case-prize-card__chance-icon-wrap {
  width: 8px !important;
  height: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

.case-prize-card__chance-icon {
  width: 2px !important;
  height: 10px !important;
}

.case-prize-card__chance-text {
  order: 2 !important;
  color: #b0b0b0 !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  transform: translateX(2px) !important;
  transition: opacity 180ms ease-in-out, transform 220ms ease-in-out !important;
}

.case-prize-card__chance.is-open .case-prize-card__chance-text {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.case-prize-card__chance.is-closing .case-prize-card__chance-text {
  opacity: 0 !important;
  transform: translateX(2px) !important;
}

.case-prizes-grid__empty {
  grid-column: 1 / -1 !important;
  padding: 16px 10px !important;
  border-radius: 14px !important;
  text-align: center !important;
  color: rgba(207, 214, 226, 0.68) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

@media (max-width: 389px) {
  .cases-filter-button {
    min-height: 42px !important;
    padding-inline: 10px !important;
  }

  .cases-filter-button__check {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
  }

  .cases-filter-button__check img {
    width: 13px !important;
    height: 13px !important;
  }

  .daily-case-wheel {
    gap: 28px !important;
  }

  .daily-case-wheel__stage {
    width: min(84vw, 332px) !important;
  }

  .daily-case-wheel__button {
    width: 100px !important;
    height: 100px !important;
  }

  .daily-case-wheel__pointer img {
    width: 56px !important;
  }

  .case-prizes-grid {
    gap: 10px !important;
  }
}

/* correction 2026-05-04 round 2: exact case filters, lower reward cards, functional 8s daily wheel spin */
.cases-filter-button--sort {
  justify-content: center !important;
  padding-inline: 14px !important;
}

.cases-filter-button--sort .cases-filter-button__text,
.cases-filter-button--sort .cases-filter-button__text-line {
  width: 100% !important;
  text-align: center !important;
}

.cases-filter-button--sort .cases-filter-button__check {
  display: none !important;
}

.cases-filter-button--affordable {
  justify-content: space-between !important;
}

.cases-filter-button--affordable .cases-filter-button__text,
.cases-filter-button--affordable .cases-filter-button__text-line {
  text-align: left !important;
}

.cases-filter-button--affordable .cases-filter-button__check {
  display: grid !important;
  opacity: 0.62 !important;
}

.cases-filter-button--affordable.is-active .cases-filter-button__check {
  opacity: 1 !important;
}

.case-prize-card {
  padding-top: 34px !important;
  padding-bottom: 10px !important;
  gap: 7px !important;
  box-sizing: border-box !important;
}

.case-prize-card__preview {
  margin-top: 0 !important;
  transform: translateY(0) !important;
  flex: 0 0 auto !important;
}

.case-prize-card__meta {
  margin-top: 1px !important;
  min-height: 36px !important;
  justify-content: flex-start !important;
  gap: 3px !important;
}

.case-prize-card__name {
  min-height: 17px !important;
  align-items: center !important;
}

.case-prize-card__price {
  min-height: 15px !important;
}

.daily-case-wheel__disc {
  transform: rotate(0deg);
  transform-origin: 50% 50% !important;
  will-change: transform !important;
}

.daily-case-wheel__pointer {
  animation: none !important;
  transform: rotate(0deg) !important;
  will-change: auto !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  animation: none !important;
  transform: rotate(0deg) !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-disc-spin-result 8000ms both !important;
}

@keyframes daily-wheel-disc-spin-result {
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.28, 0.02, 0.74, 0.46);
  }
  14% {
    transform: rotate(calc(var(--daily-wheel-spin-target) * 0.12));
    animation-timing-function: linear;
  }
  72% {
    transform: rotate(calc(var(--daily-wheel-spin-target) * 0.86));
    animation-timing-function: cubic-bezier(0.08, 0.34, 0.12, 1);
  }
  100% {
    transform: rotate(var(--daily-wheel-spin-target));
  }
}


/* correction 2026-05-04 round 3: centered affordable filter group, attached chance badge, stable daily wheel */
.cases-filter-button--affordable {
  justify-content: center !important;
  gap: 7px !important;
  padding-inline: 12px !important;
}

.cases-filter-button--affordable .cases-filter-button__text,
.cases-filter-button--affordable .cases-filter-button__text-line {
  width: auto !important;
  max-width: calc(100% - 31px) !important;
  flex: 0 1 auto !important;
  text-align: center !important;
}

.cases-filter-button--affordable .cases-filter-button__check {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

.case-prize-card {
  --case-prize-card-inset: 8px;
  padding: var(--case-prize-card-inset) var(--case-prize-card-inset) 9px !important;
  gap: 5px !important;
}

.case-prize-card__preview {
  margin-top: 0 !important;
  transform: none !important;
}

.case-prize-card__chance {
  top: var(--case-prize-card-inset) !important;
  left: var(--case-prize-card-inset) !important;
}

.case-prize-card__meta {
  margin-top: 0 !important;
  min-height: 32px !important;
  justify-content: flex-start !important;
  gap: 2px !important;
}

.case-prize-card__name {
  min-height: 16px !important;
  align-items: center !important;
}

.case-prize-card__price {
  min-height: 14px !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-disc-spin-result 8000ms both !important;
}

/* correction 2026-05-04 round 4: 5s daily wheel, result scroll, profile pattern editor */
.daily-case-wheel__pointer,
.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  animation: none !important;
  transform: translate(-50%, -22%) !important;
  will-change: auto !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-disc-spin-result 5000ms cubic-bezier(0.22, 0.03, 0.14, 1) both !important;
}

@keyframes daily-wheel-disc-spin-result {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(var(--daily-wheel-spin-target));
  }
}

.case-detail-screen--daily-wheel .daily-case-wheel {
  animation: dailyWheelModeEnter 360ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

.case-detail-screen--from-daily-wheel .case-detail-screen__content {
  animation: dailyWheelModeExitToCase 420ms cubic-bezier(0.18, 0.82, 0.2, 1) both;
}

@keyframes dailyWheelModeEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes dailyWheelModeExitToCase {
  from {
    opacity: 0;
    transform: translate3d(0, -14px, 0) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.case-result-panel {
  max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px), 690px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.case-result-panel__title {
  font-weight: 600 !important;
  letter-spacing: -0.028em !important;
}

.case-result-grid {
  min-height: 0 !important;
  overflow-y: auto !important;
  align-content: start !important;
  padding: 2px 2px 20px !important;
  margin-bottom: 0 !important;
  scroll-padding-bottom: 20px !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.case-result-panel__actions {
  position: relative !important;
  bottom: auto !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}


/* correction 2026-05-04 round 5: centered daily pointer and compact unclipped result modal */
.daily-case-wheel__pointer,
.daily-case-wheel.is-spinning .daily-case-wheel__pointer {
  position: absolute !important;
  inset: 0 !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  animation: none !important;
  transform: rotate(0deg) !important;
  transform-origin: 50% 50% !important;
  will-change: auto !important;
  pointer-events: none !important;
}

.daily-case-wheel__pointer img {
  position: absolute !important;
  left: 50% !important;
  top: -4.5% !important;
  width: clamp(50px, 14vw, 62px) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
}

.daily-case-wheel.is-spinning .daily-case-wheel__disc {
  animation: daily-wheel-disc-spin-result 5000ms cubic-bezier(0.22, 0.03, 0.14, 1) both !important;
}

.case-result-panel {
  width: min(100%, 346px) !important;
  max-height: min(calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 96px), 560px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
  overflow: hidden !important;
}

.case-result-panel__title {
  font-weight: 600 !important;
  letter-spacing: -0.028em !important;
}

.case-result-grid {
  min-height: 0 !important;
  overflow-y: auto !important;
  align-content: start !important;
  padding: 2px 2px 18px !important;
  margin-bottom: 0 !important;
  scroll-padding-bottom: 18px !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.case-result-panel__actions {
  position: relative !important;
  bottom: auto !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: transparent !important;
}

/* profile NFT menu action filtering: compact two-action menu for NFTs without usable profile decoration */
.profile-nft-menu {
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
}

.profile-nft-menu--reduced {
  width: min(202px, calc(100% - 56px)) !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.profile-nft-menu--reduced .profile-nft-menu__item {
  min-height: 47px !important;
  margin-top: 0 !important;
}

.profile-nft-menu__item {
  overflow: hidden !important;
  contain: paint;
}

.profile-nft-menu__active-bg {
  inset: 0 !important;
  transform: none !important;
  border-radius: 0 !important;
  clip-path: inset(0 round 0) !important;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-active.is-status-changing-out .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-inactive.is-status-changing-out .profile-nft-menu__active-bg {
  transform: none !important;
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  top: 0 !important;
  border-top-left-radius: 17px !important;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  bottom: 0 !important;
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

/* follow-up 2026-05-04: custom solid/gradient color picker for profile editor */
.profile-edit-swatch--custom .profile-edit-swatch__inner {
  background: var(--swatch-fill);
}

.profile-edit-screen.is-color-picker-open .profile-edit-body {
  padding-top: 28px;
}

.profile-edit-body--picker {
  display: block;
}

.profile-color-editor {
  width: min(100% - 24px, 420px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.profile-gradient-stops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-gradient-stop {
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: #fff;
  font-weight: 800;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.profile-gradient-stop.is-selected {
  border-color: rgba(255, 255, 255, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.075));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 12px 26px rgba(0, 0, 0, 0.2);
}

.profile-gradient-stop__swatch {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 14px rgba(0, 0, 0, 0.22);
}

.profile-gradient-stop__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.profile-color-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: stretch;
  min-height: 210px;
}

.profile-color-picker__sv,
.profile-color-picker__hue {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: visible;
  touch-action: none;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

.profile-color-picker__sv {
  min-height: 210px;
  background: var(--picker-hue-color, #f00);
}

.profile-color-picker__sv::before,
.profile-color-picker__sv::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.profile-color-picker__sv::before {
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.profile-color-picker__sv::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

.profile-color-picker__hue {
  min-height: 210px;
  background: linear-gradient(180deg, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
}

.profile-color-picker__handle {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.76), 0 5px 14px rgba(0, 0, 0, 0.42);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.profile-color-picker__handle--hue {
  left: 50%;
}

.profile-color-editor__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.profile-color-editor__value {
  min-width: 122px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.profile-color-editor__swatch {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.profile-color-editor__hex {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.profile-color-editor__done {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.065));
  color: #fff;
  font-weight: 850;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.profile-color-editor__done:active {
  transform: scale(0.985);
  filter: brightness(0.94);
}

@media (max-width: 389px) {
  .profile-color-editor {
    width: min(100% - 18px, 390px);
  }

  .profile-color-picker {
    min-height: 190px;
  }

  .profile-color-picker__sv,
  .profile-color-picker__hue {
    min-height: 190px;
  }

  .profile-gradient-stops {
    gap: 8px;
  }

  .profile-gradient-stop {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    padding-inline: 8px;
  }

  .profile-gradient-stop__swatch {
    width: 36px;
    height: 36px;
  }
}

/* follow-up 2026-05-04: YAN case price animates only when actual displayed price signature changes */
.case-opening__price-text--yan.is-price-changing {
  animation: case-yan-price-change 520ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
  transform-origin: center center;
}

@keyframes case-yan-price-change {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.965);
    filter: blur(2px);
  }
  58% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale(1.035);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}


/* follow-up 2026-05-04 v3: exact NFT menu active fill and game-style profile color picker polish */
.profile-nft-menu,
.profile-nft-menu--reduced {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.profile-nft-menu__item,
.profile-nft-menu--reduced .profile-nft-menu__item {
  margin: 0 !important;
  min-height: 47px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  contain: paint;
}

.profile-nft-menu__item:first-child {
  border-top-left-radius: 17px !important;
  border-top-right-radius: 0 !important;
}

.profile-nft-menu__item:last-child {
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

.profile-nft-menu__item:first-child:last-child {
  border-radius: 17px 0 17px 17px !important;
}

.profile-nft-menu__active-bg,
.profile-nft-menu__item:first-child .profile-nft-menu__active-bg,
.profile-nft-menu__item:last-child .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-inactive .profile-nft-menu__active-bg {
  inset: 0 !important;
  border-radius: inherit !important;
  clip-path: none !important;
  transform: none !important;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-active.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 1 !important;
}

.profile-edit-swatch--custom .profile-edit-swatch__inner {
  background: var(--swatch-fill) !important;
}

.profile-color-picker__sv,
.profile-color-picker__hue {
  isolation: isolate;
}

.profile-color-picker__sv::before,
.profile-color-picker__sv::after {
  z-index: 1;
}

.profile-color-picker__handle {
  z-index: 4;
}

.profile-color-picker__hue::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* correction 2026-05-04 v4: lower profile color picker, stable HSV handles, clean NFT menu fills */
.profile-edit-screen.profile-screen.is-color-picker-open .profile-edit-body {
  padding-top: calc(var(--profile-header-expanded) + clamp(24px, 6vw, 36px)) !important;
}

.profile-edit-screen.is-color-picker-open .profile-edit-body {
  background: var(--app-bg) !important;
}

.profile-color-editor {
  width: min(100% - 32px, 420px) !important;
  gap: 16px !important;
  margin: 0 auto !important;
}

.profile-gradient-stops {
  gap: 12px !important;
}

.profile-color-picker {
  grid-template-columns: minmax(0, 1fr) 34px !important;
  gap: 20px !important;
  overflow: visible !important;
}

.profile-color-picker__sv,
.profile-color-picker__hue {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  outline: 0 !important;
  overflow: visible !important;
  background-clip: padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 16px 34px rgba(0, 0, 0, 0.24) !important;
}

.profile-color-picker__sv::before,
.profile-color-picker__sv::after,
.profile-color-picker__hue::after {
  inset: 1px !important;
  border-radius: calc(20px - 1px) !important;
}

.profile-color-picker__handle {
  width: 24px !important;
  height: 24px !important;
  border: 3px solid #ffffff !important;
  background-clip: padding-box !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.82),
    0 6px 16px rgba(0, 0, 0, 0.48) !important;
  transform: translate(-50%, -50%) !important;
}

.profile-color-picker__handle--hue {
  left: 50% !important;
}

.profile-color-editor__footer {
  gap: 12px !important;
}

.profile-color-editor__done,
.profile-color-editor__value,
.profile-gradient-stop {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.2) !important;
}

.profile-gradient-stop.is-selected {
  border-color: rgba(255, 255, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.22) !important;
}

.profile-nft-menu,
.profile-nft-menu--reduced {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 17px 0 17px 17px !important;
  background: #303030 !important;
  display: grid !important;
  grid-auto-rows: auto !important;
  gap: 0 !important;
}

.profile-nft-menu__item,
.profile-nft-menu--reduced .profile-nft-menu__item,
.profile-nft-menu__item[data-profile-nft-status="profile"] {
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 12px 0 21px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  contain: none !important;
  background: transparent !important;
  transform: translateZ(0) !important;
}

.profile-nft-menu--reduced .profile-nft-menu__item {
  min-height: 52px !important;
}

.profile-nft-menu--reduced .profile-nft-menu__item:last-child {
  min-height: 58px !important;
  padding-bottom: 6px !important;
}

.profile-nft-menu__active-bg,
.profile-nft-menu__item:first-child .profile-nft-menu__active-bg,
.profile-nft-menu__item:last-child .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-inactive .profile-nft-menu__active-bg {
  inset: -1px 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  transform: none !important;
  background: #3A3A3A !important;
}

.profile-nft-menu__item:first-child {
  border-top-left-radius: 17px !important;
  border-top-right-radius: 0 !important;
}

.profile-nft-menu__item:first-child .profile-nft-menu__active-bg {
  top: 0 !important;
  border-top-left-radius: 17px !important;
  border-top-right-radius: 0 !important;
}

.profile-nft-menu__item:last-child {
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

.profile-nft-menu__item:last-child .profile-nft-menu__active-bg {
  bottom: 0 !important;
  border-bottom-left-radius: 17px !important;
  border-bottom-right-radius: 17px !important;
}

.profile-nft-menu__item.is-active .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-active.is-status-changing-out .profile-nft-menu__active-bg,
.profile-nft-menu__item.is-next-inactive.is-status-changing-out .profile-nft-menu__active-bg {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 389px) {
  .profile-edit-screen.profile-screen.is-color-picker-open .profile-edit-body {
    padding-top: calc(var(--profile-header-expanded) + 24px) !important;
  }

  .profile-color-editor {
    width: min(100% - 24px, 390px) !important;
    gap: 14px !important;
  }

  .profile-color-picker {
    grid-template-columns: minmax(0, 1fr) 32px !important;
    gap: 16px !important;
  }
}

/* feature 2026-05-05: playable Ring game screen */
.ring-screen {
  position: relative;
  background: var(--app-bg);
}

.ring-screen__top-shell {
  position: relative;
  z-index: 3;
  padding: calc(env(safe-area-inset-top) + 15px) 15px 0;
}

.ring-screen__content {
  min-height: 100%;
  padding: 10px 15px calc(18px + env(safe-area-inset-bottom));
  scrollbar-gutter: stable both-edges;
}

.ring-header-panel {
  margin-top: 15px;
  min-height: 68px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  border-radius: 34px;
  background: #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.ring-header-panel__button {
  justify-self: center;
}

.ring-header-panel__title {
  justify-self: center;
  color: #dbdada;
  font-size: 31px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.ring-header-panel__help-icon {
  width: 14px;
  height: 26px;
}

.ring-history {
  min-height: 28px;
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  border-radius: 16px;
  border-color: rgba(148, 163, 184, 0.24);
  background: rgba(0, 0, 0, 0.28);
}

.ring-history__status {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.ring-history__status--active {
  color: #27f57f;
  background: #27f57f;
}

.ring-history__status--idle {
  color: #f14545;
  background: #f14545;
}

.ring-history__latest {
  flex: 0 0 auto;
  min-width: 39px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.ring-history__previous {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.48);
  transform: translate3d(-2px, 2px, 0);
}

.ring-history__entry {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.44);
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1),
    color 220ms ease;
}

.ring-history__entry--win {
  color: rgba(210, 255, 222, 0.52);
}

.ring-history__entry--lose {
  color: rgba(255, 205, 205, 0.44);
}

.ring-history__entry.is-entering {
  opacity: 0;
  transform: translate3d(-12px, 0, 0) scale(0.96);
}

.ring-header-toast-slot {
  position: relative;
  height: 0;
  overflow: visible;
}

.ring-playfield {
  position: relative;
  min-height: clamp(330px, 62vh, 470px);
  margin-top: 0;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.04), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.016));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 18px 34px rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(11px) saturate(112%);
  backdrop-filter: blur(11px) saturate(112%);
  contain: layout paint;
}

.ring-playfield::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.48) 100%);
  z-index: 1;
}

.ring-result-glow {
  position: absolute;
  bottom: 0;
  height: 68px;
  z-index: 4;
  pointer-events: none;
  opacity: 0.9;
  transition: filter 300ms ease, opacity 300ms ease;
}

.ring-result-glow--green {
  left: 0;
  width: 50%;
  background:
    linear-gradient(180deg, rgba(18, 56, 28, 0), rgba(18, 56, 28, 0.32) 40%, rgba(26, 110, 48, 0.82) 100%);
}

.ring-result-glow--red {
  left: 50%;
  width: 50%;
  background:
    linear-gradient(180deg, rgba(64, 14, 16, 0), rgba(64, 14, 16, 0.32) 40%, rgba(138, 22, 26, 0.82) 100%);
}

.ring-stage {
  position: absolute;
  left: 50%;
  top: 45%;
  width: min(72vw, 286px);
  aspect-ratio: 1 / 1;
  z-index: 6;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  overflow: visible;
}

.ring-stage__rings {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0);
}

.ring-stage__ring-group {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.ring-stage__arc {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.ring-stage__arc--outer-back {
  stroke: rgba(7, 11, 23, 0.58);
  stroke-width: 21;
  stroke-dasharray: 286 74;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.14))
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

.ring-stage__arc--outer {
  stroke: rgba(255, 255, 255, 0.34);
  stroke-width: 5;
  stroke-dasharray: 286 74;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.11));
}

.ring-stage__arc--inner-back {
  stroke: rgba(7, 11, 23, 0.54);
  stroke-width: 18;
  stroke-dasharray: 180 180;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.13))
    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.26));
}

.ring-stage__arc--inner {
  stroke: rgba(255, 255, 255, 0.32);
  stroke-width: 4.5;
  stroke-dasharray: 180 180;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.ring-ball,
.ring-ball-trail {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  pointer-events: none;
  will-change: transform;
}

.ring-ball {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff5a6 0%, #ffc928 36%, #f49b00 78%, #d97706 100%);
  box-shadow:
    0 0 8px rgba(255, 209, 35, 0.54),
    0 0 14px rgba(255, 181, 20, 0.18);
  opacity: 0;
  transform: translate3d(50%, 50%, 0) scale(0.72);
  transition:
    opacity 220ms ease,
    filter 240ms ease,
    box-shadow 240ms ease,
    z-index 0ms linear 180ms;
}

.ring-ball.is-active,
.ring-ball.is-escaped {
  opacity: 1;
}

.ring-ball.is-win {
  filter: saturate(1.08) brightness(1.04);
}

.ring-ball.is-lose {
  filter: saturate(1.05) brightness(0.98);
}

.ring-ball-trail {
  border-radius: 999px;
  background: radial-gradient(ellipse at 72% 50%, rgba(255, 211, 57, 0.34), rgba(255, 211, 57, 0.1) 38%, rgba(255, 211, 57, 0) 72%);
  opacity: 0;
  filter: blur(1.1px);
  transform-origin: center center;
  transition: opacity 180ms ease, z-index 0ms linear 180ms;
}

.ring-ball-trail.is-active,
.ring-ball-trail.is-escaped {
  opacity: 0.58;
}

.ring-ball.is-underlay,
.ring-ball-trail.is-underlay {
  z-index: 3;
}

.ring-center-display {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(-50%, -50%, 0) scale(0.96);
  transform-origin: center center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ring-center-display.is-visible {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

.ring-center-nft {
  position: relative;
  width: clamp(56px, 16vw, 72px);
  height: clamp(56px, 16vw, 72px);
  display: grid;
  place-items: center;
}

.ring-center-nft__art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ring-center-nft__art.is-entering,
.ring-center-nft__art.is-leaving {
  opacity: 0;
}

.ring-nft-model-art {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.ring-nft-model-art__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.32));
}

.ring-nft-model-art--fallback {
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
}

.ring-nft-model-art__fallback-copy {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ring-center-multiplier {
  position: relative;
  min-height: 22px;
  margin-top: -3px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.52);
  font-size: clamp(18px, 5.3vw, 24px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}

.ring-action-button {
  margin-top: 12px;
}

.ring-controls {
  margin-top: 12px;
}

.ring-bet-control {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 42px 42px minmax(0, 1fr) 42px 42px;
  gap: 8px;
  align-items: center;
}

.ring-bet-control__button {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring-bet-control__field {
  min-width: 0;
  min-height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  transition: border-color 180ms ease, background-color 180ms ease, filter 180ms ease;
}

.ring-bet-control__field.is-disabled {
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(0, 0, 0, 0.10);
  filter: brightness(0.88);
}

.ring-bet-control__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.ring-bet-control__input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.ring-bet-control__input:disabled {
  color: rgba(255, 255, 255, 0.54);
}

.ring-placeholder-field {
  margin-top: 10px;
}

.ring-screen .slot-spin-button.is-text-swapping > .ui-button-text-swap__item,
.ring-screen .slot-spin-button > .ui-button-text-swap__item {
  min-width: 5.2em;
}

.ring-screen.is-ring-hit-inner .ring-stage__arc--inner,
.ring-screen.is-ring-hit-outer .ring-stage__arc--outer {
  animation: ring-hit-pulse 220ms ease-out;
}

.ring-screen.is-ring-result-win .ring-result-glow--green,
.ring-screen.is-ring-result-lose .ring-result-glow--red {
  animation: ring-sector-result-pulse 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ring-hit-pulse {
  0% { stroke: rgba(255, 255, 255, 0.72); filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.28)); }
  100% { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12)); }
}

@keyframes ring-sector-result-pulse {
  0% { opacity: 0.9; filter: brightness(1) saturate(1); }
  42% { opacity: 1; filter: brightness(1.35) saturate(1.25); }
  100% { opacity: 0.9; filter: brightness(1) saturate(1); }
}

@media (max-width: 389px) {
  .ring-screen__top-shell,
  .ring-screen__content {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ring-playfield {
    min-height: 322px;
  }

  .ring-stage,
  .ring-center-display {
    top: 43.5%;
  }

  .ring-bet-control {
    grid-template-columns: 38px 38px minmax(0, 1fr) 38px 38px;
    gap: 6px;
  }

  .ring-bet-control__button {
    font-size: 14px;
  }

  .ring-header-panel__title {
    font-size: 28px;
  }

  .ring-history__latest {
    min-width: 36px;
    font-size: 14px;
  }
}

.ring-history {
  max-width: 100%;
}

.ring-history__previous {
  flex: 1 1 auto;
  padding-right: 2px;
  gap: 8px;
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 18px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 18px), transparent 100%);
}

.ring-history__entry {
  transform-origin: left center;
  transition:
    transform 420ms cubic-bezier(0.16, 0.88, 0.22, 1),
    opacity 320ms cubic-bezier(0.16, 0.88, 0.22, 1),
    color 420ms ease,
    filter 420ms ease !important;
}

.ring-history__entry.is-from-latest {
  filter: brightness(1.2);
}

.ring-history__entry.is-entering {
  opacity: 0;
  transform: translate3d(-10px, -2px, 0) scale(1.14);
}

.ring-center-nft {
  isolation: isolate;
}

.ring-center-nft__art {
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  transition:
    opacity 360ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 360ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 360ms ease !important;
  will-change: opacity, transform, filter;
}

.ring-center-nft__art.is-entering {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.84);
  filter: blur(3px) saturate(0.86);
  z-index: 2;
}

.ring-center-nft__art.is-leaving {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.92);
  filter: blur(2px) saturate(0.78);
  z-index: 1;
}

.ring-stage__arc--outer-back {
  stroke-width: 22;
}

.ring-stage__arc--outer {
  stroke-width: 5.5;
}

.ring-stage__arc--inner-back {
  stroke-width: 20;
}

.ring-stage__arc--inner {
  stroke-width: 5.5;
}

.ring-history {
  gap: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(0, 0, 0, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 8px 18px rgba(0, 0, 0, 0.2);
}

.ring-history__latest {
  transform-origin: left center;
  transition:
    transform 360ms cubic-bezier(0.16, 0.88, 0.22, 1),
    color 360ms ease,
    filter 360ms ease;
}

.ring-history--active .ring-history__latest {
  color: rgba(255, 255, 255, 0.98);
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.12));
}

.ring-history--active .ring-history__previous .ring-history__entry:first-child {
  animation: ring-history-active-tail 1180ms ease-in-out infinite;
}

.ring-history__entry.is-from-latest {
  color: rgba(255, 255, 255, 0.96) !important;
  filter: brightness(1.38) drop-shadow(0 0 8px rgba(255, 255, 255, 0.18));
}

.ring-history__entry.is-entering {
  opacity: 0;
  transform: translate3d(-18px, -2px, 0) scale(1.18);
}

@keyframes ring-history-active-tail {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    color: rgba(255, 255, 255, 0.58);
    filter: none;
  }
  32% {
    transform: translate3d(1.6px, -0.8px, 0) scale(1.035);
    color: rgba(222, 255, 232, 0.76);
    filter: drop-shadow(0 0 8px rgba(39, 245, 127, 0.14));
  }
  64% {
    transform: translate3d(-1px, 0.6px, 0) scale(0.995);
    color: rgba(255, 226, 226, 0.64);
  }
}

.ring-stage__arc--outer-back,
.ring-stage__arc--inner-back {
  stroke: rgba(255, 255, 255, 0.16) !important;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.42))
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.08))
    drop-shadow(0 13px 22px rgba(0, 0, 0, 0.28)) !important;
}

.ring-stage__arc--outer,
.ring-stage__arc--inner {
  stroke: rgba(255, 255, 255, 0.62) !important;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.44))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.13)) !important;
}

.ring-stage__arc--outer-back {
  stroke-width: 24 !important;
}

.ring-stage__arc--outer {
  stroke-width: 6.4 !important;
}

.ring-stage__arc--inner-back {
  stroke-width: 22 !important;
}

.ring-stage__arc--inner {
  stroke-width: 6.1 !important;
}

.ring-screen.is-ring-hit-inner .ring-stage__arc--inner,
.ring-screen.is-ring-hit-outer .ring-stage__arc--outer {
  animation: ring-hit-glass-pulse 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ring-hit-glass-pulse {
  0% {
    stroke: rgba(255, 255, 255, 0.96);
    filter:
      drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.24));
  }
  100% {
    stroke: rgba(255, 255, 255, 0.62);
  }
}

.ring-result-glow {
  opacity: 0.48;
  filter: brightness(0.88) saturate(0.95);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ring-screen.is-ring-result-win .ring-result-glow--green,
.ring-screen.is-ring-result-lose .ring-result-glow--red {
  animation: ring-sector-result-smooth 1350ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ring-sector-result-smooth {
  0% { opacity: 0.48; filter: brightness(0.9) saturate(0.95); }
  28% { opacity: 1; filter: brightness(1.55) saturate(1.35); }
  62% { opacity: 0.84; filter: brightness(1.22) saturate(1.16); }
  100% { opacity: 0.48; filter: brightness(0.9) saturate(0.95); }
}

.ring-center-nft {
  margin-bottom: 8px;
}

.ring-center-multiplier {
  margin-top: 6px !important;
  transform-origin: center center;
  transition:
    transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 140ms ease,
    filter 140ms ease;
  will-change: transform, opacity, filter;
}

.ring-center-multiplier.is-swapping-out {
  transform: scale(0.88);
  opacity: 0.72;
  filter: blur(0.4px) saturate(0.88);
}

.ring-center-multiplier.is-swapping-in {
  animation: ring-center-multiplier-in 220ms cubic-bezier(0.18, 1.12, 0.22, 1) both;
}

@keyframes ring-center-multiplier-in {
  0% { transform: scale(0.9); opacity: 0.76; filter: blur(0.4px) saturate(0.9); }
  68% { transform: scale(1.055); opacity: 1; filter: blur(0) saturate(1.08); }
  100% { transform: scale(1); opacity: 1; filter: blur(0) saturate(1); }
}


/* ring refinement 2026-05-07: reference-matched contour rings, calmer history, less jitter */
.ring-playfield {
  border-color: rgba(148, 163, 184, 0.16);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.025), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.008));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 16px 28px rgba(0, 0, 0, 0.24);
}

.ring-playfield::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.36) 100%);
}

.ring-stage {
  top: 45%;
  width: min(76vw, 304px);
}

.ring-stage__ring-group {
  transition: transform 36ms linear;
}

.ring-stage__arc {
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.ring-stage__arc--outer,
.ring-stage__arc--inner {
  stroke: rgba(183, 204, 238, 0.68) !important;
  filter:
    drop-shadow(0 0 0.4px rgba(235, 243, 255, 0.75))
    drop-shadow(0 0 6px rgba(170, 192, 228, 0.06)) !important;
}

.ring-stage__arc--outer {
  stroke-width: 2.2 !important;
}

.ring-stage__arc--inner-1 {
  stroke-width: 2.15 !important;
}


.ring-stage__arc--outer-back,
.ring-stage__arc--inner-back {
  display: none !important;
}

.ring-screen.is-ring-hit-inner .ring-stage__arc--inner,
.ring-screen.is-ring-hit-outer .ring-stage__arc--outer {
  animation: ring-hit-contour-pulse 180ms ease-out;
}

@keyframes ring-hit-contour-pulse {
  0% {
    stroke: rgba(233, 241, 255, 0.96);
    filter: drop-shadow(0 0 8px rgba(215, 229, 255, 0.16));
  }
  100% {
    stroke: rgba(183, 204, 238, 0.68);
  }
}

.ring-history--active .ring-history__previous .ring-history__entry:first-child {
  animation: none !important;
}

.ring-history__entry,
.ring-history__latest {
  transition:
    transform 220ms cubic-bezier(0.2, 0.82, 0.24, 1),
    opacity 220ms ease,
    color 220ms ease,
    filter 220ms ease !important;
}

.ring-history__entry.is-from-latest {
  color: rgba(255, 255, 255, 0.86) !important;
  filter: brightness(1.1);
}

.ring-history__entry.is-entering {
  opacity: 0;
  transform: translate3d(-8px, 0, 0) scale(1.04);
}

.ring-ball {
  box-shadow:
    0 0 7px rgba(255, 209, 35, 0.42),
    0 0 12px rgba(255, 181, 20, 0.14);
}

.ring-ball-trail {
  opacity: 0;
  filter: blur(0.9px);
}

.ring-ball-trail.is-active,
.ring-ball-trail.is-escaped {
  opacity: 0.4;
}

/* ring final physics/ui fix: stable flat history entries */
.ring-history {
  display: flex;
  gap: 8px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring-history__entry {
  flex: 0 0 auto;
  min-width: 54px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transition: all 0.3s ease;
  animation: ring-entry-appear 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.ring-history__entry--win {
  background: rgba(34, 197, 94, 0.15) !important;
  color: #4ade80 !important;
}

.ring-history__entry--lose {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
}

.ring-history__entry--neutral {
  background: rgba(148, 163, 184, 0.13) !important;
  color: rgba(203, 213, 225, 0.68) !important;
}

[data-ring-history-latest] {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

@keyframes ring-entry-appear {
  from {
    opacity: 0;
    transform: translateX(-20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ring final touch fix: anti-sticky ball UI cleanup */
.ring-bet-control__button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  justify-self: center !important;
}

.ring-bet-control__button img,
.ring-bet-control__button svg {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain;
}

.ring-history {
  height: 32px !important;
  min-height: 32px !important;
  overflow: hidden !important;
  padding: 2px 0 !important;
  display: flex !important;
  align-items: center !important;
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}

.ring-history__entry {
  height: 26px !important;
  margin: 0 4px !important;
  box-sizing: border-box !important;
  will-change: transform;
}

[data-ring-multiplier],
[data-ring-center-multiplier] {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  backface-visibility: hidden;
}

.ring-stage__rings {
  transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden;
  contain: paint;
}

.ring-stage__ring-group {
  transition: none !important;
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center center;
  backface-visibility: hidden;
}

.ring-stage__arc--outer,
.ring-stage__arc--inner {
  filter: none !important;
  shape-rendering: geometricPrecision;
}

.ring-stage__arc--outer {
  stroke-dasharray: 326 34 !important;
  stroke-width: 2.35 !important;
}

.ring-stage__arc--inner,
.ring-stage__arc--inner-1 {
  stroke-dasharray: 278 82 !important;
  stroke-width: 2.25 !important;
}

.ring-screen.is-ring-hit-inner .ring-stage__arc--inner,
.ring-screen.is-ring-hit-outer .ring-stage__arc--outer {
  animation: none !important;
}

.ring-ball {
  transition: opacity 160ms ease, filter 160ms ease, z-index 0ms linear 120ms !important;
}

.ring-ball-trail {
  opacity: 0 !important;
  filter: blur(0.6px) !important;
}

.ring-ball-trail.is-active,
.ring-ball-trail.is-escaped {
  opacity: 0.26 !important;
}

.ring-history {
  position: relative !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 2px 24px 2px 16px !important;
  gap: 6px !important;
  overflow: hidden !important;
  align-items: center !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  contain: paint;
}

.ring-history::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 0;
  bottom: 2px;
  width: 34px;
  z-index: 2;
  pointer-events: none;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0), rgba(13, 13, 13, 0.72) 62%, rgba(13, 13, 13, 0.96));
}

.ring-history__entry {
  min-width: 48px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  line-height: 1 !important;
  animation: none !important;
  transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease !important;
  will-change: auto !important;
  backface-visibility: hidden;
}

.ring-history__entry.is-entering,
.ring-history__entry.is-from-latest {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

[data-ring-history-latest] {
  min-width: 48px !important;
  box-shadow: none !important;
}

[data-ring-center-multiplier] {
  transform: none !important;
  animation: none !important;
  transition: none !important;
  min-width: 3.6em;
}

.ring-stage__arc--outer {
  stroke-dasharray: 306 54 !important;
}

.ring-stage__arc--inner,
.ring-stage__arc--inner-1 {
  stroke-dasharray: 180 180 !important;
}

.ring-history {
  padding-right: 34px !important;
}

.ring-history::after {
  width: 50px !important;
  background: linear-gradient(90deg, rgba(13, 13, 13, 0), rgba(13, 13, 13, 0.76) 50%, rgba(13, 13, 13, 0.98)) !important;
}

.ring-history__entry {
  transition:
    transform 360ms cubic-bezier(0.2, 0.82, 0.24, 1),
    opacity 260ms ease,
    color 260ms ease,
    background-color 260ms ease,
    filter 260ms ease !important;
  will-change: transform, opacity;
}

.ring-history__entry.is-entering {
  opacity: 0 !important;
  transform: translate3d(-18px, 0, 0) scale(0.92) !important;
}

.ring-history__entry.is-color-changing {
  filter: brightness(1.18) saturate(1.16);
}

@media (prefers-reduced-motion: no-preference) {
  .ring-history__entry.is-entering {
    animation: ring-history-entry-soft-in 360ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
  }
}

@keyframes ring-history-entry-soft-in {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 0, 0) scale(0.92);
    filter: brightness(1.25) saturate(1.15);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: brightness(1) saturate(1);
  }
}


/* ring final pass 2026-05-09: flatter history shell, larger outer gap, sector/NFT fades */
.ring-history {
  border-radius: 10px !important;
  padding-right: 38px !important;
}

.ring-history::after {
  width: 56px !important;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

.ring-stage__arc--outer {
  stroke-dasharray: 286 74 !important;
}

.ring-screen.is-ring-result-win .ring-result-glow--green,
.ring-screen.is-ring-result-lose .ring-result-glow--red {
  animation: none !important;
}

.ring-screen.is-ring-sector-enter-win .ring-result-glow--green,
.ring-screen.is-ring-sector-enter-lose .ring-result-glow--red {
  animation: ring-sector-hit-fade-earlier 820ms cubic-bezier(0.18, 0.84, 0.22, 1) both !important;
}

@keyframes ring-sector-hit-fade-earlier {
  0% { opacity: 0.96; filter: brightness(1.48) saturate(1.28); }
  34% { opacity: 0.72; filter: brightness(1.14) saturate(1.08); }
  100% { opacity: 0.42; filter: brightness(0.86) saturate(0.92); }
}

.ring-center-display {
  justify-content: center !important;
  transition:
    opacity 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 420ms ease !important;
  will-change: opacity, transform, filter;
}

.ring-center-display.is-preparing,
.ring-center-display.is-hiding {
  opacity: 0 !important;
  transform: translate3d(-50%, -50%, 0) scale(0.9) !important;
  filter: blur(2px) saturate(0.9);
}

.ring-center-display.is-visible {
  opacity: 1 !important;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  filter: blur(0) saturate(1);
}

.ring-center-nft {
  margin: 0 !important;
  width: clamp(62px, 17vw, 78px) !important;
  height: clamp(62px, 17vw, 78px) !important;
}

.ring-center-nft__art {
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    transform 420ms cubic-bezier(0.16, 0.84, 0.22, 1),
    filter 420ms ease !important;
  will-change: opacity, transform, filter;
}

.ring-center-nft__art.is-entering {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) scale(0.84) !important;
  filter: blur(4px) saturate(0.84);
  z-index: 2;
}

.ring-center-nft__art.is-leaving {
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(0.92) !important;
  filter: blur(3px) saturate(0.8);
  z-index: 1;
}

.ring-center-multiplier,
[data-ring-center-multiplier] {
  display: none !important;
}

.ring-history {
  justify-content: flex-start !important;
  padding-left: 2px !important;
  padding-right: 40px !important;
  gap: 5px !important;
}

.ring-history__entry:first-child {
  margin-left: 0 !important;
}

/* 2026-05-10: profile pattern layers + ring history edge cleanup */
.profile-hero__surface {
  z-index: 0;
}

.profile-hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.profile-hero-pattern--empty {
  display: none;
}

.profile-hero-pattern__layer {
  position: absolute;
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--profile-pattern-tint, rgba(255, 255, 255, 0.72));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-origin: 50% 50%;
  mix-blend-mode: var(--profile-pattern-blend-mode, normal);
  filter: var(--profile-pattern-shadow, drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12)));
  will-change: opacity;
  transition: opacity var(--profile-pattern-transition-ms, 260ms) ease;
  backface-visibility: hidden;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .profile-hero-pattern__layer {
    background-image: none !important;
    -webkit-mask-image: var(--profile-pattern-layer-image);
    mask-image: var(--profile-pattern-layer-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

.profile-nft-detail__owner-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.profile-nft-detail__owner-avatar-image,
.profile-nft-detail__owner-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.profile-nft-detail__owner-avatar-placeholder {
  width: 12px;
  height: 12px;
  opacity: 0.86;
  object-fit: contain;
}

.ring-history {
  border-radius: 8px !important;
  background: rgba(10, 11, 13, 0.88) !important;
  border-color: rgba(148, 163, 184, 0.20) !important;
  overflow: hidden !important;
  padding-right: 46px !important;
  contain: layout paint style !important;
}

.ring-history::after {
  top: 1px !important;
  right: 0 !important;
  bottom: 1px !important;
  width: 48px !important;
  z-index: 6 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  background: linear-gradient(90deg, rgba(10, 11, 13, 0), rgba(10, 11, 13, 0.94) 54%, #0a0b0d 100%) !important;
  box-shadow: -10px 0 16px rgba(10, 11, 13, 0.16) !important;
}

.ring-history__entry {
  position: relative;
  z-index: 1;
}



/* Settings drawer: clean NFT-info parity block. */
.settings-drawer-layer {
  --settings-drawer-drag-progress: 1;
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
  overflow-anchor: none;
}

.settings-drawer-layer.is-closing {
  pointer-events: none;
}

.settings-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  animation: profile-nft-backdrop-in 220ms ease forwards;
  will-change: opacity;
}

.settings-drawer-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  height: clamp(560px, 68dvh, 660px);
  max-height: calc(100dvh - 20px);
  min-height: 0;
  padding: 26px 22px max(20px, env(safe-area-inset-bottom));
  border-radius: 34px 34px 0 0;
  background: #111111;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
  overflow: visible;
  transform: translate3d(0, 102%, 0);
  animation: profile-nft-sheet-in 300ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
  will-change: transform;
  contain: layout style;
  touch-action: pan-y;
}

.settings-drawer-layer.is-open-settled .settings-drawer-sheet,
.settings-drawer-layer.is-preserved:not(.is-dragging):not(.is-settling):not(.is-closing) .settings-drawer-sheet {
  animation: none;
  transform: translate3d(0, 0, 0);
}

.settings-drawer-layer.is-open-settled .settings-drawer-backdrop,
.settings-drawer-layer.is-preserved:not(.is-dragging):not(.is-settling):not(.is-closing) .settings-drawer-backdrop {
  animation: none;
  opacity: 1;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.settings-drawer-layer.is-closing .settings-drawer-sheet {
  transform: translateY(0);
  animation: profile-nft-sheet-out 250ms cubic-bezier(0.4, 0, 0.9, 0.3) forwards;
}

.settings-drawer-layer.is-closing .settings-drawer-backdrop {
  opacity: 1;
  animation: profile-nft-backdrop-out 220ms ease forwards;
}

.settings-drawer-layer.is-dragging .settings-drawer-sheet,
.settings-drawer-layer.is-settling .settings-drawer-sheet,
.settings-drawer-layer.is-dragging .settings-drawer-backdrop,
.settings-drawer-layer.is-settling .settings-drawer-backdrop {
  animation: none;
  transition: none;
}

.settings-drawer__grabber {
  position: absolute;
  z-index: 12;
  top: -8px;
  left: 50%;
  width: 176px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.settings-drawer__grabber::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 176px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.settings-drawer-layer.is-dragging .settings-drawer__grabber {
  cursor: grabbing;
}

.settings-drawer__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}

.settings-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.settings-block h3,
.settings-block__headline h3 {
  margin: 0;
  color: #fff;
  font-family: "Roboto Flex", Roboto, Arial, sans-serif;
  font-size: 21px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.settings-block__headline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.settings-sfx__value {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
}

.settings-sfx__range {
  width: 100%;
  height: 18px;
  min-height: 18px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #aaa6a6;
  -webkit-appearance: none;
  appearance: none;
}

.settings-sfx__range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: #585858;
}

.settings-sfx__range::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background: #aaa6a6;
  -webkit-appearance: none;
  appearance: none;
}

.settings-sfx__range::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: #585858;
}

.settings-sfx__range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: #aaa6a6;
}

.settings-choice-grid {
  display: grid;
  gap: 8px;
}

.settings-choice-grid--currency {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.settings-choice-grid--language {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-choice,
.settings-list-action,
.settings-promocode-input {
  min-height: 32px;
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
  color: #cfcfcf;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.settings-choice,
.settings-list-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  transform-origin: center center;
  transition:
    transform 140ms cubic-bezier(0.18, 0.84, 0.22, 1),
    filter 140ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.settings-choice:active,
.settings-list-action:active {
  transform: scale(0.965);
  filter: brightness(0.93);
}

.settings-choice.is-active {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.settings-choice__prefix {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-choice__icon,
.settings-choice__flag {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.settings-promocode-input {
  width: 100%;
  padding: 0 12px;
  outline: none;
}

.settings-promocode-input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.settings-block__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10px;
  line-height: 1.25;
}

.settings-list-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.settings-list-action {
  min-width: 0;
  font-size: 12px;
}

@media (max-width: 389px) {
  .settings-drawer-sheet {
    height: min(610px, calc(100dvh - 14px));
    max-height: calc(100dvh - 14px);
    padding: 24px 18px max(16px, env(safe-area-inset-bottom));
  }

  .settings-drawer__content {
    gap: 9px;
  }

  .settings-block h3,
  .settings-block__headline h3 {
    font-size: 19px;
  }

  .settings-choice,
  .settings-list-action,
  .settings-promocode-input {
    height: 29px;
    min-height: 29px;
    font-size: 12px;
    border-radius: 9px;
  }

  .settings-choice__prefix,
  .settings-choice__icon,
  .settings-choice__flag {
    width: 16px;
    height: 16px;
  }

  .settings-list-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

.profile-pattern-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.profile-pattern-picker__item {
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
}

.profile-pattern-picker__item.is-active {
  border-color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.14);
}

.profile-pattern-picker__preview {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.profile-pattern-picker__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.profile-edit-section__head--hidden {
  display: none;
}

.profile-pattern-transfer-dock {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  z-index: 12;
  display: none;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.profile-screen.is-condensed .profile-pattern-transfer-dock {
  display: flex;
}

.profile-pattern-transfer {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  opacity: 0.95;
}

.profile-pattern-transfer.is-transferred {
  opacity: 0.38;
}

.profile-pattern-transfer img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-pattern-transfer-dock__hint {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  max-width: 170px;
}

.profile-pattern-transfer-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center;
  opacity: 1;
  transition: transform 420ms cubic-bezier(0.2, 0.85, 0.22, 1), opacity 420ms ease;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.28));
}

.profile-pattern-layer.is-pending-transfer {
  filter: saturate(0.82);
}

.case-opening__price-value--static {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (max-width: 360px) {

  .profile-pattern-transfer-dock__hint {
    display: none;
  }
}

/* 2026-05-10 final profile/settings pass: profile patterns are managed only by the Python editor. */
.profile-pattern-transfer-dock,
.profile-pattern-transfer-ghost,
.profile-pattern-picker {
  display: none !important;
}


.profile-edit-section--emoji {
  display: block !important;
}

.profile-edit-section--emoji .profile-pattern-picker {
  display: none !important;
}

/* Slightly lighter pattern marks only on the real Black background across profile, NFT info and case cards. */
.case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(156, 156, 156, 0.48) !important;
  --case-nft-pattern-opacity: 0.68 !important;
  --case-nft-pattern-opacity-multiplier: 1.16 !important;
  --case-nft-pattern-brightness: 1.08 !important;
}

/* Black background patterns: slightly lighter again, only where the real black NFT/background class is present. */
.case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(182, 182, 182, 0.56) !important;
  --case-nft-pattern-opacity: 0.78 !important;
  --case-nft-pattern-opacity-multiplier: 1.28 !important;
  --case-nft-pattern-brightness: 1.14 !important;
}


.slot-bet-control--wide,
.ring-bet-control {
  grid-template-columns: 36px 36px minmax(0, 1fr) 36px 36px !important;
  gap: 8px !important;
}

.slot-bet-control--wide .slot-bet-control__button,
.ring-bet-control .slot-bet-control__button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: center !important;
}

.slot-bet-control__button--text {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.slot-bet-control__field,
.ring-bet-control__field {
  justify-content: center !important;
  gap: 6px !important;
}

.slot-bet-control__value {
  text-align: center !important;
  white-space: nowrap !important;
}

.slot-bet-control__currency-icon,
.ring-bet-control__currency-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  object-fit: contain !important;
}

.ring-bet-control__input {
  text-align: center !important;
}

/* Black background patterns: one more small lift, only on the real Black background. */
.case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(206, 206, 206, 0.62) !important;
  --case-nft-pattern-opacity: 0.86 !important;
  --case-nft-pattern-opacity-multiplier: 1.36 !important;
  --case-nft-pattern-brightness: 1.2 !important;
}

/* 2026-05-11: settings drawer uses the same light blur/dim as NFT info. */
.profile-nft-detail-backdrop {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-nft-detail-layer.is-open-settled .profile-nft-detail-backdrop {
  animation: none !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* 2026-05-11 final: settings closes through the same drag/settle path as NFT info,
and profile pattern choice is visible in editor. */
.profile-nft-detail-backdrop {
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-nft-detail-layer.is-open-settled .profile-nft-detail-backdrop {
  animation: none !important;
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.profile-edit-section--emoji .profile-edit-section__head {
  align-items: center !important;
}

.profile-edit-pattern-preview {
  width: 34px !important;
  height: 34px !important;
  flex: 0 0 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.profile-edit-pattern-preview img {
  width: 68% !important;
  height: 68% !important;
  object-fit: contain !important;
  opacity: 0.92 !important;
}

.profile-edit-section--emoji .profile-pattern-picker {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

.profile-edit-section--emoji .profile-pattern-picker__item {
  min-height: 54px !important;
  padding: 6px !important;
  border-radius: 15px !important;
  background: rgba(0, 0, 0, 0.38) !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  color: rgba(255, 255, 255, 0.76) !important;
  gap: 4px !important;
}

.profile-edit-section--emoji .profile-pattern-picker__item.is-active {
  border-color: rgba(112, 255, 134, 0.82) !important;
  box-shadow: 0 0 0 1px rgba(112, 255, 134, 0.18) inset, 0 0 14px rgba(112, 255, 134, 0.18) !important;
  background: rgba(112, 255, 134, 0.08) !important;
}

.profile-edit-section--emoji .profile-pattern-picker__preview {
  width: 24px !important;
  height: 24px !important;
}

.profile-edit-section--emoji .profile-pattern-picker__label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

/* 2026-05-11: profile background pattern fixes + cleaned settings drawer motion. */
.profile-hero-pattern {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  height: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed, 204px));
  overflow: hidden !important;
  clip-path: inset(0 0 0 0 round 0);
}

.profile-edit-pattern-preview {
  display: none !important;
}

.profile-edit-pattern-trigger {
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.055);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}

.profile-edit-pattern-trigger.has-pattern {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.profile-edit-pattern-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-pattern-picker-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}

.profile-pattern-picker-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  animation: profile-nft-backdrop-in 220ms ease forwards;
}

.profile-pattern-picker-sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: min(540px, calc(100dvh - 56px));
  padding: 22px 18px max(18px, env(safe-area-inset-bottom));
  border-radius: 34px 34px 0 0;
  background: #111111;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.42);
  overflow: visible;
  transform: translateY(102%);
  animation: profile-nft-sheet-in 300ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards;
}

.profile-pattern-picker__grabber {
  position: absolute;
  z-index: 12;
  top: -8px;
  left: 50%;
  width: 176px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: pointer;
}

.profile-pattern-picker__grabber::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4px;
  width: 176px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transform: translateX(-50%);
}

.profile-pattern-picker-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.profile-pattern-picker-sheet__title {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.profile-pattern-picker-sheet__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-height: min(390px, calc(100dvh - 160px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.profile-pattern-picker-sheet__grid::-webkit-scrollbar {
  display: none;
}

.profile-pattern-choice {
  min-height: 82px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.profile-pattern-choice.is-active {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
}

.profile-pattern-choice__preview {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.profile-pattern-choice__preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.profile-pattern-choice__label {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  line-height: 1.05;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 389px) {
  .profile-pattern-picker-sheet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 2026-05-13: profile background emoji reset + no collapsed movement */
.profile-edit-section--emoji {
  margin: 0 !important;
  padding: 0 !important;
}

.profile-edit-section--emoji .profile-edit-section__head {
  min-height: 28px !important;
  padding: 0 !important;
  margin: -2px 0 0 !important;
}

.profile-edit-section--emoji .profile-edit-section__title {
  margin: 0 !important;
  line-height: 1 !important;
}

.profile-edit-panel--appearance .profile-edit-divider {
  margin: 10px 0 7px !important;
}

.profile-edit-pattern-trigger {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1.5px dashed rgba(255, 255, 255, 0.42) !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.profile-edit-pattern-trigger.has-pattern {
  border-style: solid !important;
  border-color: transparent !important;
  background: transparent !important;
}

.profile-edit-pattern-trigger img {
  width: 88% !important;
  height: 88% !important;
}

.profile-hero-pattern {
  height: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed, 204px));
  clip-path: inset(0 0 0 0 round 0);
  -webkit-clip-path: inset(0 0 0 0 round 0);
}

.profile-hero-pattern__layer {
  background-color: var(--profile-pattern-tint, rgba(255, 255, 255, 0.72)) !important;
  mix-blend-mode: var(--profile-pattern-blend-mode, normal) !important;
  filter: var(--profile-pattern-shadow, drop-shadow(0 8px 16px rgba(0, 0, 0, 0.12))) !important;
  will-change: opacity !important;
  transition: opacity var(--profile-pattern-transition-ms, 260ms) ease !important;
}

@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .profile-hero-pattern__layer {
    background-image: none !important;
    -webkit-mask-image: var(--profile-pattern-layer-image) !important;
    mask-image: var(--profile-pattern-layer-image) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }
}

/* 2026-05-13: profile pattern picker popover, manual pattern color, scroll performance cleanup */
.profile-edit-panel--appearance {
  padding-bottom: 7px !important;
}

.profile-edit-pattern-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.profile-edit-pattern-color-trigger {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.035) !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease, background 150ms ease;
}

.profile-edit-pattern-color-trigger:active {
  transform: scale(0.92);
  filter: brightness(0.92);
}

.profile-edit-pattern-color-trigger__fill {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--profile-edit-pattern-color, #dbdada);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

.profile-pattern-picker-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 130 !important;
  display: block !important;
  pointer-events: auto !important;
}

.profile-pattern-picker-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 0;
  animation: profile-nft-backdrop-in 180ms ease forwards !important;
}

.profile-pattern-picker-sheet {
  position: fixed !important;
  z-index: 1 !important;
  top: var(--profile-pattern-panel-top, 296px) !important;
  right: max(12px, min(var(--profile-pattern-panel-right, 16px), calc(100vw - 72px))) !important;
  width: min(370px, calc(100vw - 24px)) !important;
  max-height: min(214px, calc(100dvh - var(--profile-pattern-panel-top, 296px) - 18px)) !important;
  padding: 12px !important;
  border-radius: 17px 0 17px 17px !important;
  background: #1a1a1a !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  grid-auto-rows: 30px !important;
  gap: 7px !important;
  opacity: 0;
  transform: translateY(-8px) scale(0.96) !important;
  transform-origin: 100% 0 !important;
  animation: profile-nft-menu-in 170ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards !important;
}

.profile-pattern-picker-sheet::-webkit-scrollbar {
  display: none !important;
}

.profile-pattern-picker__grabber,
.profile-pattern-picker-sheet__head,
.profile-pattern-picker-sheet__title,
.profile-pattern-picker-sheet__grid,
.profile-pattern-choice__label {
  display: none !important;
}

.profile-pattern-choice {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: transparent !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}

.profile-pattern-choice:active {
  transform: scale(0.88);
  filter: brightness(0.9);
}

.profile-pattern-choice.is-active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-pattern-choice__preview {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  background: #dbdada !important;
  opacity: 0.88;
  -webkit-mask-image: var(--profile-pattern-choice-image) !important;
  mask-image: var(--profile-pattern-choice-image) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.profile-pattern-choice.is-active .profile-pattern-choice__preview {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.2));
}

.profile-pattern-choice__preview--empty {
  opacity: 0 !important;
}

.profile-hero-pattern {
  height: calc(env(safe-area-inset-top) + var(--profile-header-expanded-fixed, 204px));
  overflow: hidden !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: opacity var(--profile-pattern-transition-ms, 260ms) ease;
  will-change: opacity, height;
}

.profile-hero-pattern__layer {
  background-color: var(--profile-pattern-tint, #dbdada) !important;
  filter: var(--profile-pattern-shadow, none) !important;
  transition: none !important;
  will-change: auto !important;
}

.profile-pattern-opacity {
  width: min(100%, 360px);
  margin: 14px auto 0;
  padding: 12px 14px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.profile-pattern-opacity__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.profile-pattern-opacity__value {
  color: rgba(255, 255, 255, 0.62);
}

.profile-pattern-opacity__range {
  width: 100%;
  accent-color: var(--profile-pattern-tint, #dbdada);
}

@media (max-width: 359px) {
  .profile-pattern-picker-sheet {
    width: min(322px, calc(100vw - 20px)) !important;
    padding: 10px !important;
    grid-auto-rows: 26px !important;
    gap: 5px !important;
  }
}

/* 2026-05-13 follow-up: pattern popover motion, visible white pattern previews, swapped edge anchor controls. */
.profile-edit-pattern-controls {
  gap: 8px !important;
}

.profile-edit-pattern-trigger {
  position: relative !important;
}

.profile-edit-pattern-trigger__preview {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.profile-edit-pattern-trigger__preview img,
.profile-edit-pattern-trigger img {
  display: block !important;
  width: 88% !important;
  height: 88% !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.92 !important;
}

.profile-edit-pattern-trigger.has-pattern {
  background: rgba(255, 255, 255, 0.035) !important;
}

.profile-edit-pattern-color-trigger {
  position: relative !important;
  border: 0 !important;
  background: var(--profile-edit-pattern-color, #dbdada) !important;
  box-shadow: none !important;
}

.profile-edit-pattern-color-trigger__fill {
  position: absolute !important;
  inset: 6px !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
  background: var(--profile-edit-pattern-color, #dbdada) !important;
  box-shadow: 0 0 0 2px #08090b !important;
}

.profile-pattern-picker-layer.is-closing {
  pointer-events: none !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-backdrop {
  opacity: 1 !important;
  animation: profile-nft-backdrop-out 180ms ease forwards !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-sheet {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  animation: profile-nft-menu-out 180ms ease forwards !important;
}

.profile-pattern-picker-sheet {
  right: clamp(12px, var(--profile-pattern-panel-right, 12px), 18px) !important;
  width: min(348px, calc(100vw - 24px)) !important;
  max-height: min(236px, calc(100dvh - var(--profile-pattern-panel-top, 296px) - 18px)) !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.profile-pattern-choice {
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
}

.profile-pattern-choice__preview {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  opacity: 1 !important;
  overflow: visible !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.profile-pattern-choice__preview img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 0.86 !important;
  pointer-events: none !important;
}

.profile-pattern-choice.is-active .profile-pattern-choice__preview img {
  opacity: 1 !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(255, 255, 255, 0.2)) !important;
}

.profile-pattern-choice__preview--empty {
  opacity: 0 !important;
}

@media (max-width: 359px) {
  .profile-pattern-picker-sheet {
    width: min(328px, calc(100vw - 20px)) !important;
    right: 10px !important;
    padding: 10px !important;
    gap: 5px !important;
  }
}

/* 2026-05-13 follow-up v3: smooth pattern emoji popover, edge warp, color editor buttons. */
@keyframes profile-pattern-popover-in {
  from {
    opacity: 0;
    transform: translate3d(0, -7px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes profile-pattern-popover-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -5px, 0) scale(0.985);
  }
}

.profile-pattern-picker-layer {
  contain: layout style paint !important;
}

.profile-pattern-picker-backdrop {
  will-change: opacity !important;
}

.profile-pattern-picker-sheet {
  width: min(348px, calc(100vw - 24px)) !important;
  right: clamp(12px, var(--profile-pattern-panel-right, 12px), 18px) !important;
  padding: 26px 12px 22px !important;
  max-height: min(248px, calc(100dvh - var(--profile-pattern-panel-top, 296px) - 18px)) !important;
  gap: 7px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  contain: content !important;
  will-change: transform, opacity !important;
  transform: translate3d(0, -7px, 0) scale(0.985) !important;
  animation: profile-pattern-popover-in 220ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%) !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-sheet {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  animation: profile-pattern-popover-out 190ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.profile-pattern-choice {
  --profile-pattern-edge-warp: 0;
  --profile-pattern-edge-shift: 0px;
  --profile-pattern-edge-scale-x: 1;
  --profile-pattern-edge-scale-y: 1;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
}

.profile-pattern-choice__preview {
  transform: translate3d(0, var(--profile-pattern-edge-shift), 0)
    scaleX(var(--profile-pattern-edge-scale-x))
    scaleY(var(--profile-pattern-edge-scale-y)) !important;
  transform-origin: center center !important;
  transition: transform 90ms linear !important;
  will-change: transform !important;
}

.profile-pattern-choice__preview img {
  opacity: 0 !important;
  transform: translate3d(0, 4px, 0) scale(0.96) !important;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.18, 0.84, 0.22, 1) !important;
}

.profile-pattern-choice.is-image-ready .profile-pattern-choice__preview img {
  opacity: 0.86 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.profile-pattern-choice.is-active.is-image-ready .profile-pattern-choice__preview img {
  opacity: 1 !important;
}

@media (max-width: 359px) {
  .profile-pattern-picker-sheet {
    width: min(328px, calc(100vw - 20px)) !important;
    padding: 24px 10px 20px !important;
    gap: 5px !important;
  }
}

.profile-color-editor__done,
.profile-color-editor__value,
.profile-gradient-stop {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.profile-gradient-stop.is-selected,
.profile-color-editor__done:active,
.profile-color-editor__value:active {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

.profile-color-editor__done {
  cursor: pointer !important;
}

.profile-color-editor__swatch,
.profile-gradient-stop__swatch {
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22) !important;
}

/* 2026-05-13 follow-up v4: solid pattern panel, stable edge distortion, non-flashing close, selected outline. */
.profile-pattern-picker-layer {
  contain: layout style !important;
}

.profile-pattern-picker-backdrop {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity 220ms ease !important;
  will-change: opacity !important;
}

.profile-pattern-picker-layer.is-open .profile-pattern-picker-backdrop {
  opacity: 1 !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-backdrop {
  opacity: 0 !important;
  animation: none !important;
}

.profile-pattern-picker-sheet {
  top: var(--profile-pattern-panel-top, 307px) !important;
  right: clamp(12px, var(--profile-pattern-panel-right, 12px), 18px) !important;
  width: min(348px, calc(100vw - 24px)) !important;
  max-height: min(248px, calc(100dvh - var(--profile-pattern-panel-top, 307px) - 18px)) !important;
  padding: 32px 12px 32px !important;
  border-radius: 17px 0 17px 17px !important;
  background: #1a1a1a !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  opacity: 0 !important;
  transform: translate3d(0, -7px, 0) scale(1) !important;
  transform-origin: 100% 0 !important;
  animation: none !important;
  transition:
    opacity 220ms cubic-bezier(0.18, 0.84, 0.22, 1),
    transform 220ms cubic-bezier(0.18, 0.84, 0.22, 1) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  contain: layout paint style !important;
  will-change: transform, opacity !important;
}

.profile-pattern-picker-layer.is-open .profile-pattern-picker-sheet {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-sheet {
  opacity: 0 !important;
  transform: translate3d(0, -7px, 0) scale(1) !important;
  animation: none !important;
  transition:
    opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.profile-pattern-choice {
  position: relative !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translate3d(0, 0, 0) !important;
  transition: filter 120ms ease !important;
}

.profile-pattern-choice.is-active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-pattern-choice.is-active::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 1px solid rgba(219, 218, 218, 0.78);
  border-radius: 9px;
  background: transparent;
  pointer-events: none;
}

.profile-pattern-choice__preview {
  transform: translate3d(0, var(--profile-pattern-edge-shift, 0px), 0)
    scaleX(var(--profile-pattern-edge-scale-x, 1))
    scaleY(var(--profile-pattern-edge-scale-y, 1)) !important;
  transform-origin: center center !important;
  transition: none !important;
  will-change: transform !important;
}

.profile-pattern-choice__preview img,
.profile-pattern-choice.is-active .profile-pattern-choice__preview img,
.profile-pattern-choice.is-active.is-image-ready .profile-pattern-choice__preview img {
  filter: brightness(0) invert(1) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.profile-pattern-choice.is-image-ready .profile-pattern-choice__preview img {
  opacity: 0.86 !important;
}

.profile-pattern-choice.is-active.is-image-ready .profile-pattern-choice__preview img {
  opacity: 1 !important;
}

@media (max-width: 359px) {
  .profile-pattern-picker-sheet {
    width: min(328px, calc(100vw - 20px)) !important;
    right: 10px !important;
    padding: 30px 10px 30px !important;
  }
}

.profile-pattern-choice.is-active .profile-pattern-choice__preview {
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2026-05-13 follow-up v5: plain scrolling pattern panel, draft pattern edits, black-background contrast. */
.profile-pattern-picker-sheet {
  top: var(--profile-pattern-panel-top, 295px) !important;
  max-height: min(248px, calc(100dvh - var(--profile-pattern-panel-top, 295px) - 18px)) !important;
  padding: 12px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(1) !important;
  animation: none !important;
  transition:
    opacity 230ms cubic-bezier(0.18, 0.84, 0.22, 1),
    transform 230ms cubic-bezier(0.18, 0.84, 0.22, 1) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  will-change: opacity, transform !important;
}

.profile-pattern-picker-layer.is-open .profile-pattern-picker-sheet {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

.profile-pattern-picker-layer.is-closing .profile-pattern-picker-sheet {
  opacity: 0 !important;
  transform: translate3d(0, -8px, 0) scale(1) !important;
  transition:
    opacity 230ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 230ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.profile-pattern-choice,
.profile-pattern-choice__preview {
  will-change: auto !important;
}

.profile-pattern-choice__preview {
  transform: none !important;
  transition: none !important;
}

.profile-pattern-choice__preview img,
.profile-pattern-choice.is-active .profile-pattern-choice__preview img,
.profile-pattern-choice.is-active.is-image-ready .profile-pattern-choice__preview img {
  transform: none !important;
  transition: opacity 180ms ease !important;
}

.profile-edit-pattern-trigger.has-pattern,
.profile-edit-pattern-trigger.has-pattern:active,
.profile-edit-pattern-trigger.has-pattern:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

.profile-edit-pattern-trigger__preview,
.profile-edit-pattern-trigger__preview img,
.profile-edit-pattern-trigger img {
  background: transparent !important;
  box-shadow: none !important;
}

.profile-edit-pattern-color-trigger {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  background: var(--profile-edit-pattern-color, #dbdada) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.profile-edit-pattern-color-trigger__fill {
  inset: 0 !important;
  background: var(--profile-edit-pattern-color, #dbdada) !important;
  box-shadow: none !important;
}

.profile-edit-pattern-color-trigger::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px solid #08090b;
  border-radius: 50%;
  pointer-events: none;
}

.case-nft-art.case-nft-art--pattern-black,
.profile-edit-screen .case-nft-art.case-nft-art--pattern-black,
.profile-edit-nft-card .case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(230, 230, 230, 0.72) !important;
  --case-nft-pattern-opacity: 0.94 !important;
  --case-nft-pattern-opacity-multiplier: 1.48 !important;
  --case-nft-pattern-brightness: 1.32 !important;
}


/* 2026-05-13 follow-up v6: final profile-pattern tuning. */
.profile-edit-pattern-color-trigger {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  flex: 0 0 30px !important;
}

.profile-edit-pattern-color-trigger__fill {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.profile-edit-pattern-color-trigger::after {
  inset: 6px !important;
}

.profile-pattern-choice:active,
.profile-pattern-picker-layer.is-closing .profile-pattern-choice:active {
  transform: translate3d(0, 0, 0) !important;
  filter: none !important;
}

.case-nft-art.case-nft-art--pattern-black,
.profile-edit-screen .case-nft-art.case-nft-art--pattern-black,
.profile-edit-nft-card .case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(218, 218, 218, 0.68) !important;
  --case-nft-pattern-opacity: 0.9 !important;
  --case-nft-pattern-opacity-multiplier: 1.4 !important;
  --case-nft-pattern-brightness: 1.24 !important;
}

/* 2026-05-13 follow-up v7: restore profile pattern layout, stabilize opacity slider, slightly darken Black background patterns. */
.profile-edit-pattern-color-trigger {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
}

.profile-edit-pattern-color-trigger__fill {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.profile-edit-pattern-color-trigger::after {
  inset: 5px !important;
}

.profile-pattern-opacity__range {
  touch-action: pan-x !important;
}

.case-nft-art.case-nft-art--pattern-black,
.profile-edit-screen .case-nft-art.case-nft-art--pattern-black,
.profile-edit-nft-card .case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(205, 205, 205, 0.62) !important;
  --case-nft-pattern-opacity: 0.84 !important;
  --case-nft-pattern-opacity-multiplier: 1.32 !important;
  --case-nft-pattern-brightness: 1.16 !important;
}


/* 2026-05-14: clean Stock/NM NFT upgrade animation. */
.profile-nft-detail-layer.is-upgrading .profile-nft-detail-backdrop,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__grabber,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__more,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__menu-scrim,
.profile-nft-detail-layer.is-upgrading .profile-nft-menu {
  pointer-events: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail-sheet,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail-sheet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail-sheet {
  animation: none !important;
  transform: translate3d(0, 0, 0) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__hero,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__hero,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__hero {
  overflow: hidden !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__title-block {
  bottom: 19px !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition {
  display: block !important;
  min-height: 1.05em !important;
  opacity: 1 !important;
}

.profile-nft-detail__edition.is-empty:not(.is-upgrade-ticking) {
  display: none;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) {
  opacity: 1 !important;
  transition: opacity 520ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrade-source-held .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art),
.profile-nft-detail-layer.is-upgrade-source-held .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) .case-nft-art__layer--item {
  opacity: 1 !important;
  transform: translateX(50%) !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art),
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) {
  opacity: 0 !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) .case-nft-art__layer--item,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) .case-nft-art__layer--item,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) .case-nft-art__layer--item {
  animation: none !important;
  transform-origin: center center !important;
  transition: opacity 520ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 520ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip {
  --profile-nft-upgrade-item-width-px: 148px;
  --profile-nft-upgrade-item-height-px: 148px;
  --profile-nft-upgrade-item-half-width-px: 74px;
  --profile-nft-upgrade-item-top-px: calc(var(--nft-detail-item-top-px, 30) * 1px);
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  perspective: 900px !important;
  transform: translateZ(0) !important;
  transition: opacity 420ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip {
  opacity: 1 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg-layer {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  transform: translateZ(0) !important;
  transition: opacity 420ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
  will-change: opacity !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg-layer.is-current {
  opacity: 1 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg-layer.is-entering,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg-layer.is-leaving {
  opacity: 0 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art {
  --case-nft-pattern-scale: 0.79 !important;
  --case-nft-pattern-y-spread: 0.66 !important;
  --case-nft-pattern-y-offset: -19.1% !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__detail-bleed-bg,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art::before,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__layer--item,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__fallback-copy {
  display: none !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__layer--background,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__pattern-field {
  inset: auto !important;
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__layer--background {
  z-index: 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__pattern-field {
  z-index: 2 !important;
  overflow: visible !important;
  opacity: 0 !important;
  transition: opacity 280ms ease !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art[data-nft-pattern-ready="true"] .case-nft-art__pattern-field,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art:not([data-nft-pattern-src]) .case-nft-art__pattern-field {
  opacity: 1 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__pattern-mark,
.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity)) !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__window {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  overflow: hidden !important;
  transform-style: preserve-3d !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__strip {
  position: relative !important;
  z-index: 5 !important;
  height: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: clamp(18px, 5vw, 28px) !important;
  padding: 0 calc(50% - var(--profile-nft-upgrade-item-half-width-px, 74px)) !important;
  box-sizing: border-box !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: transform !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__spacer {
  flex: 0 0 clamp(106px, 29vw, 142px) !important;
  width: clamp(106px, 29vw, 142px) !important;
  height: 1px !important;
  pointer-events: none !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__item {
  flex: 0 0 auto !important;
  width: var(--profile-nft-upgrade-item-width-px, 148px) !important;
  height: var(--profile-nft-upgrade-item-height-px, 148px) !important;
  max-width: var(--profile-nft-upgrade-item-width-px, 148px) !important;
  max-height: var(--profile-nft-upgrade-item-height-px, 148px) !important;
  margin-top: var(--profile-nft-upgrade-item-top-px, calc(var(--nft-detail-item-top-px, 30) * 1px)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: scale(1) !important;
  transform-origin: center center !important;
  overflow: visible !important;
  transition: opacity 220ms ease !important;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.3)) !important;
  will-change: opacity !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__model {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__fallback {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-fading .profile-nft-upgrade-strip__item.is-upgrade-final-side,
.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-side {
  opacity: 0 !important;
  transform: scale(1) !important;
  transition: opacity 420ms ease !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__info > .profile-nft-detail__row {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row:first-child .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row:first-child .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row:first-child .profile-nft-detail__value {
  opacity: 1 !important;
  transform: none !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__value {
  justify-content: flex-start !important;
  gap: 7px !important;
  overflow: visible !important;
}

.profile-nft-detail__value-text.is-upgrade-ticking,
.profile-nft-detail__edition.is-upgrade-ticking,
.profile-nft-detail__price.is-upgrade-ticking {
  position: relative !important;
  display: inline-block !important;
  min-height: 1.18em !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
}

.profile-nft-detail__value-text.is-upgrade-ticking {
  width: 100% !important;
}

.profile-nft-detail__price,
.profile-nft-detail__row--price .profile-nft-detail__value {
  overflow: visible !important;
  white-space: nowrap !important;
}

.profile-nft-detail__price.is-upgrade-ticking,
.profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line {
  display: inline-block !important;
  min-width: 7.2ch !important;
  width: 7.2ch !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.profile-nft-upgrade-text-line {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  will-change: transform, opacity !important;
}

.profile-nft-detail__value-text.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail__edition.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
}

.profile-nft-upgrade-text-line--out {
  animation: profile-nft-upgrade-text-out 360ms cubic-bezier(0.22, 0.74, 0.24, 1) forwards !important;
}

.profile-nft-upgrade-text-line--in {
  animation: profile-nft-upgrade-text-in 360ms cubic-bezier(0.22, 0.74, 0.24, 1) forwards !important;
}

@keyframes profile-nft-upgrade-text-out {
  0% { opacity: 1; transform: translate3d(0, 0, 0); }
  100% { opacity: 0; transform: translate3d(0, -12px, 0); }
}

@keyframes profile-nft-upgrade-text-in {
  0% { opacity: 0; transform: translate3d(0, 12px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance {
  opacity: 0 !important;
  transform: translate3d(0, -12px, 0) scale(0.94) !important;
  transform-origin: left center !important;
  transition: opacity 520ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 520ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
  animation: none !important;
  will-change: opacity, transform !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__chance.is-upgrade-visible,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__chance.is-upgrade-visible,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance.is-upgrade-visible {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  animation: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__chance.is-upgrade-hidden,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__chance.is-upgrade-hidden,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance.is-upgrade-hidden {
  opacity: 0 !important;
  transform: translate3d(0, -12px, 0) scale(0.94) !important;
  animation: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet {
  transform-origin: center center !important;
  transition: opacity 560ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 560ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
  animation: none !important;
  will-change: opacity, transform !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden {
  opacity: 0 !important;
  transform: translate3d(0, 22px, 0) scale(0.78) !important;
  animation: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  animation: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  transition: grid-template-columns 860ms cubic-bezier(0.2, 0.84, 0.2, 1), gap 860ms cubic-bezier(0.2, 0.84, 0.2, 1) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade .profile-nft-detail__sell,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade .profile-nft-detail__sell,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade .profile-nft-detail__sell {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade:disabled,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade:disabled,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade:disabled {
  min-width: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__sell:disabled,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__sell:disabled,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__sell:disabled {
  opacity: 1 !important;
  color: #ffffff !important;
  filter: none !important;
}

@media (max-width: 420px) {
  .profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__strip {
    gap: clamp(16px, 4.8vw, 24px) !important;
  }

  .profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__spacer {
    flex-basis: clamp(96px, 27vw, 132px) !important;
    width: clamp(96px, 27vw, 132px) !important;
  }
}

@media (max-width: 389px) {
  .profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art {
    --case-nft-pattern-y-offset: -18.2% !important;
  }
}

/* 2026-05-15: canonical Stock/NM NFT upgrade overrides. Keep this block as the single late-stage override for the upgrade flow. */
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__title-block {
  bottom: 19px !important;
  transform: translate3d(0, 0, 0) !important;
  animation: none !important;
  transition: transform 1120ms cubic-bezier(0.16, 0.86, 0.18, 1), opacity 620ms ease !important;
  will-change: transform, opacity !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__edition {
  display: block !important;
  min-height: 1.08em !important;
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity 420ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__edition.is-upgrade-empty,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__edition.is-upgrade-empty,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition.is-upgrade-empty,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__edition.is-upgrade-empty,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__edition.is-empty,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__edition.is-empty,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition.is-empty,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__edition.is-empty {
  color: transparent !important;
  opacity: 0 !important;
}

.profile-nft-detail-layer.is-upgrade-source-held .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) {
  transform: translate3d(0, 0, 0) !important;
  opacity: 1 !important;
}

.profile-nft-detail-layer.is-upgrade-source-held .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) .case-nft-art__layer--item {
  opacity: 1 !important;
  transform: translate3d(46%, 0, 0) !important;
  transition: transform 920ms cubic-bezier(0.18, 0.82, 0.22, 1), opacity 720ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
  will-change: transform, opacity !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art),
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art),
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__hero > .case-nft-art--profile-detail:not(.profile-nft-upgrade-bg-art) {
  opacity: 0 !important;
  transform: translate3d(0, 0, 0) !important;
  transition: opacity 720ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip {
  transition: opacity 620ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrade-settling .profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip {
  opacity: 0 !important;
  transition: opacity 520ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-roulette__bg-layer {
  transition: opacity 680ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art {
  background: transparent !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0.14)) !important;
  pointer-events: none !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__layer--background {
  display: block !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  opacity: 1 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-bg-art .case-nft-art__pattern-field {
  display: block !important;
  inset: auto !important;
  left: calc(var(--nft-detail-bg-x, 50) * 1%) !important;
  top: calc(var(--nft-detail-bg-y, -4) * 1%) !important;
  width: calc(var(--nft-detail-bg-size-vw, 112) * 1vw) !important;
  height: calc(var(--nft-detail-bg-height-vw, var(--nft-detail-bg-size-vw, 112)) * 1vw) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
  overflow: visible !important;
}

.case-nft-art.case-nft-art--pattern-black,
.profile-edit-screen .case-nft-art.case-nft-art--pattern-black,
.profile-edit-nft-card .case-nft-art.case-nft-art--pattern-black,
.profile-collection-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-detail__hero .case-nft-art--profile-detail.case-nft-art--pattern-black,
.case-prize-card .case-nft-art.case-nft-art--pattern-black,
.case-result-card .case-nft-art.case-nft-art--pattern-black,
.profile-nft-upgrade-roulette--strip .case-nft-art.case-nft-art--pattern-black {
  --case-nft-pattern-color: rgba(132, 132, 132, 0.42) !important;
  --case-nft-pattern-opacity: 0.62 !important;
  --case-nft-pattern-opacity-multiplier: 1.06 !important;
  --case-nft-pattern-brightness: 0.94 !important;
}

.profile-nft-upgrade-roulette--strip .profile-nft-upgrade-strip__model {
  padding: 0 !important;
  transform: none !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item {
  opacity: 0 !important;
  transition: opacity 180ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 180ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-winner,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row:first-child .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row:first-child .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row:first-child .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row:first-child .profile-nft-detail__value {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__value {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 50px) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__value-text.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__value-text.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__value-text.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__value-text.is-upgrade-ticking {
  width: min(var(--profile-nft-upgrade-text-width, 178px), calc(100% - 50px)) !important;
  max-width: calc(100% - 50px) !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 32px !important;
  max-width: none !important;
  justify-self: auto !important;
  transform-origin: left center !important;
  transition: opacity 720ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 720ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__chance.is-upgrade-hidden,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__chance.is-upgrade-hidden,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance.is-upgrade-hidden,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__chance.is-upgrade-hidden {
  opacity: 0 !important;
  transform: translate3d(0, 8px, 0) scale(0.96) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__chance.is-upgrade-visible,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__chance.is-upgrade-visible,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance.is-upgrade-visible,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__chance.is-upgrade-visible {
  opacity: 1 !important;
  transform: translate3d(0, 2px, 0) scale(1) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__value,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__value {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__price,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__price,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__price,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__price {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__price.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__price.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__price.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__price.is-upgrade-ticking,
.profile-nft-detail-layer.is-upgrading .profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line {
  width: var(--profile-nft-upgrade-price-text-width-px, auto) !important;
  min-width: var(--profile-nft-upgrade-price-text-width-px, 0px) !important;
  max-width: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet {
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  justify-self: auto !important;
  translate: 0 0 !important;
  transform-origin: center center !important;
  transition: opacity 680ms cubic-bezier(0.18, 0.82, 0.22, 1), transform 680ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-hidden {
  opacity: 0 !important;
  transform: translate3d(0, 18px, 0) scale(0.78) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition-delay: 120ms !important;
}

.profile-nft-detail__upgrade-tet.is-upgrade-action-currency-source-hidden {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

.profile-nft-upgrade-action-currency-ghost {
  position: fixed !important;
  z-index: 2147483647 !important;
  left: var(--profile-nft-upgrade-action-icon-left, 0px) !important;
  top: var(--profile-nft-upgrade-action-icon-top, 0px) !important;
  width: var(--profile-nft-upgrade-action-icon-size, 16px) !important;
  height: var(--profile-nft-upgrade-action-icon-size, 16px) !important;
  object-fit: contain !important;
  pointer-events: none !important;
  opacity: 1 !important;
  translate: 0 0 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition: transform 620ms cubic-bezier(0.18, 0.82, 0.22, 1), opacity 620ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
  will-change: transform, opacity !important;
}

.profile-nft-upgrade-action-currency-ghost.is-dropping {
  opacity: 0 !important;
  transform: translate3d(0, 34px, 0) scale(0.74) !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet {
  opacity: 0 !important;
  transform: translate3d(0, 24px, 0) scale(0.8) !important;
  transition: opacity 90ms linear, transform 520ms cubic-bezier(0.18, 0.82, 0.22, 1) !important;
}

.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__info > .profile-nft-detail__row,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet {
  animation: none !important;
}



/* 2026-05-15: NFT upgrade price/title settle refinements. */
.profile-nft-detail__price .profile-nft-detail__price-decimal,
.profile-nft-detail__price.is-upgrade-ticking .profile-nft-detail__price-decimal,
.profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line .profile-nft-detail__price-decimal {
  margin-left: 1px !important;
  color: rgba(255, 255, 255, 0.62) !important;
  font-size: 0.86em !important;
  line-height: 1 !important;
  vertical-align: baseline !important;
}

.profile-nft-detail__price.is-upgrade-ticking .profile-nft-upgrade-text-line {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__value-text {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  letter-spacing: -0.018em !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__value-text.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__value-text.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__value-text.is-upgrade-ticking .profile-nft-upgrade-text-line,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__value-text.is-upgrade-ticking .profile-nft-upgrade-text-line {
  overflow: visible !important;
  text-overflow: clip !important;
}


/* 2026-05-15: NFT upgrade final settle lock.
   Non-winning strip cards are hidden before commit, and normal final info rows share the
   same geometry as upgrade rows to avoid the last-frame title/chance nudge. */
.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-side,
.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-side-hidden {
  opacity: 0 !important;
  transform: translate3d(0, 4px, 0) scale(0.972) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-side-hidden {
  visibility: hidden !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-winner {
  opacity: 1 !important;
  visibility: visible !important;
  transform: scale(1) !important;
}

[data-profile-nft-detail-field="model"] .profile-nft-detail__value,
[data-profile-nft-detail-field="pattern"] .profile-nft-detail__value,
[data-profile-nft-detail-field="background"] .profile-nft-detail__value {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
}

[data-profile-nft-detail-field="model"] .profile-nft-detail__value-text,
[data-profile-nft-detail-field="pattern"] .profile-nft-detail__value-text,
[data-profile-nft-detail-field="background"] .profile-nft-detail__value-text {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 50px) !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  letter-spacing: -0.018em !important;
}

.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance {
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* 2026-05-15: NFT upgrade final micro-lock.
   Keep final title/edition/chance geometry identical during and after the commit pass. */
.profile-nft-detail-layer.is-open-settled .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__title-block,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__title-block {
  bottom: 19px !important;
  transform: translate3d(0, 0, 0) !important;
}

.profile-nft-detail__edition:not(.is-empty),
.profile-nft-detail-layer.is-open-settled .profile-nft-detail__edition:not(.is-empty),
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__edition:not(.is-empty),
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__edition:not(.is-empty) {
  display: block !important;
  min-height: 1.08em !important;
  transform: translate3d(0, 0, 0) !important;
}

[data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
[data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
[data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance {
  transform: translate3d(0, 2px, 0) scale(1) !important;
}

.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-settling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance {
  transition: none !important;
}

/* 2026-05-15: NFT upgrade currency and side-card motion correction.
   The upgrade-button currency now collapses with the button instead of using a drop ghost.
   The detail price currency keeps a fixed final price width before it reappears. */
.profile-nft-upgrade-action-currency-ghost {
  display: none !important;
}

.profile-nft-detail-layer.is-upgrading .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__actions--upgrade .profile-nft-detail__upgrade > .profile-nft-detail__upgrade-tet {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition: none !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__price,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__price,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__price {
  width: var(--profile-nft-upgrade-price-text-width-px, auto) !important;
  min-width: var(--profile-nft-upgrade-price-text-width-px, 0px) !important;
  max-width: none !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop {
  transition-delay: 0ms !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-side {
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

/* 2026-05-15: NFT upgrade final currency/chance/side fade smoothing.
   Currency waits for the final price text to settle; side cards fade longer; chance badges use the same slow reveal during rolling and final states. */
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrading [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-rolling [data-profile-nft-detail-field="background"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="model"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="pattern"] .profile-nft-detail__chance,
.profile-nft-detail-layer.is-upgrade-finalized [data-profile-nft-detail-field="background"] .profile-nft-detail__chance {
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-side {
  transition: opacity 680ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-final-side,
.profile-nft-upgrade-roulette.profile-nft-upgrade-roulette--strip.is-final-frame .profile-nft-upgrade-strip__item.is-upgrade-side-hidden {
  transform: translate3d(0, 4px, 0) scale(0.972) !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop {
  transition-delay: 0ms !important;
}


/* 2026-05-15: NFT upgrade price currency reveal lock.
   Reveal the detail price currency with the final model chance using the same smooth timing,
   while keeping its X position owned by the already reserved final price width. */
.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet {
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}

.profile-nft-detail-layer.is-upgrade-rolling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-finalized .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop,
.profile-nft-detail-layer.is-upgrade-settling .profile-nft-detail__row--price .profile-nft-detail__tet.is-upgrade-currency-pop {
  transition-delay: 0ms !important;
}

/* Profile collections and NFT collection picker */
.profile-collections-row {
  margin: 8px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-collections-row::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.profile-collection-chip {
  flex: 0 0 auto;
  max-width: 126px;
  min-width: 0;
  background: transparent !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.profile-collection-chip span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-collection-chip.is-active {
  background: rgba(255, 255, 255, 0.10) !important;
}

.profile-collection-chip--add {
  color: #dbdada;
}

.profile-screen.is-profile-patterns-hidden .profile-collection-card .case-nft-art__pattern-field,
.profile-screen.is-profile-patterns-hidden .profile-collection-card [data-nft-pattern-field] {
  display: none !important;
}

.profile-nft-collection-picker {
  position: absolute;
  z-index: 15;
  top: 278px;
  right: 22px;
  width: min(286px, calc(100% - 44px));
  min-height: 43px;
  padding: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 15px;
  background: #1A1A1A;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  animation: profile-nft-collection-picker-in 180ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
  scrollbar-width: none;
}


.profile-nft-menu[data-profile-nft-menu-size="4"] + .profile-nft-collection-picker {
  top: 264px;
}

.profile-nft-menu[data-profile-nft-menu-size="3"] + .profile-nft-collection-picker {
  top: 220px;
}

.profile-nft-menu[data-profile-nft-menu-size="2"] + .profile-nft-collection-picker {
  top: 176px;
}

.profile-nft-collection-picker::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.profile-nft-collection-chip {
  flex: 0 0 auto;
  max-width: 116px;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: #dbdada;
  font-size: 13px;
  line-height: 1;
  font-weight: 500;
}

.profile-nft-collection-chip.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
}

.profile-nft-collection-chip span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-nft-collection-picker__empty {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.2;
  padding: 0 4px;
  white-space: nowrap;
}

@keyframes profile-nft-collection-picker-in {
  from {
    opacity: 0;
    transform: translate3d(0, -7px, 0) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.profile-collection-grid.is-reordering {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.profile-collection-card.is-reorderable {
  touch-action: manipulation;
}

.profile-collection-card.is-hold {
  transform: translateY(-2px) scale(0.99);
  filter: brightness(1.08);
}

.profile-collection-card--placeholder {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0.42;
}

.profile-collection-card--drag-ghost {
  opacity: 0.96;
  transform-origin: center center;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.45));
}

.profile-collection-card.is-drag-source {
  pointer-events: none;
}

/* Settings: Other toggle */
.settings-toggle-row {
  width: 100%;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
}

.settings-toggle-row__label {
  min-width: 0;
  color: #cfcfcf;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settings-toggle {
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.settings-toggle.is-active {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.11);
}

.settings-toggle__thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #aaa6a6;
  transform: translateX(0);
  transition:
    transform 190ms cubic-bezier(0.18, 0.84, 0.22, 1),
    background 180ms ease;
}

.settings-toggle.is-active .settings-toggle__thumb {
  transform: translateX(16px);
  background: #ffffff;
}

@media (max-width: 389px) {
  .profile-nft-collection-picker {
    right: 18px;
    width: min(270px, calc(100% - 36px));
  }

  .profile-collection-chip {
    max-width: 108px;
  }
}

/* Profile collection name dialog */
.profile-collection-name-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.profile-collection-name-dialog-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}

.profile-collection-name-dialog__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.profile-collection-name-dialog {
  position: relative;
  z-index: 1;
  width: min(310px, calc(100vw - 36px));
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 18px;
  background: #1A1A1A;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  transform: translateY(8px) scale(0.98);
  transition: transform 180ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.profile-collection-name-dialog-layer.is-open .profile-collection-name-dialog {
  transform: translateY(0) scale(1);
}

.profile-collection-name-dialog-layer.is-invalid .profile-collection-name-dialog {
  animation: profile-collection-name-shake 180ms ease;
}

.profile-collection-name-dialog__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.profile-collection-name-dialog__input {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 11px;
  outline: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.profile-collection-name-dialog__input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.profile-collection-name-dialog__input-wrap {
  position: relative;
}

.profile-collection-name-dialog__input--with-counter {
  padding-right: 58px;
}

.profile-collection-name-dialog__counter {
  position: absolute;
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
  color: #707070;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.profile-collection-name-dialog__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-collection-name-dialog__actions--single {
  grid-template-columns: minmax(0, 1fr);
}

.profile-collection-name-dialog__button {
  min-height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #cfcfcf;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.profile-collection-name-dialog__button.is-primary {
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

@keyframes profile-collection-name-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
  70% { transform: translateX(5px); }
}

/* Settings other toggle alignment */
.settings-block--other {
  gap: 5px;
}

.settings-block--other h3 {
  margin-bottom: 0;
}

.settings-toggle-row {
  min-height: 32px;
  color: #cfcfcf;
}

.settings-toggle-row__label {
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settings-toggle {
  width: 32px;
  height: 18px;
  padding: 2px;
}

.settings-toggle__thumb {
  width: 12px;
  height: 12px;
}

.settings-toggle.is-active .settings-toggle__thumb {
  transform: translateX(14px);
}

.settings-toggle-row:active .settings-toggle {
  transform: scale(0.96);
}

@media (max-width: 389px) {
  .settings-toggle-row__label,
  .profile-collection-name-dialog__button,
  .profile-collection-name-dialog__input {
    font-size: 12px;
  }

  .settings-toggle-row {
    min-height: 29px;
  }
}

.settings-toggle {
  transition:
    transform 150ms cubic-bezier(0.18, 0.84, 0.22, 1),
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* Fix4: collections, settings checkbox, smooth picker close */
.profile-collection-chip {
  max-width: none !important;
  width: auto;
  touch-action: manipulation;
}

.profile-collection-chip[data-profile-collection-custom="true"] {
  touch-action: none;
}

.profile-collection-chip span,
.profile-nft-collection-chip span {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.profile-collections-row.is-reordering {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.profile-collection-chip.is-hold {
  transform: translateY(-1px) scale(0.99);
  filter: brightness(1.08);
}

.profile-collection-chip.is-drag-source {
  pointer-events: none;
}

.profile-collection-chip--placeholder {
  opacity: 0.38;
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.profile-collection-chip--drag-ghost {
  opacity: 0.96;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.42));
  transform-origin: center center;
}

.profile-collection-context-menu {
  position: fixed;
  z-index: 9998;
  min-width: 154px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border-radius: 15px;
  background: #1A1A1A;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.98);
  pointer-events: none;
  transform-origin: center bottom;
  transition:
    opacity 150ms ease,
    transform 170ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.profile-collection-context-menu.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.profile-collection-context-menu.is-closing {
  opacity: 0;
  transform: translate3d(0, 5px, 0) scale(0.98);
  pointer-events: none;
}

.profile-collection-context-menu__item {
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #dbdada;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
}

.profile-collection-context-menu__item:active {
  transform: scale(0.985);
  filter: brightness(0.92);
}

.profile-collection-context-menu__icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.profile-collection-grid.is-reordering {
  touch-action: none !important;
  overflow: visible;
}

.profile-collection-card.is-reorderable {
  touch-action: none !important;
}

.profile-collection-card--drag-ghost {
  transform-origin: center center;
}

.profile-collection-card--patterns-hidden .case-nft-art__pattern-field,
.profile-collection-card--patterns-hidden [data-nft-pattern-field] {
  display: none !important;
}

.profile-nft-collection-chip {
  max-width: none !important;
  width: auto;
  white-space: nowrap;
}

.profile-nft-collection-picker {
  width: min(320px, calc(100% - 44px));
  max-width: calc(100vw - 44px);
}

.profile-nft-collection-picker.is-closing {
  animation: profile-nft-collection-picker-out 170ms ease forwards !important;
  pointer-events: none;
}

@keyframes profile-nft-collection-picker-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -7px, 0) scale(0.98);
  }
}

.settings-block--other {
  gap: 8px !important;
}

.settings-hide-patterns-choice {
  width: 100%;
  justify-content: space-between !important;
  gap: 10px !important;
  padding-left: 10px !important;
  padding-right: 8px !important;
  text-align: left;
}

.settings-hide-patterns-choice__text {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  white-space: normal;
  line-height: 1.1;
}

.settings-hide-patterns-choice__check {
  flex: 0 0 auto;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
}

.settings-hide-patterns-choice__check img {
  width: 17px !important;
  height: 17px !important;
}

.settings-hide-patterns-choice.is-active {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.11) !important;
  color: #fff !important;
}

.settings-hide-patterns-choice.is-active .settings-hide-patterns-choice__check {
  opacity: 1 !important;
  border-color: rgba(112, 255, 120, 0.64) !important;
  background: rgba(112, 255, 120, 0.08) !important;
}

.settings-hide-patterns-choice.is-active .settings-hide-patterns-choice__check img {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.settings-hide-patterns-choice:not(.is-active) .settings-hide-patterns-choice__check img {
  opacity: 0 !important;
  transform: scale(0.7) !important;
}

/* Fix5: collection scroll/drag tuning and settings/menu visual polish */
.profile-collection-chip[data-profile-collection-custom="true"] {
  touch-action: pan-x !important;
}

.profile-collections-row.is-reordering .profile-collection-chip[data-profile-collection-custom="true"],
.profile-collections-row.is-reordering {
  touch-action: none !important;
}

.profile-collection-card.is-reorderable {
  touch-action: pan-y !important;
}

.profile-collection-grid.is-reordering .profile-collection-card.is-reorderable,
.profile-collection-grid.is-reordering {
  touch-action: none !important;
}

.profile-collection-card--drag-ghost,
.profile-collection-chip--drag-ghost {
  transition: filter 140ms ease, opacity 140ms ease;
  will-change: transform;
}

.settings-hide-patterns-choice {
  justify-content: center !important;
  gap: 6px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  color: #cfcfcf !important;
}

.settings-hide-patterns-choice__text {
  flex: 0 1 auto !important;
  min-width: 0;
  text-align: center !important;
  color: inherit !important;
  font: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
}

.settings-hide-patterns-choice__check {
  width: 21px !important;
  height: 21px !important;
  min-width: 21px !important;
  border-radius: 6px !important;
}

.settings-hide-patterns-choice__check img {
  width: 12px !important;
  height: 12px !important;
}

.settings-hide-patterns-choice.is-active {
  color: #fff !important;
}

.profile-collection-context-menu__item {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.profile-collection-context-menu__icon {
  width: 24px !important;
  height: 24px !important;
}

/* Fix6: collection menu click behavior, drag locks, profile editor collection filters */
body.is-profile-reordering {
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}

body.is-profile-reordering .app-main,
body.is-profile-reordering [data-screen-root="profile"] {
  touch-action: none !important;
}

.profile-collection-card.is-reorderable {
  touch-action: none !important;
}

.profile-collection-chip[data-profile-collection-custom="true"] {
  touch-action: pan-x !important;
}

.profile-collections-row.is-reordering,
.profile-collections-row.is-reordering .profile-collection-chip[data-profile-collection-custom="true"] {
  touch-action: none !important;
}

.profile-nft-collection-picker {
  animation-duration: 260ms !important;
  animation-timing-function: cubic-bezier(0.18, 0.84, 0.22, 1) !important;
}

.profile-nft-collection-picker.is-closing {
  animation: profile-nft-collection-picker-out 260ms cubic-bezier(0.18, 0.84, 0.22, 1) forwards !important;
}

@keyframes profile-nft-collection-picker-in {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.965);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes profile-nft-collection-picker-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -10px, 0) scale(0.965);
  }
}

.settings-hide-patterns-choice {
  justify-content: center !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.settings-hide-patterns-choice__text {
  flex: 0 1 auto !important;
  text-align: center !important;
}

.settings-hide-patterns-choice__check {
  display: none !important;
}

.profile-collection-context-menu__item.profile-nft-menu__item {
  min-height: 47px !important;
  padding: 0 16px 0 18px !important;
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font: inherit !important;
  text-align: left !important;
  letter-spacing: 0 !important;
}

.profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__text {
  color: inherit !important;
  font-size: 18px !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  white-space: normal !important;
}

.profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__icon {
  width: 24px !important;
  max-height: 32px !important;
}

.profile-edit-chips {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-edit-chips::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.profile-edit-chip {
  flex: 0 0 auto;
  max-width: none !important;
  gap: 5px;
  white-space: nowrap;
}

.profile-edit-chip span {
  display: block;
  white-space: nowrap;
}

.profile-edit-chip__icon {
  width: 1.05em;
  height: 1.05em;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Fix7: final collection drag, profile fields, profile editor search */
.profile-collection-chip--add {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.profile-collection-chip--add:active {
  background: rgba(255, 255, 255, 0.04) !important;
}

.profile-collection-context-menu.profile-nft-menu {
  width: min(205px, calc(100% - 56px));
  padding: 0;
  border-radius: 17px 0 17px 17px;
  overflow: hidden;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item {
  min-height: 45px !important;
  padding: 0 12px 0 15px !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  gap: 10px !important;
  color: #ffffff !important;
  font: inherit !important;
  background: transparent !important;
}

.profile-collection-context-menu .profile-nft-menu__text {
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  color: inherit !important;
  letter-spacing: 0 !important;
}

.profile-collection-context-menu .profile-nft-menu__icon {
  width: 23px !important;
  max-height: 30px !important;
}

.profile-edit-screen.is-profile-patterns-hidden .profile-edit-nft-card .case-nft-art__pattern-field,
.profile-edit-screen.is-profile-patterns-hidden .profile-edit-nft-card [data-nft-pattern-field] {
  display: none !important;
}

.profile-field__label {
  margin-top: 3px !important;
  color: #7a7a7a !important;
}

.profile-field__placeholder {
  color: #5b5b5b !important;
}

.profile-field__control {
  position: relative;
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-field__control--about {
  min-height: 58px;
  align-items: flex-start;
  padding: 9px 54px 9px 10px;
}

.profile-field__control--username {
  min-height: 38px;
  padding: 0 52px 0 10px;
}

.profile-field__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.profile-field__input::placeholder {
  color: #686868;
}

.profile-field__input--about {
  min-height: 40px;
  padding: 0;
  resize: none;
  overflow: hidden auto;
  color: #e4e4e4;
  font-size: 16px;
  line-height: 1.22;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.profile-field__input--username {
  padding: 0 0 0 8px;
  color: #397EEB;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}

.profile-field__username-prefix {
  flex: 0 0 auto;
  color: #397EEB;
  font-size: 16px;
  line-height: 1;
  font-weight: 500;
}

.profile-field__username-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  margin-left: 8px;
  background: rgba(57, 126, 235, 0.58);
}

.profile-field__counter {
  position: absolute;
  right: 10px;
  top: 8px;
  color: #707070;
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  pointer-events: none;
}

.profile-field__counter--username {
  top: 50%;
  transform: translateY(-50%);
}

.profile-field__rules {
  margin-top: 5px;
  display: grid;
  gap: 2px;
  color: #777777;
  font-size: 11px;
  line-height: 1.18;
}

.profile-field__rules span::before {
  content: '• ';
}

.profile-edit-search {
  cursor: text;
}

.profile-edit-search__input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: none;
  background: transparent;
  color: #dbdada;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
  -webkit-appearance: none;
  appearance: none;
}

.profile-edit-search__input::placeholder {
  color: #7e7e7e;
}

.profile-edit-nft-card[hidden] {
  display: none !important;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__text {
  font-size: 17px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  letter-spacing: 0 !important;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__icon {
  width: 23px !important;
  max-height: 30px !important;
}

/* Fix8: profile text dialogs, collection menu animation, and NFT scroll gestures */
.profile-field__button {
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: left;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.profile-field__button:active {
  filter: brightness(0.94);
}

.profile-field__control--about.profile-field__button {
  padding: 9px 10px;
}

.profile-field__control--username.profile-field__button {
  padding: 0 10px;
}

.profile-field__display {
  min-width: 0;
  color: #e4e4e4;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.profile-field__display--about {
  display: block;
  width: 100%;
  white-space: pre-wrap;
}

.profile-field__display--username {
  padding-left: 8px;
  color: #397EEB;
  line-height: 1;
  font-weight: 500;
}

.profile-field__display--username-placeholder,
.profile-field__button.is-placeholder .profile-field__display {
  color: #686868;
  font-size: 16px;
  line-height: 1.2;
}

.profile-text-dialog__input-wrap {
  position: relative;
}

.profile-text-dialog__input {
  padding-right: 60px;
}

.profile-collection-name-dialog__input--textarea {
  height: 86px;
  padding: 9px 11px 23px;
  resize: none;
  line-height: 1.25;
  overflow: hidden auto;
}

.profile-text-dialog__counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #707070;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.profile-text-dialog__input--username + .profile-text-dialog__counter {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.profile-text-dialog__rules {
  display: grid;
  gap: 3px;
  color: #777777;
  font-size: 11px;
  line-height: 1.18;
}

.profile-text-dialog__rules span::before {
  content: '• ';
}

.profile-collection-name-dialog__button.is-primary {
  border-color: rgba(148, 163, 184, 0.35) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  color: #cfcfcf !important;
}

.profile-collection-context-menu,
.profile-collection-context-menu.profile-nft-menu {
  border-radius: 17px !important;
  overflow: hidden;
  transform-origin: center bottom;
  transition:
    opacity 150ms ease,
    transform 170ms cubic-bezier(0.18, 0.84, 0.22, 1) !important;
}

.profile-collection-context-menu.is-open {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  pointer-events: auto !important;
}

.profile-collection-context-menu.is-closing {
  opacity: 0 !important;
  transform: translate3d(0, 5px, 0) scale(0.98) !important;
  pointer-events: none !important;
}

.profile-collection-card.is-reorderable {
  touch-action: pan-y !important;
}

.profile-collection-grid.is-reordering .profile-collection-card.is-reorderable,
.profile-collection-grid.is-reordering {
  touch-action: none !important;
}

.profile-field__button {
  font: inherit;
}


/* fix9: profile fields are display rows; editing happens only in dialog */
.profile-form {
  padding: clamp(18px, 4.8vw, 24px) clamp(17px, 4.4vw, 22px) clamp(14px, 3.6vw, 18px) !important;
}

.profile-field + .profile-field {
  margin-top: clamp(18px, 4.8vw, 24px) !important;
  padding-top: clamp(15px, 4vw, 20px) !important;
}

.profile-field__button,
.profile-field__control--about.profile-field__button,
.profile-field__control--username.profile-field__button {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}

.profile-field__button:active {
  filter: brightness(0.88) !important;
}

.profile-field__display,
.profile-field__display--about,
.profile-field__display--username,
.profile-field__display--username-placeholder {
  display: block !important;
  padding: 0 !important;
  font-size: clamp(18px, 4.8vw, 23px) !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere;
}

.profile-field__display--about,
.profile-field__display--username-placeholder,
.profile-field__button.is-placeholder .profile-field__display {
  color: #696969 !important;
}

.profile-field__display--username {
  color: #3f8cff !important;
  font-weight: 500 !important;
}

.profile-field__label {
  margin-top: clamp(8px, 2.2vw, 11px) !important;
  color: #d4d4d4 !important;
  font-size: clamp(18px, 4.8vw, 23px) !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
}

.profile-field__rules,
.profile-field__username-prefix,
.profile-field__username-divider {
  display: none !important;
}

.profile-text-dialog__username-field {
  min-height: 34px;
  width: 100%;
  padding: 0 60px 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.45);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.profile-text-dialog__username-prefix,
.profile-text-dialog__username-divider {
  display: inline-block !important;
  color: #c1c1c1;
  opacity: 0.92;
}

.profile-text-dialog__username-prefix {
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}

.profile-text-dialog__username-divider {
  width: 2px;
  height: 18px;
  border-radius: 999px;
  background: #c1c1c1;
  opacity: 0.68;
}

.profile-text-dialog__username-input {
  min-width: 0;
  width: 100%;
  height: 32px;
  padding: 0 !important;
  border: 0 !important;
  outline: none;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.profile-text-dialog__username-input::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

.profile-text-dialog__username-field + .profile-text-dialog__counter {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* fix10: restore compact profile info rows and make menu feedback immediate */
.profile-form {
  margin-top: 14px !important;
  padding: 14px 16px 10px !important;
  border-radius: 20px !important;
}

.profile-field + .profile-field {
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.profile-field__button,
.profile-field__control.profile-field__button,
.profile-field__control--about.profile-field__button,
.profile-field__control--username.profile-field__button {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: block !important;
  text-align: left !important;
  cursor: pointer !important;
}

.profile-field__display,
.profile-field__display--about,
.profile-field__display--username,
.profile-field__display--username-placeholder {
  display: block !important;
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

.profile-field__display--about {
  color: #eeeeee !important;
}

.profile-field__display--username-placeholder,
.profile-field__button.is-placeholder .profile-field__display {
  color: #666666 !important;
}

.profile-field__display--username {
  color: #397EEB !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.profile-field__label {
  margin-top: 3px !important;
  color: #c1c1c1 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.profile-collection-context-menu {
  min-width: 154px !important;
  width: auto !important;
  padding: 6px !important;
  gap: 2px !important;
  border-radius: 15px !important;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item {
  min-height: 36px !important;
  padding: 0 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__text {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

.profile-collection-context-menu .profile-collection-context-menu__item.profile-nft-menu__item .profile-nft-menu__icon,
.profile-collection-context-menu__icon {
  width: 22px !important;
  height: 22px !important;
  max-height: 22px !important;
}

.profile-nft-menu__icon,
.profile-nft-menu__text {
  transition:
    transform 90ms cubic-bezier(0.34, 0, 0.2, 1),
    opacity 90ms ease,
    filter 90ms ease !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__icon,
.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__text {
  animation-duration: 90ms !important;
}

.profile-nft-menu__item.is-status-changing-in .profile-nft-menu__active-bg {
  animation-duration: 90ms !important;
}

/* follow-up 2026-05-17: shared input-style dialogs and Contract mode */
.profile-collection-name-dialog-layer.is-closing {
  opacity: 0;
  pointer-events: none;
}

.profile-collection-name-dialog-layer.is-closing .profile-collection-name-dialog {
  transform: translateY(8px) scale(0.98);
}

.app-message-dialog-layer {
  z-index: 260;
}

.app-message-dialog-layer .profile-collection-name-dialog,
.profile-collection-name-dialog.app-message-dialog,
.profile-collection-name-dialog.app-message-dialog.slot-help,
.profile-collection-name-dialog.app-message-dialog.ring-help,
.profile-collection-name-dialog.app-message-dialog.cases-help {
  width: min(310px, calc(100vw - 36px));
  padding: 14px;
  gap: 10px;
  border-radius: 18px;
  background: #1A1A1A;
  border: 0;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
  color: #fff;
  max-height: min(78vh, 520px);
  overflow: hidden auto;
}

.app-message-dialog__body {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.app-message-dialog__body p {
  margin: 0;
}

.app-message-dialog__subtitle {
  margin-top: 2px !important;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}

.app-message-dialog.slot-help .slot-help__combo-grid {
  margin-top: 2px;
  display: grid;
  gap: 7px;
}

.app-message-dialog.slot-help .slot-help__combo-row {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(148, 163, 184, 0.16);
}

.app-message-dialog.slot-help .slot-help__combo-icons {
  display: flex;
  align-items: center;
  gap: 2px;
}

.app-message-dialog.slot-help .slot-help__combo-symbol {
  width: 21px;
  height: 21px;
  object-fit: contain;
}

.app-message-dialog.slot-help .slot-help__combo-value {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
}

.contract-screen {
  position: relative;
  min-height: 100%;
  background: var(--app-bg);
}

.app-main.is-contract-animation-active {
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
  overscroll-behavior: contain;
  touch-action: none;
}

.contract-screen__content {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  padding: 2px 15px calc(24px + env(safe-area-inset-bottom));
  display: grid;
  gap: 6px;
}

.contract-selector {
  width: 100%;
  margin-bottom: 0;
  min-height: 112px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 220ms ease, background-color 220ms ease, color 220ms ease, opacity 220ms ease, transform 220ms ease;
  animation: contract-ui-panel-enter 240ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-screen.is-contract-running .contract-selector {
  position: relative;
  z-index: 10000;
}

.contract-screen.is-contract-running .contract-selector.is-contract-flight-active {
  overflow: visible;
}

.contract-screen.is-contract-running .contract-selector.is-contract-flight-active .contract-selector__stack {
  overflow: visible;
}

.contract-selector--empty {
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  line-height: 1.1;
  font-weight: 540;
  letter-spacing: -0.03em;
}

.contract-selector__placeholder-line {
  animation: contract-text-soft-enter 260ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-selector__placeholder-line:nth-child(2) {
  animation-delay: 42ms;
}

.contract-selector--filled {
  justify-content: stretch;
  padding: 0;
}

.contract-selector__stack {
  position: relative;
  width: 100%;
  height: 110px;
  display: block;
  isolation: isolate;
}

.contract-selector[data-contract-layout="spread"] .contract-selector__stack {
  display: grid;
  grid-template-columns: repeat(var(--contract-selected-count), minmax(0, 1fr));
}

.contract-selector[data-contract-layout="overlap"] .contract-selector__stack {
  overflow: hidden;
}

.contract-selected-card {
  position: absolute;
  inset: 0 auto 0 0;
  left: calc(var(--contract-selected-index) * var(--contract-selected-step, 0%));
  width: var(--contract-selected-width, 100%);
  height: 100%;
  z-index: var(--contract-selected-z-index, 1);
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
  transform-origin: center center;
  transition: opacity 240ms ease, transform 260ms ease, border-radius 260ms ease;
  animation: contract-selected-card-enter 240ms ease-in-out both;
}

.contract-selected-card.is-contract-flying {
  pointer-events: none;
  border-radius: 0;
  will-change: transform, opacity, border-radius;
  transition: transform 700ms cubic-bezier(0.8, 0, 0.2, 1), opacity 160ms ease, border-radius 700ms ease;
}

.contract-selector[data-contract-layout="spread"] .contract-selected-card {
  position: relative;
  left: auto;
  width: auto;
}

.contract-selected-card:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.contract-selected-card:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.contract-selected-card.is-contract-flying,
.contract-selected-card.is-contract-flying:first-child,
.contract-selected-card.is-contract-flying:last-child,
.contract-selected-card.is-contract-flying .case-nft-art,
.contract-selected-card.is-contract-flying .case-nft-art__layer,
.contract-selected-card.is-contract-flying .case-nft-art__pattern-field {
  border-radius: 0 !important;
}

.contract-selected-card.is-lifted,
.contract-selected-card.is-consumed {
  opacity: 0;
  visibility: hidden;
  transform: none;
  transition: none;
}

.contract-selected-card .case-nft-art,
.contract-picker-card .case-nft-art,
.contract-cube-thumb .case-nft-art,
.contract-cube__face-content .case-nft-art {
  width: 100%;
  height: 100%;
}

.case-nft-art--contract-selected,
.contract-picker-card .case-nft-art {
  border-radius: 12px;
}

.contract-selected-card .case-nft-art {
  border-radius: inherit;
}

.case-nft-art--contract-selected .case-nft-art__layer--item,
.case-nft-art--contract-picker .case-nft-art__layer--item,
.case-nft-art--contract-cube-result .case-nft-art__layer--item {
  padding: 13.5%;
}

.case-nft-art--contract-selected.case-nft-art--transparent .case-nft-art__layer--item,
.case-nft-art--contract-picker.case-nft-art--transparent .case-nft-art__layer--item,
.case-nft-art--contract-cube-result.case-nft-art--transparent .case-nft-art__layer--item {
  padding: 6%;
}

.case-nft-art--contract-selected .case-nft-art__pattern-mark--custom,
.case-nft-art--contract-picker .case-nft-art__pattern-mark--custom,
.case-nft-art--contract-cube-result .case-nft-art__pattern-mark--custom {
  opacity: var(--case-nft-pattern-opacity-layer, var(--case-nft-pattern-opacity));
}

.contract-attribute-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
  align-items: start;
  width: 100%;
  margin-top: -3px;
  margin-bottom: -18px;
}

.contract-attribute {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.contract-attribute__circle {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: transparent;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color 240ms ease-in-out, background-color 240ms ease-in-out, transform 240ms ease-in-out, opacity 240ms ease-in-out, filter 240ms ease-in-out;
}

.contract-attribute:not(.contract-attribute--empty) .contract-attribute__circle {
  animation: contract-attribute-pop 280ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-attribute:not(.contract-attribute--empty) .contract-attribute__chance {
  animation: contract-text-soft-enter 260ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-attribute__circle--background .contract-attribute__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contract-attribute__circle--pattern {
  background: transparent;
}

.contract-attribute__circle--pattern .contract-attribute__image {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.contract-attribute__chance {
  min-height: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  line-height: 1;
  font-weight: 520;
  letter-spacing: -0.02em;
}

.contract-attribute--empty .contract-attribute__circle {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.26);
}

.contract-attribute.is-leaving {
  pointer-events: none;
  animation: contract-attribute-out 160ms ease-in both;
}

.contract-attribute.is-entering,
.contract-attribute.is-empty-entering {
  animation: contract-attribute-pop 260ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-attribute__chance.is-changing {
  opacity: 0;
  transform: translateY(2px);
}

.contract-playfield {
  position: relative;
  z-index: 0;
  min-height: 308px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.contract-action-button {
  position: relative;
  z-index: 12;
  margin-top: -2px;
}

.contract-summary {
  position: relative;
  z-index: 14;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  margin-top: 0;
  padding: 13px 14px 12px;
  border-radius: 16px;
  background: transparent;
  animation: contract-ui-panel-enter 240ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(34, 34, 34, 0.99), rgba(24, 24, 24, 0.99));
  pointer-events: none;
}

.contract-summary > * {
  position: relative;
  z-index: 1;
}

.contract-summary__title {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 24px;
  line-height: 1;
  font-weight: 690;
  letter-spacing: -0.042em;
}

.contract-summary__rows {
  margin-top: 8px;
  display: grid;
  gap: 2px;
}

.contract-summary__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 16px;
  line-height: 1.08;
  font-weight: 430;
  letter-spacing: -0.03em;
  animation: contract-text-soft-enter 260ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-summary__row:nth-child(2) { animation-delay: 24ms; }
.contract-summary__row:nth-child(3) { animation-delay: 48ms; }
.contract-summary__row:nth-child(4) { animation-delay: 72ms; }
.contract-summary__row:nth-child(5) { animation-delay: 96ms; }

.contract-summary__row b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 450;
}

.contract-summary__row img,
.contract-result-line__icon {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

.contract-result-lines {
  margin-top: 9px;
  display: grid;
  gap: 3px;
}

.contract-result-line {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  line-height: 1.16;
  font-weight: 420;
  letter-spacing: -0.02em;
  animation: contract-text-soft-enter 260ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

.contract-result-line:nth-child(2) { animation-delay: 28ms; }
.contract-result-line:nth-child(3) { animation-delay: 56ms; }
.contract-result-line:nth-child(4) { animation-delay: 84ms; }
.contract-result-line:nth-child(5) { animation-delay: 112ms; }
.contract-result-line:nth-child(6) { animation-delay: 140ms; }

.contract-result-line--failed {
  margin-top: 9px;
  color: rgba(255, 140, 140, 0.84);
  font-weight: 430;
}

.contract-result-line__label {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 420;
}

.contract-summary__value,
.contract-result-line__value,
.contract-result-line__currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.contract-result-line__value {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 450;
}

.contract-result-line__currency {
  white-space: nowrap;
}

.contract-summary__value--range {
  gap: 3px;
}

.contract-summary__range-separator {
  margin: 0 1px;
  color: rgba(255, 255, 255, 0.46);
}

.contract-result-line__icon {
  margin-left: 0;
  vertical-align: -2px;
  flex: 0 0 auto;
}

.contract-picker-layer {
  z-index: 270;
}

.contract-picker.profile-collection-name-dialog {
  width: min(380px, calc(100vw - 28px));
  max-height: min(76vh, 620px);
  overflow: visible;
}

.contract-picker__hint {
  margin: -2px 0 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.18;
  font-weight: 550;
  letter-spacing: -0.02em;
}

.contract-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 8px;
  max-height: min(46vh, 360px);
  overflow: hidden auto;
  padding: 14px 14px 16px;
  margin: 0 -8px;
  scrollbar-width: none;
}

.contract-picker__grid::-webkit-scrollbar {
  display: none;
}

.contract-picker-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  padding: 0;
}

.contract-picker-card__art {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: visible;
  transition: transform 220ms ease, filter 220ms ease;
}

.contract-picker-card.is-selected .contract-picker-card__art {
  transform: scale(0.97);
  filter: drop-shadow(0 0 6px rgba(87, 217, 143, 0.5));
}

.contract-picker-card.is-selected .case-nft-art {
  box-shadow: 0 0 0 1.5px rgba(87, 217, 143, 0.76), 0 0 8px rgba(87, 217, 143, 0.34);
}

.contract-picker-card:disabled {
  opacity: 0.34;
}


.contract-picker__actions .profile-collection-name-dialog__button:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.contract-picker__empty {
  grid-column: 1 / -1;
  min-height: 120px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
  font-weight: 600;
}

.contract-cube-scene {
  position: relative;
  z-index: 0;
  width: 150px;
  height: 150px;
  perspective: 1200px;
  opacity: 0;
  transform: translateY(var(--contract-cube-enter-y, 240px)) scale(0.94);
  transition: transform 920ms cubic-bezier(0.8, 0, 0.2, 1), opacity 780ms ease;
}

.contract-cube-scene.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contract-cube-scene.is-exit {
  opacity: 0;
  transform: translateY(var(--contract-cube-exit-y, 240px)) scale(0.94);
}

.contract-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(0.8, 0, 0.2, 1);
}

.contract-cube__face {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.115);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, 0.055),
    inset 0 0 26px rgba(0, 0, 0, 0.38),
    0 0 18px rgba(255, 255, 255, 0.055);
  transition: box-shadow 520ms ease, border-color 520ms ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.contract-cube__face--front { transform: rotateY(0deg) translateZ(75px); }
.contract-cube__face--right { transform: rotateY(90deg) translateZ(75px); }
.contract-cube__face--back { transform: rotateY(180deg) translateZ(75px); }
.contract-cube__face--left { transform: rotateY(-90deg) translateZ(75px); }
.contract-cube__face--top { transform: rotateX(90deg) translateZ(75px); }
.contract-cube__face--bottom { transform: rotateX(-90deg) translateZ(75px); }

.contract-cube__face.is-success {
  box-shadow: inset 0 0 34px rgba(87, 217, 143, 0.42), 0 0 22px rgba(87, 217, 143, 0.22);
  border-color: rgba(87, 217, 143, 0.58);
}

.contract-cube__face.is-low {
  box-shadow: inset 0 0 34px rgba(255, 196, 87, 0.36), 0 0 20px rgba(255, 196, 87, 0.18);
  border-color: rgba(255, 196, 87, 0.52);
}

.contract-cube__face.is-failure {
  box-shadow: inset 0 0 40px rgba(244, 67, 54, 0.54), 0 0 22px rgba(244, 67, 54, 0.28);
  border-color: rgba(244, 67, 54, 0.72);
}

.contract-cube__face-content {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: hidden;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.8, 0, 0.2, 1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.contract-cube__face-content.is-filled,
.contract-cube__face-content.is-result {
  opacity: 1;
}

.contract-cube__face-content.is-dissolving {
  opacity: 0;
  transform: scale(0.86);
}

.contract-cube-thumb {
  position: fixed;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  transform-origin: center center;
  will-change: transform, opacity, border-radius;
  transition: transform 700ms cubic-bezier(0.8, 0, 0.2, 1), opacity 160ms ease, border-radius 700ms ease;
}

.contract-cube-thumb.is-visible {
  opacity: 1;
}

.contract-cube-thumb.is-flying {
  border-radius: 0;
}

.contract-cube-thumb.is-flying .case-nft-art,
.contract-cube-thumb.is-flying .contract-selected-card,
.contract-cube__face-content .case-nft-art,
.contract-cube__face-content .contract-selected-card {
  border-radius: 0 !important;
}

.contract-cube-thumb .contract-selected-card,
.contract-cube__face-content .contract-selected-card {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
}

.contract-cube-thumb .case-nft-art,
.contract-cube-thumb .case-nft-art__layer,
.contract-cube-thumb .case-nft-art__pattern-field,
.contract-cube__face-content .case-nft-art,
.contract-cube__face-content .case-nft-art__layer,
.contract-cube__face-content .case-nft-art__pattern-field {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.contract-cube-result {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.contract-cube-result--currency {
  gap: 7px;
  align-content: center;
  background: radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 58%, transparent 72%);
}

.contract-cube-result__currency-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.contract-cube-result__amount {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.contract-cube-result--failure {
  background: radial-gradient(circle at 50% 50%, rgba(244, 67, 54, 0.16), rgba(244, 67, 54, 0.035) 58%, transparent 72%);
}

.contract-cube-result__cross {
  width: 82px;
  height: 82px;
  opacity: 0;
  animation: contract-cube-cross-fade 760ms cubic-bezier(0.8, 0, 0.2, 1) 70ms both;
}

.contract-cube-result__cross line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: contract-cube-cross-draw 760ms cubic-bezier(0.8, 0, 0.2, 1) 90ms both;
}

.case-nft-art--contract-cube-result {
  border-radius: 0;
}

@media (max-width: 389px) {
  .contract-screen__content {
    padding-top: 8px;
    gap: 6px;
  }

  .contract-selector {
    min-height: 106px;
  }

  .contract-selector__stack {
    height: 104px;
  }

  .contract-attribute__circle {
    width: 25px;
    height: 25px;
  }

  .contract-playfield {
    min-height: 282px;
  }

  .contract-summary__title {
    font-size: 22px;
  }

  .contract-summary__row {
    font-size: 15px;
  }
}

@keyframes contract-selected-card-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes contract-attribute-pop {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes contract-text-soft-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contract-ui-panel-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes contract-attribute-out {
  from { opacity: 1; transform: scale(1); filter: blur(0); }
  to { opacity: 0; transform: scale(0.78); filter: blur(1px); }
}

@keyframes contract-cube-cross-fade {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes contract-cube-cross-draw {
  to { stroke-dashoffset: 0; }
}

.app-message-dialog-layer.is-open .app-message-dialog,
.contract-picker-layer.is-open .contract-picker {
  animation: app-message-dialog-enter 180ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
}

@keyframes app-message-dialog-enter {
  from { transform: translateY(8px) scale(0.98); }
  to { transform: translateY(0) scale(1); }
}

/* 2026-05-19: Rocket game mode, slot/ring shell parity with crash-flight playfield. */
.rocket-screen {
  --rocket-craft-x: -8%;
  --rocket-craft-y: 88%;
  --rocket-trail-opacity: 0;
  --rocket-trail-visibility: hidden;
}

.rocket-screen .ring-header-panel__title {
  letter-spacing: -0.045em;
}

.rocket-playfield {
  min-height: 0;
  height: clamp(300px, 78vw, 344px);
  border-color: rgba(148, 163, 184, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(255, 255, 255, 0.008));
  isolation: isolate;
}

.rocket-playfield::before {
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 34%, rgba(0, 0, 0, 0.36) 100%);
  opacity: 1;
}

.rocket-space-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 560ms cubic-bezier(0.16, 1, 0.3, 1);
  background:
    radial-gradient(circle at 50% -10%, rgba(68, 134, 255, 0.18), transparent 38%),
    radial-gradient(circle at 50% 120%, rgba(35, 198, 111, 0.08), transparent 32%),
    linear-gradient(180deg, rgba(7, 12, 26, 0.94), rgba(4, 8, 18, 0.98));
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-space-bg,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-space-bg {
  opacity: 1;
}

.rocket-space-bg::before,
.rocket-space-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  pointer-events: none;
  will-change: background-position, opacity;
  animation-play-state: paused;
}


.rocket-space-bg::before {
  opacity: 0.68;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(174, 255, 201, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.2px);
  background-size: 120px 80px, 168px 112px, 220px 146px;
  background-position: 0 0, 34px 56px, 82px 24px;
  animation: rocket-stars-drift-a 18s linear infinite paused;
}

.rocket-space-bg::after {
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.74) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(110, 195, 255, 0.46) 0 0.9px, transparent 1.3px);
  background-size: 156px 104px, 248px 164px;
  background-position: 18px 44px, 96px 18px;
  animation: rocket-stars-drift-b 27s linear infinite paused;
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-space-bg::before,
.rocket-playfield[data-rocket-phase="flying"] .rocket-space-bg::after,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-space-bg::before,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-space-bg::after {
  animation-play-state: running;
}

.rocket-trail {
  position: absolute;
  inset: 0;
  contain: layout paint style;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: var(--rocket-trail-opacity, 0);
  visibility: var(--rocket-trail-visibility, hidden);
  pointer-events: none;
  transition: opacity 160ms linear;
}

.rocket-trail__group {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  transition:
    transform 660ms cubic-bezier(0.22, 0.72, 0.18, 1),
    opacity 660ms ease;
}

.rocket-trail__line {
  fill: none;
  stroke: #00f142;
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.98;
  filter: none;
  transition: stroke 260ms ease, opacity 260ms ease;
}

.rocket-trail__glow {
  fill: rgba(0, 255, 67, 0.16);
  opacity: 0.9;
  filter: blur(8px);
  transform: translateY(4px);
  transition: fill 260ms ease, opacity 260ms ease, filter 260ms ease;
}

.rocket-screen.is-rocket-trail-red .rocket-trail__line,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-trail__line,
.rocket-playfield[data-rocket-phase="result"] .rocket-trail__line {
  stroke: #ff3636;
  opacity: 0.92;
}

.rocket-screen.is-rocket-trail-red .rocket-trail__glow,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-trail__glow,
.rocket-playfield[data-rocket-phase="result"] .rocket-trail__glow {
  fill: rgba(255, 54, 54, 0.13);
  opacity: 0.72;
}

.rocket-screen.is-rocket-trail-red .rocket-trail__group.is-ending,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-trail__group.is-ending {
  opacity: 0;
  transform: translate(-24%, 18%) scale(0.98);
}


@keyframes rocket-stars-drift-a {
  from {
    background-position: 0 0, 34px 56px, 82px 24px;
  }
  to {
    background-position: -120px 80px, -134px 168px, -138px 170px;
  }
}

@keyframes rocket-stars-drift-b {
  from {
    background-position: 18px 44px, 96px 18px;
  }
  to {
    background-position: -138px 148px, -152px 182px;
  }
}

.rocket-craft {
  position: absolute;
  left: var(--rocket-craft-x);
  top: var(--rocket-craft-y);
  z-index: 5;
  width: clamp(148px, 45vw, 214px);
  height: clamp(148px, 45vw, 214px);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) rotate(17deg);
  transform-origin: 50% 54%;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.38));
  contain: layout paint style;
  transition:
    transform 220ms ease,
    filter 280ms ease,
    opacity 240ms ease;
  will-change: left, top, transform, opacity;
}

.rocket-craft__lottie,
.rocket-craft__lottie > svg,
.rocket-craft__lottie > canvas,
.rocket-craft__lottie > div {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.rocket-craft.is-crashed {
  left: 122% !important;
  top: 12% !important;
  transform: translate3d(-50%, -50%, 0) rotate(20deg) scale(0.92);
  opacity: 0;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.26)) saturate(0.88);
  transition:
    left 620ms cubic-bezier(0.26, 0.02, 0.08, 1),
    top 620ms cubic-bezier(0.26, 0.02, 0.08, 1),
    transform 620ms cubic-bezier(0.26, 0.02, 0.08, 1),
    opacity 360ms ease 160ms,
    filter 320ms ease;
}

.rocket-countdown,
.rocket-live-multiplier,
.rocket-result-multiplier {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  transform: translate3d(-50%, -50%, 0);
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.62);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
}

.rocket-countdown {
  opacity: 0;
  font-size: clamp(64px, 20vw, 104px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.06em;
  transform: translate3d(-50%, -50%, 0) scale(0.98);
  filter: none;
  transition: opacity 300ms ease, transform 300ms ease;
  will-change: opacity, transform;
}

.rocket-countdown.is-ticking,
.rocket-playfield[data-rocket-phase="countdown"] .rocket-countdown {
  opacity: 1;
}

.rocket-countdown.is-ticking {
  animation: rocket-countdown-soft 980ms cubic-bezier(0.2, 0.78, 0.18, 1) both;
}

.rocket-live-multiplier {
  display: none;
}

.rocket-result-multiplier {
  opacity: 0;
  font-size: clamp(42px, 11vw, 76px);
  line-height: 1;
  font-weight: 850;
  letter-spacing: -0.06em;
  transform: translate3d(-50%, -50%, 0) scale(0.94);
  filter: none;
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rocket-result-multiplier.is-showing,
.rocket-playfield[data-rocket-phase="result"] .rocket-result-multiplier {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
  filter: none;
}

.rocket-result-multiplier.is-showing {
  animation: rocket-result-soft 3000ms cubic-bezier(0.22, 0.72, 0.16, 1) both;
}

.rocket-playfield[data-rocket-phase="countdown"] .rocket-craft,
.rocket-playfield[data-rocket-phase="result"] .rocket-craft {
  opacity: 0;
}

.rocket-playfield[data-rocket-phase="countdown"] .rocket-trail,
.rocket-playfield[data-rocket-phase="result"] .rocket-trail {
  opacity: 0;
  visibility: hidden;
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-craft,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-craft {
  opacity: 1;
}

.rocket-controls__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rocket-autobet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  user-select: none;
}

.rocket-autobet__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rocket-autobet__switch {
  position: relative;
  width: 32px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.rocket-autobet__switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(207, 214, 226, 0.62);
  transform: translate3d(0, -50%, 0);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.rocket-autobet__input:checked + .rocket-autobet__switch {
  border-color: rgba(39, 245, 127, 0.34);
  background: rgba(20, 86, 46, 0.48);
}

.rocket-autobet__input:checked + .rocket-autobet__switch::after {
  background: #18ef65;
  box-shadow: 0 0 10px rgba(24, 239, 101, 0.46);
  transform: translate3d(14px, -50%, 0);
}

.rocket-action-button__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.rocket-action-button__label {
  line-height: 1;
}

.rocket-action-button__amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.rocket-action-button__icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.84;
}

.rocket-action-button--cashout {
  border-color: rgba(39, 245, 127, 0.34);
  background: rgba(16, 90, 45, 0.22);
}

.rocket-action-button--cancel {
  border-color: rgba(255, 179, 71, 0.28);
  background: rgba(120, 68, 14, 0.18);
}


.rocket-history__entry {
  transition:
    transform 380ms cubic-bezier(0.2, 0.82, 0.24, 1),
    opacity 260ms ease,
    color 260ms ease,
    background-color 260ms ease,
    min-width 260ms ease,
    padding 260ms ease !important;
  will-change: transform, opacity;
}

.rocket-history__entry.is-entering {
  opacity: 0 !important;
  transform: translate3d(-22px, 0, 0) scale(0.9) !important;
}

.rocket-history__entry.is-value-changing {
  animation: rocket-history-value-pop 420ms cubic-bezier(0.2, 0.82, 0.24, 1) both;
}

.rocket-history__entry--combined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px !important;
  padding-inline: 7px !important;
  font-size: 12px;
  letter-spacing: -0.045em;
}

.rocket-history__combined-part {
  min-width: 0;
}

.rocket-history__separator {
  flex: 0 0 auto;
  margin-inline: 4px;
  color: rgba(255, 255, 255, 0.5);
}

@keyframes rocket-history-value-pop {
  0% { transform: scale(0.94); opacity: 0.72; }
  54% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes rocket-countdown-soft {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.985); }
  16% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.01); }
  72% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.985); }
}

@keyframes rocket-result-soft {
  0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.9); }
  18% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.025); }
  72% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.96); }
}

@media (max-width: 389px) {
  .rocket-playfield {
    height: clamp(286px, 78vw, 322px);
  }

  .rocket-craft {
    width: clamp(130px, 44vw, 184px);
    height: clamp(130px, 44vw, 184px);
  }

  .rocket-autobet {
    font-size: 14px;
    gap: 6px;
  }

  .rocket-autobet__switch {
    width: 30px;
    height: 17px;
  }

  .rocket-autobet__switch::after {
    width: 13px;
    height: 13px;
  }

  .rocket-autobet__input:checked + .rocket-autobet__switch::after {
    transform: translate3d(13px, -50%, 0);
  }
}

/* 2026-05-20: Rocket/result separator and case-performance corrections. */
.rocket-history__separator,
.rocket-result-multiplier__separator {
  display: inline-block;
  flex: 0 0 auto;
  font-weight: 400;
  line-height: 1;
  opacity: 0.58;
  transform: scaleX(0.52);
  transform-origin: center;
}

.rocket-history__separator {
  margin-inline: 6px;
}

.rocket-result-multiplier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.rocket-result-multiplier__part {
  display: inline-block;
  min-width: 0;
}

.rocket-result-multiplier__separator {
  margin-inline: clamp(10px, 3.2vw, 18px);
}

.case-nft-art__fast-placeholder {
  position: absolute;
  inset: 16%;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: rgba(232, 238, 248, 0.32);
  font-size: clamp(9px, calc(var(--case-reel-card-size-px, 72px) * 0.16), 13px);
  line-height: 1;
  font-weight: 750;
  letter-spacing: -0.04em;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
}

.case-opening__stage.is-spinning .case-reel__item--fast-art .case-reel__card {
  border-color: rgba(255, 255, 255, 0.045) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-shadow: none !important;
}

.case-opening__stage.is-spinning .case-reel__item--fast-art .case-nft-art--fast {
  background: transparent !important;
}

.rocket-history__entry--combined {
  min-width: 0 !important;
  padding-inline: 8px !important;
}

/* 2026-05-20 v3: empty fast reel cells, decimal prices and rocket diagnostics. */
.case-reel__item--fast-art .case-reel__card,
.case-opening__stage.is-spinning .case-reel__item--fast-art .case-reel__card {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.case-nft-art--empty,
.case-opening__stage.is-spinning .case-reel__item--fast-art .case-nft-art--fast {
  background: transparent !important;
  box-shadow: none !important;
}

.case-nft-art__fast-placeholder {
  display: none !important;
}

.case-result-price__value {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.case-result-price__whole {
  display: inline-block;
  min-width: 0;
}

.case-result-price__decimal {
  display: inline-block;
  margin-left: 1px;
  color: rgba(223, 230, 239, 0.52) !important;
  font-size: 0.72em !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em;
  transform: translateY(0.07em);
}

.case-result-card__price .case-result-price__decimal {
  color: rgba(223, 230, 239, 0.48) !important;
  font-size: 0.7em !important;
}

.case-result-panel__price .case-result-price__decimal {
  color: rgba(223, 230, 239, 0.5) !important;
  font-size: 0.68em !important;
}

.rocket-screen {
  --rocket-craft-x-px: -120px;
  --rocket-craft-y-px: 280px;
}

.rocket-craft {
  left: 0 !important;
  top: 0 !important;
  transform: translate3d(var(--rocket-craft-x-px), var(--rocket-craft-y-px), 0) translate3d(-50%, -50%, 0) rotate(17deg) !important;
  transition: opacity 240ms ease, filter 280ms ease !important;
  will-change: transform, opacity;
}

.rocket-craft.is-crashed {
  left: 0 !important;
  top: 0 !important;
  transform: translate3d(var(--rocket-craft-x-px), var(--rocket-craft-y-px), 0) translate3d(-50%, -50%, 0) rotate(20deg) scale(0.92) !important;
  transition:
    transform 620ms cubic-bezier(0.26, 0.02, 0.08, 1),
    opacity 360ms ease 160ms,
    filter 320ms ease !important;
}

.rocket-debug-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: -2px;
}

.rocket-debug-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  color: rgba(223, 230, 239, 0.68);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  user-select: none;
}

.rocket-debug-switch__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rocket-debug-switch__track {
  position: relative;
  width: 30px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(0, 0, 0, 0.22);
}

.rocket-debug-switch__track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(207, 214, 226, 0.62);
  transform: translate3d(0, -50%, 0);
  transition: transform 160ms ease, background-color 160ms ease;
}

.rocket-debug-switch__input:checked + .rocket-debug-switch__track {
  border-color: rgba(39, 245, 127, 0.34);
  background: rgba(20, 86, 46, 0.42);
}

.rocket-debug-switch__input:checked + .rocket-debug-switch__track::after {
  background: #18ef65;
  transform: translate3d(13px, -50%, 0);
}

.rocket-screen.rocket-debug-hide-craft .rocket-craft,
.rocket-screen.rocket-debug-hide-craft .rocket-craft__lottie {
  display: none !important;
}

.rocket-screen.rocket-debug-hide-trail .rocket-trail,
.rocket-screen.rocket-debug-hide-trail .rocket-trail__line,
.rocket-screen.rocket-debug-hide-trail .rocket-trail__glow {
  display: none !important;
}

@media (max-width: 389px) {
  .rocket-debug-panel {
    gap: 6px;
  }

  .rocket-debug-switch {
    padding-inline: 8px;
    font-size: 11px;
  }
}


/* 2026-05-20 v4: Rocket no-SVG flight effect and case result decimal polish. */
.rocket-screen {
  --rocket-flight-effect-opacity: 0;
  --rocket-trail-opacity: 0;
}

.rocket-trail,
.rocket-debug-panel {
  display: none !important;
}

.rocket-flight-effects {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: clamp(132px, 40vw, 184px);
  height: clamp(132px, 40vw, 184px);
  pointer-events: none;
  opacity: var(--rocket-flight-effect-opacity, 0);
  transform: translate3d(var(--rocket-craft-x-px), var(--rocket-craft-y-px), 0) translate3d(-62%, -44%, 0) rotate(17deg);
  transform-origin: 58% 54%;
  contain: layout paint style;
  will-change: transform, opacity;
  transition: opacity 180ms ease;
}

.rocket-flight-effects__spark {
  position: absolute;
  left: 6%;
  top: 54%;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 245, 106, 0), rgba(34, 245, 106, 0.9), rgba(255, 255, 255, 0.82));
  transform: translate3d(0, -50%, 0);
  opacity: 0.86;
  animation: rocket-spark-streak 760ms linear infinite;
  will-change: transform, opacity;
}

.rocket-flight-effects__spark::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(231, 255, 237, 0.86);
  transform: translateY(-50%);
}

.rocket-flight-effects__spark--b { top: 44%; left: 14%; width: 24px; opacity: 0.68; animation-duration: 640ms; animation-delay: -180ms; }
.rocket-flight-effects__spark--c { top: 64%; left: 13%; width: 28px; opacity: 0.72; animation-duration: 820ms; animation-delay: -360ms; }
.rocket-flight-effects__spark--d { top: 36%; left: 25%; width: 16px; opacity: 0.52; animation-duration: 700ms; animation-delay: -470ms; }
.rocket-flight-effects__spark--e { top: 72%; left: 24%; width: 19px; opacity: 0.58; animation-duration: 900ms; animation-delay: -120ms; }

@keyframes rocket-spark-streak {
  0% { transform: translate3d(18px, -50%, 0) scaleX(0.28); opacity: 0; }
  18% { opacity: 0.86; }
  100% { transform: translate3d(-28px, -50%, 0) scaleX(1); opacity: 0; }
}

.rocket-playfield[data-rocket-phase="countdown"] .rocket-flight-effects,
.rocket-playfield[data-rocket-phase="result"] .rocket-flight-effects,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-flight-effects {
  opacity: 0 !important;
}

.rocket-craft {
  transition: transform 70ms linear, opacity 220ms ease, filter 240ms ease !important;
  will-change: transform, opacity;
}

.rocket-craft__lottie > canvas,
.rocket-craft__lottie > svg {
  transform: translateZ(0);
}

.case-reel__item--fast-art .case-reel__card,
.case-opening__stage.is-spinning .case-reel__item--fast-art .case-reel__card,
.case-reel__item--fast-art .case-nft-art--fast,
.case-opening__stage.is-spinning .case-reel__item--fast-art .case-nft-art--fast {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.case-result-price__value {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

.case-result-price__decimal {
  display: inline-block !important;
  margin-left: 1px !important;
  color: rgba(223, 230, 239, 0.66) !important;
  font-size: 0.7em !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  transform: translateY(0.1em) !important;
}

.case-result-card__price .case-result-price__decimal {
  color: rgba(223, 230, 239, 0.64) !important;
  font-size: 0.68em !important;
  transform: translateY(0.1em) !important;
}

.case-result-panel__price .case-result-price__decimal {
  color: rgba(223, 230, 239, 0.68) !important;
  font-size: 0.66em !important;
  transform: translateY(0.1em) !important;
}


/* 2026-05-20 v5: CSS rocket craft, directed sparks and smaller toast decimals. */
.rocket-craft {
  width: clamp(112px, 31vw, 152px) !important;
  height: clamp(112px, 31vw, 152px) !important;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34));
  contain: layout paint style;
}

.rocket-craft__lottie,
.rocket-flight-effects {
  display: none !important;
}

.rocket-craft-css {
  position: absolute;
  inset: 10%;
  transform: rotate(28deg) translateZ(0);
  transform-origin: 50% 52%;
  contain: layout paint style;
}

.rocket-craft-css__body {
  position: absolute;
  left: 31%;
  top: 18%;
  width: 38%;
  height: 68%;
  border-radius: 52% 52% 46% 46%;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.38) 0 9%, transparent 10%),
    linear-gradient(180deg, #ff9b2f 0%, #ff6f1a 48%, #e24b13 100%);
  box-shadow:
    inset 8px 0 12px rgba(255, 255, 255, 0.13),
    inset -8px 0 14px rgba(90, 31, 9, 0.24),
    0 10px 16px rgba(0, 0, 0, 0.22);
  clip-path: polygon(50% 0%, 72% 9%, 92% 34%, 84% 100%, 16% 100%, 8% 34%, 28% 9%);
}

.rocket-craft-css__window {
  position: absolute;
  left: 42%;
  top: 35%;
  width: 16%;
  height: 16%;
  border-radius: 999px;
  background: radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.95), rgba(128, 232, 255, 0.78) 42%, rgba(38, 106, 136, 0.9) 100%);
  box-shadow: 0 0 0 2px rgba(65, 39, 24, 0.36);
}

.rocket-craft-css__leaf {
  position: absolute;
  left: 45%;
  top: 3%;
  width: 10%;
  height: 25%;
  border-radius: 999px 999px 20px 20px;
  background: linear-gradient(180deg, #4cf284, #168c47);
  transform-origin: 50% 95%;
}

.rocket-craft-css__leaf--a { transform: rotate(-26deg); }
.rocket-craft-css__leaf--b { transform: rotate(0deg) translateY(-3%); }
.rocket-craft-css__leaf--c { transform: rotate(26deg); }

.rocket-craft-css__fin {
  position: absolute;
  left: 24%;
  width: 18%;
  height: 19%;
  background: linear-gradient(180deg, #ffcf57, #ff7b1d);
  box-shadow: inset -4px -3px 8px rgba(93, 36, 12, 0.22);
}

.rocket-craft-css__fin--top {
  top: 62%;
  border-radius: 12px 6px 4px 12px;
  transform: rotate(-31deg) skewX(-9deg);
}

.rocket-craft-css__fin--bottom {
  left: 58%;
  top: 62%;
  border-radius: 6px 12px 12px 4px;
  transform: rotate(31deg) skewX(9deg);
}

.rocket-craft-css__flame {
  position: absolute;
  left: 35%;
  top: 81%;
  width: 30%;
  height: 28%;
  border-radius: 50% 50% 58% 58%;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.95) 0 13%, #fff176 22%, #ffb22e 48%, rgba(255, 75, 23, 0) 74%);
  filter: blur(0.2px);
  opacity: 0;
  transform: translate3d(0, -8px, 0) scaleY(0.72);
  transform-origin: 50% 0%;
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-craft-css__flame {
  opacity: 0.9;
  animation: rocket-css-flame-pulse 220ms linear infinite;
}

.rocket-craft-css__spark {
  position: absolute;
  left: 48%;
  top: 91%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 230, 115, 0.92);
  opacity: 0;
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-craft-css__spark {
  animation: rocket-css-spark-fall 720ms linear infinite;
}

.rocket-craft-css__spark--b {
  left: 42%;
  animation-delay: -210ms !important;
  animation-duration: 860ms !important;
  background: rgba(255, 139, 58, 0.86);
}

.rocket-craft-css__spark--c {
  left: 57%;
  animation-delay: -430ms !important;
  animation-duration: 680ms !important;
  background: rgba(236, 255, 226, 0.82);
}

@keyframes rocket-css-flame-pulse {
  0% { transform: translate3d(0, -8px, 0) scale(0.9, 0.7); opacity: 0.72; }
  50% { transform: translate3d(0, -4px, 0) scale(1.06, 0.96); opacity: 0.95; }
  100% { transform: translate3d(0, -8px, 0) scale(0.9, 0.7); opacity: 0.72; }
}

@keyframes rocket-css-spark-fall {
  0% { transform: translate3d(0, -4px, 0) scale(0.7); opacity: 0; }
  14% { opacity: 0.9; }
  100% { transform: translate3d(-22px, 42px, 0) scale(0.2); opacity: 0; }
}

.case-result-price__value {
  align-items: flex-end !important;
  line-height: 1 !important;
}

.case-result-price__decimal,
.case-result-card__price .case-result-price__decimal,
.case-result-panel__price .case-result-price__decimal {
  align-self: flex-end !important;
  color: rgba(232, 238, 248, 0.74) !important;
  font-size: 0.68em !important;
  line-height: 0.95 !important;
  transform: translateY(0.02em) !important;
}

.slot-toast__amount {
  display: inline-flex;
  align-items: flex-end;
  gap: 0;
  font-variant-numeric: tabular-nums;
}

.slot-toast__amount-decimal {
  color: inherit;
  font-size: 0.72em;
  line-height: 0.95;
  font-weight: inherit;
  transform: translateY(0.02em);
}


/* 2026-05-20 final: Rocket WEBP craft, lightweight exhaust, corrected decimal baselines. */
.rocket-craft {
  width: clamp(136px, 38vw, 186px) !important;
  height: clamp(136px, 38vw, 186px) !important;
  overflow: visible !important;
  transform: translate3d(var(--rocket-craft-x-px), var(--rocket-craft-y-px), 0) translate3d(-50%, -50%, 0) rotate(0deg) !important;
  transform-origin: 50% 54% !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.34)) !important;
  will-change: transform, opacity !important;
  contain: layout style !important;
}

.rocket-craft.is-crashed {
  transform: translate3d(var(--rocket-craft-x-px), var(--rocket-craft-y-px), 0) translate3d(-50%, -50%, 0) rotate(6deg) scale(0.92) !important;
}

.rocket-craft-css,
.rocket-craft__lottie {
  display: none !important;
}

.rocket-craft__image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: translateZ(0);
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.rocket-exhaust {
  position: absolute;
  left: -5%;
  top: 62%;
  z-index: 1;
  width: 52%;
  height: 34%;
  pointer-events: none;
  opacity: 0;
  transform: rotate(22deg) translateZ(0);
  transform-origin: 82% 42%;
  contain: layout paint style;
  transition: opacity 160ms ease;
}

.rocket-playfield[data-rocket-phase="flying"] .rocket-exhaust {
  opacity: 1;
}

.rocket-playfield[data-rocket-phase="countdown"] .rocket-exhaust,
.rocket-playfield[data-rocket-phase="result"] .rocket-exhaust,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-exhaust {
  opacity: 0 !important;
}

.rocket-exhaust__glow,
.rocket-exhaust__core,
.rocket-exhaust__ember {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translateZ(0);
}

.rocket-exhaust__glow {
  left: 18%;
  top: 18%;
  width: 74%;
  height: 62%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 78% 50%, rgba(255, 247, 196, 0.86) 0 10%, rgba(255, 170, 38, 0.62) 25%, rgba(255, 70, 22, 0.34) 48%, rgba(255, 70, 22, 0) 74%);
  filter: blur(5px);
  animation: rocket-exhaust-glow 360ms ease-in-out infinite;
}

.rocket-exhaust__core {
  right: 3%;
  top: 37%;
  width: 76%;
  height: 24%;
  border-radius: 999px 58% 58% 999px;
  background: linear-gradient(90deg, rgba(255, 74, 22, 0), rgba(255, 119, 28, 0.72) 34%, rgba(255, 226, 91, 0.96) 68%, rgba(255, 255, 255, 0.94));
  filter: blur(0.2px);
  animation: rocket-exhaust-core 240ms linear infinite;
}

.rocket-exhaust__ember {
  right: 74%;
  top: 48%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 215, 92, 0.95);
  box-shadow: 0 0 8px rgba(255, 120, 35, 0.62);
  opacity: 0;
  animation: rocket-exhaust-ember 760ms linear infinite;
}

.rocket-exhaust__ember--b {
  top: 28%;
  right: 63%;
  width: 3px;
  height: 3px;
  animation-delay: -180ms;
  animation-duration: 640ms;
}

.rocket-exhaust__ember--c {
  top: 67%;
  right: 58%;
  width: 5px;
  height: 5px;
  background: rgba(255, 119, 45, 0.86);
  animation-delay: -360ms;
  animation-duration: 860ms;
}

.rocket-exhaust__ember--d {
  top: 41%;
  right: 48%;
  width: 3px;
  height: 3px;
  background: rgba(255, 248, 204, 0.9);
  animation-delay: -520ms;
  animation-duration: 720ms;
}

@keyframes rocket-exhaust-glow {
  0%, 100% { transform: translate3d(5px, 0, 0) scale(0.95, 0.9); opacity: 0.68; }
  50% { transform: translate3d(0, 0, 0) scale(1.06, 1); opacity: 0.96; }
}

@keyframes rocket-exhaust-core {
  0%, 100% { transform: translate3d(8px, 0, 0) scaleX(0.86); opacity: 0.74; }
  50% { transform: translate3d(0, 0, 0) scaleX(1.04); opacity: 1; }
}

@keyframes rocket-exhaust-ember {
  0% { transform: translate3d(20px, 0, 0) scale(0.55); opacity: 0; }
  16% { opacity: 0.95; }
  100% { transform: translate3d(-24px, 9px, 0) scale(0.2); opacity: 0; }
}

.case-prize-card__price,
.case-result-price {
  align-items: center !important;
}

.case-prize-card__price-value,
.case-result-price__value {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

.case-prize-card__price-decimal {
  display: inline-block !important;
  margin-left: 1px !important;
  color: rgba(232, 238, 248, 0.68) !important;
  font-size: 0.68em !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  transform: translateY(-0.05em) !important;
}

.case-result-price__decimal,
.case-result-card__price .case-result-price__decimal,
.case-result-panel__price .case-result-price__decimal {
  display: inline-block !important;
  margin-left: 1px !important;
  color: rgba(232, 238, 248, 0.72) !important;
  font-size: 0.68em !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  transform: translateY(-0.05em) !important;
}

.case-prize-card__price-icon,
.case-result-price__icon {
  align-self: center !important;
  transform: translateY(-0.02em) !important;
}

.slot-toast__amount {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1 !important;
}

.slot-toast__amount-decimal {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 0.70em !important;
  line-height: 1 !important;
  font-weight: inherit !important;
  transform: translateY(-0.05em) !important;
}

.slot-toast__icon {
  align-self: center !important;
  transform: translateY(-0.01em) !important;
}


/* 2026-05-20 follow-up: full-width toasts and lightweight animated rocket wave line. */
.slot-header-toast-slot,
.ring-header-toast-slot {
  width: 100% !important;
}

.slot-toast {
  left: 0 !important;
  right: 0 !important;
  top: calc(8px + (var(--slot-toast-index, 0) * 46px)) !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  border-radius: 16px !important;
}

.case-detail-screen .slot-header-toast-slot .slot-toast {
  left: 0 !important;
  right: 0 !important;
  top: calc(8px + (var(--slot-toast-index, 0) * 46px)) !important;
  min-height: 40px !important;
}

/* 2026-05-22: Rocket trail restored from the old green glowing style, but kept filter-free for stable long flights. */
.rocket-flight-effects,
.rocket-exhaust {
  display: none !important;
}

.rocket-trail {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: var(--rocket-trail-opacity, 0) !important;
  visibility: var(--rocket-trail-visibility, hidden) !important;
  pointer-events: none !important;
  overflow: hidden !important;
  contain: layout paint style !important;
  transform: translateZ(0);
}

.rocket-trail__group {
  transform-box: fill-box !important;
  transform-origin: 0% 100% !important;
  transition: transform 620ms cubic-bezier(0.22, 0.72, 0.18, 1), opacity 620ms ease !important;
  will-change: transform, opacity;
}

.rocket-trail__group.is-ending {
  opacity: 0 !important;
  transform: translate3d(-20%, 22%, 0) rotate(-3deg) scale(0.985) !important;
}

.rocket-trail__line,
.rocket-trail__glow {
  display: block !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  filter: none !important;
}

.rocket-trail__glow {
  stroke: rgba(0, 241, 66, 0.24) !important;
  stroke-width: 9px !important;
  opacity: 0.86 !important;
}

.rocket-trail__line {
  stroke: #00f142 !important;
  stroke-width: 1.85px !important;
  opacity: 1 !important;
}

.rocket-screen.is-rocket-trail-red .rocket-trail__glow,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-trail__glow,
.rocket-playfield[data-rocket-phase="result"] .rocket-trail__glow {
  stroke: rgba(0, 241, 66, 0.2) !important;
}

.rocket-screen.is-rocket-trail-red .rocket-trail__line,
.rocket-playfield[data-rocket-phase="crashed"] .rocket-trail__line,
.rocket-playfield[data-rocket-phase="result"] .rocket-trail__line {
  stroke: #00f142 !important;
}

.rocket-craft {
  filter: none !important;
  transition: transform 96ms linear, opacity 220ms ease !important;
  will-change: transform, opacity !important;
  contain: layout style !important;
}

.rocket-craft__image {
  filter: none !important;
  box-shadow: none !important;
}

.slot-header-toast-slot,
.ring-header-toast-slot {
  width: 100% !important;
}

.slot-toast,
.case-detail-screen .slot-header-toast-slot .slot-toast {
  left: 0 !important;
  right: 0 !important;
  max-width: none !important;
}

.settings-account-id {
  margin: 0 0 -2px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: text;
}

/* server bonus/chat/promocode integration 2026-05-24 */
.bonus-screen {
  display: grid;
  gap: 14px;
  padding: 16px 14px 96px;
}

.bonus-hero,
.bonus-chat {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(29, 31, 39, 0.96), rgba(11, 12, 16, 0.96));
}

.bonus-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
}

.bonus-hero__eyebrow {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.bonus-hero__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.08;
}

.bonus-hero__text {
  margin: 10px 0 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.45;
}

.bonus-hero__balance {
  min-width: 112px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  text-align: right;
}

.bonus-hero__balance span {
  display: block;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
}

.bonus-hero__balance strong {
  display: block;
  margin-top: 3px;
  color: #fff;
  font-size: 20px;
}

.bonus-chat {
  display: grid;
  gap: 12px;
  min-height: 520px;
  padding: 14px;
  border-radius: 24px;
}

.bonus-chat__top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.bonus-chat-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.bonus-chat-tab,
.bonus-chat-refresh,
.bonus-chat-form__button,
.settings-promocode-button {
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.bonus-chat-tab {
  padding: 9px 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 700;
}

.bonus-chat-tab.is-active {
  background: #fff;
  color: #090a0d;
}

.bonus-chat-refresh {
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 700;
}

.bonus-chat__notice,
.bonus-chat__status {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.35;
}

.bonus-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: min(52vh, 460px);
  min-height: 280px;
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.22);
  overscroll-behavior: contain;
}

.bonus-chat-message {
  align-self: flex-start;
  width: min(78%, 620px);
  padding: 10px 12px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255, 255, 255, 0.08);
}

.bonus-chat-message.is-mine {
  align-self: flex-end;
  border-radius: 16px 16px 6px 16px;
  background: rgba(255, 255, 255, 0.16);
}

.bonus-chat-message.is-admin {
  background: rgba(94, 214, 148, 0.16);
}

.bonus-chat-message.is-system {
  align-self: center;
  width: auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.bonus-chat-message__meta {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
}

.bonus-chat-message p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.38;
  word-break: break-word;
}

.bonus-chat-empty {
  margin: auto;
  max-width: 340px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.bonus-chat-form,
.settings-promocode-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.bonus-chat-form__input,
.settings-promocode-input {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  outline: none;
}

.bonus-chat-form__input {
  padding: 13px 14px;
}

.bonus-chat-form__input::placeholder,
.settings-promocode-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.bonus-chat-form__button,
.settings-promocode-button {
  padding: 0 16px;
  border-radius: 16px;
  background: #fff;
  color: #08090b;
  font-weight: 800;
}

.settings-promocode-form {
  margin-top: 10px;
}

.settings-promocode-input {
  width: 100%;
  padding: 12px 13px;
}

.settings-promocode-status {
  margin-top: 8px;
  color: rgba(118, 255, 174, 0.86);
}

@media (max-width: 560px) {
  .bonus-hero {
    grid-template-columns: 1fr;
  }

  .bonus-hero__balance {
    text-align: left;
  }

  .bonus-chat__top,
  .bonus-chat-form,
  .settings-promocode-form {
    grid-template-columns: 1fr;
  }

  .bonus-chat__top {
    align-items: stretch;
    flex-direction: column;
  }

  .bonus-chat-tabs,
  .bonus-chat-refresh,
  .bonus-chat-form__button,
  .settings-promocode-button {
    width: 100%;
  }

  .bonus-chat-message {
    width: 88%;
  }
}