:root{
  --bg:#06060a;
  --bg2:#0b0b12;
  --panel:rgba(28,28,34,.55);
  --panel2:rgba(22,22,28,.72);
  --text:#ffffff;
  --muted:rgba(255,255,255,.68);
  --muted2:rgba(255,255,255,.48);
  --stroke:rgba(255,255,255,.09);
  --stroke2:rgba(255,255,255,.14);
  --accent:#a855f7;
  --accent2:#5b8cff;
  --accent3:#7c3aed;
  --radius:26px;
  --shadow: 0 18px 46px rgba(0,0,0,.45);
  --shadow2: 0 10px 26px rgba(0,0,0,.35);
  /* Selected card back (cover). JS switches html[data-cover]. */
  --card-back: url('assets/cards/back.jpg');
}

/* Theme override (light) */
html[data-theme="light"]{
  --bg:#f6f6f8;
  --bg2:#ffffff;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.62);
  --text:#0b0b10;
  --muted:rgba(10,10,15,.62);
  --muted2:rgba(10,10,15,.44);
  --stroke:rgba(0,0,0,.10);
  --stroke2:rgba(0,0,0,.14);
  --shadow: 0 18px 46px rgba(0,0,0,.14);
  --shadow2: 0 10px 26px rgba(0,0,0,.12);
}

html[data-theme="light"] .bottomnav{ background: rgba(255,255,255,.75); }
html[data-theme="light"] .chip--ghost{ background: rgba(255,255,255,.55); }

/* Keep floating UI (bottom nav) aligned to app width across desktop and mobile */
:root{--app-max:520px}
@media (min-width: 900px){:root{--app-max:980px}}

html[data-cover="classic"]{ --card-back: url('assets/cards/back.jpg'); }
html[data-cover="occult"]{ --card-back: url('assets/covers/occult-gates.svg'); }
html[data-cover="witch"]{ --card-back: url('assets/covers/witch-lair.svg'); }
html[data-cover="cat"]{ --card-back: url('assets/covers/cat-spirit.svg'); }
html[data-cover="gold"]{ --card-back: url('assets/covers/golden-ornate.svg'); }

/* New covers (free for now) */
html[data-cover="tealSun"]{ --card-back: url('assets/covers/teal-sun.jpg'); }
html[data-cover="celestialCream"]{ --card-back: url('assets/covers/celestial-cream.jpg'); }
html[data-cover="pinkEye"]{ --card-back: url('assets/covers/pink-eye.jpg'); }
html[data-cover="witchCat"]{ --card-back: url('assets/covers/witch-cat.jpg'); }
html[data-cover="wheelFortune"]{ --card-back: url('assets/covers/wheel-fortune.jpg'); }
html[data-cover="cosmicGold"]{ --card-back: url('assets/covers/cosmic-gold.jpg'); }
html[data-cover="voidFigure"]{ --card-back: url('assets/covers/void-figure.jpg'); }
html[data-cover="blueNight"]{ --card-back: url('assets/covers/blue-night.jpg'); }

/* =========================
   Glow system (Colors tab)
   - Applied via html[data-glow="..."]
   - This glow is separate from covers and applies on top of any cover.
   ========================= */

html{ --glow-aura: none; --glow-aura2: none; --glow-rim: rgba(255,255,255,.10); }

@keyframes glowPulse{
  0%   { filter: blur(16px) saturate(1.10); opacity:.78; }
  45%  { filter: blur(18px) saturate(1.25); opacity:1; }
  100% { filter: blur(16px) saturate(1.10); opacity:.78; }
}

@keyframes glowPrism{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

html[data-glow="none"]{ --glow-aura: none; --glow-aura2: none; --glow-rim: rgba(255,255,255,.10); }
html[data-glow="violet"]{ --glow-rim: rgba(168,85,247,.68); --glow-aura: rgba(168,85,247,.65); --glow-aura2: rgba(91,140,255,.35); }
html[data-glow="emerald"]{ --glow-rim: rgba(16,185,129,.62); --glow-aura: rgba(16,185,129,.62); --glow-aura2: rgba(34,211,238,.28); }
html[data-glow="gold"]{ --glow-rim: rgba(245,158,11,.62); --glow-aura: rgba(245,158,11,.62); --glow-aura2: rgba(255,240,180,.20); }
html[data-glow="ice"]{ --glow-rim: rgba(56,189,248,.62); --glow-aura: rgba(56,189,248,.58); --glow-aura2: rgba(167,243,208,.22); }
html[data-glow="magenta"]{ --glow-rim: rgba(236,72,153,.62); --glow-aura: rgba(236,72,153,.62); --glow-aura2: rgba(168,85,247,.28); }
html[data-glow="void"]{ --glow-rim: rgba(99,102,241,.54); --glow-aura: rgba(99,102,241,.42); --glow-aura2: rgba(0,0,0,.45); }
html[data-glow="prism"]{ --glow-rim: rgba(255,255,255,.38); --glow-aura: rgba(255,255,255,.35); --glow-aura2: rgba(168,85,247,.22); }

html[data-glow]:not([data-glow="none"]) .pickCardBig,
html[data-glow]:not([data-glow="none"]) .cardFlip,
html[data-glow]:not([data-glow="none"]) .cardgrid .card .miniFlip{
  z-index:0;
}

html[data-glow]:not([data-glow="none"]) .pickCardBig::before,
html[data-glow]:not([data-glow="none"]) .cardFlip::before,
html[data-glow]:not([data-glow="none"]) .cardgrid .card .miniFlip::before{
  content:"";
  position:absolute;
  inset:-26px;
  border-radius:40px;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 86%, var(--glow-aura), rgba(0,0,0,0) 72%),
    radial-gradient(circle at 30% 52%, var(--glow-aura2), rgba(0,0,0,0) 74%),
    radial-gradient(circle at 70% 56%, var(--glow-aura2), rgba(0,0,0,0) 76%),
    radial-gradient(closest-side, rgba(0,0,0,0) 54%, var(--glow-aura), rgba(0,0,0,0) 92%);
  mix-blend-mode: screen;
  opacity: .92;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 64%, transparent 100%);
  animation: glowPulse 1.6s ease-in-out infinite;
}

