@font-face {
  font-family: "Magnit Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./public/assets/fonts/MagnitSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Magnit Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./public/assets/fonts/MagnitSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Magnit Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./public/assets/fonts/MagnitSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Magnit Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("./public/assets/fonts/MagnitSans-ExtraBold.woff2") format("woff2");
}

:root {
  --bottom-sheet-height: 240px;
  color: #3b3a3a;
  background: #e9e9e8;
  font-family: "Magnit Sans", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e9e9e8;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  width: 360px;
  height: 800px;
  overflow: hidden;
  border-radius: 28px;
  background: #f5f5f4;
  color: #3b3a3a;
  isolation: isolate;
}

.top-navigation {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  height: 76px;
  background: #fff;
}

.status-bar {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px 4px;
  line-height: 0;
}

.status-time {
  font-family: Roboto, "Magnit Sans", Arial, sans-serif;
  color: #3b3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14px;
}

.status-indicators {
  display: flex;
  height: 17px;
  align-items: flex-start;
  gap: 0;
}

.status-icon {
  display: block;
  flex: 0 0 auto;
  height: 17px;
}

.status-icon--wifi,
.status-icon--signal {
  width: 17px;
}

.status-icon--battery {
  width: 8px;
  height: 15px;
  margin-top: 1px;
  margin-left: 5px;
}

.top-bar {
  display: grid;
  width: 100%;
  height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
}

.top-bar h1 {
  overflow: hidden;
  margin: 0;
  color: #3b3a3a;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bar__side {
  height: 44px;
}

.top-bar__side--left {
  display: flex;
  align-items: center;
  padding-left: 16px;
  padding-right: 4px;
}

