/* Кошелёк: карты в одной из тем (см. wallet.js) */
.wallet { position: relative; perspective: 1300px; perspective-origin: 50% 0;
  transition: height .5s cubic-bezier(.2, .8, .2, 1); }
.wallet-item { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 0; cursor: pointer;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), filter .3s, opacity .3s; will-change: transform;
  -webkit-tap-highlight-color: transparent; }
.wallet.dragging .wallet-item { transition: none; }
.wallet-item.is-open { cursor: default; }
.wallet-item.is-behind { filter: brightness(.9); }
.wallet-item.is-far { opacity: 0; pointer-events: none; }
/* кнопка переворота работает только у открытой карты */
.wallet-item:not(.is-open) .pass-flip-btn { visibility: hidden; }

/* карусель: листается в сторону, вертикальная прокрутка страницы остаётся */
.wallet.theme-carousel { perspective-origin: 50% 40%; touch-action: pan-y; overflow-x: clip; overflow-y: visible; }
.wallet.theme-carousel .wallet-item { transform-origin: 50% 50%; }
/* колода и ролодекс листаются вверх-вниз пальцем — прокрутку страницы над ними выключаем */
.wallet.theme-deck, .wallet.theme-rolodex { touch-action: none; }
.wallet.theme-rolodex { perspective-origin: 50% 100%; }
.wallet.theme-rolodex .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 50% 100%; }
/* веер: карты поворачиваются вокруг точки далеко под стопкой */
.wallet.theme-fan .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 50% 130%; }

/* куб и барабан: карты вращаются вокруг центра, обратная сторона грани не видна */
.wallet.theme-cube, .wallet.theme-swipe { touch-action: pan-y; }
.wallet.theme-cube { perspective: 1000px; perspective-origin: 50% 50%; overflow-x: clip; overflow-y: visible; }
.wallet.theme-cube .wallet-item:not(.is-open):not(.is-behind),
.wallet.theme-drum .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 50% 50%; backface-visibility: hidden; }
.wallet.theme-drum, .wallet.theme-spiral { touch-action: none; }
.wallet.theme-drum { perspective-origin: 50% 50%; }
/* книга: страница поворачивается вокруг левого края */
.wallet.theme-book { touch-action: pan-y; perspective: 1600px; perspective-origin: 0 50%; }
.wallet.theme-book .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 0 50%; backface-visibility: hidden; }
/* «машина времени»: карты уходят вглубь к верху экрана */
.wallet.theme-spiral { perspective: 900px; perspective-origin: 50% -30%; }
/* плитка: уменьшенные карты от левого верхнего угла */
.wallet.theme-grid .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 0 0; }
.wallet.theme-swipe .wallet-item:not(.is-open):not(.is-behind) { transform-origin: 50% 100%; }

/* подсказка, как листать — пока кошелёк закрыт */
.wallet.theme-carousel:not(.has-open)::after, .wallet.theme-deck:not(.has-open)::after,
.wallet.theme-rolodex:not(.has-open)::after, .wallet.theme-cube:not(.has-open)::after,
.wallet.theme-book:not(.has-open)::after, .wallet.theme-spiral:not(.has-open)::after,
.wallet.theme-swipe:not(.has-open)::after {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 13px;
  color: var(--hint, #8e8e93); pointer-events: none; }
.wallet.theme-carousel:not(.has-open)::after { content: "← Листайте карты в сторону →"; }
.wallet.theme-deck:not(.has-open)::after { content: "Потяните карту вверх — следующая"; }
.wallet.theme-cube:not(.has-open)::after { content: "← Поверните куб свайпом →"; }
.wallet.theme-book:not(.has-open)::after { content: "Листайте влево, как страницы"; }
.wallet.theme-spiral:not(.has-open)::after { content: "Свайп вверх — следующая карта"; }
.wallet.theme-swipe:not(.has-open)::after { content: "Смахните карту в сторону"; }
.wallet.theme-rolodex:not(.has-open)::after { content: "Потяните вниз, чтобы перелистнуть"; }

.wallet-actions { display: none; gap: 8px; justify-content: center; padding-top: 12px; }
.wallet-item.is-open .wallet-actions { display: flex; }
.wallet-action { width: auto; margin: 0; padding: 8px 14px; border-radius: 10px; font: 500 14px/1.2 inherit;
  background: var(--surface, #fff); color: var(--text, #000); border: 0; cursor: pointer; }
.wallet-action.danger { color: #e5484d; }

/* выбор вида кошелька под картами */
.wallet-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wallet-themes button { width: auto; flex: 1 1 auto; margin: 0; padding: 9px 10px; font-size: 14px;
  background: var(--surface, #fff); color: var(--text, #000); }
.wallet-themes button.on { background: var(--button); color: var(--button-text); }

/* наклон от гироскопа: карта поворачивается вслед за телефоном (--rx/--ry ставит index.html) */
.wallet.fx-tilt .wallet-pass { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .15s linear; }
/* блик и голограмма: световое пятно и радужный перелив идут за наклоном; без гироскопа — пробегают сами */
.wallet.fx-glare .wallet-pass { position: relative; }
.wallet.fx-glare .wallet-pass::after { content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  z-index: 5; mix-blend-mode: soft-light; background-size: 260% 260%, 100% 100%;
  background-image: linear-gradient(115deg, transparent 30%, rgba(255, 60, 170, .30) 40%, rgba(60, 220, 255, .30) 47%,
      rgba(255, 240, 90, .30) 54%, transparent 64%),
    radial-gradient(circle at var(--gx, 50%) var(--gy, 20%), rgba(255, 255, 255, .55), transparent 55%);
  background-position: var(--gx, 50%) var(--gy, 50%), 0 0; }
.wallet.fx-glare:not(.has-gyro) .wallet-pass::after { animation: wallet-glare 5s ease-in-out infinite; }
@keyframes wallet-glare {
  0%, 100% { background-position: 0% 0%, 0 0; }
  50% { background-position: 100% 100%, 0 0; }
}

/* появление: карты по очереди въезжают снизу, поворачиваясь из наклона */
.wallet.entering .wallet-pass { animation: wallet-in .7s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 80ms); }
@keyframes wallet-in {
  from { opacity: 0; transform: translateY(140px) rotateX(-35deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wallet, .wallet-item { transition: none; }
  .wallet.entering .wallet-pass { animation: none; }
  .wallet.fx-glare .wallet-pass::after { animation: none; }
}