html[data-glow="prism"] .pickCardBig::before,
html[data-glow="prism"] .cardFlip::before,
html[data-glow="prism"] .cardgrid .card .miniFlip::before{
  background: linear-gradient(90deg, rgba(91,140,255,.52), rgba(168,85,247,.52), rgba(34,211,238,.52), rgba(245,158,11,.42), rgba(236,72,153,.50));
  background-size: 300% 300%;
  filter: blur(18px) saturate(1.35);
  animation: glowPrism 2.8s linear infinite;
}

html[data-glow]:not([data-glow="none"]) .pickedMini2,
html[data-glow]:not([data-glow="none"]) .cardgrid .card .miniFace--front,
html[data-glow]:not([data-glow="none"]) .cardgrid .card .miniFace--back,
html[data-glow]:not([data-glow="none"]) .cardFace--front,
html[data-glow]:not([data-glow="none"]) .cardFace--back,
html[data-glow]:not([data-glow="none"]) .pickCardBig,
html[data-glow]:not([data-glow="none"]) .cardFlip{
  border-color: var(--glow-rim);
  box-shadow: var(--shadow2), 0 0 0 2px rgba(255,255,255,.04), 0 0 26px var(--glow-aura);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color:var(--text);
  background:
    radial-gradient(1100px 780px at 50% -200px, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 700px at 20% 20%, rgba(168,85,247,.10), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(91,140,255,.08), transparent 55%),
    linear-gradient(180deg, var(--bg2), var(--bg));
}

/* generic helper */
.hidden{display:none !important}

/* =========================
   Reading flow (TarotGo-like)
   ========================= */
.detailHero{margin:10px 0 14px;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:16/9;background:#111;border:1px solid rgba(255,255,255,.06)}
.detailHero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.65))}
.detailHero img{width:100%;height:100%;object-fit:cover;display:block}
.detailHero .heroText{position:absolute;left:16px;right:16px;bottom:14px;z-index:1}
.detailHero .heroTitle{font-size:20px;font-weight:900;letter-spacing:-.2px}
.detailHero .heroSub{margin-top:4px;color:rgba(255,255,255,.72);line-height:1.35;font-size:13px}

.qLabel{font-size:18px;font-weight:900;margin:10px 0 8px;letter-spacing:-.2px}
.qInputBig{width:100%;padding:16px 14px;border-radius:16px;border:1px solid var(--stroke2);background:rgba(255,255,255,.03);color:#fff;outline:none}
.qInputBig::placeholder{color:rgba(255,255,255,.35)}

.suggestBlock{margin-top:14px}
.suggestTitle{display:flex;align-items:center;gap:10px;margin:12px 0 8px;color:rgba(255,255,255,.9);font-weight:900}
.suggestList{display:flex;flex-direction:column;gap:10px}
.suggestBtn{border:1px solid var(--stroke2);background:rgba(255,255,255,.03);color:#fff;padding:14px 16px;border-radius:999px;text-align:left}
.suggestBtn:active{transform:scale(.995)}

.ctaWide{width:100%;border:0;border-radius:999px;padding:16px 18px;font-weight:900;color:#fff;background:linear-gradient(90deg, rgba(47,114,255,.85), rgba(168,85,247,.92));box-shadow:0 12px 26px rgba(168,85,247,.18)}
.ctaWide[disabled]{opacity:.45}

.pickCarouselWrap{position:relative;margin:0 -16px}
.pickCarousel{
  /* Base carousel container */
  position:relative;
  overflow-x:hidden;
  overflow-y:visible;
  padding:18px 0 12px;
  perspective: 900px;
  touch-action: pan-y;
  user-select:none;
}
.pickCarousel::-webkit-scrollbar{display:none}

/* Track-based carousel (JS-driven) */
.pickTrack{
  display:flex;
  gap:12px;
  padding:0 18vw; /* side peeks like in reference */
  will-change: transform;
  transform: translate3d(0,0,0);
}
.pickCarousel.is-anim .pickTrack{transition: transform .46s cubic-bezier(.18,.95,.2,1)}
.pickCarousel.is-dragging .pickTrack{transition:none}
.pickCardBig{
  /* medium size (closer to tarotgo, not oversized) */
  flex:0 0 52vw;
  max-width:300px;
  aspect-ratio:2/3;
  border-radius:24px;
  background-image:var(--card-back);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.08);
  scroll-snap-align:center;
  position:relative;
  box-shadow:0 18px 34px rgba(0,0,0,.35);
  transform-origin:center;
  will-change: transform, opacity;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .22s linear, background-position .22s linear;
  /* dynamic scroll animation (values set from JS) */
  --sc: .92;
  --ty: 18px;
  --ry: 0deg;
  --rz: 0deg;
  --op: .75;
  transform: translateY(var(--ty)) scale(var(--sc)) rotateY(var(--ry)) rotateZ(var(--rz));
  opacity: var(--op);
}
.pickCardBig::after{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.30));}
.pickCarousel.is-dragging .pickCardBig{transition:none}
.pickCarousel.is-scrolling .pickCardBig{transition:none}
.pickCardBig.is-center{opacity:1}
.pickCardBig.is-selected{outline:2px solid rgba(168,85,247,.95);box-shadow:0 0 0 6px rgba(168,85,247,.22), 0 0 36px rgba(245,83,192,.18)}

/* spring/bounce when snapping to center */
.pickCardBig.is-bounce{animation: pickBounce .35s cubic-bezier(.2,.9,.2,1)}
@keyframes pickBounce{
  0%{transform: translateY(var(--ty)) scale(var(--sc)) rotateY(var(--ry)) rotateZ(var(--rz));}
  55%{transform: translateY(calc(var(--ty) - 10px)) scale(calc(var(--sc) + .03)) rotateY(var(--ry)) rotateZ(var(--rz));}
  100%{transform: translateY(var(--ty)) scale(var(--sc)) rotateY(var(--ry)) rotateZ(var(--rz));}
}

.pickCarousel.is-dragging{cursor:grabbing}
.pickCarousel{cursor:grab}

