/* Phone-first card game for the home page. Desktop gets the same layout, just centered. */
.play-main{display:block!important;max-width:560px;margin:0 auto;padding:0 0 90px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-play,.play{position:relative;margin:14px -8px 18px;padding:26px 18px 30px;border-radius:24px;color:#f6eefc;text-align:center;
  background:radial-gradient(circle at 20% 10%,#ffffff22 0 1px,transparent 2px) 0 0/34px 34px,radial-gradient(circle at 70% 60%,#ffffff18 0 1px,transparent 2px) 0 0/52px 52px,
  radial-gradient(ellipse at 50% 0%,#7c3aed66,transparent 60%),linear-gradient(170deg,#1b1030,#2b1450 55%,#1a0f2e);box-shadow:0 18px 50px #2b145055}
.hero-play .eyebrow,.play .eyebrow{color:#ffd36e;letter-spacing:.14em;font-size:12px;margin:0 0 6px}
.glow{text-shadow:0 0 12px #ffd36e99}
.play-title{font:600 clamp(26px,7vw,34px)/1.15 var(--serif);margin:0 0 6px;color:#fff}
.play-sub{color:#d9c9ef;margin:0 0 16px;font-size:15px}

/* ---------- flip cards ---------- */
.flip-card{position:relative;width:min(24vw,108px);aspect-ratio:3/5;padding:0;border:0;background:none;cursor:pointer;perspective:900px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;border-radius:12px}
.flip-card.big{width:min(56vw,230px)}
.flip-card:disabled{cursor:default}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1.15)}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{background:#2b1450 url('card-back.webp') center/cover;border:2px solid #ffd36e88;box-shadow:0 8px 22px #0008}
.face.front{transform:rotateY(180deg);box-shadow:0 8px 26px #0009,0 0 0 2px #ffd36e}
.flip-card:not(.flipped):disabled .face.back{filter:brightness(.55) saturate(.7)}
.beckon .face.back{animation:beckon 1.6s ease-in-out infinite}
.flip-card.beckon{animation:bob 1.6s ease-in-out infinite}
@keyframes beckon{0%,100%{box-shadow:0 0 0 2px #ffd36e,0 0 14px 2px #ffd36e66}50%{box-shadow:0 0 0 3px #ffd36e,0 0 30px 8px #ff7ac6aa}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.flip-card.flipped{animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

.face-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6%;padding:8% 6%;color:#fff;text-align:center}
.face-art.rev{transform:rotate(180deg)}
.face-art.major{background:radial-gradient(circle at 50% 35%,#ffd36e33,transparent 55%),linear-gradient(160deg,#3b1a6e,#6d28d9)}
.face-art.wands{background:radial-gradient(circle at 50% 35%,#ffb34733,transparent 55%),linear-gradient(160deg,#5a1e0e,#c2410c)}
.face-art.cups{background:radial-gradient(circle at 50% 35%,#7ee0ff33,transparent 55%),linear-gradient(160deg,#0c2f5a,#2563eb)}
.face-art.swords{background:radial-gradient(circle at 50% 35%,#e2e8f033,transparent 55%),linear-gradient(160deg,#111827,#64748b)}
.face-art.pentacles{background:radial-gradient(circle at 50% 35%,#ffd36e33,transparent 55%),linear-gradient(160deg,#123d2a,#15803d)}
.face-art .symbol{font-size:clamp(26px,9vw,44px);line-height:1;filter:drop-shadow(0 2px 6px #0007)}
.flip-card.big .face-art .symbol{font-size:clamp(54px,18vw,84px)}
.face-art .fname{font:600 clamp(10px,2.8vw,13px)/1.2 var(--serif);text-shadow:0 1px 3px #000a}
.flip-card.big .face-art .fname{font-size:clamp(17px,5vw,22px)}
.face-art .rank{position:absolute;top:6%;left:9%;font:700 clamp(10px,2.8vw,13px)/1 var(--serif);color:#ffd36e}
.face-art .rank.bottom{top:auto;left:auto;bottom:6%;right:9%;transform:rotate(180deg)}
.flip-card.big .face-art .rank{font-size:18px}
.new-tag{position:absolute;top:-10px;right:-10px;z-index:3;background:linear-gradient(135deg,#ff4fa3,#ffb347);color:#fff;font:800 11px/1 var(--sans);
  padding:5px 7px;border-radius:999px;box-shadow:0 4px 12px #ff4fa388;animation:tag .6s cubic-bezier(.3,1.6,.5,1) both;pointer-events:none}
@keyframes tag{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(8deg)}}

/* ---------- daily card ---------- */
.daily{display:flex;flex-direction:column;align-items:center;gap:12px;margin:16px 0 18px}
.tap-hint{margin:0;color:#ffd36e;font-weight:600;animation:hint 1.6s ease-in-out infinite}
@keyframes hint{50%{opacity:.45}}
.daily-result{background:#ffffff12;border:1px solid #ffffff22;border-radius:16px;padding:14px 16px;max-width:420px;animation:rise .5s ease-out}
.daily-result p{margin:0 0 8px;color:#efe4fb;line-height:1.5}
.result-name{font:600 22px/1.2 var(--serif);color:#fff!important}
.come-back{font-size:13px;color:#d9c9ef!important;margin:8px 0 0!important}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.mini-link{color:#ffd36e;font-weight:700;text-decoration:none}

.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:#efe4fb}
.stats b{color:#ffd36e;font-size:18px}
.progress{height:10px;border-radius:999px;background:#ffffff1a;margin:10px auto 8px;max-width:360px;overflow:hidden}
.progress span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ffd36e,#ff7ac6,#a98bff);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:6px 0 14px}
.badge{font-size:12px;background:#ffd36e22;border:1px solid #ffd36e66;color:#ffe6a8;padding:4px 9px;border-radius:999px}

/* ---------- buttons, chips, inputs ---------- */
.cta-big{display:block;width:100%;max-width:420px;margin:14px auto 0;padding:16px 18px;border:0;border-radius:16px;cursor:pointer;
  font:800 18px/1.2 var(--sans);color:#2b1450;background:linear-gradient(135deg,#ffe08a,#ffb347 55%,#ff7ac6);box-shadow:0 8px 24px #ff7ac655,inset 0 -3px 0 #0002;
  text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.cta-big:active{transform:scale(.97)}
.cta-big:disabled{opacity:.55}
.cta-big.ghost{background:#ffffff14;color:#fff;border:1px solid #ffffff40;box-shadow:none;font-weight:700;font-size:16px}
.cta-big.alt{background:linear-gradient(135deg,#a98bff,#7c3aed);color:#fff;box-shadow:0 8px 24px #7c3aed55}
.cta-big.shuffling{animation:shuffle .65s ease-in-out}
@keyframes shuffle{20%{transform:rotate(-3deg) scale(.97)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg)}80%{transform:rotate(2deg) scale(1.02)}}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.chip{padding:14px 10px;border-radius:14px;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font:700 16px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip[aria-checked="true"]{background:linear-gradient(135deg,#ffd36e,#ff7ac6);color:#2b1450;border-color:transparent;box-shadow:0 6px 18px #ff7ac655}
.play textarea{width:100%;border-radius:14px;border:1px solid #ffffff33;background:#ffffff12;color:#fff;padding:12px 14px;font:16px/1.4 var(--sans);resize:none}
.play textarea::placeholder{color:#cdbbe6}
.play .options{display:flex;justify-content:space-between;align-items:center;margin:8px 2px 0;font-size:14px;color:#d9c9ef}
.switch{display:flex;align-items:center;gap:8px}
.switch input{width:20px;height:20px;accent-color:#ffb347}
.small{font-size:13px}
.center{text-align:center}

/* ---------- spread ---------- */
.deal-table{margin-top:24px}
.reading-question{font:italic 18px/1.4 var(--serif);color:#fff;margin:0 0 10px}
.dots{display:flex;justify-content:center;gap:8px;margin:0 0 6px}
.dot{width:10px;height:10px;border-radius:50%;background:#ffffff30;transition:background .3s,transform .3s}
.dot.on{background:#ffd36e;transform:scale(1.25);box-shadow:0 0 10px #ffd36e}
.progress-text{color:#ffd36e;font-weight:700;margin:0 0 12px;min-height:1.3em}
.spread{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 8px}
.slot{display:flex;flex-direction:column;align-items:center;gap:6px;width:min(25vw,112px)}
.slot-label{font-size:10.5px;line-height:1.25;letter-spacing:.04em;color:#d9c9ef;min-height:2.6em;display:flex;align-items:flex-end;justify-content:center}
.spread.dealt .slot{animation:deal .55s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i)*110ms)}
@keyframes deal{from{opacity:0;transform:translateY(-60px) rotate(-12deg) scale(.6)}to{opacity:1;transform:none}}
.spread.bonus .slot-label{min-height:0;margin-top:2px;color:#fff;font-weight:600}

/* ---------- result ---------- */
.result{margin-top:26px;padding-top:6px;border-top:1px solid #ffffff22;animation:rise .6s ease-out;text-align:left}
.result .eyebrow,.result .play-title,.result .cta-big{text-align:center}
.insights{list-style:none;padding:0;margin:12px 0}
.insights li{background:#ffffff14;border:1px solid #ffffff22;border-radius:12px;padding:10px 12px;margin:0 0 8px;font-size:15px;line-height:1.45}
.summary{font-size:16px;line-height:1.65;color:#f3eafc}
.reflection{background:linear-gradient(135deg,#ffd36e22,#ff7ac622);border:1px solid #ffd36e55;border-radius:14px;padding:12px 14px;margin:14px 0}
.reflection p{margin:4px 0 0;font:17px/1.5 var(--serif);color:#fff}
#bonus-table{margin-top:18px;text-align:center}
.go-deeper{margin:20px 0 6px;padding:14px;border-radius:16px;background:#ffffff0d;border:1px dashed #ffffff33;text-align:center}
.go-deeper .small{color:#d9c9ef}
.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:18px 0 10px}
.pill{padding:11px 16px;border-radius:999px;border:1px solid #ffffff40;background:#ffffff12;color:#fff;font:700 15px/1 var(--sans);cursor:pointer}
.pill.hot{background:linear-gradient(135deg,#ffd36e,#ff7ac6);color:#2b1450;border:0}
.result .small{color:#cdbbe6}
#status{color:#ffe6a8;margin:12px 0 0;font-weight:600}

/* ---------- bottom sheet ---------- */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:560px;margin:0 auto;max-height:72vh;overflow:auto;padding:10px 20px calc(18px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;background:linear-gradient(180deg,#2b1450,#1b1030);color:#f6eefc;box-shadow:0 -12px 40px #0009;
  transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.sheet.open{transform:none}
.sheet-grip{width:44px;height:5px;border-radius:9px;background:#ffffff44;margin:0 auto 12px}
.sheet .eyebrow{color:#ffd36e;font-size:11px;letter-spacing:.12em;margin:0 0 4px}
.sheet h3{font:600 26px/1.2 var(--serif);margin:0 0 2px;color:#fff}
.sheet-orient{margin:0 0 10px;color:#ffd36e;font-weight:700;font-size:14px}
.sheet p{line-height:1.6;font-size:16px}

/* ---------- toast, fx, sound ---------- */
.toast{position:fixed;top:14px;left:50%;z-index:60;transform:translate(-50%,-140%);padding:11px 18px;border-radius:999px;max-width:92vw;
  background:#1b1030;color:#fff;font:700 15px/1.2 var(--sans);box-shadow:0 10px 30px #0007;border:1px solid #ffffff33;transition:transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.toast.show{transform:translate(-50%,0)}
.toast.gold{background:linear-gradient(135deg,#ffd36e,#ff7ac6);color:#2b1450;border:0}
.fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:70}
.sound-toggle{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid #ffffff44;
  background:#2b1450cc;font-size:20px;cursor:pointer;backdrop-filter:blur(6px)}

@media (min-width:700px){.hero-play,.play{margin-left:0;margin-right:0;padding:34px 34px 38px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- modes + yes/no ---------- */
.modes{display:flex;gap:6px;background:#ffffff12;border:1px solid #ffffff26;border-radius:999px;padding:5px;margin:0 auto 14px;max-width:420px}
.mode{flex:1;padding:11px 8px;border:0;border-radius:999px;background:transparent;color:#e9dcf8;font:700 15px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mode[aria-selected="true"]{background:#fff;color:#2b1450;box-shadow:0 4px 14px #0005}
.spread.yn .slot{width:auto}
.yn-answer{margin-top:14px;animation:rise .5s ease-out}
.yn-word{font:900 clamp(56px,18vw,88px)/1 var(--sans);margin:4px 0 6px;letter-spacing:.02em;animation:slam .55s cubic-bezier(.2,1.6,.4,1) both}
.yn-word{color:#ffd36e;text-shadow:0 0 28px #ffd36e88}
@keyframes slam{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
.yn-card{font:600 20px/1.3 var(--serif);color:#fff;margin:0 0 6px}
.yn-answer .summary{text-align:center}
.daily-share{display:block;margin:10px auto 0}

.care-note{background:#ffffff14;border:1px solid #ffffff33;border-radius:12px;padding:12px 14px;margin:12px 0;font-size:15px;line-height:1.5;color:#f3eafc;text-align:left}
.support{margin-top:20px;padding:18px;border-radius:16px;background:#ffffff14;border:1px solid #ffffff40;text-align:left;animation:rise .4s ease-out}
.support h3{font:600 22px/1.3 var(--serif);margin:0 0 8px;color:#fff}
.support p{line-height:1.55;color:#f3eafc}

/* daily reminder */
.remind{margin:12px 0 0}
.remind-btn{display:block;margin:0 auto}
.remind-state{font-size:13px;color:#d9c9ef!important;margin:8px 0 0!important}
.remind-state button{background:none;border:0;color:#ffd36e;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
.rchips{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.rchip{padding:14px 10px;border-radius:14px;border:1px solid #ffffff33;background:#ffffff10;color:#fff;font:700 16px/1 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rchip[aria-checked="true"]{background:linear-gradient(135deg,#ffd36e,#ff7ac6);color:#2b1450;border-color:transparent;box-shadow:0 6px 18px #ff7ac655}
.r-steps{padding-left:22px;line-height:1.6;color:#fff}
.r-steps li{margin:0 0 8px}
.r-close{display:block;margin:12px auto 0}