/* ─────────────────────────────────────────────────────────────
   TaroMagicOracle — Mini App Design System
   ───────────────────────────────────────────────────────────── */

/* tokens injected by JS via :root, see app.jsx setPalette() */
:root {
  --rose: #F2A5C9;
  --rose-deep: #E287B5;
  --amethyst: #B89CE8;
  --amethyst-deep: #9A7BD8;
  --orchid: #D4B5F4;
  --lavender-bg: #FBF5FE;
  --light-violet: #F4ECFB;
  --deep-violet: #5B4179;
  --text-dark: #2A1F4A;
  --text-gray: #7A6F94;
  --text-soft: #A99CBE;
  --gold: #E6C998;
  --shadow-violet: rgba(155, 124, 216, 0.18);
  --gradient: linear-gradient(135deg, var(--rose) 0%, var(--amethyst) 100%);
  --gradient-soft: linear-gradient(180deg, #FCEFF7 0%, #F0E6FA 100%);

  /* Surface tokens — used by spread tiles + plan cards.
     They switch in dark mode so light overlays don't blow out. */
  --surface-card: rgba(255, 255, 255, 0.78);
  --surface-card-strong: rgba(255, 255, 255, 0.92);
  --surface-card-border: rgba(255, 255, 255, 0.6);
  --card-fade-mid:  rgba(255, 255, 255, 0.85);
  --card-fade-end:  rgba(255, 255, 255, 0.98);
  --icon-tint: invert(0%);  /* keep png as-is in light mode */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: #1a1326;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  color: var(--text-dark);
  overscroll-behavior: none;
}

.serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; }

/* ───────── Glassmorphism ───────── */
/* Note: backdrop-filter is decorative here. We disabled it on .glass because
   it creates a backdrop sampling region that, in some renderers, can sample
   pixels just outside the element bounds — making text in the previous
   sibling appear washed out. The semi-transparent bg + border + soft
   shadow keeps the glass aesthetic without that side-effect. */
.glass {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  box-shadow: 0 4px 16px var(--shadow-violet);
  transition: all .35s cubic-bezier(.34, 1.56, .64, 1);
  position: relative;
}
.glass > * { position: relative; z-index: 1; }
.glass:active { transform: scale(.98); }

.glass-dark {
  background: rgba(91, 65, 121, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  color: #fff;
}

/* ───────── Buttons ───────── */
.btn-grad {
  background: var(--gradient);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(226, 135, 181, 0.35);
  transition: transform .12s ease, box-shadow .25s ease;
}
.btn-grad:active { transform: scale(.96); box-shadow: 0 4px 12px rgba(226, 135, 181, 0.3); }
.btn-grad::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

.btn-ghost {
  background: rgba(255,255,255,.5);
  border: 1px solid rgba(184, 156, 232, .3);
  color: var(--deep-violet);
  border-radius: 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all .2s;
}
.btn-ghost:active { transform: scale(.96); background: rgba(255,255,255,.7); }

/* ───────── Badges ───────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 99px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .03em;
}
.badge-free { background: rgba(184, 156, 232, .18); color: var(--amethyst-deep); }
.badge-basic { background: rgba(184, 156, 232, .22); color: var(--deep-violet); }
.badge-pro { background: linear-gradient(135deg, #FFE2BB, #F3C2D9); color: #8A5A2B; }
.badge-vip { background: linear-gradient(135deg, var(--rose), var(--amethyst)); color: #fff; }

/* ───────── Page bg ───────── */
.page-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 10%, rgba(242, 165, 201, .35), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(184, 156, 232, .35), transparent 50%),
    var(--lavender-bg);
}

/* ───────── Stagger enter animation ───────── */
/* Disabled: transform-based stagger creates a stacking context per child that
   can paint later-DOM glass cards (with their box-shadows) above earlier
   header text. We rely on simple page-level fade-ins instead. */
.enter > * {
  opacity: 1;
  /* no transform, no stacking context */
}

.fade-in { animation: fadeIn .5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ───────── Particles (background stars) ───────── */
.particle {
  position: absolute;
  font-family: 'Cormorant Garamond', serif;
  color: var(--amethyst);
  pointer-events: none;
  will-change: transform, opacity;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(180deg); opacity: 0; }
}

/* ───────── Pulse (daily card) ───────── */
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}
.pulse-soft { animation: softPulse 3.4s ease-in-out infinite; }