.carArr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.35);color:#fff;font-size:26px;line-height:0;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 18px 40px rgba(0,0,0,.35);backdrop-filter: blur(8px)}
.carArr:active{transform:translateY(-50%) scale(.98)}
.carArr--left{left:10px}
.carArr--right{right:10px}
/* On touch devices, arrows are optional; hide by default */
@media (hover:none) and (pointer:coarse){
  .carArr{display:none}
}

.pickedMeta2{margin-top:12px}
.pickedTitle2{font-weight:900;font-size:18px}
.pickedMiniRow{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.pickedMini2{width:56px;height:84px;border-radius:12px;background-image:var(--card-back);background-size:cover;background-position:center;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.10)}

.resultCard{width:120px;aspect-ratio:2/3;border-radius:18px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.10)}
.answerBig{font-size:44px;font-weight:1000;letter-spacing:-.6px;margin:6px 0 6px}
.mutedP{color:rgba(255,255,255,.65);line-height:1.55}
.shareBtn{margin-top:18px;width:100%;padding:16px 18px;border-radius:999px;border:1px solid var(--stroke2);background:rgba(255,255,255,.02);color:#fff;font-weight:900}

.premiumNote{margin:12px 0;border:1px solid rgba(255,140,0,.35);color:rgba(255,180,110,.95);padding:12px 14px;border-radius:16px;background:rgba(255,140,0,.06);text-align:center;line-height:1.35}
button{font:inherit}
img{max-width:100%;display:block}

.app{
  max-width:520px;
  margin:0 auto;
  min-height:100vh;
  padding:18px 16px calc(128px + env(safe-area-inset-bottom, 0px));
}

/* Desktop web (match play.tarotgo.app proportions: wider content, centered) */
@media (min-width: 900px){
  .app{
    max-width: 980px;
    padding: 22px 22px calc(128px + env(safe-area-inset-bottom, 0px));
  }

  /* Deck previews: compact and strictly tarot-shaped (avoid square cards on desktop) */
  .deckrow{justify-content:center;gap:14px;padding-bottom:14px}
  .deckcard{min-width:132px;max-width:132px}
  .deckimg{width:132px;height:186px;aspect-ratio:auto}

  .pills{justify-content:center}
  .cardgrid{max-width:700px;margin:0 auto;grid-template-columns:repeat(3, 1fr);gap:16px}
}

/* screens */
.screen{display:none;animation:fade .18s ease-out}
.screen.active{display:block}
@keyframes fade{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* top */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.chip{
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:10px 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.chip--ghost{background:rgba(255,255,255,.035)}
.topbar-actions{display:flex;gap:10px}
.iconbtn{
  width:48px;height:40px;
  border-radius:999px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.045);
  color:#fff;
}
.iconbtn:active{transform:scale(.985)}

/* profile */
.profile{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:10px 0 16px}
.profile-left{display:flex;gap:10px;align-items:center}
.avatar{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.12)}
.profile-name{font-weight:800;font-size:18px;letter-spacing:-.2px}
.profile-sub{font-size:12px;color:var(--muted2);margin-top:2px}
.progress{height:6px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:8px;overflow:hidden}
.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent3), var(--accent))}
.energy{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.energy-label{font-size:12px;color:var(--muted2)}
.energy-pill{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow2);
}
.energy-pill--blue{background:rgba(77,124,255,.10);border-color:rgba(77,124,255,.22)}
.energy-num{font-weight:800}
.energy-plus{opacity:.85}

/* typography */
.h1{margin:12px 0 8px;font-size:30px;font-weight:850;letter-spacing:-.7px}
.h2{margin:22px 0 10px;font-size:22px;letter-spacing:-.3px}
.h2--tight{margin-top:16px}
.p{margin:0 0 14px;color:var(--muted);line-height:1.5;font-size:15.5px}

