:root {
  --track-sand: #FBF3E3;
  --racing-green: #1F3D2B;
  --racing-green-dark: #14281C;
  --silk-red: #C8102E;
  --trophy-gold: #C6941C;
  --card: #FFFFFF;
  --ink: #2A2A24;
  --muted: #8A8272;
  --hairline: #E7DCC4;
}


* {
  box-sizing: border-box;
}


html,
body {
  margin: 0;
  padding: 0;
  background: var(--track-sand);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  -webkit-tap-highlight-color: transparent;
}


body {
  min-height: 100vh;
}


button,
input,
select {
  font: inherit;
}


#app {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 86px;
}


.page {
  display: none;
}


.page--active {
  display: block;
}


/* SCUDERIA */


.hero {
  position: relative;
  overflow: hidden;
  background: var(--racing-green);
  color: #F4EFDF;
  padding: 28px 20px 30px;
  border-radius: 0 0 28px 28px;
  text-align: center;
}


.hero__stripes {
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 26px,
      rgba(200, 16, 46, 0.85) 26px 34px,
      transparent 34px 60px
    );

  opacity: 0.5;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 85%
    );
}


.hero__badge {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  background: var(--trophy-gold);
  border: 3px solid var(--racing-green-dark);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--racing-green-dark);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}


.hero__badge span {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}


.hero__badge small {
  font-size: 10px;
  font-weight: 700;
}


.hero__name {
  position: relative;
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 26px;
}


.hero__handle {
  position: relative;
  margin: 4px 0 0;
  font-size: 14px;
  color: #C9D6C4;
}


.wallet {
  display: flex;
  gap: 10px;
  padding: 18px 16px 4px;
}


.wallet__item {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}


.wallet__icon {
  font-size: 20px;
}


.wallet__value {
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 600;
}


.wallet__label {
  font-size: 11px;
  color: var(--muted);
}


.board {
  padding: 20px 16px 0;
}


.board__title {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--racing-green);
  margin: 0 0 10px 2px;
}


.board__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}


.bib {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 14px 12px 12px;
}


.bib__number {
  position: absolute;
  top: -8px;
  right: 10px;
  background: var(--silk-red);
  color: #FBF3E3;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
}


.bib__value {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--racing-green);
}


.bib__label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}


.footnote {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: 22px 0 0;
}


/* CAVALLINE HERO */




















/* COLLECTION STATS */




















.progress {
  height: 8px;
  margin: 10px 0 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #EEE4D0;
}











/* CONTROLS */


.collectionControls {
  padding: 0 16px;
}























.filterButton {
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}


.filterButton--active {
  border-color: var(--racing-green);
  background: var(--racing-green);
  color: #FFFFFF;
}








/* COLLECTION */


.collectionBoard {
  padding: 20px 16px 8px;
}


.collectionBoard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}


.collectionBoard__header h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  color: var(--racing-green);
}


.collectionBoard__header span {
  color: var(--muted);
  font-size: 11px;
}


.collectionMessage {
  padding: 28px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}


.collectionMessage--hidden {
  display: none;
}


/* WAIFU GRID */


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


.waifuCard {
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}


.waifuCard:active {
  transform: scale(0.98);
}


.waifuCard--maxed {
  border-color: rgba(198, 148, 28, 0.65);
}


.waifuCard--missing {
  opacity: 0.68;
}


.waifuCard__image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background:
    linear-gradient(
      145deg,
      #E5ECDD,
      #F5ECD9
    );
}


.waifuCard__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}


.waifuCard__photo--loaded {
  opacity: 1;
}


.waifuCard__placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  opacity: 0.45;
}


.waifuCard--missing
.waifuCard__photo {
  filter: grayscale(0.85);
}


.waifuCard--missing
.waifuCard__placeholder {
  filter: grayscale(1);
}


.waifuCard__id {
  position: absolute;
  z-index: 2;
  left: 7px;
  top: 7px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(20, 40, 28, 0.86);
  color: white;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
}


.waifuCard__special {
  position: absolute;
  z-index: 2;
  right: 7px;
  top: 7px;
  display: flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  font-size: 13px;
}


.waifuCard__videoBadge {
  position: absolute;
  z-index: 2;
  right: 7px;
  top: 7px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.9);
  color: #FFFFFF;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}


.waifuCard__image:has(.waifuCard__special) .waifuCard__videoBadge,
.waifuCard__videoBadge--offset {
  right: 36px;
}


.waifuCard__body {
  padding: 10px;
}


.waifuCard__title {
  overflow: hidden;
  min-height: 36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 800;
  line-height: 18px;
  color: var(--ink);
}


.waifuCard__version {
  min-height: 16px;
  margin-top: 1px;
  font-family: 'Oswald', sans-serif;
  font-size: 10px;
  color: var(--muted);
}


.waifuCard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 8px;
}


.rarityBadge {
  overflow: hidden;
  padding: 3px 7px;
  border-radius: 999px;
  background: #E6EFE7;
  color: var(--racing-green);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.rarityBadge--rare {
  background: #F4E7B9;
  color: #79580B;
}

.rarityBadge--epic {
  background: #D0E4FE;
  color: #1A4E9E;
}


.waifuCard__level {
  flex: 0 0 auto;
  font-family: 'Oswald', sans-serif;
  font-size: 11px;
  color: var(--racing-green);
}


.waifuCard__level--max {
  color: var(--trophy-gold);
}


/* LOAD MORE */


.loadMoreButton {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--racing-green);
  border-radius: 12px;
  background: transparent;
  color: var(--racing-green);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}


.loadMoreButton--hidden {
  display: none;
}


/* NAV */


.bottomNav {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 1fr;

  padding:
    7px 10px
    calc(
      7px +
      env(safe-area-inset-bottom)
    );

  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
  box-shadow: 0 -4px 18px rgba(31, 61, 43, 0.06);
}


.bottomNav__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}


.bottomNav__item span {
  font-size: 20px;
}


.bottomNav__item small {
  font-size: 10px;
  font-weight: 800;
}


.bottomNav__item--active {
  color: var(--racing-green);
  background: #EEF2E8;
}


@media (
  prefers-reduced-motion:
  no-preference
) {
  .hero__badge {
    animation:
      pop-in
      0.4s
      ease-out;
  }
}


@keyframes pop-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}


@media (
  min-width: 420px
) {
  .waifuGrid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }
}


/* WAIFU DETAIL */

body.waifuDetailOpen { overflow: hidden; }

.waifuDetail {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.waifuDetail--open { display: flex; }

.waifuDetail__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(12, 22, 16, 0.68);
  backdrop-filter: blur(3px);
}

.waifuDetail__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 94vh;
  overflow-y: auto;
  background: var(--track-sand);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.24);
  animation: waifu-detail-in 0.22s ease-out;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}

.waifuDetail__handle {
  width: 42px;
  height: 4px;
  margin: 9px auto 8px;
  border-radius: 999px;
  background: #CFC5B1;
}

.waifuDetail__close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 40, 28, 0.88);
  color: #FFFFFF;
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.waifuDetail__image {
  position: relative;
  width: calc(100% - 28px);
  margin: 0 14px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(145deg, #E5ECDD, #F5ECD9);
}

.waifuDetail__photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.waifuDetail__photo--loaded { opacity: 1; }

.waifuDetail__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  opacity: 0.35;
}

.waifuDetail__id {
  position: absolute;
  z-index: 3;
  left: 10px;
  top: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(20, 40, 28, 0.88);
  color: #FFFFFF;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
}

.waifuDetail__special {
  position: absolute;
  z-index: 3;
  right: 10px;
  bottom: 10px;
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  font-size: 18px;
}

.waifuDetail__videoBadge {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 10px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.9);
  color: #FFFFFF;
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.waifuDetail__content { padding: 17px 16px 0; }

.waifuDetail__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.waifuDetail__heading h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  line-height: 1.1;
  color: var(--racing-green);
}

.waifuDetail__heading p {
  margin: 4px 0 0;
  color: var(--muted);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
}

.waifuDetail__heading .rarityBadge {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 5px 9px;
  font-size: 10px;
}





.waifuDetail__description > span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}



.waifuDetail__description {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--card);
}

.waifuDetail__description p {
  margin: 7px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.waifuDetail__source {
  display: none;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px solid var(--racing-green);
  border-radius: 12px;
  color: var(--racing-green);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

@keyframes waifu-detail-in {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


.collectionSearchFields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px 100px;
  gap: 8px;
}

.searchBox--name {
  position: relative;
}





.searchSuggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(20, 23, 31, 0.98);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.searchSuggestions[hidden] {
  display: none;
}

.searchSuggestions__item {
  width: 100%;
  border: 0;
  padding: 11px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.searchSuggestions__item + .searchSuggestions__item {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.searchSuggestions__item:active {
  background: rgba(255, 255, 255, 0.08);
}

.searchSuggestions__item small {
  opacity: 0.55;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .collectionSearchFields {
    grid-template-columns: 1fr 1fr;
  }

  .searchBox--name {
    grid-column: 1 / -1;
  }
}


/* Suggerimenti ricerca: contrasto esplicito, indipendente dal tema Telegram */
.searchSuggestions {
  background: #f7f7f8;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #17181c;
}

.searchSuggestions__item {
  background: #f7f7f8;
  color: #17181c;
}

.searchSuggestions__item span {
  color: #17181c;
  font-weight: 650;
}

.searchSuggestions__item small {
  color: #666a73;
  opacity: 1;
}

.searchSuggestions__item + .searchSuggestions__item {
  border-top-color: rgba(0, 0, 0, 0.09);
}

.searchSuggestions__item:hover,
.searchSuggestions__item:focus-visible,
.searchSuggestions__item:active {
  background: #e9eaed;
  color: #111216;
}


/* ============================================================
   TEMA MINI APP - NERO / BLU / BIANCO
   ============================================================ */

:root {
  --appBlack: #000000;
  --appSurface: #0b0b0d;
  --appSurfaceRaised: #121216;
  --appBlue: #1687ff;
  --appBluePressed: #0874e8;
  --appWhite: #ffffff;
  --appMuted: #a9adb5;
  --appBorder: rgba(255, 255, 255, 0.12);
}

html,
body {
  background: var(--appBlack) !important;
  color: var(--appWhite) !important;
}

body,
.app,
main,
.page,
.screen {
  background-color: var(--appBlack) !important;
  color: var(--appWhite) !important;
}

/* Testi */
h1,
h2,
h3,
h4,
p,
label,
strong,
.collectionControls {
  color: var(--appWhite);
}

/* Pannelli e card */
.card,
.panel,
.waifuCard,
.waifuDetail__sheet {
  background-color: var(--appSurface) !important;
  color: var(--appWhite) !important;
  border-color: var(--appBorder) !important;
}

/* Campi di ricerca e select */
select,
.waifuSort {
  background-color: var(--appSurfaceRaised) !important;
  color: var(--appWhite) !important;
  border-color: var(--appBorder) !important;
}



/* Bottoni principali e filtri */
button,
.filterButton,
#loadMoreButton {
  color: var(--appWhite);
}

.filterButton--active,
#loadMoreButton {
  background: var(--appBlue) !important;
  color: var(--appWhite) !important;
  border-color: var(--appBlue) !important;
}

.filterButton--active:active,
#loadMoreButton:active {
  background: var(--appBluePressed) !important;
}

/* Suggerimenti ricerca */
.searchSuggestions {
  background: var(--appSurfaceRaised) !important;
  border: 1px solid var(--appBorder) !important;
  color: var(--appWhite) !important;
}

.searchSuggestions__item {
  background: var(--appSurfaceRaised) !important;
  color: var(--appWhite) !important;
}

.searchSuggestions__item span {
  color: var(--appWhite) !important;
}

.searchSuggestions__item small {
  color: var(--appMuted) !important;
}

.searchSuggestions__item:hover,
.searchSuggestions__item:focus-visible,
.searchSuggestions__item:active {
  background: #1a1a20 !important;
  color: var(--appWhite) !important;
}

/* Barra progresso */
#collectionProgress {
  background: var(--appBlue) !important;
}

/* Link */
a {
  color: #49a4ff;
}

/* Badge evento */
.waifuCard__special {
  color: var(--appWhite);
}

/* Bottom sheet dettaglio */
.waifuDetail {
  color: var(--appWhite);
}

.waifuDetail__sheet {
  background: #08080a !important;
}

/* Scrollbar, dove supportata */
* {
  scrollbar-color: #303038 var(--appBlack);
}


/* ============================================================
   UI REFRESH - DARK TELEGRAM / TCG STYLE
   Mantiene invariati ID, logica JS e API.
   ============================================================ */

:root {
  --tcg-bg: #0d0f13;
  --tcg-panel: #181b21;
  --tcg-panel-2: #20242c;
  --tcg-border: #2a303a;
  --tcg-blue: #4ca4ff;
  --tcg-blue-strong: #1687ff;
  --tcg-white: #f7f8fb;
  --tcg-muted: #9da9bb;
}

html,
body {
  background: var(--tcg-bg) !important;
  color: var(--tcg-white) !important;
}

body {
  padding-left: 16px;
  padding-right: 16px;
}











/* Contenitore e pannelli */
main,
.app,
.page,
.screen {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.collectionControls,
.card,
.panel,
.waifuCard,
.waifuDetail__sheet {
  background: var(--tcg-panel) !important;
  border: 1px solid var(--tcg-border) !important;
  border-radius: 20px !important;
}

/* Search */
.collectionSearchFields {
  gap: 10px !important;
}













/* Suggerimenti come pannello attaccato alla ricerca */
.searchSuggestions {
  margin-top: 4px;
  background: #11151b !important;
  border: 1px solid var(--tcg-border) !important;
  border-radius: 18px !important;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
}

.searchSuggestions__item {
  min-height: 58px;
  padding: 10px 14px !important;
  background: #11151b !important;
  color: var(--tcg-white) !important;
}

.searchSuggestions__item span {
  color: var(--tcg-white) !important;
  font-size: 16px;
  font-weight: 700;
}

.searchSuggestions__item small {
  color: var(--tcg-muted) !important;
  font-size: 13px;
}

.searchSuggestions__item + .searchSuggestions__item {
  border-top: 1px solid #252a33 !important;
}

.searchSuggestions__item:hover,
.searchSuggestions__item:focus-visible,
.searchSuggestions__item:active {
  background: var(--tcg-panel-2) !important;
}

/* Filtri */


.filterButton {
  min-height: 44px;
  border-radius: 14px !important;
  background: var(--tcg-panel-2) !important;
  border: 1px solid var(--tcg-border) !important;
  color: #b7c1d1 !important;
  font-weight: 650;
}

.filterButton--active {
  background: var(--tcg-blue-strong) !important;
  border-color: var(--tcg-blue-strong) !important;
  color: #fff !important;
}

/* Select / controlli */
select,
.waifuSort,
#waifuSort {
  min-height: 54px;
  padding-left: 14px;
  padding-right: 14px;
  border-radius: 16px !important;
  background: var(--tcg-panel-2) !important;
  border: 1px solid var(--tcg-border) !important;
  color: var(--tcg-white) !important;
}

/* Card cavalline */
.waifuCard {
  overflow: hidden;
  background: #14171c !important;
  transition: transform .14s ease, border-color .14s ease;
}

@media (hover: hover) and (pointer: fine) {
  .waifuCard:hover {
    transform: translateY(-2px);
    border-color: #3b4655 !important;
  }
}

.waifuCard__body,
.waifuCard__title {
  color: var(--tcg-white) !important;
}

.waifuCard__version,
.waifuCard__footer {
  color: var(--tcg-muted) !important;
}

.waifuCard__special {
  background: rgba(13,15,19,.84) !important;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

/* Progress */
.progress {
  background: #252a33 !important;
}

#collectionProgress {
  background: var(--tcg-blue-strong) !important;
}

/* Pulsanti */
#loadMoreButton {
  background: var(--tcg-blue-strong) !important;
  color: #fff !important;
  border-radius: 15px !important;
}

/* Empty state */
#waifuEmpty {
  color: var(--tcg-muted);
  padding: 48px 18px;
  text-align: center;
}

/* Detail sheet */
.waifuDetail__sheet {
  background: #111419 !important;
  border-color: #303640 !important;
}

.waifuDetail__sheet h1,
.waifuDetail__sheet h2,
.waifuDetail__sheet h3,
.waifuDetail__sheet strong {
  color: var(--tcg-white) !important;
}

.waifuDetail__sheet p,
.waifuDetail__sheet span {
  color: inherit;
}

/* Mobile */
@media (max-width: 520px) {
  body {
    padding-left: 12px;
    padding-right: 12px;
  }

  

  

  

  

  .collectionSearchFields {
    grid-template-columns: 1fr 1fr !important;
  }

  .searchBox--name {
    grid-column: 1 / -1;
  }
}


/* ============================================================
   LAYOUT REFERENCE - STEP 1
   ============================================================ */

/* Nessun riquadro verde/rosso per possedute/mancanti/max */
.waifuCard,
.waifuCard--missing,
.waifuCard--maxed,
.waifuCard.waifuCard--missing,
.waifuCard.waifuCard--maxed {
  border-color: #2a303a !important;
  box-shadow: none !important;
}

.waifuCard--missing,
.waifuCard--maxed {
  background: #14171c !important;
}

/* Elimina eventuali overlay/tinte di stato */
.waifuCard--missing::before,
.waifuCard--missing::after,
.waifuCard--maxed::before,
.waifuCard--maxed::after {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Il riepilogo collezione, prima beige, diventa il blocco superiore */








/* Palette coerente allo screenshot */
html,
body {
  background: #0d0f13 !important;
  color: #f7f8fb !important;
}

.collectionControls {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-shadow: none !important;
}





.filterButton--active,
#loadMoreButton {
  background: #1687ff !important;
  border-color: #1687ff !important;
  color: #fff !important;
}


/* ============================================================
   FIX REALE: HERO VERDE/ROSSO RIMOSSO + NAV SPOSTATA IN ALTO
   ============================================================ */



/* La vecchia bottomNav ora è una tab bar superiore */
.bottomNav {
  position: relative !important;
  z-index: 20 !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 760px !important;
  transform: none !important;

  margin: 16px auto 18px !important;
  padding: 6px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;

  background: #181b21 !important;
  border: 1px solid #2a303a !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.bottomNav__item {
  min-height: 52px !important;
  padding: 8px 12px !important;
  flex-direction: row !important;
  gap: 8px !important;

  background: transparent !important;
  color: #9da9bb !important;
  border: 0 !important;
  border-radius: 15px !important;
  font-weight: 700 !important;
}

.bottomNav__item span {
  font-size: 18px !important;
}

.bottomNav__item small {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: inherit !important;
}

.bottomNav__item--active {
  background: #20242c !important;
  color: #ffffff !important;
}

/* Testi della Mini App: frase principale, poi i dettagli tra parentesi
   come frasi complete ("Frase. (Dettaglio.)"). I dettagli sono un po' più
   chiari (dialoghi, guida "?", card con testo). */
.textAside { color: #8995a3; font-size: 0.92em; }
.appDialog .textAside { color: inherit; opacity: 0.7; }
/* Nessuno spazio riservato a una barra fissa in fondo */
body,
.app {
  padding-bottom: 0 !important;
}

/* Cavalline parte direttamente dal riepilogo superiore */
#cavallinePage {
  padding-top: 0 !important;
}



/* Sicurezza: nessun residuo beige/verde/rosso sulla navigazione */
.bottomNav,
.bottomNav__item,
.bottomNav__item--active {
  border-color: #2a303a !important;
}

@media (max-width: 520px) {
  .bottomNav {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .bottomNav__item span {
    font-size: 17px !important;
  }

  .bottomNav__item small {
    font-size: 14px !important;
  }
}


/* ============================================================
   FILTRI COLLASSABILI
   Cerca cavalla resta sempre visibile.
   Tutto il resto si apre toccando "Filtri".
   ============================================================ */

.collectionSearchFields--nameOnly {
  display: block !important;
  margin-bottom: 12px !important;
}

.collectionSearchFields--nameOnly .searchBox--name {
  width: 100% !important;
}

.filtersPanel {
  width: 100%;
  margin: 0;
  background: #181b21;
  border: 1px solid #2a303a;
  border-radius: 18px;
  overflow: hidden;
}

























@media (max-width: 520px) {
  .collectionSearchFields--nameOnly {
    display: block !important;
  }

  
}


/* Un po' più di spazio tra Versione e ID */



/* ============================================================
   SEARCH + FILTRI - più vicini al layout di riferimento
   ============================================================ */

.collectionControls {
  padding: 0 16px !important;
}

/* Due blocchi distinti, non attaccati ai bordi */
.collectionSearchFields--nameOnly {
  margin: 0 0 34px 0 !important;
}

.collectionSearchFields--nameOnly .searchBox--name {
  min-height: 74px !important;
  height: 74px !important;
  border-radius: 20px !important;
  background: #1a1d23 !important;
  border: 1px solid #303540 !important;
  box-shadow: none !important;
}

/* Niente lente/emoji davanti al campo, come nel riferimento */








/* Focus più discreto: il riferimento non ha il bordo blu permanente */


/* Riquadro Filtri separato e più compatto */
.filtersPanel {
  margin: 0 !important;
  background: #1a1d23 !important;
  border: 1px solid #303540 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}





/* Quando aperto, il contenuto resta nello stesso pannello */


/* Mobile: lascia margine laterale come nella seconda immagine */
@media (max-width: 520px) {
  .collectionControls {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .collectionSearchFields--nameOnly {
    margin-bottom: 34px !important;
  }

  .collectionSearchFields--nameOnly .searchBox--name {
    min-height: 70px !important;
    height: 70px !important;
  }

  
}


/* FIX STRUTTURALE SPAZIO SEARCH / FILTRI */
.collectionSearchFields--nameOnly {
  margin-bottom: 34px !important;
}

.filtersPanel {
  margin-top: 0 !important;
}


/* ============================================================
   FONT PERSONALIZZATO
   ============================================================ */

@font-face {
  font-family: "SDKUSWebLocal";
  src:
    url("./fonts/SDK_US_Web.woff2?v=4") format("woff2"),
    url("./fonts/SDK_US_Web.ttf?v=4") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

html,
body,
button,
input,
select,
textarea,
summary {
  font-family: Arial, sans-serif !important;
}


/* ============================================================
   FONT PERSONALIZZATO - APPLICAZIONE COMPLETA
   Alcuni componenti avevano font-family più specifici.
   ============================================================ */

html,
body,
body *:not(svg):not(svg *) {
  font-family: Arial, sans-serif !important;
}

/* Form controls can keep a UA font unless explicitly inherited. */
button,
input,
select,
textarea,
option,
summary {
  font-family: Arial, sans-serif !important;
}


/* ============================================================
   TARATURA SDK_US_Web
   Questo font appare visivamente più grande/pesante del precedente.
   Manteniamo box e layout, ridimensionando solo la tipografia.
   ============================================================ */

.bottomNav__item,
.bottomNav button {
  font-size: 15px !important;
}









.waifuCard__name {
  font-size: 14px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
}

.waifuCard__version {
  font-size: 12px !important;
  font-weight: 400 !important;
}

.rarityBadge {
  font-size: 11px !important;
}

.filtersPanel input,
.filtersPanel select,
.filtersPanel button {
  font-size: 13px !important;
}

/* Evita che il browser sintetizzi un grassetto eccessivo su un TTF a peso singolo. */
body {
  font-synthesis: none;
}


/* FONT LOCALE DEFINITIVO */
:root,
html,
body,
body *,
input,
button,
select,
textarea,
option,
summary {
  font-family: Arial, sans-serif !important;
}
/* Pannello dal basso che su Android sostituisce il menù a tendina del
   telefono (core/350-select-sheet.js). Stesso aspetto delle guide. */
.selectSheet { position: fixed; inset: 0; z-index: 100009; display: flex; align-items: flex-end; justify-content: center; }
.selectSheet[hidden] { display: none; }
.selectSheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.selectSheet__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 70dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #111823;
  color: #eef2f8;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.selectSheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.selectSheet__title { font-size: 15px; font-weight: 800; }
.selectSheet__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.selectSheet__list { overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px; }
.selectSheet__group {
  padding: 12px 10px 4px;
  color: #8995a3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.selectSheet__option {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 12px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
}
.selectSheet__option:active { background: rgba(255, 255, 255, 0.08); }
.selectSheet__option.is-selected { background: rgba(93, 169, 255, 0.16); color: #9ccbff; font-weight: 800; }
.selectSheet__option.is-selected::after { content: "✓"; float: right; }
.selectSheet__option:disabled { opacity: 0.4; }
body.selectSheetOpen { overflow: hidden; }
/* ============================================================
   FILTRI E ORDINAMENTO (core/008-filter-sort.js)
   Due tasti, etichette dei filtri attivi e due pannelli dal basso.
   ============================================================ */
.fsBar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 6px;
}
.fsBar .fsBtn[hidden] { display: none; }
.fsBar:has(.fsBtn[hidden]) { grid-template-columns: minmax(0, 1fr); }
.fsBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 12px;
  border: 1px solid #315b80;
  border-radius: 12px;
  background: #101b28;
  color: #e8f0fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fsBtn:disabled { opacity: 0.45; cursor: default; }
.fsBtn.is-on { border-color: #5da9ff; box-shadow: inset 0 0 0 1px #5da9ff; }
.fsBtn__text { display: grid; min-width: 0; }
.fsBtn__text strong { font-size: 13px; font-weight: 800; }
.fsBtn__text small {
  overflow: hidden;
  color: #8aa4bf;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fsBtn__count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  background: #2f7de0;
  color: #fff;
  font-size: 11px;
}
.fsBtn__count[hidden] { display: none; }
.fsBtn__arrow { color: #8aa4bf; font-size: 12px; }

.fsChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.fsChips[hidden] { display: none; }
.fsChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid #2b4b6c;
  border-radius: 99px;
  background: #16263a;
  color: #cfe3fa;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fsChip__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fsChip b { color: #8aa4bf; font-weight: 700; }

/* ---- Pannelli */
.fsSheet { position: fixed; inset: 0; z-index: 100008; display: flex; align-items: flex-end; justify-content: center; }
.fsSheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.fsSheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 86dvh;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: #111823;
  color: #eef2f8;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
}
.fsSheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fsSheet__header strong { font-size: 17px; }
.fsSheet__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.fsSheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 2px 16px 14px; }
.fsSheet__footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fsSheet__footer button {
  min-height: 46px;
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  background: #0c131d;
  color: #d5dfeb;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}
.fsSheet__footer .fsApply { border: 0; background: linear-gradient(135deg, #2f7de0, #8d55ff); color: #fff; }
.fsSheet__footer .fsApply.is-empty { background: #2a3445; color: #aab6c5; }

.fsGroup { padding-top: 14px; }
.fsGroup h4 {
  margin: 0 0 8px;
  color: #8995a3;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fsOptions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fsOption,
.fsSortItem {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  background: #0c131d;
  color: #d5dfeb;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fsOption__label { font-size: 13.5px; font-weight: 800; }
.fsOption__desc { color: #8995a3; font-size: 11px; line-height: 1.3; }
.fsOption.is-on,
.fsSortItem.is-on { border-color: #5da9ff; background: #1d3c63; color: #fff; }
.fsOption.is-on .fsOption__label::before { content: "✓ "; color: #9ccbff; }
.fsOption.is-on .fsOption__desc,
.fsSortItem.is-on .fsOption__desc { color: #b8d3f0; }
.fsEventSelect {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  background: #0c131d;
  color: #d5dfeb;
  font: inherit;
  font-size: 14px;
}

.fsDirections { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-top: 14px; }
.fsDirection {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  background: #0c131d;
  color: #d5dfeb;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.fsDirection.is-on { border-color: #5da9ff; background: #1d3c63; color: #fff; }
.fsSortList { display: grid; gap: 6px; padding-top: 12px; }
.fsSortItem.is-on .fsOption__label::after { content: " ✓"; color: #9ccbff; }

body.fsSheetOpen { overflow: hidden; }

/* Binder: il vecchio tasto Filtri, il suo pannello e le sue etichette
   lasciano il posto ai due tasti nuovi; "🧰 Tools" resta da solo. */
#binderPage.has-filter-sort .binderPanelsBar__btn[data-panel="filters"],
#binderPage.has-filter-sort .binderFilterChips,
#binderPage.has-filter-sort .binderPanel:not(.binderPanel--tools) { display: none !important; }
#binderPage.has-filter-sort .binderPanelsBar { grid-template-columns: 1fr; margin-top: 4px; }

/* Preferiti: il vecchio tasto Filtri e i suoi menù lasciano il posto ai
   due tasti nuovi. */
#favoritesPage.has-filter-sort #favoritesFiltersToggle,
#favoritesPage.has-filter-sort #favoritesAdvancedFilters { display: none !important; }
#favoritesPage.has-filter-sort .favoritesFilterTop { grid-template-columns: minmax(0, 1fr) !important; }

/* Scambi: le tre liste perdono il vecchio tasto Filtri e i menù; la
   ricerca prende tutta la riga. */
.has-filter-sort > .tradeOfferFilters__top { grid-template-columns: minmax(0, 1fr) !important; }
.has-filter-sort .tradeOfferFilters__toggle,
.has-filter-sort .tradeOfferFilters__panel { display: none !important; }
.fsWaves { margin-top: 8px; }

/* Ruota: i menù Evento, Wave e Ordine lasciano il posto ai due tasti. */
.wheelSelectorFilters.is-replaced { display: none !important; }

/* Scorciatoie e ricerca degli eventi nel pannello Filtri. */
.fsPresetList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.fsPreset { border-style: dashed; }
.fsPreset.is-on { border-style: solid; }
.fsEventSearch {
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 0 12px;
  border: 1px solid #2a3a4f;
  border-radius: 12px;
  background: #0c131d;
  color: #eef2f8;
  font: inherit;
  font-size: 14px;
}
.fsEventList .fsOption[hidden] { display: none; }
.fsSheet__panel { will-change: transform; }


/* ============================================================
   DETTAGLIO CAVALLINA - FIX REALE BOX
   ============================================================ */

/* I tre box statistiche */






/* Box descrizione */
.waifuDetail__description {
  background: #1a1d23 !important;
  border-color: #303640 !important;
  color: #f7f8fb !important;
}

.waifuDetail__description > span {
  color: #9eafc5 !important;
}

.waifuDetail__description p {
  color: #f7f8fb !important;
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Link fonte */
.waifuDetail__source {
  background: #1a1d23 !important;
  border-color: #303640 !important;
  color: #9fc5ff !important;
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
}


/* ============================================================
   EVENTO DETTAGLIO - FONT DINAMICO REALE
   #waifuDetailEvent viene misurato via JS e ridotto solo se serve.
   ============================================================ */

#waifuDetailEvent {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.1 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
}


/* ============================================================
   FILTRO EVENTI
   ============================================================ */


#waifuEventFilter {
  min-width: 0 !important;
  max-width: 62% !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis;
}

#waifuEventFilter option {
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
}

@media (max-width: 520px) {
  #waifuEventFilter {
    max-width: 68% !important;
    font-size: 11px !important;
  }
}


/* Mostra la cavallina direttamente nella chat privata del bot */





/* ============================================================
   DETTAGLIO - AZIONE "APRI NEL BOT"
   ============================================================ */



.waifuDetail__showBotAction {
  position: static !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 14px 0 2px !important;
  padding: 0 16px !important;

  display: grid !important;
  grid-template-columns: 28px 1fr 20px !important;
  align-items: center !important;
  gap: 10px !important;

  border: 1px solid #303640 !important;
  border-radius: 16px !important;
  background: #1a1d23 !important;
  color: #f7f8fb !important;

  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.waifuDetail__showBotIcon {
  font-family: Arial, sans-serif !important;
  font-size: 18px !important;
  text-align: center !important;
}

.waifuDetail__showBotText {
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #f7f8fb !important;
}



.waifuDetail__showBotAction:active {
  transform: scale(.985) !important;
  background: #20242b !important;
}

.waifuDetail__showBotAction:disabled {
  opacity: .65 !important;
  cursor: default !important;
}


/* ============================================================
   FONT
   Il font personalizzato viene usato SOLO per il nome cavallina.
   Tutto il resto della Mini App usa un font UI normale.
   ============================================================ */

html,
body,
input,
button,
select,
textarea,
option,
summary {
  font-family: Arial, Helvetica, sans-serif !important;
}

/* Nome sulle card della collezione */
.waifuCard__name {
  font-family: "SDKUSWebLocal", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Nome grande nel dettaglio */
#waifuDetailName {
  font-family: "SDKUSWebLocal", Arial, sans-serif !important;
  font-weight: 400 !important;
}

/* Impedisce al font custom di propagarsi agli altri elementi */
.waifuDetail__showBotAction,
.waifuDetail__showBotText {
  font-family: Arial, Helvetica, sans-serif !important;
}


/* ============================================================
   WEDDING CARD FALLBACK
   The ring is shown only while the actual card image is unavailable.
   ============================================================ */

.waifuCard__placeholder--wedding {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 38px !important;
  background: #15181d !important;
}

.waifuDetail__placeholder--wedding {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 320px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 52px !important;
  background: #15181d !important;
}


/* ============================================================
   BINDER
   ============================================================ */

.waifuBinderActions {
  width: 100%;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.waifuBinderButton {
  min-width: 0;
  min-height: 42px;
  padding: 8px 5px;

  border: 1px solid #303640;
  border-radius: 12px;

  background: #1a1d23;
  color: #f7f8fb;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;
  font-size: 12px;

  cursor: pointer;

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .12s ease;
}

.waifuBinderButton:active {
  transform: scale(.97);
}

.waifuBinderButton:disabled {
  opacity: .65;
}

.waifuBinderButton--need10.is-active {
  border-color: #ff5c5c;
  background:
    rgba(255, 92, 92, .12);
  box-shadow:
    0 0 0 1px #ff5c5c,
    0 0 16px
      rgba(255, 92, 92, .22);
}

.waifuBinderButton--need1.is-active {
  border-color: #f2c94c;
  background:
    rgba(242, 201, 76, .12);
  box-shadow:
    0 0 0 1px #f2c94c,
    0 0 16px
      rgba(242, 201, 76, .20);
}

.waifuBinderButton--trade.is-active {
  border-color: #46d17d;
  background:
    rgba(70, 209, 125, .12);
  box-shadow:
    0 0 0 1px #46d17d,
    0 0 16px
      rgba(70, 209, 125, .20);
}


/* Bordo della carta / dettaglio */

.waifuCard.binderStatus--need10,
.waifuDetail.binderStatus--need10 {
  border-color:
    #ff5c5c !important;
  box-shadow:
    0 0 0 1px #ff5c5c,
    0 0 18px
      rgba(255, 92, 92, .22)
      !important;
}

.waifuCard.binderStatus--need1,
.waifuDetail.binderStatus--need1 {
  border-color:
    #f2c94c !important;
  box-shadow:
    0 0 0 1px #f2c94c,
    0 0 18px
      rgba(242, 201, 76, .20)
      !important;
}

.waifuCard.binderStatus--trade,
.waifuDetail.binderStatus--trade {
  border-color:
    #46d17d !important;
  box-shadow:
    0 0 0 1px #46d17d,
    0 0 18px
      rgba(70, 209, 125, .20)
      !important;
}

@media (max-width: 360px) {
  .waifuBinderButton {
    font-size: 11px;
    padding-left: 3px;
    padding-right: 3px;
  }
}


/* ============================================================
   PAGINA BINDER
   ============================================================ */

.binderPage {
  padding: 18px 14px 32px;
}







.binderPage__total {
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #303640;
  border-radius: 15px;
  background: #1a1d23;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px;
  font-weight: 800;
}

.binderTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.binderTab {
  min-width: 0;
  min-height: 58px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #303640;
  border-radius: 13px;
  background: #1a1d23;
  color: #d7dce4;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px;
}

.binderTab strong {
  font-size: 15px;
  color: #fff;
}

.binderTab--need10.is-active {
  border-color: #ff5c5c;
  background: rgba(255, 92, 92, .12);
  box-shadow: 0 0 0 1px #ff5c5c;
}

.binderTab--need1.is-active {
  border-color: #f2c94c;
  background: rgba(242, 201, 76, .12);
  box-shadow: 0 0 0 1px #f2c94c;
}

.binderTab--trade.is-active {
  border-color: #46d17d;
  background: rgba(70, 209, 125, .12);
  box-shadow: 0 0 0 1px #46d17d;
}

.binderEmpty {
  display: none;
  padding: 36px 18px;
  margin-top: 12px;
  border: 1px dashed #303640;
  border-radius: 16px;
  color: #8d99aa;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px;
}

.binderEmpty--visible {
  display: block;
}

.binderGrid {
  margin-top: 0;
}


/* ============================================================
   FRIENDS
   ============================================================ */

.friendsHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 14px;
}



.friendsHeader h1 {
  margin: 0;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 28px;
  line-height: 1.05;
}

.friendsHeader p {
  margin: 7px 0 0;
  color: #9aa6b8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

.friendsHeader__count {
  min-width: 48px;
  padding: 10px 12px;
  border: 1px solid #303640;
  border-radius: 14px;
  background: #1a1d23;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}

.friendsAdd,
.friendsSection {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #303640;
  border-radius: 16px;
  background: #1a1d23;
  font-family: Arial, Helvetica, sans-serif;
}

.friendsAdd__label {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.friendsAdd__row {
  display: flex;
  gap: 8px;
}

.friendsAdd__input {
  min-width: 0;
  flex: 1;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #3a414d;
  border-radius: 12px;
  outline: none;
  background: #111318;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.friendsAdd__input:focus {
  border-color: #5b8cff;
}

.friendsAdd__button {
  min-width: 76px;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: #5b8cff;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.friendsAdd__button:disabled {
  opacity: 0.55;
}

.friendsMessage {
  min-height: 18px;
  margin: 9px 1px 0;
  color: #8fd3a8;
  font-size: 12px;
}

.friendsMessage--error {
  color: #ff8a8a;
}

.friendsSection__titleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.friendsSection__titleRow h2 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
}

.friendsSection__titleRow span {
  min-width: 28px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #252a33;
  color: #b8c2d2;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.friendsList {
  display: grid;
  gap: 8px;
}

.friendsList__empty {
  padding: 15px 10px;
  color: #7f8a9b;
  font-size: 13px;
  text-align: center;
}

.friendRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #2b3039;
  border-radius: 13px;
  background: #14171c;
}

.friendRow__identity {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}









.friendRow__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.friendRow__text strong,
.friendRow__text span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friendRow__text strong {
  color: #ffffff;
  font-size: 13px;
}

.friendRow__text span {
  margin-top: 3px;
  color: #7f8a9b;
  font-size: 11px;
}

.friendRow__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.friendAction {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #343b46;
  border-radius: 10px;
  background: #242a33;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.friendAction--accept {
  border-color: rgba(70, 209, 125, 0.45);
  background: rgba(70, 209, 125, 0.14);
  color: #7be6a6;
}

.friendAction--reject {
  border-color: rgba(255, 92, 92, 0.42);
  background: rgba(255, 92, 92, 0.12);
  color: #ff8a8a;
}

.friendAction--secondary {
  color: #b9c3d3;
}

@media (max-width: 430px) {
  .friendRow {
    align-items: flex-start;
    flex-direction: column;
  }

  .friendRow__actions {
    width: 100%;
  }

  .friendAction {
    flex: 1;
  }
}


.friendRow--clickable { cursor: pointer; }
.friendRow__arrow { padding: 0 4px; color: #7f8a9b; font-size: 28px; line-height: 1; }

.friendDetailOverlay {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
}
.friendDetailOverlay--open { display: flex; }
.friendDetail {
  position: relative;
  width: min(100%, 520px);
  padding: 24px 18px 18px;
  border: 1px solid #303640;
  border-radius: 20px;
  background: #1a1d23;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
.friendDetail__close {
  position: absolute; top: 10px; right: 10px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #252a33; color: #fff; font-size: 25px;
}
.friendDetail__avatar {
  display: grid; width: 64px; height: 64px; margin: 4px auto 12px;
  place-items: center; border-radius: 50%; background: #252b35;
  color: #fff; font-size: 24px; font-weight: 900;
}
.friendDetail h2 { margin: 0; color: #fff; font-size: 20px; }
.friendDetail__id { margin: 6px 0 20px; color: #8e9aae; font-size: 13px; }
.friendDetail__remove {
  width: 100%; min-height: 46px;
  border: 1px solid rgba(255,92,92,.45); border-radius: 12px;
  background: rgba(255,92,92,.12); color: #ff8a8a;
  font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-weight: 800;
}
.friendDetail__remove:disabled { opacity: .55; }


.friendAction--binder {
  min-width: 108px;
  border-color: rgba(70, 209, 125, 0.48);
  background: rgba(70, 209, 125, 0.16);
  color: #7be6a6;
}

.friendBinderHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #303640;
  border-radius: 14px;
  background: #1a1d23;
  font-family: Arial, Helvetica, sans-serif;
}

.friendBinderHeader[hidden] {
  display: none;
}

.friendBinderHeader__back {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #39414d;
  border-radius: 10px;
  background: #252a33;
  color: #ffffff;
  font-weight: 800;
}

.friendBinderHeader div {
  min-width: 0;
}

.friendBinderHeader span,
.friendBinderHeader strong {
  display: block;
}

.friendBinderHeader span {
  color: #7f8a9b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.friendBinderHeader strong {
  overflow: hidden;
  margin-top: 3px;
  color: #ffffff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 430px) {
  .friendRow--clickable {
    align-items: center;
    flex-direction: row;
    width: 100%;
    max-width: 100%;
    gap: 6px;
  }

  .friendRow--clickable .friendRow__actions {
    width: auto;
    max-width: 46%;
    gap: 2px;
  }

  .friendRow--clickable .friendAction--binder {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 8px;
    font-size: 11px;
  }
}


.binderTab[hidden] {
  display: none !important;
}


/* ============================================================
   CLASSIC CLEAN — bottom navigation alignment only
   ============================================================ */
.bottomNav {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding-left: max(10px, env(safe-area-inset-left)) !important;
  padding-right: max(10px, env(safe-area-inset-right)) !important;
}

.bottomNav__item {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  text-align: center !important;
}

.bottomNav__item > span,
.bottomNav__item > small {
  width: 100% !important;
  text-align: center !important;
}


/* ============================================================
   CLASSIC CLEAN — compact section identity
   ============================================================ */
.sectionIntro{
  margin: 2px 0 18px;
  padding: 0;
}
.sectionIntro__eyebrow{
  margin: 0 0 4px;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8f86ff;
}
.sectionIntro__title{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(27px, 7vw, 34px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
}
.sectionIntro__subtitle{
  margin: 7px 0 0;
  max-width: 520px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255,255,255,.58);
}


/* CLASSIC SECTION HEADERS v2 — consistent top placement */
#cavallinePage > .sectionIntro,
#binderPage > .sectionIntro,
#friendsPage > .sectionIntro{
  margin-top:0!important;
  margin-bottom:18px!important;
}


/* ============================================================
   CLASSIC — BINDER LIST + FILTERS
   ============================================================ */
.binderListTools{
  margin:14px 0 16px;
}
.binderListSearch{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:46px;
  padding:0 12px;
  border:1px solid #2b3340;
  border-radius:14px;
  background:#171b21;
}
.binderListSearch__icon{font-size:20px;color:#9aa8bb}
#binderListSearch{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  color:#fff; font-size:14px;
}
#binderListSearch::placeholder{color:#78879b}
#binderListSearchClear{
  border:0;background:transparent;color:#aab5c4;font-size:23px;line-height:1;
  padding:4px;cursor:pointer;
}
.binderListFilters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:9px;
}
.binderListFilters select{
  width:100%; min-width:0; min-height:42px;
  border:1px solid #2b3340; border-radius:12px;
  background:#171b21; color:#eaf0f8;
  padding:0 10px; font-size:13px; outline:none;
}

/* Existing binder grid becomes a true one-column list. */
#binderGrid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

/* These rules support the existing common card class names without
   altering Collection cards. */
#binderGrid .waifuCard{
  width:100%!important;
  min-height:118px!important;
  display:grid!important;
  grid-template-columns:92px minmax(0,1fr)!important;
  grid-template-rows:auto!important;
  align-items:stretch!important;
  overflow:hidden!important;
  border-radius:16px!important;
}
#binderGrid .waifuCard__image{
  width:92px!important;
  height:118px!important;
  min-height:118px!important;
  aspect-ratio:auto!important;
}
#binderGrid .waifuCard__image img{
  width:100%!important;height:100%!important;object-fit:cover!important;
}
#binderGrid .waifuCard__body{
  min-width:0!important;
  padding:11px 12px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
@media(max-width:380px){
  #binderGrid .waifuCard{
    grid-template-columns:82px minmax(0,1fr)!important;
  }
  #binderGrid .waifuCard__image{
    width:82px!important;height:110px!important;min-height:110px!important;
  }
}


/* ============================================================
   CLASSIC FILTERS v2 — COLLECTION
   Same compact visual hierarchy as Binder.
   Existing Collection controls remain functional.
   ============================================================ */
#cavallinePage #waifuSearch{
  width:100%!important;
  min-height:46px!important;
  border:1px solid #2b3340!important;
  border-radius:14px!important;
  background:#171b21!important;
  color:#fff!important;
  padding:0 44px 0 14px!important;
  font-size:14px!important;
  outline:none!important;
}
#cavallinePage #waifuSearch::placeholder{color:#78879b!important}

/* Existing filters drawer becomes compact and visually consistent. */
#cavallinePage .filtersPanel,
#cavallinePage .filterPanel,
#cavallinePage .filters,
#cavallinePage [data-filters-panel]{
  border:1px solid #2b3340!important;
  border-radius:14px!important;
  background:#171b21!important;
}
#cavallinePage select{
  min-height:42px!important;
  border:1px solid #2b3340!important;
  border-radius:12px!important;
  background:#171b21!important;
  color:#eaf0f8!important;
  padding:0 10px!important;
  font-size:13px!important;
}

/* When the existing filter controls are in a common container, use the
   same two-column arrangement as Binder without changing their IDs. */



/* Binder filters: clear visible focus/active states. */
#binderListSearch:focus{
  outline:none!important;
}
.binderListSearch:focus-within,
.binderListFilters select:focus,
#cavallinePage #waifuSearch:focus,
#cavallinePage select:focus{
  border-color:#6f63ff!important;
  box-shadow:0 0 0 2px rgba(111,99,255,.12)!important;
}


/* ============================================================
   BINDER METADATA — Standard / Event + Wave
   ============================================================ */
#binderGrid .waifuCard{
  cursor:pointer!important;
}

#binderGrid .waifuCard__meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  margin-top:5px;
  margin-bottom:6px;
}

#binderGrid .waifuTypeBadge{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 7px;
  border-radius:8px;
  border:1px solid #343d49;
  background:#20252d;
  color:#aeb9c8;
  font-size:11px;
  line-height:1.15;
  font-weight:700;
}

#binderGrid .waifuTypeBadge--event{
  border-color:rgba(123,104,255,.42);
  background:rgba(111,89,255,.12);
  color:#b9adff;
}

#binderGrid .waifuTypeBadge--standard{
  color:#aeb9c8;
}

/* Keep the horizontal Binder row readable with the extra metadata. */
#binderGrid .waifuCard{
  min-height:128px!important;
}
#binderGrid .waifuCard__image{
  height:128px!important;
  min-height:128px!important;
}


/* ============================================================
   BINDER — COMPACT STANDARD / EVENT PILL
   ============================================================ */
#binderGrid .waifuCard__meta{
  margin-top:4px!important;
  margin-bottom:5px!important;
}

#binderGrid .waifuTypeBadge{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:0!important;
  padding:3px 8px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Neutral pill for cards from the normal pool. */
#binderGrid .waifuTypeBadge--standard{
  border:1px solid rgba(126,145,166,.35)!important;
  background:#e8edf1!important;
  color:#18382f!important;
}

/* Event pill: compact purple treatment, same visual family as rarity badges. */
#binderGrid .waifuTypeBadge--event{
  border:1px solid rgba(139,112,255,.50)!important;
  background:#eee9ff!important;
  color:#5b3fc7!important;
  box-shadow:none!important;
}

/* The metadata no longer needs to make each row taller. */
#binderGrid .waifuCard{
  min-height:118px!important;
}
#binderGrid .waifuCard__image{
  height:118px!important;
  min-height:118px!important;
}


/* ============================================================
   COLLECTION — COMPACT STANDARD / EVENT PILL
   Same visual language as Common / Rare.
   ============================================================ */
#waifuGrid .waifuCard__meta{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-width:0!important;
  margin:5px 0 6px!important;
}

#waifuGrid .waifuTypeBadge{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  max-width:100%!important;
  min-height:0!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1.15!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#waifuGrid .waifuTypeBadge--standard{
  border:1px solid rgba(126,145,166,.35)!important;
  background:#e8edf1!important;
  color:#18382f!important;
}

#waifuGrid .waifuTypeBadge--event{
  border:1px solid rgba(139,112,255,.50)!important;
  background:#eee9ff!important;
  color:#5b3fc7!important;
  box-shadow:none!important;
}

/* Keep the Collection cards compact even with the extra pill. */
#waifuGrid .waifuCard__body{
  padding-top:10px!important;
}


/* ============================================================
   BINDER — DYNAMIC EVENT FILTER
   ============================================================ */
.binderListFilters{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:560px){
  .binderListFilters{
    grid-template-columns:1fr 1fr!important;
  }
  #binderSortFilter{
    grid-column:1 / -1;
  }
}


/* ============================================================
   COLLECTION — ALWAYS VISIBLE FILTERS
   No Filters title and no collapsible menu.
   ============================================================ */












/* ============================================================
   COLLECTION — BINDER-STYLE COMPACT FILTER BAR
   ============================================================ */
#cavallinePage .collectionCompactFilters{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  margin:14px 0 18px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
}
#cavallinePage .collectionCompactFilters > select{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  padding:0 34px 0 12px!important;
  border:1px solid #2b3340!important;
  border-radius:14px!important;
  background:#20252d!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:500!important;
  outline:none!important;
}
#cavallinePage .collectionCompactFilters > select:focus{
  border-color:#5c91ff!important;
  box-shadow:0 0 0 2px rgba(92,145,255,.12)!important;
}
#cavallinePage .collectionFilterAdapters{
  display:none!important;
}
@media(max-width:620px){
  #cavallinePage .collectionCompactFilters{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media(max-width:360px){
  #cavallinePage .collectionCompactFilters{
    gap:7px!important;
  }
  #cavallinePage .collectionCompactFilters > select{
    font-size:12px!important;
    padding-left:10px!important;
  }
}

/* ============================================================
   CLASSIC BLACK — FULL PAGE + CUSTOM SECTION TITLES
   ============================================================ */
html,
body,
#app,
.app,
.page,
main,
#homePage,
#cavallinePage,
#binderPage,
#friendsPage,
.binderPage,
.friendsPage {
  background: #000 !important;
}

/* Remove page-level grey panels while keeping cards/controls readable. */
#cavallinePage,
#binderPage,
#friendsPage{
  background-color: #000 !important;
  background-image: none !important;
}

/* Only the main page titles use the horse-name custom font. */
.sectionIntro__title {
  font-family: "SDKUSWebLocal", Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em !important;
}


/* ============================================================
   FRIENDS — COMPACT TAB NAVIGATION
   ============================================================ */
#friendsPage .friendsTabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:14px 0 18px;
}
#friendsPage .friendsTab{
  position:relative;
  min-width:0;
  min-height:44px;
  border:1px solid #2b3340;
  border-radius:13px;
  background:#171b21;
  color:#aeb9c8;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  padding:8px 7px;
}
#friendsPage .friendsTab--active{
  border-color:#5d91ff;
  background:#202a38;
  color:#fff;
  box-shadow:0 0 0 1px rgba(93,145,255,.12);
}
#friendsPage .friendsTab__badge{
  position:absolute;
  top:-6px;
  right:-5px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:#ff526d;
  color:#fff;
  font-size:10px;
  line-height:19px;
  text-align:center;
}
#friendsPage .friendsManagedSection[hidden]{
  display:none!important;
}

/* Add Friend help panel */
#friendsPage .friendsIdHelp{
  margin:10px 0 14px;
  padding:13px;
  border:1px solid #2b3340;
  border-radius:14px;
  background:#14181e;
}
#friendsPage .friendsIdHelp__title{
  margin:0 0 6px;
  color:#fff;
  font-size:13px;
  font-weight:800;
}
#friendsPage .friendsIdHelp__text{
  margin:0;
  color:#91a0b3;
  font-size:12px;
  line-height:1.45;
}
#friendsPage .friendsOwnId{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  padding:10px 11px;
  border:1px solid #303946;
  border-radius:11px;
  background:#1b2027;
}
#friendsPage .friendsOwnId__value{
  min-width:0;
  color:#fff;
  font-size:13px;
  font-weight:750;
  overflow:hidden;
  text-overflow:ellipsis;
}
#friendsPage .friendsCopyId{
  flex:none;
  min-height:34px;
  border:1px solid #3a4655;
  border-radius:9px;
  background:#252c35;
  color:#fff;
  padding:0 10px;
  font-size:12px;
  font-weight:700;
}


/* FRIENDS TAB NAVIGATION v2 — always visible below the header */
#friendsPage > .friendsTabs{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  position:relative!important;
  z-index:5!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  gap:8px!important;
  margin:14px 0 18px!important;
}
#friendsPage > .friendsTabs > .friendsTab{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:0!important;
  min-height:46px!important;
  padding:8px 6px!important;
  border:1px solid #303846!important;
  border-radius:13px!important;
  background:#171b21!important;
  color:#aeb9c8!important;
}
#friendsPage > .friendsTabs > .friendsTab.friendsTab--active{
  border-color:#5d91ff!important;
  background:#202a38!important;
  color:#fff!important;
}
@media(max-width:390px){
  #friendsPage > .friendsTabs > .friendsTab{
    font-size:11px!important;
  }
}


/* FRIENDS HEADER v3 — never moves when changing Friends tabs */
#friendsPage > .sectionIntro{
  display:block!important;
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  left:auto!important;
  right:auto!important;
  transform:none!important;
  text-align:left!important;
  justify-content:initial!important;
  align-items:initial!important;
}
#friendsPage > .sectionIntro .sectionIntro__eyebrow,
#friendsPage > .sectionIntro .sectionIntro__title,
#friendsPage > .sectionIntro .sectionIntro__subtitle{
  width:auto!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
  transform:none!important;
}

/* Changing tab content must never alter the page/header layout */
#friendsPage{
}
#friendsPage > .friendsTabs{
  clear:both!important;
}


/* ============================================================
   FRIENDS FINAL LAYOUT — LEFT ALIGNED, SAME FLOW AS OTHER TABS
   ============================================================ */
#friendsPage{
  width:100%!important;
}

/* Header: same left alignment as Collection / Binder */
#friendsPage > .sectionIntro{
  display:block!important;
  float:none!important;
  position:static!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 14px 0!important;
  padding:0!important;
  inset:auto!important;
  transform:none!important;
  text-align:left!important;
}
#friendsPage .sectionIntro__eyebrow,
#friendsPage .sectionIntro__title,
#friendsPage .sectionIntro__subtitle{
  display:block!important;
  float:none!important;
  position:static!important;
  width:auto!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
  text-align:left!important;
}

/* Navigation always directly below the header */
#friendsPage > .friendsTabs{
  display:grid!important;
  float:none!important;
  clear:both!important;
  position:relative!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;
  max-width:none!important;
  margin:14px 0 18px 0!important;
  transform:none!important;
}

/* Every selected section stays below the navigation */
#friendsPage .friendsManagedSection{
  float:none!important;
  clear:both!important;
  position:static!important;
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}

/* Help card belongs to Add Friend content, never beside the title */
#friendsPage .friendsIdHelp{
  display:block!important;
  float:none!important;
  clear:both!important;
  position:static!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:0 0 14px 0!important;
  transform:none!important;
}

@media(max-width:520px){
  #friendsPage > .friendsTabs{
    gap:7px!important;
  }
  #friendsPage > .friendsTabs > .friendsTab{
    min-height:44px!important;
    padding:7px 4px!important;
    font-size:11px!important;
  }
}

/* FRIENDS v4 — permanent header + Add Friend content in normal flow */
#friendsPage > .friendsHeader{
  display:flex!important; visibility:visible!important; opacity:1!important;
  position:relative!important; float:none!important; clear:both!important;
  width:100%!important; margin:0 0 14px 0!important; transform:none!important;
}
#friendsPage > .friendsHeader > div:first-child{min-width:0!important;flex:1 1 auto!important;}
#friendsPage > .friendsHeader .sectionIntro{margin:0!important;padding:0!important;text-align:left!important;}
#friendsPage > .friendsHeader .sectionIntro__eyebrow,
#friendsPage > .friendsHeader .sectionIntro__title,
#friendsPage > .friendsHeader .sectionIntro__subtitle,
#friendsPage > .friendsHeader > div:first-child > p{
  text-align:left!important;margin-left:0!important;transform:none!important;
}
#friendsPage > .friendsAdd .friendsIdHelp{
  display:block!important;float:none!important;clear:both!important;
  position:static!important;width:100%!important;max-width:none!important;
  margin:0 0 14px 0!important;box-sizing:border-box!important;
}


/* MAIN PAGE VISIBILITY FIX v5 */
.page[hidden],
#friendsPage[hidden],
#cavallinePage[hidden],
#binderPage[hidden]{
  display:none!important;
}


/* ============================================================
   CARD DETAIL v6 — APPROVED DARK BOTTOM-SHEET CONCEPT
   ============================================================ */
.waifuDetail__backdrop{
  background:rgba(0,0,0,.70)!important;
  backdrop-filter:blur(5px)!important;
}
.waifuDetail__sheet{
  width:min(100%,520px)!important;
  max-width:520px!important;
  max-height:92vh!important;
  background:#111820!important;
  border:1px solid #2b3745!important;
  border-bottom:0!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -18px 55px rgba(0,0,0,.55)!important;
  color:#fff!important;
  scrollbar-width:thin;
}
.waifuDetail__handle{
  background:#718197!important;
}
.waifuDetail__image{
  width:calc(100% - 24px)!important;
  margin:0 12px!important;
  aspect-ratio:4/3!important;
  border-radius:18px!important;
  background:#0b1016!important;
  border:1px solid #2a3542!important;
}
.waifuDetail__photo{
  object-fit:contain!important;
  background:#090d12!important;
}
.waifuDetail__close{
  top:18px!important;
  right:20px!important;
  width:36px!important;
  height:36px!important;
  background:rgba(18,27,36,.92)!important;
  border:1px solid #536174!important;
  font-size:23px!important;
}
.waifuDetail__id{
  left:12px!important;
  top:12px!important;
  padding:6px 10px!important;
  border-radius:10px!important;
  background:rgba(16,24,31,.90)!important;
  border:1px solid #4c5968!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
}
.waifuDetail__nav{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:1px solid #526173;
  border-radius:50%;
  background:rgba(15,24,32,.88);
  color:#fff;
  font-size:32px;
  line-height:34px;
  cursor:pointer;
  backdrop-filter:blur(4px);
}
.waifuDetail__nav--prev{left:10px;}
.waifuDetail__nav--next{right:10px;}
.waifuDetail__nav[hidden]{display:none!important;}
.waifuDetail__content{
  padding:14px 16px 0!important;
}
.waifuDetail__heading{
  display:block!important;
}
.waifuDetail__heading h2{
  color:#fff!important;
  font-family:'SDK_US_Web',Arial,sans-serif!important;
  font-size:29px!important;
  line-height:1.05!important;
}
.waifuDetail__heading p{
  margin-top:5px!important;
  color:#91a8c4!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:13px!important;
}
.waifuDetail__heading .rarityBadge{
  display:inline-flex!important;
  margin-top:10px!important;
  font-size:11px!important;
}



.waifuDetail__description > span{
  color:#79a8ff!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}


.waifuDetail__description{
  margin-top:12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.waifuDetail__description p{
  margin-top:7px!important;
  color:#aab9ca!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.waifuDetail__source{
  margin-top:10px!important;
  padding:9px 12px!important;
  border-color:#34465a!important;
  color:#9db8d7!important;
  background:#141c25!important;
}
.waifuBinderActions{
  margin-top:12px!important;
}
.waifuDetail__showBotAction{
  margin-top:12px!important;
  background:#2684ff!important;
  border-color:#2684ff!important;
  color:#fff!important;
  border-radius:13px!important;
}
.waifuDetail__special{
  right:12px!important;
  bottom:12px!important;
  background:rgba(15,24,32,.90)!important;
  border:1px solid #526173!important;
}
@media(max-width:520px){
  .waifuDetail__sheet{max-height:90vh!important;}
  .waifuDetail__image{aspect-ratio:1/1!important;}
  .waifuDetail__nav{width:38px;height:38px;font-size:28px;}
}


/* ============================================================
   CARD DETAIL v7 — FULL IMAGE + PROGRESS + REAL FAVORITES
   ============================================================ */
.waifuDetail__sheet{
  width:min(100%,520px)!important;
  max-width:520px!important;
  max-height:92vh!important;
  background:#0e151d!important;
  border:1px solid #2a3542!important;
  border-bottom:0!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -18px 60px rgba(0,0,0,.58)!important;
}
.waifuDetail__image{
  width:calc(100% - 24px)!important;
  margin:0 12px!important;
  height:min(46vh,430px)!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border:1px solid #334150!important;
  border-radius:18px!important;
  background:#090e14!important;
}
.waifuDetail__photo{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#090e14!important;
}
.waifuDetail__content{
  padding:14px 16px 18px!important;
}
.waifuDetail__heading{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.waifuDetail__heading h2{
  font-family:'SDK_US_Web',Arial,sans-serif!important;
  font-size:29px!important;
  line-height:1.05!important;
  color:#fff!important;
}
.waifuDetail__heading p{
  margin-top:5px!important;
  color:#91a8c4!important;
}
.waifuDetailCardState{
  margin-top:12px;
  padding:12px 13px 13px;
  border:1px solid #2d3a48;
  border-radius:13px;
  background:#141c25;
}
.waifuDetailCardState__top{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 12px;
}
.waifuDetailCardState__top > span{
  grid-column:1/-1;
  color:#77a8ff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.1em;
}
.waifuDetailCardState__top strong{
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:14px;
}
#waifuDetailLevel{
  text-align:right;
  color:#cbd7e6;
  font-size:12px;
}
.waifuDetailProgress{
  height:8px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#26313e;
}
.waifuDetailProgress > span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4c8dff,#805dff);
  transition:width .25s ease;
}
.waifuDetailMeta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
}
.waifuDetailMeta__badge{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 9px;
  border:1px solid #334150;
  border-radius:999px;
  background:#17202a;
  color:#c1cfdf;
  font-size:11px;
  font-weight:750;
}
.waifuDetailPrimaryActions{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:9px;
  margin-top:12px;
}
.waifuDetailPrimaryActions .waifuDetail__showBotAction,
.waifuDetailFavorite{
  width:100%!important;
  min-height:46px!important;
  margin:0!important;
  border-radius:13px!important;
  font-size:12px!important;
  font-weight:800!important;
}
.waifuDetailPrimaryActions .waifuDetail__showBotAction{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid #287cff!important;
  background:#287cff!important;
  color:#fff!important;
}
.waifuDetailFavorite{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #465466;
  background:#18212b;
  color:#d8e2ee;
}
.waifuDetailFavorite.is-favorite{
  border-color:#826cff;
  background:#241f39;
  color:#fff;
}
.waifuDetailFavorite__icon{
  font-size:18px;
  line-height:1;
}
.waifuDetailFavorite:disabled{
  opacity:.6;
}
.waifuDetail__description{
  margin-top:14px!important;
}
.waifuDetail__description > span{
  color:#77a8ff!important;
}
@media(max-width:390px){
  .waifuDetail__image{
    height:min(43vh,380px)!important;
  }
  .waifuDetailPrimaryActions{
    grid-template-columns:1fr 1fr;
  }
  .waifuDetailPrimaryActions .waifuDetail__showBotAction,
  .waifuDetailFavorite{
    padding:0 8px!important;
    font-size:11px!important;
  }
}


/* CARD LEVEL PROGRESS v7.1 — visibility fix */
.waifuDetailCardState .waifuDetailProgress{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:10px!important;
  min-height:10px!important;
  margin-top:10px!important;
  overflow:hidden!important;
  border:1px solid #344456!important;
  border-radius:999px!important;
  background:#202b37!important;
  box-sizing:border-box!important;
}
.waifuDetailCardState .waifuDetailProgress #waifuDetailProgressFill{
  display:block!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:0!important;
  height:100%!important;
  min-height:100%!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#4c8dff 0%,#805dff 100%)!important;
  box-shadow:0 0 10px rgba(93,126,255,.35)!important;
  transition:width .25s ease!important;
}


/* PROGRESS v7.2 — large, unmistakable track */
.waifuDetailCardState .waifuDetailProgress{
  display:block!important;
  width:100%!important;
  height:14px!important;
  min-height:14px!important;
  margin:12px 0 2px!important;
  border:1px solid #52657a!important;
  border-radius:999px!important;
  background:#202b37!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55)!important;
}
.waifuDetailCardState #waifuDetailProgressFill{
  height:100%!important;
  border-radius:999px!important;
}


/* CARD DETAIL v7.4 — cleaner metadata */
.waifuDetailMeta{
  margin-top:10px!important;
}
#waifuDetailStatus{
  display:none!important;
}
#waifuDetailEvent{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  min-height:28px!important;
  padding:0 11px!important;
  flex:0 0 auto!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* CARD DETAIL v7.5 — CARD INFO */
#waifuDetailVersion{
  display:none!important;
}

.waifuDetailCardInfo{
  margin-top:12px;
  padding:14px 15px;
  border:1px solid #2d3a48;
  border-radius:16px;
  background:#141c25;
}

.waifuDetailCardInfo__title{
  margin-bottom:10px;
  color:#77a8ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
}

.waifuDetailCardInfo__rows{
  display:grid;
  gap:0;
}

.waifuDetailCardInfo__row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:8px 0;
  border-bottom:1px solid rgba(96,116,139,.22);
}

.waifuDetailCardInfo__row:last-child{
  border-bottom:0;
}

.waifuDetailCardInfo__label{
  flex:0 0 auto;
  color:#8192a6;
  font-size:12px;
  font-weight:700;
}

.waifuDetailCardInfo__value{
  min-width:0;
  color:#edf3fb;
  font-size:13px;
  font-weight:750;
  text-align:right;
  overflow-wrap:anywhere;
}

.waifuDetailCardInfo__description{
  display:block;
  padding-top:10px;
}

.waifuDetailCardInfo__description .waifuDetailCardInfo__label{
  display:block;
  margin-bottom:7px;
}

.waifuDetailCardInfo__description .waifuDetailCardInfo__value{
  display:block;
  color:#b8c6d6;
  font-weight:500;
  line-height:1.5;
  text-align:left;
}

.waifuDetail__description{
  display:none!important;
}


/* CARD DETAIL v7.6 — action order + fullscreen image viewer */
.waifuDetail__content{
  display:flex!important;
  flex-direction:column!important;
}
.waifuDetail__heading{ order:1; }
.waifuDetailCardState{ order:2; }
.waifuDetailMeta{ order:3; }
.waifuDetailCardInfo{ order:4; }
.waifuDetailPrimaryActions{ order:5; }

/* Existing Binder controls are placed after the main actions. */

.waifuDetail__description{ order:7; }


.waifuDetail__image{
  cursor:zoom-in!important;
}

.waifuImageViewer[hidden]{
  display:none!important;
}
.waifuImageViewer{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.97);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  overscroll-behavior:none;
}
.waifuImageViewer__image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  pointer-events:none;
}
.waifuImageViewer__close,
.waifuImageViewer__nav{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(12,20,29,.82);
  color:#fff;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.waifuImageViewer__close{
  top:max(16px,env(safe-area-inset-top));
  right:16px;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:25px;
}
.waifuImageViewer__nav{
  top:50%;
  width:48px;
  height:64px;
  transform:translateY(-50%);
  border-radius:18px;
  font-size:32px;
}
.waifuImageViewer__nav--prev{ left:12px; }
.waifuImageViewer__nav--next{ right:12px; }
.waifuImageViewer__counter{
  position:absolute;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(12,20,29,.82);
  color:#dce6f2;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}


/* CARD DETAIL v7.7 — exact Binder placement */
.waifuDetail__content{
  display:block!important;
}
.waifuDetailPrimaryActions{
  margin-bottom:9px!important;
}
#waifuBinderActions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  margin:0 0 12px!important;
}
#waifuBinderActions .waifuBinderButton{
  width:100%!important;
  min-width:0!important;
}

/* Telegram mobile fullscreen gestures */
html.waifuViewerOpen,
body.waifuViewerOpen{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#waifuImageViewer{
  touch-action:none!important;
}
#waifuDetailPhoto{
  pointer-events:auto!important;
  cursor:zoom-in!important;
}


/* CARD DETAIL v7.8 — adaptive Binder buttons + reliable mobile tap */
#waifuBinderActions{
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:8px!important;
  width:100%!important;
}
#waifuBinderActions .waifuBinderButton{
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
}

/* The image itself must be the touch target, above decorative overlays. */
.waifuDetail__image{
  position:relative!important;
}
#waifuDetailPhoto{
  position:relative!important;
  z-index:3!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}
.waifuDetail__id,
.waifuDetail__close{
  z-index:5!important;
}


/* CARD DETAIL v7.9 — dedicated artwork touch layer */
.waifuDetail__zoomTarget{
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  cursor:zoom-in!important;
}

/* Controls remain clickable above the transparent artwork layer. */
#waifuDetailId,
#waifuDetailSpecial{
  z-index:5!important;
  pointer-events:none!important;
}
#waifuDetailPrev,
#waifuDetailNext,
#waifuDetailClose{
  z-index:6!important;
  pointer-events:auto!important;
}


/* COLLECTION SEARCH v7.11 */
.collectionSearchFields--nameOnly{
  width:100%;
}
.collectionSearchBar{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:56px;
  padding:0 9px 0 16px;
  border:1px solid #3979db;
  border-radius:17px;
  background:#141b24;
  box-shadow:0 0 0 1px rgba(65,137,255,.06),0 8px 22px rgba(0,0,0,.16);
  transition:border-color .16s ease,box-shadow .16s ease;
}
.collectionSearchBar:focus-within{
  border-color:#5797ff;
  box-shadow:0 0 0 2px rgba(65,137,255,.14),0 8px 26px rgba(0,0,0,.22);
}
.collectionSearchBar__icon{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-right:11px;
}
.collectionSearchBar__icon::before{
  content:"";
  position:absolute;
  left:1px;
  top:1px;
  width:12px;
  height:12px;
  border:2px solid #a9bad0;
  border-radius:50%;
}
.collectionSearchBar__icon::after{
  content:"";
  position:absolute;
  left:13px;
  top:15px;
  width:9px;
  height:2px;
  border-radius:2px;
  background:#a9bad0;
  transform:rotate(45deg);
  transform-origin:left center;
}
.collectionSearchBar .collectionSearchBar__input{
  flex:1 1 auto!important;
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#f3f6fb!important;
  font-size:16px!important;
}
.collectionSearchBar .collectionSearchBar__input::placeholder{
  color:#8396ad!important;
  opacity:1!important;
}
.collectionSearchBar__input::-webkit-search-cancel-button{
  display:none;
}
.collectionSearchBar__clear{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0 0 2px;
  margin-left:9px;
  border:1px solid #34465b;
  border-radius:50%;
  background:#202d3d;
  color:#f5f8fc;
  font:400 25px/1 Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.collectionSearchBar__clear:active{
  transform:scale(.94);
}
.collectionSearchBar .searchSuggestions{
  top:calc(100% + 7px);
  left:0;
  right:0;
  z-index:40;
}
.collectionSearchExamples{
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  margin-top:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.collectionSearchExamples::-webkit-scrollbar{
  display:none;
}
.collectionSearchExample{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  min-height:31px;
  padding:0 10px;
  border:1px solid #2e435b;
  border-radius:999px;
  background:#101821;
  color:#aebdd0;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.collectionSearchExample span{
  color:#dce8f7;
  font-size:14px;
}
.collectionSearchExample:active{
  background:#1a2736;
  transform:scale(.98);
}
@media(max-width:390px){
  .collectionSearchBar{
    min-height:53px;
    border-radius:16px;
  }
  .collectionSearchBar .collectionSearchBar__input{
    height:51px!important;
    font-size:15px!important;
  }
  .collectionSearchExample{
    padding:0 9px;
    font-size:10.5px;
  }
}

/* TOP-LEVEL HUB + MONTHLY BATTLE PASS */
#tradeBinNav[hidden]{display:none!important}.topLevelPage{padding:18px 14px 28px}.hubHero{padding:28px 8px 24px}.hubHero__eyebrow,.passHeader .sectionIntro__eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:#5da9ff}.hubHero__title{margin:6px 0 4px;font-size:34px;line-height:1}.hubHero__subtitle{margin:0;color:#8995a3;font-size:14px}.hubGrid{display:grid;gap:14px}.hubCard{width:100%;min-height:118px;display:grid;grid-template-columns:58px 1fr 24px;gap:14px;align-items:center;text-align:left;padding:18px;border-radius:18px;border:1px solid #283545;background:linear-gradient(145deg,#121a23,#0d131a);color:#fff;box-shadow:0 12px 28px rgba(0,0,0,.22)}.hubCard--pass{border-color:#345f92;background:linear-gradient(145deg,#132235,#0e151f)}.hubCard__icon{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:#1a2633;font-size:30px}.hubCard--pass .hubCard__icon{background:#17375a}.hubCard__body{display:flex;flex-direction:column;gap:6px;min-width:0}.hubCard__body strong{font-size:18px;letter-spacing:.04em}.hubCard__body small{color:#8f9cab;font-size:12px}.hubCard__arrow{font-size:34px;color:#6d7d8f}.passHeader{display:flex;align-items:flex-start;gap:12px;margin:4px 0 18px}.passHeader h1{font-size:30px;line-height:1;margin:5px 0}.passHeader p{margin:0;color:#8995a3;font-size:13px}.passProgress{height:7px;margin:10px 2px 20px;border-radius:999px;background:#202b36;overflow:hidden}.passProgress__fill{height:100%;background:#4b9cff;border-radius:inherit;transition:width .25s}.passRewards{display:grid;gap:9px}.passError{padding:28px 16px;text-align:center;color:#7e8b99}.passSelector[hidden]{display:none!important}.passSelector{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-end;justify-content:center}.passSelector__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(4px)}.passSelector__sheet{position:relative;width:min(100%,520px);height:min(82vh,720px);display:flex;flex-direction:column;padding:16px;border:1px solid #2d3d4e;border-bottom:0;border-radius:22px 22px 0 0;background:#10171f}.passSelector__header{display:flex;align-items:center;justify-content:space-between}.passSelector__header small{font-size:9px;color:#5da9ff;font-weight:900}.passSelector__header h2{margin:3px 0 0;font-size:20px}#battlePassSelectorClose{width:38px;height:38px;border:1px solid #2e3b49;border-radius:50%;background:#18212b;color:#fff;font-size:22px}.passSelector__search{width:100%;margin:14px 0 10px;padding:12px 14px;border:1px solid #304154;border-radius:12px;background:#0b1117;color:#fff;outline:none}.passSelector__list{overflow:auto;display:grid;gap:7px;padding-bottom:18px}


/* ============================================================
   BATTLE PASS v1.1 — GRID + SELECTABLE-ONLY HIGHLIGHT
   ============================================================ */

.passRewards{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}



















/* Normal, featured, milestone and final rewards stay visually neutral. */


/* Claimed cards are readable but clearly completed. */


/* Only selectable card rewards receive the premium highlight. */








/* Final label is shown only when that final reward is selectable. */




/* Keep the grid even on narrow Telegram screens. */
@media(max-width:380px){
  .passRewards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  

  
}


/* ============================================================
   BATTLE PASS v1.2 — SINGLE DAILY CLAIM BUTTON
   ============================================================ */

.battlePassClaimButton{
  width:100%;
  min-height:54px;
  margin:0 0 16px;
  border:1px solid #4b9cff;
  border-radius:14px;
  background:linear-gradient(135deg,#2388f4,#1769bd);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.025em;
  box-shadow:0 8px 24px rgba(35,136,244,.2);
}

.battlePassClaimButton:disabled{
  cursor:default;
}

.battlePassClaimButton--claimed{
  border-color:#314153;
  background:#151e27;
  color:#83a0ba;
  box-shadow:none;
}

/* Reward tiles are display-only: claiming is done from the big button. */








/* The selectable highlight remains the only special reward treatment. */





/* ============================================================
   BATTLE PASS v1.3 — COMPACT 7 x 4 REWARD BOARD
   ============================================================ */

#battlePassPage{
  max-width:620px;
  margin:0 auto;
}

#battlePassPage .passHeader{
  margin-bottom:12px;
}











#battlePassPage .passProgress{
  height:7px;
  margin:8px 16px 14px;
}

.battlePassClaimButton{
  min-height:54px;
  margin-bottom:18px;
  font-size:14px;
}

/* Exactly 7 rewards per row. */
.passRewards{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:7px!important;
  padding:14px!important;
  border:1px solid #283442;
  border-radius:17px;
  background:#11171f;
}

.passRewardCell{
  position:relative;
  min-width:0;
  aspect-ratio:1 / 1.08;
  padding:4px 2px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:3px;
  border:1px solid #252f3a;
  border-radius:11px;
  background:#171e27;
  color:#fff;
}

.passRewardCell__icon{
  font-size:22px;
  line-height:1;
}

.passRewardCell__day{
  font-size:9px;
  line-height:1;
  color:#738091;
  font-weight:800;
}

.passRewardCell__check{
  position:absolute;
  top:2px;
  right:3px;
  color:#43c782;
  font-size:12px;
  font-weight:1000;
  line-height:1;
}

.passRewardCell--claimed{
  opacity:.55;
}

/* Current reward is easy to locate without making normal rewards "premium". */
.passRewardCell--available{
  border-color:#4b9cff;
  box-shadow:inset 0 0 0 1px #4b9cff;
  opacity:1;
}

/* Only selectable rewards get a permanent special treatment. */
.passRewardCell--selectable{
  border-color:#b55d8a;
  background:linear-gradient(145deg,#241b28,#171d27);
}

.passRewardCell--selectable.passRewardCell--available{
  border-color:#e47aaf;
  box-shadow:0 0 14px rgba(228,122,175,.13),inset 0 0 0 1px #e47aaf;
}

.passRewardCell--final{
  border-color:#d36a9e;
}

.passFeatured{
  margin-top:15px;
  padding:14px;
  border:1px solid #283442;
  border-radius:16px;
  background:#11171f;
}

.passFeatured__title{
  margin-bottom:10px;
  color:#8797a8;
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
}

.passFeatured__list{
  display:grid;
  gap:7px;
}

.passFeatured__item{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:9px;
  align-items:center;
  padding:8px 9px;
  border-radius:10px;
  background:#171e27;
}

.passFeatured__item>span{
  font-size:20px;
  text-align:center;
}

.passFeatured__item>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.passFeatured__item strong{
  font-size:11px;
}

.passFeatured__item small{
  color:#8998a8;
  font-size:10px;
}

.passFeatured__item--final{
  border:1px solid #b85e8d;
  background:linear-gradient(120deg,#231923,#171e27);
}



/* Old list-card rules are intentionally bypassed by the new passRewardCell markup. */
@media(max-width:430px){
  .passRewards{
    gap:5px!important;
    padding:11px!important;
  }

  .passRewardCell{
    border-radius:9px;
  }

  .passRewardCell__icon{
    font-size:19px;
  }

  .passRewardCell__day{
    font-size:8px;
  }
}

@media(max-width:350px){
  .passRewards{
    gap:4px!important;
    padding:9px!important;
  }

  .passRewardCell__icon{
    font-size:17px;
  }
}

/* BATTLE PASS v1.4 — quantities + weekly selectable milestones */
.passRewardCell{aspect-ratio:1/1.16!important;gap:2px!important}
.passRewardCell__icon{font-size:27px!important;line-height:1!important;margin-bottom:2px}
.passRewardCell__amount{display:block;max-width:100%;color:#e5edf6;font-size:10px;line-height:1;font-weight:900;white-space:nowrap}
.passRewardCell__day{margin-top:2px;font-size:7px!important;letter-spacing:.04em}
.passRewardCell--selectable .passRewardCell__amount{color:#f2a8ce;font-size:7px;letter-spacing:.05em}
.passRewardCell--selectable .passRewardCell__icon{font-size:29px!important}
@media(max-width:430px){.passRewardCell__icon{font-size:24px!important}.passRewardCell__amount{font-size:9px}.passRewardCell--selectable .passRewardCell__icon{font-size:26px!important}.passRewardCell--selectable .passRewardCell__amount{font-size:6px}}
@media(max-width:350px){.passRewardCell__icon{font-size:21px!important}.passRewardCell__amount{font-size:8px}}


/* BATTLE PASS v1.5 — collection selector + confirmation + safe test mode */



.passSelector__eventFilter{height:42px;max-width:155px;padding:0 28px 0 10px;border:1px solid #303c49;border-radius:11px;background:#151c24;color:#e9f0f7;font-size:11px;font-weight:700}
.passSelector__eventFilter[hidden]{display:none!important}
.battlePassDetailClaim{margin:10px 0 8px;padding:10px;border:1px solid #b55d8a;border-radius:13px;background:linear-gradient(145deg,#241b28,#171d27)}
.battlePassDetailClaim[hidden]{display:none!important}
.battlePassDetailClaim__note{margin-bottom:7px;color:#d989b1;font-size:9px;font-weight:900;letter-spacing:.12em}
#battlePassDetailClaimButton{width:100%;min-height:48px;border:0;border-radius:11px;background:#f0f4f8;color:#111820;font-size:12px;font-weight:900}
.battlePassTestTools{margin:0 0 12px;padding:10px;border:1px dashed #4b9cff;border-radius:12px;background:#101a25}
.battlePassTestTools[hidden]{display:none!important}
.battlePassTestTools strong{display:block;margin-bottom:8px;color:#78b5ff;font-size:9px;letter-spacing:.04em}
.battlePassTestTools>div{display:flex;flex-wrap:wrap;gap:6px}
.battlePassTestTools button{padding:7px 9px;border:1px solid #33475c;border-radius:8px;background:#172230;color:#dce8f5;font-size:10px;font-weight:800}
@media(max-width:430px){.passSelector__eventFilter{max-width:none;width:100%}}

/* Battle Pass v1.6: selectable rewards use the actual Trade Bin Collection. */
.battlePassCollectionHeader{margin-bottom:10px;padding:11px 12px;border:1px solid #b55d8a;border-radius:14px;background:linear-gradient(145deg,#241b28,#171d27)}
.battlePassCollectionHeader[hidden]{display:none!important}
.battlePassCollectionBack{margin:0 0 9px;padding:0;border:0;background:transparent;color:#8dbdff;font-size:12px;font-weight:800}
.battlePassCollectionHeader__eyebrow{color:#d989b1;font-size:9px;font-weight:900;letter-spacing:.13em}
.battlePassCollectionHeader__rule{margin-top:4px;color:#dce5ee;font-size:11px;font-weight:700}
body.battlePassCollectionMode #tradeBinNav{display:none!important}
body.battlePassCollectionMode #collectionRaritySelect:disabled,
body.battlePassCollectionMode #collectionOwnershipSelect:disabled,
body.battlePassCollectionMode #waifuEventFilter:disabled{opacity:.65}
#battlePassSelector{display:none!important}

/* Battle Pass interface polish */
.hubHero__title{
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
}
body.battlePassCollectionMode #waifuBinderActions{
  display:none!important;
}


/* Battle Pass title — same custom font used across the Stable UI */
#battlePassPage h1 {
  font-family: "SDKUSWebLocal", Arial, sans-serif !important;
  font-weight: 400 !important;
}


/* ============================================================
   BATTLE PASS — COLLECTION REWARD FILTERS
   ============================================================ */
body.battlePassCollectionMode #cavallinePage .collectionCompactFilters{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:16px 0 18px!important;
}
body.battlePassCollectionMode #cavallinePage .collectionCompactFilters > select{
  height:50px!important;
  min-width:0!important;
  padding:0 42px 0 15px!important;
  border-radius:15px!important;
  border-color:#334052!important;
  background-color:#1d232c!important;
  color:#f4f7fb!important;
  font-size:13px!important;
  font-weight:700!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
body.battlePassCollectionMode #cavallinePage .collectionCompactFilters > select:disabled{
  opacity:1!important;
  color:#aeb9c8!important;
  background-color:#171c23!important;
  border-color:#293341!important;
  cursor:default!important;
}
body.battlePassCollectionMode #cavallinePage .collectionCompactFilters > select:focus{
  border-color:#5c91ff!important;
  box-shadow:0 0 0 2px rgba(92,145,255,.14)!important;
}
@media(max-width:390px){
  body.battlePassCollectionMode #cavallinePage .collectionCompactFilters{
    gap:8px!important;
  }
  body.battlePassCollectionMode #cavallinePage .collectionCompactFilters > select{
    height:48px!important;
    padding-left:12px!important;
    padding-right:34px!important;
    font-size:12px!important;
  }
}


/* ============================================================
   TRADE BIN — COLLECTION FILTERS
   Same readable 2x2 layout used by the Battle Pass selector.
   ============================================================ */
body:not(.battlePassCollectionMode) #cavallinePage .collectionCompactFilters{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:16px 0 18px!important;
}

body:not(.battlePassCollectionMode) #cavallinePage .collectionCompactFilters > select{
  height:50px!important;
  min-width:0!important;
  padding:0 42px 0 15px!important;
  border-radius:15px!important;
  border-color:#334052!important;
  background-color:#1d232c!important;
  color:#f4f7fb!important;
  font-size:13px!important;
  font-weight:700!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

body:not(.battlePassCollectionMode) #cavallinePage .collectionCompactFilters > select:focus{
  border-color:#5c91ff!important;
  box-shadow:0 0 0 2px rgba(92,145,255,.14)!important;
}

@media(max-width:390px){
  body:not(.battlePassCollectionMode) #cavallinePage .collectionCompactFilters{
    gap:8px!important;
  }
  body:not(.battlePassCollectionMode) #cavallinePage .collectionCompactFilters > select{
    height:48px!important;
    padding-left:12px!important;
    padding-right:34px!important;
    font-size:12px!important;
  }
}


/* ============================================================
   WHEEL OF FORTUNE
   ============================================================ */
.hubCard--wheel{border-color:#4a3a67;background:linear-gradient(145deg,#19151f,#12151b)}
.hubCard--wheel .hubCard__icon{font-size:28px}
#wheelPage{padding-bottom:34px}
.wheelHeader{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.wheelHeader h1{margin:2px 0 4px;font-size:28px}
.wheelHeader p{margin:0;color:#8e99a8;font-size:13px}
.wheelBalance{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border:1px solid #2b3440;border-radius:15px;background:#171c23;margin-bottom:18px}
.wheelBalance span{font-size:11px;font-weight:800;letter-spacing:.11em;color:#8996a8}
.wheelBalance strong{font-size:20px;color:#fff}
.wheelStage{position:relative;width:min(82vw,350px);aspect-ratio:1;margin:8px auto 22px}

.fortuneWheel{position:absolute;inset:0;border-radius:50%;border:8px solid #252d38;box-shadow:0 12px 35px rgba(0,0,0,.42),inset 0 0 0 3px #0e1116;background:conic-gradient(#3a263f 0 40deg,#1e3149 40deg 80deg,#3a3321 80deg 120deg,#253a31 120deg 160deg,#273c56 160deg 200deg,#443028 200deg 240deg,#3c2848 240deg 280deg,#3d351e 280deg 320deg,#49303d 320deg 360deg);transition:transform 4.2s cubic-bezier(.12,.72,.08,1);will-change:transform}




.wheelStakeCard{min-height:78px;border:1px solid #303a47;border-radius:16px;background:#171c23;overflow:hidden;margin-bottom:12px}
.wheelStakeCard__empty{min-height:78px;display:flex;align-items:center;gap:12px;padding:13px 15px;color:#98a5b5}
.wheelStakeCard__empty>span{font-size:28px}.wheelStakeCard__empty strong,.wheelStakeCard__empty small{display:block}.wheelStakeCard__empty strong{color:#eef3f9;font-size:14px}.wheelStakeCard__empty small{font-size:11px;margin-top:3px}
.wheelStakeCard:has(img){display:grid;grid-template-columns:64px 1fr auto;align-items:center;padding:8px;gap:10px}
.wheelStakeCard>img{width:64px;height:78px;object-fit:cover;border-radius:10px;background:#0d1117}
.wheelStakeCard__info{min-width:0}.wheelStakeCard__info small,.wheelStakeCard__info strong,.wheelStakeCard__info span{display:block}.wheelStakeCard__info small{font-size:9px;letter-spacing:.1em;color:#7f8c9e;font-weight:800}.wheelStakeCard__info strong{margin:4px 0;font-family:"SDK_US_Web",sans-serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wheelStakeCard__info span{font-size:11px;color:#aab5c3}
#wheelChangeCardInline{border:0;background:#232b36;color:#cbd4df;border-radius:10px;padding:9px;font-size:10px;font-weight:800}

.wheelSecondaryButton,.wheelSpinButton{height:50px;border-radius:14px;font-weight:900;border:1px solid #334052}
.wheelSecondaryButton{background:#1b212a;color:#d7dee8}.wheelSpinButton{background:linear-gradient(135deg,#6742d9,#8b4de4);color:#fff;border-color:#8a61e6;box-shadow:0 8px 22px rgba(103,66,217,.22)}
.wheelSpinButton:disabled{opacity:.45;box-shadow:none}
.wheelRatesButton{display:block;margin:14px auto 0;border:0;background:transparent;color:#8da9ff;font-weight:800;font-size:12px}

.wheelSelector[hidden],.wheelRatesModal[hidden]{display:none!important}
.wheelSelector,.wheelRatesModal{position:fixed;inset:0;z-index:150}
.wheelSelector__backdrop,.wheelRatesModal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.wheelSelector__sheet,.wheelRatesModal__sheet{position:absolute;left:0;right:0;bottom:0;max-height:86vh;background:#12171e;border:1px solid #303a47;border-bottom:0;border-radius:22px 22px 0 0;padding:16px;overflow:auto}
.wheelSelector__header,.wheelRatesModal__sheet>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.wheelSelector__header small,.wheelRatesModal__sheet header small{font-size:9px;letter-spacing:.12em;color:#7d8999;font-weight:800}.wheelSelector__header h2,.wheelRatesModal__sheet header h2{margin:3px 0 0;font-size:20px}.wheelSelector__header button,.wheelRatesModal__sheet header button{width:36px;height:36px;border:0;border-radius:50%;background:#232b35;color:#fff;font-size:23px}
.wheelSelector__search{width:100%;height:48px;border:1px solid #344052;border-radius:14px;background:#1a2028;color:#fff;padding:0 14px;margin-bottom:12px;outline:none}
.wheelSelector__list{display:grid;gap:8px;padding-bottom:12px}
.wheelCardOption{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid #293440;border-radius:13px;background:#181e26;color:#fff;padding:7px}
.wheelCardOption img{width:52px;height:64px;object-fit:cover;border-radius:8px;background:#0d1117}.wheelCardOption div{min-width:0}.wheelCardOption strong,.wheelCardOption span{display:block}.wheelCardOption strong{font-family:"SDK_US_Web",sans-serif;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wheelCardOption span{font-size:10px;color:#909cac;margin-top:3px}.wheelCardOption b{font-size:12px;color:#b9c9ff;padding-right:5px}
.wheelSelector__empty{padding:26px;text-align:center;color:#8491a2}
.wheelRatesList{display:grid;gap:7px;padding-bottom:12px}.wheelRate{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:11px;border:1px solid #293440;border-radius:12px;background:#181e26}.wheelRate>span{font-size:20px}.wheelRate strong{font-size:12px}.wheelRate b{font-size:12px;color:#aebbd0}.wheelRate--jackpot{border-color:#66552b;background:linear-gradient(135deg,#201c16,#1a1820)}.wheelRate--jackpot b{color:#f1cf6b}
@media(max-width:390px){.wheelStage{width:min(86vw,330px)}.wheelSecondaryButton,.wheelSpinButton{height:48px}}


/* ============================================================
   WHEEL v1.4 — horizontal reward reel
   ============================================================ */
.wheelStage.wheelStage--reel{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  margin:10px 0 20px!important;
  padding:14px 0 0!important;
}
.wheelReel{
  position:relative;
  width:100%;
  height:112px;
  overflow:hidden;
  border:1px solid #354151;
  border-radius:17px;
  background:#0e1319;
  box-shadow:inset 0 0 28px rgba(0,0,0,.7),0 10px 26px rgba(0,0,0,.25);
}
.wheelReel::before,
.wheelReel::after{
  content:"";
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:58px;
  pointer-events:none;
}
.wheelReel::before{left:0;background:linear-gradient(90deg,#0e1319 5%,transparent)}
.wheelReel::after{right:0;background:linear-gradient(270deg,#0e1319 5%,transparent)}
.wheelReelMarker{
  position:absolute;
  z-index:8;
  left:50%;
  top:7px;
  bottom:21px;
  width:3px;
  transform:translateX(-50%);
  border-radius:3px;
  background:#ffffff;
  box-shadow:0 0 12px rgba(255,255,255,.65);
  pointer-events:none;
}
.wheelReelMarker::before{
  content:"▼";
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:16px;
  line-height:1;
}
.wheelReel__track{
  display:flex;
  align-items:stretch;
  width:max-content;
  height:100%;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.wheelReelCell{
  width:104px;
  min-width:104px;
  height:100%;
  padding:15px 7px 10px;
  border-right:1px solid #303947;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:#181e26;
  text-align:center;
}
.wheelReelCell:nth-child(3n+2){background:#1d2029}
.wheelReelCell:nth-child(3n){background:#191d24}
.wheelReelCell>span{font-size:27px;line-height:1}
.wheelReelCell>strong{
  max-width:90px;
  color:#e9eef6;
  font-size:9px;
  line-height:1.15;
  font-weight:900;
}
.wheelReelCell--jackpot{
  background:linear-gradient(180deg,#2b2517,#191c22)!important;
}
.wheelReelCell--winner{
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 24px rgba(255,255,255,.18);
}
.wheelReelHint{
  display:block;
  margin-top:7px;
  color:#707d8e;
  font-size:9px;
  text-align:center;
}
.fortuneWheel{
  /* Old circular-wheel elements are no longer used. */
}
@media(max-width:390px){
  .wheelStage.wheelStage--reel{width:100%!important}
  .wheelReel{height:104px}
  .wheelReelCell{width:94px;min-width:94px}
  .wheelReelCell>span{font-size:24px}
}


/* WHEEL v1.6 — compact selector with Collection-style filters */
#wheelPage .wheelHeader h1{
  font-family:"SDK_US_Web",Arial,Helvetica,sans-serif!important;
  font-weight:400!important;
  letter-spacing:.02em!important;
}
.wheelSelectorFilters{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:0 14px 12px;
}
.wheelSelectorFilters label{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}
.wheelSelectorFilters label>span{
  padding-left:2px;
  color:#7f8b9a;
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wheelSelectorFilters select{
  width:100%;
  min-width:0;
  height:44px;
  padding:0 32px 0 11px;
  border:1px solid #303947;
  border-radius:11px;
  background:#151b22;
  color:#e9eef6;
  font:inherit;
  font-size:12px;
  font-weight:800;
  outline:none;
}
.wheelSelectorFilters select:focus{border-color:#6079ff}


/* WHEEL v1.7 — title uses the actual registered custom font family */
#wheelPage .wheelHeader h1{
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
}


/* WHEEL v1.8 — persistent swap-card Bot delivery setting */
.wheelSetting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:18px 0 4px;
  padding:14px 16px;
  border:1px solid #2d3744;
  border-radius:16px;
  background:#151b22;
}
.wheelSetting>div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.wheelSetting strong{
  color:#eef3f8;
  font-size:13px;
  font-weight:900;
}
.wheelSetting small{
  color:#8090a4;
  font-size:10px;
  line-height:1.35;
}
.wheelSwitch{
  position:relative;
  flex:0 0 auto;
  width:48px;
  height:28px;
}
.wheelSwitch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.wheelSwitch span{
  position:absolute;
  inset:0;
  border:1px solid #3a4554;
  border-radius:999px;
  background:#222a34;
  cursor:pointer;
  transition:.18s ease;
}
.wheelSwitch span::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#9aa7b7;
  transition:.18s ease;
}
.wheelSwitch input:checked + span{
  border-color:#7656e8;
  background:#4b2d8d;
}
.wheelSwitch input:checked + span::after{
  transform:translateX(20px);
  background:#fff;
}
.wheelSwitch input:disabled + span{
  opacity:.55;
  cursor:wait;
}

/* WHEEL v1.12 — Rare Event cards only */
#wheelCardSelector .wheelSelectorFilters{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:520px){
  #wheelCardSelector .wheelSelectorFilters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #wheelCardSelector .wheelSelectorFilters label:last-child{
    grid-column:1 / -1;
  }
}

/* WHEEL v1.14 — lock every Wheel control during the spin */
#wheelPage.wheelIsSpinning button,
#wheelPage.wheelIsSpinning select,
#wheelPage.wheelIsSpinning input,
#wheelCardSelector button:disabled{
  pointer-events:none!important;
}
#wheelPage.wheelIsSpinning button,
#wheelPage.wheelIsSpinning select,
#wheelPage.wheelIsSpinning input{
  opacity:.55;
}
#wheelPage.wheelIsSpinning #wheelSpinButton{
  opacity:1;
  cursor:wait;
}

/* MARKET BROWSE + DETAIL V1 */


.marketDetailBuy {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
}
.marketDetailBuy[hidden] {
  display: none !important;
}
.marketDetailBuy__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.marketDetailBuy__top span {
  color: rgba(255,255,255,.52);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
}
.marketDetailBuy__top strong {
  font-size: 16px;
}
#marketDetailBuyButton {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #050505;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
  cursor: pointer;
}
#marketDetailBuyButton:disabled {
  opacity: .45;
  cursor: default;
}

/* MARKET VISUAL ALIGNMENT V1.1 */
#marketPage .marketHeader h1 {
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
}
#marketPage .marketCardName {
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-weight: 400 !important;
}
#marketPage .marketHeader {
  margin-bottom: 16px;
}
#marketPage .marketBalance {
  margin-bottom: 14px;
}
#marketPage .marketAuctionList {
  margin-top: 0;
}

/* MARKET HEADER + BALANCE V1.2 */
#marketPage .marketHeader {
  align-items: flex-start;
  margin-bottom: 18px;
}

#marketPage .marketHeader > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0;
}

#marketPage .marketHeader .sectionIntro__eyebrow {
  margin: 0 0 7px;
  color: #8066ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .17em;
  line-height: 1;
}

#marketPage .marketHeader h1 {
  margin: 0 !important;
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-size: clamp(34px, 10vw, 48px) !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: .005em !important;
}

#marketPage .marketHeader p {
  margin: 12px 0 0 !important;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  line-height: 1.35;
}

#marketPage .marketBalance {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(128,102,255,.62);
  border-radius: 15px;
  background:
    linear-gradient(135deg, rgba(128,102,255,.12), rgba(255,255,255,.025));
  box-shadow:
    inset 0 0 22px rgba(128,102,255,.045),
    0 0 18px rgba(128,102,255,.035);
}

#marketPage .marketBalance__icon,
#marketPage .marketBalance__coin {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 25px;
  line-height: 1;
}

#marketPage .marketBalance__coin {
  justify-self: end;
  font-size: 21px;
}

#marketPage .marketBalance__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

#marketPage .marketBalance__body span {
  color: rgba(210,201,255,.90);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .15em;
  line-height: 1;
}

#marketPage .marketBalance__body strong {
  overflow: hidden;
  color: #ffd43b;
  font-family: "SDKUSWebLocal", sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#marketPage .marketEmpty {
  margin-top: 4px;
  padding: 16px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.42);
  text-align: left;
  font-size: 13px;
}

@media (max-width: 380px) {
  #marketPage .marketHeader h1 {
    font-size: 38px !important;
  }

  #marketPage .marketBalance {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    gap: 9px;
    padding: 12px;
  }

  #marketPage .marketBalance__icon {
    font-size: 22px;
  }

  #marketPage .marketBalance__body strong {
    font-size: 22px;
  }
}

/* MARKET MY LISTINGS V1.3 */
#marketPage .marketTabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 14px;
}

#marketPage .marketTab {
  font-family: inherit;
}

.marketDetailCancel #marketDetailCancelButton {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(255,255,255,.065);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .025em;
  cursor: pointer;
}

.marketDetailCancel #marketDetailCancelButton:disabled {
  opacity: .45;
  cursor: default;
}

/* MARKET BUTTON ALIGNMENT V1.4
   Match the compact dark controls used across the Mini App. */
#marketPage .marketTabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
  padding: 4px !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.035) !important;
}

#marketPage .marketTab {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 9px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255,255,255,.55) !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

#marketPage .marketTab.isActive {
  border-color: rgba(128,102,255,.42) !important;
  background: rgba(128,102,255,.16) !important;
  color: #fff !important;
  box-shadow: inset 0 0 14px rgba(128,102,255,.06) !important;
}

#marketPage .marketTab:active {
  transform: scale(.985);
}

/* Detail actions use the same geometry as the existing primary detail controls. */
#marketDetailBuyButton,
#marketDetailCancelButton {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 11px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
}

#marketDetailBuyButton {
  border: 1px solid rgba(255,255,255,.92) !important;
  background: #fff !important;
  color: #050505 !important;
}

#marketDetailCancelButton {
  border: 1px solid rgba(255,255,255,.13) !important;
  background: rgba(255,255,255,.055) !important;
  color: rgba(255,255,255,.88) !important;
  box-shadow: none !important;
}

#marketDetailBuyButton:disabled,
#marketDetailCancelButton:disabled {
  opacity: .45 !important;
}

/* MARKET DEEP LINK HIGHLIGHT V1.5 */
#marketPage .marketDeepLinkPulse {
  animation: marketDeepLinkBorderPulse .72s ease-in-out 4;
}

@keyframes marketDeepLinkBorderPulse {
  0%,100% {
    border-color: rgba(128,102,255,.42);
    box-shadow: 0 0 0 0 rgba(128,102,255,0);
  }
  50% {
    border-color: rgba(160,140,255,.98);
    box-shadow:
      0 0 0 2px rgba(128,102,255,.20),
      0 0 18px rgba(128,102,255,.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  #marketPage .marketDeepLinkPulse {
    animation: none;
    border-color: rgba(160,140,255,.98) !important;
    box-shadow: 0 0 0 2px rgba(128,102,255,.20) !important;
  }
}

/* MARKET RICH DIRECT BUY V1.6 */
#marketPage .marketRichCard{margin:10px 0;padding:10px;border:1px solid rgba(128,102,255,.32);border-radius:15px;background:#0d1015}
#marketPage .marketRichCard__body{display:flex;gap:11px}
#marketPage .marketRichCard__image{width:92px;min-width:92px;height:124px;object-fit:cover;border-radius:11px;border:1px solid rgba(255,255,255,.1);background:#15181d}
#marketPage .marketRichCard__info{flex:1;min-width:0}
#marketPage .marketRichCard .marketCardName{font-size:19px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#marketPage .marketRichCard__badges{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
#marketPage .marketRichCard__badges span{padding:4px 7px;border:1px solid rgba(128,102,255,.35);border-radius:999px;background:rgba(128,102,255,.10);font-size:10px;font-weight:800}
#marketPage .marketRichCard__description{margin-top:7px;color:rgba(255,255,255,.70);font-size:11px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#marketPage .marketRichCard__facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
#marketPage .marketRichCard__facts small{display:block;color:rgba(255,255,255,.43);font-size:8px;font-weight:900}
#marketPage .marketRichCard__facts strong{display:block;margin-top:2px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#marketPage .marketRichCard__action{width:100%;min-height:40px;margin-top:10px;border:1px solid rgba(150,120,255,.70);border-radius:10px;background:linear-gradient(135deg,rgba(112,66,255,.95),rgba(139,58,255,.95));color:#fff;font-size:12px;font-weight:900}
#marketPage .marketRichCard__action--cancel{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.88)}
#marketPage .marketRichCard.marketDeepLinkPulse{animation:marketDeepLinkCardPulse .72s ease-in-out 4}
@keyframes marketDeepLinkCardPulse{0%,100%{border-color:rgba(128,102,255,.32);box-shadow:none}50%{border-color:rgba(170,145,255,.98);box-shadow:0 0 0 2px rgba(128,102,255,.18),0 0 20px rgba(128,102,255,.28)}}

#marketPage .marketRichCard__placeholder{
  display:flex;align-items:center;justify-content:center;
  font-size:28px;background:#15181d;
}


/* MARKET RESPONSIVE CARD NAME V1.6.5 */
#marketPage .marketRichCard .marketCardName{
  font-size:clamp(12px, 4.2vw, 18px)!important;
  line-height:1.08!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere;
  word-break:normal;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
@media (max-width:360px){
  #marketPage .marketRichCard .marketCardName{
    font-size:clamp(11px, 3.8vw, 14px)!important;
  }
}

/* Market: buyer already owns the card at MAX level. */
#marketPage .marketRichCard__action--max,
#marketPage .marketRichCard__action--max:disabled {
  cursor: default;
  opacity: .58;
  filter: saturate(.55);
  pointer-events: none;
}
#marketPage .marketRichCard__badges .marketRarityPill{white-space:nowrap}
/* Bazar → Mercante */
.merchantIntro {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(128, 102, 255, 0.35);
  border-radius: 14px;
  background: rgba(128, 102, 255, 0.08);
}
.merchantIntro p { margin: 0; color: #d7dbe8; font-size: 13px; line-height: 1.45; }
.merchantIntro small { display: block; margin-top: 6px; color: #9ba6c0; font-size: 12px; }
.merchantIntro__weekend { margin-bottom: 8px; color: #ffd36b; font-weight: 900; font-size: 13px; }
/* Riga "Non hai ancora questa carta!" / "Ce l'hai al Lv.3" (Mercato e Mercante) */
.marketOwned { margin: 7px 0 2px; font-size: 12px; font-weight: 800; line-height: 1.35; }
.marketOwned--new { color: #5ee08e; }
.marketOwned--up { color: #7cc8ff; }
.marketOwned--max { color: #ff8a8a; }
/* Filtri rapidi del Mercato */
.marketChips { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 2px; scrollbar-width: none; }
.marketChips::-webkit-scrollbar { display: none; }
.marketChip { flex: none; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: transparent; color: #c9cde0; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }
.marketChip.isActive { border-color: #8b6cff; background: rgba(139, 108, 255, 0.18); color: #fff; }
.merchantCard--rare { border-color: rgba(245, 197, 66, 0.55) !important; }
html body #marketPage .marketTabs { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.merchantIntro__title { margin-bottom: 6px; font-weight: 900; font-size: 15px; }
.merchantIntro__list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.merchantIntro__list li { color: #c9cde0; font-size: 12.5px; line-height: 1.4; }
.merchantIntro__list b { color: #fff; }
/* Livelli: 10 tacche sotto "Ce l'hai al Lv.3" (Mercato e Mercante) */
.marketLevelBar { display: flex; gap: 2px; margin: 6px 0 2px; max-width: 220px; }
.marketLevelBar i { flex: 1; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.marketLevelBar i.is-on { background: #7cc8ff; }
.marketLevelBar.is-max i.is-on { background: #ff8a8a; }
/* Mercante: settimana, comprate oggi, conto alla rovescia */
.merchantWeek { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.merchantWeek__day { padding: 5px 0; border: 1px solid rgba(128, 102, 255, 0.22); border-radius: 8px; background: rgba(0, 0, 0, 0.25); color: #7d849a; font-size: 10px; font-weight: 800; text-align: center; white-space: nowrap; }
.merchantWeek__day.is-weekend { color: #ffd36b; }
.merchantWeek__day.is-today { border-color: #8b6cff; background: rgba(139, 108, 255, 0.22); color: #fff; }
.merchantProgress { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: #c9cde0; font-size: 12px; }
.merchantProgress b { color: #fff; white-space: nowrap; }
.merchantProgress__bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.merchantProgress__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6d4dff, #b06bff); }
.merchantClock { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(128, 102, 255, 0.3); }
.merchantClock b { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.merchantClock span { color: #9ba6c0; font-size: 12px; }
.merchantCard.is-bought { opacity: 0.55; }
/* Pallino sulla linguetta Mercante */
#marketPage .marketTab.hasDot { position: relative; }
#marketPage .marketTab.hasDot::after { content: ""; position: absolute; top: 6px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 6px #ff4d6d; }
/* Ricerca del Mercato */
.marketSearch { box-sizing: border-box; width: 100%; margin: 0 0 10px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #fff; font: inherit; font-size: 14px; }
.marketSearch:focus { outline: none; border-color: #8b6cff; }
/* Conferma d'acquisto e "è tua!" del Bazar */
.appDialog__body { margin: 0 0 12px; }
.buyDialog__card { display: flex; gap: 12px; align-items: center; }
.buyDialog__card .buyDialog__img { flex: none; width: 72px; height: 100px; border-radius: 10px; overflow: hidden; }
.buyDialog__card .buyDialog__img img, .buyDialog__card .buyDialog__img video { width: 100%; height: 100%; object-fit: cover; }
.buyDialog__info { min-width: 0; }
.buyDialog__info { display: grid; gap: 6px; }
.appDialog .buyDialog__info .marketCardName { font-family: "SDKUSWebLocal", sans-serif !important; font-weight: 400 !important; font-size: 17px; line-height: 1.1; overflow-wrap: anywhere; }
.buyDialog__info .marketRichCard__badges { display: flex; flex-wrap: wrap; gap: 5px; }
.buyDialog__info .marketRichCard__badges span { padding: 4px 7px; border: 1px solid rgba(128, 102, 255, 0.35); border-radius: 999px; background: rgba(128, 102, 255, 0.1); font-size: 10px; font-weight: 800; white-space: nowrap; }
.buyDialog__rows { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.buyDialog__row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #9ba6c0; }
.buyDialog__row b { color: #fff; white-space: nowrap; }
.buyDialog__neg { color: #ff6b81; }
.buyDialog__rows .marketLevelBar { max-width: none; margin: 0 0 4px; }
.marketLevelBar i.is-next { background: repeating-linear-gradient(90deg, #5ee08e 0 3px, rgba(255, 255, 255, 0.1) 3px 5px); }
/* Dopo l'acquisto la tacca nuova si riempie e brilla (solo con le animazioni attive) */
.marketLevelBar i.is-gained { background: #5ee08e; }
html.motion-on .marketLevelBar i.is-gained { animation: levelTickGain 0.9s 0.25s cubic-bezier(.3, 1.3, .5, 1) backwards; transform-origin: left center; }
@keyframes levelTickGain {
  0% { transform: scaleX(0); box-shadow: none; }
  60% { transform: scaleX(1); box-shadow: 0 0 10px #5ee08e; }
  100% { transform: scaleX(1); box-shadow: 0 0 4px rgba(94, 224, 142, 0.6); }
}


/* TRADE BIN IMAGE PREVIEW v1 — compact lightbox to avoid excessive upscaling */
.waifuImageViewer{
  padding:72px 58px 64px!important;
  box-sizing:border-box!important;
  background:rgba(0,0,0,.88)!important;
}
.waifuImageViewer__image{
  width:auto!important;
  height:auto!important;
  max-width:min(70vw,380px)!important;
  max-height:70vh!important;
  object-fit:contain!important;
  border-radius:14px!important;
  box-shadow:0 18px 60px rgba(0,0,0,.55)!important;
}
@media (max-width:480px){
  .waifuImageViewer{padding:68px 52px 58px!important;}
  .waifuImageViewer__image{max-width:70vw!important;max-height:66vh!important;}
  .waifuImageViewer__nav{width:40px!important;height:56px!important;font-size:27px!important;}
  .waifuImageViewer__nav--prev{left:6px!important;}
  .waifuImageViewer__nav--next{right:6px!important;}
}


/* ============================================================
   CARD DETAIL v8 — FULL ARTWORK + BLURRED BACKDROP
   ============================================================ */
.waifuDetail__image{
  isolation:isolate!important;
  background:#090e14!important;
}
.waifuDetail__imageBlur{
  position:absolute!important;
  z-index:0!important;
  inset:-22px!important;
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:blur(18px) saturate(.92) brightness(.58)!important;
  transform:scale(1.08)!important;
  opacity:0;
  transition:opacity .18s ease!important;
  pointer-events:none!important;
}
.waifuDetail__image::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  background:linear-gradient(
    180deg,
    rgba(4,8,12,.08) 0%,
    rgba(4,8,12,.03) 50%,
    rgba(4,8,12,.16) 100%
  )!important;
  pointer-events:none!important;
}
#waifuDetailPhoto{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}
#waifuDetailPlaceholder{
  z-index:2!important;
}

/* Keep artwork controls above both image layers. */
#waifuDetailZoomTarget{z-index:4!important;}
#waifuDetailId,
#waifuDetailSpecial{z-index:5!important;}
#waifuDetailPrev,
#waifuDetailNext,
#waifuDetailClose{z-index:6!important;}

/* Detail rarity badges: stronger contrast than the collection defaults. */
#waifuDetailRarity.rarityBadge{
  flex:0 0 auto!important;
  padding:6px 12px!important;
  border:1px solid rgba(255,255,255,.20)!important;
  background:#e8eee9!important;
  color:#18201d!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  box-shadow:0 2px 8px rgba(0,0,0,.22)!important;
}
#waifuDetailRarity.rarityBadge--rare{
  border-color:#8068c7!important;
  background:#6d55b5!important;
  color:#fff!important;
}
#waifuDetailRarity.rarityBadge--epic{
  border-color:#3b82f6!important;
  background:#2563eb!important;
  color:#fff!important;
}


/* ============================================================
   HOME v2 — COMPACT WALLET
   Stable navigation is removed; the existing hub cards stay intact.
   ============================================================ */
.hubWallet{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
  align-items:center;
  margin:0 0 16px;
  padding:14px 10px;
  border:1px solid #2c3b4c;
  border-radius:16px;
  background:#101821;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.hubWallet__item{
  min-width:0;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  justify-content:center;
  align-items:center;
  column-gap:6px;
}
.hubWallet__icon{
  grid-row:1;
  grid-column:1;
  font-size:17px;
  line-height:1;
}
.hubWallet__item strong{
  grid-row:1;
  grid-column:2;
  min-width:0;
  overflow:hidden;
  color:#fff;
  font-family:'SDK_US_Web',Arial,sans-serif;
  font-size:16px;
  line-height:1.05;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hubWallet__item small{
  grid-row:2;
  grid-column:1 / -1;
  margin-top:5px;
  color:#8399b4;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.10em;
}
.hubWallet__divider{
  width:1px;
  height:34px;
  background:#2a3746;
}
@media (max-width:360px){
  .hubWallet{padding:13px 5px;}
  .hubWallet__item{column-gap:4px;}
  .hubWallet__icon{font-size:15px;}
  .hubWallet__item strong{font-size:14px;}
  .hubWallet__item small{font-size:8px;}
}

/* Three Trade Bin destinations now share the bottom navigation evenly. */
#tradeBinNav{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}


/* ============================================================
   TRADE BIN — VISIBLE BACK TO HUB
   ============================================================ */
.tradeBinBack{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-height:42px;
  margin:8px 0 14px;
  padding:0 15px 0 12px;
  border:1px solid #3e78b9;
  border-radius:12px;
  background:#12243a;
  color:#78b6ff;
  font-family:Arial,Helvetica,sans-serif;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.055em;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.tradeBinBack > span{
  margin-top:-2px;
  color:#fff;
  font-size:26px;
  line-height:.7;
  font-weight:500;
}
.tradeBinBack:active{
  transform:translateY(1px);
  background:#18304c;
}
#cavallinePage > .tradeBinBack{
  margin-left:0;
}
.tradeBinBack--binder{
  margin-left:0;
}
.tradeBinBack--friends{
  margin-left:0;
}


/* ============================================================
   HUB SECTIONS — CONSISTENT BACK TO HUB BUTTON
   ============================================================ */
#marketPage .marketHeader,
#wheelPage .wheelHeader,
#battlePassPage .passHeader{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:14px!important;
}
#marketPage .marketHeader > div,
#wheelPage .wheelHeader > div,
#battlePassPage .passHeader > div{
  width:100%!important;
}
/* Hub: account in uso (nome, @username, ID Telegram) sopra il saldo */
.hubAccount {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #283545;
  border-radius: 16px;
  background: linear-gradient(145deg, #121a23, #0d131a);
}
.hubAccount__avatar {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #5da9ff, #8e2bd1);
  font-weight: 900;
  font-size: 17px;
}
.hubAccount__body { flex: 1; min-width: 0; }
.hubAccount__body strong { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hubAccount__body small { display: block; color: #8995a3; font-size: 12px; }
.hubAccount__body small:empty { display: none; }
.hubAccount__id {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid rgba(93, 169, 255, 0.45);
  border-radius: 10px;
  background: rgba(93, 169, 255, 0.1);
  color: #9ccaff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hubAccount__avatar { position: relative; overflow: hidden; }
.hubAccount__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hubAccount__avatar img[hidden] { display: none; }
.hubSectionBack{
  width:100%!important;
  min-height:46px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  padding:0 16px!important;
  border:1px solid #3e78b9!important;
  border-radius:13px!important;
  background:#12243a!important;
  color:#78b6ff!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  box-shadow:0 5px 16px rgba(0,0,0,.18)!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
}
.hubSectionBack > span{
  margin-top:-2px!important;
  color:#fff!important;
  font-size:28px!important;
  line-height:.7!important;
  font-weight:500!important;
}
.hubSectionBack:active{
  transform:translateY(1px)!important;
  background:#18304c!important;
}


/* ============================================================
   BATTLE PASS V2 — CONCEPT REDESIGN
   ============================================================ */
.battlePassV2{
  --bpBlue:#45a7ff;
  --bpPurple:#8d55ff;
  --bpPink:#f05ebc;
  --bpGold:#ffd45a;
  --bpPanel:#0e1721;
  --bpPanel2:#121d29;
  padding-bottom:28px!important;
}
.battlePassV2 .passHeader{margin-bottom:18px!important;}
.passHeader__row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
}
.passHeader__count{
  flex:0 0 auto;
  min-width:128px;
  padding:12px 14px;
  border:1px solid rgba(69,167,255,.55);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(22,51,87,.8),rgba(11,25,44,.9));
  text-align:center;
  box-shadow:0 0 20px rgba(45,130,255,.09);
}
.passHeader__count strong{display:block;color:#fff;font-size:21px;line-height:1.05;}
.passHeader__count small{display:block;margin-top:5px;color:#88a8cc;font-size:8px;font-weight:900;letter-spacing:.08em;}

.passNextReward{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 210px;
  min-height:230px;
  margin-bottom:18px;
  overflow:hidden;
  border:1px solid #805bff;
  border-radius:18px;
  background:
    radial-gradient(circle at 80% 35%,rgba(123,59,255,.27),transparent 35%),
    linear-gradient(120deg,#10213b 0%,#141a3c 50%,#291044 100%);
  box-shadow:0 0 0 1px rgba(75,180,255,.25),0 0 28px rgba(118,62,255,.18);
}
.passNextReward__glow{
  position:absolute;inset:auto -50px -100px auto;width:260px;height:260px;border-radius:50%;
  background:rgba(221,74,255,.18);filter:blur(50px);pointer-events:none;
}
.passNextReward__content{position:relative;z-index:2;padding:20px 0 18px 22px;}
.passNextReward__eyebrow{color:#ef8fe0;font-size:12px;font-weight:900;letter-spacing:.12em;}
.passNextReward__reward{display:flex;align-items:center;gap:13px;margin-top:10px;}
.passNextReward__icon{flex:0 0 auto;font-size:42px;filter:drop-shadow(0 0 10px rgba(91,172,255,.5));}
.passNextReward__reward h2{margin:0;color:#fff;font-size:22px;line-height:1.05;}
.passNextReward__reward p{margin:6px 0 0;color:#abc3df;font-size:12px;}
.passNextReward__progressRow{display:flex;justify-content:space-between;gap:12px;margin-top:25px;color:#b9cce1;font-size:10px;}
.passNextReward__progressRow strong{color:#fff;font-size:12px;}
.battlePassV2 .passProgress{height:8px;margin:8px 0 14px!important;background:#29405b!important;border-radius:999px;overflow:hidden;}
.battlePassV2 .passProgress__fill{background:linear-gradient(90deg,#63c7ff,#638cff,#9b55ff)!important;}
.battlePassV2 .battlePassClaimButton{
  width:100%!important;margin:0!important;min-height:48px!important;border:1px solid #78b7ff!important;border-radius:12px!important;
  background:linear-gradient(100deg,#268fff,#365fff,#8d43ff)!important;
  box-shadow:0 8px 22px rgba(47,102,255,.22),inset 0 1px rgba(255,255,255,.18)!important;
  font-size:15px!important;
}
.battlePassV2 .battlePassClaimButton:disabled{box-shadow:none!important;filter:saturate(.5)!important;}

.passNextReward__art{position:relative;z-index:1;min-height:230px;}
.passNextReward__card{
  position:absolute;display:grid;place-items:center;width:105px;height:145px;border-radius:13px;
  border:1px solid rgba(153,116,255,.8);background:linear-gradient(145deg,#1c2450,#171a35);
  color:#57618b;font-size:46px;box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.passNextReward__card--back{right:85px;top:48px;transform:rotate(-13deg);}
.passNextReward__card--front{
  right:24px;top:26px;transform:rotate(8deg);border:2px solid #c490ff;
  background:linear-gradient(145deg,#263567,#3a1e65);box-shadow:0 0 24px rgba(125,80,255,.42),0 15px 30px rgba(0,0,0,.4);
}
.passNextReward__card--front span{font-size:50px;filter:drop-shadow(0 0 12px rgba(91,176,255,.45));}

.passCalendar{
  margin-top:18px;padding:16px;border:1px solid #263b52;border-radius:17px;background:linear-gradient(180deg,#0e1823,#0b141d);
}
.passCalendar__heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
.passCalendar .passFeatured__title{margin:0!important;color:#56adff!important;font-size:13px!important;}
.passLegend{display:flex;gap:12px;color:#8fa7c1;font-size:8px;white-space:nowrap;}
.passLegend span{display:flex;align-items:center;gap:4px;}
.passLegend__dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#536f8e;}
.passLegend__dot--claimed{background:#37cb7d;}
.passLegend__dot--next{background:transparent;border:2px solid #e468dc;}
.passLegend__dot--upcoming{background:#536f8e;}

.battlePassV2 .passRewards{
  display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:7px!important;
  padding:0!important;margin:0!important;border:0!important;background:none!important;
}
.battlePassV2 .passRewardCell{
  position:relative!important;min-width:0!important;min-height:82px!important;padding:8px 3px 6px!important;
  border:1px solid #26384a!important;border-radius:11px!important;background:#111c27!important;
  box-shadow:none!important;
}
.battlePassV2 .passRewardCell__icon{font-size:24px!important;}
.battlePassV2 .passRewardCell__amount{font-size:12px!important;}
.battlePassV2 .passRewardCell__day{font-size:7px!important;letter-spacing:.05em!important;color:#7891ad!important;}
.battlePassV2 .passRewardCell--claimed{opacity:.55!important;filter:saturate(.55)!important;}
.battlePassV2 .passRewardCell--next{
  opacity:1!important;filter:none!important;border:2px solid #ed70d7!important;
  background:linear-gradient(160deg,#18253a,#281733)!important;box-shadow:0 0 16px rgba(235,82,208,.23)!important;
}
.battlePassV2 .passRewardCell--next .passRewardCell__day{color:#ff8ee2!important;font-weight:900!important;}
.battlePassV2 .passRewardCell--final{border-color:#806738!important;}
.battlePassV2 .passRewardCell--final.passRewardCell--next{border-color:#ffd75e!important;box-shadow:0 0 18px rgba(255,211,77,.24)!important;}

.battlePassV2 .passFeatured{margin-top:16px!important;padding:16px!important;border:1px solid #263b52!important;border-radius:17px!important;background:#0d1721!important;}
.battlePassV2 .passFeatured__title{margin:0 0 12px!important;color:#56adff!important;font-size:13px!important;}
.battlePassV2 .passFeatured__list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:9px!important;}
.battlePassV2 .passFeatured__item{
  min-height:115px!important;padding:12px 7px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;
  border:1px solid #27394c!important;border-radius:12px!important;background:#111c27!important;text-align:center!important;
}
.battlePassV2 .passFeatured__item>span{font-size:27px!important;}
.battlePassV2 .passFeatured__item>div{display:flex!important;flex-direction:column!important;align-items:center!important;}
.battlePassV2 .passFeatured__item strong{font-size:12px!important;}
.battlePassV2 .passFeatured__item small{margin-top:3px!important;color:#9ab1ca!important;font-size:9px!important;}
.battlePassV2 .passFeatured__item em{margin-top:8px;color:#738ca8;font-size:7px;font-style:normal;font-weight:900;letter-spacing:.08em;}
.battlePassV2 .passFeatured__item.is-claimed em{color:#48d78b;}
.battlePassV2 .passFeatured__item.is-claimed{opacity:.7;}
.battlePassV2 .passFeatured__item.is-next{border-color:#df6cda!important;background:linear-gradient(160deg,#182039,#2a1837)!important;box-shadow:0 0 17px rgba(217,76,211,.18)!important;}
.battlePassV2 .passFeatured__item.is-next em{width:80%;padding:4px;border-radius:999px;background:linear-gradient(90deg,#8f79ff,#d451f0);color:#fff;}
.battlePassV2 .passFeatured__item--final{border-color:#cba94e!important;}
.battlePassV2 .passFeatured__item--final em{color:#ffd65c;}

.passHowItWorks{
  display:flex;gap:11px;margin-top:16px;padding:14px 16px;border:1px solid #1e5f9d;border-radius:14px;background:#0c1b2c;
}
.passHowItWorks__icon{
  flex:0 0 22px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#258bff;color:#07101a;font-weight:900;
}
.passHowItWorks strong{color:#4faaff;font-size:10px;letter-spacing:.08em;}
.passHowItWorks p{margin:4px 0 0;color:#9cb2ca;font-size:9px;line-height:1.45;}

@media(max-width:560px){
  .passHeader__row{align-items:flex-start;}
  .passHeader__count{min-width:105px;padding:10px;}
  .passHeader__count strong{font-size:18px;}
  .passNextReward{grid-template-columns:minmax(0,1fr) 118px;min-height:220px;}
  .passNextReward__content{padding:17px 0 16px 16px;}
  .passNextReward__reward h2{font-size:17px;}
  .passNextReward__icon{font-size:34px;}
  .passNextReward__art{min-height:220px;overflow:hidden;}
  .passNextReward__card{width:78px;height:112px;}
  .passNextReward__card--back{right:47px;top:62px;}
  .passNextReward__card--front{right:4px;top:43px;}
  .passNextReward__card--front span{font-size:37px;}
  .passLegend{gap:6px;font-size:7px;}
  .battlePassV2 .passRewards{gap:5px!important;}
  .battlePassV2 .passRewardCell{min-height:73px!important;}
  .battlePassV2 .passRewardCell__icon{font-size:21px!important;}
  .battlePassV2 .passFeatured__list{gap:6px!important;}
  .battlePassV2 .passFeatured__item{min-height:105px!important;padding:9px 4px!important;}
}
@media(max-width:390px){
  .passHeader__count{display:none;}
  .passNextReward{grid-template-columns:1fr;}
  .passNextReward__art{display:none;}
  .passNextReward__content{padding-right:16px;}
  .passCalendar{padding:11px;}
  .passLegend{display:none;}
  .battlePassV2 .passRewardCell{min-height:68px!important;}
  .battlePassV2 .passRewardCell__amount{font-size:10px!important;}
  .battlePassV2 .passFeatured__list{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}


/* ============================================================
   BATTLE PASS V2.1 — REAL COLLECTION PREVIEW ART
   ============================================================ */
.passNextReward__thumbWrap{
  position:relative;flex:0 0 auto;width:46px;height:58px;display:grid;place-items:center;
}
.passNextReward__thumb{
  width:46px;height:58px;display:block;object-fit:cover;object-position:center;border-radius:7px;
  border:1px solid rgba(166,122,255,.9);box-shadow:0 0 12px rgba(124,75,255,.28);
}
.passNextReward__thumb[hidden]{display:none!important;}
.passNextReward__artImage{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:11px;
}
.passNextReward__artImage[hidden]{display:none!important;}

.passFeatured__preview{
  position:relative;width:54px;height:68px;display:grid;place-items:center;flex:0 0 auto;
}
.passFeatured__preview>span{font-size:27px;}
.passFeatured__preview img{
  width:54px;height:68px;object-fit:cover;object-position:center;border-radius:7px;
  border:1px solid rgba(117,161,211,.45);box-shadow:0 6px 14px rgba(0,0,0,.25);
}
.passFeatured__preview img[hidden]{display:none!important;}
.passFeatured__preview.has-image>span{display:none;}
.passFeatured__item.is-next .passFeatured__preview img{border-color:#d978ff;box-shadow:0 0 14px rgba(212,91,255,.32);}
.passFeatured__item--final .passFeatured__preview img{border-color:#e2bf57;}

.passPreviewDisclaimer{
  margin:12px 2px 0;color:#7188a3;font-size:8px;line-height:1.45;text-align:center;
}
@media(max-width:560px){
  .passFeatured__preview{width:44px;height:58px;}
  .passFeatured__preview img{width:44px;height:58px;}
}


/* ============================================================
   BATTLE PASS V2.2 — MOBILE POLISH
   Desktop art remains unchanged.
   ============================================================ */

/* Make every calendar cell use the exact same internal geometry. */
.battlePassV2 .passRewardCell{
  display:grid!important;
  grid-template-rows:32px 20px 13px!important;
  align-content:center!important;
  justify-items:center!important;
  align-items:center!important;
  box-sizing:border-box!important;
}
.battlePassV2 .passRewardCell__icon{
  grid-row:1!important;
  width:34px!important;
  height:32px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
  line-height:32px!important;
  text-align:center!important;
  transform:none!important;
}
.battlePassV2 .passRewardCell__amount{
  grid-row:2!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:20px!important;
  text-align:center!important;
}
.battlePassV2 .passRewardCell__day{
  grid-row:3!important;
  width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:13px!important;
  text-align:center!important;
}
.battlePassV2 .passRewardCell__check{
  top:4px!important;
  right:5px!important;
  margin:0!important;
  line-height:1!important;
}

/* Mobile: preserve the premium card artwork instead of hiding it. */
@media(max-width:560px){
  .battlePassV2 .passHeader__row{
    align-items:flex-end!important;
  }
  .battlePassV2 .passHeader__count{
    display:block!important;
    min-width:94px!important;
    padding:8px 9px!important;
    border-radius:12px!important;
  }
  .battlePassV2 .passHeader__count strong{
    font-size:16px!important;
  }
  .battlePassV2 .passHeader__count small{
    font-size:6.5px!important;
    letter-spacing:.065em!important;
  }

  .battlePassV2 .passNextReward{
    grid-template-columns:minmax(0,1fr) 100px!important;
    min-height:250px!important;
  }
  .battlePassV2 .passNextReward__content{
    padding:17px 0 16px 16px!important;
  }

  /* The small duplicated thumbnail disappears on phones. */
  .battlePassV2 .passNextReward__thumbWrap{
    display:none!important;
  }
  .battlePassV2 .passNextReward__reward{
    padding-right:4px!important;
  }
  .battlePassV2 .passNextReward__reward h2{
    font-size:15px!important;
    line-height:1.12!important;
  }
  .battlePassV2 .passNextReward__reward p{
    font-size:10px!important;
    line-height:1.3!important;
  }

  /* One larger random Collection card on the right. */
  .battlePassV2 .passNextReward__art{
    display:block!important;
    min-height:250px!important;
    overflow:visible!important;
  }
  .battlePassV2 .passNextReward__card--back{
    display:none!important;
  }
  .battlePassV2 .passNextReward__card--front{
    display:grid!important;
    width:82px!important;
    height:126px!important;
    right:8px!important;
    top:50px!important;
    transform:rotate(6deg)!important;
    border:2px solid #c58cff!important;
    box-shadow:
      0 0 22px rgba(143,82,255,.48),
      0 14px 28px rgba(0,0,0,.38)!important;
  }
  .battlePassV2 .passNextReward__artImage{
    object-fit:cover!important;
    object-position:center!important;
  }

  .battlePassV2 .passNextReward__progressRow{
    margin-top:26px!important;
  }

  /* Give the 7x4 calendar enough usable width without overlap. */
  .battlePassV2 .passCalendar{
    padding:12px 9px!important;
  }
  .battlePassV2 .passRewards{
    width:100%!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:3px!important;
  }
  .battlePassV2 .passRewardCell{
    width:100%!important;
    min-width:0!important;
    min-height:72px!important;
    padding:5px 1px!important;
    grid-template-rows:28px 18px 11px!important;
    border-radius:9px!important;
  }
  .battlePassV2 .passRewardCell__icon{
    width:29px!important;
    height:28px!important;
    font-size:19px!important;
    line-height:28px!important;
  }
  .battlePassV2 .passRewardCell__amount{
    min-width:0!important;
    font-size:10px!important;
    line-height:18px!important;
    white-space:nowrap!important;
  }
  .battlePassV2 .passRewardCell__day{
    min-width:0!important;
    font-size:6.2px!important;
    line-height:11px!important;
    white-space:nowrap!important;
    letter-spacing:.025em!important;
  }
  .battlePassV2 .passRewardCell__check{
    top:3px!important;
    right:3px!important;
    font-size:10px!important;
  }
  .battlePassV2 .passRewardCell--next .passRewardCell__amount{
    font-size:9.5px!important;
  }
}

/* Narrow phones: keep the same structure; only scale it down. */
@media(max-width:390px){
  .battlePassV2 .passHeader__count{
    display:block!important;
    min-width:82px!important;
  }
  .battlePassV2 .passHeader__count strong{
    font-size:14px!important;
  }
  .battlePassV2 .passHeader__count small{
    font-size:5.7px!important;
  }

  .battlePassV2 .passNextReward{
    grid-template-columns:minmax(0,1fr) 84px!important;
  }
  .battlePassV2 .passNextReward__art{
    display:block!important;
  }
  .battlePassV2 .passNextReward__card--front{
    width:70px!important;
    height:108px!important;
    right:6px!important;
    top:59px!important;
  }
  .battlePassV2 .passNextReward__content{
    padding-right:0!important;
  }
  .battlePassV2 .passNextReward__reward h2{
    font-size:13px!important;
  }
  .battlePassV2 .passNextReward__reward p{
    font-size:9px!important;
  }

  .battlePassV2 .passCalendar{
    padding:10px 6px!important;
  }
  .battlePassV2 .passRewards{
    gap:2px!important;
  }
  .battlePassV2 .passRewardCell{
    min-height:68px!important;
    grid-template-rows:26px 17px 10px!important;
    border-radius:8px!important;
  }
  .battlePassV2 .passRewardCell__icon{
    width:27px!important;
    height:26px!important;
    font-size:18px!important;
    line-height:26px!important;
  }
  .battlePassV2 .passRewardCell__amount{
    font-size:9px!important;
    line-height:17px!important;
  }
  .battlePassV2 .passRewardCell__day{
    font-size:5.6px!important;
    line-height:10px!important;
  }
}


/* ============================================================
   BATTLE PASS V2.3 — ALIGNMENT FIX
   ============================================================ */

/* Calendar cells: force true centering on desktop AND mobile. */
.battlePassV2 .passRewardCell{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:34px 21px 14px!important;
  align-content:center!important;
  align-items:center!important;
  justify-content:center!important;
  justify-items:center!important;
  text-align:center!important;
  padding:7px 2px!important;
}
.battlePassV2 .passRewardCell > *:not(.passRewardCell__check){
  justify-self:center!important;
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.battlePassV2 .passRewardCell__icon{
  width:36px!important;
  height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0 auto!important;
  padding:0!important;
}
.battlePassV2 .passRewardCell__amount{
  width:100%!important;
  height:21px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}
.battlePassV2 .passRewardCell__day{
  width:100%!important;
  height:14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
}
.battlePassV2 .passRewardCell__check{
  position:absolute!important;
  top:5px!important;
  right:5px!important;
  margin:0!important;
}

/* Vertically balance the purple Next Reward card on phones. */
@media(max-width:560px){
  .battlePassV2 .passNextReward{
    min-height:232px!important;
  }
  .battlePassV2 .passNextReward__content{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    min-height:232px!important;
    box-sizing:border-box!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
  }
  .battlePassV2 .passNextReward__progressRow{
    margin-top:18px!important;
  }
  .battlePassV2 .passNextReward__art{
    min-height:232px!important;
  }
  .battlePassV2 .passNextReward__card--front{
    top:50%!important;
    transform:translateY(-50%) rotate(6deg)!important;
  }

  .battlePassV2 .passRewardCell{
    grid-template-rows:28px 18px 11px!important;
    padding:5px 1px!important;
  }
  .battlePassV2 .passRewardCell__icon{
    width:30px!important;height:28px!important;
  }
  .battlePassV2 .passRewardCell__amount{height:18px!important;}
  .battlePassV2 .passRewardCell__day{height:11px!important;}
}

@media(max-width:390px){
  .battlePassV2 .passNextReward,
  .battlePassV2 .passNextReward__content,
  .battlePassV2 .passNextReward__art{
    min-height:224px!important;
  }
  .battlePassV2 .passRewardCell{
    grid-template-rows:26px 17px 10px!important;
  }
  .battlePassV2 .passRewardCell__icon{
    width:28px!important;height:26px!important;
  }
  .battlePassV2 .passRewardCell__amount{height:17px!important;}
  .battlePassV2 .passRewardCell__day{height:10px!important;}
}

/* BATTLE PASS V2.4 — DESKTOP TRUE CENTER */
@media (min-width:561px){
.battlePassV2 .passCalendar{box-sizing:border-box!important;width:100%!important;overflow:hidden!important}
.battlePassV2 .passRewards{
 box-sizing:border-box!important;width:100%!important;max-width:100%!important;
 display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;
 gap:7px!important;margin:0!important;padding:0!important;overflow:hidden!important
}
.battlePassV2 .passRewardCell{
 position:relative!important;box-sizing:border-box!important;
 width:100%!important;min-width:0!important;max-width:100%!important;min-height:112px!important;
 margin:0!important;padding:10px 2px!important;transform:none!important;
 display:grid!important;grid-template-columns:1fr!important;grid-template-rows:38px 24px 16px!important;
 align-content:center!important;align-items:center!important;justify-items:center!important;text-align:center!important
}
.battlePassV2 .passRewardCell__icon{
 grid-column:1!important;grid-row:1!important;width:40px!important;height:38px!important;
 margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;
 justify-content:center!important;justify-self:center!important;align-self:center!important;
 text-align:center!important;font-size:28px!important;line-height:1!important;transform:none!important
}
.battlePassV2 .passRewardCell__amount{
 grid-column:1!important;grid-row:2!important;width:100%!important;height:24px!important;
 margin:0!important;padding:0!important;display:flex!important;align-items:center!important;
 justify-content:center!important;justify-self:stretch!important;text-align:center!important;line-height:1!important
}
.battlePassV2 .passRewardCell__day{
 grid-column:1!important;grid-row:3!important;width:100%!important;height:16px!important;
 margin:0!important;padding:0!important;display:flex!important;align-items:center!important;
 justify-content:center!important;justify-self:stretch!important;text-align:center!important;line-height:1!important
}
.battlePassV2 .passRewardCell__check{
 position:absolute!important;top:6px!important;right:7px!important;left:auto!important;margin:0!important;transform:none!important
}
}
/* Telefoni: stessi margini laterali in tutte le card del Battle Pass.
   Le regole per i telefoni stretti (280) davano al calendario solo 6px di
   margine (il titolo "OCTOBER REWARDS" e le caselle arrivavano quasi al
   bordo), mentre le altre card ne hanno 16px; nella card Next Reward il
   testo non aveva margine a destra e "23 / 28" andava a capo. */
@media (max-width: 560px) {
  .battlePassV2 .passCalendar {
    padding: 14px 16px 16px !important;
  }
  .battlePassV2 .passCalendar__heading {
    margin-bottom: 12px !important;
  }
  .battlePassV2 .passRewards {
    gap: 4px !important;
  }
  .battlePassV2 .passNextReward__content {
    padding-left: 16px !important;
    padding-right: 10px !important;
  }
  .battlePassV2 .passNextReward__progressRow strong {
    white-space: nowrap;
  }
  .battlePassV2 .passNextReward__card--front {
    right: 16px !important;
  }
  /* Con le caselle un po' più strette "SELECT" non deve uscire. */
  .battlePassV2 .passRewardCell--selectable .passRewardCell__amount {
    max-width: 100%;
    overflow: hidden;
    font-size: 7px !important;
    letter-spacing: 0 !important;
  }
  /* Legenda (Claimed / Next / Upcoming) anche sui telefoni stretti, dove
     era nascosta: va sotto il titolo invece che accanto. */
  .battlePassV2 .passCalendar__heading {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .battlePassV2 .passLegend {
    display: flex !important;
    gap: 12px;
    font-size: 10px;
  }
}


/* ============================================================
   WHEEL OF FORTUNE V2 — DARK NEON CONCEPT
   ============================================================ */
.wheelV2{--wvBlue:#248cff;--wvPurple:#8e35ff;--wvPink:#e649ef;--wvPanel:#0b1724;--wvLine:#24598a;padding-bottom:30px!important}
.wheelV2Header{display:block!important;margin-bottom:18px!important}
.wheelV2Header__row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
#wheelPage.wheelV2 .wheelHeader h1{margin:4px 0 3px!important;font-size:34px!important;line-height:1!important}
.wheelV2Header p{color:#9cb9d9!important}
.wheelV2Balance{flex:0 0 116px!important;display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;justify-content:center!important;align-items:center!important;gap:1px 8px!important;margin:0!important;padding:11px!important;border:1px solid #8743e7!important;border-radius:14px!important;background:linear-gradient(145deg,#170d31,#1d1039)!important;box-shadow:0 0 18px rgba(127,48,255,.15)}
.wheelV2Balance__icon{grid-row:1/3!important;font-size:28px!important;letter-spacing:0!important}
.wheelV2Balance strong{grid-column:2;font-size:23px!important;line-height:1!important}
.wheelV2Balance small{grid-column:2;color:#c48dff;font-size:7px;font-weight:900;line-height:1.05;letter-spacing:.08em}

.wheelV2SectionTitle{color:#cf58ff;font-size:13px;font-weight:900;letter-spacing:.11em}
.wheelV2Stake{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 1fr;min-height:285px;margin-bottom:18px;padding:18px 20px;border:1px solid #7447ed;border-radius:18px;background:radial-gradient(circle at 75% 45%,rgba(97,42,220,.25),transparent 38%),linear-gradient(120deg,#0d1930,#111536 58%,#241040);box-shadow:0 0 24px rgba(94,54,255,.14);overflow:hidden}
.wheelV2Stake__main{position:relative;z-index:2;min-width:0}
.wheelV2Stake__main>p{margin:6px 0 12px;color:#aac4e1;font-size:11px}
.wheelV2StakeCard{width:100%;min-height:145px!important;margin:0 0 12px!important;border:1px dashed #e653f2!important;border-radius:13px!important;background:rgba(13,16,40,.5)!important}
.wheelV2StakeCard .wheelStakeCard__empty{min-height:145px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;text-align:center!important;padding:12px!important}
.wheelV2Plus{display:grid!important;place-items:center!important;width:50px!important;height:50px!important;margin:0 auto 9px!important;border:1px solid #6caeff;border-radius:9px;color:#91c4ff;font-size:30px!important;font-weight:300}
.wheelV2StakeCard .wheelStakeCard__empty strong{font-size:13px!important;color:#dca4ff!important}
.wheelV2StakeCard .wheelStakeCard__empty small{color:#b6a7e1!important}
.wheelV2StakeCard:has(img){grid-template-columns:60px 1fr auto!important;min-height:145px!important;padding:10px!important;border-style:solid!important}
.wheelV2StakeCard>img{width:60px!important;height:86px!important}
.wheelV2Choose{width:100%;height:50px!important;border:1px solid #5caeff!important;border-radius:11px!important;background:linear-gradient(100deg,#098cff,#4d35ff,#bc22ef)!important;color:#fff!important;box-shadow:0 0 17px rgba(80,52,255,.2);font-size:14px!important}

.wheelV2Stake__art{position:relative;min-height:250px}
.wheelV2ArtCard{position:absolute;overflow:hidden;width:118px;height:165px;border-radius:12px;border:1px solid #a36aff;background:linear-gradient(145deg,#283064,#221744);box-shadow:0 15px 28px rgba(0,0,0,.4)}
.wheelV2ArtCard img{width:100%;height:100%;object-fit:cover}
.wheelV2ArtCard>span{width:100%;height:100%;display:grid;place-items:center;color:#777fc1;font-size:48px}
.wheelV2ArtCard--back{right:20px;top:75px;transform:rotate(12deg);opacity:.55}
.wheelV2ArtCard--front{right:88px;top:26px;transform:rotate(-10deg);border:2px solid #e69aff;box-shadow:0 0 24px rgba(197,71,255,.38),0 15px 30px rgba(0,0,0,.4)}
.wheelV2Stake__art em{position:absolute;right:3px;bottom:2px;color:#b9c6e2;font-size:9px;text-align:center}

.wheelV2Rewards{margin-bottom:18px;padding:14px 0 0;border:1px solid #234e79;border-radius:17px;background:linear-gradient(180deg,#091522,#07111c);overflow:hidden}
.wheelV2Rewards>.wheelV2SectionTitle{padding:0 14px 10px;color:#875eff}
.wheelV2 .wheelStage.wheelStage--reel{width:100%!important;margin:0!important;overflow:visible!important}
.wheelV2 .wheelReel{border-left:0!important;border-right:0!important;border-radius:0!important}
.wheelV2 .wheelReelCell{min-width:20%!important}
.wheelV2 .wheelReelCell--winner{background:radial-gradient(circle,#6920ad,#311258)!important;box-shadow:inset 0 0 0 2px #d568ff,0 0 22px rgba(188,69,255,.6)!important}
.wheelV2 .wheelReelHint{padding:9px 0 11px!important}

.wheelV2Spin{width:100%!important;min-height:68px!important;height:auto!important;margin:0 0 18px!important;border:1px solid #ad65ff!important;border-radius:17px!important;background:linear-gradient(100deg,#253bff,#6a28ff,#d21bf0)!important;box-shadow:0 0 25px rgba(106,39,255,.3)!important;color:#fff!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important}
.wheelV2Spin strong{font-size:18px;line-height:1}
.wheelV2Spin small{font-size:10px;font-weight:500;color:#d9c8ff}
.wheelV2Spin:disabled{background:linear-gradient(100deg,#252947,#442066)!important;opacity:.62!important;box-shadow:none!important}

.wheelV2Options{margin:0 0 16px!important;padding:15px 17px!important;border:1px solid #24598a!important;border-radius:15px!important;background:#0a1928!important}
.wheelV2Options__copy{min-width:0}
.wheelV2Options .wheelV2SectionTitle{margin-bottom:11px;color:#42a5ff}
.wheelV2Options strong{font-size:12px!important}
.wheelV2Options small{margin-top:5px!important;color:#8faed0!important}

.wheelV2How{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:11px;padding:15px;border:1px solid #2377ba;border-radius:15px;background:#081d31}
.wheelV2How__icon{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#2799ff;color:#05111d;font-weight:900}
.wheelV2How .wheelV2SectionTitle{color:#42a5ff}
.wheelV2How p{margin:5px 0 0;color:#a0bad6;font-size:9px;line-height:1.5}
.wheelV2Rates{margin:0!important;padding:10px 15px!important;border:1px solid #3188cf!important;border-radius:10px!important;color:#5bb4ff!important;white-space:nowrap}

@media(max-width:560px){
 .wheelV2Header__row{align-items:flex-start}
 #wheelPage.wheelV2 .wheelHeader h1{font-size:29px!important}
 .wheelV2Balance{flex-basis:88px!important;padding:8px!important}
 .wheelV2Balance__icon{font-size:22px!important}.wheelV2Balance strong{font-size:19px!important}
 .wheelV2Stake{grid-template-columns:1fr;padding:15px}
 .wheelV2Stake__art{display:none}
 .wheelV2StakeCard{min-height:135px!important}
 .wheelV2StakeCard .wheelStakeCard__empty{min-height:135px!important}
 .wheelV2Rewards{padding-top:12px}
 .wheelV2 .wheelReelCell{min-width:25%!important}
 .wheelV2How{grid-template-columns:28px 1fr}
 .wheelV2Rates{grid-column:1/-1;width:100%;margin-top:4px!important}
}
@media(max-width:390px){
 .wheelV2Header__row{gap:8px}
 #wheelPage.wheelV2 .wheelHeader h1{font-size:25px!important}
 .wheelV2Balance{flex-basis:78px!important}
 .wheelV2 .wheelReelCell{min-width:28%!important}
}


/* ============================================================
   WHEEL V2.1 — REEL + STAKE READABILITY FIX
   ============================================================ */
.wheelV2 .wheelStage--reel{
  position:relative!important;
  display:block!important;
  height:auto!important;
  min-height:142px!important;
  padding:14px 0 0!important;
}
.wheelV2 .wheelReel{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:112px!important;
  min-height:112px!important;
  overflow:hidden!important;
  background:#101923!important;
}
.wheelV2 .wheelReel__track{
  display:flex!important;
  flex-direction:row!important;
  align-items:stretch!important;
  width:max-content!important;
  height:112px!important;
  min-height:112px!important;
  visibility:visible!important;
  opacity:1!important;
}
.wheelV2 .wheelReelCell{
  box-sizing:border-box!important;
  flex:0 0 126px!important;
  width:126px!important;
  min-width:126px!important;
  height:112px!important;
  min-height:112px!important;
  padding:14px 8px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  visibility:visible!important;
  opacity:1!important;
}
.wheelV2 .wheelReelCell>span{
  display:block!important;
  font-size:28px!important;
  line-height:1!important;
}
.wheelV2 .wheelReelCell>strong{
  display:block!important;
  max-width:110px!important;
  color:#f2f5fb!important;
  font-size:10px!important;
  line-height:1.15!important;
  text-align:center!important;
}
.wheelV2 .wheelReelMarker{
  top:8px!important;
  bottom:29px!important;
}
.wheelV2 .wheelReelHint{
  display:block!important;
  margin:0!important;
  padding:9px 0 10px!important;
  color:#8298b3!important;
  text-decoration:none!important;
}

/* Give the selected card's name real room instead of ellipsizing it. */
.wheelV2 .wheelStakeCard:has(img){
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:12px!important;
  row-gap:10px!important;
  align-items:center!important;
  padding:12px!important;
}
.wheelV2 .wheelStakeCard>img{
  grid-column:1!important;
  grid-row:1/3!important;
  width:68px!important;
  height:98px!important;
  object-fit:cover!important;
  border-radius:9px!important;
}
.wheelV2 .wheelStakeCard__info{
  grid-column:2!important;
  grid-row:1!important;
  min-width:0!important;
  align-self:end!important;
}
.wheelV2 .wheelStakeCard__info>small{
  display:block!important;
  margin-bottom:5px!important;
}
.wheelV2 .wheelStakeCard__info>strong{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  word-break:normal!important;
  font-size:15px!important;
  line-height:1.12!important;
  color:#fff!important;
}
.wheelV2 .wheelStakeCard__info>span{
  display:block!important;
  margin-top:5px!important;
  font-size:10px!important;
  line-height:1.25!important;
  color:#b8c8e4!important;
}
.wheelV2 #wheelChangeCardInline{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:start!important;
  align-self:start!important;
  margin:0!important;
  min-width:74px!important;
  height:31px!important;
}

@media(max-width:560px){
  .wheelV2 .wheelReel,
  .wheelV2 .wheelReel__track{
    height:104px!important;
    min-height:104px!important;
  }
  .wheelV2 .wheelReelCell{
    flex-basis:96px!important;
    width:96px!important;
    min-width:96px!important;
    height:104px!important;
    min-height:104px!important;
  }
  .wheelV2 .wheelStakeCard:has(img){
    grid-template-columns:62px minmax(0,1fr)!important;
  }
  .wheelV2 .wheelStakeCard>img{
    width:62px!important;
    height:90px!important;
  }
}


/* ============================================================
   WHEEL V2.2 — DESKTOP STAKE ART SEPARATION
   ============================================================ */
@media(min-width:561px){
  .wheelV2Stake{
    grid-template-columns:minmax(0,47%) minmax(0,53%)!important;
    column-gap:22px!important;
  }
  .wheelV2Stake__main{
    position:relative!important;
    z-index:3!important;
    min-width:0!important;
  }
  .wheelV2Stake__art{
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
  }

  /* Keep both decorative cards completely inside the artwork half. */
  .wheelV2ArtCard--front{
    right:34px!important;
    top:26px!important;
  }
  .wheelV2ArtCard--back{
    right:0!important;
    top:76px!important;
  }

  /* Prevent the selected-card information panel from visually colliding
     with the artwork even with long names. */
  .wheelV2StakeCard{
    max-width:100%!important;
    overflow:hidden!important;
  }
}


/* ============================================================
   TRADE BIN — ARCHIVE REDESIGN V3
   Visual-only layer on top of the verified working checkpoint.
   ============================================================ */
#cavallinePage{
  --archiveBlue:#328eff;
  --archivePurple:#8b55ff;
}

/* Collection hero */
#cavallinePage .sectionIntro--collection{
  position:relative;
  min-height:118px;
  padding-right:198px;
  overflow:visible;
}
#cavallinePage .sectionIntro__title{
  position:relative;
  z-index:2;
  font-size:42px!important;
  line-height:.96!important;
}
/* ============================================================
   PACK (Hub → Open Packs)
   ============================================================ */
.hubCard--packs {
  border-color: #6a3346;
  background: linear-gradient(145deg, #23141b, #14111a);
}
.hubCard--packs .hubCard__icon { font-size: 28px; }

.packsHeader { margin: 4px 0 18px; }
.packsHeader .hubSectionBack { margin-bottom: 16px; }
.packsHeader .sectionIntro__eyebrow {
  margin: 0 0 7px;
  color: #ff6b8b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
}
.packsHeader h1 {
  margin: 0 !important;
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-size: clamp(34px, 10vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
}
.packsHeader p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.35;
}

.packsBalance {
  margin-bottom: 12px;
  padding: 18px 16px;
  border: 1px solid #5a2a3c;
  border-radius: 18px;
  background: radial-gradient(circle at 15% 20%, rgba(255, 92, 130, 0.22), transparent 55%),
    linear-gradient(145deg, #1d1219, #120e15);
}
.packsBalance__count { display: flex; align-items: baseline; gap: 10px; }
.packsBalance__count span { font-size: 30px; }
.packsBalance__count strong { font-size: 44px; line-height: 1; font-weight: 900; }
.packsBalance__count small { color: #ff9db3; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }


.packsOpen {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  margin-bottom: 14px;
}
.packsOpen__btn {
  padding: 14px 8px;
  border: 1px solid rgba(255, 120, 150, 0.45);
  border-radius: 14px;
  background: rgba(255, 92, 130, 0.12);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
}
.packsOpen__btn--all {
  border-color: rgba(255, 120, 150, 0.85);
  background: linear-gradient(135deg, #d6335c, #8e2bd1);
}
.packsOpen__btn:disabled { opacity: 0.4; }

.packsCard {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #283545;
  border-radius: 16px;
  background: linear-gradient(145deg, #121a23, #0d131a);
}
.packsCard__title { color: #5da9ff; font-size: 11px; font-weight: 900; letter-spacing: 0.14em; }
.packsCard__text { margin: 10px 0 0; color: #8995a3; font-size: 12px; line-height: 1.45; }










.packsRates { display: grid; gap: 2px; margin-top: 10px; }
.packsRates__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #d7dbe8;
  font-size: 13px;
}
.packsRates__row b { color: #fff; white-space: nowrap; }

.packsSettings { display: grid; gap: 4px; margin-top: 8px; }
.packsSettings__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.packsSettings__row strong { display: block; font-size: 14px; }
.packsSettings__row small { display: block; margin-top: 3px; color: #8995a3; font-size: 12px; line-height: 1.35; }

/* --- Rivelazione --- */
body.packsRevealOpen { overflow: hidden; }
.packsReveal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 35%, rgba(142, 43, 209, 0.35), transparent 60%), #07060b;
  color: #fff;
}
.packsReveal[hidden] { display: none; }
.packsReveal__top { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.packsReveal__top span { color: #b9a9b2; font-weight: 800; }
.packsReveal__stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow-y: auto;
}
.packsReveal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.packsReveal__actions button {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 900;
}
.packsReveal__actions .packsReveal__next {
  border-color: rgba(255, 120, 150, 0.85);
  background: linear-gradient(135deg, #d6335c, #8e2bd1);
}
.packsReveal__skip[hidden] { display: none; }
.packsReveal__skip[hidden] + .packsReveal__next { grid-column: 1 / -1; }













.packCard__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 9px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 12px;
  font-weight: 900;
}
.packCard__tag--new { background: linear-gradient(135deg, #d6335c, #8e2bd1); }



@keyframes packCardIn {
  from { transform: translateY(18px) scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.packsSummary { width: 100%; max-width: 560px; align-self: stretch; margin: 0 auto; padding: 12px 0; }
.packsSummary__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.packsSummary__stats div {
  padding: 12px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}
.packsSummary__stats b { display: block; font-size: 24px; }
.packsSummary__stats small { color: #b9bbca; font-size: 11px; line-height: 1.35; }
.packsSummary__line { margin: 12px 0; text-align: center; color: #d7dbe8; font-size: 13px; }
.packsSummary__subtitle { margin: 6px 0 8px; font-weight: 900; font-size: 13px; }
.packsSummary__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
[data-card-preview] { cursor: zoom-in; }
.tradePending__thumb { overflow: hidden; }
.packsSummary__item {
  position: relative;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background: #11111a;
  color: #fff;
  text-align: left;
  font: inherit;
}
.packsSummary__item.is-new { border-color: rgba(255, 92, 130, 0.8); }
.packsSummary__item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.packsSummary__item small { display: block; padding: 4px 5px; font-size: 9px; line-height: 1.25; color: #d7dbe8; }
.packsSummary__item--object { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 4px; }
.packsSummary__item--object span { font-size: 26px; }
.packsSummary__new,
.packsSummary__lv {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  font-size: 9px;
  font-weight: 900;
}
.packsSummary__new { background: linear-gradient(135deg, #d6335c, #8e2bd1); }


/* Il riepilogo può essere lungo: parte dall'alto e scorre. */
.packsReveal__stage.is-summary { justify-content: flex-start; }



/* --- Bustina da strappare --- */
.packsReveal__next[hidden] { display: none; }
.packsReveal__actions:has(.packsReveal__next[hidden]) .packsReveal__skip { grid-column: 1 / -1; }















/* Carta evento Rare: bagliore dorato prima di girarla */



.packCard__tag--event { background: linear-gradient(135deg, #f5a623, #b8641a); }


/* --- Tab Compra --- */
.packsBalance__coins { margin: 6px 0 0; color: #f5d27a; font-size: 13px; }
.packsTabs { margin-bottom: 14px; }
.packsShop { display: grid; gap: 10px; margin-top: 12px; }
.packsShop__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.packsShop__info strong { display: block; font-size: 16px; }
.packsShop__info small { color: #8995a3; font-size: 12px; }
.packsShop__buy {
  padding: 11px 14px;
  border: 1px solid rgba(255, 120, 150, 0.6);
  border-radius: 12px;
  background: rgba(255, 92, 130, 0.14);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}
.packsShop__buy:disabled { opacity: 0.4; }
.packsShop__row--bulk {
  grid-template-columns: 1fr;
  border-color: rgba(255, 120, 150, 0.5);
  background: radial-gradient(circle at 90% 0, rgba(255, 92, 130, 0.16), transparent 60%), rgba(255, 255, 255, 0.03);
}
.packsShop__qty { display: grid; grid-template-columns: 44px 1fr 44px auto; align-items: center; gap: 8px; }
.packsShop__qty button {
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
}
.packsShop__qty button:disabled { opacity: 0.35; }
.packsShop__qty .packsShop__max { padding: 0 12px; font-size: 12px; }
.packsShop__qty span { text-align: center; }
.packsShop__qty span b { display: block; font-size: 20px; }
.packsShop__qty span small { color: #b9a9b2; font-size: 12px; }
.packsShop__total { text-align: center; color: #d7dbe8; font-size: 14px; }
.packsShop__total b { color: #f5d27a; font-size: 18px; }
.packsShop__buy--bulk { width: 100%; padding: 14px; border-color: rgba(255, 120, 150, 0.85); background: linear-gradient(135deg, #d6335c, #8e2bd1); }

/* ============================================================
   Apertura v3: bustina olografica da tagliare (Pokémon TCG Pocket),
   lampo di luce (gacha Uma Musume), mazzo da scorrere, risultati.
   ============================================================ */















/* Lampo di luce */
.packBurst { position: relative; width: 100%; height: 100%; min-height: 360px; display: grid; place-items: center; }
.packBurst span {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: packBurst 1.1s ease-out forwards;
}
.packBurst span:nth-child(2) { animation-delay: 0.12s; }
.packBurst span:nth-child(3) { animation-delay: 0.24s; }
.packBurst--white span { background: radial-gradient(circle, #fff 0%, rgba(160, 200, 255, 0.6) 40%, transparent 70%); }
.packBurst--gold span { background: radial-gradient(circle, #fff6c8 0%, rgba(255, 196, 40, 0.75) 40%, transparent 70%); }
.packBurst--rainbow span { background: conic-gradient(from 0deg, #ff4d6d, #ffbe0b, #3bf4b0, #3a86ff, #b14dff, #ff4d6d); filter: blur(6px); }
.packBurst--rainbow::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.18) 0 8deg, transparent 8deg 24deg);
  animation: packRays 1.4s ease-out forwards;
}
@keyframes packBurst { 0% { transform: scale(0.2); opacity: 1; } 70% { opacity: 0.9; } 100% { transform: scale(16); opacity: 0; } }
@keyframes packRays { from { transform: rotate(0) scale(0.6); opacity: 0; } 40% { opacity: 1; } to { transform: rotate(40deg) scale(1.2); opacity: 0; } }

/* Mazzo da scorrere */

















/* Risultati: le carte speciali tutte insieme (stile 10-pull) */
.packsHighlights { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.packsHighlights__card {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: #171722;
  animation: packCardIn 0.4s ease-out both;
}
.packsHighlights__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.packsHighlights__card--r1 { border-color: #f5c542; box-shadow: 0 0 14px rgba(245, 197, 66, 0.5); }
.packsHighlights__card.is-event {
  border-color: transparent;
  background: linear-gradient(#171722, #171722) padding-box, linear-gradient(135deg, #ff4d6d, #ffbe0b, #3bf4b0, #3a86ff, #b14dff) border-box;
}

.packsHighlights__card:nth-child(2) { animation-delay: 0.05s; }
.packsHighlights__card:nth-child(3) { animation-delay: 0.1s; }
.packsHighlights__card:nth-child(4) { animation-delay: 0.15s; }
.packsHighlights__card:nth-child(5) { animation-delay: 0.2s; }
.packsHighlights__card:nth-child(n + 6) { animation-delay: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  .packBurst span, .packBurst--rainbow::before { animation: none; }
}

/* Riepilogo diviso tra Standard ed eventi */
.packsGroup {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.packsGroup--event {
  border-color: rgba(177, 77, 255, 0.45);
  background: radial-gradient(circle at 100% 0, rgba(177, 77, 255, 0.16), transparent 60%), rgba(255, 255, 255, 0.03);
}
.packsGroup__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.packsGroup__head strong { font-size: 15px; }
.packsGroup__head span { color: #b9bbca; font-size: 12px; white-space: nowrap; }
.packsGroup__counts { display: flex; gap: 14px; margin: 8px 0 0; font-size: 14px; font-weight: 800; }
.packsGroup__counts small { color: #8995a3; font-weight: 600; }
.packsGroup .packsSummary__grid { margin-top: 10px; }
.packsGroup__objects { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.packsGroup__objects span { padding: 5px 8px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); font-size: 12px; }
.packsSummary__item.is-event { border-color: #b14dff; box-shadow: 0 0 10px rgba(177, 77, 255, 0.45); }
.packsSummary__details {
  display: block;
  width: 100%;
  margin: 2px 0 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 900;
}

/* Solo bagliore (niente riflesso olografico né arcobaleno pieno):
   oro per le Rare, viola-arcobaleno per le Rare evento. */



@keyframes packGoldGlow {
  0%, 100% { box-shadow: 0 0 22px rgba(245, 197, 66, 0.45); }
  50% { box-shadow: 0 0 48px rgba(245, 197, 66, 0.85); }
}
@keyframes packEventGlow {
  0%, 100% { box-shadow: 0 0 26px rgba(177, 77, 255, 0.6), 0 0 52px rgba(59, 244, 176, 0.25); }
  33% { box-shadow: 0 0 40px rgba(255, 77, 109, 0.7), 0 0 70px rgba(255, 190, 11, 0.35); }
  66% { box-shadow: 0 0 40px rgba(58, 134, 255, 0.7), 0 0 70px rgba(177, 77, 255, 0.4); }
}


/* Niente emoji: scritta UMA sulla bustina e sul dorso delle carte */



/* Apertura rapida: le carte in evidenza più grandi, con il bagliore */
.packsHighlights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.packsHighlights__card { padding: 0; color: #fff; text-align: left; font: inherit; border-radius: 12px; }
.packsHighlights__card small { display: block; padding: 5px 6px; font-size: 10px; line-height: 1.25; background: #11111a; }
.packsHighlights__card--r1:not(.is-event) { animation: packCardIn 0.4s ease-out both, packGoldGlow 2s ease-in-out 0.4s infinite; }
.packsHighlights__card.is-event { animation: packCardIn 0.4s ease-out both, packEventGlow 2s ease-in-out 0.4s infinite; }
.packsHighlights__tags { position: absolute; top: 5px; left: 5px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.packsHighlights__tags .packCard__tag { position: static; padding: 3px 6px; font-size: 9px; border-radius: 7px; }

/* Riflesso che attraversa la carta in diagonale, poi una pausa (come il
   video di riferimento): sulle Rare e sulle Rare evento. */
.packsHighlights__card--r1,
.packsHighlights__card.is-event,
.packsSummary__item.is-event { overflow: hidden; }
.packsHighlights__card--r1::after,
.packsHighlights__card.is-event::after,
.packsSummary__item.is-event::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 25%,
    rgba(255, 255, 255, 0.85) 42%,
    rgba(255, 255, 255, 0.35) 52%,
    rgba(255, 255, 255, 0.75) 62%,
    rgba(255, 255, 255, 0.15) 78%,
    transparent 100%
  );
  transform: translateX(-160%) skewX(-24deg);
  animation: packSheen 2.2s ease-in-out infinite;
}
.packsHighlights__card.is-event::after { animation-duration: 1.8s; }
@keyframes packSheen {
  0% { transform: translateX(-160%) skewX(-24deg); }
  35%, 100% { transform: translateX(330%) skewX(-24deg); }
}
@media (prefers-reduced-motion: reduce) {
  .packsHighlights__card::after, .packsSummary__item.is-event::after { animation: none; opacity: 0; }
}
.packsOpen__btn--mine { grid-column: 1 / -1; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); }
.packsOpen__btn--mine[hidden] { display: none; }

/* ============================================================
   Pagina Pack v2 (concept): saldo con timer, avviso limite, evento,
   rate in una finestra, ultime aperture, tasti fissi in basso.
   ============================================================ */
.packsPage { padding-bottom: 170px; }
.packsTabs { margin: 0 0 12px; }
.packsBalance { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.packsBalance__count { display: flex; align-items: baseline; gap: 8px; }
.packsBalance__count strong { font-size: 46px; line-height: 1; font-weight: 900; }
.packsBalance__count small { color: #ff9db3; font-size: 12px; font-weight: 900; letter-spacing: 0.14em; }
.packsBalance__coins { margin: 8px 0 0; color: #f5d27a; font-size: 14px; font-weight: 800; }
.packsTimer { text-align: center; }
.packsTimer small { display: block; margin-top: 4px; color: #b9a9b2; font-size: 11px; }
.packsTimer__ring {
  --p: 0%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: conic-gradient(#ff5c82 0 var(--p), rgba(255, 255, 255, 0.08) var(--p));
  display: grid;
  place-items: center;
}
.packsTimer__ring span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #160f15;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
}
.packsWarn {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 160, 40, 0.5);
  background: rgba(255, 160, 40, 0.12);
  color: #ffcf8a;
  font-size: 12.5px;
  font-weight: 700;
}
.packsWarn[hidden] { display: none; }

.packsEvent {
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 140, 40, 0.55);
  background: radial-gradient(circle at 90% 0, rgba(255, 140, 40, 0.28), transparent 60%), linear-gradient(145deg, #2a160b, #140c12);
}
.packsEvent--none { border-color: #283545; background: linear-gradient(145deg, #121a23, #0d131a); }
.packsEvent__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.packsEvent__top strong { font-size: 16px; }
.packsEvent__top span { color: #ffb36b; font-size: 10px; font-weight: 900; letter-spacing: 0.14em; }
.packsEvent--none .packsEvent__top span { color: #5da9ff; }
.packsEvent__big { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.packsEvent__big b { font-size: 34px; font-weight: 900; }
.packsEvent__big span { color: #e9c9a8; font-size: 13px; }
.packsEvent__bar { height: 10px; margin: 8px 0 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.packsEvent__bar i { display: block; height: 100%; background: linear-gradient(90deg, #8e2bd1, #ff5c82, #ffbe0b); }
.packsEvent > small { color: #c9a98e; font-size: 11px; line-height: 1.4; }
.packsEvent__progress { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.packsEvent--none .packsEvent__progress { grid-template-columns: 1fr; }
.packsProgress { padding: 10px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.packsProgress b { font-size: 15px; }
.packsProgress small { display: block; margin-top: 2px; color: #c9a98e; font-size: 11px; }
.packsProgress__bar { display: block; height: 6px; margin-top: 6px; border-radius: 9px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.packsProgress__bar i { display: block; height: 100%; background: #ffbe0b; }
.packsProgress--std .packsProgress__bar i { background: #5da9ff; }
.packsProgress--std small { color: #9fb3c8; }

.packsLinks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.packsLinks__btn {
  display: flex;
  justify-content: space-between;
  padding: 13px 14px;
  border: 1px solid #283545;
  border-radius: 14px;
  background: #121a23;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.packsLinks__btn span { color: #5da9ff; }

.packsHistory .packsCard__title { margin: 4px 0 8px; }
.packsHistory__list { display: grid; gap: 8px; }
.packsHistory__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #283545;
  border-radius: 14px;
  background: #121a23;
}
button.packsHistory__row {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.packsHistory__row.is-open:active { background: #182331; }
.packsSummary__note { margin: 0 0 10px; color: #8995a3; font-size: 12px; text-align: center; }
.packsHistory__more { align-self: center; margin-left: 4px; color: #5da9ff; font-size: 18px; }
.packsHistory__row b { font-size: 14px; }
.packsHistory__row small { display: block; color: #8995a3; font-size: 11px; margin-top: 2px; }
.packsHistory__thumbs { display: flex; gap: 4px; }
.packsHistory__thumb { width: 24px; height: 32px; border-radius: 5px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.4); background: #171722; }
.packsHistory__thumb.is-rare { border-color: #f5c542; box-shadow: 0 0 8px rgba(245, 197, 66, 0.6); }
.packsHistory__thumb.is-event { border-color: #b14dff; box-shadow: 0 0 8px rgba(177, 77, 255, 0.7); }

.packsDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(7, 6, 11, 0), rgba(7, 6, 11, 0.96) 22%);
}
.packsDock .packsOpen { max-width: 640px; margin: 0 auto; }
.page:not(.page--active) .packsDock { display: none; }

.packsSheet { position: fixed; inset: 0; z-index: 2500; display: flex; align-items: flex-end; }
.packsSheet[hidden] { display: none; }
.packsSheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.packsSheet__box {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 18px calc(24px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  border-top: 1px solid #283545;
  background: #10161e;
  animation: packsSheetIn 0.25s ease-out;
}
.packsSheet__grab { width: 42px; height: 5px; margin: 0 auto 12px; border-radius: 9px; background: #33404f; }
.packsSheet__head { display: flex; justify-content: space-between; align-items: center; }
.packsSheet__head h2 { margin: 0; font-size: 20px; }
.packsSheet__head button { border: 0; background: none; color: #a9b5c4; font-size: 26px; }
@keyframes packsSheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.packsBalance__count small span { font-size: inherit; }
/* Nel dock i tasti sono pieni, così il contenuto sotto non si vede. */
.packsDock .packsOpen__btn:not(.packsOpen__btn--all):not(.packsOpen__btn--mine) { background: #2a1220; }
.packsDock .packsOpen__btn--mine { background: #18171d; }
.packsSummary__ended {
  margin: 0 0 12px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 80, 80, 0.6);
  background: rgba(255, 60, 60, 0.14);
  color: #ff8a8a;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
}
.packsSheet__box { max-height: 85vh; overflow-y: auto; }
#packsSettingsSheetBody .packsSettings__row:last-child { border-bottom: 0; }

/* Etichetta della rarità negli In evidenza: i colori animati vengono da
   600-rarity-badge-fx.css; qui solo una riga sola. */
.packsHighlights__tags { right: 5px; }
.packsHighlights__tags .packCard__tag--rarity {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
/* ============================================================
   PACK → tab Login (Daily Login in stile Battle Pass + Daily Shield)
   ============================================================ */
.optionsTabs.packsTabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.packsTabs__login { position: relative; }
.packsTabs__dot {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5c82;
  box-shadow: 0 0 8px #ff5c82;
}
.packsTabs__dot[hidden] { display: none; }

/* Il pannello usa le classi del Battle Pass (.battlePassV2 ...). */
.packsLogin.battlePassV2 { padding-bottom: 12px !important; }
.packsLogin[hidden] { display: none !important; }
.packsLogin .passNextReward { margin-bottom: 12px; }


/* Caselle del calendario: pack + monete + giorno. */
.battlePassV2 .dailyLoginStreak .passRewardCell {
  min-height: 84px !important;
  grid-template-rows: 24px 15px 14px 11px !important;
  padding: 6px 0 !important;
}
.battlePassV2 .dailyLoginStreak .passRewardCell__icon {
  grid-row: 1 !important;
  height: 24px !important;
  font-size: 17px !important;
  line-height: 24px !important;
}
.battlePassV2 .dailyLoginStreak .passRewardCell__amount {
  grid-row: 2 !important;
  height: 15px !important;
  font-size: 10px !important;
  line-height: 15px !important;
}
.battlePassV2 .dailyLoginStreak .passRewardCell__day { grid-row: 4 !important; }
.dailyLoginCoins {
  display: block;
  grid-row: 3;
  color: #f5d27a;
  font-size: 9px;
  font-weight: 900;
  line-height: 14px;
  white-space: nowrap;
}
.passRewardCell--claimed .dailyLoginCoins { opacity: 0.45; }

.dailyLoginNote {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(86, 173, 255, 0.25);
  border-radius: 12px;
  background: rgba(86, 173, 255, 0.08);
  color: #b9c8da;
  font-size: 11.5px;
  line-height: 1.45;
}
.dailyLoginNote b { color: #fff; }

/* Riquadro dopo la riscossione (normale, Shield usato, streak persa). */
.dailyLoginResult {
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(72, 200, 120, 0.45);
  border-radius: 16px;
  background: rgba(72, 200, 120, 0.08);
  color: #fff;
}
.dailyLoginResult[hidden] { display: none; }
.dailyLoginResult strong { display: block; font-size: 14px; letter-spacing: 0.04em; }
.dailyLoginResult p { margin: 6px 0 0; color: #cfd8e6; font-size: 12.5px; line-height: 1.45; }
.dailyLoginResult .dailyLoginResult__gain { color: #fff; font-size: 16px; font-weight: 900; }
.dailyLoginResult--used {
  border-color: rgba(93, 169, 255, 0.6);
  background: radial-gradient(circle at 10% 0%, rgba(93, 169, 255, 0.22), transparent 60%), #0f1622;
}
.dailyLoginResult--kept {
  border-color: rgba(255, 170, 60, 0.6);
  background: radial-gradient(circle at 10% 0%, rgba(255, 170, 60, 0.2), transparent 60%), #1a130c;
}

/* Daily Shield */
.dailyShieldCard { margin-top: 12px; }
.dailyShieldCard .packsCard__title { color: #8fc3ff; }
.dailyShieldRow {
  border-color: rgba(93, 169, 255, 0.45) !important;
  background: linear-gradient(120deg, rgba(93, 169, 255, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
.dailyShieldRow .packsShop__buy {
  border-color: rgba(93, 169, 255, 0.8);
  background: linear-gradient(135deg, #2f7de0, #6b3fd6);
}
.dailyShieldRow small b { color: #fff; }
.packsLogin .passNextReward__reward p { font-size: 11px !important; line-height: 1.4; }
.optionsTabs.packsTabs .optionsTabs__tab { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.collectionArchiveArt{
  position:absolute;
  z-index:1;
  top:-8px;
  right:13px;
  width:172px;
  height:124px;
  pointer-events:none;
}




.collectionArchiveSpark{
  position:absolute;
  color:#a8deff;
  text-shadow:0 0 10px #5caeff;
}
.collectionArchiveSpark--a{right:4px;top:-3px;font-size:18px}
.collectionArchiveSpark--b{right:90px;bottom:0;font-size:12px}

/* Search area — same DOM, same IDs, same event handlers */
#cavallinePage .collectionControls{
  gap:11px!important;
  margin-bottom:18px!important;
}
#cavallinePage .collectionSearchBar{
  min-height:55px!important;
  border:1px solid #347ec6!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#111e2c,#0c1723)!important;
  box-shadow:inset 0 0 0 1px rgba(59,142,224,.08),0 0 18px rgba(42,132,224,.07)!important;
}
#cavallinePage .collectionSearchBar:focus-within{
  border-color:#4d9dff!important;
  box-shadow:0 0 0 2px rgba(63,151,255,.12),0 0 22px rgba(63,151,255,.10)!important;
}
#cavallinePage .collectionSearchBar__input{
  font-size:14px!important;
}
#cavallinePage .collectionSearchExamples{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:0!important;
}
#cavallinePage .collectionSearchExample{
  min-height:30px!important;
  padding:0 11px!important;
  border:1px solid #294e70!important;
  border-radius:999px!important;
  background:#0c1722!important;
  color:#aac6e3!important;
  font-size:9px!important;
}

/* Keep all 4 real selects. Desktop = one row, mobile = 2x2. */
#cavallinePage .collectionCompactFilters{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}
#cavallinePage .collectionCompactFilters select{
  min-height:48px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  border:1px solid #315b80!important;
  border-radius:12px!important;
  background-color:#101b28!important;
  font-size:11px!important;
}

/* Result count + view mode */
#cavallinePage .collectionBoard__header{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:38px;
  margin-bottom:10px!important;
}
.collectionViewMode{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid #294e70;
  border-radius:10px;
  background:#091521;
}
.collectionViewMode button{
  width:35px;
  height:29px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#718fac;
  font-size:15px;
  cursor:pointer;
}
.collectionViewMode button.is-active{
  background:linear-gradient(180deg,#45298d,#2e1e6b);
  color:#dfd1ff;
  box-shadow:0 0 13px rgba(124,72,255,.27);
}

/* Existing cards remain the same data/markup, only cleaner presentation */
#cavallinePage .waifuGrid{
  gap:11px!important;
}
#cavallinePage .waifuCard{
  border-radius:16px!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .16s ease,box-shadow .16s ease;
}
#cavallinePage .waifuCard:hover{
  transform:translateY(-2px);
  box-shadow:0 11px 27px rgba(0,0,0,.31);
}

/* Compact mode — CSS only */
#cavallinePage .waifuGrid.tradeBinCompactView{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard{
  border-radius:12px!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__body{
  padding:7px 8px 8px!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__title{
  font-size:10px!important;
  line-height:1.1!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__version{
  margin-top:4px!important;
  font-size:8px!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .rarityBadge,
#cavallinePage .waifuGrid.tradeBinCompactView .waifuTypeBadge{
  padding:3px 5px!important;
  font-size:7px!important;
}

/* Collection is reused by Battle Pass selector: keep its functional context clean. */
#cavallinePage:has(#battlePassCollectionHeader:not([hidden])) .collectionArchiveArt{
  display:none!important;
}

@media(max-width:650px){
  #cavallinePage .sectionIntro--collection{
    min-height:103px;
    padding-right:140px;
  }
  #cavallinePage .sectionIntro__title{font-size:34px!important}
  .collectionArchiveArt{
    right:0;
    top:0;
    transform:scale(.79);
    transform-origin:top right;
  }
  #cavallinePage .collectionCompactFilters{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  #cavallinePage .collectionCompactFilters select{
    min-height:44px!important;
  }
  #cavallinePage .waifuGrid.tradeBinCompactView{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  #cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__meta{
    display:none!important;
  }
}
@media(max-width:390px){
  #cavallinePage .sectionIntro--collection{padding-right:116px}
  .collectionArchiveArt{
    right:-8px;
    transform:scale(.68);
  }
}


/* ============================================================
   TRADE BIN — APPROVED CONCEPT V4
   Exact visual pass on top of the verified working V3.
   ============================================================ */

#cavallinePage{
  --conceptBg:#07111b;
  --conceptPanel:#0b1724;
  --conceptPanel2:#101d2c;
  --conceptLine:#244a6a;
  --conceptBlue:#3d9cff;
  --conceptPurple:#8c59ff;
  --conceptGreen:#47e6a0;
  --conceptRed:#ff6485;
  --conceptGold:#f0cb5d;
}

/* Top Collection/Binder/Friends becomes a premium segmented header. */




/* Hero */
#cavallinePage .sectionIntro--collection{
  min-height:157px!important;
  margin-top:5px!important;
  padding:23px 255px 20px 4px!important;
  border-bottom:1px solid rgba(46,84,116,.42);
}
#cavallinePage .sectionIntro__title{
  margin:0!important;
  font-size:46px!important;
  line-height:.92!important;
  letter-spacing:-.035em!important;
  text-shadow:0 0 24px rgba(115,70,255,.17);
}
#cavallinePage .sectionIntro__subtitle{
  max-width:370px;
  margin-top:12px!important;
  color:#819ab4!important;
  font-size:12px!important;
}
.collectionArchiveArt{
  top:7px!important;
  right:9px!important;
  width:225px!important;
  height:145px!important;
}
.archivePortrait{
  position:absolute;
  width:88px;
  height:122px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(139,91,255,.72);
  background:
    radial-gradient(circle at 48% 26%,#8fc9ff 0 8%,transparent 9%),
    radial-gradient(ellipse at 50% 39%,#d9e8ff 0 18%,transparent 19%),
    radial-gradient(ellipse at 50% 73%,#4c65a5 0 30%,transparent 31%),
    linear-gradient(145deg,#14375f,#3a1d67 62%,#09141f);
  box-shadow:0 0 22px rgba(113,65,237,.25),0 15px 30px rgba(0,0,0,.28);
}
.archivePortrait::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(143,204,255,.18);
  border-radius:9px;
}
.archivePortrait--rear{
  right:5px;
  top:16px;
  transform:rotate(9deg);
  opacity:.62;
}
.archivePortrait--front{
  right:91px;
  top:0;
  transform:rotate(-6deg);
}
.archivePortrait__mark{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  color:#ddccff;
  font-size:22px;
  text-shadow:0 0 12px #8b58ff;
}
.archiveQuote{
  position:absolute;
  right:0;
  bottom:0;
  width:192px;
  color:#728da8;
  font-size:8px;
  font-style:italic;
  text-align:right;
}
.collectionArchiveSpark--a{right:3px!important;top:-5px!important}
.collectionArchiveSpark--b{right:106px!important;bottom:7px!important}

/* Summary panel */
.archiveSummary{
  margin:16px 0 17px;
  padding:14px 16px 13px;
  border:1px solid #45348f;
  border-radius:15px;
  background:
    radial-gradient(circle at 8% 0,rgba(92,53,204,.18),transparent 34%),
    linear-gradient(120deg,#0b1724,#091520);
  box-shadow:0 0 24px rgba(90,54,211,.08);
}
.archiveSummary__top{
  display:grid;
  grid-template-columns:1.35fr 1fr 1fr;
  align-items:center;
}
.archiveStat{
  min-width:0;
  min-height:43px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:3px 15px;
  border-right:1px solid #1d4260;
}
.archiveStat:first-child{padding-left:0}
.archiveStat:last-child{border-right:0}
.archiveStat__icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:9px;
  background:#352574;
  color:#c3a6ff;
  font-size:22px;
}
.archiveStat strong{
  display:block;
  color:#eef6ff;
  font-size:20px;
  line-height:1;
}
.archiveStat small{
  display:block;
  margin-top:5px;
  color:#7895b3;
  font-size:7px;
  font-weight:950;
  letter-spacing:.1em;
}
.archiveStat--owned strong,.archiveStat--owned small{color:var(--conceptGreen)}
.archiveStat--missing strong,.archiveStat--missing small{color:var(--conceptRed)}
.archiveCompletion{margin-top:13px}
.archiveCompletion__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
  color:#6f8da9;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
}
.archiveCompletion__head strong{
  color:#c6d8ea;
  font-size:10px;
  letter-spacing:0;
}
.archiveCompletion__track{
  height:8px;
  overflow:hidden;
  border:1px solid #284a64;
  border-radius:999px;
  background:#08131e;
}
.archiveCompletion__track span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#3cda98,#72f0bd);
  box-shadow:0 0 14px rgba(65,229,158,.42);
  transition:width .25s ease;
}

/* Search block like concept: dominant search + compact examples */
#cavallinePage .collectionControls{
  position:relative;
  gap:10px!important;
  padding:0!important;
}
#cavallinePage .collectionSearchBar{
  min-height:58px!important;
  border-color:#397fb9!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#101d2b,#0b1723)!important;
}
#cavallinePage .collectionSearchBar__input{
  font-size:13px!important;
  font-weight:650!important;
}
#cavallinePage .collectionSearchExamples{
  gap:6px!important;
}
#cavallinePage .collectionSearchExample{
  min-height:27px!important;
  padding:0 9px!important;
  color:#89a8c5!important;
  font-size:8px!important;
}
.archiveFilterLabel{
  margin:3px 0 -2px;
  color:#617e99;
  font-size:7px;
  font-weight:950;
  letter-spacing:.14em;
}
#cavallinePage .collectionCompactFilters{
  gap:7px!important;
}
#cavallinePage .collectionCompactFilters select{
  min-height:43px!important;
  border-color:#2b526f!important;
  border-radius:10px!important;
  background-color:#0e1a27!important;
  color:#c1d2e3!important;
  font-size:10px!important;
}

/* Results header mirrors concept */
#cavallinePage .collectionBoard__header{
  padding-top:3px!important;
  border-top:1px solid rgba(40,75,102,.28);
}
#resultCount{
  color:#7f9bb5!important;
  font-size:10px!important;
  font-weight:800!important;
}
.archiveViewWrap{
  display:flex;
  align-items:center;
  gap:7px;
}
.archiveViewWrap>span{
  color:#617e99;
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}
.collectionViewMode{
  border-color:#2b506f!important;
  background:#09141f!important;
}
.collectionViewMode button.is-active{
  background:linear-gradient(180deg,#4b2e99,#30206e)!important;
}

/* Cards: concept rarity/status treatment using existing markup/classes. */
#cavallinePage .waifuCard{
  overflow:hidden!important;
  border:1px solid #2c465c!important;
  background:#09131d!important;
}
#cavallinePage .waifuCard:not(.waifuCard--missing){
  border-color:#35c988!important;
  box-shadow:0 0 0 1px rgba(53,201,136,.10),0 8px 22px rgba(0,0,0,.24)!important;
}
#cavallinePage .waifuCard:has(.rarityBadge--rare):not(.waifuCard--missing){
  border-color:#d7b94c!important;
  box-shadow:0 0 0 1px rgba(215,185,76,.10),0 8px 22px rgba(0,0,0,.24)!important;
}
#cavallinePage .waifuCard:has(.waifuTypeBadge--event):not(.waifuCard--missing){
  border-color:#8650dc!important;
  box-shadow:0 0 15px rgba(134,80,220,.14),0 8px 22px rgba(0,0,0,.24)!important;
}
#cavallinePage .waifuCard--missing{
  border-color:#9f3b4a!important;
  box-shadow:0 0 0 1px rgba(159,59,74,.10),0 8px 22px rgba(0,0,0,.24)!important;
}
#cavallinePage .waifuCard__id{
  top:7px!important;
  left:7px!important;
  border-radius:7px!important;
  background:rgba(5,13,20,.82)!important;
  backdrop-filter:blur(5px);
}
#cavallinePage .waifuCard__body{
  padding:10px!important;
}
#cavallinePage .waifuCard__title{
  font-size:13px!important;
  line-height:1.08!important;
}
#cavallinePage .waifuCard__version{
  margin-top:5px!important;
  color:#849db7!important;
  font-size:9px!important;
}
#cavallinePage .rarityBadge,
#cavallinePage .waifuTypeBadge{
  padding:4px 7px!important;
  font-size:7px!important;
}

/* Compact view */
#cavallinePage .waifuGrid.tradeBinCompactView{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__body{padding:6px 7px!important}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__title{font-size:9px!important}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__version{font-size:7px!important}
#cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__meta{margin-top:5px!important}

/* Mobile concept */
@media(max-width:650px){
  #cavallinePage .sectionIntro--collection{
    min-height:132px!important;
    padding:17px 132px 14px 2px!important;
  }
  #cavallinePage .sectionIntro__title{font-size:34px!important}
  #cavallinePage .sectionIntro__subtitle{font-size:10px!important}
  .collectionArchiveArt{
    right:-8px!important;
    top:9px!important;
    transform:scale(.63)!important;
    transform-origin:top right!important;
  }
  .archiveQuote{display:none}
  .archiveSummary{padding:11px 12px}
  .archiveSummary__top{grid-template-columns:1.25fr .9fr .9fr}
  .archiveStat{padding:2px 8px;gap:6px}
  .archiveStat__icon{width:29px;height:29px;font-size:17px}
  .archiveStat strong{font-size:15px}
  .archiveStat small{font-size:6px}
  .archiveCompletion{margin-top:10px}
  #cavallinePage .collectionCompactFilters{
    grid-template-columns:1fr 1fr!important;
  }
  #cavallinePage .waifuGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #cavallinePage .waifuGrid.tradeBinCompactView{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #cavallinePage .waifuGrid.tradeBinCompactView .waifuCard__meta{display:none!important}
}
@media(max-width:390px){
  .archiveStat{padding-left:5px;padding-right:5px}
  .archiveStat strong{font-size:13px}
}


/* ============================================================
   TRADE BIN V4.3 — SAFE RANDOM HERO
   Keeps the exact V4.1 structure/layout.
   ============================================================ */

/* Hide only the old fake-card artwork; its HTML remains intact. */
#cavallinePage .collectionArchiveArt{
  display:none!important;
}

/* Background is absolutely positioned, so it cannot alter page height. */
#cavallinePage .sectionIntro--collection{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}

#cavallinePage .collectionHeroBackground{
  position:absolute!important;
  z-index:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  width:58%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  pointer-events:none!important;
  background-position:center 24%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  opacity:.72;
}

/* Existing title/subtitle stay above the background. */
#cavallinePage .sectionIntro--collection > *:not(.collectionHeroBackground):not(.collectionArchiveArt){
  position:relative;
  z-index:2;
}

/* Neutral card border in Collection.
   Do not use rarity/event colors here. */
#cavallinePage .waifuCard,
#cavallinePage .waifuCard:not(.waifuCard--missing),
#cavallinePage .waifuCard:has(.rarityBadge--rare):not(.waifuCard--missing),
#cavallinePage .waifuCard:has(.waifuTypeBadge--event):not(.waifuCard--missing){
  border-color:#2c465c!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
}

/* Missing keeps its muted treatment. */
#cavallinePage .waifuCard--missing{
  border-color:#74404a!important;
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
}

/* IMPORTANT:
   Do not override Binder status border classes here.
   Existing Binder CSS from the working version remains authoritative. */

@media(max-width:650px){
  #cavallinePage .collectionHeroBackground{
    width:62%!important;
    opacity:.62;
    background-position:center 20%!important;
  }
}


/* ============================================================
   TRADE BIN V4.4 — ROUNDED ROTATING HERO
   ============================================================ */
#cavallinePage .sectionIntro--collection{
  overflow:visible!important;
}

#cavallinePage .collectionHeroBackground{
  top:8px!important;
  right:0!important;
  bottom:8px!important;
  width:52%!important;
  border:1px solid #2c465c!important;
  border-radius:18px!important;
  overflow:hidden!important;
  opacity:.76!important;
  box-shadow:0 10px 28px rgba(0,0,0,.25)!important;
  background-position:center 22%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}

/* Fade into the black title area while keeping the rounded outer shape. */
#cavallinePage .collectionHeroBackground::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.30) 38%,transparent 72%);
  pointer-events:none;
}

/* Give text a stable readable area, independent from the image. */
#cavallinePage .sectionIntro__title,
#cavallinePage .sectionIntro__subtitle{
  max-width:49%!important;
}

@media(max-width:650px){
  #cavallinePage .collectionHeroBackground{
    top:7px!important;
    right:0!important;
    bottom:7px!important;
    width:55%!important;
    border-radius:14px!important;
    opacity:.68!important;
  }
  #cavallinePage .sectionIntro__title{max-width:58%!important}
  #cavallinePage .sectionIntro__subtitle{max-width:48%!important}
}


/* ============================================================
   TRADE BIN V4.5 — FULL TITLE HERO IMAGE
   ============================================================ */
#cavallinePage .sectionIntro--collection{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #2c465c!important;
  border-radius:18px!important;
  padding:23px 24px 20px!important;
  min-height:157px!important;
}

/* Image now spans the whole title block, including behind "Collection". */
#cavallinePage .collectionHeroBackground{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:inherit!important;
  opacity:.78!important;
  background-position:center 24%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  box-shadow:none!important;
}

/* Strong black fade on left keeps title readable; image remains visible on right. */
#cavallinePage .collectionHeroBackground::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.90) 18%,
      rgba(0,0,0,.62) 42%,
      rgba(0,0,0,.18) 72%,
      rgba(0,0,0,.08) 100%),
    linear-gradient(0deg,rgba(0,0,0,.28),transparent 52%);
  pointer-events:none;
}

/* Text can use the original space again; the picture is behind it. */
#cavallinePage .sectionIntro__title,
#cavallinePage .sectionIntro__subtitle{
  max-width:58%!important;
}

@media(max-width:650px){
  #cavallinePage .sectionIntro--collection{
    border-radius:14px!important;
    padding:17px 14px 14px!important;
    min-height:132px!important;
  }
  #cavallinePage .collectionHeroBackground{
    width:100%!important;
    opacity:.72!important;
  }
  #cavallinePage .collectionHeroBackground::after{
    background:linear-gradient(90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.87) 26%,
      rgba(0,0,0,.48) 60%,
      rgba(0,0,0,.12) 100%);
  }
  #cavallinePage .sectionIntro__title{max-width:72%!important}
  #cavallinePage .sectionIntro__subtitle{max-width:58%!important}
}


/* ============================================================
   TRADE BIN V4.6 — SEARCH CONCEPT 6
   Integrated search + smart Name / Version / ID badge.
   ============================================================ */



/* One unified component: input row + examples row. */


#cavallinePage .collectionSearchBar{
  min-height:58px!important;
  border:1px solid #315f88!important;
  border-bottom-left-radius:0!important;
  border-bottom-right-radius:0!important;
  background:linear-gradient(180deg,#111e2c,#0c1723)!important;
  box-shadow:none!important;
}

#cavallinePage .collectionSearchBar:focus-within{
  border-color:#438ed0!important;
  box-shadow:0 0 0 1px rgba(67,142,208,.08)!important;
}

/* Smart badge before X */
.collectionSearchTypeBadge{
  flex:0 0 auto;
  min-width:70px;
  height:31px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:7px;
  padding:0 13px;
  border:1px solid #33718b;
  border-radius:999px;
  background:rgba(17,47,58,.78);
  color:#75d9e0;
  font-size:9px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}
.collectionSearchTypeBadge[data-type="version"]{
  border-color:#485bc7;
  background:rgba(39,48,112,.72);
  color:#91aaff;
}
.collectionSearchTypeBadge[data-type="id"]{
  border-color:#7652bc;
  background:rgba(64,39,108,.72);
  color:#c4a0ff;
}
.collectionSearchTypeBadge[data-type="name"]{
  border-color:#287a6e;
  background:rgba(24,77,68,.70);
  color:#83e1cb;
}

/* X becomes quieter, like Concept 6. */
#cavallinePage .collectionSearchBar button{
  flex:0 0 auto!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  margin-right:7px!important;
  border-radius:50%!important;
  border:1px solid #29465f!important;
  background:#152638!important;
  box-shadow:none!important;
}

/* Integrated TRY row. Existing clickable examples are preserved. */
#cavallinePage .collectionSearchExamples{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:45px;
  margin:0!important;
  padding:7px 14px 8px 66px!important;
  border:1px solid #315f88;
  border-top:0;
  border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#091521,#08131e);
}
#cavallinePage .collectionSearchExamples::before{
  content:"TRY:";
  position:absolute;
  left:18px;
  color:#89a5c3;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
}

#cavallinePage .collectionSearchExample{
  min-height:29px!important;
  padding:0 13px!important;
  border:1px solid #285577!important;
  border-radius:999px!important;
  background:#0c1b29!important;
  color:#b5cde5!important;
  font-size:9px!important;
  font-weight:800!important;
}
#cavallinePage .collectionSearchExample span{
  display:none!important;
}
#cavallinePage .collectionSearchExample{
  font-size:0!important;
}
#cavallinePage .collectionSearchExample::after{
  font-size:9px;
}
#cavallinePage .collectionSearchExample[data-search-example="Admire Vega"]::after{
  content:"Admire Vega";
}
#cavallinePage .collectionSearchExample[data-search-example="V020"]::after{
  content:"V020";
}
#cavallinePage .collectionSearchExample[data-search-example="#19"]::after{
  content:"#19";
}

#cavallinePage .collectionSearchExample:hover{
  border-color:#4388bd!important;
  background:#10243a!important;
}

/* Keep the existing input as the focal element. */
#cavallinePage .collectionSearchBar__input{
  min-width:0!important;
  font-size:14px!important;
  font-weight:800!important;
  color:#f1f6fb!important;
}

/* Mobile stays compact and never wraps the badge awkwardly. */
@media(max-width:650px){
  .collectionSearchTypeBadge{
    min-width:58px;
    height:28px;
    padding:0 9px;
    font-size:8px;
  }
  #cavallinePage .collectionSearchExamples{
    gap:5px!important;
    min-height:41px;
    padding:6px 8px 7px 49px!important;
  }
  #cavallinePage .collectionSearchExamples::before{
    left:10px;
    font-size:7px;
  }
  #cavallinePage .collectionSearchExample{
    min-height:27px!important;
    padding:0 9px!important;
  }
  #cavallinePage .collectionSearchExample::after{
    font-size:8px;
  }
}


/* ============================================================
   TRADE BIN V4.7 — SEARCH AUTOCOMPLETE FIX
   ============================================================ */

/* Give the smart badge and clear button real breathing room. */
#cavallinePage .collectionSearchBar{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding-right:12px!important;
}
#cavallinePage .collectionSearchBar__input{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  margin-right:4px!important;
}
#cavallinePage .collectionSearchTypeBadge{
  flex:0 0 auto!important;
  margin:0 2px 0 0!important;
}
#cavallinePage .collectionSearchBar button{
  flex:0 0 36px!important;
  margin:0!important;
}

/* Autocomplete is its own clean panel under the search input.
   It no longer inherits the TRY chip presentation. */
#cavallinePage .searchSuggestions,
#cavallinePage [class*="autocomplete"],
#cavallinePage [class*="suggestions"]{
  z-index:40!important;
}

/* Known suggestion rows + defensive selectors for current markup. */
#cavallinePage [class*="suggestionItem"],
#cavallinePage [class*="suggestion-item"]{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:18px!important;
  min-height:52px!important;
  padding:10px 18px!important;
  white-space:normal!important;
}
#cavallinePage [class*="suggestionItem"] > :first-child,
#cavallinePage [class*="suggestion-item"] > :first-child{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#cavallinePage [class*="suggestionItem"] > :last-child,
#cavallinePage [class*="suggestion-item"] > :last-child{
  white-space:nowrap!important;
  text-align:right!important;
  color:#93a5b9!important;
  font-size:12px!important;
  font-weight:500!important;
}

/* TRY stays visually below autocomplete/search and remains compact. */
#cavallinePage .collectionSearchExamples{
  position:relative!important;
  z-index:1!important;
}

@media(max-width:650px){
  #cavallinePage .collectionSearchBar{gap:8px!important;padding-right:8px!important}
  #cavallinePage .collectionSearchTypeBadge{min-width:54px!important}
}


/* ============================================================
   TRADE BIN V4.8 — REAL AUTOCOMPLETE FIX
   Exact selectors: .searchSuggestions / .searchSuggestions__item
   ============================================================ */

#cavallinePage .collectionSearchFields{
  position:relative!important;
}

/* The dropdown begins below the main search row. */
#cavallinePage .searchSuggestions{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  left:0!important;
  right:0!important;
  z-index:80!important;
  display:block;
  overflow:hidden!important;
  padding:5px!important;
  border:1px solid #2d4d68!important;
  border-radius:15px!important;
  background:#101720!important;
  color:#f4f7fb!important;
  box-shadow:0 18px 38px rgba(0,0,0,.52)!important;
  backdrop-filter:blur(14px)!important;
}
#cavallinePage .searchSuggestions[hidden]{
  display:none!important;
}

/* Actual suggestion buttons: one clean horizontal row each. */
#cavallinePage .searchSuggestions__item{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:48px!important;
  height:auto!important;
  margin:0!important;
  padding:10px 13px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#f4f7fb!important;
  text-align:left!important;
  box-shadow:none!important;
}
#cavallinePage .searchSuggestions__item + .searchSuggestions__item{
  border-top:1px solid rgba(108,142,174,.13)!important;
  border-top-left-radius:0!important;
  border-top-right-radius:0!important;
}
#cavallinePage .searchSuggestions__item span{
  min-width:0!important;
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f4f7fb!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
#cavallinePage .searchSuggestions__item small{
  display:block!important;
  min-width:78px!important;
  margin:0!important;
  color:#91a3b7!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1!important;
  text-align:right!important;
  white-space:nowrap!important;
  opacity:1!important;
}
#cavallinePage .searchSuggestions__item:hover,
#cavallinePage .searchSuggestions__item:focus-visible,
#cavallinePage .searchSuggestions__item:active{
  background:#172535!important;
  color:#fff!important;
}

/* Put TRY below the autocomplete instead of behind it.
   48px per result + panel spacing, capped naturally by API result count. */
#cavallinePage .collectionSearchFields.hasSearchSuggestions .collectionSearchExamples{
  transform:translateY(calc(var(--suggestion-count, 0) * 49px + 16px))!important;
  margin-bottom:calc(var(--suggestion-count, 0) * 49px + 16px)!important;
}

/* Search row spacing: input | badge | X */
#cavallinePage .collectionSearchBar{
  gap:14px!important;
}
#cavallinePage .collectionSearchTypeBadge{
  margin-left:8px!important;
  margin-right:4px!important;
}
#cavallinePage .collectionSearchBar__clear{
  margin-left:2px!important;
}

@media(max-width:650px){
  #cavallinePage .searchSuggestions__item{
    min-height:45px!important;
    padding:9px 11px!important;
    gap:10px!important;
  }
  #cavallinePage .searchSuggestions__item span{font-size:11px!important}
  #cavallinePage .searchSuggestions__item small{
    min-width:64px!important;
    font-size:9px!important;
  }
  #cavallinePage .collectionSearchFields.hasSearchSuggestions .collectionSearchExamples{
    transform:translateY(calc(var(--suggestion-count, 0) * 46px + 14px))!important;
    margin-bottom:calc(var(--suggestion-count, 0) * 46px + 14px)!important;
  }
}


/* ============================================================
   TRADE BIN V4.9 — AUTOCOMPLETE TEXT RESTORE
   Legacy rules were hiding/collapsing the first child.
   ============================================================ */

/* Reset each real suggestion completely. */
#cavallinePage button.searchSuggestions__item{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  min-height:52px!important;
  height:52px!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0!important;
  padding:0 18px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden!important;
  text-align:left!important;
}

/* Force the actual name visible, overriding old generic span rules. */
#cavallinePage .searchSuggestions__item > span{
  position:static!important;
  inset:auto!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  flex:1 1 auto!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f5f7fb!important;
  font-size:14px!important;
  font-weight:850!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  transform:none!important;
  clip:auto!important;
  clip-path:none!important;
}

/* Count stays aligned right. */
#cavallinePage .searchSuggestions__item > small{
  position:static!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  flex:0 0 auto!important;
  width:auto!important;
  min-width:86px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  color:#91a3b7!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1.2!important;
  text-align:right!important;
  white-space:nowrap!important;
  transform:none!important;
}

/* No old circular pseudo-elements/icons inside suggestions. */
#cavallinePage .searchSuggestions__item::before,
#cavallinePage .searchSuggestions__item::after{
  content:none!important;
  display:none!important;
}

#cavallinePage .searchSuggestions__item:hover,
#cavallinePage .searchSuggestions__item:focus-visible{
  background:#172535!important;
  outline:none!important;
}

@media(max-width:650px){
  #cavallinePage button.searchSuggestions__item{
    height:48px!important;
    min-height:48px!important;
    padding:0 13px!important;
    gap:10px!important;
  }
  #cavallinePage .searchSuggestions__item > span{
    font-size:12px!important;
  }
  #cavallinePage .searchSuggestions__item > small{
    min-width:68px!important;
    font-size:9px!important;
  }
}

/* BINDER v4.12 — CONCEPT 4 */

#binderPage .binderHero__backdrop{
 position:absolute;z-index:-3;inset:0;background-position:72% 35%;background-size:cover;background-repeat:no-repeat;
 opacity:0;transform:scale(1.035);transition:opacity .8s ease,transform 9s ease;filter:saturate(.92) contrast(1.04)
}
#binderPage .binderHero__backdrop.is-visible{opacity:.72;transform:scale(1)}
#binderPage .binderHero__shade{
 position:absolute;z-index:-2;inset:0;
 background:linear-gradient(90deg,rgba(4,8,15,.99) 0%,rgba(4,8,15,.92) 30%,rgba(4,8,15,.52) 61%,rgba(4,8,15,.24) 100%),
 linear-gradient(0deg,rgba(5,10,18,.88),transparent 55%)
}
#binderPage .binderHero__content{position:relative;z-index:1;max-width:66%}
#binderPage .binderHero .sectionIntro{margin:0!important}
#binderPage .binderHero .sectionIntro__eyebrow{color:#b394ff!important;text-shadow:0 2px 12px #000}
#binderPage .binderHero .sectionIntro__title{
 margin-top:3px!important;font-size:48px!important;line-height:.95!important;letter-spacing:-.035em!important;
 color:#fff!important;text-shadow:0 3px 18px rgba(0,0,0,.78)
}
#binderPage .binderHero .sectionIntro__subtitle{
 max-width:350px;margin-top:12px!important;color:#c2d0e2!important;font-size:15px!important;line-height:1.4!important;
 text-shadow:0 2px 10px #000
}
#binderPage .binderPage__totalCard{
 position:relative;z-index:2;flex:0 0 auto;min-width:132px;padding:13px 15px;
 display:grid;grid-template-columns:34px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;
 border:1px solid rgba(118,169,228,.62);border-radius:17px;background:rgba(9,20,35,.78);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 28px rgba(0,0,0,.28);backdrop-filter:blur(10px)
}
#binderPage .binderPage__totalIcon{
 grid-row:1/3;width:34px;height:42px;display:grid;place-items:center;border:1px solid #82baff;border-radius:8px;
 color:#a7ceff;font-size:24px;transform:rotate(-5deg)
}
#binderPage .binderPage__total{
 min-width:0!important;width:auto!important;height:auto!important;padding:0!important;display:block!important;border:0!important;
 border-radius:0!important;background:transparent!important;font-size:28px!important;line-height:1!important
}
#binderPage .binderPage__totalCard small{margin-top:3px;color:#8fa8c8;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
#binderPage .binderTabs{gap:10px!important;margin-bottom:18px!important}
#binderPage .binderTab{min-height:70px!important;border-radius:16px!important;background:#111a26!important}
#binderPage .binderTab span{font-size:11px!important;font-weight:650!important}
#binderPage .binderTab strong{font-size:20px!important}
#binderPage .binderTab--need10{border-color:rgba(255,80,100,.62)!important}
#binderPage .binderTab--need10.is-active{background:linear-gradient(135deg,rgba(92,14,26,.58),rgba(35,15,24,.86))!important;box-shadow:0 0 0 1px #ff5669,0 0 22px rgba(255,71,94,.13)!important}
#binderPage .binderTab--need1{border-color:rgba(78,157,255,.55)!important}
#binderPage .binderTab--need1.is-active{background:linear-gradient(135deg,rgba(15,51,91,.62),rgba(14,27,45,.9))!important;box-shadow:0 0 0 1px #4e9dff,0 0 22px rgba(54,139,255,.12)!important}
#binderPage .binderTab--trade{border-color:rgba(63,222,169,.54)!important}
#binderPage .binderTab--trade.is-active{background:linear-gradient(135deg,rgba(8,72,58,.60),rgba(12,35,33,.9))!important;box-shadow:0 0 0 1px #42dca9,0 0 22px rgba(49,217,160,.12)!important}
#binderPage .binderListSearch{min-height:54px!important;border-color:#315270!important;border-radius:16px!important;background:#111a25!important}
#binderPage .binderListFilters{grid-template-columns:repeat(3,minmax(0,1fr))!important}
#binderPage .binderListFilters select{min-height:46px!important;border-color:#2c4158!important;border-radius:14px!important;background:#111a25!important}
#binderGrid .waifuCard{background:linear-gradient(110deg,#101923,#0b1119)!important;border-radius:17px!important}

@media(max-width:650px){
 
 #binderPage .binderHero__backdrop{background-position:68% 35%}
 #binderPage .binderHero__content{max-width:62%}
 #binderPage .binderHero .sectionIntro__title{font-size:38px!important}
 #binderPage .binderHero .sectionIntro__subtitle{font-size:12px!important;max-width:210px}
 #binderPage .binderPage__totalCard{min-width:100px;padding:10px;grid-template-columns:28px auto;column-gap:7px}
 #binderPage .binderPage__totalIcon{width:28px;height:35px;font-size:19px}
 #binderPage .binderPage__total{font-size:23px!important}
 #binderPage .binderPage__totalCard small{font-size:7px}
 #binderPage .binderListFilters{grid-template-columns:1fr 1fr!important}
 #binderPage #binderSortFilter{grid-column:1/-1}
}
@media(max-width:420px){
 
 #binderPage .binderHero .sectionIntro__title{font-size:34px!important}
 #binderPage .binderHero .sectionIntro__subtitle{max-width:180px}
 #binderPage .binderPage__totalCard{min-width:92px}
}


/* ============================================================
   BINDER v4.13 — FULL OVERVIEW HERO (approved visual concept)
   One rectangle: Back → title/art → Need x10/x1/For Trade
   ============================================================ */







/* Back button now belongs to the illustrated rectangle */


/* Neutralize the old separate hero card: title area is now transparent */

#binderPage .binderHero__content{
  max-width:68%!important;
}
#binderPage .binderHero .sectionIntro__title{
  font-size:52px!important;
}
#binderPage .binderHero .sectionIntro__subtitle{
  max-width:410px!important;
  color:#d2def0!important;
}

/* Cards tracked floating over the art */
#binderPage .binderPage__totalCard{
  align-self:center;
  min-width:142px;
  margin-right:2px;
  border-color:rgba(120,92,255,.82)!important;
  background:rgba(17,24,53,.82)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 22px rgba(120,66,255,.15),
    0 12px 30px rgba(0,0,0,.28)!important;
}

/* The three status buttons close the same rectangle */












/* Search starts cleanly after the big hero rectangle */
#binderPage .binderListTools{
  margin-top:0!important;
}

/* Remove the little black seam between image and card body */
#binderGrid .waifuCard{
  gap:0!important;
  column-gap:0!important;
}
#binderGrid .waifuCard__image{
  margin-right:0!important;
  border-right:0!important;
}
#binderGrid .waifuCard__image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
}

@media(max-width:650px){
  
  
  
  #binderPage .binderHero__content{
    max-width:65%!important;
  }
  #binderPage .binderHero .sectionIntro__title{
    font-size:40px!important;
  }
  #binderPage .binderHero .sectionIntro__subtitle{
    max-width:230px!important;
    font-size:12px!important;
  }
  #binderPage .binderPage__totalCard{
    min-width:104px!important;
    margin-right:0;
  }
  
  
  
  
}

@media(max-width:420px){
  
  
  #binderPage .binderHero .sectionIntro__title{
    font-size:36px!important;
  }
  #binderPage .binderHero__content{
    max-width:62%!important;
  }
  #binderPage .binderPage__totalCard{
    min-width:94px!important;
    padding:9px!important;
  }
  
}


/* ============================================================
   BINDER v4.14 — exact approved concept structure
   artwork ONLY behind title; controls in one separate rectangle
   ============================================================ */
#binderPage .binderTitleHero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:230px;margin:18px 0 14px;padding:28px 26px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  border:1px solid #2e4b68;border-radius:22px;
  background:#0b1420;box-shadow:0 16px 38px rgba(0,0,0,.28)
}
#binderPage .binderTitleHero>.binderHero__backdrop{
  position:absolute;z-index:-3;inset:0;background-size:cover;background-position:68% 34%;background-repeat:no-repeat;
  opacity:0;transform:scale(1.025);transition:opacity .8s ease,transform 9s ease;filter:saturate(1.02) contrast(1.04)
}
#binderPage .binderTitleHero>.binderHero__backdrop.is-visible{opacity:.78;transform:scale(1)}
#binderPage .binderTitleHero>.binderHero__shade{
  position:absolute;z-index:-2;inset:0;background:
  linear-gradient(90deg,rgba(3,8,16,.99) 0%,rgba(3,8,16,.92) 28%,rgba(4,9,18,.53) 58%,rgba(4,9,18,.16) 100%),
  linear-gradient(0deg,rgba(3,8,16,.84),transparent 58%)
}
#binderPage .binderTitleHero .binderHero__content{position:relative;z-index:1;max-width:68%}
#binderPage .binderTitleHero .sectionIntro{margin:0!important}
#binderPage .binderTitleHero .sectionIntro__eyebrow{color:#b891ff!important;text-shadow:0 2px 12px #000}
#binderPage .binderTitleHero .sectionIntro__title{font-size:54px!important;line-height:.95!important;color:#fff!important;text-shadow:0 3px 18px #000}
#binderPage .binderTitleHero .sectionIntro__subtitle{max-width:430px!important;margin-top:12px!important;color:#d7e2f1!important;text-shadow:0 2px 10px #000}
#binderPage .binderTitleHero .binderPage__totalCard{position:relative;z-index:2;align-self:center}

#binderPage .binderControlPanel{
  margin:0 0 20px;padding:14px;
  border:1px solid #7e43ef;border-radius:22px;
  background:linear-gradient(145deg,rgba(11,24,42,.97),rgba(8,17,31,.97));
  box-shadow:0 0 0 1px rgba(49,160,255,.18),0 0 25px rgba(111,65,255,.11),0 15px 34px rgba(0,0,0,.26)
}
#binderPage .binderControlPanel .binderTabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;margin:0 0 12px!important}
#binderPage .binderControlPanel .binderTab{min-height:82px!important;border-radius:16px!important}
#binderPage .binderControlPanel .binderTab--need10{background:linear-gradient(135deg,rgba(89,9,28,.84),rgba(42,8,22,.84))!important;border-color:#ff4c67!important}
#binderPage .binderControlPanel .binderTab--need1{background:linear-gradient(135deg,rgba(8,49,96,.86),rgba(7,28,59,.86))!important;border-color:#32a4ff!important}
#binderPage .binderControlPanel .binderTab--trade{background:linear-gradient(135deg,rgba(3,78,69,.86),rgba(4,42,40,.86))!important;border-color:#24dfba!important}
#binderPage .binderControlPanel .binderTab span{color:#f5f8ff!important;font-size:12px!important}
#binderPage .binderControlPanel .binderTab strong{color:#fff!important;font-size:27px!important;margin-top:3px}
#binderPage .binderControlPanel .binderListTools{margin:0!important}
#binderPage .binderControlPanel .binderListSearch{min-height:58px!important;border:1px solid #37658e!important;border-radius:16px!important;background:rgba(12,26,44,.96)!important}
#binderPage .binderControlPanel .binderListFilters{margin-top:10px!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#binderPage .binderControlPanel .binderListFilters select{min-height:46px!important;border-radius:14px!important;background:#111d2c!important;border-color:#31506e!important}

/* definitive Binder row seam fix: image and content physically overlap by 2px */
#binderGrid .waifuCard{
  grid-template-columns:94px minmax(0,1fr)!important;gap:0!important;column-gap:0!important;background:#0d151f!important
}
#binderGrid .waifuCard__image{
  width:96px!important;min-width:96px!important;margin:0 -2px 0 0!important;padding:0!important;border:0!important;outline:0!important;background:transparent!important;z-index:2
}
#binderGrid .waifuCard__image img{
  display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;border:0!important;object-fit:cover!important
}
#binderGrid .waifuCard__body{
  position:relative;z-index:1;margin:0!important;border-left:0!important;background:#0d151f!important
}

@media(max-width:650px){
 #binderPage .binderTitleHero{min-height:185px;padding:21px 17px;border-radius:19px}
 #binderPage .binderTitleHero .sectionIntro__title{font-size:40px!important}
 #binderPage .binderTitleHero .sectionIntro__subtitle{font-size:12px!important;max-width:220px!important}
 #binderPage .binderTitleHero .binderHero__content{max-width:64%}
 #binderPage .binderControlPanel{padding:10px;border-radius:19px}
 #binderPage .binderControlPanel .binderTabs{gap:7px!important}
 #binderPage .binderControlPanel .binderTab{min-height:72px!important;padding:8px 5px!important}
 #binderPage .binderControlPanel .binderTab span{font-size:10px!important}
 #binderPage .binderControlPanel .binderTab strong{font-size:22px!important}
 #binderPage .binderControlPanel .binderListFilters{grid-template-columns:1fr 1fr!important}
 #binderPage .binderControlPanel #binderSortFilter{grid-column:1/-1}
}


/* ============================================================
   BINDER v4.15 — visual parity polish
   ============================================================ */

/* Hero: wider/lower banner like approved concept */
#binderPage .binderTitleHero{
  min-height:250px!important;
  padding:28px 32px!important;
  border-radius:24px!important;
  border-color:#8f4cff!important;
  box-shadow:0 0 0 1px rgba(53,153,255,.30),0 0 28px rgba(133,66,255,.18)!important;
}
#binderPage .binderTitleHero .binderHero__backdrop{
  background-position:67% 30%!important;
}
#binderPage .binderTitleHero .binderHero__shade{
  background:
    linear-gradient(90deg,rgba(3,7,15,.98) 0%,rgba(3,7,15,.90) 27%,rgba(4,8,18,.52) 56%,rgba(4,8,18,.16) 100%),
    linear-gradient(0deg,rgba(4,8,17,.76),transparent 52%)!important;
}
#binderPage .binderTitleHero .binderHero__content{
  max-width:62%!important;
}
#binderPage .binderTitleHero .sectionIntro__title{
  font-size:62px!important;
  line-height:.94!important;
}
#binderPage .binderTitleHero .sectionIntro__subtitle{
  max-width:470px!important;
  font-size:17px!important;
  line-height:1.45!important;
}
#binderPage .binderTitleHero .binderPage__totalCard{
  min-width:176px!important;
  padding:16px 18px!important;
  border-radius:18px!important;
}

/* Controls panel: flatter, wider, closer to mockup */













/* Compact horizontal list cards, matching approved concept */
#binderGrid{
  gap:12px!important;
}
#binderGrid .waifuCard{
  position:relative!important;
  min-height:154px!important;
  max-height:154px!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:linear-gradient(100deg,#0c1724 0%,#07111d 100%)!important;
}

/* Seam killer: image intentionally sits under body by 4px.
   Body is transparent at the overlap, so no black vertical strip can show. */
#binderGrid .waifuCard__image{
  position:relative!important;
  z-index:1!important;
  flex:0 0 154px!important;
  width:154px!important;
  min-width:154px!important;
  height:154px!important;
  margin:0 -4px 0 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:18px 0 0 18px!important;
  background:transparent!important;
}
#binderGrid .waifuCard__image img{
  display:block!important;
  width:calc(100% + 1px)!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  object-fit:cover!important;
  border:0!important;
  border-radius:0!important;
  transform:translateZ(0);
}
#binderGrid .waifuCard__body{
  position:relative!important;
  z-index:2!important;
  flex:1 1 auto!important;
  min-width:0!important;
  height:154px!important;
  margin:0!important;
  padding:18px 20px!important;
  border:0!important;
  background:linear-gradient(90deg,#0c1724 0%,#07111d 100%)!important;
}

/* Ensure no pseudo-element can recreate the seam */
#binderGrid .waifuCard__image::after,
#binderGrid .waifuCard__image::before{
  border-right:0!important;
  box-shadow:none!important;
}

/* Slightly brighter status borders/glow */
#binderGrid .waifuCard{
  box-shadow:0 7px 20px rgba(0,0,0,.25)!important;
}
#binderGrid .waifuCard[style*="red"]{
  box-shadow:0 0 20px rgba(255,55,75,.12)!important;
}

@media(min-width:760px){
  #binderPage .binderPage{max-width:980px!important}
}

@media(max-width:650px){
  #binderPage .binderTitleHero{
    min-height:205px!important;
    padding:22px 18px!important;
  }
  #binderPage .binderTitleHero .sectionIntro__title{
    font-size:44px!important;
  }
  #binderPage .binderTitleHero .sectionIntro__subtitle{
    max-width:250px!important;
    font-size:13px!important;
  }
  #binderPage .binderTitleHero .binderPage__totalCard{
    min-width:112px!important;
    padding:11px!important;
  }
  
  
  
  

  #binderGrid .waifuCard{
    min-height:132px!important;
    max-height:132px!important;
  }
  #binderGrid .waifuCard__image{
    flex-basis:132px!important;
    width:132px!important;
    min-width:132px!important;
    height:132px!important;
  }
  #binderGrid .waifuCard__body{
    height:132px!important;
    padding:12px 14px!important;
  }
}


/* ============================================================
   BINDER v4.16 — OPEN HERO
   Keep artwork/title/tracker; remove rounded hero rectangle.
   ============================================================ */

#binderPage .binderTitleHero{
  /* The hero remains a layout/visual area, but no longer looks like a card. */
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  overflow:hidden!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:34px!important;
  padding-right:34px!important;
}

/* Artwork still lives behind Binder, but fades naturally into page black. */
#binderPage .binderTitleHero .binderHero__backdrop{
  border-radius:0!important;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

/* Stronger edge fade so there is no visible rectangular silhouette. */
#binderPage .binderTitleHero .binderHero__shade{
  border-radius:0!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.57) 17%,
      rgba(0,0,0,.16) 53%,
      rgba(0,0,0,.35) 86%,
      rgba(0,0,0,.92) 100%),
    linear-gradient(0deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.18) 24%,
      rgba(0,0,0,.08) 72%,
      rgba(0,0,0,.78) 100%)!important;
}

/* Preserve title hierarchy. */
#binderPage .binderTitleHero .sectionIntro,
#binderPage .binderTitleHero .binderHero__content,
#binderPage .binderTitleHero .binderPage__totalCard{
  position:relative;
  z-index:3;
}

/* Tracker stays as the only floating card in the hero. */
#binderPage .binderTitleHero .binderPage__totalCard{
  border-radius:18px!important;
  border:1px solid rgba(126,94,255,.95)!important;
  background:linear-gradient(135deg,rgba(23,36,76,.94),rgba(20,28,62,.94))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 20px rgba(111,73,255,.13)!important;
  backdrop-filter:blur(8px);
}

/* Do not let old pseudo-elements redraw a hero outline. */
#binderPage .binderTitleHero::before,
#binderPage .binderTitleHero::after{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:none!important;
  pointer-events:none!important;
}

/* Mobile: artwork remains broad but open, without the rounded panel shape. */
@media(max-width:650px){
  #binderPage .binderTitleHero{
    margin-top:12px!important;
    padding-left:18px!important;
    padding-right:18px!important;
    min-height:230px!important;
  }
  #binderPage .binderTitleHero .binderHero__backdrop{
    background-position:62% 30%!important;
  }
}

@media(max-width:420px){
  #binderPage .binderTitleHero{
    padding-left:12px!important;
    padding-right:12px!important;
  }
}


/* ============================================================
   BINDER v4.17 — centered tracker + visible list thumbnails
   Desktop + mobile
   ============================================================ */

/* ---------- HERO / CARD TRACKER ---------- */

/* Keep the open hero, but give its contents a predictable grid. */
#binderPage .binderTitleHero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:28px!important;
}

/* Text stays on the left. */
#binderPage .binderTitleHero .binderHero__content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
}

/* Tracker centered vertically in the hero's right side. */
#binderPage .binderTitleHero .binderPage__totalCard{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
  min-width:190px!important;
  max-width:220px!important;
  box-sizing:border-box!important;
}

/* ---------- BINDER LIST THUMBNAILS ---------- */

/*
   v4.15 forced every thumbnail to object-fit:cover.
   That is what makes portrait artwork look heavily cropped.
   Give the artwork a slightly wider viewport and contain the full image.
*/
#binderGrid .waifuCard{
  display:flex!important;
  align-items:stretch!important;
  min-height:166px!important;
  max-height:none!important;
}

#binderGrid .waifuCard__image{
  flex:0 0 190px!important;
  width:190px!important;
  min-width:190px!important;
  height:166px!important;
  margin:0 -3px 0 0!important; /* overlap still kills the black seam */
  padding:0!important;
  overflow:hidden!important;
  background:#09131f!important;
  border:0!important;
  border-radius:18px 0 0 18px!important;
}

/* Full card illustration visible rather than zoomed/cropped. */
#binderGrid .waifuCard__image img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#09131f!important;
  border:0!important;
  border-radius:0!important;
}

/* Keep information vertically centered beside the image. */
#binderGrid .waifuCard__body{
  min-height:166px!important;
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* ---------- DESKTOP ---------- */
@media(min-width:651px){
  #binderPage .binderTitleHero{
    min-height:260px!important;
    padding:28px 34px!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    justify-self:center!important;
    margin-right:12px!important;
  }

  #binderGrid .waifuCard__image{
    flex-basis:205px!important;
    width:205px!important;
    min-width:205px!important;
    height:174px!important;
  }

  #binderGrid .waifuCard{
    min-height:174px!important;
  }

  #binderGrid .waifuCard__body{
    min-height:174px!important;
  }
}

/* ---------- MOBILE ---------- */
@media(max-width:650px){
  #binderPage .binderTitleHero{
    grid-template-columns:minmax(0,1fr) 170px!important;
    column-gap:10px!important;
    min-height:250px!important;
    padding:18px 12px!important;
  }

  #binderPage .binderTitleHero .binderHero__content{
    align-self:center!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    justify-self:center!important;
    align-self:center!important;
    width:170px!important;
    min-width:170px!important;
    max-width:170px!important;
    margin:0!important;
  }

  /* More thumbnail width, but without making list rows huge. */
  #binderGrid .waifuCard{
    min-height:154px!important;
  }

  #binderGrid .waifuCard__image{
    flex:0 0 164px!important;
    width:164px!important;
    min-width:164px!important;
    height:154px!important;
  }

  #binderGrid .waifuCard__body{
    min-height:154px!important;
    padding:12px 14px!important;
  }
}

/* Narrow phones: tracker moves below/alongside title without overflowing. */
@media(max-width:430px){
  #binderPage .binderTitleHero{
    grid-template-columns:minmax(0,1fr) 142px!important;
    column-gap:6px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    width:142px!important;
    min-width:142px!important;
    max-width:142px!important;
    padding:10px 9px!important;
  }

  #binderGrid .waifuCard__image{
    flex-basis:142px!important;
    width:142px!important;
    min-width:142px!important;
  }
}

/* Very narrow screens: prioritize readable text + artwork. */
@media(max-width:370px){
  #binderPage .binderTitleHero{
    grid-template-columns:1fr!important;
    row-gap:10px!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    justify-self:start!important;
    width:auto!important;
    min-width:150px!important;
    max-width:190px!important;
  }

  #binderGrid .waifuCard__image{
    flex-basis:126px!important;
    width:126px!important;
    min-width:126px!important;
  }
}


/* ============================================================
   BINDER v4.18 — visual concept parity
   - Binder title can never be covered by Cards Tracked
   - no left black strip beside thumbnails
   - concept-like proportions on desktop and mobile
   ============================================================ */

/* HERO: title and tracker use independent, non-overlapping columns. */
#binderPage .binderTitleHero{
  display:grid!important;
  grid-template-columns:minmax(0, 1fr) minmax(190px, 230px)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  gap:28px!important;
  min-height:300px!important;
  padding:32px 30px!important;
}

#binderPage .binderTitleHero .binderHero__content{
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding:0!important;
}

#binderPage .binderTitleHero .sectionIntro{
  width:100%!important;
  max-width:520px!important;
}

#binderPage .binderTitleHero .sectionIntro__title{
  font-size:58px!important;
  line-height:.96!important;
  white-space:nowrap!important;
  margin-right:0!important;
}

#binderPage .binderTitleHero .sectionIntro__subtitle{
  max-width:460px!important;
  margin-top:16px!important;
}

/* Tracker is in its own column: no absolute positioning, no overlap. */
#binderPage .binderTitleHero .binderPage__totalCard{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  grid-column:2!important;
  align-self:center!important;
  justify-self:center!important;
  width:100%!important;
  min-width:190px!important;
  max-width:230px!important;
  margin:0!important;
  box-sizing:border-box!important;
  z-index:4!important;
}

/* Hero artwork remains full bleed and fades into black. */
#binderPage .binderTitleHero .binderHero__backdrop{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  background-size:cover!important;
  background-position:center 32%!important;
}

/* CONTROLS: keep concept proportions. */




/* LIST CARD — eliminate the left/inner black strip at its source. */
#binderGrid .waifuCard{
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr)!important;
  align-items:stretch!important;
  min-height:174px!important;
  max-height:none!important;
  padding:0!important;
  overflow:hidden!important;
  background:#07111d!important;
}

/* Image fills its complete grid cell. No margins, no contain-bars. */
#binderGrid .waifuCard__image{
  grid-column:1!important;
  width:220px!important;
  min-width:0!important;
  max-width:none!important;
  height:174px!important;
  min-height:174px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:18px 0 0 18px!important;
  box-shadow:none!important;
}

/* Fill the thumbnail area. This removes the black bar introduced by contain. */
#binderGrid .waifuCard__image img{
  display:block!important;
  width:100%!important;
  min-width:100%!important;
  max-width:none!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center 28%!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}

/* Body starts exactly where the image ends. */
#binderGrid .waifuCard__body{
  grid-column:2!important;
  min-width:0!important;
  min-height:174px!important;
  height:auto!important;
  margin:0!important;
  padding:18px 22px!important;
  border:0!important;
  background:#07111d!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

/* Kill any legacy decoration that could look like a vertical seam. */
#binderGrid .waifuCard__image::before,
#binderGrid .waifuCard__image::after{
  content:none!important;
  display:none!important;
}

/* DESKTOP */
@media(min-width:901px){
  #binderPage .binderTitleHero{
    grid-template-columns:minmax(0, 1fr) 230px!important;
    min-height:310px!important;
    padding-left:38px!important;
    padding-right:38px!important;
  }
  #binderPage .binderTitleHero .sectionIntro__title{
    font-size:66px!important;
  }
}

/* TABLET */
@media(max-width:900px) and (min-width:651px){
  #binderPage .binderTitleHero{
    grid-template-columns:minmax(0,1fr) 205px!important;
    gap:18px!important;
  }
  #binderPage .binderTitleHero .sectionIntro__title{
    font-size:54px!important;
  }
  #binderGrid .waifuCard{
    grid-template-columns:190px minmax(0,1fr)!important;
  }
  #binderGrid .waifuCard__image{
    width:190px!important;
  }
}

/* MOBILE: reproduce concept while guaranteeing title clearance. */
@media(max-width:650px){
  #binderPage .binderTitleHero{
    grid-template-columns:minmax(0,1fr) 155px!important;
    gap:10px!important;
    min-height:260px!important;
    padding:20px 14px!important;
  }

  #binderPage .binderTitleHero .sectionIntro__title{
    font-size:43px!important;
    line-height:.98!important;
  }

  #binderPage .binderTitleHero .sectionIntro__subtitle{
    max-width:245px!important;
    font-size:13px!important;
    line-height:1.45!important;
    margin-top:12px!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    min-width:0!important;
    width:155px!important;
    max-width:155px!important;
    padding:11px 10px!important;
  }

  
  

  #binderGrid .waifuCard{
    grid-template-columns:160px minmax(0,1fr)!important;
    min-height:158px!important;
  }

  #binderGrid .waifuCard__image{
    width:160px!important;
    height:158px!important;
    min-height:158px!important;
  }

  #binderGrid .waifuCard__body{
    min-height:158px!important;
    padding:12px 14px!important;
  }
}

/* Small phones: stack tracker below the title instead of covering Binder. */
@media(max-width:440px){
  #binderPage .binderTitleHero{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
    min-height:310px!important;
    align-content:center!important;
  }

  #binderPage .binderTitleHero .binderHero__content{
    grid-column:1!important;
    grid-row:1!important;
  }

  #binderPage .binderTitleHero .binderPage__totalCard{
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    width:auto!important;
    min-width:170px!important;
    max-width:205px!important;
  }

  #binderPage .binderTitleHero .sectionIntro__title{
    font-size:48px!important;
  }

  #binderGrid .waifuCard{
    grid-template-columns:138px minmax(0,1fr)!important;
  }

  #binderGrid .waifuCard__image{
    width:138px!important;
  }
}


/* ============================================================
   FRIENDS v4.19 — SOCIAL HUB POLISH
   Visual-only pass: preserves existing Friends behavior.
   ============================================================ */

/* ---- Page heading ---- */
#friendsPage .sectionIntro,
#friendsPage .friendsHeader,
.friendsPage .sectionIntro,
.friendsPage .friendsHeader{
  position:relative;
}

#friendsPage .sectionIntro__eyebrow,
.friendsPage .sectionIntro__eyebrow{
  letter-spacing:.18em!important;
  color:#9d73ff!important;
}

/* Friend count: compact status badge instead of a detached square. */
#friendsPage .friendsCount,
.friendsPage .friendsCount{
  border:1px solid rgba(122,91,255,.8)!important;
  background:linear-gradient(135deg,rgba(34,45,91,.96),rgba(26,31,68,.96))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28),0 0 20px rgba(110,75,255,.13)!important;
  border-radius:18px!important;
}

/* ---- Main Friends / Requests / Add Friend tabs ---- */
#friendsPage .friendsTabs,
.friendsPage .friendsTabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  padding:10px!important;
  border:1px solid rgba(65,145,215,.32)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(8,24,39,.92),rgba(10,20,35,.96))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
}

#friendsPage .friendsTabs button,
.friendsPage .friendsTabs button{
  min-height:64px!important;
  border-radius:16px!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}

#friendsPage .friendsTabs button:active,
.friendsPage .friendsTabs button:active{
  transform:scale(.985)!important;
}

#friendsPage .friendsTabs button.active,
.friendsPage .friendsTabs button.active{
  border-color:#7c59ff!important;
  background:linear-gradient(135deg,rgba(55,45,122,.96),rgba(29,45,91,.96))!important;
  box-shadow:0 0 0 1px rgba(123,89,255,.28),0 0 24px rgba(104,72,255,.22)!important;
}

/* ---- Friends content cards ---- */
#friendsPage .friendsSection,
.friendsPage .friendsSection{
  border:1px solid rgba(103,76,209,.75)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(11,25,40,.97),rgba(11,19,31,.98))!important;
  box-shadow:0 14px 34px rgba(0,0,0,.22)!important;
}



/* View Binder = clear primary action. */


/* ---- Add Friend state ----
   Works with the existing markup; no JS/API behavior is replaced.
*/


/* Telegram-ID help box */






/* ID input + Add button */






/* ---- Request rows ---- */






/* ---- Mobile ---- */
@media(max-width:650px){
  #friendsPage .friendsTabs,
.friendsPage .friendsTabs{
    gap:7px!important;
    padding:7px!important;
  }

  #friendsPage .friendsTabs button,
.friendsPage .friendsTabs button{
    min-height:54px!important;
    padding:8px 7px!important;
    font-size:12px!important;
  }

  

  

  

  

  
}


/* ============================================================
   FRIENDS v4.20 — REAL MARKUP TARGETS
   Previous v4.19 used several generic selectors that do not exist
   in this project. These rules target the actual Friends classes.
   ============================================================ */

#friendsPage{
  --fr-panel:#091827;
  --fr-panel2:#0c1d2e;
  --fr-line:#24577d;
  --fr-purple:#7552ff;
  --fr-blue:#3194ff;
  --fr-green:#28dc9d;
  --fr-red:#ff4d6d;
}

/* Header */
#friendsPage > .friendsHeader{
  align-items:center!important;
  gap:24px!important;
  margin:20px 0 18px!important;
}
#friendsPage > .friendsHeader .sectionIntro__title{
  font-size:54px!important;
  line-height:.98!important;
}
#friendsPage > .friendsHeader .sectionIntro__subtitle,
#friendsPage > .friendsHeader > div:first-child > p{
  color:#8eacd0!important;
  font-size:16px!important;
  line-height:1.45!important;
}
#friendsPage > .friendsHeader .sectionIntro__subtitle{
  margin-top:10px!important;
}
#friendsPage > .friendsHeader > div:first-child > p{
  margin:4px 0 0!important;
}

/* Turn the raw "1" into the compact FRIEND status card. */
#friendsPage .friendsHeader__count{
  position:relative!important;
  min-width:132px!important;
  min-height:76px!important;
  padding:13px 18px 13px 54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #7754ff!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,#182653,#201641)!important;
  box-shadow:0 0 24px rgba(112,75,255,.18)!important;
  font-size:27px!important;
  line-height:1!important;
}
#friendsPage .friendsHeader__count::before{
  content:"👥"!important;
  position:absolute!important;
  left:18px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  font-size:23px!important;
}
#friendsPage .friendsHeader__count::after{
  content:"FRIENDS"!important;
  position:absolute!important;
  left:55px!important;
  bottom:11px!important;
  color:#a8b9dc!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
#friendsPage .friendsHeader__count{
  align-items:flex-start!important;
  padding-top:13px!important;
}

/* Tabs — actual active class is friendsTab--active */
#friendsPage > .friendsTabs{
  gap:10px!important;
  padding:8px!important;
  margin:16px 0 18px!important;
  border:1px solid rgba(42,114,166,.58)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#071726,#0a1725)!important;
}
#friendsPage > .friendsTabs > .friendsTab{
  min-height:58px!important;
  border:1px solid #285376!important;
  border-radius:14px!important;
  background:#0b1b2b!important;
  color:#b9c9df!important;
  font-size:14px!important;
  font-weight:800!important;
}
#friendsPage > .friendsTabs > .friendsTab.friendsTab--active{
  border-color:#7956ff!important;
  background:linear-gradient(135deg,#31245f,#152d56)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(121,86,255,.25),0 0 22px rgba(121,86,255,.22)!important;
}
#friendsPage .friendsTab__badge{
  top:6px!important;
  right:7px!important;
  min-width:20px!important;
  height:20px!important;
  line-height:20px!important;
  background:#ff3f68!important;
  box-shadow:0 0 12px rgba(255,63,104,.35)!important;
}

/* Actual managed content */
#friendsPage > .friendsSection,
#friendsPage > .friendsAdd{
  margin-bottom:16px!important;
  padding:20px!important;
  border:1px solid rgba(111,78,230,.75)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,#091827,#0a1522)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
}
#friendsPage .friendsSection__titleRow{
  margin-bottom:14px!important;
}
#friendsPage .friendsSection__titleRow h2{
  font-size:19px!important;
}
#friendsPage .friendsSection__titleRow span{
  min-width:34px!important;
  padding:7px 10px!important;
  background:#172b40!important;
  color:#a9c2e2!important;
}

/* Friend/request rows */
#friendsPage .friendRow{
  min-height:70px!important;
  padding:12px 14px!important;
  border:1px solid rgba(73,105,137,.42)!important;
  border-radius:15px!important;
  background:#091522!important;
}
#friendsPage .friendRow:hover{
  border-color:rgba(71,145,203,.62)!important;
}





#friendsPage .friendRow > .friendRow__identity > .tradesFriend__avatar{
  flex:0 0 54px!important;
  width:54px!important;
  height:54px!important;
  min-width:54px!important;
  min-height:54px!important;
}

.waifuDetailWedding{
  width:100%;
  min-height:44px;
  margin-bottom:10px;
  border:1px solid rgba(205,160,72,.55);
  border-radius:12px;
  background:rgba(205,160,72,.14);
  color:#f5d98d;
  font:inherit;
  font-weight:800;
}
.waifuDetailWedding:disabled{opacity:.55}



/* Buttons generated in friend rows */
#friendsPage .friendRow button{
  min-height:42px!important;
  border-radius:12px!important;
  font-weight:800!important;
}
#friendsPage [data-view-binder]{
  border:1px solid #1fba7f!important;
  background:rgba(12,88,62,.72)!important;
  color:#62f0b6!important;
}

/* Add Friend approved structure */
#friendsPage .friendsAdd__heading{
  margin:0 0 16px!important;
}
#friendsPage .friendsAdd__title{
  color:#fff!important;
  font-size:20px!important;
  font-weight:900!important;
}
#friendsPage .friendsAdd__subtitle{
  margin-top:5px!important;
  color:#8ea9c8!important;
  font-size:13px!important;
}
#friendsPage .friendsAdd__label{
  display:none!important;
}

/* This is the actual help class created by JS. */
#friendsPage .friendsIdHelp{
  margin:0 0 18px!important;
  padding:18px!important;
  border:1px solid rgba(75,104,136,.42)!important;
  border-radius:17px!important;
  background:#0b1622!important;
}
#friendsPage .friendsIdHelp__title{
  margin-bottom:8px!important;
  font-size:18px!important;
}
#friendsPage .friendsIdHelp__text{
  color:#8eacd0!important;
  font-size:14px!important;
  line-height:1.5!important;
}
#friendsPage .friendsOwnId{
  margin-top:16px!important;
  padding:13px 14px!important;
  border:1px solid rgba(83,109,139,.45)!important;
  border-radius:14px!important;
  background:#151e29!important;
}
#friendsPage .friendsOwnId__value{
  font-size:15px!important;
}
#friendsPage .friendsCopyId{
  min-width:105px!important;
  min-height:44px!important;
  border:1px solid #42536a!important;
  border-radius:12px!important;
  background:#202c3a!important;
  font-size:13px!important;
}

/* Actual form classes */
#friendsPage .friendsAdd__row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 145px!important;
  gap:12px!important;
}
#friendsPage .friendsAdd__input{
  height:58px!important;
  padding:0 18px!important;
  border:1px solid #36516d!important;
  border-radius:15px!important;
  background:#080f19!important;
  font-size:17px!important;
}
#friendsPage .friendsAdd__input:focus{
  border-color:#675cff!important;
  box-shadow:0 0 0 2px rgba(103,92,255,.13)!important;
}
#friendsPage .friendsAdd__button{
  height:58px!important;
  min-width:0!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#347fff,#7351ff)!important;
  box-shadow:0 8px 20px rgba(74,86,255,.18)!important;
  font-size:15px!important;
}

/* Mobile */
@media(max-width:650px){
  #friendsPage > .friendsHeader{
    gap:10px!important;
    align-items:center!important;
  }
  #friendsPage > .friendsHeader .sectionIntro__title{
    font-size:44px!important;
  }
  #friendsPage > .friendsHeader .sectionIntro__subtitle,
  #friendsPage > .friendsHeader > div:first-child > p{
    font-size:12px!important;
  }
  #friendsPage .friendsHeader__count{
    min-width:102px!important;
    min-height:68px!important;
    padding-left:45px!important;
    border-radius:16px!important;
    font-size:23px!important;
  }
  #friendsPage .friendsHeader__count::before{
    left:13px!important;
    font-size:20px!important;
  }
  #friendsPage .friendsHeader__count::after{
    left:45px!important;
    font-size:7px!important;
  }

  #friendsPage > .friendsTabs{
    gap:6px!important;
    padding:6px!important;
  }
  #friendsPage > .friendsTabs > .friendsTab{
    min-height:50px!important;
    padding:7px 5px!important;
    font-size:11px!important;
  }

  #friendsPage > .friendsSection,
  #friendsPage > .friendsAdd{
    padding:14px!important;
    border-radius:18px!important;
  }

  #friendsPage .friendsAdd__row{
    grid-template-columns:1fr!important;
  }
  #friendsPage .friendsAdd__button{
    width:100%!important;
  }
  #friendsPage .friendsOwnId{
    align-items:stretch!important;
    flex-direction:column!important;
  }
  #friendsPage .friendsCopyId{
    width:100%!important;
  }
}


/* ============================================================
   FRIEND BINDER v4.21
   Hide Back to Hub while viewing another user's binder.
   ============================================================ */



/* ============================================================
   FAVORITES v4.24
   ============================================================ */
#favoritesPage{max-width:920px;margin:0 auto;padding-bottom:70px}
.favoritesHero{position:relative;min-height:245px;margin:34px 0 22px;border:1px solid #245b85;border-radius:24px;overflow:hidden;background:#07121e}
.favoritesHero__bg{position:absolute;inset:0;background-position:center 28%;background-size:cover;transition:background-image .35s ease}
.favoritesHero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 42%,rgba(0,0,0,.22) 100%),linear-gradient(0deg,rgba(4,10,17,.72),transparent 65%)}
.favoritesHero__content{position:relative;z-index:2;padding:54px 34px 34px;max-width:610px}
.favoritesHero__eyebrow{color:#b267ff;font-size:13px;font-weight:950;letter-spacing:.16em}
.favoritesHero h1{margin:5px 0 8px;color:#fff;font-size:48px;line-height:1;font-weight:950;letter-spacing:-.035em}
.favoritesHero p{margin:0;color:#d6e4f5;font-size:15px;line-height:1.45}
.favoritesHero__counter{position:absolute;z-index:3;right:24px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;column-gap:9px;min-width:145px;padding:14px 18px;border:1px solid #8555ff;border-radius:16px;background:linear-gradient(135deg,#24165b,#171b45);box-shadow:0 0 26px rgba(120,75,255,.25)}
.favoritesHero__counter>span{grid-row:1/3;align-self:center;font-size:28px}
.favoritesHero__counter strong{align-self:end;color:#fff;font-size:25px;line-height:1}
.favoritesHero__counter small{align-self:start;margin-top:4px;color:#d4caff;font-size:8px;font-weight:900;letter-spacing:.1em}

.favoritesControls{margin-bottom:18px}
.favoritesSearch{height:62px;display:grid;grid-template-columns:46px 1fr 48px;align-items:center;border:1px solid #2581c7;border-radius:14px;background:#08192a;overflow:hidden}
.favoritesSearch>span{text-align:center;color:#9cc7ec;font-size:27px}
.favoritesSearch input{height:100%;border:0;outline:0;background:transparent;color:#fff;font-size:16px;font-weight:700}
.favoritesSearch input::placeholder{color:#7695b6}
.favoritesSearch button{height:100%;border:0;background:transparent;color:#a9c9e9;font-size:27px;cursor:pointer}




.favoritesBoard{min-height:260px}
.favoritesMessage{text-align:center;padding:50px 20px;color:#85a6c7}
.favoritesGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.favoritesGrid .waifuCard{min-width:0}
.favoriteCard{border-color:#5e42f0!important;box-shadow:0 0 16px rgba(91,59,238,.14)}
.favoriteCard .waifuCard__image{position:relative}
.favoriteCard__star{position:absolute;z-index:6;top:8px;right:8px;width:34px;height:34px;border:1px solid #8b63ff;border-radius:10px;background:rgba(31,25,58,.9);color:#ffd55a;font-size:19px;line-height:1;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.35)}
.favoriteCard__star:disabled{opacity:.5}

.favoritesEmpty{padding:46px 20px 22px;border:1px solid #254b6b;border-radius:17px;background:linear-gradient(145deg,#071522,#091827);text-align:center}
.favoritesEmpty__star{width:100px;height:82px;margin:0 auto 10px;display:grid;place-items:center;font-size:62px;filter:drop-shadow(0 0 14px rgba(255,206,67,.25))}
.favoritesEmpty h2{margin:0;color:#fff;font-size:22px;line-height:1.12}
.favoritesEmpty p{margin:12px 0 22px;color:#8fa9c5;font-size:14px;line-height:1.45}
.favoritesEmpty button{width:min(100%,430px);height:48px;border:1px solid #8056ff;border-radius:10px;background:linear-gradient(135deg,#4e24d6,#6929ef);color:#fff;font-weight:900;cursor:pointer}

@media(max-width:700px){
  #tradeBinNav{grid-template-columns:repeat(4,1fr)!important}
  #tradeBinNav .bottomNav__item{padding-left:5px!important;padding-right:5px!important;font-size:11px!important}
  #favoritesPage{padding-left:14px;padding-right:14px}
  .favoritesHero{min-height:225px;margin-top:22px;border-radius:20px}
  .favoritesHero__content{padding:45px 18px 24px;max-width:72%}
  .favoritesHero h1{font-size:34px}
  .favoritesHero p{font-size:12px}
  .favoritesHero__counter{right:13px;top:52%;min-width:105px;padding:11px 10px;grid-template-columns:29px 1fr}
  .favoritesHero__counter>span{font-size:22px}
  .favoritesHero__counter strong{font-size:21px}
  .favoritesSearch{height:54px}
  
  
  
  .favoritesGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .favoriteCard__star{width:31px;height:31px}
}


/* ============================================================
   FAVORITES v4.25 — CSS LOAD + LAYOUT HARDENING
   ============================================================ */
#favoritesPage.page{
  width:min(100% - 32px,920px)!important;
  max-width:920px!important;
  margin:0 auto!important;
  padding:0 0 72px!important;
  color:#fff!important;
}
#favoritesPage:not(.page--active){
  display:none!important;
}
#favoritesPage.page--active{
  display:block!important;
}
#favoritesPage .tradeBinBack{
  margin-top:34px!important;
  margin-bottom:0!important;
}
#favoritesPage .favoritesHero,
#favoritesPage .favoritesControls,
#favoritesPage .favoritesBoard{
  width:100%!important;
  box-sizing:border-box!important;
}
#favoritesPage .favoritesGrid > .waifuCard{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}
#favoritesPage .favoritesGrid .waifuCard__image{
  width:100%!important;
}

@media(max-width:700px){
  #favoritesPage.page{
    width:calc(100% - 24px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  #favoritesPage .tradeBinBack{
    margin-top:18px!important;
  }
}


/* ============================================================
   FAVORITES v4.27 — CUSTOM TITLE FONT
   Same title treatment used by Collection / Binder / Friends.
   ============================================================ */
#favoritesPage .favoritesHero h1{
  font-family:"SDKUSWebLocal", Arial, sans-serif!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
}


/* ============================================================
   v4.28 — COLLECTION + BINDER: TITLE ONLY
   ============================================================ */

/* Binder: remove artwork, rectangle and all hero extras. */
#binderPage .binderTitleHero{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 22px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#binderPage .binderTitleHero .binderHero__backdrop,
#binderPage .binderTitleHero .binderHero__shade,
#binderPage .binderTitleHero .sectionIntro__eyebrow,
#binderPage .binderTitleHero .sectionIntro__subtitle,
#binderPage .binderTitleHero .binderPage__totalCard{
  display:none!important;
}
#binderPage .binderTitleHero::before,
#binderPage .binderTitleHero::after{
  display:none!important;
  content:none!important;
}
#binderPage .binderTitleHero .binderHero__content,
#binderPage .binderTitleHero .sectionIntro{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
#binderPage .binderTitleHero .sectionIntro__title{
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.01em!important;
}

/* Collection: cover all hero class variants used across previous patches. */







@media(max-width:650px){
  #binderPage .binderTitleHero{
    min-height:0!important;
    margin:20px 0 18px!important;
    padding:0!important;
  }
}


/* ============================================================
   v4.29 — TRUE TITLE-ONLY HEADERS
   Exact selectors from current HTML.
   ============================================================ */

/* COLLECTION — the current HTML uses .sectionIntro--collection */
#cavallinePage .sectionIntro--collection{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 28px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Kill every visual layer inside the old Collection hero. */
#cavallinePage .sectionIntro--collection .collectionHeroBackground,
#cavallinePage .sectionIntro--collection .collectionArchiveArt,
#cavallinePage .sectionIntro--collection .archivePortrait,
#cavallinePage .sectionIntro--collection .archiveQuote,
#cavallinePage .sectionIntro--collection .collectionArchiveSpark,
#cavallinePage .sectionIntro--collection .sectionIntro__eyebrow,
#cavallinePage .sectionIntro--collection .sectionIntro__subtitle{
  display:none!important;
}

/* Also kill pseudo-element overlays/backgrounds. */
#cavallinePage .sectionIntro--collection::before,
#cavallinePage .sectionIntro--collection::after{
  content:none!important;
  display:none!important;
  background:none!important;
}

/* Only Collection remains. */
#cavallinePage .sectionIntro--collection .sectionIntro__title{
  position:static!important;
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  color:#fff!important;
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-shadow:none!important;
}

/* BINDER — keep literally only the Binder title in its heading area. */
#binderPage .binderTitleHero{
  position:relative!important;
  display:block!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 28px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#binderPage .binderTitleHero .binderHero__backdrop,
#binderPage .binderTitleHero .binderHero__shade,
#binderPage .binderTitleHero .sectionIntro__eyebrow,
#binderPage .binderTitleHero .sectionIntro__subtitle,
#binderPage .binderTitleHero .binderPage__totalCard{
  display:none!important;
}
#binderPage .binderTitleHero::before,
#binderPage .binderTitleHero::after{
  content:none!important;
  display:none!important;
  background:none!important;
}
#binderPage .binderTitleHero .binderHero__content,
#binderPage .binderTitleHero .sectionIntro{
  position:static!important;
  display:block!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  background:none!important;
}
#binderPage .binderTitleHero .sectionIntro__title{
  position:static!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  color:#fff!important;
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  text-shadow:none!important;
}

@media(max-width:650px){
  #cavallinePage .sectionIntro--collection,
  #binderPage .binderTitleHero{
    margin:22px 0 24px!important;
  }
}


/* ============================================================
   v4.30 — COLLECTION / BINDER TEXT HEADER
   Keep eyebrow + title + description.
   Remove ONLY artwork, rounded hero shell and visual overlays.
   ============================================================ */

/* ---------- COLLECTION ---------- */
#cavallinePage .sectionIntro--collection{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 30px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Current project art layers + defensive variants. */
#cavallinePage .sectionIntro--collection .collectionHeroBackground,
#cavallinePage .sectionIntro--collection .collectionArchiveArt,
#cavallinePage .sectionIntro--collection .archivePortrait,
#cavallinePage .sectionIntro--collection .archiveQuote,
#cavallinePage .sectionIntro--collection .collectionArchiveSpark,
#cavallinePage .sectionIntro--collection [class*="backdrop"],
#cavallinePage .sectionIntro--collection [class*="Backdrop"],
#cavallinePage .sectionIntro--collection [class*="heroBg"],
#cavallinePage .sectionIntro--collection [class*="HeroBg"]{
  display:none!important;
  background:none!important;
  background-image:none!important;
}
#cavallinePage .sectionIntro--collection::before,
#cavallinePage .sectionIntro--collection::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* Restore the text that v4.29 hid. */
#cavallinePage .sectionIntro--collection .sectionIntro__eyebrow{
  display:block!important;
  position:static!important;
  margin:0 0 7px!important;
  padding:0!important;
}
#cavallinePage .sectionIntro--collection .sectionIntro__title{
  display:block!important;
  position:static!important;
  margin:0!important;
  padding:0!important;
}
#cavallinePage .sectionIntro--collection .sectionIntro__subtitle{
  display:block!important;
  position:static!important;
  max-width:560px!important;
  margin:12px 0 0!important;
  padding:0!important;
  transform:none!important;
}

/* ---------- BINDER ---------- */
#binderPage .binderTitleHero{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 30px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}
#binderPage .binderTitleHero .binderHero__backdrop,
#binderPage .binderTitleHero .binderHero__shade,
#binderPage .binderTitleHero [class*="backdrop"],
#binderPage .binderTitleHero [class*="Backdrop"],
#binderPage .binderTitleHero [class*="heroBg"],
#binderPage .binderTitleHero [class*="HeroBg"]{
  display:none!important;
  background:none!important;
  background-image:none!important;
}
#binderPage .binderTitleHero::before,
#binderPage .binderTitleHero::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}
#binderPage .binderTitleHero .binderHero__content,
#binderPage .binderTitleHero .sectionIntro{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  background:transparent!important;
}

/* Restore MY LIST + Binder description. */
#binderPage .binderTitleHero .sectionIntro__eyebrow{
  display:block!important;
  position:static!important;
  margin:0 0 7px!important;
  padding:0!important;
}
#binderPage .binderTitleHero .sectionIntro__title{
  display:block!important;
  position:static!important;
  margin:0!important;
  padding:0!important;
}
#binderPage .binderTitleHero .sectionIntro__subtitle{
  display:block!important;
  position:static!important;
  max-width:560px!important;
  margin:12px 0 0!important;
  padding:0!important;
  transform:none!important;
}

/* Cards tracked belongs to the old visual hero, keep it removed. */
#binderPage .binderTitleHero .binderPage__totalCard{
  display:none!important;
}

@media(max-width:650px){
  #cavallinePage .sectionIntro--collection,
  #binderPage .binderTitleHero{
    margin:22px 0 26px!important;
  }
}


/* ============================================================
   v4.31 — FAVORITES TEXT HEADER
   Same treatment as Collection/Binder: no hero artwork/shell.
   ============================================================ */
#favoritesPage .favoritesHero{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  height:auto!important;
  margin:28px 0 30px!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#favoritesPage .favoritesHero::before,
#favoritesPage .favoritesHero::after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* Remove Favorites artwork / decorative hero layers only. */
#favoritesPage .favoritesHero__shade,
#favoritesPage .favoritesHero [class*="backdrop"],
#favoritesPage .favoritesHero [class*="Backdrop"],
#favoritesPage .favoritesHero [class*="heroArt"],
#favoritesPage .favoritesHero [class*="HeroArt"]{
  display:none!important;
  background:none!important;
  background-image:none!important;
}

/* Keep text content. */
#favoritesPage .favoritesHero__content{
  position:static!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

#favoritesPage .favoritesHero__eyebrow{
  display:block!important;
  position:static!important;
  margin:0 0 7px!important;
  padding:0!important;
}





/* The count badge belongs to the old hero and can overlap the title. */
#favoritesPage .favoritesHero__counter{
  display:none!important;
}

@media(max-width:650px){
  #favoritesPage .favoritesHero{
    margin:22px 0 26px!important;
  }
  
}

#favoritesPage .favoritesHero .sectionIntro__title{
  font-size:56px!important;
  line-height:.96!important;
}
@media(max-width:650px){
  #favoritesPage .favoritesHero .sectionIntro__title{
    font-size:44px!important;
    line-height:1!important;
  }
}


/* ============================================================
   v4.32 — FAVORITES HEADER FIX
   Actual artwork node is .favoritesHero__bg.
   ============================================================ */

/* Remove the real rotating artwork layer. */
#favoritesPage .favoritesHero > .favoritesHero__bg,
#favoritesPage #favoritesHeroBg,
#favoritesPage .favoritesHero > .favoritesHero__shade{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
}

/* Hero becomes a plain text block. */
#favoritesPage .favoritesHero{
  position:relative!important;
  display:block!important;
  min-height:0!important;
  height:auto!important;
  padding:0!important;
  margin:28px 0 30px!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  background-image:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#favoritesPage .favoritesHero__content{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  z-index:auto!important;
}

/* Keep FAVORITES + description. */
#favoritesPage .favoritesHero__eyebrow{
  display:block!important;
  margin:0 0 7px!important;
}

#favoritesPage .favoritesHero h1{
  position:static!important;
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  font-family:"SDKUSWebLocal",Arial,sans-serif!important;
  font-weight:400!important;
  font-size:52px!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  white-space:normal!important;
  transform:none!important;
}

#favoritesPage .favoritesHero p{
  position:static!important;
  display:block!important;
  max-width:560px!important;
  margin:12px 0 0!important;
  padding:0!important;
  transform:none!important;
}

/* Old hero counter stays removed. */
#favoritesPage .favoritesHero__counter{
  display:none!important;
}

@media(max-width:650px){
  #favoritesPage .favoritesHero{
    margin:22px 0 26px!important;
  }
  #favoritesPage .favoritesHero h1{
    font-size:40px!important;
  }
}


/* ============================================================
   v4.33 — TRADE CENTER V1
   ============================================================ */
.tradesHeader{margin:28px 0 22px}
.tradesTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.tradesTab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:#bfc2d4;border-radius:14px;padding:13px 10px;font-weight:800}
.tradesTab.is-active{color:#fff;border-color:rgba(176,92,255,.75);background:rgba(135,61,213,.18);box-shadow:0 0 24px rgba(139,61,213,.12)}
.tradesTab b{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;border-radius:99px;background:#9b4cff;color:#fff;font-size:11px;margin-left:4px}
.tradesPanel{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(10,10,17,.7);padding:18px}
.tradesPanel__heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px}
.tradesPanel__heading small{font-size:10px;letter-spacing:.22em;color:#9d74ff;font-weight:900}
.tradesPanel__heading h3{margin:4px 0 0;font-size:20px}
.tradesFriendList,.tradesIncomingList{display:grid;gap:10px}
.tradesFriend{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:12px;background:rgba(255,255,255,.025)}
.tradesFriend__avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#6e38c9,#b04cff);font-weight:900}
.tradesFriend__body{min-width:0;flex:1}.tradesFriend__body strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tradesFriend__body small{color:#888da4}
.tradesFriend button,.tradesInlineBack{border:1px solid rgba(167,91,255,.45);background:rgba(139,61,213,.14);color:#e6d8ff;border-radius:11px;padding:9px 11px;font-weight:800}
.tradesFriend button:disabled{opacity:.4}
.tradesCardGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px}





.tradeSelectorHint{margin:0 0 12px;color:#b9bbca;font-size:13px}


.tradeConfirm{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;overflow-y:auto}
.tradeConfirm[hidden]{display:none!important}
.tradeConfirm__backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}
.tradeConfirm__sheet{position:relative;width:min(520px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:#101018;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.tradeConfirm__close{position:absolute;right:14px;top:12px;border:0;background:none;color:#aaa;font-size:25px}
.tradeConfirm__sheet>small{color:#9e6bff;letter-spacing:.18em;font-weight:900}.tradeConfirm__sheet h2{margin:5px 0 18px}
.tradeConfirm__pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.tradeConfirm__pair>div{border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:12px}.tradeConfirm__pair span{display:block;font-size:9px;letter-spacing:.12em;color:#898ca0;margin-bottom:5px}.tradeConfirm__pair strong{font-size:13px}
.tradeConfirm__actions{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:18px}.tradeConfirm__actions button{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;background:#191923;color:#ddd;font-weight:900}.tradeConfirm__actions .tradeConfirm__send{background:linear-gradient(135deg,#7c3ed2,#a94fff);color:white}
.tradeIncoming{border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:13px}.tradeIncoming__actions{display:flex;gap:8px;justify-content:flex-end}.tradeIncoming__actions button{border-radius:10px;padding:8px 11px;border:1px solid rgba(255,255,255,.12);background:#191923;color:#ddd}.tradeIncoming__actions .accept{border-color:rgba(134,73,218,.5);color:#cdaaff}
.tradesEmpty{padding:30px 10px;text-align:center;color:#85899b}
@media(max-width:650px){.tradesTabs{grid-template-columns:1fr 1fr 1fr;gap:6px}.tradesTab{font-size:11px;padding:11px 5px}.tradesPanel{padding:13px}.tradesCardGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.tradesFriend{padding:10px}.tradesFriend button{font-size:11px}.tradeConfirm__pair{grid-template-columns:1fr}.tradeConfirm__pair>b{text-align:center;transform:rotate(90deg)}}

/* Trade offer selector: compact match list (no card images) */
.tradeOfferFilters{display:grid;gap:10px;margin-bottom:12px}
.tradeOfferFilters__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tradeOfferFilters__row .passSelector__eventFilter{width:100%;min-width:0}
#tradeOfferSelectorList{display:flex;flex-direction:column;gap:8px}
.tradeOfferListRow{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:12px 13px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:#11111a;color:#fff;text-align:left;cursor:pointer}
.tradeOfferListRow:hover{background:#171722;border-color:rgba(184,146,255,.4)}
.tradeOfferListRow__main{min-width:0}.tradeOfferListRow__main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.tradeOfferListRow__main small{display:block;margin-top:4px;color:#9699aa;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tradeOfferListRow__tag{padding:5px 7px;border-radius:8px;background:rgba(23,128,92,.25);color:#83e1bc;font-size:10px;font-weight:900;letter-spacing:.04em}

@media(max-width:620px){.tradeOfferFilters__row{grid-template-columns:1fr 1fr}.tradeOfferFilters__row select:last-child{grid-column:1/-1}.tradeOfferListRow{grid-template-columns:minmax(0,1fr) auto}.tradeOfferListRow__tag{display:none}}

.binderResetAll{
  width:100%;margin-top:14px;min-height:46px;padding:0 16px;
  border:1px solid rgba(255,82,82,.55);border-radius:14px;
  background:rgba(190,35,45,.16);color:#ff747c;
  font:inherit;font-weight:800;letter-spacing:.01em;cursor:pointer;
}
.binderResetAll:hover{background:rgba(190,35,45,.24);border-color:rgba(255,82,82,.78)}
.binderResetAll:active{transform:scale(.99)}
.binderResetAll:disabled{opacity:.55;cursor:wait}

/* Trade artwork previews */
.tradeOfferListRow{cursor:pointer}
.tradeOfferListRow__preview{flex:0 0 42px;width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid rgba(105,169,255,.35);border-radius:12px;background:rgba(105,169,255,.10);color:inherit;font-size:18px;cursor:pointer}
.tradeOfferListRow__preview:active{transform:scale(.96)}
.tradeConfirm__card{display:flex;flex-direction:column;gap:9px;min-width:0}

.tradeConfirm__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%}

.tradeImageViewer[hidden]{display:none!important}
.tradeImageViewer{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(0,0,0,.92)}
.tradeImageViewer__image{max-width:min(94vw,760px);max-height:90vh;object-fit:contain;border-radius:14px}
.tradeImageViewer__close{position:fixed;top:max(14px,env(safe-area-inset-top));right:16px;z-index:10051;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(20,20,25,.78);color:#fff;font-size:28px;line-height:1;cursor:pointer}
body.tradeImageViewerOpen{overflow:hidden}


/* Classic View Matches, list presentation */
#tradesFriendMatchesGrid{display:flex;flex-direction:column;gap:8px}
.tradeMatchListRow{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(255,255,255,.035);cursor:pointer;box-sizing:border-box}
.tradeMatchListRow:hover{background:rgba(255,255,255,.055)}
.tradeMatchListRow__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px;text-align:left}
.tradeMatchListRow__body strong{font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tradeMatchListRow__body small{font-size:12px;line-height:1.2;opacity:.66}

.tradeMatchListRow__preview{flex:0 0 42px;width:42px;height:42px;padding:0;display:grid;place-items:center;border:1px solid rgba(105,169,255,.34);border-radius:11px;background:rgba(105,169,255,.09);color:inherit;font-size:17px;cursor:pointer}
.tradeMatchListRow__preview:active{transform:scale(.96)}

.tradeMatchPreviewOverlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.88);box-sizing:border-box}
.tradeMatchPreviewOverlay img{display:block;max-width:min(92vw,700px);max-height:88vh;object-fit:contain;border-radius:16px}
.tradeMatchPreviewOverlay__close{position:fixed;top:18px;right:18px;width:46px;height:46px;border:1px solid rgba(255,255,255,.22);border-radius:50%;background:rgba(20,20,28,.9);color:#fff;font-size:30px;line-height:1;cursor:pointer}

/* v14: compact offer selector + centralized card-name presentation */
.tradeOfferFilters__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.tradeOfferFilters__top .passSelector__search{margin:0}
.tradeOfferFilters__toggle{min-height:48px;padding:0 16px;border:1px solid rgba(150,105,255,.42);border-radius:14px;background:rgba(139,72,235,.12);color:#fff;font-weight:850;white-space:nowrap;cursor:pointer}
.tradeOfferFilters__panel[hidden]{display:none!important}
.tradeOfferFilters__panel{padding-top:10px}
@media(max-width:520px){.tradeOfferFilters__top{grid-template-columns:1fr auto}.tradeOfferFilters__toggle{padding:0 12px}}

/* v16 — trade offer modal polish */

#tradeOfferSelectorModal #tradeSelectorHint{margin-top:0}




/* v17 — final trade confirmation */
.tradeConfirm__sheet{max-width:604px}
.tradeConfirm__pair{gap:16px}
.tradeConfirm__card{padding:20px}

.tradeConfirm__image{width:100%;height:100%;object-fit:cover}
.tradeConfirm__card strong{display:block;margin-top:13px}
.tradeConfirm__card strong::after{content:""}
.tradeConfirm__swap{width:42px;height:42px;margin:0 auto;display:grid;place-items:center;border:1px solid rgba(255,255,255,.11);border-radius:50%;background:rgba(255,255,255,.045)}
.tradeConfirm__close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.075);color:#fff;font-size:27px;line-height:1;opacity:1;cursor:pointer}
.tradeConfirm__close:hover{background:rgba(255,255,255,.13)}
.tradeImageViewer{z-index:100000!important}
.tradeImageViewer__close{z-index:100001!important}
@media(max-width:560px){.tradeConfirm__card{padding:16px}}
.tradeConfirm__cardId{display:block;margin-top:4px;color:rgba(255,255,255,.55);font-size:13px}

/* v18 — only the visible lens is the preview control */
.tradeConfirm__imageWrap{position:relative;width:100%;height:190px;overflow:hidden;border-radius:14px;background:rgba(0,0,0,.2)}
.tradeConfirm__imageWrap .tradeConfirm__image{width:100%;height:100%;display:block;object-fit:cover;cursor:default}



@media(max-width:560px){.tradeConfirm__imageWrap{height:165px}}

/* =========================================================
   v20 FINAL CONFIRM TRADE — all requested visual adjustments
   ========================================================= */
#tradeConfirmOverlay .tradeConfirm__sheet{
  position:relative;
  width:min(92vw,620px);
  max-width:620px;
  max-height:calc(100dvh - 24px);
  box-sizing:border-box;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:24px;
  border-radius:22px;
}
#tradeConfirmOverlay .tradeConfirm__close{
  position:absolute;top:18px;right:18px;z-index:20;
  width:44px;height:44px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:12px;
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:28px;font-weight:500;line-height:1;
  opacity:1;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  cursor:pointer;
}
#tradeConfirmOverlay .tradeConfirm__close:hover{background:rgba(255,255,255,.15)}
#tradeConfirmOverlay .tradeConfirm__sheet>small:first-of-type{
  display:block;margin:0 0 5px;
  font-size:11px;font-weight:900;letter-spacing:.11em;opacity:.58;
}
#tradeConfirmOverlay .tradeConfirm__sheet>h2{
  margin:0 58px 22px 0;
  font-size:24px;line-height:1.15;
}
#tradeConfirmOverlay .tradeConfirm__pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);
  gap:14px;align-items:center;
}
#tradeConfirmOverlay .tradeConfirm__card{
  min-width:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
#tradeConfirmOverlay .tradeConfirm__direction{
  display:block;
  margin:0 0 10px;
  color:#b89cff;
  font-size:12px;font-weight:950;letter-spacing:.06em;
}
#tradeConfirmOverlay .tradeConfirm__imageWrap{
  height:155px; /* visibly ~20-25% shorter than original */
  border-radius:14px;
}
#tradeConfirmOverlay .tradeConfirm__image{
  width:100%;height:100%;object-fit:cover;cursor:zoom-in;
}

#tradeConfirmOverlay .tradeConfirm__card strong{
  display:block;
  margin-top:12px;
  font-size:14px;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#tradeConfirmOverlay .tradeConfirm__cardId{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.48);
  font-size:12px;
}
#tradeConfirmOverlay .tradeConfirm__swap{
  justify-self:center;
  width:42px;height:42px;margin:0;
  display:grid;place-items:center;
  border:1px solid rgba(177,137,255,.30);
  border-radius:50%;
  background:rgba(139,79,225,.11);
  color:#c0a9ff;
  font-size:0;
  line-height:1;
}
#tradeConfirmOverlay .tradeConfirm__swap span{
  display:block;
  font-size:20px;
  line-height:1;
  text-align:center;
}
#tradeConfirmOverlay .tradeConfirm__partner{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:18px 0 16px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  font-size:13px;
}
#tradeConfirmOverlay .tradeConfirm__partner span{opacity:.56}
#tradeConfirmOverlay .tradeConfirm__partner strong{color:#b89cff}
#tradeConfirmOverlay .tradeConfirm__actions{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:10px;
}
#tradeConfirmOverlay .tradeConfirm__actions button{
  min-height:46px;border-radius:12px;
}
#tradeConfirmOverlay .tradeConfirm__actions [data-trade-confirm-close]{
  opacity:.68;
  background:rgba(255,255,255,.045);
}
#tradeConfirmOverlay .tradeConfirm__send{
  font-weight:950;
  letter-spacing:.025em;
  box-shadow:0 7px 20px rgba(105,56,210,.22);
}
@media(max-width:560px){
  #tradeConfirmOverlay{place-items:start center;padding:8px;overflow-y:auto}
  #tradeConfirmOverlay .tradeConfirm__sheet{max-height:calc(100dvh - 16px);margin:auto 0;padding:16px}
  #tradeConfirmOverlay .tradeConfirm__sheet h2{margin-bottom:12px}
  #tradeConfirmOverlay .tradeConfirm__pair{grid-template-columns:1fr;gap:10px}
  #tradeConfirmOverlay .tradeConfirm__swap{
    transform:rotate(90deg);
    align-self:center;
  }
  #tradeConfirmOverlay .tradeConfirm__imageWrap{height:110px}
}

/* Keep the confirmation sheet itself touch-scrollable in Telegram WebView. */
#tradeConfirmOverlay{
  display:grid;
  min-height:0;
  overflow:hidden;
  touch-action:pan-y;
}
#tradeConfirmOverlay .tradeConfirm__sheet{
  height:calc(100vh - 36px);
  max-height:calc(100vh - 36px);
  min-height:0;
  overflow-x:hidden;
  overflow-y:scroll;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
@media(max-width:560px){
  #tradeConfirmOverlay{
    display:block;
    padding:8px;
  }
  #tradeConfirmOverlay .tradeConfirm__sheet{
    width:100%;
    height:calc(100vh - 16px);
    max-height:calc(100vh - 16px);
    margin:0 auto;
  }
}

@media(max-width:560px){
  #tradeConfirmOverlay .tradeConfirm__card{
    display:grid;
    grid-template-columns:100px minmax(0,1fr);
    grid-template-rows:auto 1fr;
    column-gap:12px;
    align-items:center;
    padding:12px;
  }
  #tradeConfirmOverlay .tradeConfirm__direction{
    grid-column:1 / -1;
    margin:0 0 8px;
  }
  #tradeConfirmOverlay .tradeConfirm__imageWrap{
    grid-column:1;
    grid-row:2;
    width:100px;
    height:112px;
    align-self:center;
  }
  #tradeConfirmOverlay .tradeConfirm__image{
    object-fit:contain;
    background:#0b0b12;
  }
  #tradeConfirmOverlay .tradeConfirm__details{
    grid-column:2;
    grid-row:2;
    align-self:center;
    min-width:0;
  }
  #tradeConfirmOverlay .tradeConfirm__card strong{
    display:block;
    margin:0;
    white-space:normal;
  }
  #tradeConfirmOverlay .tradeConfirm__cardId{
    display:block;
    margin-top:5px;
  }
}

/* v21 — compact incoming offers inspired by Telegram trade messages */
.tradeIncoming{padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.025)}
.tradeIncoming__headline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tradeIncoming__headline>div{display:flex;align-items:baseline;gap:5px;min-width:0}.tradeIncoming__headline strong{font-size:15px}.tradeIncoming__headline span{font-size:13px;opacity:.62}.tradeIncoming__headline>small{font-size:11px;opacity:.45;white-space:nowrap}
.tradeIncoming__deal{display:flex;flex-direction:column;gap:9px}
.tradeIncoming__line{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:8px;align-items:center}.tradeIncoming__verb{font-size:12px;opacity:.58}.tradeIncoming__line strong{min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tradeIncoming__line>small{font-size:11px;opacity:.42}
.tradeIncoming__actions{display:grid;grid-template-columns:48px 1fr 1fr;gap:8px;margin-top:13px}.tradeIncoming__actions button{min-height:42px;border-radius:11px;font-weight:850}.tradeIncoming__actions .accept{background:rgba(46,160,67,.88);border-color:rgba(68,190,89,.65);color:#fff}.tradeIncoming__actions .decline{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10);color:#fff}
.tradeIncoming.is-processing{opacity:.72;pointer-events:none}.tradeIncoming__success{display:flex;align-items:center;gap:12px;padding:12px}.tradeIncoming__success>span{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:rgba(46,160,67,.18);color:#66d17a;font-size:22px}.tradeIncoming__success div{display:flex;flex-direction:column;gap:3px}.tradeIncoming__success small{opacity:.58}

@media(max-width:560px){.tradeIncoming__line{grid-template-columns:1fr}.tradeIncoming__verb{margin-bottom:-4px}.tradeIncoming__line>small{display:none}}

/* v22 — visual two-card incoming trade preview */













/* v23 — persistent last-10 trade history */
.tradesTabs{grid-template-columns:repeat(4,minmax(0,1fr))}
.tradesHistoryList{display:flex;flex-direction:column;gap:11px}
.tradeHistory{padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.025)}
.tradeHistory__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
.tradeHistory__head>div{display:flex;flex-direction:column;gap:2px}.tradeHistory__head strong{font-size:15px}.tradeHistory__head span,.tradeHistory__head time{font-size:11px;opacity:.48}.tradeHistory__head time{white-space:nowrap}




.tradeIncoming.is-deep-linked{animation:tradeDeepLinkPulse 1s ease-in-out 3}
.tradeConfirm__level{display:block;color:rgba(255,255,255,.72);font-size:11px;font-weight:700;margin-top:3px}
@keyframes tradeDeepLinkPulse{0%,100%{box-shadow:0 0 0 rgba(90,190,255,0)}50%{box-shadow:0 0 0 4px rgba(90,190,255,.45)}}



@media(max-width:650px){.tradesTabs{grid-template-columns:repeat(2,1fr)}.tradeHistory__head{flex-direction:column;gap:4px}}

/* v24 — Friends tab inspired by the approved Trade Center mockup */
.tradesFriendsHeading{display:flex;align-items:end;justify-content:space-between;gap:14px}
.tradesFriendSearch{width:min(44%,250px);height:42px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.025)}
.tradesFriendSearch>span{font-size:22px;color:#9994b8}.tradesFriendSearch input{width:100%;min-width:0;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font:inherit}.tradesFriendSearch input::placeholder{color:#77748b}
.tradesFriendList{gap:11px!important}.tradesFriend{position:relative;min-height:82px;padding:13px 15px!important;gap:14px!important;border-radius:16px!important;transition:.18s}
.tradesFriend--hasMatches{border-color:rgba(166,73,255,.46)!important;background:linear-gradient(90deg,rgba(125,44,210,.11),rgba(255,255,255,.018))!important;box-shadow:inset 0 0 22px rgba(132,53,220,.045)}
.tradesFriend--hasMatches:hover{border-color:rgba(182,92,255,.72)!important;box-shadow:0 0 18px rgba(139,61,213,.10),inset 0 0 24px rgba(132,53,220,.06)}
.tradesFriend__avatar{position:relative;flex:0 0 54px;width:54px!important;height:54px!important;overflow:hidden;border:1px solid rgba(183,101,255,.55);font-size:20px}
.tradesFriend__avatar span{position:absolute;inset:0;display:grid;place-items:center}.tradesFriend__avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .15s}.tradesFriend__avatar.has-photo img{opacity:1}
.tradesFriend__body{display:grid!important;grid-template-columns:minmax(120px,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.tradesFriend__body>strong{grid-row:1 / span 2;align-self:center;font-size:17px}
.tradesFriend__matchPill{grid-column:2;justify-self:end;padding:5px 9px;border:1px solid rgba(177,91,255,.27);border-radius:9px;background:rgba(128,55,211,.12);color:#e7d8ff;font-size:11px;font-weight:850;white-space:nowrap}
.tradesFriend__body>small{grid-column:2;justify-self:end;color:#8d8aa0!important;font-size:11px;white-space:nowrap}.tradesFriend__noMatch{grid-row:1 / span 2!important;align-self:center}
.tradesFriend__view{flex:0 0 auto;min-width:112px;padding:10px 13px!important;border-color:rgba(177,82,255,.58)!important;background:linear-gradient(135deg,rgba(108,43,183,.28),rgba(149,61,219,.16))!important;text-transform:none;font-size:12px}.tradesFriend__view span{margin-left:5px}
.tradesFriend__disabled{flex:0 0 112px;text-align:center;color:#686579;font-size:12px;font-weight:750}
@media(max-width:650px){.tradesFriendsHeading{align-items:stretch;flex-direction:column}.tradesFriendSearch{width:100%}.tradesFriend{min-height:76px;padding:11px!important;gap:10px!important}.tradesFriend__avatar{flex-basis:46px;width:46px!important;height:46px!important}.tradesFriend__body{display:block!important}.tradesFriend__body>strong{font-size:15px}.tradesFriend__matchPill{display:inline-block;margin-top:5px;margin-right:5px}.tradesFriend__body>small{display:inline}.tradesFriend__view{min-width:auto;padding:9px 10px!important}.tradesFriend__disabled{flex-basis:auto}}

/* v25 — sent trade offers refresh immediately into Pending */
.tradesTabs{grid-template-columns:repeat(5,minmax(0,1fr))}
.tradesPendingList{display:flex;flex-direction:column;gap:11px}
.tradePending{padding:14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.025)}
.tradePending__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.tradePending__head>div{display:flex;flex-direction:column;gap:2px}.tradePending__head strong{font-size:16px}.tradePending__head div span,.tradePending__date{font-size:11px;color:#858197}.tradePending__status{padding:5px 8px;border:1px solid rgba(255,193,73,.28);border-radius:9px;background:rgba(255,183,48,.09);color:#f0c66b;font-size:10px;font-weight:900;letter-spacing:.05em;white-space:nowrap}.tradePending__date{margin:7px 0 10px}
.tradePending__cards{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:7px;align-items:stretch}.tradePending__arrow{display:grid;place-items:center;color:#858197;font-weight:900}
.tradePending__card{position:relative;min-width:0;padding:10px 42px 10px 10px;border-radius:11px;display:flex;flex-direction:column;gap:4px}.tradePending__card--give{border:1px solid rgba(255,78,78,.34);background:rgba(124,31,38,.13)}.tradePending__card--receive{border:1px solid rgba(65,196,104,.34);background:rgba(31,112,58,.13)}.tradePending__card>span{font-size:9px;font-weight:950;letter-spacing:.07em}.tradePending__card--give>span{color:#ff7777}.tradePending__card--receive>span{color:#6ddd8b}.tradePending__card strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tradePending__card small{font-size:10px;opacity:.45}.tradePending__card button{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;border:1px solid rgba(80,164,255,.28);border-radius:8px;background:rgba(38,125,205,.15);cursor:pointer}
@media(max-width:650px){.tradesTabs{grid-template-columns:repeat(2,1fr)}.tradePending__cards{grid-template-columns:1fr}.tradePending__arrow{transform:rotate(90deg);height:18px}}

/* v26 — Matches goes directly from "Available from" to offer selection */
.tradeMatchCard__available{margin-top:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tradeMatchCard__available>small{color:#8f8a9f!important;font-size:11px;white-space:nowrap}
.tradeMatchCard__friendList{display:flex;gap:6px;flex-wrap:wrap}
.tradeMatchCard__friend{min-height:30px;padding:5px 9px!important;border:1px solid rgba(177,82,255,.38)!important;border-radius:9px!important;background:rgba(127,53,202,.12)!important;color:#d9c2ff!important;font-size:11px!important;font-weight:800!important;cursor:pointer}
.tradeMatchCard__friend:hover{border-color:rgba(188,105,255,.7)!important;background:rgba(139,61,213,.22)!important}
.tradeMatchCard__friend span{margin-left:3px;opacity:.75}

/* v27 — Matches: compact list view */
#tradesMatchesGrid{
  display:flex!important;
  flex-direction:column!important;
  grid-template-columns:none!important;
  gap:8px!important;
}
#tradesMatchesGrid .tradeMatchListRow{
  width:100%;
  min-height:74px;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:12px;
  padding:12px 13px!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:13px;
  background:rgba(255,255,255,.022);
}
#tradesMatchesGrid .tradeMatchListRow__body{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
#tradesMatchesGrid .tradeMatchListRow__body>strong{
  width:100%;
  font-size:14px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#tradesMatchesGrid .tradeMatchListRow__body>small{
  margin-top:3px;
  color:rgba(255,255,255,.43);
  font-size:11px;
}
#tradesMatchesGrid .tradeMatchCard__available{
  width:100%;
  margin-top:9px;
  padding-top:8px;
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid rgba(255,255,255,.065);
}
#tradesMatchesGrid .tradeMatchCard__available>small{
  flex:0 0 auto;
  margin:0;
  color:rgba(255,255,255,.45);
  font-size:11px;
}
#tradesMatchesGrid .tradeMatchCard__friendList{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
#tradesMatchesGrid .tradeMatchCard__friend{
  min-height:29px;
  padding:5px 9px;
  border:1px solid rgba(166,90,255,.28);
  border-radius:8px;
  background:rgba(126,56,202,.10);
  color:#d9c8ff;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
#tradesMatchesGrid .tradeMatchCard__friend:hover{
  border-color:rgba(181,105,255,.55);
  background:rgba(126,56,202,.18);
}
#tradesMatchesGrid .tradeMatchListRow__preview{
  align-self:center;
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(80,164,255,.30);
  border-radius:10px;
  background:rgba(38,125,205,.14);
  color:#fff;
  font-size:16px;
  cursor:pointer;
}
@media(max-width:520px){
  #tradesMatchesGrid .tradeMatchListRow{padding:11px!important;grid-template-columns:minmax(0,1fr) 38px}
  #tradesMatchesGrid .tradeMatchCard__available{align-items:flex-start;flex-direction:column;gap:6px}
}

/* v28 — compact Matches + Search / Filters */
.tradeMatchesFilters{margin:0 0 12px}
#tradesMatchesGrid{gap:7px!important}
#tradesMatchesGrid .tradeMatchListRow{min-height:0!important;padding:10px 11px!important;grid-template-columns:minmax(0,1fr) 38px!important;gap:9px!important;border-radius:12px!important}
#tradesMatchesGrid .tradeMatchListRow__body>strong{font-size:13.5px!important}
#tradesMatchesGrid .tradeMatchListRow__body>small{margin-top:2px!important;font-size:10.5px!important}
#tradesMatchesGrid .tradeMatchCard__available{margin-top:7px!important;padding-top:7px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:7px!important}
#tradesMatchesGrid .tradeMatchCard__available>small{font-size:10.5px!important;white-space:nowrap}
#tradesMatchesGrid .tradeMatchCard__friendList{gap:5px!important}
#tradesMatchesGrid .tradeMatchCard__friend{min-height:26px!important;padding:4px 8px!important;border-radius:7px!important;font-size:10.5px!important}
#tradesMatchesGrid .tradeMatchListRow__preview{width:36px!important;height:36px!important;border-radius:9px!important}
.tradeMatchesFilters .tradeOfferFilters__top{margin:0}
.tradeMatchesFilters .passSelector__search{min-width:0}
.tradeMatchesFilters .tradeOfferFilters__panel{margin-top:8px}
@media(max-width:520px){
 #tradesMatchesGrid .tradeMatchCard__available{flex-direction:row!important;align-items:center!important;flex-wrap:wrap}
}


/* ============================================================
   v29 — Trade Bin fixed bottom navigation
   ============================================================ */
#tradeBinNav.bottomNav {
  position: fixed !important;
  z-index: 240 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding:
    7px max(8px, env(safe-area-inset-right))
    calc(7px + env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left)) !important;

  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 2px !important;

  background: rgba(18, 21, 27, .96) !important;
  border: 1px solid #2a303a !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#tradeBinNav .bottomNav__item {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 5px 2px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 11px !important;
  color: #8f99aa !important;
  text-align: center !important;
}

#tradeBinNav .bottomNav__item > span {
  width: auto !important;
  font-size: 20px !important;
  line-height: 1 !important;
  text-align: center !important;
}

#tradeBinNav .bottomNav__item > small {
  width: 100% !important;
  overflow: hidden;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: inherit !important;
  text-align: center !important;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#tradeBinNav .bottomNav__item--active {
  background: rgba(125, 73, 225, .13) !important;
  color: #b28cff !important;
}

#tradeBinNav .bottomNav__item--active::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28%;
  right: 28%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: #9a62ff;
  box-shadow: 0 0 10px rgba(154, 98, 255, .55);
}

/* Reserve room so the fixed bar never covers the last content. */
body:has(#tradeBinNav:not([hidden])) {
  padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 520px) {
  #tradeBinNav.bottomNav {
    width: 100% !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }

  #tradeBinNav .bottomNav__item {
    min-height: 56px !important;
  }

  #tradeBinNav .bottomNav__item > span {
    font-size: 19px !important;
  }

  #tradeBinNav .bottomNav__item > small {
    font-size: 9.5px !important;
  }
}

/* v30 — Trade Bin scope + Global Trades */
#tradeBinNav[hidden] { display: none !important; }
.tradesGlobalHint{
  margin:-4px 0 14px;
  color:rgba(255,255,255,.48);
  font-size:12px;
  line-height:1.45;
}
#tradesGlobalGrid{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
}
#tradesGlobalGrid .tradeMatchListRow{
  width:100%;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 38px!important;
  align-items:center;
  gap:9px!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px!important;
  background:rgba(255,255,255,.022);
}
#tradesGlobalGrid .tradeMatchListRow__body{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
#tradesGlobalGrid .tradeMatchListRow__body>strong{width:100%;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tradesGlobalGrid .tradeMatchListRow__body>small{margin-top:2px;color:rgba(255,255,255,.43);font-size:10.5px}
#tradesGlobalGrid .tradeMatchCard__available{width:100%;margin-top:7px;padding-top:7px;display:flex;align-items:center;gap:7px;border-top:1px solid rgba(255,255,255,.065)}
#tradesGlobalGrid .tradeMatchCard__available>small{flex:0 0 auto;color:rgba(255,255,255,.45);font-size:10.5px;white-space:nowrap}
#tradesGlobalGrid .tradeMatchCard__friendList{min-width:0;display:flex;flex-wrap:wrap;gap:5px}
#tradesGlobalGrid .tradeMatchCard__friend{min-height:26px;padding:4px 8px;border:1px solid rgba(73,164,255,.28);border-radius:7px;background:rgba(40,119,200,.10);color:#bdddff;font-size:10.5px;font-weight:800;cursor:pointer}
#tradesGlobalGrid .tradeMatchListRow__preview{width:36px;height:36px;padding:0;display:grid;place-items:center;border:1px solid rgba(80,164,255,.30);border-radius:9px;background:rgba(38,125,205,.14);font-size:16px;cursor:pointer}

/* v31 — Trade Center hierarchy */
.tradesNavV31{margin:18px 0 22px}
.tradesModeTabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:500px;margin:0 auto}
.tradesModeTab{min-height:58px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.025);color:#aeb9cc;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
.tradesModeTab.is-active{color:#fff;border-color:rgba(160,80,255,.75);background:rgba(130,50,220,.18)}
.tradesActivity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-width:500px;margin:9px auto 0}
.tradesActivity__item{min-width:0;min-height:38px;display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 7px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(255,255,255,.018);color:#8490a5;font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.tradesActivity__item.is-active{color:#eadcff;border-color:rgba(157,83,245,.45);background:rgba(132,58,218,.11)}
.tradesActivity__item b{min-width:19px;height:19px;padding:0 5px;display:inline-grid;place-items:center;border-radius:999px;background:#963cff;color:#fff;font-size:10px}
.tradesFriendsSubtabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 16px;padding:4px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.02)}
.tradesFriendsSubtab{min-height:36px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.48);font:inherit;font-size:12px;font-weight:850;cursor:pointer}
.tradesFriendsSubtab.is-active{background:rgba(145,70,235,.16);color:#fff}
@media(max-width:430px){.tradesModeTab{min-height:54px;font-size:14px}.tradesActivity__item{font-size:10px;padding-inline:4px}}

/* v32 — Trade Center subtitle + stable Friends sub-navigation */
#tradesPage .tradesHero p{
  max-width:560px;
  line-height:1.45;
}
#tradesFriendsModeNav[hidden]{display:none!important}
#tradesFriendsModeNav{
  max-width:500px;
  margin:0 auto 14px;
}

/* v33 — uniform Trade Center section headings */
#tradesPage .tradesPanel__heading h3,
#tradesPage #tradesMatchesPanel .tradesPanel__heading h3,
#tradesPage #tradesGlobalPanel .tradesPanel__heading h3,
#tradesPage #tradesIncomingPanel h3,
#tradesPage #tradesPendingPanel h3,
#tradesPage #tradesHistoryPanel h3 {
  margin: 4px 0 0 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

#tradesPage .tradesPanel__heading small,
#tradesPage #tradesMatchesPanel .tradesPanel__heading small,
#tradesPage #tradesGlobalPanel .tradesPanel__heading small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
}

/* ============================================================
   v34 — global Mini App typography hierarchy
   Keep page/section headings visually consistent everywhere.
   ============================================================ */

/* Primary page titles */
.page > h1,
#collectionPage h1,
#binderPage h1,
#friendsPage h1,
#tradesPage h1,
#favoritesPage h1,
#battlePassPage h1 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 30px !important;
  line-height: 1.10 !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
}

/* Main section titles — same rank across Collection/Binder/Friends/Trades/Favorites */
.page .tradesPanel__heading h3,
#tradesPage .tradesPanel__heading h3 {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

/* Eyebrow / uppercase labels that sit above a section heading */
.page .tradesPanel__heading small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

/* Consistent subtitle rhythm beneath top-level titles */
#collectionPage > p:first-of-type,
#binderPage > p:first-of-type,
#friendsPage > p:first-of-type,
#tradesPage .tradesHero p,
#favoritesPage > p:first-of-type {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Mobile keeps exactly the same hierarchy, only scales both ranks together. */
@media (max-width: 520px) {
  .page > h1,
#collectionPage h1,
#binderPage h1,
#friendsPage h1,
#tradesPage h1,
#favoritesPage h1,
#battlePassPage h1 {
    font-size: 28px !important;
  }

  .page .tradesPanel__heading h3,
#tradesPage .tradesPanel__heading h3 {
    font-size: 22px !important;
  }
}

/* ============================================================
   v35 — exact primary title normalization
   Collection / Binder / Friends / Trades / Favorites
   ============================================================ */
#collectionPage .sectionIntro__title,
#binderPage .sectionIntro__title,
#friendsPage .sectionIntro__title,
#tradesPage .sectionIntro__title,
#tradesPage .tradesHero h1,
#favoritesPage > h1,
#favoritesPage .sectionIntro__title {
  margin: 0 0 8px !important;
  font-size: 48px !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* Keep the five eyebrow labels consistent too. */
#collectionPage .sectionIntro__eyebrow,
#binderPage .sectionIntro__eyebrow,
#friendsPage .sectionIntro__eyebrow,
#tradesPage .sectionIntro__eyebrow,
#tradesPage .tradesHero small,
#favoritesPage .sectionIntro__eyebrow,
#favoritesPage > small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
}

/* And the introductory copy directly beneath them. */
#collectionPage .sectionIntro__subtitle,
#binderPage .sectionIntro__subtitle,
#friendsPage .sectionIntro__subtitle,
#tradesPage .sectionIntro__subtitle,
#tradesPage .tradesHero p,
#favoritesPage .sectionIntro__subtitle,
#favoritesPage > p {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

/* Same title size on mobile — no page-specific scaling differences. */
@media (max-width: 520px) {
  #collectionPage .sectionIntro__title,
  #binderPage .sectionIntro__title,
  #friendsPage .sectionIntro__title,
  #tradesPage .sectionIntro__title,
  #tradesPage .tradesHero h1,
  #favoritesPage > h1,
  #favoritesPage .sectionIntro__title {
    font-size: 42px !important;
  }
}

/* v36 — exact primary description normalization */
#collectionPage .sectionIntro__subtitle,
#binderPage .sectionIntro__subtitle,
#friendsPage .sectionIntro__subtitle,
#tradesPage .sectionIntro__subtitle,
#tradesPage .tradesHero p,
#favoritesPage .sectionIntro__subtitle,
#favoritesPage > p {
  margin: 0 !important;
  max-width: 620px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #9db7df !important;
}

/* If a page has more than one intro sentence, keep spacing consistent. */
#friendsPage .sectionIntro__subtitle + .sectionIntro__subtitle,
#favoritesPage > p + p {
  margin-top: 5px !important;
}

@media (max-width: 520px) {
  #collectionPage .sectionIntro__subtitle,
  #binderPage .sectionIntro__subtitle,
  #friendsPage .sectionIntro__subtitle,
  #tradesPage .sectionIntro__subtitle,
  #tradesPage .tradesHero p,
  #favoritesPage .sectionIntro__subtitle,
  #favoritesPage > p {
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}

/* v37 — Favorites Search + Filters */
.favoritesControls--v37{display:block!important}
.favoritesFilterTop{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.favoritesControls--v37 .favoritesSearch{margin:0!important;min-width:0}
.favoritesFiltersToggle{min-width:118px;padding:0 18px;border:1px solid rgba(160,80,255,.55);border-radius:15px;background:rgba(126,55,210,.16);color:#fff;font:inherit;font-weight:900;cursor:pointer}
.favoritesAdvancedFilters{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.favoritesAdvancedFilters[hidden]{display:none!important}
.favoritesAdvancedFilters select{min-width:0;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#171a21;color:#fff;font:inherit;font-size:12px;font-weight:750}
.favoritesResultSummary{margin:9px 2px 0;color:rgba(255,255,255,.45);font-size:11px;font-weight:700}
@media(max-width:520px){
 .favoritesFilterTop{grid-template-columns:minmax(0,1fr) 104px;gap:7px}
 .favoritesFiltersToggle{min-width:0;padding:0 10px}
 .favoritesAdvancedFilters{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/*
 * Tag by horse: bottone nel Binder e schermata a tutto schermo.
 * Colori presi dal pannello del Binder: viola del bordo, verde For Trade,
 * blu Need x1, rosso Need x10.
 */
.binderHorseTagsOpen {
  width: 100%;
  margin-top: 12px;
  min-height: 58px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(126, 67, 239, 0.75);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(52, 26, 104, 0.55), rgba(14, 22, 44, 0.9));
  color: #f5f8ff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.binderHorseTagsOpen[hidden] { display: none; }
.binderHorseTagsOpen:active { transform: scale(0.99); }
.binderHorseTagsOpen:focus-visible { outline: 2px solid #b891ff; outline-offset: 2px; }
.binderHorseTagsOpen__icon { font-size: 24px; line-height: 1; }
.binderHorseTagsOpen__text strong { display: block; font-size: 15px; font-weight: 800; }
.binderHorseTagsOpen__text small { display: block; margin-top: 2px; color: #a9b7d0; font-size: 12px; }
.binderHorseTagsOpen__arrow { color: #b891ff; font-size: 26px; line-height: 1; }

body.horseTags-open { overflow: hidden; }

.horseTags {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: rgba(3, 6, 14, 0.72);
}
.horseTags[hidden] { display: none; }

.horseTags__sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: min(92vh, 100%);
  display: flex;
  flex-direction: column;
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border: 1px solid #7e43ef;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(160deg, #0d1c32, #070f1c 70%);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  color: #f5f8ff;
  animation: horseTagsUp 0.22s ease-out;
}
@keyframes horseTagsUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .horseTags__sheet { animation: none; }
}

.horseTags__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.horseTags__title { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.1; }
.horseTags__subtitle { margin: 4px 0 0; color: #a9b7d0; font-size: 13px; }
.horseTags__close {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #f5f8ff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.horseTags__legend {
  display: grid;
  gap: 6px;
  margin: 14px 0 12px;
  color: #c3cee2;
  font-size: 12px;
}
.horseTags__legend span { display: flex; align-items: center; gap: 8px; }
.horseTags__chip {
  flex: 0 0 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 13px;
}
.horseTags__chip--trade { background: rgba(36, 223, 186, 0.16); }
.horseTags__chip--need { background: rgba(50, 164, 255, 0.16); }

.horseTags__option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(17, 26, 38, 0.92);
  cursor: pointer;
}
.horseTags__optionInput {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.horseTags__switch {
  position: relative;
  flex: 0 0 44px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.15s ease;
}
.horseTags__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5f8ff;
  transition: transform 0.15s ease;
}
.horseTags__optionInput:checked + .horseTags__switch { background: #7e43ef; }
.horseTags__optionInput:checked + .horseTags__switch::after { transform: translateX(18px); }
.horseTags__optionInput:focus-visible + .horseTags__switch { outline: 2px solid #b891ff; outline-offset: 2px; }
.horseTags__optionInput:disabled + .horseTags__switch { opacity: 0.5; }
.horseTags__optionText strong { display: block; font-size: 14px; font-weight: 800; }
.horseTags__optionText small { display: block; margin-top: 2px; color: #8fa8c8; font-size: 12px; }
@media (prefers-reduced-motion: reduce) {
  .horseTags__switch, .horseTags__switch::after { transition: none; }
}

.horseTags__letters {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.horseTags__letter {
  min-height: 36px;
  border: 1px solid rgba(126, 67, 239, 0.45);
  border-radius: 10px;
  background: rgba(18, 28, 50, 0.9);
  color: #f5f8ff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.horseTags__letter:disabled { opacity: 0.25; cursor: default; }
.horseTags__letter.is-active {
  border-color: #b891ff;
  background: #7e43ef;
  box-shadow: 0 0 16px rgba(126, 67, 239, 0.45);
}
.horseTags__letter:focus-visible,
.horseTags__toggle:focus-visible,
.horseTags__close:focus-visible { outline: 2px solid #b891ff; outline-offset: 2px; }

.horseTags__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 2px 4px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.horseTags__empty { margin: 24px 0; color: #8fa8c8; text-align: center; font-size: 14px; }

.horseTags__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(17, 26, 38, 0.92);
}
.horseTags__row.is-busy { opacity: 0.6; }
.horseTags__info { min-width: 0; }
.horseTags__info strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 800;
}
.horseTags__info small {
  display: block;
  margin-top: 3px;
  color: #8fa8c8;
  font-size: 11px;
  line-height: 1.35;
}

.horseTags__toggle {
  height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #c3cee2;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.horseTags__toggle span { font-size: 20px; line-height: 1; }
.horseTags__toggle small { font-size: 10px; font-weight: 900; }
.horseTags__toggle:active { transform: scale(0.96); }
.horseTags__toggle:disabled { cursor: wait; }
.horseTags__toggle--trade.is-off span,
.horseTags__toggle--need.is-off span { filter: grayscale(1); opacity: 0.55; }





.horseTags__notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(184, 145, 255, 0.4);
  border-radius: 12px;
  background: rgba(52, 26, 104, 0.55);
  color: #ece4ff;
  font-size: 13px;
}
.horseTags__notice[hidden] { display: none; }


/* Tag by event: nome dell'evento sopra, quattro bottoni sotto. */
.eventTags__row { grid-template-columns: minmax(0, 1fr); }
.eventTags__buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.eventTags__button { height: 46px; }
.eventTags__button span { font-size: 17px; }
.eventTags__button.is-locked { opacity: 0.45; }
/* Acceso: stessi colori del Binder (Need x1 blu, Need x10 rosso,
   For Trade verde). */
.eventTags__button--need1.is-lit {
  border-color: #32a4ff;
  background: linear-gradient(135deg, rgba(8, 49, 96, 0.9), rgba(7, 28, 59, 0.9));
  color: #9fd1ff;
  box-shadow: 0 0 14px rgba(50, 164, 255, 0.28);
}
.eventTags__button--need10.is-lit {
  border-color: #ff4c67;
  background: linear-gradient(135deg, rgba(89, 9, 28, 0.9), rgba(42, 8, 22, 0.9));
  color: #ffadb9;
  box-shadow: 0 0 14px rgba(255, 76, 103, 0.3);
}
.eventTags__button--trade.is-lit,
.eventTags__button--trade_all.is-lit {
  border-color: #24dfba;
  background: linear-gradient(135deg, rgba(3, 78, 69, 0.9), rgba(4, 42, 40, 0.9));
  color: #7ff3d6;
  box-shadow: 0 0 14px rgba(36, 223, 186, 0.28);
}
/* Offerte in arrivo: riga con le proprie copie sotto il nome della carta. */
.tradeIncoming__level {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}
.tradeIncoming__level b {
  color: #fff;
  font-weight: 800;
}
.tradeIncoming__chip {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.tradeIncoming__chip--warn {
  border: 1px solid rgba(255, 92, 92, 0.55);
  background: rgba(255, 92, 92, 0.16);
  color: #ff9a9a;
}
.tradeIncoming__chip--new {
  border: 1px solid rgba(80, 200, 120, 0.5);
  background: rgba(80, 200, 120, 0.14);
  color: #8fe3ac;
}
@media (max-width: 560px) {
  .tradeIncoming__level {
    grid-column: 1;
  }
}

/* Offerte inviate: miniatura della carta al posto della lente, dentro i
   riquadri rosso e verde. La posizione (a destra, centrata in verticale)
   resta quella del vecchio tasto. */
.tradePending__card {
  min-height: 72px;
  padding-right: 66px;
}
.tradePending__card .tradePending__thumb {
  right: 8px;
  width: 44px;
  height: 56px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px;
}
.tradePending__card--give .tradePending__thumb {
  border-color: rgba(255, 110, 110, 0.6);
}
.tradePending__card--receive .tradePending__thumb {
  border-color: rgba(95, 214, 130, 0.6);
}
.tradePending__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cronologia: tasto per svuotarla (solo per chi lo preme). */
.tradesHistoryClear {
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(255, 92, 92, 0.5);
  border-radius: 11px;
  background: rgba(214, 48, 49, 0.14);
  color: #ff9a9a;
  font-size: 14px;
  font-weight: 850;
}
.tradesHistoryClear:disabled {
  opacity: 0.6;
}

/* Offerte inviate: tasto per ritirare l'offerta. */
.tradePending__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.tradePending__revoke {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(255, 92, 92, 0.6);
  border-radius: 11px;
  background: rgba(214, 48, 49, 0.88);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
}
.tradePending__revoke:disabled {
  opacity: 0.6;
}
/* Su schermi stretti la freccia tra le due carte è ruotata di 90°: la sua
   area, invisibile, diventa una striscia verticale che arriva sopra il
   centro del tasto Revoke e ne intercettava il tocco. */
.tradePending__arrow {
  pointer-events: none;
}
.tradePending.is-processing {
  opacity: 0.72;
  pointer-events: none;
}
@media (max-width: 650px) {
  .tradePending__actions {
    justify-content: stretch;
  }
  .tradePending__revoke {
    width: 100%;
  }
}

/* ============================================================
   OPTIONS (Hub → Options)
   ============================================================ */
.hubCard--options {
  border-color: #3a4656;
  background: linear-gradient(145deg, #151a21, #0f1318);
}
.optionsHeader {
  margin: 4px 0 18px;
}
.optionsHeader .hubSectionBack {
  margin-bottom: 16px;
}
/* Stessa intestazione del Market. */
.optionsHeader .sectionIntro__eyebrow {
  margin: 0 0 7px;
  color: #8066ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.17em;
  line-height: 1;
}
.optionsHeader h1 {
  margin: 0 !important;
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-size: clamp(34px, 10vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 0.98 !important;
  letter-spacing: 0.005em !important;
}
.optionsHeader p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.35;
}
.optionsCard {
  margin-bottom: 12px;
  padding: 16px;
  border: 1px solid #283545;
  border-radius: 16px;
  background: linear-gradient(145deg, #121a23, #0d131a);
}
.optionsCard__title {
  color: #5da9ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}
.optionsCard__text {
  margin: 8px 0 0;
  color: #c4cedb;
  font-size: 13px;
  line-height: 1.45;
}
.optionsCard__text--muted {
  color: #8995a3;
  font-size: 12px;
}
.optionsCard__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.optionsCard__copy {
  min-width: 0;
}
.optionsSegment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.optionsSegment button {
  min-height: 44px;
  border: 1px solid #2f3d4e;
  border-radius: 12px;
  background: #0b1117;
  color: #9fb0c3;
  font-size: 14px;
  font-weight: 800;
}
.optionsSegment button.is-active {
  border-color: #4d9cf2;
  background: #17375a;
  color: #fff;
}
.optionsSwitch {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 30px;
  margin-top: 2px;
}
.optionsSwitch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.optionsSwitch span {
  position: absolute;
  inset: 0;
  border: 1px solid #344052;
  border-radius: 999px;
  background: #1a2028;
  transition: background 0.18s, border-color 0.18s;
  pointer-events: none;
}
.optionsSwitch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #8995a3;
  transition: transform 0.18s, background 0.18s;
}
.optionsSwitch input:checked + span {
  border-color: #c9772f;
  background: #6b3d14;
}
.optionsSwitch input:checked + span::after {
  transform: translateX(22px);
  background: #ffb35c;
}
.optionsSwitch input:disabled + span {
  opacity: 0.55;
}
.optionsSwitch input:focus-visible + span {
  outline: 2px solid #5da9ff;
  outline-offset: 2px;
}
.optionsMessage {
  min-height: 18px;
  margin: 4px 4px 0;
  color: #8fe3ac;
  font-size: 13px;
}
.optionsMessage--error {
  color: #ff9a9a;
}

/* Il filtro eventi della Collection restava più stretto della sua colonna
   e tagliava il testo scelto ("Tutti gli eventi", o il nome di un evento). */
#cavallinePage .collectionCompactFilters > #waifuEventFilter {
  justify-self: stretch;
  width: 100% !important;
  max-width: none !important;
}

/* Testi scritti nel CSS: i18n.js non può tradurli, lo fa questa regola
   quando la pagina è in italiano (<html lang="it">). */
html[lang="it"] #cavallinePage .collectionSearchExamples::before {
  content: "PROVA:" !important;
}
html[lang="it"] #friendsPage .friendsHeader__count::after {
  content: "AMICI" !important;
}

/* ================================================================
   MOTION — animazioni della Mini App
   ----------------------------------------------------------------
   Gli ingressi delle schermate e delle liste li fa motion.js. Qui c'è
   quello che basta il CSS a fare: comparsa di fogli e anteprime, barra
   in basso, risposta al tocco.

   Tutto dipende da "html.motion-on", la classe che motion.js mette
   solo se le animazioni sono attive: con "riduci movimento" acceso
   nel sistema (o senza motion.js) qui dentro non si muove nulla.

   Si usano translate / scale / rotate e non "transform", così le
   trasformazioni già presenti sugli elementi restano intatte.
   ================================================================ */

@keyframes motionFade {
  from { opacity: 0; }
}

@keyframes motionSheetUp {
  from { opacity: 0; translate: 0 32px; }
}

@keyframes motionPop {
  from { opacity: 0; scale: 0.92; }
}

@keyframes motionZoom {
  from { opacity: 0; scale: 0.84; }
}

@keyframes motionNavUp {
  from { opacity: 0; translate: 0 100%; }
}

@keyframes motionNavBounce {
  40% { scale: 1.26; translate: 0 -3px; }
}

/* Mentre le schede scorrono di lato i blocchi sporgono di qualche pixel:
   per quell'attimo la pagina non deve potersi trascinare in orizzontale. */




/* --- Barra in basso del Trade Hub ------------------------------- */

html.motion-on .bottomNav:not([hidden]) {
  animation: motionNavUp 0.34s cubic-bezier(.2, .8, .2, 1) backwards;
}

html.motion-on .bottomNav__item--active > span {
  animation: motionNavBounce 0.42s cubic-bezier(.3, 1.35, .5, 1);
}

/* --- Risposta al tocco ------------------------------------------ */

html.motion-on .hubCard,
html.motion-on .hubSectionBack,
html.motion-on .tradeBinBack,
html.motion-on .bottomNav__item,
html.motion-on .marketTab,
html.motion-on .binderTab,
html.motion-on .tradesActivity__item,
html.motion-on .tradesFriendsSubtab,
html.motion-on .tradesModeTabs > button,
html.motion-on .optionsSegment > button {
  transition:
    scale 0.16s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

html.motion-on .hubCard:active,
html.motion-on .hubSectionBack:active,
html.motion-on .tradeBinBack:active,
html.motion-on .marketTab:active,
html.motion-on .binderTab:active,
html.motion-on .tradesActivity__item:active,
html.motion-on .tradesFriendsSubtab:active,
html.motion-on .tradesModeTabs > button:active,
html.motion-on .optionsSegment > button:active {
  scale: 0.97;
}

html.motion-on .bottomNav__item:active {
  scale: 0.92;
}

html.motion-on .hubCard__arrow {
  transition: translate 0.18s ease;
}

html.motion-on .hubCard:active .hubCard__arrow {
  translate: 4px 0;
}

/* --- Fogli che salgono dal basso -------------------------------- */

html.motion-on .wheelSelector:not([hidden]) .wheelSelector__sheet,
html.motion-on .wheelRatesModal:not([hidden]) .wheelRatesModal__sheet,
html.motion-on .passSelector:not([hidden]) .passSelector__sheet,
html.motion-on .tradeConfirm:not([hidden]) .tradeConfirm__sheet {
  animation: motionSheetUp 0.28s cubic-bezier(.2, .8, .2, 1) backwards;
}

html.motion-on .waifuDetail--open .waifuDetail__backdrop,
html.motion-on .wheelSelector:not([hidden]) .wheelSelector__backdrop,
html.motion-on .wheelRatesModal:not([hidden]) .wheelRatesModal__backdrop,
html.motion-on .passSelector:not([hidden]) .passSelector__backdrop,
html.motion-on .tradeConfirm:not([hidden]) .tradeConfirm__backdrop {
  animation: motionFade 0.22s ease-out backwards;
}

/* --- Finestre al centro ----------------------------------------- */

html.motion-on .friendDetailOverlay--open {
  animation: motionFade 0.2s ease-out backwards;
}

html.motion-on .friendDetailOverlay--open .friendDetail {
  animation: motionPop 0.26s cubic-bezier(.3, 1.35, .5, 1) backwards;
}

/* --- Anteprime a schermo intero --------------------------------- */

html.motion-on .waifuImageViewer:not([hidden]),
html.motion-on .tradeImageViewer:not([hidden]),
html.motion-on .tradeMatchPreviewOverlay {
  animation: motionFade 0.18s ease-out backwards;
}

html.motion-on .waifuImageViewer:not([hidden]) .waifuImageViewer__image,
html.motion-on .tradeImageViewer:not([hidden]) .tradeImageViewer__image,
html.motion-on .tradeMatchPreviewOverlay img {
  animation: motionZoom 0.28s cubic-bezier(.2, .8, .2, 1) backwards;
}

/* Finestre di dialogo (app.js, appDialog): tutti gli avvisi e le
   conferme della Mini App. Stanno sopra a tutto. */
@keyframes appDialogOut {
  to { opacity: 0; }
}

@keyframes appDialogBoxOut {
  to { opacity: 0; scale: 0.96; }
}

.appDialog {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(3, 6, 14, 0.78);
  /* La pagina sotto non deve scorrere mentre la finestra è aperta. */
  overscroll-behavior: contain;
  touch-action: none;
}

.appDialog__box {
  width: min(100%, 360px);
  max-height: 82vh;
  overflow-y: auto;
  touch-action: pan-y;
  padding: 20px 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #11131b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  color: #fff;
}

.appDialog__title {
  margin: 0 0 10px;
  color: #9f8bff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.appDialog__text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.appDialog__actions {
  display: flex;
  gap: 10px;
}

.appDialog__button {
  flex: 1;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.appDialog__button--ok {
  border-color: rgba(128, 102, 255, 0.7);
  background: linear-gradient(90deg, #2f6bff, #9b3dff);
}

.appDialog__button--cancel {
  color: rgba(255, 255, 255, 0.82);
}

html.motion-on .appDialog {
  animation: motionFade 0.2s ease-out backwards;
}

html.motion-on .appDialog__box {
  animation: motionPop 0.26s cubic-bezier(.3, 1.35, .5, 1) backwards;
}

html.motion-on .appDialog__button {
  transition: scale 0.14s ease;
}

html.motion-on .appDialog__button:active {
  scale: 0.97;
}

html.motion-on .appDialog--closing {
  animation: appDialogOut 0.16s ease-in forwards;
  pointer-events: none;
}

html.motion-on .appDialog--closing .appDialog__box {
  animation: appDialogBoxOut 0.16s ease-in forwards;
}

/* L'attributo hidden deve sempre nascondere l'elemento. Senza questa regola
   qualsiasi "display" impostato da una classe lo annullava: i badge
   Incoming/Pending/History mostravano "0" e le carte Standard la riga
   "Wave 0". */
[hidden] { display: none !important; }


/* Selezione della carta da offrire: copie già usate in offerte in attesa
   (livello congelato), tag giallo sotto il nome. */
.tradeOfferListRow__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.tradeOfferListRow__left {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 76, 103, 0.85);
  border-radius: 999px;
  background: rgba(70, 8, 22, 0.88);
  color: #ffadb9;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255, 76, 103, 0.2);
}
.tradeOfferListRow__frozen {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 214, 0, 0.85);
  border-radius: 999px;
  background: rgba(58, 45, 0, 0.88);
  color: #ffe066;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 0 10px rgba(255, 214, 0, 0.2);
}

/* Carta senza copie libere (tutte usate in offerte in attesa): in grigio,
   al tocco mostra un avviso. Il bottone di anteprima resta attivo. */
.tradeOfferListRow--exhausted { opacity: 0.55; filter: grayscale(0.6); }
.tradeOfferListRow--exhausted .tradeOfferListRow__frozen,
.tradeOfferListRow--exhausted .tradeOfferListRow__left { filter: none; }

/* 1-CLICK SMART AUTO-SEARCH (Trade Center → Global) */
.tradeAutoSearch {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 214, 0, 0.75);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(92, 64, 0, 0.92), rgba(48, 22, 92, 0.92));
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 214, 0, 0.22);
}
.tradeAutoSearch[hidden] { display: none; }
.tradeAutoSearch:active { transform: scale(0.99); }
.tradeAutoSearch:disabled { cursor: wait; opacity: 0.7; }
.tradeAutoSearch.is-unavailable { opacity: 0.5; filter: grayscale(0.7); box-shadow: none; }
.tradeAutoSearch__icon { font-size: 26px; line-height: 1; }
.tradeAutoSearch__text strong { display: block; font-size: 14px; font-weight: 900; letter-spacing: 0.03em; color: #ffe066; }
.tradeAutoSearch__text small { display: block; margin-top: 3px; font-size: 12px; color: #d8cff5; }
.tradePending__revoke.is-locked { opacity: 0.55; filter: grayscale(0.8); }

/* ACCEPT ALL / DECLINE ALL (offerte in arrivo) */
.tradesBulkActions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 12px; }
.tradesBulkActions[hidden] { display: none; }
.tradesBulkActions button {
  padding: 12px 10px;
  border-radius: 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
}
.tradesBulkActions button:disabled { opacity: 0.5; cursor: wait; }
.tradesBulkActions__accept { border: 1px solid #24dfba; background: linear-gradient(135deg, rgba(3, 78, 69, 0.95), rgba(4, 42, 40, 0.95)); }
.tradesBulkActions__decline { border: 1px solid #ff4c67; background: linear-gradient(135deg, rgba(89, 9, 28, 0.95), rgba(42, 8, 22, 0.95)); }

/* Finestre di conferma con testo lungo (es. Accept all): il titolo e i
   bottoni Conferma/Annulla restano sempre visibili, scorre solo il testo.
   La sfumatura in fondo al testo fa capire che c'è altro da leggere. */
.appDialog__box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.appDialog__title,
.appDialog__actions { flex: 0 0 auto; }
.appDialog__text {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.appDialog__text.is-scrollable:not(.is-at-end) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
.tradesBulkActions.is-empty button { opacity: 0.45; filter: grayscale(0.8); }

/* Righe critiche nelle finestre di conferma (iniziano con ⚠️): in rosso. */
.appDialog__danger { color: #ff6b81; font-weight: 800; }

/* Scadenza delle offerte (7 giorni) */
.tradeExpiry { margin: 8px 0 2px; font-size: 12px; font-weight: 700; color: #a9b7d0; }
.tradeExpiry.is-urgent { color: #ff6b81; font-weight: 800; }

/* Cronologia: com'è finita ogni offerta */
.tradeHistory__outcome { display: inline-block; margin: 2px 0 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; border: 1px solid rgba(255,255,255,0.18); color: #c3cee2; }
.tradeHistory__outcome--accepted { border-color: #24dfba; color: #7ff3d6; }
.tradeHistory__outcome--declined, .tradeHistory__outcome--invalidated { border-color: #ff4c67; color: #ffadb9; }
.tradeHistory__outcome--expired, .tradeHistory__outcome--revoked { border-color: #ffd600; color: #ffe066; }
.tradeHistory:not(.tradeHistory--accepted) .tradeHistory__pendingCards { opacity: 0.7; }
.tradesBulkActions__new { grid-column: 1 / -1; border: 1px solid #32a4ff; background: linear-gradient(135deg, rgba(8, 49, 96, 0.95), rgba(7, 28, 59, 0.95)); }
.tradesBulkActions__new.is-unavailable { opacity: 0.45; filter: grayscale(0.8); }



/* Avviso nella schermata principale: offerte di scambio in arrivo */
.hubNotice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(50, 164, 255, 0.75);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(8, 49, 96, 0.92), rgba(30, 18, 70, 0.92));
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(50, 164, 255, 0.22);
}
.hubNotice[hidden] { display: none; }
.hubNotice.is-urgent { border-color: #ff4c67; box-shadow: 0 0 16px rgba(255, 76, 103, 0.25); }
.hubNotice__icon { font-size: 24px; line-height: 1; }
.hubNotice__text { flex: 1; min-width: 0; }
.hubNotice__text strong { display: block; font-size: 14px; font-weight: 900; }
.hubNotice__text small { display: block; margin-top: 3px; font-size: 12px; color: #c9d6ee; }
.hubNotice.is-urgent .hubNotice__text small { color: #ffadb9; font-weight: 700; }
.hubNotice__arrow { font-size: 24px; color: #9fd1ff; }

/* Offerte in arrivo: miniatura piccola di ogni carta a destra della riga
   (stessa grandezza delle offerte inviate), il testo non ci passa sotto. */
.tradeIncoming__line { position: relative; padding-right: 56px; min-height: 58px; }
.tradeIncoming__line .tradePending__thumb {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 16px;
  cursor: zoom-in;
}
.tradeIncoming__line--give .tradePending__thumb { border-color: rgba(255, 110, 110, 0.6); }
.tradeIncoming__line--receive .tradePending__thumb { border-color: rgba(95, 214, 130, 0.6); }

/* Miniature nelle liste Trade (Matches, Global, selezione offerta) e
   contenimento dell'immagine dentro il riquadro della tile. */
.tradePending__thumb {
  position: relative;
  overflow: hidden;
  padding: 0;
}
.tradePending__thumb img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}
#tradesMatchesGrid .tradeMatchListRow,
#tradesGlobalGrid .tradeMatchListRow {
  grid-template-columns: minmax(0, 1fr) 44px !important;
}
.tradeMatchListRow__preview.tradePending__thumb,
.tradeOfferListRow__preview.tradePending__thumb,
#tradesMatchesGrid .tradeMatchListRow__preview.tradePending__thumb,
#tradesGlobalGrid .tradeMatchListRow__preview.tradePending__thumb {
  position: relative;
  flex: 0 0 42px;
  width: 42px !important;
  height: 54px !important;
  padding: 0;
  overflow: hidden;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.35);
}

/* Offerte in arrivo: senza la lente (ci sono le miniature), Accetta e
   Rifiuta occupano tutta la riga. */
.tradeIncoming__actions { grid-template-columns: 1fr 1fr; }

/* Offerte in arrivo: Rifiuta in rosso (Accetta resta verde). */
.tradeIncoming__actions .decline {
  background: rgba(196, 38, 62, 0.88);
  border-color: rgba(255, 92, 112, 0.7);
  color: #fff;
}

/* 📊 Progresso per evento (collezione) */
.eventProgress__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 145, 255, 0.35);
  border-radius: 12px;
  background: rgba(52, 26, 104, 0.3);
  color: #e3d9ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.eventProgress__toggle b { margin-left: auto; transition: transform 0.15s ease; }
.eventProgress__toggle.is-open b { transform: rotate(180deg); }
.eventProgress__list { display: grid; gap: 8px; margin-top: 10px; color: #a9b7d0; font-size: 13px; }
.eventProgress__list[hidden] { display: none; }
.eventProgress__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.eventProgress__name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eventProgress__count { font-size: 12px; font-weight: 800; color: #c9d6ee; }
.eventProgress__track { grid-column: 1 / -1; height: 7px; border-radius: 999px; background: #202b37; overflow: hidden; }
.eventProgress__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4c8dff, #805dff); }
.eventProgress__row.is-complete .eventProgress__track span { background: linear-gradient(90deg, #24dfba, #2ea043); }
.eventProgress__missing { grid-column: 1 / -1; font-size: 11px; color: #8fa8c8; }

/* Match con un amico: livello della sua carta e avviso quando le
   richieste in attesa arrivano alle sue copie libere. */
.tradeOfferListRow__level {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(184, 146, 255, 0.75);
  border-radius: 999px;
  background: rgba(40, 22, 70, 0.88);
  color: #d9c7ff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}
.tradeOfferListRow__risk,
.tradeMatchListRow__body .tradeOfferListRow__risk {
  opacity: 1;
  display: block;
  margin-top: 5px;
  color: #ffb36b;
  font-size: 11px;
  line-height: 1.35;
}
.tradeOfferListRow__risk--blocked { color: #ff7a8c; font-weight: 700; }

/* Previsione dei livelli (offerte in attesa comprese) */
.tradeForecast {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
  color: #8fd3ff;
}
.tradeForecast b { font-weight: 800; }
.tradeForecast small { opacity: 0.8; font-size: 10.5px; }
.tradeForecast.is-max { color: #ff7a8c; }
.tradeMatchListRow--blocked { opacity: 0.55; filter: grayscale(0.6); }
.tradeMatchListRow--blocked .tradeForecast { filter: none; }
.tradeConfirm__forecast { color: #8fd3ff; }

/* 📦 Copie extra: grigio quando non ce ne sono */
#binderSparesOpen.is-empty { opacity: 0.6; }
#binderSparesOpen[hidden], #binderShareOpen[hidden] { display: none; }

/* Binder: due tasti (Filtri / Strumenti) al posto della lista di voci */
.binderPanelsBar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.binderPanelsBar.is-single { grid-template-columns: 1fr; }
.binderPanelsBar__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(184, 145, 255, 0.45);
  border-radius: 14px;
  background: rgba(52, 26, 104, 0.35);
  color: #ece4ff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.binderPanelsBar__btn[hidden] { display: none; }
.binderPanelsBar__btn.is-open { border-color: #b891ff; background: rgba(126, 67, 239, 0.45); }
.binderPanel { margin-top: 10px; }
.binderPanel[hidden] { display: none; }
.binderPanel--tools { display: grid; gap: 10px; }
.binderPanel--tools[hidden] { display: none; }
.binderPanel .binderListFilters { margin-top: 0; }

/* Binder: filtri attivi come etichette con la ✕ */
.binderFilterChips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.binderFilterChips[hidden] { display: none; }
.binderFilterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid rgba(255, 214, 0, 0.55);
  border-radius: 999px;
  background: rgba(255, 214, 0, 0.12);
  color: #ffe873;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.binderFilterChip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binderFilterChip b { font-size: 11px; opacity: 0.85; }

/* Binder: barra piccola fissa in alto quando i tasti escono dallo schermo */
.binderFloatingBar {
  position: fixed;
  top: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px) + 8px);
  left: 50%;
  z-index: 300;
  width: min(520px, calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 46px 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(184, 145, 255, 0.45);
  border-radius: 16px;
  background: rgba(20, 10, 40, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.binderFloatingBar.is-single { grid-template-columns: 46px 1fr; }
.binderFloatingBar[hidden], .binderFloatingBar button[hidden] { display: none; }
.binderFloatingBar button {
  min-height: 38px;
  border: 1px solid rgba(184, 145, 255, 0.35);
  border-radius: 11px;
  background: rgba(52, 26, 104, 0.5);
  color: #ece4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.binderFloatingBar [data-float="search"] { font-size: 18px; }

/* Binder: avviso con Annulla dopo un tag di gruppo */
.binderUndoToast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 18px);
  z-index: 100005;
  width: min(520px, calc(100% - 32px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(184, 145, 255, 0.5);
  border-radius: 14px;
  background: #1d1236;
  color: #ece4ff;
  font-size: 13px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}
.binderUndoToast[hidden] { display: none; }
.binderUndoToast__text { flex: 1; min-width: 0; white-space: pre-line; }
.binderUndoToast__btn {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #ffd600;
  color: #1a1200;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.binderUndoToast__btn[hidden] { display: none; }
.binderUndoToast__btn:disabled { opacity: 0.6; }

/* Binder: selezione multipla */
#binderGrid .waifuCard, #waifuGrid .waifuCard { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.waifuGrid.is-selecting .waifuCard { position: relative; opacity: 0.55; transition: opacity 0.15s; }
.waifuGrid.is-selecting .waifuCard.is-selected { opacity: 1; outline: 3px solid #ffd600; outline-offset: 2px; }
.waifuGrid.is-selecting .waifuCard::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45) !important;
}
.waifuGrid.is-selecting .waifuCard.is-selected::after {
  content: "✓";
  display: grid;
  place-items: center;
  border-color: #ffd600 !important;
  background: #ffd600 !important;
  color: #1a1200;
  font-size: 15px;
  font-weight: 900;
}
body.cardsSelecting .binderFloatingBar { display: none; }
body.cardsSelecting .waifuGrid.is-selecting { padding-bottom: 150px; }

.binderSelectBar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 12px);
  z-index: 350;
  width: min(520px, calc(100% - 24px));
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(184, 145, 255, 0.55);
  border-radius: 18px;
  background: rgba(20, 10, 40, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6);
}
.binderSelectBar[hidden] { display: none; }
.binderSelectBar__head { display: flex; align-items: center; gap: 8px; }
.binderSelectBar__count { flex: 1; min-width: 0; color: #ece4ff; font-size: 14px; }
.binderSelectBar button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(184, 145, 255, 0.4);
  border-radius: 11px;
  background: rgba(52, 26, 104, 0.55);
  color: #ece4ff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.binderSelectBar [data-select="close"] { width: 38px; padding: 0; }
.binderSelectBar__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.binderSelectBar__actions button { padding: 0 4px; font-size: 12px; }
.binderSelectBar__actions [data-status="need1"] { border-color: #3d8bff; }
.binderSelectBar__actions [data-status="need10"] { border-color: #ff4d6d; }
.binderSelectBar__actions [data-status="trade"] { border-color: #2fd4a3; }
.binderSelectBar__actions .is-danger { border-color: #ff6b6b; background: rgba(120, 20, 30, 0.5); color: #ffb3b3; }
.binderSelectBar__actions .is-off { opacity: 0.45; }
.binderSelectBar__actions button:disabled { opacity: 0.4; }

/* Collezione: bottone "Seleziona" accanto alla vista */
.collectionSelectOpen {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(184, 145, 255, 0.45);
  border-radius: 10px;
  background: rgba(52, 26, 104, 0.35);
  color: #ece4ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.collectionSelectOpen[hidden] { display: none; }
body.cardsSelecting .collectionSelectOpen { border-color: #ffd600; color: #ffe873; }
/* In selezione il cerchio della scelta prende il posto del badge evento */
.waifuGrid.is-selecting .waifuCard__special { visibility: hidden; }

/* Collezione: vista lista (miniatura, nome, Rara/Comune e Standard/evento) */
#cavallinePage #waifuGrid.tradeBinListView {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard {
  display: grid !important;
  grid-template-columns: 58px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 8px 12px 8px 8px !important;
  border-radius: 14px !important;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__image {
  width: 58px !important;
  height: 76px !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  cursor: zoom-in;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__placeholder { font-size: 26px !important; }
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__id,
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__special { display: none !important; }
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__body {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
  min-width: 0 !important;
  padding: 0 !important;
}
/* a capo tra la riga del nome e quella dei tag */
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__body::before {
  content: "";
  order: 4;
  flex-basis: 100%;
  height: 0;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__meta,
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__footer { display: contents !important; }
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__title {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__version {
  order: 2;
  margin: 0 !important;
  font-size: 11px !important;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__level {
  order: 3;
  margin-left: auto !important;
  font-size: 12px !important;
}
#cavallinePage #waifuGrid.tradeBinListView .rarityBadge { order: 5; }
#cavallinePage #waifuGrid.tradeBinListView .waifuTypeBadge { order: 6; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cavallinePage #waifuGrid.tradeBinListView .rarityBadge,
#cavallinePage #waifuGrid.tradeBinListView .waifuTypeBadge {
  padding: 3px 8px !important;
  font-size: 10px !important;
}
/* in lista la spunta sta sull'angolo della miniatura */
#cavallinePage #waifuGrid.tradeBinListView.is-selecting .waifuCard::after { top: 4px; right: auto; left: 46px; }

/* Avviso "non sono riuscito a caricare" con Riprova */
.loadErrorBox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(255, 107, 107, 0.55);
  border-radius: 14px;
  background: rgba(120, 20, 30, 0.35);
  color: #ffd6d6;
  font-size: 13px;
  line-height: 1.35;
}
.loadErrorBox[hidden] { display: none; }
.loadErrorBox__icon { flex: 0 0 auto; font-size: 18px; }
.loadErrorBox__text { flex: 1; min-width: 0; }
.loadErrorBox__retry {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #ff6b6b;
  color: #2a0006;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.loadErrorBox__retry:disabled { opacity: 0.6; }

/* Barra "sei offline" */
.offlineBanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100020;
  padding: calc(var(--tg-safe-area-inset-top, 0px) + 8px) 16px 8px;
  background: #b3261e;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.offlineBanner[hidden] { display: none; }

/* Prestazioni con liste lunghe (Binder e Collezione con centinaia di
   carte): le carte fuori dallo schermo non vengono impaginate né disegnate
   finché non ci si arriva scorrendo. Prima ogni ridisegno impaginava tutte
   le carte e con 600 carte la pagina restava bloccata per secondi.
   L'altezza indicata è solo una stima per la barra di scorrimento:
   "auto" fa ricordare al browser quella vera dopo la prima volta. */
#binderGrid > .waifuCard,
#waifuGrid > .waifuCard {
  content-visibility: auto;
  contain-intrinsic-size: auto 340px;
}
#binderGrid > .waifuCard { contain-intrinsic-size: auto 160px; }
#cavallinePage #waifuGrid.tradeBinCompactView > .waifuCard { contain-intrinsic-size: auto 235px; }
#cavallinePage #waifuGrid.tradeBinListView > .waifuCard { contain-intrinsic-size: auto 93px; }

/* Bottone "?" di ogni sezione e guida */
#homePage, #cavallinePage, #binderPage, #friendsPage, #tradesPage,
#favoritesPage, #marketPage, #battlePassPage, #wheelPage, #optionsPage { position: relative; }
.helpButton {
  position: absolute;
  top: calc(var(--tg-content-safe-area-inset-top, 0px) + 14px);
  right: 16px;
  z-index: 20;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(184, 145, 255, 0.55);
  border-radius: 50%;
  background: rgba(52, 26, 104, 0.6);
  color: #ece4ff;
  font: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.helpButton:active { transform: scale(0.94); }

.helpSheet { position: fixed; inset: 0; z-index: 100008; display: flex; align-items: flex-end; justify-content: center; }
.helpSheet[hidden] { display: none; }
.helpSheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px); }
.helpSheet__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(184, 145, 255, 0.4);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #120b22;
  color: #ece4ff;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.55);
}
.helpSheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(184, 145, 255, 0.18);
}
.helpSheet__eyebrow { display: block; color: #b891ff; font-size: 10px; font-weight: 900; letter-spacing: 0.16em; }
.helpSheet__header h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.15; }
.helpSheet__close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.helpSheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px 18px calc(var(--tg-safe-area-inset-bottom, 0px) + 26px);
  font-size: 14px;
  line-height: 1.5;
}
.helpSheet__intro { margin: 10px 0 4px; color: #cfc4ea; font-size: 14.5px; }
.helpSheet__block { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(184, 145, 255, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.helpSheet__block h3 { margin: 0 0 6px; color: #ffd600; font-size: 15px; }
.helpSheet__block p { margin: 0; }
.helpSheet__block p + ul { margin-top: 8px; }
.helpSheet__block ul { margin: 0; padding-left: 18px; }
.helpSheet__block li + li { margin-top: 6px; }
.helpSheet__block b { color: #fff; }
body.helpSheetOpen { overflow: hidden; }

/* Opzioni: interruttori delle notifiche del bot */
.optionsCard__row--sub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.optionsCard__label {
  display: block;
  color: #e9eef5;
  font-size: 14px;
  font-weight: 800;
}
.optionsCard__row--sub .optionsCard__text { margin-top: 4px; }
.optionsCard--notifications > .optionsCard__text--muted:last-child { margin-top: 14px; }
/* Opzioni: tab Generali / Pack */
.optionsTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.optionsTabs__tab {
  padding: 12px 8px;
  border: 1px solid #283545;
  border-radius: 14px;
  background: #0f151c;
  color: #a9b5c4;
  font-weight: 900;
  font-size: 14px;
}
.optionsTabs__tab.is-active { color: #fff; border-color: #5da9ff; background: rgba(93, 169, 255, 0.14); }
.optionsCard .packsSettings__row:last-child { border-bottom: 0; }

/* Dettaglio carta: "Chi ce l'ha?" tra gli amici */
.cardHolders { margin-top: 12px; }
.cardHolders[hidden] { display: none; }
.cardHolders__summary {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(93, 169, 255, 0.35);
  border-radius: 14px;
  background: rgba(23, 55, 90, 0.35);
  color: #e6efff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.cardHolders__summary:disabled { cursor: default; opacity: 0.75; }
.cardHolders.is-empty .cardHolders__summary { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #9aa7b6; font-weight: 600; }
.cardHolders.is-empty .cardHolders__arrow { display: none; }
.cardHolders__icon { font-size: 18px; }
.cardHolders__text { flex: 1; min-width: 0; }
.cardHolders__arrow { font-size: 20px; transition: transform 0.15s; }
.cardHolders__summary[aria-expanded="true"] .cardHolders__arrow { transform: rotate(90deg); }
.cardHolders__list { margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.03); }
.cardHolders__list[hidden] { display: none; }
.cardHolders__heading { margin: 8px 0 4px; color: #5da9ff; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.cardHolders__row { display: flex; align-items: center; gap: 10px; min-height: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.cardHolders__heading + .cardHolders__row { border-top: 0; }
.cardHolders__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-weight: 700; }
.cardHolders__row small { color: #9aa7b6; font-size: 12px; }
.cardHolders__offer { padding: 7px 12px; border: 0; border-radius: 10px; background: #2fd4a3; color: #062018; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.cardHolders__hint { margin: 6px 0 4px; color: #ffd27a; font-size: 12px; }

/* Media video/gif per le carte nella Mini App */


/* ============================================================
   VIDEO DELLE CARTE (dettaglio e schermo intero)
   Bottone "▶ Play video" sopra la miniatura, barra di caricamento,
   bottone 🔊/🔇. Codice in setElementCardMedia (core/010-dialogs.js).
   ============================================================ */
/* I contenitori (.waifuDetail__image relativo, .waifuImageViewer fisso)
   fanno già da riferimento per gli elementi assoluti qui sotto. */
.cardVideoOverlay {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 150px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 18px;
  background: rgba(8, 12, 20, 0.72);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.cardVideoOverlay[hidden] { display: none; }
.cardVideoOverlay:focus-visible { outline: 2px solid #5da9ff; outline-offset: 3px; }

.cardVideoOverlay__play {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f7de0, #8d55ff);
  font-size: 22px;
  padding-left: 4px;
  box-shadow: 0 0 18px rgba(93, 169, 255, 0.45);
}
.cardVideoOverlay__label {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Barra di caricamento: scorre finché non si sa quanto manca, poi mostra
   la percentuale. */
.cardVideoOverlay__bar {
  position: relative;
  overflow: hidden;
  width: 140px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.15);
}
.cardVideoOverlay__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5da9ff, #8d55ff);
  animation: cardVideoLoading 1.1s ease-in-out infinite;
}
.cardVideoOverlay__bar.is-known i {
  animation: none;
  transition: width 0.25s ease;
}
@keyframes cardVideoLoading {
  from { left: -35%; }
  to { left: 100%; }
}
.cardVideoOverlay--loading { cursor: default; }
.cardVideoOverlay--error { cursor: default; max-width: 240px; }

/* 🔊/🔇 e cursore del volume, in basso a sinistra sul video. */
.cardVideoAudio {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cardVideoAudio:not(:has(.cardVideoVolume)) { padding: 0; }
.cardVideoSound {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.cardVideoVolume {
  --volume: 100%;
  width: 96px;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.cardVideoVolume::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, #5da9ff var(--volume), rgba(255, 255, 255, 0.25) var(--volume));
}
.cardVideoVolume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.cardVideoVolume::-moz-range-track {
  height: 4px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.25);
}
.cardVideoVolume::-moz-range-progress { height: 4px; border-radius: 99px; background: #5da9ff; }
.cardVideoVolume::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
.waifuImageViewer .cardVideoAudio {
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(70px, calc(env(safe-area-inset-bottom, 0px) + 60px));
}

@media (prefers-reduced-motion: reduce) {
  .cardVideoOverlay__bar i { animation: none; left: 0; width: 100%; opacity: 0.5; }
}
/* Schermo intero (foto e video): l'immagine prende tutta la larghezza del
   telefono e passa sotto le frecce, che restano sopra (z-index 2). Prima
   era limitata al 70% della larghezza per lasciare spazio alle frecce. */
.waifuImageViewer.waifuImageViewer {
  padding: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)) 0
    max(56px, calc(env(safe-area-inset-bottom, 0px) + 48px)) !important;
}
.waifuImageViewer .waifuImageViewer__image.waifuImageViewer__image {
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  max-height: calc(100vh - 120px) !important;
  max-height: calc(100dvh - 120px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}
@media (min-width: 700px) {
  /* Su schermi larghi resta una dimensione ragionevole. */
  .waifuImageViewer .waifuImageViewer__image.waifuImageViewer__image {
    width: auto !important;
    max-width: min(90vw, 720px) !important;
    border-radius: 14px !important;
  }
}
/* ============================================================
   BADGE DI RARITÀ ANIMATI (classi da rarityBadgeInfo, 030-cards.js)
                 normale            evento (rarityBadge--event)
   Common        fermo              argento
   Rare          oro                arcobaleno
   Epic          viola              blu
   Tre sfondi sullo stesso elemento: il gradiente ritagliato sul testo,
   il fondo scuro dentro il bordo e il gradiente del bordo. Si anima
   --fx-pos (non background-position): alcune regole del dettaglio carta
   mettono lo sfondo con !important, e un'animazione non può muovere una
   proprietà !important. Si muovono solo con le animazioni attive
   (classe motion-on, vedi motion.js). I selettori con #waifuDetailRarity
   servono a battere quelli del dettaglio carta.
   ============================================================ */
@property --fx-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.rarityBadge--rare,
.rarityBadge--epic,
.rarityBadge--common.rarityBadge--event,
#waifuDetailRarity.rarityBadge--rare,
#waifuDetailRarity.rarityBadge--epic,
#waifuDetailRarity.rarityBadge--common.rarityBadge--event {
  /* Il gradiente è ripetuto due volte e largo il doppio del badge: se ne
     vede sempre un giro intero, e il passaggio dalla fine all'inizio non
     si nota. Il colore di ogni rarità è in --fx, qui sotto. */
  --fx: linear-gradient(
    90deg,
    #fff1a8, #ffd23f, #f5a623, #c98a00, #ffe58a,
    #fff1a8, #ffd23f, #f5a623, #c98a00, #ffe58a, #fff1a8
  );
  --fx-glow: rgba(245, 166, 35, 0.25);
  border: 1.5px solid transparent !important;
  background-image: var(--fx), linear-gradient(#141a24, #141a24), var(--fx) !important;
  background-size: 200% 100%, 100% 100%, 200% 100% !important;
  background-position: var(--fx-pos) 0, 0 0, var(--fx-pos) 0 !important;
  background-origin: border-box !important;
  -webkit-background-clip: text, padding-box, border-box !important;
  background-clip: text, padding-box, border-box !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  box-shadow: 0 0 8px var(--fx-glow) !important;
}

/* Event Common: argento */
.rarityBadge--common.rarityBadge--event,
#waifuDetailRarity.rarityBadge--common.rarityBadge--event {
  --fx: linear-gradient(
    90deg,
    #f4f7fb, #b9c3d0, #8a96a8, #dfe5ee, #a3adbb,
    #f4f7fb, #b9c3d0, #8a96a8, #dfe5ee, #a3adbb, #f4f7fb
  );
  --fx-glow: rgba(200, 210, 225, 0.2);
}

/* Event Rare: arcobaleno */
.rarityBadge--rare.rarityBadge--event,
#waifuDetailRarity.rarityBadge--rare.rarityBadge--event {
  --fx: linear-gradient(
    90deg,
    #ff3b6b, #ff9f1c, #ffe03a, #3bd16f, #2fb4ff, #8a5cff,
    #ff3b6b, #ff9f1c, #ffe03a, #3bd16f, #2fb4ff, #8a5cff, #ff3b6b
  );
  --fx-glow: rgba(138, 92, 255, 0.3);
}

/* Epic: viola */
.rarityBadge--epic,
#waifuDetailRarity.rarityBadge--epic {
  --fx: linear-gradient(
    90deg,
    #f0e1ff, #c084fc, #9333ea, #8b3fd6, #d8b4fe,
    #f0e1ff, #c084fc, #9333ea, #8b3fd6, #d8b4fe, #f0e1ff
  );
  --fx-glow: rgba(168, 85, 247, 0.3);
}

/* Event Epic: blu */
.rarityBadge--epic.rarityBadge--event,
#waifuDetailRarity.rarityBadge--epic.rarityBadge--event {
  --fx: linear-gradient(
    90deg,
    #dbeafe, #60a5fa, #2563eb, #3b6fe0, #93c5fd,
    #dbeafe, #60a5fa, #2563eb, #3b6fe0, #93c5fd, #dbeafe
  );
  --fx-glow: rgba(37, 99, 235, 0.35);
}

/* Lente: un giro ogni 8 secondi (6 per le carte evento Rare ed Epic). */
.motion-on .rarityBadge--rare,
.motion-on .rarityBadge--epic,
.motion-on .rarityBadge--common.rarityBadge--event {
  animation: rarityBadgeFx 8s linear infinite;
}
.motion-on .rarityBadge--rare.rarityBadge--event,
.motion-on .rarityBadge--epic.rarityBadge--event {
  animation-duration: 6s;
}

@keyframes rarityBadgeFx {
  to {
    --fx-pos: -200%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rarityBadge--rare,
  .rarityBadge--epic,
  .rarityBadge--common.rarityBadge--event {
    animation: none !important;
  }
}
/* Card: se il badge di rarità ("Comune Evento", "Event Rare"...) e il
   livello ("x10 MAX") non stanno sulla stessa riga, il livello va a capo
   allineato a destra invece di coprire o tagliare il badge. (La vista a
   lista mette il footer in display: contents e non cambia.) */
.waifuCard__footer {
  flex-wrap: wrap;
  row-gap: 6px;
}
.waifuCard__footer .rarityBadge {
  flex: 0 1 auto;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}
.waifuCard__footer .waifuCard__level {
  margin-left: auto;
}
/* ============================================================
   CARTE IN GRIGLIA (Collection, Binder, Preferiti)
   Dall'alto: badge di rarità, nome, poi "[V013] 🎭 (1)" più piccolo
   (testo da waifu_title, diviso in span da createWaifuCard). La quantità
   è una pillola sull'immagine, in basso a destra. La vista a lista
   (tradeBinListView) resta com'era, su una riga.
   ============================================================ */
#cavallinePage #waifuGrid:not(.tradeBinListView) .waifuCard__body,
#binderGrid .waifuCard__body,
#favoritesGrid .waifuCard__body {
  display: flex !important;
  flex-direction: column;
  gap: 6px;
  min-height: 0 !important;
  padding: 10px !important;
}
.waifuGrid:not(.tradeBinListView) .waifuCard__footer,
#binderGrid .waifuCard__footer,
#favoritesGrid .waifuCard__footer {
  order: -1;
  margin: 0 !important;
}
#cavallinePage #waifuGrid:not(.tradeBinListView) .waifuCard__footer .waifuCard__level,
#cavallinePage #waifuGrid:not(.tradeBinListView) .waifuCard__meta,
#cavallinePage #waifuGrid:not(.tradeBinListView) .waifuCard__titleIcon,
#binderGrid .waifuCard__footer .waifuCard__level,
#binderGrid .waifuCard__meta,
#binderGrid .waifuCard__titleIcon,
#favoritesGrid .waifuCard__footer .waifuCard__level,
#favoritesGrid .waifuCard__meta,
#favoritesGrid .waifuCard__titleIcon {
  display: none !important;
}

.waifuCard__title {
  display: grid !important;
  gap: 2px;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  white-space: normal !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.waifuCard__titleName {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 800;
}
/* Nelle griglie il nome sta sempre su una riga e occupa tutta la larghezza:
   --name-em (da cardNameEm, 030-cards.js) è la larghezza del nome a 1px,
   100cqi la larghezza della carta. Tra 10 e 18px; sotto i 10 c'è "…". */
#cavallinePage #waifuGrid:not(.tradeBinListView):not(.tradeBinCompactView) .waifuCard__title,
#binderGrid .waifuCard__title,
#favoritesGrid .waifuCard__title {
  container-type: inline-size;
}
#cavallinePage #waifuGrid:not(.tradeBinListView):not(.tradeBinCompactView) .waifuCard__titleName,
#binderGrid .waifuCard__titleName,
#favoritesGrid .waifuCard__titleName {
  font-size: clamp(10px, calc(97cqi / var(--name-em, 8)), 18px);
  line-height: 1.2;
}
.waifuCard__titleTail {
  color: var(--tcg-muted, #8d99a8);
  font-size: 10.5px !important;
  font-weight: 500;
  line-height: 1.3;
}

/* Vista compatta (4 colonne) e a lista: nome e versione seguono la
   grandezza del titolo decisa da quelle viste. */
.tradeBinCompactView .waifuCard__titleName,
.tradeBinListView .waifuCard__titleName { font-size: inherit; }
.tradeBinCompactView .waifuCard__titleTail,
.tradeBinListView .waifuCard__titleTail { font-size: 0.8em !important; }

/* Quantità sull'immagine */
.waifuCard__qty {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(13, 15, 19, 0.78);
  color: #fff;
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1.3;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.waifuCard__qty--max { color: #ffd23f; }
.waifuCard__qty--missing { color: #c3cbd6; font-weight: 700; }
.tradeBinListView .waifuCard__qty { display: none; }
.tradeBinCompactView .waifuCard__qty { right: 4px; bottom: 4px; padding: 2px 6px; font-size: 9px; }

/* Vista a lista: tutto su una riga, il nome si accorcia per primo. */
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__title {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  overflow: hidden !important;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__titleName {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__titleIcon,
#cavallinePage #waifuGrid.tradeBinListView .waifuCard__titleTail {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* I menù di prima della Collezione restano nella pagina (il pannello
   Filtri usa quello degli eventi) ma non si vedono: ci sono i due tasti di
   createFilterSort. */
#cavallinePage .collectionCompactFilters { display: none !important; }
/* ============================================================
   Titoli delle sezioni uguali ovunque: stessa riga piccola sopra
   (eyebrow), stesso titolo e stesso sottotitolo in ogni pagina.
   Il colore della riga piccola resta quello di ogni sezione.
   Caricato per ultimo, quindi vince sulle regole vecchie.
   ============================================================ */
html body #app main.page :is(.hubHero__eyebrow, .sectionIntro__eyebrow, .favoritesHero__eyebrow) {
  margin: 0 0 7px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.17em !important;
}

html body #app main.page :is(
    .hubHero__title,
    .sectionIntro__title,
    .favoritesHero__content > h1,
    .marketHeader h1,
    .passHeader__row h1,
    .wheelV2Header__row h1,
    .optionsHeader > h1,
    .packsHeader > h1
  ) {
  margin: 0 !important;
  font-family: "SDKUSWebLocal", sans-serif !important;
  font-size: clamp(28px, 8vw, 34px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0.005em !important;
  color: #fff !important;
}

html body #app main.page :is(
    .hubHero__subtitle,
    .sectionIntro__subtitle,
    .favoritesHero__content > p,
    .marketHeader h1 ~ p,
    .passHeader__row h1 ~ p,
    .wheelV2Header__row h1 ~ p,
    .optionsHeader > p,
    .packsHeader > p
  ) {
  margin: 10px 0 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  color: rgba(255, 255, 255, 0.7) !important;
}