/* ───────── Floating (daily card) ───────── */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.floaty { animation: floaty 3.2s ease-in-out infinite; }

/* ───────── 3D Card flip ───────── */
.card-3d-wrap { perspective: 1200px; }
.card-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.4, .25, .25, 1);
  width: 100%; height: 100%;
}
.card-3d.flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}
.card-face.back { transform: rotateY(180deg); }

/* ───────── Shuffle / fan animations ───────── */
@keyframes fanIn {
  from { transform: translate(-50%, 80vh) rotate(0deg) scale(.5); opacity: 0; }
  to   { transform: var(--final-tf); opacity: 1; }
}
@keyframes wiggle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(2px) rotate(-2deg); }
}

/* ───────── Bottom tabs ───────── */
.tabs-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom));
  z-index: 100;
}
.tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(91, 65, 121, .15);
  padding: 8px;
  position: relative;
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 7px 0; cursor: pointer;
  color: var(--text-gray); transition: all .25s;
  font-size: 10px; font-weight: 500; letter-spacing: .03em;
  border-radius: 16px; position: relative; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.tab.active { color: var(--rose-deep); }
.tab svg { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.tab.active svg { transform: scale(1.18); }
.tab-pill {
  position: absolute; top: 8px; bottom: 8px;
  left: 8px;
  width: calc((100% - 16px) / 5);
  background: linear-gradient(135deg, rgba(242,165,201,.18), rgba(184,156,232,.18));
  border-radius: 16px; z-index: 1;
  transition: transform .42s cubic-bezier(.34, 1.4, .64, 1);
}

/* ───────── Tarot card placeholder art ───────── */
.taro-card-back {
  background: linear-gradient(150deg, var(--rose-deep) 0%, var(--amethyst-deep) 100%);
  position: relative; overflow: hidden;
}
.taro-card-face {
  background: linear-gradient(170deg, #FBF5FE 0%, #F0E1F5 100%);
  position: relative; overflow: hidden;
}

/* ───────── Scrollbars ───────── */
.scroll-x { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-y { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.scroll-y::-webkit-scrollbar { display: none; }

/* ───────── Modal/sheet ───────── */
.sheet-overlay {
  position: absolute; inset: 0;
  background: rgba(42, 31, 74, .4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fadeIn .25s ease;
  z-index: 200;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF5FE 100%);
  border-radius: 28px 28px 0 0;
  padding: 14px 20px calc(28px + env(safe-area-inset-bottom));
  animation: sheetUp .42s cubic-bezier(.34, 1.4, .64, 1);
  box-shadow: 0 -12px 40px rgba(91, 65, 121, .25);
  z-index: 201;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle {
  width: 38px; height: 4px; border-radius: 2px;
  background: rgba(122, 111, 148, .35);
  margin: 4px auto 14px;
}

/* ───────── Counter ───────── */
.stat-tile {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px; padding: 14px 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ───────── Twinkle ───────── */
@keyframes twinkle {
  0%, 100% { opacity: .3; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
.twinkle { animation: twinkle 2.4s ease-in-out infinite; }

/* ───────── Splash specific ───────── */
.splash-bg {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #F8B6D2 0%, #C5AEEC 60%, #A789DA 100%);
}
.splash-progress {
  position: relative; width: 60%; height: 3px;
  background: rgba(255,255,255,.25); border-radius: 99px;
  overflow: hidden;
}
.splash-progress > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 40%; background: rgba(255,255,255,.9);
  border-radius: 99px;
  animation: progressSlide 2.4s ease-in-out infinite;
}
@keyframes progressSlide {
  0% { left: -40%; } 100% { left: 100%; }
}

/* ───────── Selection ─────────────── */
.card-select {
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.card-select.selected {
  transform: translateY(-26px) scale(1.06) !important;
  box-shadow: 0 18px 36px rgba(226, 135, 181, .45);
}
.card-select:active { transform: translateY(-4px); }

/* ───────── Halo glow on revealed card ───────── */
@keyframes haloOn {
  from { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  to { box-shadow: 0 0 30px 4px rgba(242, 165, 201, .55), 0 12px 40px rgba(155, 124, 216, .35); }
}
.halo { animation: haloOn 1s ease forwards .4s; }

/* Dark halo — used during dark reveal moment */
@keyframes haloOnDark {
  from { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  to { box-shadow: 0 0 36px 6px rgba(242, 165, 201, .55), 0 0 80px 10px rgba(155, 124, 216, .35); }
}
.halo-dark { animation: haloOnDark 1.1s ease forwards .4s; border-radius: 14px; }

/* Shuffle wiggle — used in shuffle step */
@keyframes shuffleWiggle {
  0%   { transform: translate(-50%, -50%) rotate(-8deg) translateY(-3px); }
  100% { transform: translate(-50%, -50%) rotate(8deg)  translateY(3px); }
}

/* utility */
.hstack { display: flex; align-items: center; }
.vstack { display: flex; flex-direction: column; }
.spacer { flex: 1; }

/* ════════════════════════════════════════════════════════════
   DARK THEME
   Switched via [data-theme="dark"] on <html>.
   We override the same CSS custom properties so every existing
   component re-styles itself. A few targeted overrides handle
   surfaces that use literal rgba(255,255,255,..) backgrounds.
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --rose: #F2A5C9;
  --rose-deep: #F5B5D0;
  --amethyst: #B89CE8;
  --amethyst-deep: #C9B0F2;
  --orchid: #D4B5F4;
  --lavender-bg: #0E0719;
  --light-violet: #1A1131;
  --deep-violet: #F0E2FC;
  --text-dark: #F2EBFE;
  --text-gray: #B0A3C8;
  --text-soft: #877C9D;
  --gold: #E6C998;
  --shadow-violet: rgba(0, 0, 0, 0.45);
  --gradient: linear-gradient(135deg, #F2A5C9 0%, #B89CE8 100%);
  --gradient-soft: linear-gradient(180deg, #2A1645 0%, #1A0E2E 100%);

  /* Dark surface tokens */
  --surface-card: rgba(72, 50, 110, 0.65);
  --surface-card-strong: rgba(90, 62, 135, 0.85);
  --surface-card-border: rgba(184, 156, 232, 0.28);
  --card-fade-mid:  rgba(18, 10, 36, 0.82);
  --card-fade-end:  rgba(10, 6, 24, 0.99);
  --icon-tint: brightness(1.45) saturate(1.15) contrast(.96) hue-rotate(-8deg) drop-shadow(0 0 18px rgba(226,180,255,.5)) drop-shadow(0 0 6px rgba(242,165,201,.35));
}

[data-theme="dark"] body { background: #0a0413; }

[data-theme="dark"] .page-bg {
  background:
    radial-gradient(circle at 20% 10%, rgba(155, 124, 216, .35), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(226, 135, 181, .22), transparent 50%),
    var(--lavender-bg);
}

[data-theme="dark"] .glass {
  background: rgba(60, 40, 95, 0.55);
  border-color: rgba(184, 156, 232, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .stat-tile {
  background: rgba(60, 40, 95, 0.55);
  border-color: rgba(184, 156, 232, 0.22);
}

[data-theme="dark"] .tabs {
  background: rgba(30, 18, 50, 0.82);
  border-color: rgba(184, 156, 232, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
}
[data-theme="dark"] .tab-pill {
  background: linear-gradient(135deg, rgba(242, 165, 201, .32), rgba(184, 156, 232, .32));
}

[data-theme="dark"] .btn-ghost {
  background: rgba(60, 40, 95, 0.55);
  border-color: rgba(184, 156, 232, 0.35);
  color: var(--deep-violet);
}
[data-theme="dark"] .btn-ghost:active { background: rgba(60, 40, 95, 0.7); }

[data-theme="dark"] .sheet {
  background: linear-gradient(180deg, #1F0F36 0%, #14091e 100%);
  color: var(--text-dark);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .6);
}

[data-theme="dark"] .badge-free { background: rgba(184, 156, 232, .22); color: var(--amethyst-deep); }
[data-theme="dark"] .badge-basic { background: rgba(184, 156, 232, .28); color: var(--deep-violet); }

[data-theme="dark"] .taro-card-face { background: linear-gradient(170deg, #2A1A45 0%, #1A0E2E 100%); }

/* ── Catch-all dark overrides for inline-style surfaces ───────
   Some components write `background: rgba(255,255,255,.X)` inline,
   which beats any class-level overrides. We can't restyle those
   from CSS without !important. The remaining residual brightness
   from .55–.92 alpha actually reads as a soft purple tint on top
   of our deep page bg — acceptable. But these targeted classes
   catch the most common readability traps. */

[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"] {
  background: rgba(60, 40, 95, 0.55) !important;
  border-color: rgba(184, 156, 232, 0.28) !important;
  color: var(--text-dark) !important;
}
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder {
  color: rgba(176, 163, 200, .7) !important;
}

/* Chat bubbles — assistant side is rendered with rgba(255,255,255,.85) inline.
   In dark mode, force the assistant bubble dark so light text is readable. */
[data-theme="dark"] .chat-bubble-assistant {
  background: rgba(60, 40, 95, 0.7) !important;
  color: var(--text-dark) !important;
  border-color: rgba(184, 156, 232, 0.22) !important;
}

/* Manager-name color tweaked for dark */
[data-theme="dark"] .chat-manager-name { color: #E6C998 !important; }

/* ════════════════════════════════════════════════════════════
   SCREEN TRANSITIONS — every tab/extra screen mounts with this.
   Smooth crossfade + soft scale-up gives a "premium" feel.
   ════════════════════════════════════════════════════════════ */
.screen-anim {
  animation: screenIn .55s cubic-bezier(.22, 1, .36, 1) both;
  will-change: opacity, transform, filter;
}
@keyframes screenIn {
  0%   { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Soft float for incoming cards (used inside enter rows) */
@keyframes liftIn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
.lift-in > * { animation: liftIn .55s cubic-bezier(.22, 1, .36, 1) both; min-width: 0; }
/* prevent grid auto-tracks from being forced wider than container by long content */
.lift-in { grid-template-columns: minmax(0, 1fr); }
.lift-in > *:nth-child(1) { animation-delay: .04s; }
.lift-in > *:nth-child(2) { animation-delay: .10s; }
.lift-in > *:nth-child(3) { animation-delay: .16s; }
.lift-in > *:nth-child(4) { animation-delay: .22s; }
.lift-in > *:nth-child(5) { animation-delay: .28s; }
.lift-in > *:nth-child(6) { animation-delay: .34s; }
.lift-in > *:nth-child(n+7) { animation-delay: .40s; }

/* ════════════════════════════════════════════════════════════
   FAN DEAL — cards animate from the deck into the fan position.
   --tx, --ty, --rot supplied inline per card; --i = index for stagger.
   ════════════════════════════════════════════════════════════ */
@keyframes fanDeal {
  0%   { transform: translate(-50%, 60vh) rotate(0deg) scale(.6); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: var(--final-tf); opacity: 1; }
}

/* Selection lift in fan (used as halo on hovered card index) */
@keyframes cardPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(242,165,201,0)); }
  50% { filter: drop-shadow(0 0 14px rgba(242,165,201,.7)); }
}
.card-pulse { animation: cardPulse 2.2s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════
   SPLASH — Мистическое Таро. Multi-layer mandala + orbit + scroll.
   ════════════════════════════════════════════════════════════ */
@keyframes splashOrbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes splashOrbitRev { from { transform: rotate(360deg); } to { transform: rotate(0); } }
@keyframes splashBreathe {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes splashRayPulse {
  0%, 100% { opacity: .15; }
  50% { opacity: .55; }
}
@keyframes splashLogoIn {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@keyframes splashLetterIn {
  0%   { opacity: 0; transform: translateY(28px) rotate(-8deg); filter: blur(6px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}
@keyframes splashShimmer {
  0% { background-position: -200% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes splashAura {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.2); opacity: .85; }
}
@keyframes splashStar {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0); }
  50% { opacity: 1; transform: scale(1) rotate(60deg); }
}
@keyframes splashRune {
  0%   { opacity: 0; transform: translateY(0) rotate(0); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-80vh) rotate(120deg); }
}

/* Mystical splash text — gold gradient that sweeps across letters */
.splash-title {
  background: linear-gradient(
    100deg,
    #E8DCFF 0%,
    #FFD9F0 18%,
    #FFE8B8 30%,
    #FFD9F0 42%,
    #E8DCFF 60%,
    #FFE8B8 75%,
    #E8DCFF 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: splashShimmer 4.5s linear infinite;
}

@keyframes slotPop {
  0%   { transform: translateY(-22px) scale(.4); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   TAB CONTENT SWITCH — soft slide on bottom-tab change.
   ════════════════════════════════════════════════════════════ */
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateX(12px) scale(.99); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.tab-slide { animation: tabSlideIn .42s cubic-bezier(.22, 1, .36, 1) both; }