/* segments (Колода / Обложка) */
.seg{
  display:flex;
  gap:10px;
  margin:16px 0 14px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.segbtn{
  flex:1;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  border-radius:999px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.segbtn .segico{opacity:.9}
.segbtn.is-active{
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  color:#fff;
  box-shadow: var(--shadow2);
}

/* deck row */
/* Important: allow vertical glow around deck/cover previews without being clipped */
.deckrow{display:flex;gap:16px;overflow-x:auto;overflow-y:visible;padding:10px 2px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.deckrow::-webkit-scrollbar{display:none}
.deckcard{min-width:148px;max-width:148px;border:0;background:transparent;border-radius:22px;padding:0;color:#fff;text-align:center}
/* Deck previews must always look like tarot cards (2:3). We set an explicit width so the ratio never collapses */
.deckimg{width:148px;height:222px;aspect-ratio:2 / 3;display:block;margin:0 auto;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.deckimg::after{content:'';position:absolute;inset:0;border-radius:24px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -18px 40px rgba(0,0,0,.28);pointer-events:none}
.deckcard.is-active .deckimg{border-color:rgba(168,85,247,.95);box-shadow:0 0 0 2px rgba(168,85,247,.75), var(--shadow)}

/* demo previews for decks/covers */
.deckimg--orig{background: url('assets/cards/m00.jpg') center/cover no-repeat}
.deckimg--rider{background: url('assets/cards/p01.jpg') center/cover no-repeat}
.deckimg--celt{background: url('assets/cards/m17.jpg') center/cover no-repeat; filter: hue-rotate(40deg) saturate(1.1)}
.deckimg--egy{background: url('assets/cards/m19.jpg') center/cover no-repeat; filter: hue-rotate(120deg) saturate(1.15)}
/* Cover previews (Order: Free -> Premium -> Stars) */
.deckimg--cover1{background: url('assets/covers/blue-night.jpg') center/cover no-repeat}
.deckimg--cover2{background: url('assets/covers/celestial-cream.jpg') center/cover no-repeat}
.deckimg--cover3{background: url('assets/covers/cosmic-gold.jpg') center/cover no-repeat}
.deckimg--cover4{background: url('assets/covers/void-figure.jpg') center/cover no-repeat}
.deckimg--cover5{background: url('assets/covers/teal-sun.jpg') center/cover no-repeat}
.deckimg--cover6{background: url('assets/covers/wheel-fortune.jpg') center/cover no-repeat}
.deckimg--cover7{background: url('assets/covers/witch-cat.jpg') center/cover no-repeat}

/* =========================
   Colors tab preview tiles
   ========================= */
.deckimg--glow{background: rgba(255,255,255,.04);}
.deckimg--glow::before{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;}
.deckimg--glow-none::before{background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));}
.deckimg--glow-violet::before{background:radial-gradient(circle at 30% 30%, rgba(168,85,247,.90), rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, rgba(91,140,255,.55), rgba(0,0,0,0) 62%);}
.deckimg--glow-emerald::before{background:radial-gradient(circle at 30% 35%, rgba(16,185,129,.88), rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, rgba(34,211,238,.52), rgba(0,0,0,0) 62%);}
.deckimg--glow-gold::before{background:radial-gradient(circle at 30% 35%, rgba(245,158,11,.90), rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, rgba(255,240,180,.55), rgba(0,0,0,0) 64%);}
.deckimg--glow-ice::before{background:radial-gradient(circle at 30% 35%, rgba(56,189,248,.88), rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, rgba(167,243,208,.48), rgba(0,0,0,0) 64%);}
.deckimg--glow-magenta::before{background:radial-gradient(circle at 30% 35%, rgba(236,72,153,.88), rgba(0,0,0,0) 60%), radial-gradient(circle at 70% 70%, rgba(168,85,247,.48), rgba(0,0,0,0) 64%);}
.deckimg--glow-void::before{background:radial-gradient(circle at 30% 35%, rgba(99,102,241,.72), rgba(0,0,0,0) 62%), radial-gradient(circle at 70% 70%, rgba(0,0,0,.55), rgba(0,0,0,0) 66%);}
.deckimg--glow-prism::before{background:linear-gradient(90deg, rgba(91,140,255,.65), rgba(168,85,247,.65), rgba(34,211,238,.65), rgba(245,158,11,.55), rgba(236,72,153,.62));background-size:300% 300%;animation: glowPrism 2.8s linear infinite;filter:saturate(1.25)}
.premium{position:absolute;top:10px;left:10px;font-size:12px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.18)}

/* Shop badges / overlays (deck & covers) */
.deckbadge{position:absolute;top:10px;left:10px;font-size:12px;padding:6px 12px;border-radius:999px;display:inline-flex;gap:6px;align-items:center;z-index:3;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.38)}
.deckbadge__ico{font-size:12px;opacity:.95}
.deckbadge__txt{font-weight:700;letter-spacing:.2px}

/* Premium badge (as on reference screenshot) */
.deckbadge--premium{background:linear-gradient(90deg,#ffb703,#fb8500);border-color:rgba(0,0,0,.12);color:#111}
.deckbadge--premium .deckbadge__ico{opacity:1}
.deckbadge--premium .deckbadge__txt{font-weight:800}

/* Stars badge */
.deckbadge--stars{background:rgba(255,183,3,.92);border-color:rgba(0,0,0,.12);color:#111}

.decklock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));}
.decklockbtn{pointer-events:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:14px;font-weight:700;font-size:13px;border:1px solid rgba(255,180,110,.55);background:rgba(255,140,0,.25);color:rgba(255,220,190,.98);box-shadow:0 10px 20px rgba(0,0,0,.25)}
.deckcard.is-locked .deckimg{filter:saturate(.85) contrast(.95)}

/* Modal */
.modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:16px}
.modal.hidden{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modal__card{position:relative;width:min(520px, 100%);border-radius:24px;padding:16px 16px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(20,20,22,.82);backdrop-filter: blur(14px);-webkit-backdrop-filter: blur(14px);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.modal__title{font-size:18px;font-weight:800;margin:2px 2px 8px}
.modal__text{font-size:14px;line-height:1.45;color:rgba(255,255,255,.78);margin:0 2px 12px}
.modal__actions{display:flex;gap:10px;justify-content:flex-end}
.deckname{margin-top:10px;font-weight:700;color:rgba(255,255,255,.88)}

/* library pills */
.pills{display:flex;gap:12px;overflow:auto;padding:10px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.pills::-webkit-scrollbar{display:none}
.pillbtn{
  white-space:nowrap;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.82);
  border-radius:999px;
  padding:12px 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.pillbtn.is-active{background:linear-gradient(135deg,var(--accent3),var(--accent));border-color:rgba(168,85,247,.60);color:#fff;box-shadow: var(--shadow2)}

/* cards grid (tarot proportions) */
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cardgrid .card{border:0;background:transparent;border-radius:18px;overflow:visible;min-height:0;padding:0;text-align:center}

/* mini flip (library grid): cards are face-down by default; tap to reveal */
.cardgrid .card .miniFlip{width:100%;aspect-ratio:2/3;border-radius:22px;position:relative;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1);transform:rotateY(180deg)}
.cardgrid .card.is-flipped .miniFlip{transform:rotateY(0deg)}
.cardgrid .card .miniFace{position:absolute;inset:0;border-radius:22px;overflow:hidden;backface-visibility:hidden;border:2px solid rgba(52, 180, 168, .35);box-shadow: 0 18px 40px rgba(0,0,0,.45);background:rgba(255,255,255,.02)}
.cardgrid .card .miniFace img{width:100%;height:100%;object-fit:cover;display:block}
.cardgrid .card .miniFace--back{transform:rotateY(180deg);background: var(--card-back) center/cover no-repeat}
.cardgrid .card .n{font-weight:700;margin-top:8px;font-size:13px;color:rgba(255,255,255,.90)}

/* hscroll cards */
.hscroll{display:flex;gap:14px;overflow:auto;padding:8px 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.hscroll::-webkit-scrollbar{display:none}
.hcard{min-width:250px;height:150px;border-radius:24px;border:0;background:rgba(255,255,255,.045);position:relative;color:#fff;overflow:hidden;box-shadow: var(--shadow)}
.hcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.70));}
.hcard-overlay{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.hcard-title{font-weight:900;font-size:20px;letter-spacing:-.3px}
.hcard-text{font-size:13px;color:rgba(255,255,255,.74);line-height:1.35}

/* reading */
.readingPanel{margin-top:12px}
.readingBox{display:flex;gap:12px;align-items:stretch}
.readingInput{flex:1;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;padding:12px 12px;resize:none;outline:none}
.readingInput::placeholder{color:rgba(255,255,255,.45)}
.readingCards{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* tiles */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{border-radius:24px;border:0;background:rgba(255,255,255,.06);padding:16px;color:#fff;text-align:left;min-height:160px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.35);position:relative}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));}
.tile > *{position:relative}
.tile-name{font-weight:900;font-size:14px;background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:10px;display:inline-flex}
.tile-title{margin-top:10px;font-weight:900;font-size:16px}
.tile-text{margin-top:6px;font-size:13px;color:rgba(255,255,255,.72);line-height:1.35}

/* buttons */
.btn{border:0;border-radius:18px;padding:12px 14px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.btn--ghost{background:transparent}
.btn--pill{border-radius:999px}
.btn--gradient{background:linear-gradient(135deg,var(--accent),var(--accent2));border:1px solid rgba(255,255,255,.18)}

/* tasks */
.tasks{display:flex;flex-direction:column;gap:14px}
.task{border-radius:24px;border:1px solid rgba(139,92,246,.55);background:rgba(255,255,255,.06);padding:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:0 18px 40px rgba(0,0,0,.30)}
.task-left{display:flex;gap:14px;align-items:center}
.task-icon{font-size:30px}
.task-title{font-weight:900;font-size:18px;line-height:1.1}
.task-sub{margin-top:6px;color:rgba(255,255,255,.62);font-size:13px;line-height:1.25;max-width:520px}
.task-reward{margin-top:6px;color:rgba(255,255,255,.72);font-weight:700}

/* =========================
   Settings UI (like reference)
   ========================= */
.settingsList{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.settingsRow{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);box-shadow:0 14px 36px rgba(0,0,0,.28)}
.settingsRow:active{transform:scale(.99)}
.settingsLeft{display:flex;align-items:center;gap:12px}
.settingsIco{width:32px;height:32px;display:grid;place-items:center;font-size:18px;color:var(--accent)}
.settingsTxt{font-weight:900;font-size:16px}
.settingsRight{display:flex;align-items:center;gap:10px;color:var(--muted)}
.settingsVal{font-weight:700;font-size:14px;opacity:.85}
.settingsChevron{font-size:22px;opacity:.6}

.premiumBlock{margin-top:18px;padding:18px;border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10)}
.premiumTitle{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:1000;margin-bottom:10px}
.premiumTag{float:right;margin-top:-44px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:14px;font-weight:800;font-size:12px;opacity:.85}
.premiumList{margin:10px 0 14px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.premiumList li{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.82);font-weight:700}
.premIco{width:22px;display:inline-grid;place-items:center;opacity:.9}

.ctaWide{width:100%;border-radius:999px;border:1px solid rgba(255,255,255,.14);padding:14px 16px;font-weight:900;font-size:16px;background:rgba(255,255,255,.06);color:var(--text);display:flex;align-items:center;justify-content:center;gap:10px}
.ctaWide + .ctaWide{margin-top:10px}
.ctaWide--gold{background:linear-gradient(90deg,#facc15,#fb923c);color:#121212;border:0}
.ctaWide--ghost{background:transparent;border:1px solid rgba(250,204,21,.55);color:var(--text)}
.ctaWide--grad{background:linear-gradient(90deg,var(--accent2),var(--accent));border:0}

.feedbackBlock{margin-top:18px}
.feedbackTitle{font-size:26px;font-weight:1000;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.feedbackSub{color:var(--muted);font-size:14px;margin-bottom:12px}

/* Bottom sheet picker */
.sheet.hidden{display:none}
.sheet{position:fixed;inset:0;z-index:140}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sheet-panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(var(--app-max), calc(100% - 12px));border-radius:26px 26px 0 0;background:rgba(24,24,28,.92);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);padding:12px 14px 16px}
html[data-theme="light"] .sheet-panel{background:rgba(255,255,255,.92)}
.sheetHandle{width:46px;height:5px;border-radius:99px;background:rgba(255,255,255,.22);margin:6px auto 10px}
.sheetTitle{font-weight:1000;font-size:18px;margin:2px 2px 10px}
.sheetList{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow:auto;padding-bottom:10px}
.sheetItem{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--text);font-weight:900}
.sheetItem .muted{font-weight:800;color:var(--muted);font-size:13px}
.sheetItem.is-active{border-color:rgba(168,85,247,.7);box-shadow:0 0 0 2px rgba(168,85,247,.18) inset}
.sheetClose{width:100%;border-radius:999px;margin-top:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--text);font-weight:1000}

/* modal */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;z-index:120}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal-sheet{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(520px, calc(100% - 28px));
  max-height: calc(100vh - 120px);
  overflow:auto;
  border-radius:26px;
  background:rgba(24,24,28,.88);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding:16px;
}
.modal-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff}
.modal-imgwrap{
  width:100%;
  aspect-ratio: 2 / 3;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.modal-imgwrap img{width:100%;height:100%;object-fit:contain}
.modal-title{margin-top:12px;font-weight:900;font-size:18px}
.modal-sub{margin-top:6px;color:var(--muted2);font-size:12px}

@media (min-width: 700px){
  .modal-sheet{bottom:auto;top:50%;transform:translate(-50%,-50%)}
}

.spacer{height:24px}

/* =========================
   Karma (levels & progress)
   ========================= */

.karmaProgressCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  padding:14px 14px 16px;
}
.karmaTopRow{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.karmaLeft{display:flex;gap:12px;align-items:center}
.karmaMedal{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:22px}
.karmaLevelMeta{display:flex;flex-direction:column;gap:6px}
.karmaBadges{display:flex;gap:8px;align-items:center}
.kChip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22);color:rgba(255,255,255,.86);font-weight:800;font-size:12px}
.kChip--purple{border-color:rgba(168,85,247,.35);background:rgba(168,85,247,.14)}
.karmaTitle{font-size:22px;font-weight:950;letter-spacing:-.2px;line-height:1.1}
.karmaRightPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:950}
.karmaRightPill .kIcon{opacity:.9}
.karmaSubRow{display:flex;justify-content:space-between;align-items:center;margin-top:12px;color:rgba(255,255,255,.62);font-size:12px}
.karmaBar{height:10px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.karmaBar > div{height:100%;border-radius:999px;background:linear-gradient(90deg, rgba(168,85,247,.95), rgba(91,140,255,.85));width:0%}

.chests{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 18px}
.chestCard{border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:14px 12px;box-shadow:0 14px 30px rgba(0,0,0,.22);text-align:center;position:relative}
.chestCard.is-locked{opacity:.78}
.chestImg{font-size:52px;line-height:1;margin-top:2px;filter:drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.chestTitle{margin-top:10px;font-weight:950;letter-spacing:-.2px}
.chestBadge{margin:8px auto 10px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.78);font-weight:850;font-size:12px}

.levels{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.levelCard{border-radius:22px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);padding:14px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.levelCard.is-current{border-color:rgba(168,85,247,.6);box-shadow:0 18px 44px rgba(168,85,247,.12), 0 14px 30px rgba(0,0,0,.22)}
.levelCard.is-locked{opacity:.55;filter:saturate(.85)}
.lvlLeft{display:flex;gap:12px;align-items:flex-start}
.lvlIcon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:22px}
.lvlText{display:flex;flex-direction:column;gap:6px;min-width:0}
.lvlLine1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lvlName{font-size:18px;font-weight:950;letter-spacing:-.2px}
.lvlDesc{color:rgba(255,255,255,.55);font-size:12px;line-height:1.25;max-width:280px}
.lvlRight{display:flex;align-items:center;gap:8px}
.lvlPrice{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);font-weight:900;color:rgba(255,255,255,.80);font-size:12px;white-space:nowrap}
.lvlLock{opacity:.75}