.top-bar__side--right { display: flex; align-items: center; justify-content: center; }
.prototype-settings-toggle { width: 40px; height: 40px; color: #3b3a3a; }
.prototype-settings-toggle svg { display: block; }
.prototype-settings-toggle:focus-visible,
.prototype-settings__close:focus-visible,
.prototype-settings__choice:focus-within { outline: 2px solid #eb1000; outline-offset: 2px; }

.prototype-settings { position: absolute; inset: 0; z-index: 15; }
.prototype-settings[hidden] { display: none; }
.prototype-settings__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(0 0 0 / 45%); cursor: pointer; }
.prototype-settings__panel { position: absolute; top: 84px; right: 16px; left: 16px; max-height: calc(100% - 100px); overflow: auto; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 12px 32px rgb(0 0 0 / 18%); }
.prototype-settings__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prototype-settings__header h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 24px; }
.prototype-settings__close { display: grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 0; background: transparent; color: #747372; font-size: 28px; line-height: 1; cursor: pointer; }
.prototype-settings__choices { display: grid; gap: 8px; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
.prototype-settings__choices legend { margin-bottom: 12px; padding: 0; color: #747372; font-size: 12px; font-weight: 500; line-height: 16px; }
.prototype-settings__choice { display: flex; min-height: 64px; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e9e9e8; border-radius: 12px; cursor: pointer; }
.prototype-settings__choice:has(input:checked) { border-color: #eb1000; background: #fff7f5; }
.prototype-settings__choice input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: #eb1000; cursor: pointer; }
.prototype-settings__choice span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.prototype-settings__choice strong { font-size: 14px; font-weight: 700; line-height: 16px; }
.prototype-settings__choice small { color: #747372; font-size: 12px; line-height: 16px; }

.payment-snackbar {
  display: flex;
  position: absolute;
  top: 48px;
  left: 50%;
  z-index: 7;
  width: 328px;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  transform: translate(-50%, -18px) scale(.98);
  border-radius: 12px;
  background: #4b4a49;
  box-shadow: 0 6px 10px rgba(56, 56, 56, 0.2);
  opacity: 0;
  transition: opacity 240ms ease-in, transform 240ms ease-in;
}

.payment-snackbar[hidden] {
  display: none;
}

.payment-snackbar--visible {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
  transition: opacity 320ms ease-out, transform 440ms cubic-bezier(.16, 1, .3, 1);
}

.payment-snackbar__icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.payment-snackbar__icon-background,
.payment-snackbar__icon-mark {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.payment-snackbar__icon-background {
  width: 19.232px;
  height: 19px;
}

.payment-snackbar__icon-mark {
  width: 2.2px;
  height: 10.5px;
}

.payment-snackbar__content {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.payment-snackbar__title,
.payment-snackbar__subtitle {
  width: 100%;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-snackbar__title {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.payment-snackbar__subtitle {
  color: #bbbab9;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}

.icon-button,
.info-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.back-button {
  width: 24px;
  height: 24px;
}

.back-button img {
  display: block;
  width: 24px;
  height: 24px;
}

.sections-scroll {
  position: absolute;
  inset: 76px 0 0;
  overflow: hidden auto;
  padding-bottom: var(--bottom-sheet-height);
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sections-scroll::-webkit-scrollbar {
  display: none;
}

.cashback-promo {
  width: 100%;
  margin-bottom: 4px;
  padding: 8px 16px 16px;
  border-radius: 0 0 28px 28px;
  background: #fff;
}

.cashback-topup {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 4px;
  padding: 8px 16px 16px;
  border-radius: 0 0 28px 28px;
  background: #fff;
}

.cashback-topup__heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cashback-topup__icon {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border-radius: 12px;
  background: #f5f5f4;
}

.cashback-topup h2 {
  margin: 0;
  color: #3b3a3a;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.cashback-topup__buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cashback-topup__choose,
.topup-premium-button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.cashback-topup__choose {
  color: #fff;
  background: #eb1000;
  cursor: pointer;
  touch-action: manipulation;
}

.topup-premium-button {
  background: #f0f0ef;
  color: #3b3a3a;
  opacity: 1;
  -webkit-text-fill-color: #3b3a3a;
}

.topup-premium-button img { display: block; flex: none; }
.cashback-topup[hidden],
.cashback-promo[hidden],
.selection-topup-premium[hidden] { display: none; }
.category-selection-view:has(.selection-topup-premium:not([hidden])).has-actions .selection-scroll {
  padding-bottom: calc(160px + var(--mobile-safe-bottom, 0px));
}

.cashback-promo__banner {
  display: flex;
  position: relative;
  width: 100%;
  height: 78px;
  align-items: center;
  overflow: hidden;
  padding: 12px 16px;
  border-radius: 20px;
  background: radial-gradient(ellipse 90px 70px at 95% 90%, #373633, #4d4c49);
}

.cashback-promo__copy {
  display: flex;
  position: relative;
  z-index: 1;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  white-space: nowrap;
}

.cashback-promo__copy strong {
  color: #ffd69e;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.cashback-promo__copy span {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.cashback-promo__illustration {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.cashback-promo__illustration img {
  position: absolute;
  top: -5px;
  left: -2px;
  display: block;
  width: 79px;
  height: 79px;
  max-width: none;
  transform: rotate(-15deg);
}

.cashback-game {
  width: 100%;
  margin-bottom: 4px;
  padding: 16px;
  border-radius: 28px;
  background: #fff;
}

.cashback-game__row {
  display: grid;
  width: 100%;
  height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
}

.cashback-game__image {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
}

.cashback-game__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
}

.cashback-game__copy span,
.cashback-game__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cashback-game__copy span {
  font-size: 14px;
  line-height: 16px;
}

.cashback-game__copy small {
  color: #747372;
  font-size: 12px;
  line-height: 14px;
}

.cashback-game__chevron {
  display: block;
  width: 24px;
  height: 24px;
}

.category-section {
  width: 100%;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
}

.category-section[hidden] {
  display: none;
}

.category-section--main {
  border-radius: 28px;
}

.section-content {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.section-title {
  display: flex;
  width: 100%;
  height: 24px;
  min-height: 24px;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #3b3a3a;
  font-size: 18px;
  font-weight: 700;
  line-height: 22px;
}

.section-title img {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.zaryad-logo {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.category-list {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
}

.category-row {
  display: grid;
  width: 100%;
  height: 44px;
  min-height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease;
}

.category-image {
  display: block;
  width: 44px;
  height: 44px;
  background: #f5f5f4;
  border-radius: 12px;
  object-fit: cover;
}

.category-image-swap {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f4;
}

.category-image-swap .category-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 260ms ease;
}

.category-image-swap .category-image-swap__image--active {
  opacity: 1;
}

.category-text {
  display: flex;
  min-width: 0;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  color: #3b3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
}

.category-text > span,
.category-text > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-text > small {
  color: #747372;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}

.category-value {
  display: flex;
  min-width: 48px;
  height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  color: #3b3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right;
  white-space: nowrap;
}

.category-value__current {
  display: inline-block;
  width: 36px;
  flex: 0 0 36px;
  text-align: right;
}

.info-button {
  width: 16px;
  height: 36px;
  margin-left: 8px;
}

.category-value--with-old .info-button {
  margin-left: 8px;
}

.info-button img {
  display: block;
  width: 16px;
  height: 16px;
}
.cashback-view,
.category-selection-view {
  position: absolute;
  inset: 0;
}

.cashback-view[hidden],
.category-selection-view[hidden] {
  display: none;
}
.cashback-view:focus { outline: none; }

.selection-scroll {
  position: absolute;
  inset: 76px 0 0;
  overflow: hidden auto;
  padding-bottom: 16px;
  background: #fff;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.selection-scroll::-webkit-scrollbar {
  display: none;
}

.selection-header {
  display: flex;
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 16px;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
}

.selection-title-container {
  display: flex;
  width: 100%;
  height: 48px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.selection-title {
  width: 100%;
  height: 24px;
  margin: 0;
  color: #3b3a3a;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.selection-filters {
  display: flex;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  overflow: hidden;
}

.selection-filter {
  display: inline-flex;
  height: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 12px;
  border: 0;
  border-radius: 16px;
  background: #f5f5f4;
  color: #3b3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.selection-filter--active {
  background: #4b4a49;
  color: #fff;
}

.selection-filter img {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.selection-filter[data-filter="premium"] img {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-filter:has(img) { padding-left: 8px; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-filter img { width: 20px; height: 20px; flex-basis: 20px; }

.selection-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 8px 16px 16px;
  background: #fff;
}

.selection-card {
  display: flex;
  position: relative;
  width: 100%;
  height: 132px;
  min-height: 132px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 12px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  background: #f5f5f4;
  color: #3b3a3a;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.selection-card--locked {
  cursor: default;
}

.selection-filter:focus-visible,
.selection-save-button:focus-visible,
.selection-premium-button:focus-visible {
  outline: 2px solid #eb1000;
  outline-offset: 2px;
}

.selection-card:focus-visible {
  outline: none;
}

.selection-card__header {
  display: flex;
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
}

.selection-card__name-group {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.selection-card__name {
  display: block;
  min-width: 0;
  color: #3b3a3a;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.selection-card__checkbox {
  display: grid;
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 6px;
  background: transparent;
}

.selection-card__checkbox img {
  display: block;
  width: 24px;
  height: 24px;
}

.selection-card--selected .selection-card__checkbox {
  background: transparent;
}

.selection-card--selected .selection-card__checkbox::before {
  position: absolute;
  inset: 2px;
  border-radius: 5px;
  background: #eb1000;
  content: "";
}

.selection-card--selected .selection-card__checkbox img {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
}

.selection-card__subtitle {
  display: block;
  color: #747372;
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
}

.selection-card__premium-badge {
  display: block;
  width: 58px;
  height: 16px;
  object-fit: contain;
  object-position: left center;
}

.selection-card__details {
  display: flex;
  position: relative;
  z-index: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.selection-card__format {
  display: flex;
  height: 16px;
  min-width: 0;
  align-items: center;
  gap: 4px;
  color: #3b3a3a;
  font-size: 11px;
  font-weight: 500;
  line-height: 12px;
  white-space: nowrap;
}

.selection-card__format img {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
}

.selection-card__percent {
  display: flex;
  height: 24px;
  align-items: center;
  gap: 4px;
  color: #3b3a3a;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  white-space: nowrap;
}

.selection-card__percent img {
  display: block;
  width: 20px;
  height: 20px;
}

.selection-card__image {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 80px;
  height: 80px;
  object-fit: cover;
  pointer-events: none;
}

.category-selection-view.has-actions .selection-scroll {
  padding-bottom: 180px;
}

.selection-filter[hidden] { display: none; }

.selection-actions {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  height: auto;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px 28px 0 0;
  background: #fff;
  box-shadow: 0 -6px 30px rgba(56, 56, 56, 0.12);
}

.selection-actions[hidden] {
  display: none;
}

.selection-actions__content {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.selection-save-button,
.selection-premium-button {
  display: flex;
  width: 100%;
  height: 48px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

.selection-save-button {
  flex-direction: column;
  gap: 0;
  padding: 7px 12px;
  background: #eb1000;
  color: #f5f5f4;
}

.selection-save-button:disabled {
  background: #f0f0ef;
  color: #a4a3a2;
  cursor: not-allowed;
}

.selection-save-button small {
  display: block;
  font-size: 11px;
  line-height: 12px;
}

.selection-home-indicator {
  display: flex;
  width: 100%;
  height: 28px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  background: #fff;
}

.selection-home-indicator span {
  display: block;
  width: 72px;
  height: 2px;
  border-radius: 8px;
  background: #3b3a3a;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}


/* The compact prototype has no offer sheet or subscription flow. */
.sections-scroll { padding-bottom: 16px; }
.selection-title-container { height: 24px; }
.category-selection-view.has-actions .selection-scroll { padding-bottom: 112px; }
.selection-actions__content { padding: 16px; }
.payment-snackbar { min-height: 48px; }
.payment-snackbar__success { display: block; width: 24px; height: 24px; flex: 0 0 24px; }
.category-value__current { width: auto; flex: 0 0 auto; }
.category-info-icon { display: block; width: 16px; height: 16px; margin-left: 8px; }
.selection-card[hidden] { display: none; }
.selection-card--secret { grid-column: 1 / -1; }
.selection-card--secret .selection-card__details { margin-top: auto; }
.selection-card--secret .selection-card__image { right: 0; width: 155px; height: 111px; }
.selection-card__secret-formats { display: none; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-card__secret-formats { display: flex; }
.selection-card__format .selection-card__modern-format { display: none; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-card__modern-format { display: block; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-card__draft-format { display: none; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .selection-card--secret .selection-card__image { width: 156px; height: 132px; }

.category-row--secret {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.category-row--secret:focus-visible { outline: 2px solid #eb1000; outline-offset: 2px; }
.secret-row__image {
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f4;
}
.secret-row__image img { display: block; width: 106px; height: 106px; margin: -31px; }
.secret-row__value { display: flex; height: 44px; align-items: center; gap: 4px; }
.secret-row__value img { display: block; width: 24px; height: 24px; }
.secret-row__badge {
  display: grid;
  position: relative;
  height: 22px;
  min-width: 42px;
  place-items: center;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 100px;
  background: linear-gradient(144.47deg, #8cffe2 20.14%, #ff9ad5 50.62%, #7392ff 67.58%, #ffe98a 78.22%);
  color: #3b3a3a;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
}
.secret-row__badge img { position: absolute; top: calc(50% + 32px); left: calc(50% + .5px); width: 170px; height: 170px; max-width: none; transform: translate(-50%, -50%); }
.secret-row__badge span { position: relative; z-index: 1; }
.category-row--claimed-secret .secret-row__badge::after {
  position: absolute;
  inset: 0 auto 0 -55%;
  width: 55%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 65%), transparent);
  content: '';
  pointer-events: none;
  transform: skewX(-20deg);
  animation: secret-badge-shimmer 3.5s ease-in-out infinite;
}
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .category-row--claimed-secret .secret-row__badge {
  padding: 1px 8px;
  background: #fc0034 url('./public/assets/secret-selected-badge-gradient.svg') center / 100% 100% no-repeat;
  color: #fff;
}
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .category-row--claimed-secret .secret-row__badge img { display: none; }
.app-shell:is([data-card-mode="final"], [data-card-mode="experimental"]) .category-row--claimed-secret .secret-row__badge::after { content: none; }
@keyframes secret-badge-shimmer {
  0%, 25% { left: -55%; }
  75%, 100% { left: 110%; }
}
@media (prefers-reduced-motion: reduce) {
  .category-row--claimed-secret .secret-row__badge::after { animation: none; }
}
.secret-claimed-image {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f4;
}
.secret-claimed-image img {
  position: absolute;
  top: -2px;
  left: -7px;
  display: block;
  width: 61px;
  height: 61px;
  max-width: none;
}

.secret-modal { position: absolute; inset: 0; z-index: 20; }
.secret-modal[hidden] { display: none; }
.secret-modal:focus { outline: none; }
.secret-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(0, 0, 0, .9);
  opacity: 0;
  transition: opacity 320ms ease, background-color 320ms ease;
  cursor: pointer;
}
.secret-modal--open .secret-modal__backdrop { opacity: 1; }
.secret-modal__intro { display: none; position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.secret-modal--experimental.secret-modal--intro .secret-modal__intro { display: block; animation: secret-intro-bloom 1200ms both; }
.secret-modal__intro-field {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--intro-field-size, 1000px);
  height: var(--intro-field-size, 1000px);
  background: transparent;
  filter: blur(3px);
  animation: secret-intro-field-spin 1200ms cubic-bezier(.333333, 0, .666667, .333333) both;
}
@keyframes secret-intro-bloom {
  0%, 4%, 98%, 100% { opacity: 0; }
  32%, 62% { opacity: 1; }
}
@keyframes secret-intro-field-spin {
  0% { transform: translate(-50%, -50%) scale(calc(var(--intro-scale-x, 1) * var(--intro-bloom-scale, 0)), calc(var(--intro-scale-y, 1) * var(--intro-bloom-scale, 0))) rotate(28deg); }
  100% { transform: translate(-50%, -50%) scale(calc(var(--intro-scale-x, 1) * var(--intro-bloom-scale, 0)), calc(var(--intro-scale-y, 1) * var(--intro-bloom-scale, 0))) rotate(-692deg); }
}
.secret-modal--experimental.secret-modal--intro .secret-modal__content {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: none;
}
.secret-modal--experimental.secret-modal--intro .secret-modal__card--scratch {
  backface-visibility: hidden;
  animation: secret-intro-card-in 1200ms linear both;
}
.secret-modal--experimental.secret-modal--intro .secret-modal__card--revealed { visibility: hidden; }
.secret-modal--experimental.secret-modal--intro .secret-modal__hint { animation: secret-intro-hint-in 1200ms both; }
@keyframes secret-intro-card-in {
  0%, 42% { opacity: 0; transform: translateY(-37px) rotateY(-89deg) rotateZ(-4deg) scale(.92); }
  44% { opacity: 1; transform: translateY(-37px) rotateY(-89deg) rotateZ(-4deg) scale(.92); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  86%, 100% { opacity: 1; transform: translateY(0) rotateY(0) rotateZ(0) scale(1); }
}
@keyframes secret-intro-hint-in {
  0%, 74% { opacity: 0; transform: translateY(8px); }
  92%, 100% { opacity: 1; transform: translateY(0); }
}
.secret-modal--intro-closing .secret-modal__content { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.secret-modal__content {
  position: absolute;
  top: calc(50% + 34px);
  left: 50%;
  width: 257px;
  height: 344px;
  perspective: 900px;
  opacity: 0;
  transform: translate(-50%, calc(-50% + 16px));
  transition: top 600ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.secret-modal--open .secret-modal__content { opacity: 1; transform: translate(-50%, -50%); }
.secret-modal__hint {
  position: absolute;
  bottom: calc(100% + 22px);
  left: 18px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 350ms ease;
}
.secret-modal__arrow { position: absolute; left: 171px; top: 6px; width: 41px; height: 40px; transform: rotate(120deg); }
.secret-modal__splash { position: absolute; left: -47px; top: 49px; width: 40px; height: 40px; transform: scaleY(-1); }
.secret-modal__experimental-arrow { display: none; }
.secret-modal__experimental-chrome { position: absolute; z-index: 4; inset: 0; opacity: 0; pointer-events: none; transition: opacity 260ms ease; }
.secret-modal--experimental .secret-modal__backdrop { background: #f5f5f4; }
.secret-modal--experimental.secret-modal--intro .secret-modal__backdrop { opacity: 1; transition: none; }
.secret-modal--experimental.secret-modal--intro .secret-modal__experimental-chrome { opacity: 1; transition: none; }
.secret-modal--experimental.secret-modal--open .secret-modal__experimental-chrome { opacity: 1; }
.secret-modal__experimental-status { display: flex; height: 32px; align-items: center; justify-content: space-between; padding: 8px 24px 4px; color: #3b3a3a; font-family: Roboto, "Magnit Sans", Arial, sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .14px; }
.secret-modal__experimental-indicators { display: flex; align-items: flex-start; height: 17px; }
.secret-modal__experimental-indicators img { display: block; width: 17px; height: 17px; }
.secret-modal__experimental-indicators img:last-child { width: 8px; height: 15px; margin-top: 1px; margin-left: 5px; }
.secret-modal__experimental-home { position: absolute; bottom: 8px; left: 50%; width: 72px; height: 2px; border-radius: 8px; background: #3b3a3a; transform: translateX(-50%); }
.secret-modal--experimental .secret-modal__content { width: 256px; height: 336px; perspective: 900px; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__content { top: calc(50% + 37px); }
.secret-modal--experimental.secret-modal--revealed .secret-modal__content { top: calc(50% - 65px); width: 256px; height: 336px; }
.secret-modal--experimental .secret-modal__hint { z-index: 2; pointer-events: none; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__hint { bottom: calc(100% + 83px); left: 0; width: 256px; color: #3b3a3a; text-align: center; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__hint > span:first-child { display: block; white-space: nowrap; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__arrow,
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__splash { display: none; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__experimental-arrow { display: grid; position: absolute; top: 60px; left: 114px; width: 38.024px; height: 35.225px; place-items: center; }
.secret-modal__experimental-arrow img { display: block; transform: rotate(120deg); }
.secret-modal--experimental .secret-modal__card { transform-origin: 50% 50%; }
/* Independent transforms keep hovering separate from tilt and reveal/spin. */
.secret-modal--floating:not(.secret-modal--intro):not(.secret-modal--replacing) :is(.secret-modal__card, .secret-modal__scratch-coin-holder) {
  animation: secret-card-hover 5.6s cubic-bezier(.37, 0, .63, 1) infinite;
  animation-play-state: var(--secret-hover-play, running);
}
.secret-modal--scratching,
.secret-modal--claiming { --secret-hover-play: paused; }
@keyframes secret-card-hover {
  0%, 100% { translate: -1px 0; rotate: -.3deg; }
  50% { translate: 1px -20px; rotate: .3deg; }
}
.secret-modal--experimental .secret-modal__card--scratch { z-index: 1; width: 256px; height: 336px; gap: 0; padding: 0; overflow: hidden; border-radius: 28px; background: transparent; }
.secret-modal--experimental .secret-modal__card--scratch::before { position: absolute; z-index: 4; inset: 0; padding: 4px; border-radius: inherit; background: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / 5%) 46%, rgb(255 255 255 / 17%) 48%, rgb(255 255 255 / 45%) 49.5%, rgb(255 255 255 / 62%) 50%, rgb(255 255 255 / 45%) 50.5%, rgb(255 255 255 / 17%) 52%, rgb(255 255 255 / 5%) 54%, transparent 56%) 0 0 / 320% 100% no-repeat; content: ''; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .78; pointer-events: none; animation: secret-card-border-sheen 3.2s linear -.55s infinite; }
@keyframes secret-card-border-sheen {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__card--scratch { transform: rotateX(var(--secret-rotate-x, 0deg)) rotateY(var(--secret-rotate-y, 0deg)); transition: opacity 400ms ease, transform 180ms ease-out; will-change: transform; }
.secret-modal--experimental .secret-modal__card--revealed { width: 256px; height: 336px; }
.secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__card--revealed { overflow: hidden; border-radius: 28px; opacity: 1; transform: rotateX(var(--secret-rotate-x, 0deg)) rotateY(var(--secret-rotate-y, 0deg)); transition: transform 180ms ease-out; pointer-events: none; }
.secret-modal--experimental .secret-modal__reward-copy { padding: 0 8px 8px; }
.secret-modal--experimental .secret-modal__reward-copy h2 { color: #3b3a3a; }
.secret-modal--experimental .secret-modal__scratch { width: 256px; height: 336px; border-radius: 28px; background: transparent; }
.secret-modal--experimental .secret-modal__scratch::before,
.secret-modal--experimental .secret-modal__scratch::after { position: absolute; z-index: 2; content: ''; pointer-events: none; }
.secret-modal--experimental .secret-modal__scratch::before { inset: 0; background: radial-gradient(circle at var(--secret-light-x, 50%) var(--secret-light-y, 50%), rgb(255 255 255 / 20%), transparent 58%); mix-blend-mode: screen; }
.secret-modal--experimental .secret-modal__scratch::after { inset: 0; background: linear-gradient(105deg, transparent 44%, rgb(255 255 255 / 6%) 46%, rgb(255 255 255 / 22%) 48%, rgb(255 255 255 / 56%) 49.5%, rgb(255 255 255 / 76%) 50%, rgb(255 255 255 / 56%) 50.5%, rgb(255 255 255 / 22%) 52%, rgb(255 255 255 / 6%) 54%, transparent 56%) 100% 0 / 320% 100% no-repeat; opacity: .8; animation: secret-card-sheen 3.2s linear infinite; }
@keyframes secret-card-sheen {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
.secret-modal--experimental .secret-modal__scratch > img { display: none; }
.secret-modal--final .secret-modal__card--scratch::before { display: none; }
.secret-modal--final .secret-modal__card--scratch {
  box-shadow: -30px 93px 39px rgb(251 24 115 / 4%), -17px 53px 33px rgb(251 24 115 / 16%), -8px 23px 25px rgb(251 24 115 / 26%), -2px 6px 14px rgb(251 24 115 / 30%);
}
.secret-modal--final .secret-modal__scratch::before { display: none; }
@property --secret-final-sheen-progress {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.secret-modal--final .secret-modal__scratch::after {
  inset: .05px -3.1px -2.75px .33px;
  border-radius: 29px;
  background: linear-gradient(140.434775deg,
    rgb(255 255 255 / 0%) calc(31.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 2.5%) calc(38.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 12%) calc(45.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 29%) calc(52.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 40%) calc(59.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 29%) calc(66.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 12%) calc(73.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 2.5%) calc(80.91% + 85% * var(--secret-final-sheen-progress)),
    rgb(255 255 255 / 0%) calc(87.91% + 85% * var(--secret-final-sheen-progress)));
  filter: blur(4px);
  mix-blend-mode: plus-lighter;
  /* One progress value moves the intact band and gently dims it near the edges. */
  opacity: calc(1 / (1 + 60 * var(--secret-final-sheen-progress) * var(--secret-final-sheen-progress)));
  animation: secret-final-card-sheen 4.8s cubic-bezier(.65, 0, .35, 1) infinite;
  animation-play-state: var(--secret-hover-play, running);
}
@keyframes secret-final-card-sheen {
  from { --secret-final-sheen-progress: 1; }
  to { --secret-final-sheen-progress: -1; }
}
.secret-modal--experimental .secret-modal__canvas { width: 256px; height: 336px; }
.secret-modal__scratch-coin-holder { position: absolute; z-index: 3; inset: 0; pointer-events: none; transform-origin: 50% 50%; transform: rotateX(var(--secret-rotate-x, 0deg)) rotateY(var(--secret-rotate-y, 0deg)); transition: transform 180ms ease-out; }
.secret-modal__scratch-coin { display: block; position: absolute; top: 0; left: 0; width: 88px; height: 95.273px; transform-origin: 18px 72px; pointer-events: none; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 18%)); will-change: transform; }
.secret-modal__scratch-coin-face { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; transform-origin: 18px 72px; transform: perspective(320px) rotateX(var(--scratch-coin-tilt-x, 0deg)) rotateY(var(--scratch-coin-tilt-y, 0deg)) scale(var(--scratch-coin-pressure, 1)); transition: transform 220ms cubic-bezier(.22, 1, .36, 1); }
.secret-modal--scratching .secret-modal__scratch-coin-face { transition-duration: 100ms; }
.secret-modal__scratch-coin img { position: absolute; width: 409.12%; height: 252.63%; max-width: none; left: -309.12%; top: -33.07%; pointer-events: none; }
.secret-modal__scratch-coin[hidden] { display: none; }
.secret-modal--intro .secret-modal__scratch-coin-holder,
.secret-modal--replacing .secret-modal__scratch-coin-holder { visibility: hidden; }
.secret-modal--coin-scratch .secret-modal__canvas { cursor: none; }
.secret-modal__card-depth { display: none; position: absolute; z-index: 2; left: -32px; top: -32px; width: 320px; height: 400px; pointer-events: none; }
.secret-modal--final .secret-modal__card-depth:not([hidden]) { display: block; }
.secret-modal__scratch-coin-fall { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; }
.secret-modal__scratch-dust { position: absolute; z-index: 3; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.secret-modal__scratch-flake { position: absolute; display: block; width: var(--flake-width); height: var(--flake-height); background: var(--flake-color); clip-path: polygon(0 18%, 70% 0, 100% 42%, 77% 100%, 14% 82%); pointer-events: none; will-change: transform, opacity; }
.secret-modal--experimental .secret-modal__copy { display: none; }
.secret-modal__card {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 257px;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
  border-radius: 20px;
  background: #fff;
}
.secret-modal__card--scratch { opacity: 1; transform: translateX(0); transition: opacity 400ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1); }
.secret-modal__card--revealed { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 420ms ease 100ms, transform 600ms cubic-bezier(.22, 1, .36, 1); }
.secret-modal__card--revealed:focus { outline: none; }
.secret-modal__scratch {
  position: relative;
  width: 240px;
  height: 240px;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f5f4;
  touch-action: none;
}
.secret-modal__scratch:focus-visible { outline: none; }
.secret-modal__scratch > img { position: absolute; inset: 20px; width: 200px; height: 200px; object-fit: contain; }
.secret-modal__canvas { position: absolute; inset: 0; width: 240px; height: 240px; cursor: crosshair; touch-action: none; }
.secret-modal__copy { display: flex; flex-direction: column; gap: 4px; padding: 0 8px 8px; }
.secret-modal__copy h2 { margin: 0; color: #000; font-size: 16px; font-weight: 700; line-height: 20px; }
.secret-modal__copy p { margin: 0; color: #3b3a3a; font-size: 14px; font-weight: 500; line-height: 20px; }
.secret-modal--revealed .secret-modal__content { top: calc(50% - 54px); }
.secret-modal__reward-art { position: relative; width: 240px; height: 240px; overflow: hidden; border-radius: 12px; background: #f5f5f4; }
.secret-modal__reward-art > img { position: absolute; top: 12px; left: 20px; width: 200px; height: 200px; object-fit: contain; }
.secret-modal__reward-format { position: absolute; z-index: 1; top: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 32px; max-width: 328px; padding: 4px 16px 4px 12px; border-bottom-right-radius: 16px; background: #fff; color: #3b3a3a; font-size: 11px; font-weight: 500; line-height: 12px; white-space: nowrap; pointer-events: none; }
.secret-modal__reward-format img { display: block; flex: none; }
.secret-modal__reward-badge { position: absolute; bottom: 12px; left: 12px; display: flex; min-width: 70px; height: 50px; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 12px; background: radial-gradient(ellipse at 50% 0%, #ffca79, #ff8459 32%, #ff3d39 63%, #ff266d); color: #fff; white-space: nowrap; }
.secret-modal__reward-badge strong { font-size: 18px; line-height: 22px; }
.secret-modal__reward-badge span { font-size: 11px; line-height: 12px; }
.secret-modal__sale-badge { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; color: #fff; font-size: 12px; font-weight: 500; line-height: 14px; text-align: right; }
.secret-modal__sale-badge span { position: relative; display: block; padding: 0 4px 2px; background: #ff4631; white-space: nowrap; }
.secret-modal__sale-badge span:first-child { z-index: 1; margin-bottom: -3px; padding: 2px 4px; border-radius: 6px 6px 0 0; }
.secret-modal__sale-badge span:nth-child(2) { z-index: 2; margin-bottom: -3px; border-radius: 6px 0 0 6px; }
.secret-modal__sale-badge span:last-child { z-index: 3; border-radius: 0 0 6px 6px; }
.secret-modal__reward-copy { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 8px 12px; }
.secret-modal__reward-copy h2 { margin: 0; color: #000; font-size: 16px; font-weight: 700; line-height: 20px; }
.secret-modal__reward-copy p { margin: 0; color: #3b3a3a; font-size: 12px; font-weight: 500; line-height: 14px; }
.secret-modal__replacement { position: absolute; top: 380px; left: 50%; display: flex; width: 220px; flex-direction: column; align-items: center; gap: 16px; opacity: 0; visibility: hidden; transform: translate(-50%, 16px); pointer-events: none; transition: opacity 320ms ease, transform 450ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 450ms; }
.secret-modal__replace { display: flex; height: 32px; align-items: center; justify-content: center; gap: 4px; padding: 4px 12px 4px 8px; border: 0; border-radius: 12px; background: #fff; color: #3b3a3a; font-family: inherit; font-size: 14px; font-weight: 500; line-height: 16px; white-space: nowrap; cursor: pointer; }
.secret-modal__replace-draft { display: flex; align-items: center; gap: 4px; }
.secret-modal__replace-experimental { display: none; }
.secret-modal--experimental .secret-modal__replace-draft { display: none; }
.secret-modal--experimental .secret-modal__replace-experimental { display: flex; align-items: center; gap: 4px; }
.secret-modal__replace img { flex: none; }
.secret-modal__replace[hidden], .secret-modal--second-reward .secret-modal__replacement { display: none; }
.secret-modal__replacement p { width: 205px; margin: 0; color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 500; line-height: 14px; text-align: center; }
.secret-modal__replacement p .secret-modal__replace-draft { display: block; }
.secret-modal--experimental .secret-modal__replacement p .secret-modal__replace-draft { display: none; }
.secret-modal--experimental .secret-modal__replacement p .secret-modal__replace-experimental { display: block; }
.secret-modal--experimental .secret-modal__replacement { top: 352px; width: 256px; gap: 0; }
.secret-modal__replacement-copy { display: flex; flex-direction: column; gap: 8px; }
.secret-modal__replacement-count { display: none; }
.secret-modal--experimental .secret-modal__replacement .secret-modal__replacement-count { display: block; color: #3b3a3a; }
.secret-modal--experimental.secret-modal--second-reward.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__content { top: calc(50% - 65px); }
.secret-modal--experimental.secret-modal--second-reward .secret-modal__replacement { display: flex; top: 352px; }
.secret-modal--experimental.secret-modal--second-reward .secret-modal__replacement p { width: 256px; }
.secret-modal--experimental.secret-modal--second-reward .secret-modal__replacement-warning .secret-modal__replace-experimental { white-space: pre-line; }
.secret-modal--experimental .secret-modal__replace:disabled { color: rgb(0 0 0 / 40%); cursor: default; opacity: 1; }
.secret-modal--experimental .secret-modal__replace { padding: 4px 8px 4px 12px; }
.secret-modal--experimental .secret-modal__replacement p { color: #747372; }
.secret-modal__actions { position: absolute; right: 16px; bottom: 36px; left: 16px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(36px); pointer-events: none; transition: opacity 420ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 600ms; }
.secret-modal--experimental .secret-modal__actions { right: 0; bottom: 0; left: 0; padding: 16px 16px 36px; border-radius: 28px 28px 0 0; background: #fff; }
.secret-modal__actions button { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; border: 0; border-radius: 12px; font-family: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.secret-modal__actions button:focus-visible, .secret-modal__replace:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.secret-modal__claim { background: #eb1000; color: #fff; }
.secret-modal__claim, .secret-modal__replace { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.secret-modal__replace { position: relative; }
.secret-modal__replace::after { position: absolute; inset: -6px; content: ''; }

.secret-modal__replace-revert { display: none; }
.secret-modal--experimental .secret-modal__replace-revert { display: block; }
.secret-modal--experimental .secret-modal__actions .secret-modal__replace {
  height: 48px;
  min-height: 48px;
  margin-top: 8px;
  gap: 8px;
  padding: 12px 20px 12px 12px;
  background: #f0f0ef;
  line-height: 20px;
}
.secret-modal--experimental .secret-modal__actions .secret-modal__replace-experimental { gap: 8px; }
.secret-modal--experimental .secret-modal__actions .secret-modal__replacement-warning {
  width: 100%;
  margin: 12px 0 0;
  color: #747372;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
}
.secret-modal--experimental .secret-modal__actions .secret-modal__replacement-warning .secret-modal__replace-experimental {
  display: block;
  white-space: pre-line;
}
.secret-modal--experimental .secret-modal__actions .secret-modal__replace::after { inset: 0; }
.secret-modal--experimental .secret-modal__replace:disabled img { filter: grayscale(1); opacity: .4; }
.secret-modal--experimental .secret-modal__actions button:focus-visible { outline-color: #3b3a3a; }

.secret-modal__confetti { display: none; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.secret-modal--celebrating .secret-modal__confetti { display: block; }
.secret-modal--celebrating .secret-modal__content { z-index: 2; }
.secret-modal--celebrating .secret-modal__actions { z-index: 2; }
.secret-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.secret-modal--revealed .secret-modal__hint { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.secret-modal--revealed .secret-modal__card--scratch { opacity: 0; transform: translateX(0); pointer-events: none; }
.secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__card--scratch { transform: rotateX(var(--secret-rotate-x, 0deg)) rotateY(var(--secret-rotate-y, 0deg)); transition: opacity 400ms ease, transform 180ms ease-out; }
.secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__card--scratch,
.secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__card--scratch::before,
.secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__scratch::after { animation-play-state: paused; }
.secret-modal--revealed .secret-modal__card--revealed { opacity: 1; transform: translateY(0); pointer-events: auto; }
.secret-modal--experimental.secret-modal--revealed .secret-modal__card--revealed { overflow: hidden; }
.secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__card--revealed { transform: rotateX(var(--secret-rotate-x, 0deg)) rotateY(var(--secret-rotate-y, 0deg)); transition: opacity 420ms ease 100ms, transform 180ms ease-out; will-change: transform; }
.secret-modal--experimental.secret-modal--revealed .secret-modal__reward-art::after { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at var(--secret-light-x, 50%) var(--secret-light-y, 50%), rgb(255 255 255 / 20%), transparent 60%); mix-blend-mode: screen; pointer-events: none; }
.secret-modal--revealed .secret-modal__replacement { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; transition-delay: 180ms, 180ms, 0s; }
.secret-modal--revealed .secret-modal__actions { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 180ms, 180ms, 0s; }
.secret-modal--replacing .secret-modal__content { top: calc(50% + 34px); transition: top 1200ms cubic-bezier(.4, 0, .2, 1), opacity 320ms ease, transform 600ms cubic-bezier(.22, 1, .36, 1); }
.secret-modal--experimental.secret-modal--replacing .secret-modal__content { top: calc(50% + 37px); }
.secret-modal--replacing .secret-modal__hint { opacity: 0; transform: translateY(-12px); pointer-events: none; }
.secret-modal--replacing .secret-modal__card--scratch { opacity: 1; pointer-events: none; transition: none; animation: secret-card-spin-in 1200ms linear both; }
.secret-modal--replacing .secret-modal__card--revealed { opacity: 0; pointer-events: none; transition: none; animation: secret-card-spin-out 1200ms linear both; }
.secret-modal--replacing .secret-modal__card--scratch::after,
.secret-modal--replacing .secret-modal__card--revealed::after { position: absolute; z-index: 5; inset: 0; content: ''; border-radius: inherit; background: rgb(255 255 255 / .001); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 5%, transparent 26%, transparent 74%, #000 95%, #000 100%); mask-image: linear-gradient(90deg, #000 0%, #000 5%, transparent 26%, transparent 74%, #000 95%, #000 100%); opacity: 0; pointer-events: none; animation: secret-spin-edge-blur 1200ms linear both; }
.secret-modal--replacing .secret-modal__replacement { opacity: 0; visibility: hidden; transform: translate(-50%, 16px); pointer-events: none; transition-delay: 0s; }
.secret-modal--replacing .secret-modal__actions { opacity: 0; transform: translateY(24px); pointer-events: none; transition-delay: 0s; }
@keyframes secret-card-spin-out {
  0% { opacity: 1; filter: blur(0); transform: rotateY(0deg) scale(1); animation-timing-function: cubic-bezier(.55, .05, .85, .55); }
  76% { opacity: 1; filter: blur(.35px); transform: rotateY(1170deg) scale(.97); }
  76.1%, 100% { opacity: 0; filter: blur(.35px); transform: rotateY(1170deg) scale(.97); }
}
@keyframes secret-card-spin-in {
  0%, 76% { opacity: 0; filter: blur(.35px); transform: rotateY(1170deg) scale(.97); }
  76.1% { opacity: 1; filter: blur(.35px); transform: rotateY(1170deg) scale(.97); animation-timing-function: cubic-bezier(.15, .7, .2, 1); }
  100% { opacity: 1; filter: blur(0); transform: rotateY(1440deg) scale(1); }
}
@keyframes secret-spin-edge-blur {
  0%, 100% { opacity: 0; }
  35% { opacity: .2; }
  65%, 76% { opacity: .9; }
  90% { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .secret-modal--experimental.secret-modal--intro .secret-modal__intro { display: none; animation: none; }
  .secret-modal__backdrop, .secret-modal__content, .secret-modal__hint, .secret-modal__card, .secret-modal__replacement, .secret-modal__actions { transition-duration: 1ms; transition-delay: 0ms; }
  .secret-modal--experimental:not(.secret-modal--revealed) .secret-modal__card--scratch { transform: none; transition-duration: 1ms; }
  .secret-modal__scratch-coin-holder { transform: none; transition: none; }
  .secret-modal__scratch-coin-face { transform: none; transition: none; }
  .secret-modal--experimental .secret-modal__scratch::after { animation: none; opacity: 0; }
  .secret-modal--final .secret-modal__scratch::after { animation: none; opacity: 1; }
  .secret-modal--experimental .secret-modal__card--scratch::before { animation: none; opacity: 0; }
  .secret-modal--experimental.secret-modal--revealed:not(.secret-modal--replacing) .secret-modal__card--revealed { transform: none; transition-duration: 1ms; }
  .secret-modal--replacing .secret-modal__card--scratch,
  .secret-modal--replacing .secret-modal__card--revealed { animation: none; transform: none; }
  .secret-modal--replacing .secret-modal__card--scratch::after,
  .secret-modal--replacing .secret-modal__card--revealed::after { animation: none; }
}
@media (max-width: 767px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  :root { --mobile-safe-top: env(safe-area-inset-top, 0px); --mobile-safe-bottom: env(safe-area-inset-bottom, 0px); --mobile-nav-height: calc(44px + var(--mobile-safe-top)); }
  html, body { min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: #fff; }
  body { display: block; }
  .app-shell { position: fixed; inset: 0; width: auto; height: 100dvh; border-radius: 0; }
  .status-bar, .selection-home-indicator { display: none; }
  .top-navigation { height: var(--mobile-nav-height); padding-top: var(--mobile-safe-top); }
  .selection-scroll, .sections-scroll { top: var(--mobile-nav-height); }
  .selection-scroll { padding-bottom: calc(16px + var(--mobile-safe-bottom)); }
  .category-selection-view.has-actions .selection-scroll { padding-bottom: calc(96px + var(--mobile-safe-bottom)); }
  .selection-actions { padding-bottom: var(--mobile-safe-bottom); }
  .payment-snackbar { top: calc(var(--mobile-nav-height) + 8px); width: calc(100% - 32px); }
  .prototype-settings__panel { top: calc(var(--mobile-nav-height) + 8px); }
  .secret-modal__experimental-status,
  .secret-modal__experimental-home { display: none; }
}