/* ===== Bottom Nav (match screenshots) ===== */
.bottomnav{
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(var(--app-max), calc(100vw - 28px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  height: 78px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;

  border-radius: 28px;
  background: rgba(24, 24, 28, .62);
  border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 22px 55px rgba(0,0,0,.60), inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 90;
}

body.detail-open .bottomnav{display:none}

/* ===== Card detail (Deck library) ===== */
.topbar--detail{position:sticky;top:0;z-index:30;padding-top:10px;background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.detailWrap{padding:12px 18px 28px}
.detailCarousel{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 22px 6px;-webkit-overflow-scrolling:touch}
.detailCarousel::-webkit-scrollbar{display:none}
.detailSlide{flex:0 0 78%;scroll-snap-align:center;position:relative}
.cardFlip{width:100%;aspect-ratio:2/3;border-radius:28px;position:relative;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cardFlip.is-back{transform:rotateY(180deg)}
.cardFace{position:absolute;inset:0;border-radius:28px;overflow:hidden;backface-visibility:hidden;border:2px solid rgba(52,180,168,.35);box-shadow:0 30px 80px rgba(0,0,0,.55);background:rgba(255,255,255,.03)}
.cardFace img{width:100%;height:100%;object-fit:cover;display:block}
.cardFace--back{transform:rotateY(180deg)}
.premiumNote{margin:14px 0 16px;border-radius:16px;border:1px solid rgba(255,128,0,.55);padding:12px 14px;color:rgba(255,192,140,.95);background:rgba(255,128,0,.08);line-height:1.35;font-size:13px;text-align:center}
.detailTitle{font-size:34px;letter-spacing:-.8px;margin:6px 0 6px}
.detailText{color:rgba(255,255,255,.70);line-height:1.55;font-size:15px;margin:0 0 18px}
.detailActions{display:flex;flex-direction:column;gap:12px}
.btn--share{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.shareIco{margin-left:8px;opacity:.8}
.adBadge{margin-left:10px;font-weight:900;font-size:11px;background:rgba(255,90,90,.18);border:1px solid rgba(255,90,90,.55);padding:2px 6px;border-radius:10px}
.bottomnav::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
  mix-blend-mode: overlay;
}

.navbtn{
  width: 74px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 6px 10px;
  border-radius: 18px;
  position:relative;
}
.navbtn:active{transform:scale(.985)}

.navico{
  width: 26px;
  height: 26px;
  display:grid;
  place-items:center;
  opacity: .95;
}
.navico svg{display:block}

.navtxt{
  font-size: 11px;
  line-height: 1;
  letter-spacing: .2px;
  opacity: .85;
}

.navbtn.is-active{color:var(--accent)}
.navbtn.is-active .navtxt{opacity:1}

.navbtn--center{
  width: 90px;
  transform: translateY(-26px);
  gap: 8px;
}

.navbtn--center .navtxt{display:none}

.navbtn--center .navtxt{display:none}

.centerwrap{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  background:
    radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.22), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 22px 55px rgba(0,0,0,.60), 0 0 0 8px rgba(168,85,247,.12);
  border: 1px solid rgba(255,255,255,.18);
}
.centerico{color:rgba(255,255,255,.95)}

/* Mobile tweaks */
@media (max-width:360px){
  .navbtn{width:66px}
  .navbtn--center{width:84px}
  .deckcard{min-width:132px;max-width:132px}
  .deckimg{width:132px;height:198px}
}

/* ===== Read screen: spreads + psychics (match screenshots) ===== */
.hscroll{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px 6px;margin:0 -16px}
.hscroll::-webkit-scrollbar{display:none}

/* top spread tabs (Daily / YesNo / One / Three / Five) */
.spreadTabs{display:flex;gap:10px;overflow-x:auto;overscroll-behavior:contain;padding:8px 16px 10px;margin:0 -16px}
.spreadTabs::-webkit-scrollbar{display:none}
.spreadTab{flex:0 0 auto;height:42px;padding:0 14px;border-radius:999px;background: rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:8px;font-weight:800}
.spreadTab .ico{opacity:.9;font-size:15px}
.spreadTab.is-active{background: linear-gradient(90deg, rgba(61,139,255,.55), rgba(181,92,255,.70));border-color: rgba(255,255,255,.16);color:#fff;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.spreadTab:active{transform:scale(.99)}
.hcard{
  min-width:260px;
  height:220px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background: var(--bg) center/cover no-repeat;
  position:relative;
  color:#fff;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}
.hcard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.78) 100%);
}
.hcard-overlay{position:absolute;inset:0;z-index:1;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.hcard-title{font-weight:900;font-size:22px;letter-spacing:-.3px;text-shadow:0 6px 18px rgba(0,0,0,.65)}
.hcard-text{max-width:92%;font-size:13px;color:rgba(255,255,255,.78);line-height:1.35;text-shadow:0 6px 18px rgba(0,0,0,.65)}
.hcard:active{transform:scale(.985)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:10px 0 6px}
.tile{
  height:230px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.08);
  background: var(--bg) center/cover no-repeat;
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  text-align:left;
  box-shadow: 0 22px 50px rgba(0,0,0,.35);
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.16) 42%, rgba(0,0,0,.82) 100%);
}
.tile-name{
  position:absolute;
  left:14px;
  top:14px;
  z-index:1;
  padding:6px 12px;
  border-radius:12px;
  font-weight:700;
  font-size:13px;
  color:rgba(255,255,255,.92);
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tile-title{
  position:absolute;
  left:16px;
  right:16px;
  bottom:44px;
  z-index:1;
  font-weight:900;
  font-size:18px;
  letter-spacing:-.3px;
  text-shadow:0 6px 18px rgba(0,0,0,.65);
}
.tile-text{
  position:absolute;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:1;
  font-size:13px;
  color:rgba(255,255,255,.76);
  line-height:1.32;
  text-shadow:0 6px 18px rgba(0,0,0,.65);
}
.tile:active{transform:scale(.985)}

/* ===== Flow (pick -> generate -> result) ===== */
.flow{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:center}
.flow.hidden{display:none}
.flow-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.58);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)}
.flow-screen{position:relative;z-index:1;width:100%;max-width:520px;min-height:100%;padding:14px 16px;background: radial-gradient(120% 90% at 50% 0%, rgba(120,76,255,.10), rgba(0,0,0,0)),
  linear-gradient(180deg, rgba(18,20,28,.92), rgba(10,10,12,.96));}

@keyframes flowIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.flow-screen:not(.hidden){animation:flowIn .18s ease-out}
.flowTop{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:4px}
.flowTitle{font-weight:900;font-size:16px;opacity:.95}
.flowSub{margin:10px 0 12px;color:rgba(255,255,255,.62);font-size:14px}

.pickRow{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;overscroll-behavior:contain;padding:6px 2px 10px;margin:10px -2px 18px}
.pickRow::-webkit-scrollbar{height:6px}
.pickRow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}
.pickCard{flex:0 0 auto;width:56px;height:164px;border-radius:16px;background: var(--card-back) center/cover no-repeat;border:1px solid rgba(255,255,255,.10);box-shadow:0 18px 40px rgba(0,0,0,.42);position:relative;transform:translateZ(0)}
.pickCard::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow: inset 0 0 0 1px rgba(255,255,255,.06)}
.pickCard.is-selected{box-shadow:0 0 0 0 rgba(0,0,0,0), 0 0 0 6px rgba(178,88,255,.20), 0 18px 60px rgba(178,88,255,.35)}
.pickCard:active{transform:scale(.985)}

.pickedMeta{margin-top:6px}
.pickedTitle{font-weight:800;margin:6px 0 10px}
.pickedRow{display:flex;gap:10px;min-height:54px}
.pickedMini{width:42px;height:54px;border-radius:10px;background: var(--card-back) center/cover no-repeat;border:1px solid rgba(255,255,255,.12);opacity:.95}

.qBlock{margin:18px 0 14px}
.qTitle{font-weight:900;margin-bottom:8px}
.qInput{width:100%;height:54px;border-radius:16px;padding:0 14px;background: rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:#fff;outline:none}
.qInput::placeholder{color:rgba(255,255,255,.45)}

.voiceRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 18px}
.voiceTitle{font-weight:900}
.voiceSub{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px}
.crown{opacity:.9}
.switch{position:relative;width:50px;height:28px;display:inline-block}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:999px;transition:.2s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:3px;top:2px;background:#fff;border-radius:999px;transition:.2s}
.switch input:checked + .slider{background:rgba(178,88,255,.38)}
.switch input:checked + .slider:before{transform:translateX(22px)}

.bigCta{width:100%;height:54px;border-radius:18px;border:0;color:#fff;font-weight:900;font-size:16px;
  background: linear-gradient(90deg, #3d8bff, #b55cff);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.bigCta:disabled{opacity:.45}
.bigCta:active{transform:scale(.99)}
.safeBottom{height:24px}

/* =========================
   Psychic chat
   ========================= */
.chatBody{
  padding:12px 10px 94px;
  overflow:auto;
  height:calc(100vh - 56px);
}

.msg{
  display:flex;
  margin:10px 0;
}
.msg--me{justify-content:flex-end}

.bubble{
  max-width:78%;
  padding:10px 12px;
  border-radius:16px;
  font-size:14px;
  line-height:1.25;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.msg--me .bubble{
  background:rgba(154,77,255,.18);
  border-color:rgba(154,77,255,.22);
}

.bubbleMeta{
  margin-top:6px;
  font-size:11px;
  opacity:.55;
}

.bubble--pay{max-width:86%}
.payInChat{
  margin-top:10px;
  width:100%;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:900;
}
.payInChat:active{transform:scale(.99)}

.chatComposer{
  position:fixed;
  left:0; right:0;
  bottom:0;
  z-index:260;
  padding:10px 10px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  display:flex;
  gap:10px;
  align-items:center;
}

/* =========================
   Flip cards (result reveal)
   ========================= */
.resCards{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:14px 0 10px}
.flipCard{width:118px;height:176px;perspective:900px}
.flipInner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flipCard.is-flipped .flipInner{transform:rotateY(180deg)}
.flipFace{position:absolute;inset:0;border-radius:18px;border:1px solid rgba(255,255,255,.10);box-shadow:0 22px 60px rgba(0,0,0,.45);backface-visibility:hidden;background:center/cover no-repeat}
.flipBack{background: var(--card-back) center/cover no-repeat}
.flipFront{transform:rotateY(180deg)}

.chatInput{
  flex:1;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.07);
  color:#fff;
  padding:0 14px;
  outline:none;
}
.chatInput::placeholder{color:rgba(255,255,255,.55)}

.chatSend{
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(154,77,255,.22);
  color:#fff;
}

.typing{
  opacity:.65;
  font-size:13px;
  margin:8px 0 0 4px;
}

.genCenter{height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.genIcon{position:relative;width:130px;height:110px;margin-bottom:18px}
.genCard{position:absolute;inset:18px 30px;border-radius:18px;background: linear-gradient(180deg,#ff5f6d,#b55cff);filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));}
.genCard.g1{transform:rotate(-18deg) translateX(-14px);opacity:.8}
.genCard.g2{transform:rotate(16deg) translateX(14px);opacity:.7;background: linear-gradient(180deg,#ffb86b,#ff5f6d)}
.genCard.g3{inset:10px 26px;transform:rotate(-2deg);opacity:1;background: linear-gradient(180deg,#ff5f6d,#3d8bff)}
.genTitle{font-weight:900;font-size:22px;margin:6px 0 8px}
.genText{color:rgba(255,255,255,.62);line-height:1.4}

.resCardBox{border-radius:22px;background: rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.resH{font-weight:900;margin-bottom:8px}
.resP{color:rgba(255,255,255,.72);line-height:1.5}

/* custom deck preview (uses CSS var --bg) */
.deckimg--custom{background: var(--bg) center/cover no-repeat}

/* NOTE: deck preview sizing is defined near the deck row styles (keep 2:3 tarot ratio) */

/* =========================
   Pay modals (Premium / Energy)
   ========================= */
.paySheet{max-width:560px;width:calc(100% - 28px);border-radius:28px;padding:18px 18px 16px;background:rgba(16,16,18,.90);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.payTitle{font-size:22px;font-weight:950;letter-spacing:.2px;margin:4px 2px 8px}
.payList{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px;padding:0;list-style:none}
.payItem{display:flex;gap:12px;align-items:flex-start}
.payIco{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(140,80,255,.14);border:1px solid rgba(140,80,255,.26);color:rgba(180,150,255,.95);font-size:18px}
.payTxt{flex:1}
.payMain{font-weight:900}
.paySub{margin-top:2px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.35}
.payTabs{display:flex;gap:10px;margin:6px 0 12px}
.payTab{flex:1;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);font-weight:900}
.payTab.active{border-color:rgba(155,98,255,.85);box-shadow:0 0 0 1px rgba(155,98,255,.35) inset;background:rgba(155,98,255,.12);color:#fff}
.planGrid{display:flex;gap:12px}
.planCard{flex:1;padding:14px 14px;border-radius:20px;border:2px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);position:relative;overflow:hidden}
.planCard.active{border-color:rgba(155,98,255,.92);box-shadow:0 0 0 1px rgba(155,98,255,.35) inset}
.planTop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.planName{font-size:18px;font-weight:950}
.planRadio{width:18px;height:18px;border-radius:999px;border:2px solid rgba(255,255,255,.55)}
.planCard.active .planRadio{border-color:rgba(155,98,255,.95);box-shadow:0 0 0 4px rgba(155,98,255,.25) inset}
.planPrice{margin-top:6px;color:rgba(255,255,255,.72);font-weight:800}
.planTag{position:absolute;left:12px;top:-10px;padding:4px 10px;border-radius:999px;border:1px solid rgba(155,98,255,.55);background:rgba(155,98,255,.16);color:#fff;font-weight:950;font-size:11px}
.payFine{margin-top:10px;color:rgba(255,255,255,.55);font-size:12px;line-height:1.35;text-align:center}

/* Fire aura (witch cover) - keep within row */
#coverRow{overflow-y:visible !important}
.payFeatures{display:flex;flex-direction:column;gap:12px;margin:6px 0 14px}
.payFeat{display:flex;gap:12px;align-items:flex-start}
.payFeatIco{width:36px;height:36px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(140,80,255,.14);border:1px solid rgba(140,80,255,.26);color:rgba(180,150,255,.95);font-size:18px}
.payFeatT{font-weight:950}
.payFeatS{margin-top:2px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.35}
.payPlan{margin:6px 0 12px}
.payPlanCard{padding:14px 14px;border-radius:22px;border:2px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);position:relative;cursor:pointer}
.payPlanCard.selected{border-color:rgba(155,98,255,.92);box-shadow:0 0 0 1px rgba(155,98,255,.35) inset}
.payPlanTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.payPlanName{font-size:18px;font-weight:950}
.payPlanBadge{padding:5px 10px;border-radius:999px;border:1px solid rgba(155,98,255,.55);background:rgba(155,98,255,.16);color:#fff;font-weight:950;font-size:11px;white-space:nowrap}
.payPlanPrice{margin-top:8px;color:rgba(255,255,255,.72);font-weight:900}
.hidden{display:none !important}

.packList{display:flex;flex-direction:column;gap:12px;margin:12px 0 12px}
.packCard{position:relative;padding:16px;border-radius:22px;border:2px solid rgba(255,255,255,.16);background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
.packCard.selected{border-color:rgba(155,98,255,.92);box-shadow:0 0 0 1px rgba(155,98,255,.35) inset}
.packLeft{display:flex;flex-direction:column;gap:6px}
.packName{font-size:18px;font-weight:950}
.packVal{font-size:20px;font-weight:950}
.packRight{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.packPrice{color:rgba(255,255,255,.72);font-weight:900}
.packRadio{width:18px;height:18px;border-radius:999px;border:2px solid rgba(255,255,255,.55)}
.packCard.selected .packRadio{border-color:rgba(155,98,255,.95);box-shadow:0 0 0 4px rgba(155,98,255,.25) inset}
.packRibbon{position:absolute;left:50%;top:-10px;transform:translateX(-50%);padding:4px 10px;border-radius:999px;border:1px solid rgba(155,98,255,.55);background:rgba(155,98,255,.16);color:#fff;font-weight:950;font-size:11px;white-space:nowrap}


/* Telegram avatar photo */
.avatar.has-photo{ background-color: transparent; }


/* Telegram theme integration */
:root{
  --tg-bg: var(--bg);
  --tg-text: var(--text);
  --tg-hint: var(--muted);
  --tg-button: var(--accent);
  --tg-button-text: #fff;
}
body{
  background: var(--tg-bg);
  color: var(--tg-text);
}